From 89d54a9ff170aecb7ccdc7d464763ec137561875 Mon Sep 17 00:00:00 2001 From: limzykenneth Date: Sun, 30 Jul 2023 14:19:58 +0100 Subject: [PATCH] Remove largely unused i18n files --- .lintstagedrc.js | 3 - Gruntfile.js | 7 - i18n-tracking.yml | 7287 ----------------- i18n.js | 101 - package-lock.json | 1149 +-- package.json | 5 +- pontoon-config.toml | 11 - src/data/localization/en/JSON.ftl | 2 - src/data/localization/en/console.ftl | 4 - src/data/localization/en/p5.Amplitude.ftl | 12 - src/data/localization/en/p5.AudioIn.ftl | 27 - src/data/localization/en/p5.AudioVoice.ftl | 4 - src/data/localization/en/p5.BandPass.ftl | 1 - src/data/localization/en/p5.Camera.ftl | 34 - src/data/localization/en/p5.Color.ftl | 14 - src/data/localization/en/p5.Compressor.ftl | 33 - src/data/localization/en/p5.Convolver.ftl | 20 - src/data/localization/en/p5.Delay.ftl | 26 - src/data/localization/en/p5.Distortion.ftl | 15 - src/data/localization/en/p5.EQ.ftl | 7 - src/data/localization/en/p5.Effect.ftl | 18 - src/data/localization/en/p5.Element.ftl | 86 - src/data/localization/en/p5.Envelope.ftl | 55 - src/data/localization/en/p5.FFT.ftl | 33 - src/data/localization/en/p5.File.ftl | 8 - src/data/localization/en/p5.Filter.ftl | 28 - src/data/localization/en/p5.Font.ftl | 17 - src/data/localization/en/p5.Gain.ftl | 10 - src/data/localization/en/p5.Geometry.ftl | 9 - src/data/localization/en/p5.Graphics.ftl | 7 - src/data/localization/en/p5.HighPass.ftl | 1 - src/data/localization/en/p5.Image.ftl | 82 - src/data/localization/en/p5.LowPass.ftl | 1 - src/data/localization/en/p5.MediaElement.ftl | 41 - src/data/localization/en/p5.MonoSynth.ftl | 26 - src/data/localization/en/p5.Noise.ftl | 4 - src/data/localization/en/p5.NumberDict.ftl | 21 - src/data/localization/en/p5.OnsetDetect.ftl | 5 - src/data/localization/en/p5.Oscillator.ftl | 50 - src/data/localization/en/p5.Panner3D.ftl | 39 - src/data/localization/en/p5.Part.ftl | 29 - src/data/localization/en/p5.PeakDetect.ftl | 17 - src/data/localization/en/p5.Phrase.ftl | 7 - src/data/localization/en/p5.PolySynth.ftl | 33 - src/data/localization/en/p5.PrintWriter.ftl | 8 - src/data/localization/en/p5.Pulse.ftl | 5 - src/data/localization/en/p5.Renderer.ftl | 4 - src/data/localization/en/p5.Reverb.ftl | 18 - src/data/localization/en/p5.SawOsc.ftl | 2 - src/data/localization/en/p5.Score.ftl | 10 - src/data/localization/en/p5.Shader.ftl | 8 - src/data/localization/en/p5.SinOsc.ftl | 2 - src/data/localization/en/p5.SoundFile.ftl | 91 - src/data/localization/en/p5.SoundLoop.ftl | 18 - src/data/localization/en/p5.SoundRecorder.ftl | 9 - src/data/localization/en/p5.SqrOsc.ftl | 2 - src/data/localization/en/p5.StringDict.ftl | 1 - src/data/localization/en/p5.Table.ftl | 78 - src/data/localization/en/p5.TableRow.ftl | 22 - src/data/localization/en/p5.TriOsc.ftl | 2 - src/data/localization/en/p5.TypedDict.ftl | 22 - src/data/localization/en/p5.Vector.ftl | 135 - src/data/localization/en/p5.XML.ftl | 46 - src/data/localization/en/p5.ftl | 1556 ---- src/data/localization/en/p5.sound.ftl | 0 src/data/localization/en/root.ftl | 63 - src/data/localization/es/JSON.ftl | 0 src/data/localization/es/console.ftl | 0 src/data/localization/es/p5.Amplitude.ftl | 0 src/data/localization/es/p5.AudioIn.ftl | 0 src/data/localization/es/p5.AudioVoice.ftl | 0 src/data/localization/es/p5.BandPass.ftl | 0 src/data/localization/es/p5.Camera.ftl | 0 src/data/localization/es/p5.Color.ftl | 11 - src/data/localization/es/p5.Compressor.ftl | 0 src/data/localization/es/p5.Convolver.ftl | 0 src/data/localization/es/p5.Delay.ftl | 0 src/data/localization/es/p5.Distortion.ftl | 0 src/data/localization/es/p5.EQ.ftl | 0 src/data/localization/es/p5.Effect.ftl | 0 src/data/localization/es/p5.Element.ftl | 3 - src/data/localization/es/p5.Envelope.ftl | 0 src/data/localization/es/p5.FFT.ftl | 0 src/data/localization/es/p5.File.ftl | 0 src/data/localization/es/p5.Filter.ftl | 0 src/data/localization/es/p5.Font.ftl | 2 - src/data/localization/es/p5.Gain.ftl | 0 src/data/localization/es/p5.Geometry.ftl | 0 src/data/localization/es/p5.Graphics.ftl | 7 - src/data/localization/es/p5.HighPass.ftl | 0 src/data/localization/es/p5.Image.ftl | 30 - src/data/localization/es/p5.LowPass.ftl | 0 src/data/localization/es/p5.MediaElement.ftl | 24 - src/data/localization/es/p5.MonoSynth.ftl | 0 src/data/localization/es/p5.Noise.ftl | 0 src/data/localization/es/p5.NumberDict.ftl | 8 - src/data/localization/es/p5.OnsetDetect.ftl | 0 src/data/localization/es/p5.Oscillator.ftl | 0 src/data/localization/es/p5.Panner3D.ftl | 0 src/data/localization/es/p5.Part.ftl | 0 src/data/localization/es/p5.PeakDetect.ftl | 0 src/data/localization/es/p5.Phrase.ftl | 0 src/data/localization/es/p5.PolySynth.ftl | 0 src/data/localization/es/p5.PrintWriter.ftl | 0 src/data/localization/es/p5.Pulse.ftl | 0 src/data/localization/es/p5.Renderer.ftl | 0 src/data/localization/es/p5.Reverb.ftl | 0 src/data/localization/es/p5.SawOsc.ftl | 0 src/data/localization/es/p5.Score.ftl | 0 src/data/localization/es/p5.Shader.ftl | 5 - src/data/localization/es/p5.SinOsc.ftl | 0 src/data/localization/es/p5.SoundFile.ftl | 0 src/data/localization/es/p5.SoundLoop.ftl | 0 src/data/localization/es/p5.SoundRecorder.ftl | 0 src/data/localization/es/p5.SqrOsc.ftl | 0 src/data/localization/es/p5.StringDict.ftl | 0 src/data/localization/es/p5.Table.ftl | 29 - src/data/localization/es/p5.TableRow.ftl | 3 - src/data/localization/es/p5.TriOsc.ftl | 0 src/data/localization/es/p5.TypedDict.ftl | 0 src/data/localization/es/p5.Vector.ftl | 11 - src/data/localization/es/p5.XML.ftl | 1 - src/data/localization/es/p5.ftl | 864 -- src/data/localization/es/p5.sound.ftl | 0 src/data/localization/es/root.ftl | 63 - src/data/localization/hi-IN/JSON.ftl | 0 src/data/localization/hi-IN/console.ftl | 0 src/data/localization/hi-IN/p5.Amplitude.ftl | 0 src/data/localization/hi-IN/p5.AudioIn.ftl | 0 src/data/localization/hi-IN/p5.AudioVoice.ftl | 0 src/data/localization/hi-IN/p5.BandPass.ftl | 0 src/data/localization/hi-IN/p5.Camera.ftl | 0 src/data/localization/hi-IN/p5.Color.ftl | 0 src/data/localization/hi-IN/p5.Compressor.ftl | 0 src/data/localization/hi-IN/p5.Convolver.ftl | 0 src/data/localization/hi-IN/p5.Delay.ftl | 0 src/data/localization/hi-IN/p5.Distortion.ftl | 0 src/data/localization/hi-IN/p5.EQ.ftl | 0 src/data/localization/hi-IN/p5.Effect.ftl | 0 src/data/localization/hi-IN/p5.Element.ftl | 0 src/data/localization/hi-IN/p5.Envelope.ftl | 0 src/data/localization/hi-IN/p5.FFT.ftl | 0 src/data/localization/hi-IN/p5.File.ftl | 0 src/data/localization/hi-IN/p5.Filter.ftl | 0 src/data/localization/hi-IN/p5.Font.ftl | 0 src/data/localization/hi-IN/p5.Gain.ftl | 0 src/data/localization/hi-IN/p5.Geometry.ftl | 0 src/data/localization/hi-IN/p5.Graphics.ftl | 0 src/data/localization/hi-IN/p5.HighPass.ftl | 0 src/data/localization/hi-IN/p5.Image.ftl | 0 src/data/localization/hi-IN/p5.LowPass.ftl | 0 .../localization/hi-IN/p5.MediaElement.ftl | 0 src/data/localization/hi-IN/p5.MonoSynth.ftl | 0 src/data/localization/hi-IN/p5.Noise.ftl | 0 src/data/localization/hi-IN/p5.NumberDict.ftl | 0 .../localization/hi-IN/p5.OnsetDetect.ftl | 0 src/data/localization/hi-IN/p5.Oscillator.ftl | 0 src/data/localization/hi-IN/p5.Panner3D.ftl | 0 src/data/localization/hi-IN/p5.Part.ftl | 0 src/data/localization/hi-IN/p5.PeakDetect.ftl | 0 src/data/localization/hi-IN/p5.Phrase.ftl | 0 src/data/localization/hi-IN/p5.PolySynth.ftl | 0 .../localization/hi-IN/p5.PrintWriter.ftl | 0 src/data/localization/hi-IN/p5.Pulse.ftl | 0 src/data/localization/hi-IN/p5.Renderer.ftl | 0 src/data/localization/hi-IN/p5.Reverb.ftl | 0 src/data/localization/hi-IN/p5.SawOsc.ftl | 0 src/data/localization/hi-IN/p5.Score.ftl | 0 src/data/localization/hi-IN/p5.Shader.ftl | 0 src/data/localization/hi-IN/p5.SinOsc.ftl | 0 src/data/localization/hi-IN/p5.SoundFile.ftl | 0 src/data/localization/hi-IN/p5.SoundLoop.ftl | 0 .../localization/hi-IN/p5.SoundRecorder.ftl | 0 src/data/localization/hi-IN/p5.SqrOsc.ftl | 0 src/data/localization/hi-IN/p5.StringDict.ftl | 0 src/data/localization/hi-IN/p5.Table.ftl | 0 src/data/localization/hi-IN/p5.TableRow.ftl | 0 src/data/localization/hi-IN/p5.TriOsc.ftl | 0 src/data/localization/hi-IN/p5.TypedDict.ftl | 0 src/data/localization/hi-IN/p5.Vector.ftl | 0 src/data/localization/hi-IN/p5.XML.ftl | 0 src/data/localization/hi-IN/p5.ftl | 151 - src/data/localization/hi-IN/p5.sound.ftl | 0 src/data/localization/hi-IN/root.ftl | 63 - src/data/localization/ko/JSON.ftl | 2 - src/data/localization/ko/console.ftl | 3 - src/data/localization/ko/p5.Amplitude.ftl | 0 src/data/localization/ko/p5.AudioIn.ftl | 0 src/data/localization/ko/p5.AudioVoice.ftl | 0 src/data/localization/ko/p5.BandPass.ftl | 0 src/data/localization/ko/p5.Camera.ftl | 42 - src/data/localization/ko/p5.Color.ftl | 11 - src/data/localization/ko/p5.Compressor.ftl | 0 src/data/localization/ko/p5.Convolver.ftl | 0 src/data/localization/ko/p5.Delay.ftl | 0 src/data/localization/ko/p5.Distortion.ftl | 0 src/data/localization/ko/p5.EQ.ftl | 0 src/data/localization/ko/p5.Effect.ftl | 0 src/data/localization/ko/p5.Element.ftl | 87 - src/data/localization/ko/p5.Envelope.ftl | 0 src/data/localization/ko/p5.FFT.ftl | 0 src/data/localization/ko/p5.File.ftl | 8 - src/data/localization/ko/p5.Filter.ftl | 0 src/data/localization/ko/p5.Font.ftl | 15 - src/data/localization/ko/p5.Gain.ftl | 0 src/data/localization/ko/p5.Geometry.ftl | 9 - src/data/localization/ko/p5.Graphics.ftl | 7 - src/data/localization/ko/p5.HighPass.ftl | 0 src/data/localization/ko/p5.Image.ftl | 0 src/data/localization/ko/p5.LowPass.ftl | 0 src/data/localization/ko/p5.MediaElement.ftl | 41 - src/data/localization/ko/p5.MonoSynth.ftl | 0 src/data/localization/ko/p5.Noise.ftl | 0 src/data/localization/ko/p5.NumberDict.ftl | 21 - src/data/localization/ko/p5.OnsetDetect.ftl | 0 src/data/localization/ko/p5.Oscillator.ftl | 0 src/data/localization/ko/p5.Panner3D.ftl | 0 src/data/localization/ko/p5.Part.ftl | 0 src/data/localization/ko/p5.PeakDetect.ftl | 0 src/data/localization/ko/p5.Phrase.ftl | 0 src/data/localization/ko/p5.PolySynth.ftl | 0 src/data/localization/ko/p5.PrintWriter.ftl | 8 - src/data/localization/ko/p5.Pulse.ftl | 0 src/data/localization/ko/p5.Renderer.ftl | 4 - src/data/localization/ko/p5.Reverb.ftl | 0 src/data/localization/ko/p5.SawOsc.ftl | 0 src/data/localization/ko/p5.Score.ftl | 0 src/data/localization/ko/p5.Shader.ftl | 7 - src/data/localization/ko/p5.SinOsc.ftl | 0 src/data/localization/ko/p5.SoundFile.ftl | 0 src/data/localization/ko/p5.SoundLoop.ftl | 0 src/data/localization/ko/p5.SoundRecorder.ftl | 0 src/data/localization/ko/p5.SqrOsc.ftl | 0 src/data/localization/ko/p5.StringDict.ftl | 1 - src/data/localization/ko/p5.Table.ftl | 76 - src/data/localization/ko/p5.TableRow.ftl | 23 - src/data/localization/ko/p5.TriOsc.ftl | 0 src/data/localization/ko/p5.TypedDict.ftl | 11 - src/data/localization/ko/p5.Vector.ftl | 133 - src/data/localization/ko/p5.XML.ftl | 46 - src/data/localization/ko/p5.ftl | 1552 ---- src/data/localization/ko/p5.sound.ftl | 0 src/data/localization/ko/root.ftl | 53 - src/data/localization/pt-BR/JSON.ftl | 2 - src/data/localization/pt-BR/console.ftl | 4 - src/data/localization/pt-BR/p5.Amplitude.ftl | 0 src/data/localization/pt-BR/p5.AudioIn.ftl | 0 src/data/localization/pt-BR/p5.AudioVoice.ftl | 0 src/data/localization/pt-BR/p5.BandPass.ftl | 0 src/data/localization/pt-BR/p5.Camera.ftl | 4 - src/data/localization/pt-BR/p5.Color.ftl | 14 - src/data/localization/pt-BR/p5.Compressor.ftl | 0 src/data/localization/pt-BR/p5.Convolver.ftl | 0 src/data/localization/pt-BR/p5.Delay.ftl | 0 src/data/localization/pt-BR/p5.Distortion.ftl | 0 src/data/localization/pt-BR/p5.EQ.ftl | 0 src/data/localization/pt-BR/p5.Effect.ftl | 0 src/data/localization/pt-BR/p5.Element.ftl | 57 - src/data/localization/pt-BR/p5.Envelope.ftl | 0 src/data/localization/pt-BR/p5.FFT.ftl | 0 src/data/localization/pt-BR/p5.File.ftl | 0 src/data/localization/pt-BR/p5.Filter.ftl | 0 src/data/localization/pt-BR/p5.Font.ftl | 17 - src/data/localization/pt-BR/p5.Gain.ftl | 0 src/data/localization/pt-BR/p5.Geometry.ftl | 0 src/data/localization/pt-BR/p5.Graphics.ftl | 0 src/data/localization/pt-BR/p5.HighPass.ftl | 0 src/data/localization/pt-BR/p5.Image.ftl | 84 - src/data/localization/pt-BR/p5.LowPass.ftl | 0 .../localization/pt-BR/p5.MediaElement.ftl | 0 src/data/localization/pt-BR/p5.MonoSynth.ftl | 0 src/data/localization/pt-BR/p5.Noise.ftl | 0 src/data/localization/pt-BR/p5.NumberDict.ftl | 0 src/data/localization/pt-BR/p5.Oscillator.ftl | 0 src/data/localization/pt-BR/p5.Panner3D.ftl | 0 src/data/localization/pt-BR/p5.Part.ftl | 0 src/data/localization/pt-BR/p5.PeakDetect.ftl | 0 src/data/localization/pt-BR/p5.Phrase.ftl | 0 src/data/localization/pt-BR/p5.PolySynth.ftl | 0 .../localization/pt-BR/p5.PrintWriter.ftl | 0 src/data/localization/pt-BR/p5.Pulse.ftl | 0 src/data/localization/pt-BR/p5.Renderer.ftl | 0 src/data/localization/pt-BR/p5.Reverb.ftl | 0 src/data/localization/pt-BR/p5.SawOsc.ftl | 0 src/data/localization/pt-BR/p5.Score.ftl | 0 src/data/localization/pt-BR/p5.Shader.ftl | 0 src/data/localization/pt-BR/p5.Signal.ftl | 0 src/data/localization/pt-BR/p5.SinOsc.ftl | 0 src/data/localization/pt-BR/p5.SoundFile.ftl | 0 src/data/localization/pt-BR/p5.SoundLoop.ftl | 0 .../localization/pt-BR/p5.SoundRecorder.ftl | 0 src/data/localization/pt-BR/p5.SqrOsc.ftl | 0 src/data/localization/pt-BR/p5.StringDict.ftl | 0 src/data/localization/pt-BR/p5.Table.ftl | 0 src/data/localization/pt-BR/p5.TableRow.ftl | 0 src/data/localization/pt-BR/p5.TriOsc.ftl | 0 src/data/localization/pt-BR/p5.TypedDict.ftl | 0 src/data/localization/pt-BR/p5.Vector.ftl | 98 - src/data/localization/pt-BR/p5.XML.ftl | 0 src/data/localization/pt-BR/p5.ftl | 1369 ---- src/data/localization/pt-BR/p5.sound.ftl | 0 src/data/localization/pt-BR/root.ftl | 63 - src/data/localization/zh-CN/JSON.ftl | 0 src/data/localization/zh-CN/console.ftl | 0 src/data/localization/zh-CN/p5.Amplitude.ftl | 0 src/data/localization/zh-CN/p5.AudioIn.ftl | 0 src/data/localization/zh-CN/p5.AudioVoice.ftl | 0 src/data/localization/zh-CN/p5.BandPass.ftl | 0 src/data/localization/zh-CN/p5.Camera.ftl | 0 src/data/localization/zh-CN/p5.Color.ftl | 0 src/data/localization/zh-CN/p5.Compressor.ftl | 0 src/data/localization/zh-CN/p5.Convolver.ftl | 0 src/data/localization/zh-CN/p5.Delay.ftl | 0 src/data/localization/zh-CN/p5.Distortion.ftl | 0 src/data/localization/zh-CN/p5.EQ.ftl | 0 src/data/localization/zh-CN/p5.Effect.ftl | 0 src/data/localization/zh-CN/p5.Element.ftl | 0 src/data/localization/zh-CN/p5.Envelope.ftl | 0 src/data/localization/zh-CN/p5.FFT.ftl | 0 src/data/localization/zh-CN/p5.File.ftl | 0 src/data/localization/zh-CN/p5.Filter.ftl | 0 src/data/localization/zh-CN/p5.Font.ftl | 0 src/data/localization/zh-CN/p5.Gain.ftl | 0 src/data/localization/zh-CN/p5.Geometry.ftl | 0 src/data/localization/zh-CN/p5.Graphics.ftl | 0 src/data/localization/zh-CN/p5.HighPass.ftl | 0 src/data/localization/zh-CN/p5.Image.ftl | 0 src/data/localization/zh-CN/p5.LowPass.ftl | 0 .../localization/zh-CN/p5.MediaElement.ftl | 0 src/data/localization/zh-CN/p5.MonoSynth.ftl | 0 src/data/localization/zh-CN/p5.Noise.ftl | 0 src/data/localization/zh-CN/p5.NumberDict.ftl | 0 .../localization/zh-CN/p5.OnsetDetect.ftl | 0 src/data/localization/zh-CN/p5.Oscillator.ftl | 0 src/data/localization/zh-CN/p5.Panner3D.ftl | 0 src/data/localization/zh-CN/p5.Part.ftl | 0 src/data/localization/zh-CN/p5.PeakDetect.ftl | 0 src/data/localization/zh-CN/p5.Phrase.ftl | 0 src/data/localization/zh-CN/p5.PolySynth.ftl | 0 .../localization/zh-CN/p5.PrintWriter.ftl | 0 src/data/localization/zh-CN/p5.Pulse.ftl | 0 src/data/localization/zh-CN/p5.Renderer.ftl | 0 src/data/localization/zh-CN/p5.Reverb.ftl | 0 src/data/localization/zh-CN/p5.SawOsc.ftl | 0 src/data/localization/zh-CN/p5.Score.ftl | 0 src/data/localization/zh-CN/p5.Shader.ftl | 0 src/data/localization/zh-CN/p5.SinOsc.ftl | 0 src/data/localization/zh-CN/p5.SoundFile.ftl | 0 src/data/localization/zh-CN/p5.SoundLoop.ftl | 0 .../localization/zh-CN/p5.SoundRecorder.ftl | 0 src/data/localization/zh-CN/p5.SqrOsc.ftl | 0 src/data/localization/zh-CN/p5.StringDict.ftl | 0 src/data/localization/zh-CN/p5.Table.ftl | 0 src/data/localization/zh-CN/p5.TableRow.ftl | 0 src/data/localization/zh-CN/p5.TriOsc.ftl | 0 src/data/localization/zh-CN/p5.TypedDict.ftl | 0 src/data/localization/zh-CN/p5.Vector.ftl | 0 src/data/localization/zh-CN/p5.XML.ftl | 0 src/data/localization/zh-CN/p5.ftl | 948 --- src/data/localization/zh-CN/p5.sound.ftl | 0 src/data/localization/zh-CN/root.ftl | 63 - tasks/fluent.js | 93 - tasks/scripts/fluentConverter.js | 136 - 363 files changed, 88 insertions(+), 17790 deletions(-) delete mode 100644 .lintstagedrc.js delete mode 100644 i18n-tracking.yml delete mode 100644 i18n.js delete mode 100644 pontoon-config.toml delete mode 100644 src/data/localization/en/JSON.ftl delete mode 100644 src/data/localization/en/console.ftl delete mode 100644 src/data/localization/en/p5.Amplitude.ftl delete mode 100644 src/data/localization/en/p5.AudioIn.ftl delete mode 100644 src/data/localization/en/p5.AudioVoice.ftl delete mode 100644 src/data/localization/en/p5.BandPass.ftl delete mode 100644 src/data/localization/en/p5.Camera.ftl delete mode 100644 src/data/localization/en/p5.Color.ftl delete mode 100644 src/data/localization/en/p5.Compressor.ftl delete mode 100644 src/data/localization/en/p5.Convolver.ftl delete mode 100644 src/data/localization/en/p5.Delay.ftl delete mode 100644 src/data/localization/en/p5.Distortion.ftl delete mode 100644 src/data/localization/en/p5.EQ.ftl delete mode 100644 src/data/localization/en/p5.Effect.ftl delete mode 100644 src/data/localization/en/p5.Element.ftl delete mode 100644 src/data/localization/en/p5.Envelope.ftl delete mode 100644 src/data/localization/en/p5.FFT.ftl delete mode 100644 src/data/localization/en/p5.File.ftl delete mode 100644 src/data/localization/en/p5.Filter.ftl delete mode 100644 src/data/localization/en/p5.Font.ftl delete mode 100644 src/data/localization/en/p5.Gain.ftl delete mode 100644 src/data/localization/en/p5.Geometry.ftl delete mode 100644 src/data/localization/en/p5.Graphics.ftl delete mode 100644 src/data/localization/en/p5.HighPass.ftl delete mode 100644 src/data/localization/en/p5.Image.ftl delete mode 100644 src/data/localization/en/p5.LowPass.ftl delete mode 100644 src/data/localization/en/p5.MediaElement.ftl delete mode 100644 src/data/localization/en/p5.MonoSynth.ftl delete mode 100644 src/data/localization/en/p5.Noise.ftl delete mode 100644 src/data/localization/en/p5.NumberDict.ftl delete mode 100644 src/data/localization/en/p5.OnsetDetect.ftl delete mode 100644 src/data/localization/en/p5.Oscillator.ftl delete mode 100644 src/data/localization/en/p5.Panner3D.ftl delete mode 100644 src/data/localization/en/p5.Part.ftl delete mode 100644 src/data/localization/en/p5.PeakDetect.ftl delete mode 100644 src/data/localization/en/p5.Phrase.ftl delete mode 100644 src/data/localization/en/p5.PolySynth.ftl delete mode 100644 src/data/localization/en/p5.PrintWriter.ftl delete mode 100644 src/data/localization/en/p5.Pulse.ftl delete mode 100644 src/data/localization/en/p5.Renderer.ftl delete mode 100644 src/data/localization/en/p5.Reverb.ftl delete mode 100644 src/data/localization/en/p5.SawOsc.ftl delete mode 100644 src/data/localization/en/p5.Score.ftl delete mode 100644 src/data/localization/en/p5.Shader.ftl delete mode 100644 src/data/localization/en/p5.SinOsc.ftl delete mode 100644 src/data/localization/en/p5.SoundFile.ftl delete mode 100644 src/data/localization/en/p5.SoundLoop.ftl delete mode 100644 src/data/localization/en/p5.SoundRecorder.ftl delete mode 100644 src/data/localization/en/p5.SqrOsc.ftl delete mode 100644 src/data/localization/en/p5.StringDict.ftl delete mode 100644 src/data/localization/en/p5.Table.ftl delete mode 100644 src/data/localization/en/p5.TableRow.ftl delete mode 100644 src/data/localization/en/p5.TriOsc.ftl delete mode 100644 src/data/localization/en/p5.TypedDict.ftl delete mode 100644 src/data/localization/en/p5.Vector.ftl delete mode 100644 src/data/localization/en/p5.XML.ftl delete mode 100644 src/data/localization/en/p5.ftl delete mode 100644 src/data/localization/en/p5.sound.ftl delete mode 100644 src/data/localization/en/root.ftl delete mode 100644 src/data/localization/es/JSON.ftl delete mode 100644 src/data/localization/es/console.ftl delete mode 100644 src/data/localization/es/p5.Amplitude.ftl delete mode 100644 src/data/localization/es/p5.AudioIn.ftl delete mode 100644 src/data/localization/es/p5.AudioVoice.ftl delete mode 100644 src/data/localization/es/p5.BandPass.ftl delete mode 100644 src/data/localization/es/p5.Camera.ftl delete mode 100644 src/data/localization/es/p5.Color.ftl delete mode 100644 src/data/localization/es/p5.Compressor.ftl delete mode 100644 src/data/localization/es/p5.Convolver.ftl delete mode 100644 src/data/localization/es/p5.Delay.ftl delete mode 100644 src/data/localization/es/p5.Distortion.ftl delete mode 100644 src/data/localization/es/p5.EQ.ftl delete mode 100644 src/data/localization/es/p5.Effect.ftl delete mode 100644 src/data/localization/es/p5.Element.ftl delete mode 100644 src/data/localization/es/p5.Envelope.ftl delete mode 100644 src/data/localization/es/p5.FFT.ftl delete mode 100644 src/data/localization/es/p5.File.ftl delete mode 100644 src/data/localization/es/p5.Filter.ftl delete mode 100644 src/data/localization/es/p5.Font.ftl delete mode 100644 src/data/localization/es/p5.Gain.ftl delete mode 100644 src/data/localization/es/p5.Geometry.ftl delete mode 100644 src/data/localization/es/p5.Graphics.ftl delete mode 100644 src/data/localization/es/p5.HighPass.ftl delete mode 100644 src/data/localization/es/p5.Image.ftl delete mode 100644 src/data/localization/es/p5.LowPass.ftl delete mode 100644 src/data/localization/es/p5.MediaElement.ftl delete mode 100644 src/data/localization/es/p5.MonoSynth.ftl delete mode 100644 src/data/localization/es/p5.Noise.ftl delete mode 100644 src/data/localization/es/p5.NumberDict.ftl delete mode 100644 src/data/localization/es/p5.OnsetDetect.ftl delete mode 100644 src/data/localization/es/p5.Oscillator.ftl delete mode 100644 src/data/localization/es/p5.Panner3D.ftl delete mode 100644 src/data/localization/es/p5.Part.ftl delete mode 100644 src/data/localization/es/p5.PeakDetect.ftl delete mode 100644 src/data/localization/es/p5.Phrase.ftl delete mode 100644 src/data/localization/es/p5.PolySynth.ftl delete mode 100644 src/data/localization/es/p5.PrintWriter.ftl delete mode 100644 src/data/localization/es/p5.Pulse.ftl delete mode 100644 src/data/localization/es/p5.Renderer.ftl delete mode 100644 src/data/localization/es/p5.Reverb.ftl delete mode 100644 src/data/localization/es/p5.SawOsc.ftl delete mode 100644 src/data/localization/es/p5.Score.ftl delete mode 100644 src/data/localization/es/p5.Shader.ftl delete mode 100644 src/data/localization/es/p5.SinOsc.ftl delete mode 100644 src/data/localization/es/p5.SoundFile.ftl delete mode 100644 src/data/localization/es/p5.SoundLoop.ftl delete mode 100644 src/data/localization/es/p5.SoundRecorder.ftl delete mode 100644 src/data/localization/es/p5.SqrOsc.ftl delete mode 100644 src/data/localization/es/p5.StringDict.ftl delete mode 100644 src/data/localization/es/p5.Table.ftl delete mode 100644 src/data/localization/es/p5.TableRow.ftl delete mode 100644 src/data/localization/es/p5.TriOsc.ftl delete mode 100644 src/data/localization/es/p5.TypedDict.ftl delete mode 100644 src/data/localization/es/p5.Vector.ftl delete mode 100644 src/data/localization/es/p5.XML.ftl delete mode 100644 src/data/localization/es/p5.ftl delete mode 100644 src/data/localization/es/p5.sound.ftl delete mode 100644 src/data/localization/es/root.ftl delete mode 100644 src/data/localization/hi-IN/JSON.ftl delete mode 100644 src/data/localization/hi-IN/console.ftl delete mode 100644 src/data/localization/hi-IN/p5.Amplitude.ftl delete mode 100644 src/data/localization/hi-IN/p5.AudioIn.ftl delete mode 100644 src/data/localization/hi-IN/p5.AudioVoice.ftl delete mode 100644 src/data/localization/hi-IN/p5.BandPass.ftl delete mode 100644 src/data/localization/hi-IN/p5.Camera.ftl delete mode 100644 src/data/localization/hi-IN/p5.Color.ftl delete mode 100644 src/data/localization/hi-IN/p5.Compressor.ftl delete mode 100644 src/data/localization/hi-IN/p5.Convolver.ftl delete mode 100644 src/data/localization/hi-IN/p5.Delay.ftl delete mode 100644 src/data/localization/hi-IN/p5.Distortion.ftl delete mode 100644 src/data/localization/hi-IN/p5.EQ.ftl delete mode 100644 src/data/localization/hi-IN/p5.Effect.ftl delete mode 100644 src/data/localization/hi-IN/p5.Element.ftl delete mode 100644 src/data/localization/hi-IN/p5.Envelope.ftl delete mode 100644 src/data/localization/hi-IN/p5.FFT.ftl delete mode 100644 src/data/localization/hi-IN/p5.File.ftl delete mode 100644 src/data/localization/hi-IN/p5.Filter.ftl delete mode 100644 src/data/localization/hi-IN/p5.Font.ftl delete mode 100644 src/data/localization/hi-IN/p5.Gain.ftl delete mode 100644 src/data/localization/hi-IN/p5.Geometry.ftl delete mode 100644 src/data/localization/hi-IN/p5.Graphics.ftl delete mode 100644 src/data/localization/hi-IN/p5.HighPass.ftl delete mode 100644 src/data/localization/hi-IN/p5.Image.ftl delete mode 100644 src/data/localization/hi-IN/p5.LowPass.ftl delete mode 100644 src/data/localization/hi-IN/p5.MediaElement.ftl delete mode 100644 src/data/localization/hi-IN/p5.MonoSynth.ftl delete mode 100644 src/data/localization/hi-IN/p5.Noise.ftl delete mode 100644 src/data/localization/hi-IN/p5.NumberDict.ftl delete mode 100644 src/data/localization/hi-IN/p5.OnsetDetect.ftl delete mode 100644 src/data/localization/hi-IN/p5.Oscillator.ftl delete mode 100644 src/data/localization/hi-IN/p5.Panner3D.ftl delete mode 100644 src/data/localization/hi-IN/p5.Part.ftl delete mode 100644 src/data/localization/hi-IN/p5.PeakDetect.ftl delete mode 100644 src/data/localization/hi-IN/p5.Phrase.ftl delete mode 100644 src/data/localization/hi-IN/p5.PolySynth.ftl delete mode 100644 src/data/localization/hi-IN/p5.PrintWriter.ftl delete mode 100644 src/data/localization/hi-IN/p5.Pulse.ftl delete mode 100644 src/data/localization/hi-IN/p5.Renderer.ftl delete mode 100644 src/data/localization/hi-IN/p5.Reverb.ftl delete mode 100644 src/data/localization/hi-IN/p5.SawOsc.ftl delete mode 100644 src/data/localization/hi-IN/p5.Score.ftl delete mode 100644 src/data/localization/hi-IN/p5.Shader.ftl delete mode 100644 src/data/localization/hi-IN/p5.SinOsc.ftl delete mode 100644 src/data/localization/hi-IN/p5.SoundFile.ftl delete mode 100644 src/data/localization/hi-IN/p5.SoundLoop.ftl delete mode 100644 src/data/localization/hi-IN/p5.SoundRecorder.ftl delete mode 100644 src/data/localization/hi-IN/p5.SqrOsc.ftl delete mode 100644 src/data/localization/hi-IN/p5.StringDict.ftl delete mode 100644 src/data/localization/hi-IN/p5.Table.ftl delete mode 100644 src/data/localization/hi-IN/p5.TableRow.ftl delete mode 100644 src/data/localization/hi-IN/p5.TriOsc.ftl delete mode 100644 src/data/localization/hi-IN/p5.TypedDict.ftl delete mode 100644 src/data/localization/hi-IN/p5.Vector.ftl delete mode 100644 src/data/localization/hi-IN/p5.XML.ftl delete mode 100644 src/data/localization/hi-IN/p5.ftl delete mode 100644 src/data/localization/hi-IN/p5.sound.ftl delete mode 100644 src/data/localization/hi-IN/root.ftl delete mode 100644 src/data/localization/ko/JSON.ftl delete mode 100644 src/data/localization/ko/console.ftl delete mode 100644 src/data/localization/ko/p5.Amplitude.ftl delete mode 100644 src/data/localization/ko/p5.AudioIn.ftl delete mode 100644 src/data/localization/ko/p5.AudioVoice.ftl delete mode 100644 src/data/localization/ko/p5.BandPass.ftl delete mode 100644 src/data/localization/ko/p5.Camera.ftl delete mode 100644 src/data/localization/ko/p5.Color.ftl delete mode 100644 src/data/localization/ko/p5.Compressor.ftl delete mode 100644 src/data/localization/ko/p5.Convolver.ftl delete mode 100644 src/data/localization/ko/p5.Delay.ftl delete mode 100644 src/data/localization/ko/p5.Distortion.ftl delete mode 100644 src/data/localization/ko/p5.EQ.ftl delete mode 100644 src/data/localization/ko/p5.Effect.ftl delete mode 100644 src/data/localization/ko/p5.Element.ftl delete mode 100644 src/data/localization/ko/p5.Envelope.ftl delete mode 100644 src/data/localization/ko/p5.FFT.ftl delete mode 100644 src/data/localization/ko/p5.File.ftl delete mode 100644 src/data/localization/ko/p5.Filter.ftl delete mode 100644 src/data/localization/ko/p5.Font.ftl delete mode 100644 src/data/localization/ko/p5.Gain.ftl delete mode 100644 src/data/localization/ko/p5.Geometry.ftl delete mode 100644 src/data/localization/ko/p5.Graphics.ftl delete mode 100644 src/data/localization/ko/p5.HighPass.ftl delete mode 100644 src/data/localization/ko/p5.Image.ftl delete mode 100644 src/data/localization/ko/p5.LowPass.ftl delete mode 100644 src/data/localization/ko/p5.MediaElement.ftl delete mode 100644 src/data/localization/ko/p5.MonoSynth.ftl delete mode 100644 src/data/localization/ko/p5.Noise.ftl delete mode 100644 src/data/localization/ko/p5.NumberDict.ftl delete mode 100644 src/data/localization/ko/p5.OnsetDetect.ftl delete mode 100644 src/data/localization/ko/p5.Oscillator.ftl delete mode 100644 src/data/localization/ko/p5.Panner3D.ftl delete mode 100644 src/data/localization/ko/p5.Part.ftl delete mode 100644 src/data/localization/ko/p5.PeakDetect.ftl delete mode 100644 src/data/localization/ko/p5.Phrase.ftl delete mode 100644 src/data/localization/ko/p5.PolySynth.ftl delete mode 100644 src/data/localization/ko/p5.PrintWriter.ftl delete mode 100644 src/data/localization/ko/p5.Pulse.ftl delete mode 100644 src/data/localization/ko/p5.Renderer.ftl delete mode 100644 src/data/localization/ko/p5.Reverb.ftl delete mode 100644 src/data/localization/ko/p5.SawOsc.ftl delete mode 100644 src/data/localization/ko/p5.Score.ftl delete mode 100644 src/data/localization/ko/p5.Shader.ftl delete mode 100644 src/data/localization/ko/p5.SinOsc.ftl delete mode 100644 src/data/localization/ko/p5.SoundFile.ftl delete mode 100644 src/data/localization/ko/p5.SoundLoop.ftl delete mode 100644 src/data/localization/ko/p5.SoundRecorder.ftl delete mode 100644 src/data/localization/ko/p5.SqrOsc.ftl delete mode 100644 src/data/localization/ko/p5.StringDict.ftl delete mode 100644 src/data/localization/ko/p5.Table.ftl delete mode 100644 src/data/localization/ko/p5.TableRow.ftl delete mode 100644 src/data/localization/ko/p5.TriOsc.ftl delete mode 100644 src/data/localization/ko/p5.TypedDict.ftl delete mode 100644 src/data/localization/ko/p5.Vector.ftl delete mode 100644 src/data/localization/ko/p5.XML.ftl delete mode 100644 src/data/localization/ko/p5.ftl delete mode 100644 src/data/localization/ko/p5.sound.ftl delete mode 100644 src/data/localization/ko/root.ftl delete mode 100644 src/data/localization/pt-BR/JSON.ftl delete mode 100644 src/data/localization/pt-BR/console.ftl delete mode 100644 src/data/localization/pt-BR/p5.Amplitude.ftl delete mode 100644 src/data/localization/pt-BR/p5.AudioIn.ftl delete mode 100644 src/data/localization/pt-BR/p5.AudioVoice.ftl delete mode 100644 src/data/localization/pt-BR/p5.BandPass.ftl delete mode 100644 src/data/localization/pt-BR/p5.Camera.ftl delete mode 100644 src/data/localization/pt-BR/p5.Color.ftl delete mode 100644 src/data/localization/pt-BR/p5.Compressor.ftl delete mode 100644 src/data/localization/pt-BR/p5.Convolver.ftl delete mode 100644 src/data/localization/pt-BR/p5.Delay.ftl delete mode 100644 src/data/localization/pt-BR/p5.Distortion.ftl delete mode 100644 src/data/localization/pt-BR/p5.EQ.ftl delete mode 100644 src/data/localization/pt-BR/p5.Effect.ftl delete mode 100644 src/data/localization/pt-BR/p5.Element.ftl delete mode 100644 src/data/localization/pt-BR/p5.Envelope.ftl delete mode 100644 src/data/localization/pt-BR/p5.FFT.ftl delete mode 100644 src/data/localization/pt-BR/p5.File.ftl delete mode 100644 src/data/localization/pt-BR/p5.Filter.ftl delete mode 100644 src/data/localization/pt-BR/p5.Font.ftl delete mode 100644 src/data/localization/pt-BR/p5.Gain.ftl delete mode 100644 src/data/localization/pt-BR/p5.Geometry.ftl delete mode 100644 src/data/localization/pt-BR/p5.Graphics.ftl delete mode 100644 src/data/localization/pt-BR/p5.HighPass.ftl delete mode 100644 src/data/localization/pt-BR/p5.Image.ftl delete mode 100644 src/data/localization/pt-BR/p5.LowPass.ftl delete mode 100644 src/data/localization/pt-BR/p5.MediaElement.ftl delete mode 100644 src/data/localization/pt-BR/p5.MonoSynth.ftl delete mode 100644 src/data/localization/pt-BR/p5.Noise.ftl delete mode 100644 src/data/localization/pt-BR/p5.NumberDict.ftl delete mode 100644 src/data/localization/pt-BR/p5.Oscillator.ftl delete mode 100644 src/data/localization/pt-BR/p5.Panner3D.ftl delete mode 100644 src/data/localization/pt-BR/p5.Part.ftl delete mode 100644 src/data/localization/pt-BR/p5.PeakDetect.ftl delete mode 100644 src/data/localization/pt-BR/p5.Phrase.ftl delete mode 100644 src/data/localization/pt-BR/p5.PolySynth.ftl delete mode 100644 src/data/localization/pt-BR/p5.PrintWriter.ftl delete mode 100644 src/data/localization/pt-BR/p5.Pulse.ftl delete mode 100644 src/data/localization/pt-BR/p5.Renderer.ftl delete mode 100644 src/data/localization/pt-BR/p5.Reverb.ftl delete mode 100644 src/data/localization/pt-BR/p5.SawOsc.ftl delete mode 100644 src/data/localization/pt-BR/p5.Score.ftl delete mode 100644 src/data/localization/pt-BR/p5.Shader.ftl delete mode 100644 src/data/localization/pt-BR/p5.Signal.ftl delete mode 100644 src/data/localization/pt-BR/p5.SinOsc.ftl delete mode 100644 src/data/localization/pt-BR/p5.SoundFile.ftl delete mode 100644 src/data/localization/pt-BR/p5.SoundLoop.ftl delete mode 100644 src/data/localization/pt-BR/p5.SoundRecorder.ftl delete mode 100644 src/data/localization/pt-BR/p5.SqrOsc.ftl delete mode 100644 src/data/localization/pt-BR/p5.StringDict.ftl delete mode 100644 src/data/localization/pt-BR/p5.Table.ftl delete mode 100644 src/data/localization/pt-BR/p5.TableRow.ftl delete mode 100644 src/data/localization/pt-BR/p5.TriOsc.ftl delete mode 100644 src/data/localization/pt-BR/p5.TypedDict.ftl delete mode 100644 src/data/localization/pt-BR/p5.Vector.ftl delete mode 100644 src/data/localization/pt-BR/p5.XML.ftl delete mode 100644 src/data/localization/pt-BR/p5.ftl delete mode 100644 src/data/localization/pt-BR/p5.sound.ftl delete mode 100644 src/data/localization/pt-BR/root.ftl delete mode 100644 src/data/localization/zh-CN/JSON.ftl delete mode 100644 src/data/localization/zh-CN/console.ftl delete mode 100644 src/data/localization/zh-CN/p5.Amplitude.ftl delete mode 100644 src/data/localization/zh-CN/p5.AudioIn.ftl delete mode 100644 src/data/localization/zh-CN/p5.AudioVoice.ftl delete mode 100644 src/data/localization/zh-CN/p5.BandPass.ftl delete mode 100644 src/data/localization/zh-CN/p5.Camera.ftl delete mode 100644 src/data/localization/zh-CN/p5.Color.ftl delete mode 100644 src/data/localization/zh-CN/p5.Compressor.ftl delete mode 100644 src/data/localization/zh-CN/p5.Convolver.ftl delete mode 100644 src/data/localization/zh-CN/p5.Delay.ftl delete mode 100644 src/data/localization/zh-CN/p5.Distortion.ftl delete mode 100644 src/data/localization/zh-CN/p5.EQ.ftl delete mode 100644 src/data/localization/zh-CN/p5.Effect.ftl delete mode 100644 src/data/localization/zh-CN/p5.Element.ftl delete mode 100644 src/data/localization/zh-CN/p5.Envelope.ftl delete mode 100644 src/data/localization/zh-CN/p5.FFT.ftl delete mode 100644 src/data/localization/zh-CN/p5.File.ftl delete mode 100644 src/data/localization/zh-CN/p5.Filter.ftl delete mode 100644 src/data/localization/zh-CN/p5.Font.ftl delete mode 100644 src/data/localization/zh-CN/p5.Gain.ftl delete mode 100644 src/data/localization/zh-CN/p5.Geometry.ftl delete mode 100644 src/data/localization/zh-CN/p5.Graphics.ftl delete mode 100644 src/data/localization/zh-CN/p5.HighPass.ftl delete mode 100644 src/data/localization/zh-CN/p5.Image.ftl delete mode 100644 src/data/localization/zh-CN/p5.LowPass.ftl delete mode 100644 src/data/localization/zh-CN/p5.MediaElement.ftl delete mode 100644 src/data/localization/zh-CN/p5.MonoSynth.ftl delete mode 100644 src/data/localization/zh-CN/p5.Noise.ftl delete mode 100644 src/data/localization/zh-CN/p5.NumberDict.ftl delete mode 100644 src/data/localization/zh-CN/p5.OnsetDetect.ftl delete mode 100644 src/data/localization/zh-CN/p5.Oscillator.ftl delete mode 100644 src/data/localization/zh-CN/p5.Panner3D.ftl delete mode 100644 src/data/localization/zh-CN/p5.Part.ftl delete mode 100644 src/data/localization/zh-CN/p5.PeakDetect.ftl delete mode 100644 src/data/localization/zh-CN/p5.Phrase.ftl delete mode 100644 src/data/localization/zh-CN/p5.PolySynth.ftl delete mode 100644 src/data/localization/zh-CN/p5.PrintWriter.ftl delete mode 100644 src/data/localization/zh-CN/p5.Pulse.ftl delete mode 100644 src/data/localization/zh-CN/p5.Renderer.ftl delete mode 100644 src/data/localization/zh-CN/p5.Reverb.ftl delete mode 100644 src/data/localization/zh-CN/p5.SawOsc.ftl delete mode 100644 src/data/localization/zh-CN/p5.Score.ftl delete mode 100644 src/data/localization/zh-CN/p5.Shader.ftl delete mode 100644 src/data/localization/zh-CN/p5.SinOsc.ftl delete mode 100644 src/data/localization/zh-CN/p5.SoundFile.ftl delete mode 100644 src/data/localization/zh-CN/p5.SoundLoop.ftl delete mode 100644 src/data/localization/zh-CN/p5.SoundRecorder.ftl delete mode 100644 src/data/localization/zh-CN/p5.SqrOsc.ftl delete mode 100644 src/data/localization/zh-CN/p5.StringDict.ftl delete mode 100644 src/data/localization/zh-CN/p5.Table.ftl delete mode 100644 src/data/localization/zh-CN/p5.TableRow.ftl delete mode 100644 src/data/localization/zh-CN/p5.TriOsc.ftl delete mode 100644 src/data/localization/zh-CN/p5.TypedDict.ftl delete mode 100644 src/data/localization/zh-CN/p5.Vector.ftl delete mode 100644 src/data/localization/zh-CN/p5.XML.ftl delete mode 100644 src/data/localization/zh-CN/p5.ftl delete mode 100644 src/data/localization/zh-CN/p5.sound.ftl delete mode 100644 src/data/localization/zh-CN/root.ftl delete mode 100644 tasks/fluent.js delete mode 100644 tasks/scripts/fluentConverter.js diff --git a/.lintstagedrc.js b/.lintstagedrc.js deleted file mode 100644 index 2049de1716..0000000000 --- a/.lintstagedrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - 'src/data/en.yml': () => ['grunt i18n --changed', 'git add i18n-tracking.yml'] -} \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 5aa8846b5a..e3dc3b5e3f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -410,12 +410,6 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-requirejs'); grunt.loadNpmTasks('grunt-htmlhint'); - // i18n tracking task - grunt.registerTask('i18n', function() { - var done = this.async(); - require('./i18n.js')(done); - }); - grunt.registerTask('make_tmp_dir', function() { const tmp_path = 'tmp/p5.js'; fse.mkdirpSync(tmp_path); @@ -500,7 +494,6 @@ module.exports = function(grunt) { 'assemble', 'file_append', 'compress', - 'i18n', 'htmlhint' ]); diff --git a/i18n-tracking.yml b/i18n-tracking.yml deleted file mode 100644 index 8153d67c85..0000000000 --- a/i18n-tracking.yml +++ /dev/null @@ -1,7287 +0,0 @@ -es: - src/data/en.yml: - line 463: ' You can also use ' - line 484: ' getting-started-in-webgl-coords-and-transform-p16x3' - line 627: ' to have a zoom-like effect, but it also affects the way that shapes change size in the distance.' - line 630: ' Another important term when working with cameras in 3D is the camera frustum. The frustum of the camera is the' - line 691: ' only used in the vertex shader and are typically provided by p5.js. When you use p5.js methods like rect() or ' - line 381: ' This tutorial will introduce new concepts for creating 3D sketches with p5.js.' - line 390: ' getting-started-in-webgl-coords-and-transform-heading1' - line 409: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled ' - line 410: ' getting-started-in-webgl-coords-and-transform-info1x2' - line 411: ' Coordinate System and Shapes' - line 394: ' it allows us to do all kinds of math to help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 374: ' getting-started-in-webgl-glossary-title' - line 403: ' Let''s get started by setting up the p5.js to use WebGL, by passing WEBGL as a third parameter into createCanvas().' - line 424: ' and ' - line 442: ' reorients whatever is' - line 449: ' methods like ' - line 450: ' getting-started-in-webgl-coords-and-transform-p10x2' - line 451: ' and ' - line 452: ' getting-started-in-webgl-coords-and-transform-p10x3' - line 453: ' , which each allow for rotation around a specific axis.' - line 464: ' getting-started-in-webgl-coords-and-transform-info2x2' - line 465: ' , which allows' - line 466: ' you to specify which axis you''d like to rotate around using a vector as the second argument.' - line 471: ' changes the size of whatever is' - line 481: ' p5.js also has some methods that can control when transformations are applied' - line 482: ' getting-started-in-webgl-coords-and-transform-p16x2' - line 483: ' and' - line 485: ' . push() and push() method saves the current transformations and ' - line 493: ' style settings. Then, after performing new transformations, the pop() method is used to restore us to the the original transformations. The result is that ' - line 494: ' whatever transformations or styling changes that are made between push()' - line 495: ' and pop() are isolated to that portion of the code. If you don’t ' - line 496: ' use push() and' - line 511: ' These primitive shape methods are' - line 512: ' getting-started-in-webgl-coords-and-transform-p20x2' - line 513: ' and' - line 519: ' More information about custom geometry can be found in the ' - line 520: ' getting-started-in-webgl-coords-and-transform-p21x2' - line 521: ' Custom Geometry tutorial ' - line 539: ' getting-started-in-webgl-custom-geometry-info1x2' - line 540: ' tutorial.' - line 551: ' the ' - line 729: ' An image that is passed into a shader program.' - line 433: ' moves the origin in a' - line 422: ' p5.js has a few methods, ' - line 423: ' getting-started-in-webgl-coords-and-transform-p7x2' - line 425: ' getting-started-in-webgl-coords-and-transform-p7x3' - line 426: ' that we can use to position and orient objects' - line 552: ' getting-started-in-webgl-custom-geometry-p2x2' - line 553: ' method, which should be used within preload(). Then you can use the ' - line 554: ' getting-started-in-webgl-custom-geometry-p2x3' - line 555: ' function to draw the model, as demonstrated in the example below.' - line 559: ' might be a much different size when drawn in p5.js, or even be too small to be drawn at all. The' - line 565: ' can add color using materials or textures, which you can learn about in the ' - line 566: ' getting-started-in-webgl-custom-geometry-info2x2' - line 567: ' Styling and Appearance ' - line 568: ' getting-started-in-webgl-custom-geometry-info2x3' - line 569: ' tutorial.' - line 580: ' getting-started-in-webgl-custom-geometry-p5x2' - line 581: ' and ' - line 582: ' getting-started-in-webgl-custom-geometry-p5x3' - line 583: ' This following example shows how' - line 587: ' There is also a powerful class, ' - line 639: ' ideas. p5.js has a special camera method, ' - line 640: ' getting-started-in-webgl-appearance-p5x2' - line 641: ' , that can be used to zoom, pan,' - line 650: ' tutorial, so make sure to check out the ' - line 651: ' getting-started-in-webgl-appearance-info1x2' - line 652: ' Introduction to Shaders' - line 653: ' getting-started-in-webgl-appearance-info1x3' - line 666: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 670: ' A camera projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 692: ' vertex(), p5.js passes the vertex information to the shader automatically.' - line 702: ' This value can either be lowp, mediump, or highp, although you will likely' - line 703: ' use mediump, or highp in certain situations.' - line 720: ' A variable that is passed from your sketch to a shader.' - line 446: ' values. Use the sliders in the sketch above to change the translation of the box and see how it moves along' - line 447: ' each axis. The code below demonstrates simple translation on a box() shape.' - line 462: ' example above to see how rotation is performed on each axis. The code below shows each of these methods' - line 472: ' p5.js also has some methods that can control when transformations are applied' - line 475: ' class="code">pop() make it easier to move objects' - line 522: ' way that is similar to 2D drawing in p5.js. For example, methods like quad(), triangle(), rect(), and circle() each have extra parameters that make it possible to use them in 3D.' - line 531: ' In the following example, p5.Geometry is used to plot a grid of points for the geometry. Then, computeFaces() is used to give the geometry' - line 739: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 759: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 386: ' getting-started-in-webgl-other-tutorials-you-are-here' - line 573: ' position of the active camera and the position that the camera is looking at. Try it out in the sketch below.' - line 626: ' getting-started-in-webgl-appearance-heading4' - line 628: ' Being able to have control over the camera, lighting, and materials will give you much more flexibility' - line 629: ' to decide how your sketch looks, and it will open up the possibilities for you to introduce your own' - line 631: ' to shaders, which will make it possible to change the appearance of your sketch in even more interesting ways.' - line 655: ' first, requiring a different approach than the 2D drawing of p5.js. This document will outline the basics ' - line 656: ' of shader programming and point you towards other resources.' - line 406: '' - line 376: ' getting-started-in-webgl-other-tutorials-p' - line 377: ' This tutorial is part of a series about the basics of using WebGL in p5.js. Check out each of these other tutorials below.' - line 407: ' getting-started-in-webgl-coords-and-transform-p3x1' - line 384: '' - line 391: ' To get started in 3D there are some new concepts to learn and this document will introduce some ideas' - line 400: '' - line 401: ' getting-started-in-webgl-coords-and-transform-heading1' - line 404: ' it allows us to do all kinds of math that help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 408: ' Working in 3D introduces a lot of complexity, especially when a sketch involves motion, texture, lighting, and' - line 385: '' - line 393: ' getting-started-in-webgl-coords-and-transform-toc-title' - line 395: ' getting-started-in-webgl-coords-and-transform-toc2' - line 396: ' getting-started-in-webgl-coords-and-transform-toc3' - line 397: ' getting-started-in-webgl-coords-and-transform-toc4' - line 370: '' - line 375: ' getting-started-in-webgl-other-tutorials-title' - line 371: '' - line 373: '' - line 378: ' getting-started-in-webgl-other-tutorials-tut1' - line 379: ' getting-started-in-webgl-other-tutorials-tut2' - line 398: ' getting-started-in-webgl-coords-and-transform-toc5' - line 415: '' - line 380: ' getting-started-in-webgl-other-tutorials-tut3' - line 382: '' - line 383: '' - line 389: ' getting-started-in-webgl-coords-and-transform-p1x1' - line 392: ' that will be important to any 3D sketch.' - line 399: ' getting-started-in-webgl-coords-and-transform-toc6' - line 402: ' getting-started-in-webgl-coords-and-transform-p2x1' - line 405: ' through its special WebGL mode.' - line 412: '' - line 413: ' getting-started-in-webgl-coords-and-transform-p4x1' - line 414: ' Let''s get started by setting up the p5.js to use WebGL, by passing a third parameter into createCanvas().' - line 416: ' getting-started-in-webgl-coords-and-transform-heading2' - line 417: ' 3D Coordinate Space' - line 418: '' - line 419: ' getting-started-in-webgl-coords-and-transform-info1x1' - line 368: '' - line 369: '' - line 372: '' - line 883: ' With these skills you will be able to create some basic shaders, but shader programming can go incredibly deep,' - line 884: ' and there are many shader topics that go beyond this tutorial. Shaders in p5.js can be a powerful tool for' - line 885: ' creating visuals, effects, and even textures that can be mapped to your 3D geometry.' - line 875: ' p5.js handles a lot of attributes and uniforms for us, and translate(), rotate(), and scale(), that we can use to position and orient objects' - line 441: ' within space. Each of these methods affect what is known as the model matrix. Collectively these are' - line 443: '' - line 444: ' getting-started-in-webgl-coords-and-transform-subheading1' - line 445: ' translate()' - line 448: ' translate() moves the origin in a' - line 454: ' getting-started-in-webgl-coords-and-transform-subheading2' - line 455: ' rotate()' - line 456: '' - line 457: ' getting-started-in-webgl-coords-and-transform-p9x1' - line 458: ' rotate() reorients whatever is' - line 459: ' drawn after it.' - line 460: '' - line 461: ' getting-started-in-webgl-coords-and-transform-p10x1' - line 467: ' example above to see how rotation is performed on each axis.' - line 468: ' getting-started-in-webgl-coords-and-transform-p11x1' - line 469: ' By default p5.js will expect angles to be in radians. Radians use numbers from 0 - TWO_PI to specify an' - line 470: ' angle. To use degrees, either convert degrees to radians using radians(), or use' - line 473: '

You can also use rotate(), which allows' - line 474: ' you to specify which axis you''d like to rotate around using a vector as the second argument.

' - line 476: ' scale()' - line 477: ' getting-started-in-webgl-coords-and-transform-p12x1' - line 478: ' scale() changes the size of whatever is' - line 479: ' drawn after it. Like the other methods described so far, it accepts arguments for x, y, and z values.' - line 480: ' getting-started-in-webgl-coords-and-transform-heading4' - line 486: ' getting-started-in-webgl-coords-and-transform-p14x1' - line 487: ' Transformations can be performed in any order, but using translate, rotate, and then scale will be the most intuitive.' - line 488: ' Translation, followed by rotation, produces the effect of moving the shape and then rotating around that new location.' - line 489: ' getting-started-in-webgl-coords-and-transform-p15x1' - line 490: ' In the below example, try changing the order of translate() and rotateY() and see how it affects where the object is' - line 497: ' individually. The push() method saves and sets aside the' - line 498: ' current transformations. The pop() method restores those transformations. Whatever transformations that' - line 499: ' are made between push() and pop() will be isolated to that portion of the code. If you don’t use push() and' - line 502: ' pop(), you have to keep track of whatever transformations have already taken place, which' - line 503: ' can get complicated' - line 504: ' and difficult to follow. Consider this following example, which places two boxes in our sketch. To position the second box' - line 505: ' without push() and pop(), you have to account for the first transformation. This ' - line 506: ' can be a lot to keep track of in a more complex 3D scene. ' - line 507: ' getting-started-in-webgl-coords-and-transform-p17x1' - line 508: ' Now, let''s try the same code with push() and pop(). Now we can just' - line 509: ' translate the object where we want it, without' - line 510: ' having to remember where our coordinate system lies.' - line 514: ' transformation matrix is combined with the view matrix and the projection matrix, both of which help simulate' - line 515: ' the view of a camera, and this combination results in our 3D scene!

' - line 516: ' box() but p5.js has seven different predefined geometries' - line 527: ' that you can use in your sketch. These basic predefined geometries are often referred to as ''primitives''.' - line 528: ' getting-started-in-webgl-coords-and-transform-p20x1' - line 529: ' These primitive shape methods are' - line 530: ' plane(),' - line 532: ' ellipsoid(),' - line 533: ' cone(),' - line 534: ' cylinder(), and' - line 535: ' torus()' - line 536: ' getting-started-in-webgl-coords-and-transform-p21x1' - line 537: ' It is also possible to create custom geometry, either from scratch or from 3D models created in another' - line 538: ' program.' - line 541: ' getting-started-in-webgl-coords-and-transform-heading6' - line 542: ' Conclusion' - line 543: ' getting-started-in-webgl-coords-and-transform-p22x1' - line 544: ' By having basic control over a 3D coordinate space, transformations, ' - line 545: ' and basic shapes, you should be able to begin creating basic scenes' - line 546: ' in 3D. The tutorials that follow this in the Getting Started in WebGL series' - line 547: ' will introduce custom geometries, allow you to tweak the appearance of ' - line 548: ' the scene, and introduce you to some basic shader programming to push' - line 549: ' your sketches further.' - line 550: ' getting-started-in-webgl-coords-and-transform-glossary-title' - line 730: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 731: ' getting-started-in-webgl-appearance-glossary-term3-title' - line 732: ' getting-started-in-webgl-appearance-glossary-term3-definition' - line 733: ' A projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 734: ' two-dimensional.' - line 735: ' getting-started-in-webgl-appearance-glossary-term4-title' - line 736: ' getting-started-in-webgl-appearance-glossary-term4-definition' - line 737: ' getting-started-in-webgl-appearance-glossary-term5-title' - line 738: ' getting-started-in-webgl-appearance-glossary-term5-definition' - line 740: ' getting-started-in-webgl-appearance-glossary-term6-definition' - line 741: ' The near plane represents the minimum distance a geometry must be from the camera to be displayed, while' - line 742: ' the far plane represents the maximum distance.' - line 743: ' getting-started-in-webgl-appearance-glossary-term7-title' - line 744: ' getting-started-in-webgl-appearance-glossary-term7-definition' - line 745: '' - line 746: '' - line 747: '' - line 748: '' - line 749: '' - line 753: ' getting-started-in-webgl-shaders-p0x1' - line 754: ' Shaders are special programs that run on the graphics processing unit, or GPU, that can do some incredible' - line 755: ' things. They take advantage of the' - line 756: ' GPU to process many pixels at once, making them fast and particularly well suited for certain tasks, like' - line 757: ' generating noise, applying filters like blur, or shading polygons. Shader programming can feel daunting at' - line 758: ' first, they require a different approach than the 2D drawing of p5.js and it can often involve more advanced' - line 760: '' - line 761: ' getting-started-in-webgl-shaders-toc-title' - line 762: ' getting-started-in-webgl-shaders-toc1' - line 763: ' getting-started-in-webgl-shaders-toc2' - line 764: ' getting-started-in-webgl-shaders-toc3' - line 765: ' getting-started-in-webgl-shaders-toc4' - line 766: ' getting-started-in-webgl-shaders-toc5' - line 767: ' getting-started-in-webgl-shaders-heading1' - line 768: '' - line 769: ' getting-started-in-webgl-shaders-p1x1' - line 770: ' p5.js is a great tool for working with shaders because it handles a lot of the WebGL setup so you can focus on' - line 771: ' the shader code itself. Before we can get started with shaders we have to set up our canvas so that it uses' - line 772: ' p5.js WebGL model.' - line 773: '' - line 774: ' getting-started-in-webgl-shaders-p2x1' - line 775: ' A shader program consists of two parts, a vertex shader and a fragment' - line 776: ' shader. The vertex shader affects where the 3D geometry is drawn on the screen and the fragment' - line 777: ' shader is responsible for affecting the color output. Each of these live in separate files and are loaded into' - line 778: ' p5.js using loadShader(). Once a shader is loaded it can be used within draw(). The following example will show' - line 780: ' how to set up a basic shader within p5.js' - line 781: '' - line 782: ' getting-started-in-webgl-shaders-heading2' - line 783: '' - line 784: ' getting-started-in-webgl-shaders-p3x1' - line 785: ' So now you might be wondering what we actually write in these shader files! Shader files are written in' - line 786: ' Graphics Library Shading Language, or GLSL, and have a very different syntax and structure than we are familiar' - line 787: ' with. GLSL has a' - line 788: ' syntax that resembles C, which means it comes with a handful of concepts that aren''t present in JavaScript.' - line 789: '' - line 790: ' getting-started-in-webgl-shaders-p4x1' - line 791: ' For one, the shading language is much more strict about types. Each variable you create has to be labeled with' - line 792: ' the kind of data it is storing. Here is a list of some of the common types' - line 793: '' - line 794: ' getting-started-in-webgl-shaders-typelist' - line 795: ' vec2(x,y) // a vector of two floats' - line 796: ' vec3(r,g,b) // a vector of three floats' - line 797: ' vec4(r,g,b,a) // a vector of four floats' - line 798: ' float // a number with decimal points' - line 799: ' int // a whole number without decimal points' - line 800: ' sampler2D // a reference to a texture' - line 801: '' - line 802: ' getting-started-in-webgl-shaders-p5x1' - line 803: ' In general the shading language is much more strict than JavaScript. A missing semicolon for example is not' - line 804: ' allowed and will result in an error message. You can''t use different types of numbers, like floats or integers' - line 805: ' interchangeably.' - line 806: '' - line 807: ' getting-started-in-webgl-shaders-p6x1' - line 808: ' First let''s look at a basic vertex shader' - line 809: '' - line 810: ' getting-started-in-webgl-shaders-p7x1' - line 811: ' This vertex shader begins with an attribute, which p5.js uses to share vertex position information' - line 812: ' with the shader. This' - line 813: ' attribute is a vec3, meaning it contains a value for x, y, and z. Attributes are special' - line 814: ' variable types that are' - line 815: ' only used in the vertex shader and are typically provided by p5.js.' - line 816: '' - line 817: ' getting-started-in-webgl-shaders-p8x1' - line 818: ' All vertex shaders require a function, main(), within which we position our vertices. In' - line 819: ' this example, the' - line 820: ' vertex shader repositions our vertices so that the shader output takes up the full sketch. At the end of main(),' - line 822: ' we have to assign a value to gl_Position.' - line 823: '' - line 824: ' getting-started-in-webgl-shaders-p9x1' - line 825: ' Don''t worry if this doesn''t make a ton of sense yet. The vertex shader plays an important role but it is often' - line 826: ' just responsible for making sure what we create in our fragment shader displays properly on the geometry. You''ll' - line 827: ' probably find yourself reusing the same vertex shaders in many of your projects.' - line 828: ' The fragment shader on the other hand is responsible for the color output of our shader and is where we will do' - line 829: ' a lot of our shader programming. Here is a very simple fragment shader that will just display the color red' - line 830: '' - line 831: ' getting-started-in-webgl-shaders-p10x1' - line 832: ' The fragment shader begins with a line specifying the float ''precision''.' - line 833: ' this value you can either be lowp, mediump, or highp, although you will likely' - line 834: ' use mediump, or highp in certain situations.' - line 835: '' - line 836: ' getting-started-in-webgl-shaders-p11x1' - line 837: ' And similar to the vertex shader, our fragment shader also requires a main() function, but instead of' - line 838: ' setting gl_Position, we will assign a color to gl_FragColor.' - line 839: '' - line 840: ' getting-started-in-webgl-shaders-p12x1' - line 841: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 842: ' those four values are red, green, blue, and alpha. Shaders don''t use 0 - 255 for colors like our sketches do, instead they use' - line 843: ' values between 0.0 and 1.0.' - line 844: '' - line 845: ' getting-started-in-webgl-shaders-p13x1' - line 846: ' Now that we have a vertex shader and a fragment shader, these can be saved to separate files (shader.vert and' - line 847: ' shader.frag respectively), and loaded into our sketch using loadShader().' - line 848: '' - line 849: ' getting-started-in-webgl-shaders-heading3' - line 850: ' Uniforms' - line 851: '' - line 852: ' getting-started-in-webgl-shaders-p14x1' - line 853: ' A simple shader like this can be useful by itself, but there are times when it''s necessary to communicate' - line 854: ' variables from the p5.js sketch to a shader. This is when uniforms come in. Uniforms are special variables that' - line 855: ' can be sent from a sketch to a shader. These make it possible to have much more control over a shader. For example,' - line 856: ' you could use the p5.js method millis() to pass a ''time'' uniform to our sketch to introduce motion.' - line 857: ' In the shader, uniforms are defined at the top of the file, outside of main(). In' - line 858: ' this following fragment shader' - line 859: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 860: '' - line 861: ' getting-started-in-webgl-shaders-p15x1' - line 862: ' Back in our p5.js sketch, this color can now be sent using setUniform()' - line 863: '' - line 864: ' getting-started-in-webgl-shaders-p16x1' - line 865: ' There are also attributes, which are usually used to share certain data about the geometry between the' - line 866: ' sketch and the vertex shader, and varying variables, which share data between the vertex shader and the' - line 867: ' fragment shader.' - line 868: ' This makes it possible to use position or other geometry data within our fragment shaders.' - line 869: '' - line 870: ' getting-started-in-webgl-shaders-p17x1' - line 886: '' - line 887: ' getting-started-in-webgl-shaders-p19x1' - line 888: ' Want to keep learning more about shaders? Check out some of these websites!' - line 889: '' - line 890: ' getting-started-in-webgl-shaders-resources' - line 891: '
  • ' - line 897: '
  • ' - line 901: '' - line 902: ' getting-started-in-webgl-shaders-glossary-title' - line 903: '' - line 904: ' getting-started-in-webgl-shaders-glossary-term1-title' - line 905: ' getting-started-in-webgl-shaders-glossary-term1-definition' - line 906: ' A special graphics card program that can efficiently produce many visual effects and filters.' - line 907: '' - line 908: ' getting-started-in-webgl-shaders-glossary-term2-title' - line 909: ' getting-started-in-webgl-shaders-glossary-term2-definition' - line 910: ' Graphics Library Shader Language (GLSL) is a programming language that is used to write shaders.' - line 911: '' - line 912: ' getting-started-in-webgl-shaders-glossary-term3-title' - line 913: ' getting-started-in-webgl-shaders-glossary-term3-definition' - line 914: ' A variable that is passed from your sketch to a shader' - line 915: '' - line 916: ' getting-started-in-webgl-shaders-glossary-term4-title' - line 917: ' getting-started-in-webgl-shaders-glossary-term4-definition' - line 918: ' A data type that stores a group of numbers, most commonly two, three, or four, to represent colors, positions,' - line 919: ' and more.' - line 920: '' - line 921: ' getting-started-in-webgl-shaders-glossary-term5-title' - line 922: ' getting-started-in-webgl-shaders-glossary-term5-definition' - line 923: ' A data type that stores floating point numbers, which can have a decimal point.' - line 924: '' - line 925: ' getting-started-in-webgl-shaders-glossary-term6-title' - line 926: ' getting-started-in-webgl-shaders-glossary-term6-definition' - line 927: ' A data type that stores integers, which are whole numbers without a decimal.' - line 928: '' - line 929: ' getting-started-in-webgl-shaders-glossary-term7-title' - line 930: ' getting-started-in-webgl-shaders-glossary-term7-definition' - line 931: ' A data type that represents a texture being passed into the shader.' - line 932: '' - line 933: ' getting-started-in-webgl-shaders-glossary-term8-title' - line 934: ' getting-started-in-webgl-shaders-glossary-term8-definition' - line 935: ' A GLSL variable that is generated in the p5.js sketch and made available in the vertex shader. For most' - line 936: ' situations these are provided by p5.js.' - line 937: '' - line 938: ' getting-started-in-webgl-shaders-glossary-term9-title' - line 939: ' getting-started-in-webgl-shaders-glossary-term9-definition' - line 940: ' An image that passed into a shader program.' - line 941: '' - line 942: ' getting-started-in-webgl-shaders-glossary-term10-title' - line 943: ' getting-started-in-webgl-shaders-glossary-term10-definition' - line 944: ' A label describing the characterics of a piece of data, such as an int, a float, a vector, etc.' - line 945: '' - line 946: ' getting-started-in-webgl-shaders-glossary-term11-title' - line 947: ' getting-started-in-webgl-shaders-glossary-term11-definition' - line 948: ' The part of a shader program that is responsible for positioning geometry in 3D space.' - line 949: '' - line 950: ' getting-started-in-webgl-shaders-glossary-term12-title' - line 951: ' getting-started-in-webgl-shaders-glossary-term12-definition' - line 952: ' The part of a shader program that is responsible for the color and appearance of each pixel output by the' - line 953: ' shader.' - line 954: '' - line 955: ' ' - line 956: '' - line 604: ' way that is similar to 2D drawing in p5.js. For example, methods like quad() and triangle() each have extra parameters that make it possible to use them in 3D.' - line 420: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled' - line 421: ' Coordinate System and Shapes.' - line 427: ' getting-started-in-webgl-coords-and-transform-p6x1' - line 428: ' When drawing in 2D, the point (0,0) is located at the top left corner of the screen. In WebGL mode, the' - line 429: ' origin of the sketch (0,0,0) is located in the middle of the screen. By default, the x-axis goes left-to-right,' - line 430: ' y-axis goes up-to-down, and the z-axis goes from further-to-closer.' - line 431: '' - line 387: ' getting-started-in-webgl-custom-geometry-p2x1' - line 388: ' Custom geometry can be imported into p5.js using either OBJ or STL files. These files are usually generated in' - line 980: ' contributors-conference1' - line 1642: ' teach-case1-title' - line 1643: ' teach-case1-lead-name' - line 1644: ' teach-case1-image-alt' - line 1645: ' teach-case1-content1' - line 1646: ' teach-case1-content1-1' - line 1647: ' teach-case1-content2' - line 1648: ' teach-case1-content3' - line 1649: ' teach-case1-content4' - line 1650: ' teach-case1-content5' - line 1651: ' teach-case1-content5-1' - line 1652: ' teach-case1-content5-2' - line 1653: ' teach-case1-content5-3' - line 1654: ' teach-case2-title' - line 1655: ' teach-case2-lead-name' - line 1656: ' teach-case2-content1' - line 1657: ' teach-case2-content1-1' - line 1658: ' teach-case2-content2' - line 1659: ' teach-case2-content3' - line 1660: ' teach-case2-content4' - line 1661: ' teach-case2-content5' - line 1662: ' teach-case3-title' - line 1663: ' teach-case3-lead-name' - line 1664: ' teach-case3-content1' - line 1665: ' teach-case3-content1-1' - line 1666: ' teach-case3-content2' - line 1667: ' teach-case3-content3' - line 1668: ' teach-case3-content4' - line 1712: ' teach-case8-content5' - line 1713: ' teach-case9-title' - line 1714: ' teach-case9-lead-name' - line 1715: ' teach-case9-image-alt' - line 1716: ' teach-case9-content1' - line 1717: ' teach-case9-content1-1' - line 1718: ' teach-case9-content2' - line 1719: ' teach-case9-content3' - line 1720: ' teach-case9-content4' - line 1721: ' teach-case9-content5' - line 1722: ' teach-case10-title' - line 1723: ' teach-case10-lead-name' - line 1724: ' teach-case10-content1' - line 1725: ' teach-case10-content1-1' - line 1726: ' teach-case10-content2' - line 1727: ' teach-case10-content3' - line 1728: ' teach-case10-content4' - line 1729: ' teach-case10-content5' - line 1730: ' teach-case11-title' - line 1731: ' teach-case11-lead-name' - line 1732: ' teach-case11-content1' - line 1733: ' Seoul Museum of Art, Seoul, South Korea.''' - line 1734: ' teach-case11-content1-1' - line 1735: ' teach-case11-content2' - line 1736: ' teach-case11-content3' - line 1737: ' teach-case11-content4' - line 1738: ' teach-case11-content5' - line 1739: ' We also used dice, playing cards and various paper tools to help students learn about coding concepts. ''' - line 1740: ' teach-case12-title' - line 1741: ' teach-case12-lead-name' - line 1742: ' teach-case12-image-alt' - line 1743: ' teach-case12-content1' - line 1744: ' teach-case12-content1-1' - line 1745: ' teach-case12-content2' - line 1746: ' teach-case12-content3' - line 1747: ' teach-case12-content4' - line 1748: ' teach-case12-content5' - line 1749: ' Methods' - line 1750: ' teach-case12-content5-1' - line 1751: ' teach-case13-title' - line 1752: ' teach-case13-lead-name' - line 1753: ' teach-case13-content1' - line 1754: ' teach-case13-content1-1' - line 1755: ' teach-case13-content2' - line 1756: ' teach-case13-content3' - line 1757: ' teach-case13-content4' - line 1761: ' teach-case13-content5' - line 1766: ' teach-case13-content5-1' - line 1770: ' teach-case14-title' - line 1803: ' teach-case14-content5' - line 1804: ' teach-case14-content5-1' - line 1805: ' teach-case14-content5-2' - line 1806: ' teach-case14-content5-3' - line 1807: ' teach-case14-content5-4' - line 1808: ' teach-case14-content5-5' - line 1809: ' teach-case15-title' - line 1810: ' teach-case15-lead-name' - line 1811: ' teach-case15-speech' - line 1812: ' teach-case15-content1' - line 1813: ' teach-case15-content1-1' - line 1814: ' teach-case15-content2' - line 1819: ' teach-case15-content3' - line 1820: ' teach-case15-content4' - line 1824: ' teach-case15-content5' - line 2009: ' teach-case21-content5-1' - line 2010: ' teach-case21-content5-2' - line 2011: ' teach-case21-content5-3' - line 2012: ' teach-case22-title' - line 2013: ' teach-case22-lead-name' - line 2014: ' teach-case22-content1' - line 2015: ' teach-case22-content3' - line 2016: ' teach-case22-content4' - line 2021: ' teach-case22-content5' - line 2035: ' teach-case22-content5-1' - line 2036: ' teach-case22-content5-2' - line 2037: ' teach-case23-title' - line 2038: ' teach-case23-lead-name' - line 2039: ' teach-case23-image-alt' - line 2040: ' teach-case23-content1' - line 2041: ' teach-case23-content1-1' - line 2042: ' teach-case23-content2' - line 2043: ' teach-case23-content3' - line 2044: ' teach-case23-content4' - line 2051: ' teach-case23-content5' - line 2052: ' teach-case23-content5-1' - line 2063: ' teach-case23-content5-2' - line 2064: ' teach-case23-content5-3' - line 2065: ' teach-case23-content5-4' - line 2066: ' teach-case23-content5-5' - line 2067: ' teach-case24-title' - line 2068: ' teach-case24-lead-name' - line 2069: ' teach-case24-image-alt' - line 2070: ' teach-case24-speech' - line 2081: ' teach-case24-content1' - line 2082: ' teach-case24-content1-1' - line 2083: ' teach-case24-content2' - line 2084: ' teach-case24-content3' - line 2085: ' teach-case24-content4' - line 2089: ' teach-case24-content5' - line 2095: ' teach-case24-content5-1' - line 2096: ' teach-case24-content5-2' - line 2097: ' teach-workshops-heading' - line 2098: ' teach-workshop1-title' - line 2099: ' teach-workshop1-time' - line 2100: ' teach-workshop2-title' - line 2101: ' teach-workshop2-time' - line 2102: ' teach-workshop3-title' - line 2103: ' teach-workshop3-time' - line 883: ' p5.utils' - line 884: ' A set of utilities and additional features for my creative coding class aiming ' - line 885: ' to help students.' - line 1153: ' 2022-p5js-access-day-date' - line 1174: ' 2022-p5js-access-day-advisor' - line 1150: ' p5js-community-event-title' - line 1151: ' 2022-p5js-access-day-title' - line 1152: ' 2022-p5js-access-day-date' - line 1154: ' 2022-p5js-access-day-coordinator' - line 1155: ' 2022-p5js-access-day-description' - line 1156: ' The p5.js Access Day is a virtual conference to talk about access in ' - line 1157: ' open-source software for the arts (OSSTA) and greater issues beyond the software. ' - line 1158: ' The day-long online event features four themed-sessions — Critical Web ' - line 1159: ' Accessibility, Disability Arts, Access & Community Building, and Access ' - line 1160: ' via Translation. It provides space for contributors of p5.js and experienced ' - line 1161: ' practitioners from outside OSSTA projects to share their knowledge, perspectives, ' - line 1162: ' and dreams for building greater access to technical and arts spaces. ' - line 1163: ' 2022-p5js-access-day-recap-video' - line 1164: ' 2022-p5js-access-day-recap-video-asl' - line 1165: ' 2022-p5js-access-day-moderator' - line 1166: ' 2022-p5js-access-day-speakers' - line 1167: ' 2022-p5js-access-day-session-0' - line 1168: ' 2022-p5js-access-day-session-1' - line 1169: ' 2022-p5js-access-day-session-2' - line 1170: ' 2022-p5js-access-day-session-3' - line 1171: ' 2022-p5js-access-day-session-4' - line 1172: ' 2022-p5js-access-day-session-5' - line 1173: ' 2022-p5js-access-day-production' - line 1175: ' 2022-p5js-access-day-asl' - line 1176: ' 2022-p5js-access-day-designer' - line 1177: ' 2022-p5js-access-day-tech-support' - line 1178: ' 2022-p5js-access-day-transcriber' - line 1179: ' 2022-p5js-access-day-asl-support' - line 85: ' under the terms of the ' - line 26: footer6 - line 25: footer2 - line 27: footer4 - line 31: footer8 - line 32: footer9 - line 28: footer5 - line 29: footer6 - line 30: footer7 - line 288: ' to the index.html containing your p5.js sketch.' - line 297: ' file and the embed.html file for the sketch.' - line 306: ' be' - line 310: ' stylesheet)' - line 319: ' was ported to P5 by Kelly Chang. If you find any errors or have comments,' - line 330: ' background(255); // Setting the background to white' - line 331: ' stroke(0); // Setting the outline (stroke) to black' - line 332: ' fill(150); // Setting the interior of a shape (fill) to grey' - line 340: ' black. Also, remember not to eliminate both—with' - line 349: ' percentage). You can do this by specifying a custom' - line 358: ' want to use the' - line 363: ' and the bottom right corner). The mode here is' - line 261: ' the' - line 270: ' particular topics. Check out the' - line 279: ' of the p5js site. The file called index.hbs is the' - line 1536: ' teach-case2-image-alt' - line 1544: ' teach-case4-image-alt' - line 1552: ' teach-case6-image-alt' - line 1560: ' teach-case8-image-alt' - line 1568: ' teach-case9-image-alt' - line 1576: ' teach-case11-image-alt' - line 1584: ' teach-case12-image-alt' - line 1123: ' book-6-title' - line 1124: ' book-6-authors' - line 1125: ' book-6-publisher' - line 1126: ' book-6-pages' - line 1127: ' book-6-type' - line 1128: ' book-6-description' - line 1129: ' Using p5.js, this book introduces and demonstrates the reflexive practice ' - line 1130: ' of aesthetic programming, engaging with learning to program as a way to ' - line 1131: ' understand and question existing technological objects and paradigms, ' - line 1132: ' and to explore the potential for reprogramming wider eco-socio-technical systems.' - line 1133: ' book-6-order-a' - line 1134: ' book-6-order-b' - line 162: ' library in your html. To learn more visit ' - line 163: ' library in your html. To learn more visit ' - line 164: ' your-first-sketch7' - line 97: ' get-started-button' - line 96: ' get-started7' - line 114: ' environment15' - line 113: ' environment14' - line 115: ' environment16' - line 102: ' download8' - line 103: ' download9' - line 104: ' download10' - line 105: ' download11' - line 256: ' , the organization that supports p5.js.' - line 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open' - line 269: ' Your donation supports software development for p5.js, education resources' - line 265: ' and inclusive as possible. You can support this work by making a donation to' - line 266: ' the ' - line 267: ' support-2' - line 268: ' , the organization that supports p5.js. We need your help!' - line 275: ' support-3' - line 276: ' support-4' - line 277: ' support-5' - line 37: Editor - line 55: footer5 - line 123: ' p3xh2' - line 41: Reference - line 118: ' p2x3' - line 128: ' p3xp5' - line 59: tagline4 - line 136: ' p4xp6' - line 243: ' settingUp-title' - line 62: tagline7 - line 45: Books - line 34: Language-Settings - line 35: Sidebar-Title - line 36: Home - line 38: Download - line 39: Donate - line 40: Start - line 42: Libraries - line 43: Learn - line 56: tagline1 - line 60: tagline5 - line 61: tagline6 - line 111: ' identity and expression, sexual orientation, race, ethnicity, language,' - line 112: ' neuro-type, size, disability, class, religion, culture, subculture,' - line 116: ' kinds. We facilitate and foster access and empowerment. We are all learners.' - line 117: ' p2x2' - line 119: ' p2x4' - line 120: ' p2x5' - line 121: ' p2x6' - line 122: ' p2x7' - line 124: ' p3xp1' - line 125: ' p3xp2' - line 126: ' p3xp3' - line 127: ' p3xp4' - line 137: ' sketch_credits' - line 138: ' sketch_info' - line 271: ' Open Sublime. Go to the File menu and choose Open... and choose the folder' - line 272: ' that your html and js files are located in. On the left sidebar, you should' - line 273: ' find the folder name at the top, with a list of the files contained in the' - line 282: ' environment12' - line 283: ' environment13' - line 284: ' your-first-sketch-title' - line 285: ' your-first-sketch-intro1' - line 286: ' your-first-sketch-intro2' - line 287: ' your-first-sketch-intro3' - line 289: ' your-first-sketch1' - line 290: ' your-first-sketch2' - line 291: ' your-first-sketch3' - line 292: ' your-first-sketch4' - line 293: ' The line you just added draws an ellipse, with its center 50 pixels over' - line 294: ' from the left and 50 pixels down from the top, with a width and height of 80' - line 295: ' pixels.' - line 296: ' your-first-sketch5' - line 298: ' If you are using a screen reader, you must turn on the accessible outputs in' - line 299: ' the p5 online editor, outside the editor you must add the accessibility' - line 300: ' library in your html. To learn more visit' - line 301: ' your-first-sketch7' - line 302: ' your-first-sketch8' - line 303: ' If you''ve typed everything correctly, this will appear in the display' - line 304: ' window' - line 305: ' your-first-sketch9' - line 307: ' If nothing appears, the editor may be having trouble understanding what' - line 308: ' you’ve typed. If this happens, make sure that you''ve copied the example code' - line 309: ' exactly' - line 311: ' to be spelled correctly.' - line 312: ' your-first-sketch11' - line 313: ' One of the most difficult things about getting started with programming is' - line 314: ' that you have to be very specific about the syntax. The browser isn''t always' - line 315: ' smart enough to know what you mean, and can be quite fussy about the' - line 316: ' placement of punctuation. You''ll get used to it with a little practice. In' - line 317: ' the bottom left of the editor you will find the console section. Here, you' - line 318: ' can find messages from the editor with details about any errors it' - line 320: ' your-first-sketch12' - line 321: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the' - line 322: ' last example to try this' - line 323: ' your-first-sketch13' - line 324: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,' - line 325: ' and then starts drawing white circles at the position of the mouse. When a' - line 326: ' mouse button is pressed, the circle color changes to black. Run the code,' - line 327: ' move the mouse, and click to experience it.' - line 328: ' your-first-sketch14' - line 329: ' first-sketch-heading1' - line 333: ' learn1' - line 334: ' learn2' - line 335: ' learn3' - line 336: ' learn4' - line 337: ' learn5' - line 338: ' learn6' - line 339: ' learn7' - line 341: ' learn9' - line 342: ' learn10' - line 343: ' reference1' - line 344: ' reference2' - line 345: ' reference3' - line 346: ' learn11' - line 347: ' learn12' - line 348: ' processing-transition1' - line 350: ' processing-transition3' - line 351: ' processing-transition4' - line 352: ' book1' - line 353: ' Parts of this tutorial were adapted from the book, Getting Started with' - line 354: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.' - line 355: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019' - line 356: ' Contributors Conference.' - line 44: Examples - line 57: tagline2 - line 146: ' copyright-title' - line 231: ' get-started-title' - line 240: ' . If you would like to work on the the desktop version of p5.js you can' - line 258: ' download7' - line 281: ' file manager or type' - line 54: footer4 - line 110: ' We are a community of, and in solidarity with, people from every gender' - line 239: ' get-started6' - line 259: ' environment-title' - line 274: ' folder directly below.' - line 233: ' This page walks you through setting up a p5.js project and making your first' - line 234: ' sketch.' - line 244: ' download-title' - line 245: ' hosted-title' - line 50: footerxh1 - line 98: ' p1x1' - line 99: ' p5.js is a JavaScript library for creative coding, with a focus on making' - line 100: ' coding accessible and inclusive for artists, designers, educators,' - line 109: ' p2x1' - line 129: ' p3xp6' - line 148: ' The p5.js library is free software; you can redistribute it and/or modify it' - line 46: Community - line 133: ' p4xp3' - line 134: ' p4xp4' - line 141: ' project-a-2-5-phuong' - line 144: ' project-a-2-7-phuong' - line 64: ' color-p3x3' - line 70: ' color-rgb-p1x1' - line 87: ' color-custom-ranges-p2x1' - line 24: footer1 - line 77: ' color-rgb-p2x1' - line 82: ' color-transparency-p2x1' - line 139: ' project-a-2-7-phuong' - line 76: ' color-transparency-p1x1' - line 63: ' hosted-title' - line 75: ' download9' - line 140: ' learn5' - line 142: ' learn7' - line 143: ' learn8' - line 145: ' learn10' - line 159: ' processing-transition1' - line 160: ' processing-transition2' - line 161: ' processing-transition3' - line 357: ' link-2-chung' - line 359: ' project-a-1-1-chung' - line 360: ' project-a-1-2-chung' - line 361: ' project-a-1-3-chung' - line 362: ' project-a-2-1-chung' - line 364: ' project-a-2-2-chung' - line 365: ' project-a-3-1-chung' - line 79: ' environment1' - line 88: ' environment8' - line 173: ' complete-library-intro1' - line 182: ' learn3' - line 191: ' writing-a-tutorial-embedding-7' - line 197: ' writing-a-tutorial-iframe-1' - line 204: ' writing-a-tutorial-iframe-7' - line 213: ' color-description1' - line 222: ' coordinate-system-description3' - line 69: ' download5' - line 74: ' download8' - line 78: ' environment1' - line 157: ' learn11' - line 172: ' complete-library-intro1' - line 181: ' learn3' - line 190: ' writing-a-tutorial-embedding-7' - line 196: ' writing-a-tutorial-iframe-1' - line 203: ' writing-a-tutorial-iframe-7' - line 212: ' color-description1' - line 221: ' coordinate-system-description3' - line 230: ' coordinate-system-simple-shapes-p1x1' - line 66: ' sketch_credits' - line 67: ' sketch_info' - line 22: footer1 - line 23: footer2 - line 65: ' color-rgb-p1x1' - line 72: ' color-rgb-p2x1' - line 81: ' color-transparency-p1x1' - line 90: ' color-custom-ranges-p4x1' - line 153: ' project-a-4-7-casey-louise' - line 33: Skip-To-Content - line 47: Contribute - line 48: Forum - line 49: Showcase - line 51: footer1 - line 52: footer2 - line 53: footer3 - line 58: tagline3 - line 101: ' beginners, and anyone else! p5.js is free and open-source because we believe' - line 106: ' think of your whole browser page as your sketch, including HTML5 objects for' - line 107: ' text, input, video, webcam, and sound.' - line 108: ' p2xh2' - line 130: ' p4xh2' - line 131: ' p4xp1' - line 132: ' p4xp2' - line 135: ' p4xp5' - line 147: ' copyright1' - line 149: ' under the terms of the' - line 150: ' copyright2' - line 151: ' copyright3' - line 152: ' copyright4' - line 232: ' get-started1' - line 235: ' get-started2' - line 236: ' get-started3' - line 237: ' get-started4' - line 238: ' get-started5' - line 241: ' scroll down to' - line 242: ' get-started7' - line 246: ' download1' - line 247: ' download2' - line 248: ' download3' - line 249: ' download4' - line 250: ' If you look in index.html, you''ll notice that it links to the file p5.js. If' - line 252: ' loading), change the link to p5.min.js.' - line 253: ' download5' - line 254: ' Alternatively, you can link to a p5.js file hosted online. All versions of' - line 255: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history' - line 257: ' download6' - line 260: ' environment1' - line 262: ' environment2' - line 263: ' environment3' - line 264: ' environment4' - line 278: ' environment10' - line 280: ' Open the index.html file in your browser by double clicking on it in your' - line 750: ' other.' - line 751: ' p5-screen-reader-title' - line 752: ' p5-screen-reader' - line 957: ' with a bit of blue," you have to provide an exact amount. As with grayscale,' - line 958: ' the individual color elements are expressed as ranges from 0 (none of that' - line 959: ' color) to 255 (as much as possible), and they are listed in the order R, G,' - line 960: ' and B. You will get the hang of RGB color mixing through experimentation,' - line 961: ' but next we will cover some code using some common colors.' - line 962: ' color-transparency-title' - line 963: ' color-transparency-p1x1' - line 964: ' In addition to the red, green, and blue components of each color, there is' - line 965: ' an additional optional fourth component, referred to as the color''s "alpha".' - line 966: ' Alpha means transparency and is particularly useful when you want to draw' - line 967: ' elements that appear partially see-through on top of one another. The alpha' - line 968: ' values for an image are sometimes referred to collectively as the "alpha' - line 969: ' channel" of an image.' - line 970: ' color-transparency-p2x1' - line 971: ' It is important to realize that pixels are not literally transparent, this' - line 972: ' is simply a convenient illusion that is accomplished by blending colors.' - line 973: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of' - line 974: ' one to a percentage of another, creating the optical perception of blending.' - line 975: ' (If you are interested in programming "rose-colored" glasses, this is where' - line 976: ' you would begin.)' - line 977: ' color-transparency-p3x1' - line 978: ' Alpha values also range from 0 to 255, with 0 being completely transparent' - line 979: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).' - line 981: ' color-custom-ranges-p1x1' - line 982: ' RGB color with ranges of 0 to 255 is not the only way you can handle color' - line 983: ' in p5.js, in fact, it allows us to think about color any way we like. For' - line 984: ' example, you might prefer to think of color as ranging from 0 to 100 (like a' - line 985: ' percentage). You can do this by specifying a custom ' - line 986: ' color-custom-ranges-p2x1' - line 987: ' The above function says' - line 988: ' green, and blue. The range of RGB values will be from 0 to 100."' - line 989: ' color-custom-ranges-p3x1' - line 990: ' Although it is rarely convenient to do so, you can also have different' - line 991: ' ranges for each color component' - line 992: ' color-custom-ranges-p4x1' - line 993: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue' - line 994: ' from 0 to 10, and alpha from 0 to 255."' - line 995: ' color-custom-ranges-p5x1' - line 996: ' Finally, while you will likely only need RGB color for all of your' - line 997: ' programming needs, you can also specify colors in the HSB (hue, saturation,' - line 998: ' and brightness) mode. Without getting into too much detail, HSB color works' - line 999: ' as follows' - line 1000: ' color-custom-ranges-li1x1' - line 1001: ' color-custom-ranges-li1x2' - line 1002: ' color-custom-ranges-li2x1' - line 1003: ' color-custom-ranges-li2x2' - line 1004: ' color-custom-ranges-li3x1' - line 1005: ' color-custom-ranges-li3x2' - line 1006: ' color-custom-ranges-p6x1' - line 1007: ' color-custom-ranges-p6x2' - line 1008: ' coordinate-system-description1' - line 1009: ' coordinate-system-description2' - line 1010: ' coordinate-system-description3' - line 1011: ' coordinate-system-description4' - line 1012: ' coordinate-system-description5' - line 1013: ' coordinate-system-description-title' - line 1014: ' coordinate-system-description-p1x1' - line 1015: ' Before we begin programming with p5, we must first channel our eighth grade' - line 1016: ' selves, pull out a piece of graph paper, and draw a line. The shortest' - line 1017: ' distance between two points is a good old fashioned line, and this is where' - line 1018: ' we begin, with two points on that graph paper.' - line 1019: ' coordinate-system-description-p2x1' - line 1020: ' The above figure shows a line between point A (1,0) and point B (4,5). If' - line 1021: ' you wanted to direct a friend of yours to draw that same line, you would' - line 1022: ' give them a shout and say "draw a line from the point one-zero to the point' - line 1023: ' four-five, please." Well, for the moment, imagine your friend was a computer' - line 1024: ' and you wanted to instruct this digital pal to display that same line on its' - line 1025: ' screen. The same command applies (only this time you can skip the' - line 1026: ' pleasantries and you will be required to employ a precise formatting). Here,' - line 1027: ' the instruction will look like this' - line 1028: ' coordinate-system-description-p3x1' - line 1029: ' Even without having studied the syntax of writing code, the above statement' - line 1030: ' should make a fair amount of sense. We are providing a command (which we' - line 1031: ' will refer to as a "function") for the machine to follow entitled "line." In' - line 1032: ' addition, we are specifying some arguments for how that line should be' - line 1033: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of' - line 1034: ' code as a sentence, the function is a verb and the arguments are the objects' - line 1035: ' of the sentence. The code sentence also ends with a semicolon instead of a' - line 1036: ' period.' - line 1037: ' coordinate-system-description-p4x1' - line 1038: ' The key here is to realize that the computer screen is nothing more than a' - line 1039: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two' - line 1040: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the' - line 1041: ' location of a point in space. And it is our job to specify what shapes and' - line 1042: ' colors should appear at these pixel coordinates.' - line 1043: ' coordinate-system-description-p5x1' - line 1044: ' Nevertheless, there is a catch here. The graph paper from eighth grade' - line 1045: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis' - line 1046: ' pointing up and the x-axis pointing to the right (in the positive direction,' - line 1047: ' negative down and to the left). The coordinate system for pixels in a' - line 1048: ' computer window, however, is reversed along the y-axis. (0,0) can be found' - line 1049: ' at the top left with the positive direction to the right horizontally and' - line 1050: ' down vertically.' - line 1051: ' coordinate-system-simple-shapes-title' - line 1052: ' coordinate-system-simple-shapes-p1x1' - line 1053: ' The vast majority of p5 programming examples are visual in nature. These' - line 1054: ' examples, at their core, involve drawing shapes and setting pixels. Let''s' - line 1055: ' begin by looking at four primitive shapes.' - line 1056: ' coordinate-system-simple-shapes-p2x1' - line 1057: ' For each shape, we will ask ourselves what information is required to' - line 1058: ' specify the location and size (and later color) of that shape and learn how' - line 1059: ' p5 expects to receive that information. In each of the diagrams below, we''ll' - line 1060: ' assume a window with a width of 100 pixels and height of 100 pixels.' - line 1061: ' coordinate-system-simple-shapes-p3x1' - line 1062: ' coordinate-system-simple-shapes-p3x2' - line 1063: ' coordinate-system-simple-shapes-p4x1' - line 1064: ' coordinate-system-simple-shapes-p4x2' - line 1065: ' coordinate-system-simple-shapes-p5x1' - line 1066: ' coordinate-system-simple-shapes-p5x2' - line 1067: ' , things become a bit more complicated. In p5, a rectangle is specified by' - line 1068: ' the coordinate for the top left corner of the rectangle, as well as its' - line 1069: ' width and height.' - line 1070: ' coordinate-system-simple-shapes-p6x1' - line 1071: ' A second way to draw a rectangle involves specifying the centerpoint, along' - line 1072: ' with width and height. If we prefer this method, we first indicate that we' - line 1073: ' want to use the ' - line 1074: ' coordinate-system-simple-shapes-p6x2' - line 1075: ' coordinate-system-simple-shapes-p7x1' - line 1076: ' Finally, we can also draw a rectangle with two points (the top left corner' - line 1077: ' and the bottom right corner). The mode here is ' - line 1078: ' coordinate-system-simple-shapes-p7x2' - line 1079: ' coordinate-system-simple-shapes-p8x1' - line 1080: ' coordinate-system-simple-shapes-p8x2' - line 1081: ' coordinate-system-simple-shapes-p8x3' - line 1082: ' coordinate-system-simple-shapes-p8x4' - line 1083: ' coordinate-system-simple-shapes-p8x5' - line 1084: ' coordinate-system-simple-shapes-p8x6' - line 1085: ' coordinate-system-simple-shapes-p9x1' - line 1086: ' Now let''s look at what some code with shapes in more complete form, with' - line 1087: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function' - line 1088: ' to specify the width and height of the canvas.' - line 1089: ' teach-desc' - line 1090: test-tutorial - line 1147: ' Libraries' - line 1148: ' core-libraries' - line 1149: ' community-libraries' - line 1180: ' p5.experience' - line 1181: ' Extensive library for p5.js that adds additional event-listening' - line 1182: ' functionality for creating canvas-based web applications.' - line 1183: ' p5.func' - line 1184: ' p5.func is a p5 extension that provides new objects and utilities for' - line 1185: ' function generation in the time, frequency, and spatial domains.' - line 1186: ' p5.geolocation' - line 1187: ' p5.geolocation provides techniques for acquiring, watching, calculating, and' - line 1188: ' geofencing user locations for p5.js.' - line 1189: ' p5.gibber' - line 1190: ' grafica.js' - line 1191: ' grafica.js lets you add simple but highly configurable 2D plots to your' - line 1192: ' p5.js sketches.' - line 1193: ' p5.gui' - line 1194: ' p5.localmessage' - line 1195: ' p5.localmessage provides a simple interface to send messages locally from' - line 1196: ' one sketch to another for easy multi-window sketching!' - line 1197: ' marching' - line 1198: ' mappa' - line 1199: ' Mappa provides a set of tools for working with static maps, tile maps, and' - line 1200: ' geo-data. Useful when building geolocation-based visual representations.' - line 1201: ' ml5.js' - line 1202: ' ml5.js builds on Tensorflow.js and provides friendly access to machine' - line 1203: ' learning algorithms and models in the browser.' - line 1204: ' p5.play' - line 1205: ' p5.play provides sprites, animations, input and collision functions for' - line 1206: ' games and gamelike applications.' - line 1207: ' p5.particle' - line 1208: ' The Particle and Fountain objects can be used to create data-driven effects' - line 1209: ' that are defined through user structures or JSON input and user-draw' - line 1210: ' functions.' - line 1211: ' p5.Riso' - line 1212: ' p5.Riso is a library for generating files suitable for Risograph printing.' - line 1213: ' It helps turn your sketches into multi-color prints.' - line 1214: ' rita.js' - line 1215: ' RiTa.js provides a set of natural language processing objects for generative' - line 1216: ' literature.' - line 1217: ' Rotating knobs' - line 1218: ' p5.scenemanager' - line 1219: ' p5.SceneManager helps you create sketches with multiple states / scenes.' - line 1220: ' Each scene is a like a sketch within the main sketch.' - line 1221: ' p5.screenPosition' - line 1222: ' p5.scribble' - line 1223: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based' - line 1224: ' on a port of the original Processing library' - line 1225: ' p5.serial' - line 1226: ' p5.serial enables serial communication between devices that support serial' - line 1227: ' (RS-232) and p5 sketches running in the browser.' - line 1228: ' Shape5' - line 1229: ' Shape5 is a 2D primative library for elementary students who are learning to' - line 1230: ' code for the first time.' - line 1231: ' p5.shape.js' - line 1232: ' p5.speech' - line 1233: ' p5.speech provides simple, clear access to the Web Speech and Speech' - line 1234: ' Recognition APIs, allowing for the easy creation of sketches that can talk' - line 1235: ' and listen.' - line 1236: ' p5.start2d.js' - line 1237: ' p5.tiledmap' - line 1238: ' p5.tiledmap provides drawing and helper functions to include maps in your' - line 1239: ' sketches.' - line 1240: ' p5.touchgui' - line 1241: ' tramontana' - line 1242: ' Tramontana is a platform for easily use many devices (iOS, Android,' - line 1243: ' tramontana Board, ...) to create interactive environments, interactive' - line 1244: ' spaces or just prototype experiences at scale and in space.' - line 1245: ' vida' - line 1246: ' Vida is a simple library that adds camera (or video) based motion detection' - line 1247: ' and blob tracking functionality to p5js.' - line 1248: ' p5.voronoi' - line 1249: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in' - line 1250: ' your p5.js sketches.' - line 1251: ' p5.3D' - line 1252: ' using-a-library-title' - line 1253: ' using-a-library1' - line 1254: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js' - line 1255: ' core functionality. There are two categories of libraries. Core libraries (' - line 1256: ' using-a-library3' - line 1257: ' ) are part of the p5.js distribution, while contributed libraries are' - line 1258: ' developed, owned, and maintained by members of the p5.js community.' - line 1259: ' using-a-library4' - line 1260: ' To include a library in your sketch, link it into your HTML file, after you' - line 1261: ' have linked in p5.js. An example HTML file might look like this' - line 1262: ' create-your-own-title' - line 1263: ' create-your-own1' - line 1264: ' create-your-own2' - line 1265: ' create-your-own3' - line 1266: ' create-your-own4' - line 1267: ' If you have created a library and would like to have it included on this' - line 1268: ' page, submit this form!' - line 1420: ' community-title' - line 1421: ' community-statement-title' - line 1422: ' community-statement1' - line 1423: ' p5.js is a community interested in exploring the creation of art and design' - line 1424: ' with technology.' - line 1425: ' community-statement2' - line 1426: ' We are a community of, and in solidarity with, people from every gender' - line 1427: ' identity and expression, sexual orientation, race, ethnicity, language,' - line 1428: ' neuro-type, size, ability, class, religion, culture, subculture, political' - line 1429: ' opinion, age, skill level, occupation, and background. We acknowledge that' - line 1430: ' not everyone has the time, financial means, or capacity to actively' - line 1431: ' participate, but we recognize and encourage involvement of all kinds. We' - line 1432: ' facilitate and foster access and empowerment. We are all learners.' - line 1433: ' community-statement3' - line 1434: ' We like these hashtags' - line 1435: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore' - line 1436: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of' - line 1437: ' course).' - line 1438: ' in-practice-title' - line 1439: ' in-practice1' - line 1440: ' in-practice2' - line 1441: ' We insist on actively engaging with requests for feedback regardless of' - line 1442: ' their complexity.' - line 1443: ' in-practice3' - line 1444: ' We welcome newcomers and prioritize the education of others. We strive to' - line 1445: ' approach all tasks with the enthusiasm of a newcomer. Because we believe' - line 1446: ' that newcomers are just as valuable in this effort as experts.' - line 1447: ' in-practice4' - line 1448: ' We consistently make the effort to actively recognize and validate multiple' - line 1449: ' types of contributions.' - line 1450: ' in-practice5' - line 1451: ' in-times-conflict-title' - line 1452: ' in-times-conflict1' - line 1453: ' in-times-conflict2' - line 1454: ' in-times-conflict3' - line 1455: ' We admit when we''re wrong, apologize, and accept responsibility for our' - line 1456: ' actions.' - line 1457: ' in-times-conflict4' - line 1458: ' in-times-conflict5' - line 1459: ' in-times-conflict6' - line 1460: ' in-times-conflict7' - line 1461: ' in-the-future-title' - line 1462: ' in-the-future1' - line 1463: ' notes-title' - line 1464: ' notes1' - line 1465: ' notes2' - line 1466: ' notes3' - line 1467: ' notes4' - line 1468: ' notes5' - line 1469: ' contribute-title' - line 1470: ' contribute1' - line 1471: ' Our community is always looking for enthusiasts to help in all different' - line 1472: ' ways.' - line 1473: ' develop-title' - line 1474: ' develop1' - line 1475: ' develop2' - line 1476: ' develop3' - line 1477: ' develop4' - line 1478: ' develop5' - line 1479: ' document-title' - line 1480: ' document1' - line 1481: ' document2' - line 1482: ' document3' - line 1483: ' document4' - line 1484: ' document5' - line 1485: ' teach-title' - line 1486: ' teach1' - line 1487: ' create-title' - line 1488: ' create1' - line 1489: ' create2' - line 1490: ' create3' - line 1491: ' donate-title' - line 1492: ' donate1' - line 1493: ' donate2' - line 1494: ' donate3' - line 1495: ' contributors-conference-title' - line 1496: ' contributors-conference1' - line 1497: ' While most work happens online, we also convene IRL. We''ve had two' - line 1498: ' contributors conferences held at the' - line 1499: ' contributors-conference2' - line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,' - line 1501: ' developers, educators, and got together to advance the p5.js project.' - line 1502: ' participants-title' - line 1503: ' support-title' - line 1504: ' support1' - line 1505: ' support2' - line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,' - line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of' - line 1508: ' arts, science, technology, and culture.' - line 1509: ' support3' - line 1510: ' support4' - line 1511: ' support5' - line 1512: ' support6' - line 1513: ' mailing-list-title' - line 1514: ' mailing-list-1' - line 1515: ' Enter your email address to receive occasional updates from the Processing' - line 1516: ' Foundation.' - line 1517: ' 2015contributors-conference-title' - line 1518: ' 2015contributors-conference-date' - line 1519: ' 2015contributors-conference1' - line 1520: ' 2015contributors-conference2' - line 1521: ' , advancing the code, documentation, and community outreach tools of the' - line 1522: ' p5.js programming environment. Participants came from as far away as Hong' - line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working' - line 1524: ' professionals in the fields of creative technology, interaction design, and' - line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and' - line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.' - line 1527: ' 2015contributors-conference3' - line 1528: ' 2015contributors-conference-diversity-title' - line 1529: ' 2015contributors-conference-diversity1' - line 1530: ' Alongside technical development, one of the main focuses of this conference' - line 1531: ' was outreach, community, and diversity. The conference began with a panel' - line 1532: ' 2015contributors-conference-diversity2' - line 1533: ' Diversity' - line 1534: ' the Internet' - line 1535: ' 2015contributors-conference-diversity3' - line 1537: ' 2015contributors-conference-diversity5' - line 1538: ' 2015contributors-conference-diversity6' - line 1539: ' 2015contributors-conference-diversity7' - line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie' - line 1541: ' Mellon University. Speakers included' - line 1542: ' 2015contributors-conference-diversity8' - line 1543: ' 2015contributors-conference-diversity9' - line 1545: ' 2015cc_2' - line 1546: ' 2015cc_3' - line 1547: ' 2015cc_4' - line 1548: ' Woman expressively speaks into a microphone while two male collaborators' - line 1549: ' look on' - line 1550: ' 2015cc_5' - line 1551: ' 2015cc_6' - line 1553: ' Participants sit in a circle around a white board with sticky notes on it' - line 1554: ' while a female student speaks into a microphone' - line 1555: ' 2015cc_8' - line 1556: ' Participants sit around a table looking at each others laptops and compare' - line 1557: ' code' - line 1558: ' 2015cc_9' - line 1559: ' 2015cc_10' - line 1561: ' group of participants with laptops look at her powerpoint in a classroom' - line 1562: ' 2015cc_11' - line 1563: ' Woman speaks at a podium in an auditorium while three participants sit on' - line 1564: ' the stage and another three are skyping in on the stage screen' - line 1565: ' 2015cc_12' - line 1566: ' 2015cc_13' - line 1567: ' 2015cc_14' - line 1569: ' 2019contributors-conference-title' - line 1570: ' 2019contributors-conference-date' - line 1571: ' 2019contributors-conference1' - line 1572: ' 2019contributors-conference2' - line 1573: ' , advancing the code, documentation, and community outreach tools and' - line 1574: ' exploring the current landscape of the p5.js programming environment.' - line 1575: ' Comprising a diverse range of participants within the fields of creative' - line 1577: ' at fostering dialogue through a multidisciplinary lens. Working groups' - line 1578: ' focused on several topic areas' - line 1579: ' Landscape of Creative Tech; and Internationalization.' - line 1580: ' 2019contributors-conference3' - line 1581: ' 2019contributors-conference4' - line 1582: ' outputs' - line 1583: ' output1' - line 1585: ' octagon girds for p5.js. Created by Aren Davey.' - line 1586: ' output2' - line 1587: ' . A set of template files for building a multi-device, multiplayer game' - line 1588: ' where multiple clients can connect to a specified host page. Created by L05.' - line 1589: ' output3' - line 1590: ' output3-1' - line 1591: ' , testing early implementations of softCompile, OSC interfacing and added' - line 1592: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj' - line 1593: ' environment! Created by Ted Davis.' - line 1594: ' output4' - line 1595: ' A panel on Blackness and Gender in Virtual Space led by American Artist,' - line 1596: ' with shawné michaelain holloway and LaJuné McMillian.' - line 1597: ' output5' - line 1598: ' output6' - line 1599: ' output6-1' - line 1600: ' output6-2' - line 1601: ' output7' - line 1602: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and' - line 1603: ' Jon Chambers.' - line 1604: ' output8' - line 1605: ' output8-1' - line 1606: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian' - line 1607: ' Ye, Dorothy R. Santos, and Yasheng She.' - line 1608: ' output9' - line 1609: ' output9-1' - line 1610: ' output10' - line 1611: ' An overhaul of the p5.js website for accessibility. Including updates for' - line 1612: ' screen reader accessibility, and improvements to the home, download, getting' - line 1613: ' started, and reference pages. With contributions from Claire Kearney-Volpe,' - line 1614: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren' - line 1615: ' McCarthy, and Evelyn Masso.' - line 1616: ' output11' - line 1617: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,' - line 1618: ' Sona Lee, Ted Davis, and Carlos Garcia.' - line 1619: ' output12' - line 1620: ' output13' - line 1621: ' A design of the p5.js library system for the p5 Editor. Created by Cassie' - line 1622: ' Tarakajian and Luca Damasco.' - line 1623: ' output14' - line 1624: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and' - line 1625: ' Lauren Valley.' - line 1626: ' output15' - line 1627: ' 2019cc_1' - line 1628: ' 2019cc_2' - line 1629: ' 2019cc_3' - line 1630: ' 2019cc_4' - line 1631: ' 2019cc_5' - line 1632: ' 2019cc_6' - line 1633: ' 2019cc_7' - line 1634: ' 2019cc_8' - line 1635: ' 2019cc_9' - line 1636: ' Participant speaks at a podium in front of projected text about the problem' - line 1637: ' with anonymyzing data' - line 1638: ' 2019cc_10' - line 1639: ' Person with a microphone speaking to fellow participants in front of text' - line 1640: ' that reads p5.js will not add any new features except those that increase' - line 1641: ' access' - line 1758: ' book-4-order-b' - line 1759: ' book-5-title' - line 1760: ' book-5-authors' - line 1762: ' book-5-pages' - line 1763: ' book-5-type' - line 1764: ' book-5-description' - line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the' - line 1767: ' will acquire from this book are highly transferable to a myriad of' - line 1768: ' industries and can be used towards building web applications, programmable' - line 1769: ' robots, or generative art.' - line 1771: ' book-5-order-b' - line 1800: ' Examples' - line 1801: ' back-examples' - line 1802: ' Structure' - line 1815: ' Instance_Mode' - line 1816: ' Dom' - line 1817: ' Drawing' - line 1818: ' Transform' - line 1821: ' Input' - line 1822: ' Advanced_Data' - line 1823: ' Sound' - line 1825: ' Hello_P5' - line 1829: ' Reference' - line 2005: ' showcase-title' - line 2006: ' showcase-intro1' - line 2007: ' showcase-intro2' - line 2008: ' showcase-intro3' - line 2017: ' showcase-featuring' - line 2018: ' project-tag-art' - line 2019: ' project-tag-design' - line 2020: ' project-tag-code' - line 2022: ' project-tag-documentation' - line 2023: ' project-tag-game' - line 2024: ' project-tag-library' - line 2025: ' project-tag-organizing' - line 2026: ' project-tag-tool' - line 2027: ' project-tag-tutorial' - line 2028: ' project-roni' - line 2029: ' credit-roni' - line 2030: ' description-roni' - line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a' - line 2032: ' plotter and pens.' - line 2033: ' project-phuong' - line 2034: ' credit-phuong' - line 2045: ' credit-qianqian' - line 2046: ' description-qianqian' - line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,' - line 2048: ' and technology, including p5.js tutorials for beginners. Available on' - line 2049: ' YouTube, Instagram, Bilibili, and TikTok.' - line 2050: ' project-casey-louise' - line 2053: ' project-moon-xin' - line 2054: ' credit-moon-xin' - line 2055: ' description-moon-xin' - line 2056: ' Browser-based moving posters that use graphical systems, transformation' - line 2057: ' methods, and p5.js to address the connotations of a word less than 8' - line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative' - line 2059: ' Systems) at the University of Georgia.' - line 2060: ' created-by' - line 2061: ' pronouns-female' - line 2062: ' creator-from-roni-cantor' - line 2071: ' some more traditional forms of art—while still coding and playing with' - line 2072: ' robots.' - line 2073: ' project-a-1-2-roni-cantor' - line 2074: ' project-a-1-3-roni-cantor' - line 2075: ' project-a-1-4-roni-cantor' - line 2076: ' project-q-2' - line 2077: ' project-a-2-1-roni-cantor' - line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear' - line 2079: ' interpolation) formulas and display the visuals in the' - line 2080: ' project-a-2-2-roni-cantor' - line 2086: ' this information to the plotter with a program called' - line 2087: ' project-a-2-5-roni-cantor' - line 2088: ' project-q-3' - line 2090: ' project-q-4' - line 2091: ' Did you face any challenges working on this project? If so, how did you' - line 2092: ' overcome them?' - line 2093: ' project-a-4-roni-cantor' - line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really' - line 2104: ' project-a-1-1-qianqian' - line 2105: ' project-a-1-2-qianqian' - line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free' - line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with' - line 2108: ' different colors.' - line 2109: ' project-a-2-1-qianqian' - line 2110: ' This project started with an idea of teaching my mom, who lives in China and' - line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on' - line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why' - line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily' - line 2114: ' due to the lack of free creative coding education resources. Most of the' - line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js' - line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are' - line 2117: ' inaccessible in China because of internet censorship.' - line 2118: ' project-a-2-2-qianqian' - line 2119: ' project-a-2-3-qianqian' - line 2120: ' , but the more I watched coding tutorials online, the more I realized how' - line 2121: ' difficult it is to find other womxn and people of color teaching coding,' - line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to' - line 2123: ' creative coding.' - line 2124: ' project-a-2-4-qianqian' - line 2125: ' I am working on opening up the video channels to other Chinese creatives who' - line 2126: ' want to contribute to the educational resource together, like interviews and' - line 2127: ' guest tutorials. If you are interested in teaching/talking about creative' - line 2128: ' coding in Mandarin, HMU!' - line 2129: ' project-a-3-1-qianqian' - line 2130: ' project-a-3-2-qianqian' - line 2131: ' project-a-4-1-qianqian' - line 2132: ' Learning to code in a second language was difficult and the lack of' - line 2133: ' community made this process even harder. I hope to speak from my experience' - line 2134: ' as a beginner and someone who once felt like an outsider to the creative' - line 2135: ' coding and video tutorial world.' - line 2136: ' project-a-4-2-qianqian' - line 2137: ' I spend a lot of time researching the latest technology for my videos. In' - line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to' - line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get' - line 2140: ' started making instructional videos.' - line 2141: ' project-a-4-3-qianqian' - line 2142: ' Another issue I came across was my own fear of putting myself online. I' - line 2143: ' first had to get over my anxiety of making mistakes in the videos or' - line 2144: ' receiving negative comments online. Often womxn and people of color are' - line 2145: ' targets for online harassment. I’m hoping to help set an example for other' - line 2146: ' womxn and people of color that it’s ok to put yourselves online and' - line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will' - line 2148: ' be able to stop online harassment by creating strong diverse communities.' - line 2149: ' project-a-5-1-qianqian' - line 2150: ' project-a-5-2-qianqian' - line 2151: ' creator-from-phuong' - line 2152: ' project-a-1-1-phuong' - line 2153: ' link-1-phuong' - line 2154: ' link-2-phuong' - line 2155: ' link-3-phuong' - line 2156: ' project-a-1-2-phuong' - line 2157: ' project-a-1-3-phuong' - line 2158: ' I was taking a course at the School of Machines in Berlin this summer' - line 2159: ' called! "' - line 2160: ' project-a-1-4-phuong' - line 2161: ' project-a-2-1-phuong' - line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites' - line 2163: ' for Airi and the ghosts were drawn on an iPad app called' - line 2164: ' project-a-2-2-phuong' - line 2165: ' project-a-2-3-phuong' - line 2166: ' project-a-2-4-phuong' - line 2167: ' p5-sketch-by-chjno-phuong' - line 2168: ' project-a-2-5-phuong' - line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was' - line 2170: ' detected, the scrolling speed would change to make an illusion of Airi' - line 2171: ' flying up. When the user does not do anything, the scrolling speed is' - line 2172: ' negative, which makes it look like Airi is falling down.' - line 2173: ' project-a-2-6-phuong' - line 2174: ' project-a-2-7-phuong' - line 2175: ' project-a-3-1-phuong' - line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks' - line 2177: ' and classes with the' - line 2178: ' project-a-3-2-phuong' - line 2179: ' project-a-3-3-phuong' - line 2180: ' project-a-3-4-phuong' - line 2181: ' project-a-4-1-phuong' - line 2182: ' There were a lot of challenges simply because p5.js was something new to me.' - line 2183: ' I did not work much with JavaScript in general before. Reading documentation' - line 2184: ' and searching for similar examples helped a lot.' - line 2185: ' project-a-5-1-phuong' - line 2186: ' school-of-machines-phuong' - line 2187: ' project-a-5-2-phuong' - line 2188: ' ! They try hard to connect the most creative people in the world and they do' - line 2189: ' it well so far. ❤️' - line 2190: ' pronouns-male' - line 2191: ' creator-from-chung' - line 2192: ' link-1-casey-louise' - line 2193: ' link-2-casey-louise' - line 2194: ' link-1-chung' - line 2195: ' link-2-chung' - line 2196: ' link-3-chung' - line 2197: ' project-a-1-1-chung' - line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College' - line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)' - line 2200: ' and motion graphics.' - line 2201: ' project-a-1-2-chung' - line 2202: ' project-a-1-3-chung' - line 2203: ' project-a-2-1-chung' - line 2204: ' This summer, I gave myself a challenge of making typographic posters with' - line 2205: ' coding, and this is one of the posters I made. I didn’t know until very' - line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching' - line 2207: ' dan-shiffman-matterjs-tutorial' - line 2208: ' project-a-2-2-chung' - line 2209: ' project-a-3-1-chung' - line 2210: ' There are many things I love about p5.js such as the online community and' - line 2211: ' beginner friendliness. What I really like right now is the' - line 2212: ' project-a-3-2-chung' - line 2213: ' , with which I can not only work online for myself but also share URLs' - line 2214: ' quickly in the present mode. For this project in particular, I had to do a' - line 2215: ' lot of testing on my phone, and it was much easier and quicker than' - line 2216: ' committing to GitHub.' - line 2217: ' project-a-4-1-chung' - line 2218: ' project-a-4-2-chung' - line 2219: ' project-a-4-3-chung' - line 2220: ' project-a-5-1-chung' - line 2221: ' As mentioned above, if you want to render out frames and video files out of' - line 2222: ' p5.js sketches, check out my' - line 2223: ' project-a-5-2-chung' - line 2224: ' creator-from-casey-louise' - line 2225: ' project-a-1-1-casey-louise' - line 2226: ' Casey' - line 2227: ' interactive spaces, physical and digital.' - line 2228: ' project-a-1-2-casey-louise' - line 2229: ' Louise' - line 2230: ' interactive spaces based on sensor technologies.' - line 2231: ' project-a-1-3-casey-louise' - line 2232: ' Casey' - line 2233: ' I had been dabbling in' - line 2234: ' project-a-1-4-casey-louise' - line 2235: ' project-a-1-5-casey-louise' - line 2236: ' Louise' - line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for' - line 2238: ' me.' - line 2239: ' project-a-2-1-casey-louise' - line 2240: ' Casey' - line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open' - line 2242: ' source, storytelling, and learning resource projects at ITP called' - line 2243: ' project-a-2-2-casey-louise' - line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I' - line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource' - line 2246: ' for others to learn. When I told Louise about the project, she was' - line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been' - line 2248: ' great about making sure the project is a learning resource and not just a' - line 2249: ' collection of examples.' - line 2250: ' project-a-3-1-casey-louise' - line 2251: ' project-a-3-2-casey-louise' - line 2252: ' project-a-3-3-casey-louise' - line 2253: ' project-a-3-4-casey-louise' - line 2254: ' project-a-3-5-casey-louise' - line 2255: ' project-a-4-1-casey-louise' - line 2256: ' Casey' - line 2257: ' reaching out to amazing people, asking questions, and asking for permission' - line 2258: ' to use their examples in our project.' - line 2259: ' adam-ferris-repo-casey-louise' - line 2260: ' project-a-4-2-casey-louise' - line 2261: ' project-a-4-3-casey-louise' - line 2262: ' project-a-4-4-casey-louise' - line 2263: ' webgl-casey-louise' - line 2264: ' project-a-4-5-casey-louise' - line 2265: ' project-a-4-6-casey-louise' - line 2266: ' Louise' - line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam' - line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can' - line 2269: ' understand how to implement it, so it was as much a technical challenge as' - line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew' - line 2271: ' inspiration from the way the' - line 2272: ' openframeworks-book-casey-louise' - line 2273: ' project-a-4-7-casey-louise' - line 2274: ' project-a-5-1-casey-louise' - line 2275: ' project-a-5-2-casey-louise' - line 2276: ' pronouns-nonbinary' - line 2277: ' creator-from-moon' - line 2278: ' posters-by' - line 2279: ' project-a-1-1-moon' - line 2280: ' Moon' - line 2281: ' summer, I taught a graphic design course in the University of Georgia' - line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am' - line 2283: ' planning to teach and to study digital platforms at UGA.' - line 2284: ' project-a-1-2-moon' - line 2285: ' project-a-1-3-moon' - line 2286: ' project-a-1-4-moon' - line 2287: ' pcd-la-moon' - line 2288: ' project-a-1-5-moon' - line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent' - line 2290: ' teaching and learning experience.' - line 2291: ' project-a-2-1-moon' - line 2292: ' codetrain-moon' - line 2293: ' project-a-2-2-moon' - line 2294: ' p5-reference-moon' - line 2295: ' project-a-2-3-moon' - line 2296: ' project-a-3-1-moon' - line 2297: ' project-a-3-2-moon' - line 2298: ' project-a-3-3-moon' - line 2299: ' project-a-3-4-moon' - line 2300: ' . I was able to use and to teach this tool to visualize various ideas about' - line 2301: ' time in motion.' - line 2302: ' project-a-4-1-moon' - line 2303: ' It was challenging for me, a beginner, to understand the overall structure' - line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a' - line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I' - line 2306: ' understood the p5.js structure and code with strong constraints I set up. It' - line 2307: ' was an excellent teaching and learning experience.' - line 2308: ' project-a-5-1-moon' - line 2309: ' project-a-5-2-moon' - line 2310: teach - line 2311: ' teach-title2' - line 2312: ' teach-intro1' - line 2313: ' Every teaching has its own unique goals, messages, conditions, and' - line 2314: ' environments. ' - line 2315: ' teach-intro2' - line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to' - line 2317: ' better connect the p5.js learner and educator communities around the world. ' - line 2318: ' teach-intro3' - line 2319: ' teach-intro4' - line 2320: ' teach-heading' - line 2321: ' teach-search-filter' - line 2322: ' teach-filter1' - line 2323: ' teach-filter1-label1' - line 2324: ' teach-filter1-label2' - line 2325: ' teach-filter1-label3' - line 2326: ' teach-filter1-label4' - line 2327: ' teach-filter1-label5' - line 2328: ' teach-filter1-label6' - line 2329: ' teach-filter1-label7' - line 2330: ' teach-filter1-label8' - line 2331: ' teach-filter1-label9' - line 2332: ' teach-filter1-label10' - line 2333: ' teach-filter1-label11' - line 2334: ' teach-filter1-label12' - line 2335: ' teach-filter1-label13' - line 2336: ' teach-filter1-label14' - line 2337: ' teach-filter1-label15' - line 2338: ' teach-filter1-label16' - line 2339: ' teach-filter2' - line 2340: ' teach-filter2-label1' - line 2341: ' teach-filter2-label2' - line 2342: ' teach-filter2-label3' - line 2343: ' teach-filter2-label4' - line 2344: ' teach-filter2-label5' - line 2345: ' teach-filter2-label6' - line 2346: ' teach-filter2-label7' - line 2347: ' teach-filter3' - line 2348: ' teach-filter4' - line 2349: ' teach-filter4-label1' - line 2350: ' teach-filter4-label2' - line 2351: ' teach-filter4-label3' - line 2352: ' teach-case-subtitle1' - line 2353: ' teach-case-subtitle2' - line 2354: ' teach-case-subtitle3' - line 2355: ' teach-case-subtitle4' - line 2356: ' teach-case-subtitle5' - line 2357: ' teach-case1-title' - line 2358: ' teach-case1-lead-name' - line 2359: ' teach-case1-content1' - line 2360: ' teach-case1-content1-1' - line 2361: ' teach-case1-content2' - line 2362: ' teach-case1-content3' - line 2363: ' teach-case1-content4' - line 2364: ' To introduce a new public to programming through fun and compelling' - line 2365: ' examples. ' - line 2366: ' teach-case1-content5' - line 2367: ' Method' - line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web' - line 2369: ' editor. I was teaching using a video projector as well as a board.' - line 2370: ' teach-case1-content5-1' - line 2371: ' Materials' - line 2372: ' links available in ' - line 2373: ' teach-case2-title' - line 2374: ' Making The Thing that Makes the Thing' - line 2375: ' with p5.js' - line 2376: ' teach-case2-lead-name' - line 2377: ' teach-case2-content1' - line 2378: ' teach-case2-content1-1' - line 2379: ' teach-case2-content2' - line 2380: ' Our participants included art/design students & professionals, creative' - line 2381: ' coding enthusiasts. We had close to 50 participants.' - line 2382: ' teach-case2-content3' - line 2383: ' teach-case2-content4' - line 2384: ' To explore generative art & design and recreate some classical works' - line 2385: ' with p5.js. ' - line 2386: ' teach-case2-content5' - line 2387: ' teach-case2-content5-1' - line 2388: ' teach-case2-content5-2' - line 2389: ' teach-case2-content5-3' - line 2390: ' teach-case2-content5-4' - line 2391: ' teach-case2-content5-5' - line 2392: ' teach-case3-title' - line 2393: ' teach-case3-lead-name' - line 2394: ' teach-case3-speech' - line 2395: ' teach-case3-content1' - line 2396: ' teach-case3-content1-1' - line 2397: ' teach-case3-content2' - line 2398: ' Our participants included art/design students & professionals, creative' - line 2399: ' coding enthusiasts. We had close to 50 participants.' - line 2400: ' teach-case3-content3' - line 2401: ' teach-case3-content4' - line 2402: ' To build a teacher and student community around p5 for middle and high' - line 2403: ' school.' - line 2404: ' teach-case3-content5' - line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different' - line 2406: ' methods and materials. Most used some sort of slides or documentation, some' - line 2407: ' live coding using an editor, with work time for participant to remix.' - line 2408: ' teach-case3-content5-1' - line 2409: ' teach-case3-content5-2' - line 2410: ' teach-case3-content5-3' - line 2411: ' teach-case4-title' - line 2412: ' teach-case4-lead-name' - line 2413: ' teach-case4-speech' - line 2414: ' teach-case4-content1' - line 2415: ' teach-case4-content1-1' - line 2416: ' teach-case4-content2' - line 2417: ' I had around 16 students in the workshop, and a team including 3 people from' - line 2418: ' the PlusCode festival, and one person at the venue.' - line 2419: ' teach-case4-content3' - line 2420: ' teach-case4-content4' - line 2421: ' Introduction to beginners and artists of graphic web programming and open' - line 2422: ' source, using p5.js, in Spanish ' - line 2423: ' teach-case4-content5' - line 2424: ' teach-case4-content5-1' - line 2425: ' teach-case4-content5-2' - line 2426: ' teach-case4-content5-3' - line 2427: ' teach-case4-content5-4' - line 2428: ' teach-case5-title' - line 2429: ' teach-case5-lead-name' - line 2430: ' teach-case5-speech' - line 2431: ' My greatest source of uncertainty in developing the workshop was whether it' - line 2432: ' was trying to teach art to programmers or to teach programming to artists.' - line 2433: ' teach-case5-content1' - line 2434: ' teach-case5-content1-1' - line 2435: ' teach-case5-content1-2' - line 2436: ' teach-case5-content1-3' - line 2437: ' teach-case5-content2' - line 2438: ' teach-case5-content3' - line 2439: ' teach-case5-content4' - line 2440: ' To introduce p5.js to artists with little or no programming experience and' - line 2441: ' to suggest one way an analogue practice can migrate to a digital form.' - line 2442: ' teach-case5-content5' - line 2443: ' A printed workbook with activities that used the p5.js web editor to show' - line 2444: ' how translate an physical drawing into a digital drawing.' - line 2445: ' teach-case5-content5-1' - line 2446: ' teach-case5-content5-2' - line 2447: ' teach-case5-content5-3' - line 2448: ' teach-case6-title' - line 2449: ' teach-case6-lead-name' - line 2450: ' teach-case6-speech' - line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in' - line 2452: ' your everyday life!' - line 2453: ' teach-case6-content1' - line 2454: ' teach-case6-content1-1' - line 2455: ' teach-case6-content2' - line 2456: ' teach-case6-content3' - line 2457: ' teach-case6-content4' - line 2458: ' teach-case6-content5' - line 2459: ' teach-case6-content5-1' - line 2460: ' teach-case6-content5-2' - line 2461: ' teach-case6-content5-3' - line 2462: ' teach-case6-content5-4' - line 2463: ' teach-case6-content5-5' - line 2464: ' teach-case7-title' - line 2465: ' teach-case7-lead-name' - line 2466: ' teach-case7-speech' - line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you' - line 2468: ' to give it a try!' - line 2469: ' teach-case7-content1' - line 2470: ' teach-case7-content1-1' - line 2471: ' teach-case7-content2' - line 2472: ' teach-case7-content3' - line 2473: ' teach-case7-content4' - line 2474: ' teach-case7-content5' - line 2475: ' teach-case7-content5-1' - line 2476: ' teach-case8-title' - line 2477: ' teach-case8-lead-name' - line 2478: ' teach-case8-content1' - line 2479: ' teach-case8-content1-1' - line 2480: ' teach-case8-content2' - line 2481: ' teach-case8-content3' - line 2482: ' teach-case8-content4' - line 2483: ' teach-case8-content5' - line 2484: ' teach-case8-content5-1' - line 2485: ' teach-case8-content5-2' - line 2486: ' teach-case9-title' - line 2487: ' teach-case9-lead-name' - line 2488: ' teach-case9-content1' - line 2489: ' teach-case9-content1-1' - line 2490: ' teach-case9-content2' - line 2491: ' Students at Interactive Telecommunications Program, New York University. 16' - line 2492: ' people.' - line 2493: ' teach-case9-content3' - line 2494: ' teach-case9-content4' - line 2495: ' The goal of this class is to learn and understand common machine learning' - line 2496: ' techniques and apply them to generate creative outputs in the browser using' - line 2497: ' ml5.js and p5.js.' - line 2498: ' teach-case9-content5' - line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and' - line 2500: ' presentations. I used ' - line 2501: ' teach-case9-content5-1' - line 2502: ' teach-case9-content5-2' - line 2503: ' teach-case9-content5-3' - line 2504: ' teach-case10-title' - line 2505: ' teach-case10-lead-name' - line 2506: ' teach-case10-content1' - line 2507: ' teach-case10-content3' - line 2508: ' teach-case10-content4' - line 2509: ' Introduce learners (potentially with no coding experiences at all) to the' - line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding' - line 2511: ' and enable them to pursue own projects in a safe environment.' - line 2512: ' teach-case10-content5' - line 2513: ' p5.js source code (for the introductory project), JavaScript source code' - line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in' - line 2515: ' .pdf format, all hosted publicly on GitHub. ' - line 2516: ' teach-case10-content5-1' - line 2517: ' teach-case10-content5-2' - line 2518: ' teach-case11-title' - line 2519: ' teach-case11-lead-name' - line 2520: ' teach-case11-content1' - line 2521: ' teach-case11-content1-1' - line 2522: ' teach-case11-content2' - line 2523: ' teach-case11-content3' - line 2524: ' teach-case11-content4' - line 2525: ' Over the course of three workshops, we will draw and create patterns using' - line 2526: ' p5.js, an open-source graphical library; we will learn and apply' - line 2527: ' computational concepts to transform patterns and finally, we will bring a' - line 2528: ' weaving to life with electronic microcontrollers.' - line 2529: ' teach-case11-content5' - line 2530: ' teach-case11-content5-1' - line 2531: ' Materials' - line 2532: ' pattern weaving tool.' - line 2533: ' teach-case11-content5-2' - line 2534: ' teach-case11-content5-3' - line 2535: ' teach-case11-content5-4' - line 2536: ' teach-case11-content5-5' - line 2537: ' teach-case12-title' - line 2538: ' teach-case12-lead-name' - line 2539: ' teach-case12-speech' - line 2540: ' I''m working on a new series of coding class for Disabled students in South' - line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold' - line 2542: ' workshops in December 2020. The project is supported by the Open Society' - line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture' - line 2544: ' Center.' - line 2545: ' teach-case12-content1' - line 2546: ' teach-case12-content1-1' - line 2547: ' teach-case12-content2' - line 2548: ' teach-case12-content3' - line 2549: ' teach-case12-content4' - line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming' - line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.' - line 2552: ' teach-case12-content5' - line 2553: ' We used p5.js Web editor and code examples on the website. We also used' - line 2554: ' dice, playing cards and various paper tools to help students learn about' - line 2555: ' coding concepts.' - line 2556: ' teach-case12-content5-1' - line 2557: ' teach-case12-content5-2' - line 598: ' color-custom-ranges-li1x2' - line 601: ' color-custom-ranges-li2x2' - line 84: ' copyright1' - line 432: '' - line 434: '' - line 435: ' getting-started-in-webgl-coords-and-transform-heading3' - line 556: ' getting-started-in-webgl-coords-and-transform-glossary-term2-definition' - line 557: ' getting-started-in-webgl-coords-and-transform-glossary-term3-title' - line 558: ' getting-started-in-webgl-coords-and-transform-glossary-term3-definition' - line 560: ' getting-started-in-webgl-coords-and-transform-glossary-term4-definition' - line 561: ' getting-started-in-webgl-coords-and-transform-glossary-term5-title' - line 562: ' getting-started-in-webgl-coords-and-transform-glossary-term5-definition' - line 563: ' getting-started-in-webgl-coords-and-transform-glossary-term6-title' - line 564: ' getting-started-in-webgl-coords-and-transform-glossary-term6-definition' - line 570: '' - line 571: '' - line 572: '' - line 574: '' - line 575: '' - line 576: '' - line 577: '' - line 578: '' - line 579: '' - line 584: '' - line 585: '' - line 586: '' - line 595: ' to create geometry from scratch.' - line 607: ' There are other methods that offer greater control of the geometry. A shape can be defined point-by-point using' - line 615: '' - line 623: '' - line 624: ' getting-started-in-webgl-appearance-p0x1' - line 625: ' Creating in 3D is about more than just geometry. Cameras, lights, and materials are an' - line 632: ' getting-started-in-webgl-appearance-toc3' - line 633: ' getting-started-in-webgl-appearance-toc4' - line 634: ' getting-started-in-webgl-appearance-toc5' - line 635: '' - line 636: ' getting-started-in-webgl-appearance-heading1' - line 637: '' - line 638: ' getting-started-in-webgl-appearance-p1x1' - line 642: ' class="code" href="{{root}}/reference/#/p5/ortho">ortho().' - line 643: ' getting-started-in-webgl-appearance-p2x1' - line 644: ' A perspective camera skews objects so they appear to get smaller as they get further away, vanishing' - line 645: ' at a single point in the distance. This is in contrast to an orthographic camera, where the ' - line 646: ' geometry stays the same size as it gets further away and has no vanishing point. ' - line 647: ' getting-started-in-webgl-appearance-p3x1' - line 648: ' One setting that we can change with a perspective camera is the field-of-view, or FOV. This is the ' - line 649: ' term that is used to describe how much our camera can see, measured as an angle. In simple examples it might appear' - line 654: ' The near plane defines the minimum distance that geometry must be from the camera to be rendered. The far plane defines the maximum' - line 657: ' getting-started-in-webgl-appearance-p5x1' - line 658: ' Cameras can be moved by passing arguments to camera(), but constantly moving and adjusting the camera in code can be tedious, especially when you are experimenting with' - line 659: ' ideas. p5.js has a special camera method, orbitControl(), that can be used to zoom, pan,' - line 661: ' and position the camera using the mouse.' - line 662: ' getting-started-in-webgl-appearance-p6x1' - line 663: ' A scene can have multiple cameras, but only one camera can be active at a time. Sketches in p5.js will default' - line 664: ' to having a single perspective camera, but that can be changed by calling either perspective()' - line 667: ' position of the active camera and the position that the camera is looking at.' - line 668: '' - line 669: ' getting-started-in-webgl-appearance-heading2' - line 671: ' getting-started-in-webgl-appearance-p7x1' - line 672: ' Lighting is another essential part of a 3D scene. To be able to convey shape and depth in 3D is necessary to' - line 673: ' have a light source. p5.js has a few different types of light that can be used in a sketch.' - line 674: '' - line 675: ' getting-started-in-webgl-appearance-lighting-list1' - line 676: ' Ambient light makes everything display a little brighter, with no consideration for light position or' - line 677: ' direction.' - line 678: ' getting-started-in-webgl-appearance-lighting-list2' - line 679: ' A directional light shines from one direction, which can be especially useful for communicating depth in' - line 680: ' a scene, or when a scene needs a ''sun'' light. This method accepts a color and direction.' - line 681: ' getting-started-in-webgl-appearance-lighting-list3' - line 682: ' A point light emits from a single point in all directions, similar to something like a lightbulb. This' - line 683: ' method accepts a color and a position for the light.' - line 684: ' getting-started-in-webgl-appearance-lighting-list4' - line 685: ' A spot light emits from a single point in a single direction. This light is cast in a conical shape and' - line 686: ' it''s radius and concentration can be adjusted.' - line 687: ' getting-started-in-webgl-appearance-lighting-list5' - line 688: ' noLights() makes it so that all subsequent geometry is rendered without any lighting. This can be useful' - line 689: ' when you want flat, unshaded geometry.' - line 690: '' - line 693: ' simultaneously, allowing you to compose a scene with varied and complex lighting sources. ' - line 694: ' Try checking and unchecking the boxes in the following interactive example to see how lighting can' - line 695: ' be blended together. For each active light source there are visual indicators of their position or' - line 696: ' direction, just know that these are here for illustrative purposes!' - line 697: ' getting-started-in-webgl-appearance-p9x1' - line 698: ' In this next example, try commenting and uncommenting each light and experiment with their parameters.' - line 699: '' - line 700: ' getting-started-in-webgl-appearance-heading3' - line 701: '' - line 704: ' light interacts with the geometry and how color (or texture) gets applied to the object. Materials can be' - line 705: ' varied,' - line 706: ' making objects shiny, rough, or even textured with images.' - line 707: '' - line 708: ' getting-started-in-webgl-appearance-p11x1' - line 709: ' In this interactive example, try toggling each of the different materials to see how they' - line 710: ' affect the appearance of the geometry. You can move your mouse and see the effect that a point light has on the material.' - line 711: '' - line 712: ' getting-started-in-webgl-appearance-p12x1' - line 713: ' Try commenting and uncommenting the different lights in this example' - line 714: '' - line 715: ' getting-started-in-webgl-appearance-p13x1' - line 716: ' More custom materials can be achieved through using texture(). In short, these are images' - line 717: ' that can be mapped onto the surface of a geometry. These textures can be imported from an image and can even be' - line 718: ' generated within code using shaders. To map a texture to your geometry, use loadImage() ' - line 719: ' within preload(), then call texture() before drawing your shape.' - line 721: ' getting-started-in-webgl-appearance-info1x1' - line 722: ' While they are useful for changing the appearance of your geometry, shaders are a bit beyond the scope of this ' - line 723: ' tutorial, so make sure to check out the Introduction to Shaders ' - line 724: ' page when you are ready. ' - line 725: '' - line 726: ' getting-started-in-webgl-appearance-glossary-title' - line 727: ' getting-started-in-webgl-appearance-glossary-term1-title' - line 728: ' getting-started-in-webgl-appearance-glossary-term1-definition' - line 600: ' Objects can appear differently based on their material. Materials dictate how' - line 605: ' varied, making objects shiny, rough, or even textured with images.' - line 610: ' In this interactive example, try selecting each of the different materials to see how they' - line 611: ' affect the appearance of the geometry. You can move your mouse and see the effect that a directional light has on the material. ' - line 588: ' getting-started-in-webgl-custom-geometry-p6x1_' - line 589: ' , which p5.js uses internally for loadModel() but can also be used to' - line 616: ' change this using ' - line 617: ' getting-started-in-webgl-appearance-p1x2' - line 618: ' or ' -hi: - src/data/en.yml: - line 463: ' You can also use ' - line 484: ' getting-started-in-webgl-coords-and-transform-p16x3' - line 627: ' to have a zoom-like effect, but it also affects the way that shapes change size in the distance.' - line 630: ' Another important term when working with cameras in 3D is the camera frustum. The frustum of the camera is the' - line 691: ' only used in the vertex shader and are typically provided by p5.js. When you use p5.js methods like rect() or ' - line 381: ' This tutorial will introduce new concepts for creating 3D sketches with p5.js.' - line 390: ' getting-started-in-webgl-coords-and-transform-heading1' - line 409: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled ' - line 410: ' getting-started-in-webgl-coords-and-transform-info1x2' - line 411: ' Coordinate System and Shapes' - line 394: ' it allows us to do all kinds of math to help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 374: ' getting-started-in-webgl-glossary-title' - line 403: ' Let''s get started by setting up the p5.js to use WebGL, by passing WEBGL as a third parameter into createCanvas().' - line 422: ' p5.js has a few methods, ' - line 423: ' getting-started-in-webgl-coords-and-transform-p7x2' - line 424: ' and ' - line 425: ' getting-started-in-webgl-coords-and-transform-p7x3' - line 426: ' that we can use to position and orient objects' - line 433: ' moves the origin in a' - line 442: ' reorients whatever is' - line 449: ' methods like ' - line 450: ' getting-started-in-webgl-coords-and-transform-p10x2' - line 451: ' and ' - line 452: ' getting-started-in-webgl-coords-and-transform-p10x3' - line 453: ' , which each allow for rotation around a specific axis.' - line 464: ' getting-started-in-webgl-coords-and-transform-info2x2' - line 465: ' , which allows' - line 466: ' you to specify which axis you''d like to rotate around using a vector as the second argument.' - line 471: ' changes the size of whatever is' - line 481: ' p5.js also has some methods that can control when transformations are applied' - line 482: ' getting-started-in-webgl-coords-and-transform-p16x2' - line 483: ' and' - line 485: ' . push() and push() method saves the current transformations and ' - line 493: ' style settings. Then, after performing new transformations, the pop() method is used to restore us to the the original transformations. The result is that ' - line 494: ' whatever transformations or styling changes that are made between push()' - line 495: ' and pop() are isolated to that portion of the code. If you don’t ' - line 496: ' use push() and' - line 511: ' These primitive shape methods are' - line 512: ' getting-started-in-webgl-coords-and-transform-p20x2' - line 513: ' and' - line 519: ' More information about custom geometry can be found in the ' - line 520: ' getting-started-in-webgl-coords-and-transform-p21x2' - line 521: ' Custom Geometry tutorial ' - line 539: ' getting-started-in-webgl-custom-geometry-info1x2' - line 540: ' tutorial.' - line 551: ' the ' - line 552: ' getting-started-in-webgl-custom-geometry-p2x2' - line 553: ' method, which should be used within preload(). Then you can use the ' - line 554: ' getting-started-in-webgl-custom-geometry-p2x3' - line 555: ' function to draw the model, as demonstrated in the example below.' - line 559: ' might be a much different size when drawn in p5.js, or even be too small to be drawn at all. The' - line 565: ' can add color using materials or textures, which you can learn about in the ' - line 566: ' getting-started-in-webgl-custom-geometry-info2x2' - line 567: ' Styling and Appearance ' - line 568: ' getting-started-in-webgl-custom-geometry-info2x3' - line 569: ' tutorial.' - line 580: ' getting-started-in-webgl-custom-geometry-p5x2' - line 581: ' and ' - line 582: ' getting-started-in-webgl-custom-geometry-p5x3' - line 583: ' This following example shows how' - line 587: ' There is also a powerful class, ' - line 639: ' ideas. p5.js has a special camera method, ' - line 640: ' getting-started-in-webgl-appearance-p5x2' - line 641: ' , that can be used to zoom, pan,' - line 650: ' tutorial, so make sure to check out the ' - line 651: ' getting-started-in-webgl-appearance-info1x2' - line 652: ' Introduction to Shaders' - line 653: ' getting-started-in-webgl-appearance-info1x3' - line 666: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 670: ' A camera projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 692: ' vertex(), p5.js passes the vertex information to the shader automatically.' - line 702: ' This value can either be lowp, mediump, or highp, although you will likely' - line 703: ' use mediump, or highp in certain situations.' - line 720: ' A variable that is passed from your sketch to a shader.' - line 729: ' An image that is passed into a shader program.' - line 386: ' getting-started-in-webgl-other-tutorials-you-are-here' - line 446: ' values. Use the sliders in the sketch above to change the translation of the box and see how it moves along' - line 447: ' each axis. The code below demonstrates simple translation on a box() shape.' - line 462: ' example above to see how rotation is performed on each axis. The code below shows each of these methods' - line 472: ' p5.js also has some methods that can control when transformations are applied' - line 475: ' class="code">pop() make it easier to move objects' - line 522: ' way that is similar to 2D drawing in p5.js. For example, methods like quad(), triangle(), rect(), and circle() each have extra parameters that make it possible to use them in 3D.' - line 531: ' In the following example, p5.Geometry is used to plot a grid of points for the geometry. Then, computeFaces() is used to give the geometry' - line 573: ' position of the active camera and the position that the camera is looking at. Try it out in the sketch below.' - line 626: ' getting-started-in-webgl-appearance-heading4' - line 628: ' Being able to have control over the camera, lighting, and materials will give you much more flexibility' - line 629: ' to decide how your sketch looks, and it will open up the possibilities for you to introduce your own' - line 631: ' to shaders, which will make it possible to change the appearance of your sketch in even more interesting ways.' - line 655: ' first, requiring a different approach than the 2D drawing of p5.js. This document will outline the basics ' - line 656: ' of shader programming and point you towards other resources.' - line 739: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 759: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 406: '' - line 376: ' getting-started-in-webgl-other-tutorials-p' - line 377: ' This tutorial is part of a series about the basics of using WebGL in p5.js. Check out each of these other tutorials below.' - line 384: '' - line 391: ' To get started in 3D there are some new concepts to learn and this document will introduce some ideas' - line 400: '' - line 401: ' getting-started-in-webgl-coords-and-transform-heading1' - line 404: ' it allows us to do all kinds of math that help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 407: ' getting-started-in-webgl-coords-and-transform-p3x1' - line 408: ' Working in 3D introduces a lot of complexity, especially when a sketch involves motion, texture, lighting, and' - line 385: '' - line 393: ' getting-started-in-webgl-coords-and-transform-toc-title' - line 395: ' getting-started-in-webgl-coords-and-transform-toc2' - line 396: ' getting-started-in-webgl-coords-and-transform-toc3' - line 397: ' getting-started-in-webgl-coords-and-transform-toc4' - line 370: '' - line 371: '' - line 373: '' - line 375: ' getting-started-in-webgl-other-tutorials-title' - line 378: ' getting-started-in-webgl-other-tutorials-tut1' - line 379: ' getting-started-in-webgl-other-tutorials-tut2' - line 369: '' - line 883: ' With these skills you will be able to create some basic shaders, but shader programming can go incredibly deep,' - line 871: ' Now with the texture coordinate attribute assigned to the varying variable, we can use the texture coordinate' - line 872: ' in our fragment shader. The result in the example below is a blue and magenta visualization of our texture coordinates.' - line 873: '' - line 874: ' getting-started-in-webgl-shaders-info1x1' - line 875: ' p5.js handles a lot of attributes and uniforms for us, and createCanvas().' - line 415: '' - line 416: ' getting-started-in-webgl-coords-and-transform-heading2' - line 417: ' 3D Coordinate Space' - line 418: '' - line 419: ' getting-started-in-webgl-coords-and-transform-info1x1' - line 420: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled' - line 421: ' Coordinate System and Shapes.' - line 427: ' getting-started-in-webgl-coords-and-transform-p6x1' - line 428: ' When drawing in 2D, the point (0,0) is located at the top left corner of the screen. In WebGL mode, the' - line 429: ' origin of the sketch (0,0,0) is located in the middle of the screen. By default, the x-axis goes left-to-right,' - line 430: ' y-axis goes up-to-down, and the z-axis goes from further-to-closer.' - line 431: '' - line 1669: ' teach-case3-content5' - line 1670: ' teach-case4-title' - line 1671: ' teach-case4-lead-name' - line 1672: ' teach-case4-content1' - line 1673: ' teach-case4-content1-1' - line 1674: ' teach-case4-content2' - line 1675: ' teach-case4-content3' - line 1676: ' teach-case4-content4' - line 1677: ' teach-case4-content5' - line 1678: ' teach-case5-title' - line 1679: ' teach-case5-lead-name' - line 1680: ' teach-case5-image-alt' - line 1681: ' teach-case5-content1' - line 1682: ' teach-case5-content1-1' - line 1683: ' teach-case5-content2' - line 1684: ' teach-case5-content3' - line 1685: ' teach-case5-content4' - line 1686: ' teach-case5-content5' - line 1687: ' teach-case6-title' - line 1688: ' teach-case6-lead-name' - line 1689: ' teach-case6-image-alt' - line 1690: ' teach-case6-content1' - line 1691: ' teach-case6-content1-1' - line 1692: ' teach-case6-content2' - line 1693: ' teach-case6-content3' - line 1694: ' teach-case6-content4' - line 1695: ' teach-case6-content5' - line 1696: ' teach-case7-title' - line 1697: ' teach-case7-lead-name' - line 1698: ' teach-case7-image-alt' - line 1699: ' teach-case7-content1' - line 1700: ' teach-case7-content1-1' - line 1701: ' teach-case7-content2' - line 1702: ' teach-case7-content3' - line 1703: ' teach-case7-content4' - line 1704: ' teach-case7-content5' - line 1705: ' teach-case8-title' - line 1706: ' teach-case8-lead-name' - line 1707: ' teach-case8-content1' - line 1708: ' teach-case8-content1-1' - line 1709: ' teach-case8-content2' - line 1710: ' teach-case8-content3' - line 1711: ' teach-case8-content4' - line 1778: ' teach-case14-lead-name' - line 1779: ' teach-case14-image-alt' - line 1780: ' teach-case14-content1' - line 1781: ' teach-case14-content1-1' - line 1782: ' teach-case14-content2' - line 1787: ' teach-case14-content3' - line 1788: ' teach-case14-content4' - line 1838: ' teach-case15-content5-1' - line 1839: ' teach-case15-content5-2' - line 1840: ' teach-case15-content5-3' - line 1841: ' teach-case16-title' - line 1842: ' teach-case16-lead-name' - line 1843: ' teach-case16-image-alt' - line 1844: ' teach-case16-speech' - line 1845: ' teach-case16-content1' - line 1846: ' teach-case16-content1-1' - line 1847: ' teach-case16-content2' - line 1852: ' teach-case16-content3' - line 1853: ' teach-case16-content4' - line 1864: ' teach-case16-content5' - line 1865: ' teach-case16-content5-1' - line 1866: ' teach-case16-content5-2' - line 1867: ' teach-case16-content5-3' - line 1868: ' teach-case16-content5-4' - line 1869: ' teach-case17-title' - line 1870: ' teach-case17-lead-name' - line 1871: ' teach-case17-speech' - line 1881: ' teach-case17-content1' - line 1882: ' teach-case17-content1-1' - line 1883: ' teach-case17-content1-2' - line 1884: ' teach-case17-content1-3' - line 1885: ' teach-case17-content2' - line 1886: ' teach-case17-content3' - line 1887: ' teach-case17-content4' - line 1891: ' teach-case17-content5' - line 1901: ' teach-case17-content5-1' - line 1902: ' teach-case17-content5-2' - line 1903: ' teach-case17-content5-3' - line 1904: ' teach-case18-title' - line 1905: ' teach-case18-lead-name' - line 1906: ' teach-case18-image-alt' - line 1907: ' teach-case18-speech' - line 1924: ' teach-case18-content1' - line 1925: ' teach-case18-content1-1' - line 1926: ' teach-case18-content2' - line 1927: ' teach-case18-content3' - line 1928: ' teach-case18-content4' - line 1929: ' teach-case18-content5' - line 1930: ' teach-case18-content5-1' - line 1931: ' teach-case18-content5-2' - line 1932: ' teach-case18-content5-3' - line 1933: ' teach-case18-content5-4' - line 1934: ' teach-case18-content5-5' - line 1935: ' teach-case19-title' - line 1936: ' teach-case19-lead-name' - line 1937: ' teach-case19-speech' - line 1964: ' teach-case19-content1' - line 1965: ' teach-case19-content1-1' - line 1966: ' teach-case19-content2' - line 1967: ' teach-case19-content3' - line 1968: ' teach-case19-content4' - line 1969: ' teach-case19-content5' - line 1970: ' teach-case19-content5-1' - line 1971: ' teach-case20-title' - line 1972: ' teach-case20-lead-name' - line 1973: ' teach-case20-image-alt' - line 1974: ' teach-case20-content1' - line 1975: ' teach-case20-content1-1' - line 1976: ' teach-case20-content2' - line 1977: ' teach-case20-content3' - line 1978: ' teach-case20-content4' - line 1979: ' teach-case20-content5' - line 1980: ' teach-case20-content5-1' - line 1981: ' teach-case20-content5-2' - line 1982: ' teach-case21-title' - line 1983: ' teach-case21-lead-name' - line 1984: ' teach-case21-image-alt' - line 1985: ' teach-case21-content1' - line 1986: ' teach-case21-content1-1' - line 1987: ' teach-case21-content2' - line 1992: ' teach-case21-content3' - line 1993: ' teach-case21-content4' - line 1998: ' teach-case21-content5' -hi: - src/data/en.yml: - line 980: ' contributors-conference1' - line 883: ' p5.utils' - line 1153: ' 2022-p5js-access-day-date' - line 26: footer6 - line 25: footer2 - line 27: footer4 - line 28: footer5 - line 29: footer6 - line 30: footer7 - line 31: footer8 - line 32: footer9 - line 85: ' under the terms of the ' - line 84: ' copyright1' - line 1150: ' p5js-community-event-title' - line 1151: ' 2022-p5js-access-day-title' - line 1152: ' 2022-p5js-access-day-date' - line 1154: ' 2022-p5js-access-day-coordinator' - line 1155: ' 2022-p5js-access-day-description' - line 1156: ' The p5.js Access Day is a virtual conference to talk about access in ' - line 1157: ' open-source software for the arts (OSSTA) and greater issues beyond the software. ' - line 1158: ' The day-long online event features four themed-sessions — Critical Web ' - line 1159: ' Accessibility, Disability Arts, Access & Community Building, and Access ' - line 1160: ' via Translation. It provides space for contributors of p5.js and experienced ' - line 1161: ' practitioners from outside OSSTA projects to share their knowledge, perspectives, ' - line 1162: ' and dreams for building greater access to technical and arts spaces. ' - line 1163: ' 2022-p5js-access-day-recap-video' - line 1164: ' 2022-p5js-access-day-recap-video-asl' - line 1165: ' 2022-p5js-access-day-moderator' - line 1166: ' 2022-p5js-access-day-speakers' - line 1167: ' 2022-p5js-access-day-session-0' - line 1168: ' 2022-p5js-access-day-session-1' - line 1169: ' 2022-p5js-access-day-session-2' - line 1170: ' 2022-p5js-access-day-session-3' - line 1171: ' 2022-p5js-access-day-session-4' - line 1172: ' 2022-p5js-access-day-session-5' - line 1173: ' 2022-p5js-access-day-production' - line 1174: ' 2022-p5js-access-day-advisor' - line 1175: ' 2022-p5js-access-day-asl' - line 1176: ' 2022-p5js-access-day-designer' - line 1177: ' 2022-p5js-access-day-tech-support' - line 1178: ' 2022-p5js-access-day-transcriber' - line 1179: ' 2022-p5js-access-day-asl-support' - line 387: ' getting-started-in-webgl-custom-geometry-p2x1' - line 388: ' Custom geometry can be imported into p5.js using either OBJ or STL files. These files are usually generated in' - line 366: '' - line 367: '' - line 432: '' - line 434: '' - line 435: ' getting-started-in-webgl-coords-and-transform-heading3' - line 436: ' Transformations' - line 437: ' getting-started-in-webgl-coords-and-transform-p7x1' - line 438: ' p5.js has a few methods, translate(), rotate(), and scale(), that we can use to position and orient objects' - line 441: ' within space. Each of these methods affect what is known as the model matrix. Collectively these are' - line 443: '' - line 444: ' getting-started-in-webgl-coords-and-transform-subheading1' - line 445: ' translate()' - line 448: ' translate() moves the origin in a' - line 454: ' getting-started-in-webgl-coords-and-transform-subheading2' - line 455: ' rotate()' - line 456: '' - line 457: ' getting-started-in-webgl-coords-and-transform-p9x1' - line 458: ' rotate() reorients whatever is' - line 459: ' drawn after it.' - line 460: '' - line 461: ' getting-started-in-webgl-coords-and-transform-p10x1' - line 467: ' example above to see how rotation is performed on each axis.' - line 468: ' getting-started-in-webgl-coords-and-transform-p11x1' - line 469: ' By default p5.js will expect angles to be in radians. Radians use numbers from 0 - TWO_PI to specify an' - line 470: ' angle. To use degrees, either convert degrees to radians using radians(), or use' - line 473: '

    You can also use rotate(), which allows' - line 474: ' you to specify which axis you''d like to rotate around using a vector as the second argument.

    ' - line 476: ' scale()' - line 477: ' getting-started-in-webgl-coords-and-transform-p12x1' - line 478: ' scale() changes the size of whatever is' - line 479: ' drawn after it. Like the other methods described so far, it accepts arguments for x, y, and z values.' - line 480: ' getting-started-in-webgl-coords-and-transform-heading4' - line 486: ' getting-started-in-webgl-coords-and-transform-p14x1' - line 487: ' Transformations can be performed in any order, but using translate, rotate, and then scale will be the most intuitive.' - line 488: ' Translation, followed by rotation, produces the effect of moving the shape and then rotating around that new location.' - line 489: ' getting-started-in-webgl-coords-and-transform-p15x1' - line 490: ' In the below example, try changing the order of translate() and rotateY() and see how it affects where the object is' - line 497: ' individually. The push() method saves and sets aside the' - line 498: ' current transformations. The pop() method restores those transformations. Whatever transformations that' - line 499: ' are made between push() and pop() will be isolated to that portion of the code. If you don’t use push() and' - line 502: ' pop(), you have to keep track of whatever transformations have already taken place, which' - line 503: ' can get complicated' - line 504: ' and difficult to follow. Consider this following example, which places two boxes in our sketch. To position the second box' - line 505: ' without push() and pop(), you have to account for the first transformation. This ' - line 506: ' can be a lot to keep track of in a more complex 3D scene. ' - line 507: ' getting-started-in-webgl-coords-and-transform-p17x1' - line 508: ' Now, let''s try the same code with push() and pop(). Now we can just' - line 509: ' translate the object where we want it, without' - line 510: ' having to remember where our coordinate system lies.' - line 514: ' transformation matrix is combined with the view matrix and the projection matrix, both of which help simulate' - line 515: ' the view of a camera, and this combination results in our 3D scene!

    ' - line 516: ' box() but p5.js has seven different predefined geometries' - line 527: ' that you can use in your sketch. These basic predefined geometries are often referred to as ''primitives''.' - line 528: ' getting-started-in-webgl-coords-and-transform-p20x1' - line 529: ' These primitive shape methods are' - line 530: ' plane(),' - line 532: ' ellipsoid(),' - line 533: ' cone(),' - line 534: ' cylinder(), and' - line 535: ' torus()' - line 536: ' getting-started-in-webgl-coords-and-transform-p21x1' - line 537: ' It is also possible to create custom geometry, either from scratch or from 3D models created in another' - line 538: ' program.' - line 541: ' getting-started-in-webgl-coords-and-transform-heading6' - line 542: ' Conclusion' - line 543: ' getting-started-in-webgl-coords-and-transform-p22x1' - line 544: ' By having basic control over a 3D coordinate space, transformations, ' - line 545: ' and basic shapes, you should be able to begin creating basic scenes' - line 546: ' in 3D. The tutorials that follow this in the Getting Started in WebGL series' - line 547: ' will introduce custom geometries, allow you to tweak the appearance of ' - line 548: ' the scene, and introduce you to some basic shader programming to push' - line 549: ' your sketches further.' - line 550: ' getting-started-in-webgl-coords-and-transform-glossary-title' - line 556: ' getting-started-in-webgl-coords-and-transform-glossary-term2-definition' - line 557: ' getting-started-in-webgl-coords-and-transform-glossary-term3-title' - line 558: ' getting-started-in-webgl-coords-and-transform-glossary-term3-definition' - line 560: ' getting-started-in-webgl-coords-and-transform-glossary-term4-definition' - line 561: ' getting-started-in-webgl-coords-and-transform-glossary-term5-title' - line 562: ' getting-started-in-webgl-coords-and-transform-glossary-term5-definition' - line 563: ' getting-started-in-webgl-coords-and-transform-glossary-term6-title' - line 564: ' getting-started-in-webgl-coords-and-transform-glossary-term6-definition' - line 570: '' - line 571: '' - line 572: '' - line 574: '' - line 575: '' - line 576: '' - line 577: '' - line 578: '' - line 579: '' - line 584: '' - line 585: '' - line 586: '' - line 595: ' to create geometry from scratch.' - line 604: ' way that is similar to 2D drawing in p5.js. For example, methods like quad() and triangle() each have extra parameters that make it possible to use them in 3D.' - line 607: ' There are other methods that offer greater control of the geometry. A shape can be defined point-by-point using' - line 615: '' - line 623: '' - line 624: ' getting-started-in-webgl-appearance-p0x1' - line 625: ' Creating in 3D is about more than just geometry. Cameras, lights, and materials are an' - line 632: ' getting-started-in-webgl-appearance-toc3' - line 633: ' getting-started-in-webgl-appearance-toc4' - line 634: ' getting-started-in-webgl-appearance-toc5' - line 635: '' - line 636: ' getting-started-in-webgl-appearance-heading1' - line 637: '' - line 638: ' getting-started-in-webgl-appearance-p1x1' - line 642: ' class="code" href="{{root}}/reference/#/p5/ortho">ortho().' - line 643: ' getting-started-in-webgl-appearance-p2x1' - line 644: ' A perspective camera skews objects so they appear to get smaller as they get further away, vanishing' - line 645: ' at a single point in the distance. This is in contrast to an orthographic camera, where the ' - line 646: ' geometry stays the same size as it gets further away and has no vanishing point. ' - line 647: ' getting-started-in-webgl-appearance-p3x1' - line 648: ' One setting that we can change with a perspective camera is the field-of-view, or FOV. This is the ' - line 649: ' term that is used to describe how much our camera can see, measured as an angle. In simple examples it might appear' - line 654: ' The near plane defines the minimum distance that geometry must be from the camera to be rendered. The far plane defines the maximum' - line 657: ' getting-started-in-webgl-appearance-p5x1' - line 658: ' Cameras can be moved by passing arguments to camera(), but constantly moving and adjusting the camera in code can be tedious, especially when you are experimenting with' - line 659: ' ideas. p5.js has a special camera method, orbitControl(), that can be used to zoom, pan,' - line 661: ' and position the camera using the mouse.' - line 662: ' getting-started-in-webgl-appearance-p6x1' - line 663: ' A scene can have multiple cameras, but only one camera can be active at a time. Sketches in p5.js will default' - line 664: ' to having a single perspective camera, but that can be changed by calling either perspective()' - line 667: ' position of the active camera and the position that the camera is looking at.' - line 668: '' - line 669: ' getting-started-in-webgl-appearance-heading2' - line 671: ' getting-started-in-webgl-appearance-p7x1' - line 672: ' Lighting is another essential part of a 3D scene. To be able to convey shape and depth in 3D is necessary to' - line 673: ' have a light source. p5.js has a few different types of light that can be used in a sketch.' - line 674: '' - line 675: ' getting-started-in-webgl-appearance-lighting-list1' - line 676: ' Ambient light makes everything display a little brighter, with no consideration for light position or' - line 677: ' direction.' - line 678: ' getting-started-in-webgl-appearance-lighting-list2' - line 679: ' A directional light shines from one direction, which can be especially useful for communicating depth in' - line 680: ' a scene, or when a scene needs a ''sun'' light. This method accepts a color and direction.' - line 681: ' getting-started-in-webgl-appearance-lighting-list3' - line 682: ' A point light emits from a single point in all directions, similar to something like a lightbulb. This' - line 683: ' method accepts a color and a position for the light.' - line 684: ' getting-started-in-webgl-appearance-lighting-list4' - line 685: ' A spot light emits from a single point in a single direction. This light is cast in a conical shape and' - line 686: ' it''s radius and concentration can be adjusted.' - line 687: ' getting-started-in-webgl-appearance-lighting-list5' - line 688: ' noLights() makes it so that all subsequent geometry is rendered without any lighting. This can be useful' - line 689: ' when you want flat, unshaded geometry.' - line 690: '' - line 693: ' simultaneously, allowing you to compose a scene with varied and complex lighting sources. ' - line 694: ' Try checking and unchecking the boxes in the following interactive example to see how lighting can' - line 695: ' be blended together. For each active light source there are visual indicators of their position or' - line 696: ' direction, just know that these are here for illustrative purposes!' - line 697: ' getting-started-in-webgl-appearance-p9x1' - line 698: ' In this next example, try commenting and uncommenting each light and experiment with their parameters.' - line 699: '' - line 700: ' getting-started-in-webgl-appearance-heading3' - line 701: '' - line 704: ' light interacts with the geometry and how color (or texture) gets applied to the object. Materials can be' - line 705: ' varied,' - line 706: ' making objects shiny, rough, or even textured with images.' - line 707: '' - line 708: ' getting-started-in-webgl-appearance-p11x1' - line 709: ' In this interactive example, try toggling each of the different materials to see how they' - line 710: ' affect the appearance of the geometry. You can move your mouse and see the effect that a point light has on the material.' - line 711: '' - line 712: ' getting-started-in-webgl-appearance-p12x1' - line 713: ' Try commenting and uncommenting the different lights in this example' - line 714: '' - line 715: ' getting-started-in-webgl-appearance-p13x1' - line 716: ' More custom materials can be achieved through using texture(). In short, these are images' - line 717: ' that can be mapped onto the surface of a geometry. These textures can be imported from an image and can even be' - line 718: ' generated within code using shaders. To map a texture to your geometry, use loadImage() ' - line 719: ' within preload(), then call texture() before drawing your shape.' - line 721: ' getting-started-in-webgl-appearance-info1x1' - line 722: ' While they are useful for changing the appearance of your geometry, shaders are a bit beyond the scope of this ' - line 723: ' tutorial, so make sure to check out the Introduction to Shaders ' - line 724: ' page when you are ready. ' - line 725: '' - line 726: ' getting-started-in-webgl-appearance-glossary-title' - line 727: ' getting-started-in-webgl-appearance-glossary-term1-title' - line 728: ' getting-started-in-webgl-appearance-glossary-term1-definition' - line 730: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 731: ' getting-started-in-webgl-appearance-glossary-term3-title' - line 732: ' getting-started-in-webgl-appearance-glossary-term3-definition' - line 733: ' A projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 734: ' two-dimensional.' - line 735: ' getting-started-in-webgl-appearance-glossary-term4-title' - line 736: ' getting-started-in-webgl-appearance-glossary-term4-definition' - line 737: ' getting-started-in-webgl-appearance-glossary-term5-title' - line 738: ' getting-started-in-webgl-appearance-glossary-term5-definition' - line 740: ' getting-started-in-webgl-appearance-glossary-term6-definition' - line 741: ' The near plane represents the minimum distance a geometry must be from the camera to be displayed, while' - line 742: ' the far plane represents the maximum distance.' - line 743: ' getting-started-in-webgl-appearance-glossary-term7-title' - line 744: ' getting-started-in-webgl-appearance-glossary-term7-definition' - line 745: '' - line 746: '' - line 747: '' - line 748: '' - line 749: '' - line 753: ' getting-started-in-webgl-shaders-p0x1' - line 754: ' Shaders are special programs that run on the graphics processing unit, or GPU, that can do some incredible' - line 755: ' things. They take advantage of the' - line 756: ' GPU to process many pixels at once, making them fast and particularly well suited for certain tasks, like' - line 757: ' generating noise, applying filters like blur, or shading polygons. Shader programming can feel daunting at' - line 758: ' first, they require a different approach than the 2D drawing of p5.js and it can often involve more advanced' - line 760: '' - line 761: ' getting-started-in-webgl-shaders-toc-title' - line 762: ' getting-started-in-webgl-shaders-toc1' - line 763: ' getting-started-in-webgl-shaders-toc2' - line 764: ' getting-started-in-webgl-shaders-toc3' - line 765: ' getting-started-in-webgl-shaders-toc4' - line 766: ' getting-started-in-webgl-shaders-toc5' - line 767: ' getting-started-in-webgl-shaders-heading1' - line 768: '' - line 769: ' getting-started-in-webgl-shaders-p1x1' - line 770: ' p5.js is a great tool for working with shaders because it handles a lot of the WebGL setup so you can focus on' - line 771: ' the shader code itself. Before we can get started with shaders we have to set up our canvas so that it uses' - line 772: ' p5.js WebGL model.' - line 773: '' - line 774: ' getting-started-in-webgl-shaders-p2x1' - line 775: ' A shader program consists of two parts, a vertex shader and a fragment' - line 776: ' shader. The vertex shader affects where the 3D geometry is drawn on the screen and the fragment' - line 777: ' shader is responsible for affecting the color output. Each of these live in separate files and are loaded into' - line 778: ' p5.js using loadShader(). Once a shader is loaded it can be used within draw(). The following example will show' - line 780: ' how to set up a basic shader within p5.js' - line 781: '' - line 782: ' getting-started-in-webgl-shaders-heading2' - line 783: '' - line 784: ' getting-started-in-webgl-shaders-p3x1' - line 785: ' So now you might be wondering what we actually write in these shader files! Shader files are written in' - line 786: ' Graphics Library Shading Language, or GLSL, and have a very different syntax and structure than we are familiar' - line 787: ' with. GLSL has a' - line 788: ' syntax that resembles C, which means it comes with a handful of concepts that aren''t present in JavaScript.' - line 789: '' - line 790: ' getting-started-in-webgl-shaders-p4x1' - line 791: ' For one, the shading language is much more strict about types. Each variable you create has to be labeled with' - line 792: ' the kind of data it is storing. Here is a list of some of the common types' - line 793: '' - line 794: ' getting-started-in-webgl-shaders-typelist' - line 795: ' vec2(x,y) // a vector of two floats' - line 796: ' vec3(r,g,b) // a vector of three floats' - line 797: ' vec4(r,g,b,a) // a vector of four floats' - line 798: ' float // a number with decimal points' - line 799: ' int // a whole number without decimal points' - line 800: ' sampler2D // a reference to a texture' - line 801: '' - line 802: ' getting-started-in-webgl-shaders-p5x1' - line 803: ' In general the shading language is much more strict than JavaScript. A missing semicolon for example is not' - line 804: ' allowed and will result in an error message. You can''t use different types of numbers, like floats or integers' - line 805: ' interchangeably.' - line 806: '' - line 807: ' getting-started-in-webgl-shaders-p6x1' - line 808: ' First let''s look at a basic vertex shader' - line 809: '' - line 810: ' getting-started-in-webgl-shaders-p7x1' - line 811: ' This vertex shader begins with an attribute, which p5.js uses to share vertex position information' - line 812: ' with the shader. This' - line 813: ' attribute is a vec3, meaning it contains a value for x, y, and z. Attributes are special' - line 814: ' variable types that are' - line 815: ' only used in the vertex shader and are typically provided by p5.js.' - line 816: '' - line 817: ' getting-started-in-webgl-shaders-p8x1' - line 818: ' All vertex shaders require a function, main(), within which we position our vertices. In' - line 819: ' this example, the' - line 820: ' vertex shader repositions our vertices so that the shader output takes up the full sketch. At the end of main(),' - line 822: ' we have to assign a value to gl_Position.' - line 823: '' - line 824: ' getting-started-in-webgl-shaders-p9x1' - line 825: ' Don''t worry if this doesn''t make a ton of sense yet. The vertex shader plays an important role but it is often' - line 826: ' just responsible for making sure what we create in our fragment shader displays properly on the geometry. You''ll' - line 827: ' probably find yourself reusing the same vertex shaders in many of your projects.' - line 828: ' The fragment shader on the other hand is responsible for the color output of our shader and is where we will do' - line 829: ' a lot of our shader programming. Here is a very simple fragment shader that will just display the color red' - line 830: '' - line 831: ' getting-started-in-webgl-shaders-p10x1' - line 832: ' The fragment shader begins with a line specifying the float ''precision''.' - line 833: ' this value you can either be lowp, mediump, or highp, although you will likely' - line 834: ' use mediump, or highp in certain situations.' - line 835: '' - line 836: ' getting-started-in-webgl-shaders-p11x1' - line 837: ' And similar to the vertex shader, our fragment shader also requires a main() function, but instead of' - line 838: ' setting gl_Position, we will assign a color to gl_FragColor.' - line 839: '' - line 840: ' getting-started-in-webgl-shaders-p12x1' - line 841: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 842: ' those four values are red, green, blue, and alpha. Shaders don''t use 0 - 255 for colors like our sketches do, instead they use' - line 843: ' values between 0.0 and 1.0.' - line 844: '' - line 845: ' getting-started-in-webgl-shaders-p13x1' - line 846: ' Now that we have a vertex shader and a fragment shader, these can be saved to separate files (shader.vert and' - line 847: ' shader.frag respectively), and loaded into our sketch using loadShader().' - line 848: '' - line 849: ' getting-started-in-webgl-shaders-heading3' - line 850: ' Uniforms' - line 851: '' - line 852: ' getting-started-in-webgl-shaders-p14x1' - line 853: ' A simple shader like this can be useful by itself, but there are times when it''s necessary to communicate' - line 854: ' variables from the p5.js sketch to a shader. This is when uniforms come in. Uniforms are special variables that' - line 855: ' can be sent from a sketch to a shader. These make it possible to have much more control over a shader. For example,' - line 856: ' you could use the p5.js method millis() to pass a ''time'' uniform to our sketch to introduce motion.' - line 857: ' In the shader, uniforms are defined at the top of the file, outside of main(). In' - line 858: ' this following fragment shader' - line 859: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 860: '' - line 861: ' getting-started-in-webgl-shaders-p15x1' - line 862: ' Back in our p5.js sketch, this color can now be sent using setUniform()' - line 863: '' - line 864: ' getting-started-in-webgl-shaders-p16x1' - line 865: ' There are also attributes, which are usually used to share certain data about the geometry between the' - line 866: ' sketch and the vertex shader, and varying variables, which share data between the vertex shader and the' - line 867: ' fragment shader.' - line 868: ' This makes it possible to use position or other geometry data within our fragment shaders.' - line 869: '' - line 870: ' getting-started-in-webgl-shaders-p17x1' - line 886: '' - line 887: ' getting-started-in-webgl-shaders-p19x1' - line 888: ' Want to keep learning more about shaders? Check out some of these websites!' - line 889: '' - line 890: ' getting-started-in-webgl-shaders-resources' - line 891: '
  • ' - line 897: '
  • ' - line 901: '' - line 902: ' getting-started-in-webgl-shaders-glossary-title' - line 903: '' - line 904: ' getting-started-in-webgl-shaders-glossary-term1-title' - line 905: ' getting-started-in-webgl-shaders-glossary-term1-definition' - line 906: ' A special graphics card program that can efficiently produce many visual effects and filters.' - line 907: '' - line 908: ' getting-started-in-webgl-shaders-glossary-term2-title' - line 909: ' getting-started-in-webgl-shaders-glossary-term2-definition' - line 910: ' Graphics Library Shader Language (GLSL) is a programming language that is used to write shaders.' - line 911: '' - line 912: ' getting-started-in-webgl-shaders-glossary-term3-title' - line 913: ' getting-started-in-webgl-shaders-glossary-term3-definition' - line 914: ' A variable that is passed from your sketch to a shader' - line 915: '' - line 916: ' getting-started-in-webgl-shaders-glossary-term4-title' - line 917: ' getting-started-in-webgl-shaders-glossary-term4-definition' - line 918: ' A data type that stores a group of numbers, most commonly two, three, or four, to represent colors, positions,' - line 919: ' and more.' - line 920: '' - line 921: ' getting-started-in-webgl-shaders-glossary-term5-title' - line 922: ' getting-started-in-webgl-shaders-glossary-term5-definition' - line 923: ' A data type that stores floating point numbers, which can have a decimal point.' - line 924: '' - line 925: ' getting-started-in-webgl-shaders-glossary-term6-title' - line 926: ' getting-started-in-webgl-shaders-glossary-term6-definition' - line 927: ' A data type that stores integers, which are whole numbers without a decimal.' - line 928: '' - line 929: ' getting-started-in-webgl-shaders-glossary-term7-title' - line 930: ' getting-started-in-webgl-shaders-glossary-term7-definition' - line 931: ' A data type that represents a texture being passed into the shader.' - line 932: '' - line 933: ' getting-started-in-webgl-shaders-glossary-term8-title' - line 934: ' getting-started-in-webgl-shaders-glossary-term8-definition' - line 935: ' A GLSL variable that is generated in the p5.js sketch and made available in the vertex shader. For most' - line 936: ' situations these are provided by p5.js.' - line 937: '' - line 938: ' getting-started-in-webgl-shaders-glossary-term9-title' - line 939: ' getting-started-in-webgl-shaders-glossary-term9-definition' - line 940: ' An image that passed into a shader program.' - line 941: '' - line 942: ' getting-started-in-webgl-shaders-glossary-term10-title' - line 943: ' getting-started-in-webgl-shaders-glossary-term10-definition' - line 944: ' A label describing the characterics of a piece of data, such as an int, a float, a vector, etc.' - line 945: '' - line 946: ' getting-started-in-webgl-shaders-glossary-term11-title' - line 947: ' getting-started-in-webgl-shaders-glossary-term11-definition' - line 948: ' The part of a shader program that is responsible for positioning geometry in 3D space.' - line 949: '' - line 950: ' getting-started-in-webgl-shaders-glossary-term12-title' - line 951: ' getting-started-in-webgl-shaders-glossary-term12-definition' - line 952: ' The part of a shader program that is responsible for the color and appearance of each pixel output by the' - line 953: ' shader.' - line 954: '' - line 955: ' ' - line 956: '' - line 600: ' Objects can appear differently based on their material. Materials dictate how' - line 605: ' varied, making objects shiny, rough, or even textured with images.' - line 610: ' In this interactive example, try selecting each of the different materials to see how they' - line 611: ' affect the appearance of the geometry. You can move your mouse and see the effect that a directional light has on the material. ' - line 588: ' getting-started-in-webgl-custom-geometry-p6x1_' - line 589: ' , which p5.js uses internally for loadModel() but can also be used to' - line 616: ' change this using ' - line 617: ' getting-started-in-webgl-appearance-p1x2' - line 618: ' or ' -ko: - src/data/en.yml: - line 463: ' You can also use ' - line 484: ' getting-started-in-webgl-coords-and-transform-p16x3' - line 627: ' to have a zoom-like effect, but it also affects the way that shapes change size in the distance.' - line 630: ' Another important term when working with cameras in 3D is the camera frustum. The frustum of the camera is the' - line 691: ' only used in the vertex shader and are typically provided by p5.js. When you use p5.js methods like rect() or ' - line 381: ' This tutorial will introduce new concepts for creating 3D sketches with p5.js.' - line 390: ' getting-started-in-webgl-coords-and-transform-heading1' - line 409: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled ' - line 410: ' getting-started-in-webgl-coords-and-transform-info1x2' - line 411: ' Coordinate System and Shapes' - line 394: ' it allows us to do all kinds of math to help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 374: ' getting-started-in-webgl-glossary-title' - line 403: ' Let''s get started by setting up the p5.js to use WebGL, by passing WEBGL as a third parameter into createCanvas().' - line 424: ' and ' - line 442: ' reorients whatever is' - line 449: ' methods like ' - line 450: ' getting-started-in-webgl-coords-and-transform-p10x2' - line 451: ' and ' - line 452: ' getting-started-in-webgl-coords-and-transform-p10x3' - line 453: ' , which each allow for rotation around a specific axis.' - line 464: ' getting-started-in-webgl-coords-and-transform-info2x2' - line 465: ' , which allows' - line 466: ' you to specify which axis you''d like to rotate around using a vector as the second argument.' - line 471: ' changes the size of whatever is' - line 481: ' p5.js also has some methods that can control when transformations are applied' - line 482: ' getting-started-in-webgl-coords-and-transform-p16x2' - line 483: ' and' - line 485: ' . push() and push() method saves the current transformations and ' - line 493: ' style settings. Then, after performing new transformations, the pop() method is used to restore us to the the original transformations. The result is that ' - line 494: ' whatever transformations or styling changes that are made between push()' - line 495: ' and pop() are isolated to that portion of the code. If you don’t ' - line 496: ' use push() and' - line 511: ' These primitive shape methods are' - line 512: ' getting-started-in-webgl-coords-and-transform-p20x2' - line 513: ' and' - line 519: ' More information about custom geometry can be found in the ' - line 520: ' getting-started-in-webgl-coords-and-transform-p21x2' - line 521: ' Custom Geometry tutorial ' - line 539: ' getting-started-in-webgl-custom-geometry-info1x2' - line 540: ' tutorial.' - line 551: ' the ' - line 729: ' An image that is passed into a shader program.' - line 433: ' moves the origin in a' - line 422: ' p5.js has a few methods, ' - line 423: ' getting-started-in-webgl-coords-and-transform-p7x2' - line 425: ' getting-started-in-webgl-coords-and-transform-p7x3' - line 426: ' that we can use to position and orient objects' - line 552: ' getting-started-in-webgl-custom-geometry-p2x2' - line 553: ' method, which should be used within preload(). Then you can use the ' - line 554: ' getting-started-in-webgl-custom-geometry-p2x3' - line 555: ' function to draw the model, as demonstrated in the example below.' - line 559: ' might be a much different size when drawn in p5.js, or even be too small to be drawn at all. The' - line 565: ' can add color using materials or textures, which you can learn about in the ' - line 566: ' getting-started-in-webgl-custom-geometry-info2x2' - line 567: ' Styling and Appearance ' - line 568: ' getting-started-in-webgl-custom-geometry-info2x3' - line 569: ' tutorial.' - line 580: ' getting-started-in-webgl-custom-geometry-p5x2' - line 581: ' and ' - line 582: ' getting-started-in-webgl-custom-geometry-p5x3' - line 583: ' This following example shows how' - line 587: ' There is also a powerful class, ' - line 639: ' ideas. p5.js has a special camera method, ' - line 640: ' getting-started-in-webgl-appearance-p5x2' - line 641: ' , that can be used to zoom, pan,' - line 650: ' tutorial, so make sure to check out the ' - line 651: ' getting-started-in-webgl-appearance-info1x2' - line 652: ' Introduction to Shaders' - line 653: ' getting-started-in-webgl-appearance-info1x3' - line 666: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 670: ' A camera projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 692: ' vertex(), p5.js passes the vertex information to the shader automatically.' - line 702: ' This value can either be lowp, mediump, or highp, although you will likely' - line 703: ' use mediump, or highp in certain situations.' - line 720: ' A variable that is passed from your sketch to a shader.' - line 446: ' values. Use the sliders in the sketch above to change the translation of the box and see how it moves along' - line 447: ' each axis. The code below demonstrates simple translation on a box() shape.' - line 462: ' example above to see how rotation is performed on each axis. The code below shows each of these methods' - line 472: ' p5.js also has some methods that can control when transformations are applied' - line 475: ' class="code">pop() make it easier to move objects' - line 522: ' way that is similar to 2D drawing in p5.js. For example, methods like quad(), triangle(), rect(), and circle() each have extra parameters that make it possible to use them in 3D.' - line 531: ' In the following example, p5.Geometry is used to plot a grid of points for the geometry. Then, computeFaces() is used to give the geometry' - line 739: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 759: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 386: ' getting-started-in-webgl-other-tutorials-you-are-here' - line 573: ' position of the active camera and the position that the camera is looking at. Try it out in the sketch below.' - line 626: ' getting-started-in-webgl-appearance-heading4' - line 628: ' Being able to have control over the camera, lighting, and materials will give you much more flexibility' - line 629: ' to decide how your sketch looks, and it will open up the possibilities for you to introduce your own' - line 631: ' to shaders, which will make it possible to change the appearance of your sketch in even more interesting ways.' - line 655: ' first, requiring a different approach than the 2D drawing of p5.js. This document will outline the basics ' - line 656: ' of shader programming and point you towards other resources.' - line 406: '' - line 376: ' getting-started-in-webgl-other-tutorials-p' - line 377: ' This tutorial is part of a series about the basics of using WebGL in p5.js. Check out each of these other tutorials below.' - line 407: ' getting-started-in-webgl-coords-and-transform-p3x1' - line 384: '' - line 391: ' To get started in 3D there are some new concepts to learn and this document will introduce some ideas' - line 400: '' - line 401: ' getting-started-in-webgl-coords-and-transform-heading1' - line 404: ' it allows us to do all kinds of math that help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 408: ' Working in 3D introduces a lot of complexity, especially when a sketch involves motion, texture, lighting, and' - line 385: '' - line 393: ' getting-started-in-webgl-coords-and-transform-toc-title' - line 395: ' getting-started-in-webgl-coords-and-transform-toc2' - line 396: ' getting-started-in-webgl-coords-and-transform-toc3' - line 397: ' getting-started-in-webgl-coords-and-transform-toc4' - line 370: '' - line 375: ' getting-started-in-webgl-other-tutorials-title' - line 371: '' - line 373: '' - line 378: ' getting-started-in-webgl-other-tutorials-tut1' - line 379: ' getting-started-in-webgl-other-tutorials-tut2' - line 398: ' getting-started-in-webgl-coords-and-transform-toc5' - line 415: '' - line 380: ' getting-started-in-webgl-other-tutorials-tut3' - line 382: '' - line 383: '' - line 389: ' getting-started-in-webgl-coords-and-transform-p1x1' - line 392: ' that will be important to any 3D sketch.' - line 399: ' getting-started-in-webgl-coords-and-transform-toc6' - line 402: ' getting-started-in-webgl-coords-and-transform-p2x1' - line 405: ' through its special WebGL mode.' - line 412: '' - line 413: ' getting-started-in-webgl-coords-and-transform-p4x1' - line 414: ' Let''s get started by setting up the p5.js to use WebGL, by passing a third parameter into createCanvas().' - line 416: ' getting-started-in-webgl-coords-and-transform-heading2' - line 417: ' 3D Coordinate Space' - line 418: '' - line 419: ' getting-started-in-webgl-coords-and-transform-info1x1' - line 368: '' - line 369: '' - line 372: '' - line 883: ' With these skills you will be able to create some basic shaders, but shader programming can go incredibly deep,' - line 884: ' and there are many shader topics that go beyond this tutorial. Shaders in p5.js can be a powerful tool for' - line 885: ' creating visuals, effects, and even textures that can be mapped to your 3D geometry.' - line 875: ' p5.js handles a lot of attributes and uniforms for us, and translate(), rotate(), and scale(), that we can use to position and orient objects' - line 441: ' within space. Each of these methods affect what is known as the model matrix. Collectively these are' - line 443: '' - line 444: ' getting-started-in-webgl-coords-and-transform-subheading1' - line 445: ' translate()' - line 448: ' translate() moves the origin in a' - line 454: ' getting-started-in-webgl-coords-and-transform-subheading2' - line 455: ' rotate()' - line 456: '' - line 457: ' getting-started-in-webgl-coords-and-transform-p9x1' - line 458: ' rotate() reorients whatever is' - line 459: ' drawn after it.' - line 460: '' - line 461: ' getting-started-in-webgl-coords-and-transform-p10x1' - line 467: ' example above to see how rotation is performed on each axis.' - line 468: ' getting-started-in-webgl-coords-and-transform-p11x1' - line 469: ' By default p5.js will expect angles to be in radians. Radians use numbers from 0 - TWO_PI to specify an' - line 470: ' angle. To use degrees, either convert degrees to radians using radians(), or use' - line 473: '

    You can also use rotate(), which allows' - line 474: ' you to specify which axis you''d like to rotate around using a vector as the second argument.

    ' - line 476: ' scale()' - line 477: ' getting-started-in-webgl-coords-and-transform-p12x1' - line 478: ' scale() changes the size of whatever is' - line 479: ' drawn after it. Like the other methods described so far, it accepts arguments for x, y, and z values.' - line 480: ' getting-started-in-webgl-coords-and-transform-heading4' - line 486: ' getting-started-in-webgl-coords-and-transform-p14x1' - line 487: ' Transformations can be performed in any order, but using translate, rotate, and then scale will be the most intuitive.' - line 488: ' Translation, followed by rotation, produces the effect of moving the shape and then rotating around that new location.' - line 489: ' getting-started-in-webgl-coords-and-transform-p15x1' - line 490: ' In the below example, try changing the order of translate() and rotateY() and see how it affects where the object is' - line 497: ' individually. The push() method saves and sets aside the' - line 498: ' current transformations. The pop() method restores those transformations. Whatever transformations that' - line 499: ' are made between push() and pop() will be isolated to that portion of the code. If you don’t use push() and' - line 502: ' pop(), you have to keep track of whatever transformations have already taken place, which' - line 503: ' can get complicated' - line 504: ' and difficult to follow. Consider this following example, which places two boxes in our sketch. To position the second box' - line 505: ' without push() and pop(), you have to account for the first transformation. This ' - line 506: ' can be a lot to keep track of in a more complex 3D scene. ' - line 507: ' getting-started-in-webgl-coords-and-transform-p17x1' - line 508: ' Now, let''s try the same code with push() and pop(). Now we can just' - line 509: ' translate the object where we want it, without' - line 510: ' having to remember where our coordinate system lies.' - line 514: ' transformation matrix is combined with the view matrix and the projection matrix, both of which help simulate' - line 515: ' the view of a camera, and this combination results in our 3D scene!

    ' - line 516: ' box() but p5.js has seven different predefined geometries' - line 527: ' that you can use in your sketch. These basic predefined geometries are often referred to as ''primitives''.' - line 528: ' getting-started-in-webgl-coords-and-transform-p20x1' - line 529: ' These primitive shape methods are' - line 530: ' plane(),' - line 532: ' ellipsoid(),' - line 533: ' cone(),' - line 534: ' cylinder(), and' - line 535: ' torus()' - line 536: ' getting-started-in-webgl-coords-and-transform-p21x1' - line 537: ' It is also possible to create custom geometry, either from scratch or from 3D models created in another' - line 538: ' program.' - line 541: ' getting-started-in-webgl-coords-and-transform-heading6' - line 542: ' Conclusion' - line 543: ' getting-started-in-webgl-coords-and-transform-p22x1' - line 544: ' By having basic control over a 3D coordinate space, transformations, ' - line 545: ' and basic shapes, you should be able to begin creating basic scenes' - line 546: ' in 3D. The tutorials that follow this in the Getting Started in WebGL series' - line 547: ' will introduce custom geometries, allow you to tweak the appearance of ' - line 548: ' the scene, and introduce you to some basic shader programming to push' - line 549: ' your sketches further.' - line 550: ' getting-started-in-webgl-coords-and-transform-glossary-title' - line 730: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 731: ' getting-started-in-webgl-appearance-glossary-term3-title' - line 732: ' getting-started-in-webgl-appearance-glossary-term3-definition' - line 733: ' A projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 734: ' two-dimensional.' - line 735: ' getting-started-in-webgl-appearance-glossary-term4-title' - line 736: ' getting-started-in-webgl-appearance-glossary-term4-definition' - line 737: ' getting-started-in-webgl-appearance-glossary-term5-title' - line 738: ' getting-started-in-webgl-appearance-glossary-term5-definition' - line 740: ' getting-started-in-webgl-appearance-glossary-term6-definition' - line 741: ' The near plane represents the minimum distance a geometry must be from the camera to be displayed, while' - line 742: ' the far plane represents the maximum distance.' - line 743: ' getting-started-in-webgl-appearance-glossary-term7-title' - line 744: ' getting-started-in-webgl-appearance-glossary-term7-definition' - line 745: '' - line 746: '' - line 747: '' - line 748: '' - line 749: '' - line 753: ' getting-started-in-webgl-shaders-p0x1' - line 754: ' Shaders are special programs that run on the graphics processing unit, or GPU, that can do some incredible' - line 755: ' things. They take advantage of the' - line 756: ' GPU to process many pixels at once, making them fast and particularly well suited for certain tasks, like' - line 757: ' generating noise, applying filters like blur, or shading polygons. Shader programming can feel daunting at' - line 758: ' first, they require a different approach than the 2D drawing of p5.js and it can often involve more advanced' - line 760: '' - line 761: ' getting-started-in-webgl-shaders-toc-title' - line 762: ' getting-started-in-webgl-shaders-toc1' - line 763: ' getting-started-in-webgl-shaders-toc2' - line 764: ' getting-started-in-webgl-shaders-toc3' - line 765: ' getting-started-in-webgl-shaders-toc4' - line 766: ' getting-started-in-webgl-shaders-toc5' - line 767: ' getting-started-in-webgl-shaders-heading1' - line 768: '' - line 769: ' getting-started-in-webgl-shaders-p1x1' - line 770: ' p5.js is a great tool for working with shaders because it handles a lot of the WebGL setup so you can focus on' - line 771: ' the shader code itself. Before we can get started with shaders we have to set up our canvas so that it uses' - line 772: ' p5.js WebGL model.' - line 773: '' - line 774: ' getting-started-in-webgl-shaders-p2x1' - line 775: ' A shader program consists of two parts, a vertex shader and a fragment' - line 776: ' shader. The vertex shader affects where the 3D geometry is drawn on the screen and the fragment' - line 777: ' shader is responsible for affecting the color output. Each of these live in separate files and are loaded into' - line 778: ' p5.js using loadShader(). Once a shader is loaded it can be used within draw(). The following example will show' - line 780: ' how to set up a basic shader within p5.js' - line 781: '' - line 782: ' getting-started-in-webgl-shaders-heading2' - line 783: '' - line 784: ' getting-started-in-webgl-shaders-p3x1' - line 785: ' So now you might be wondering what we actually write in these shader files! Shader files are written in' - line 786: ' Graphics Library Shading Language, or GLSL, and have a very different syntax and structure than we are familiar' - line 787: ' with. GLSL has a' - line 788: ' syntax that resembles C, which means it comes with a handful of concepts that aren''t present in JavaScript.' - line 789: '' - line 790: ' getting-started-in-webgl-shaders-p4x1' - line 791: ' For one, the shading language is much more strict about types. Each variable you create has to be labeled with' - line 792: ' the kind of data it is storing. Here is a list of some of the common types' - line 793: '' - line 794: ' getting-started-in-webgl-shaders-typelist' - line 795: ' vec2(x,y) // a vector of two floats' - line 796: ' vec3(r,g,b) // a vector of three floats' - line 797: ' vec4(r,g,b,a) // a vector of four floats' - line 798: ' float // a number with decimal points' - line 799: ' int // a whole number without decimal points' - line 800: ' sampler2D // a reference to a texture' - line 801: '' - line 802: ' getting-started-in-webgl-shaders-p5x1' - line 803: ' In general the shading language is much more strict than JavaScript. A missing semicolon for example is not' - line 804: ' allowed and will result in an error message. You can''t use different types of numbers, like floats or integers' - line 805: ' interchangeably.' - line 806: '' - line 807: ' getting-started-in-webgl-shaders-p6x1' - line 808: ' First let''s look at a basic vertex shader' - line 809: '' - line 810: ' getting-started-in-webgl-shaders-p7x1' - line 811: ' This vertex shader begins with an attribute, which p5.js uses to share vertex position information' - line 812: ' with the shader. This' - line 813: ' attribute is a vec3, meaning it contains a value for x, y, and z. Attributes are special' - line 814: ' variable types that are' - line 815: ' only used in the vertex shader and are typically provided by p5.js.' - line 816: '' - line 817: ' getting-started-in-webgl-shaders-p8x1' - line 818: ' All vertex shaders require a function, main(), within which we position our vertices. In' - line 819: ' this example, the' - line 820: ' vertex shader repositions our vertices so that the shader output takes up the full sketch. At the end of main(),' - line 822: ' we have to assign a value to gl_Position.' - line 823: '' - line 824: ' getting-started-in-webgl-shaders-p9x1' - line 825: ' Don''t worry if this doesn''t make a ton of sense yet. The vertex shader plays an important role but it is often' - line 826: ' just responsible for making sure what we create in our fragment shader displays properly on the geometry. You''ll' - line 827: ' probably find yourself reusing the same vertex shaders in many of your projects.' - line 828: ' The fragment shader on the other hand is responsible for the color output of our shader and is where we will do' - line 829: ' a lot of our shader programming. Here is a very simple fragment shader that will just display the color red' - line 830: '' - line 831: ' getting-started-in-webgl-shaders-p10x1' - line 832: ' The fragment shader begins with a line specifying the float ''precision''.' - line 833: ' this value you can either be lowp, mediump, or highp, although you will likely' - line 834: ' use mediump, or highp in certain situations.' - line 835: '' - line 836: ' getting-started-in-webgl-shaders-p11x1' - line 837: ' And similar to the vertex shader, our fragment shader also requires a main() function, but instead of' - line 838: ' setting gl_Position, we will assign a color to gl_FragColor.' - line 839: '' - line 840: ' getting-started-in-webgl-shaders-p12x1' - line 841: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 842: ' those four values are red, green, blue, and alpha. Shaders don''t use 0 - 255 for colors like our sketches do, instead they use' - line 843: ' values between 0.0 and 1.0.' - line 844: '' - line 845: ' getting-started-in-webgl-shaders-p13x1' - line 846: ' Now that we have a vertex shader and a fragment shader, these can be saved to separate files (shader.vert and' - line 847: ' shader.frag respectively), and loaded into our sketch using loadShader().' - line 848: '' - line 849: ' getting-started-in-webgl-shaders-heading3' - line 850: ' Uniforms' - line 851: '' - line 852: ' getting-started-in-webgl-shaders-p14x1' - line 853: ' A simple shader like this can be useful by itself, but there are times when it''s necessary to communicate' - line 854: ' variables from the p5.js sketch to a shader. This is when uniforms come in. Uniforms are special variables that' - line 855: ' can be sent from a sketch to a shader. These make it possible to have much more control over a shader. For example,' - line 856: ' you could use the p5.js method millis() to pass a ''time'' uniform to our sketch to introduce motion.' - line 857: ' In the shader, uniforms are defined at the top of the file, outside of main(). In' - line 858: ' this following fragment shader' - line 859: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 860: '' - line 861: ' getting-started-in-webgl-shaders-p15x1' - line 862: ' Back in our p5.js sketch, this color can now be sent using setUniform()' - line 863: '' - line 864: ' getting-started-in-webgl-shaders-p16x1' - line 865: ' There are also attributes, which are usually used to share certain data about the geometry between the' - line 866: ' sketch and the vertex shader, and varying variables, which share data between the vertex shader and the' - line 867: ' fragment shader.' - line 868: ' This makes it possible to use position or other geometry data within our fragment shaders.' - line 869: '' - line 870: ' getting-started-in-webgl-shaders-p17x1' - line 886: '' - line 887: ' getting-started-in-webgl-shaders-p19x1' - line 888: ' Want to keep learning more about shaders? Check out some of these websites!' - line 889: '' - line 890: ' getting-started-in-webgl-shaders-resources' - line 891: '
  • ' - line 897: '
  • ' - line 901: '' - line 902: ' getting-started-in-webgl-shaders-glossary-title' - line 903: '' - line 904: ' getting-started-in-webgl-shaders-glossary-term1-title' - line 905: ' getting-started-in-webgl-shaders-glossary-term1-definition' - line 906: ' A special graphics card program that can efficiently produce many visual effects and filters.' - line 907: '' - line 908: ' getting-started-in-webgl-shaders-glossary-term2-title' - line 909: ' getting-started-in-webgl-shaders-glossary-term2-definition' - line 910: ' Graphics Library Shader Language (GLSL) is a programming language that is used to write shaders.' - line 911: '' - line 912: ' getting-started-in-webgl-shaders-glossary-term3-title' - line 913: ' getting-started-in-webgl-shaders-glossary-term3-definition' - line 914: ' A variable that is passed from your sketch to a shader' - line 915: '' - line 916: ' getting-started-in-webgl-shaders-glossary-term4-title' - line 917: ' getting-started-in-webgl-shaders-glossary-term4-definition' - line 918: ' A data type that stores a group of numbers, most commonly two, three, or four, to represent colors, positions,' - line 919: ' and more.' - line 920: '' - line 921: ' getting-started-in-webgl-shaders-glossary-term5-title' - line 922: ' getting-started-in-webgl-shaders-glossary-term5-definition' - line 923: ' A data type that stores floating point numbers, which can have a decimal point.' - line 924: '' - line 925: ' getting-started-in-webgl-shaders-glossary-term6-title' - line 926: ' getting-started-in-webgl-shaders-glossary-term6-definition' - line 927: ' A data type that stores integers, which are whole numbers without a decimal.' - line 928: '' - line 929: ' getting-started-in-webgl-shaders-glossary-term7-title' - line 930: ' getting-started-in-webgl-shaders-glossary-term7-definition' - line 931: ' A data type that represents a texture being passed into the shader.' - line 932: '' - line 933: ' getting-started-in-webgl-shaders-glossary-term8-title' - line 934: ' getting-started-in-webgl-shaders-glossary-term8-definition' - line 935: ' A GLSL variable that is generated in the p5.js sketch and made available in the vertex shader. For most' - line 936: ' situations these are provided by p5.js.' - line 937: '' - line 938: ' getting-started-in-webgl-shaders-glossary-term9-title' - line 939: ' getting-started-in-webgl-shaders-glossary-term9-definition' - line 940: ' An image that passed into a shader program.' - line 941: '' - line 942: ' getting-started-in-webgl-shaders-glossary-term10-title' - line 943: ' getting-started-in-webgl-shaders-glossary-term10-definition' - line 944: ' A label describing the characterics of a piece of data, such as an int, a float, a vector, etc.' - line 945: '' - line 946: ' getting-started-in-webgl-shaders-glossary-term11-title' - line 947: ' getting-started-in-webgl-shaders-glossary-term11-definition' - line 948: ' The part of a shader program that is responsible for positioning geometry in 3D space.' - line 949: '' - line 950: ' getting-started-in-webgl-shaders-glossary-term12-title' - line 951: ' getting-started-in-webgl-shaders-glossary-term12-definition' - line 952: ' The part of a shader program that is responsible for the color and appearance of each pixel output by the' - line 953: ' shader.' - line 954: '' - line 955: ' ' - line 956: '' - line 604: ' way that is similar to 2D drawing in p5.js. For example, methods like quad() and triangle() each have extra parameters that make it possible to use them in 3D.' - line 420: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled' - line 421: ' Coordinate System and Shapes.' - line 427: ' getting-started-in-webgl-coords-and-transform-p6x1' - line 428: ' When drawing in 2D, the point (0,0) is located at the top left corner of the screen. In WebGL mode, the' - line 429: ' origin of the sketch (0,0,0) is located in the middle of the screen. By default, the x-axis goes left-to-right,' - line 430: ' y-axis goes up-to-down, and the z-axis goes from further-to-closer.' - line 431: '' - line 387: ' getting-started-in-webgl-custom-geometry-p2x1' - line 388: ' Custom geometry can be imported into p5.js using either OBJ or STL files. These files are usually generated in' - line 884: ' A set of utilities and additional features for my creative coding class aiming ' - line 885: ' to help students.' - line 1642: ' teach-case1-title' - line 1643: ' teach-case1-lead-name' - line 1644: ' teach-case1-image-alt' - line 1645: ' teach-case1-content1' - line 1646: ' teach-case1-content1-1' - line 1647: ' teach-case1-content2' - line 1648: ' teach-case1-content3' - line 1649: ' teach-case1-content4' - line 1650: ' teach-case1-content5' - line 1651: ' teach-case1-content5-1' - line 1652: ' teach-case1-content5-2' - line 1653: ' teach-case1-content5-3' - line 1654: ' teach-case2-title' - line 1655: ' teach-case2-lead-name' - line 1656: ' teach-case2-content1' - line 1657: ' teach-case2-content1-1' - line 1658: ' teach-case2-content2' - line 1659: ' teach-case2-content3' - line 1660: ' teach-case2-content4' - line 1661: ' teach-case2-content5' - line 1662: ' teach-case3-title' - line 1663: ' teach-case3-lead-name' - line 1664: ' teach-case3-content1' - line 1665: ' teach-case3-content1-1' - line 1666: ' teach-case3-content2' - line 1667: ' teach-case3-content3' - line 1668: ' teach-case3-content4' - line 1669: ' teach-case3-content5' - line 1670: ' teach-case4-title' - line 1671: ' teach-case4-lead-name' - line 1672: ' teach-case4-content1' - line 1673: ' teach-case4-content1-1' - line 1674: ' teach-case4-content2' - line 1675: ' teach-case4-content3' - line 1676: ' teach-case4-content4' - line 1677: ' teach-case4-content5' - line 1678: ' teach-case5-title' - line 1679: ' teach-case5-lead-name' - line 1680: ' teach-case5-image-alt' - line 1681: ' teach-case5-content1' - line 1682: ' teach-case5-content1-1' - line 1683: ' teach-case5-content2' - line 1684: ' teach-case5-content3' - line 1685: ' teach-case5-content4' - line 1686: ' teach-case5-content5' - line 1687: ' teach-case6-title' - line 1688: ' teach-case6-lead-name' - line 1689: ' teach-case6-image-alt' - line 1690: ' teach-case6-content1' - line 1691: ' teach-case6-content1-1' - line 1692: ' teach-case6-content2' - line 1693: ' teach-case6-content3' - line 1694: ' teach-case6-content4' - line 1695: ' teach-case6-content5' - line 1696: ' teach-case7-title' - line 1697: ' teach-case7-lead-name' - line 1698: ' teach-case7-image-alt' - line 1699: ' teach-case7-content1' - line 1700: ' teach-case7-content1-1' - line 1701: ' teach-case7-content2' - line 1702: ' teach-case7-content3' - line 1703: ' teach-case7-content4' - line 1704: ' teach-case7-content5' - line 1705: ' teach-case8-title' - line 1706: ' teach-case8-lead-name' - line 1707: ' teach-case8-content1' - line 1708: ' teach-case8-content1-1' - line 1709: ' teach-case8-content2' - line 1710: ' teach-case8-content3' - line 1711: ' teach-case8-content4' - line 1712: ' teach-case8-content5' - line 1713: ' teach-case9-title' - line 1714: ' teach-case9-lead-name' - line 1715: ' teach-case9-image-alt' - line 1716: ' teach-case9-content1' - line 1717: ' teach-case9-content1-1' - line 1718: ' teach-case9-content2' - line 1719: ' teach-case9-content3' - line 1720: ' teach-case9-content4' - line 1721: ' teach-case9-content5' - line 1722: ' teach-case10-title' - line 1723: ' teach-case10-lead-name' - line 1724: ' teach-case10-content1' - line 1725: ' teach-case10-content1-1' - line 1726: ' teach-case10-content2' - line 1727: ' teach-case10-content3' - line 1728: ' teach-case10-content4' - line 1729: ' teach-case10-content5' - line 1730: ' teach-case11-title' - line 1731: ' teach-case11-lead-name' - line 1732: ' teach-case11-content1' - line 1733: ' Seoul Museum of Art, Seoul, South Korea.''' - line 1734: ' teach-case11-content1-1' - line 1735: ' teach-case11-content2' - line 1736: ' teach-case11-content3' - line 1737: ' teach-case11-content4' - line 1738: ' teach-case11-content5' - line 1739: ' We also used dice, playing cards and various paper tools to help students learn about coding concepts. ''' - line 1740: ' teach-case12-title' - line 1741: ' teach-case12-lead-name' - line 1742: ' teach-case12-image-alt' - line 1743: ' teach-case12-content1' - line 1744: ' teach-case12-content1-1' - line 1745: ' teach-case12-content2' - line 1746: ' teach-case12-content3' - line 1747: ' teach-case12-content4' - line 1748: ' teach-case12-content5' - line 1749: ' Methods' - line 1750: ' teach-case12-content5-1' - line 1751: ' teach-case13-title' - line 1752: ' teach-case13-lead-name' - line 1753: ' teach-case13-content1' - line 1754: ' teach-case13-content1-1' - line 1755: ' teach-case13-content2' - line 1756: ' teach-case13-content3' - line 1757: ' teach-case13-content4' - line 1761: ' teach-case13-content5' - line 1766: ' teach-case13-content5-1' - line 1770: ' teach-case14-title' - line 1778: ' teach-case14-lead-name' - line 1779: ' teach-case14-image-alt' - line 1780: ' teach-case14-content1' - line 1781: ' teach-case14-content1-1' - line 1782: ' teach-case14-content2' - line 1787: ' teach-case14-content3' - line 1788: ' teach-case14-content4' - line 1803: ' teach-case14-content5' - line 1804: ' teach-case14-content5-1' - line 1805: ' teach-case14-content5-2' - line 1806: ' teach-case14-content5-3' - line 1807: ' teach-case14-content5-4' - line 1808: ' teach-case14-content5-5' - line 1809: ' teach-case15-title' - line 1810: ' teach-case15-lead-name' - line 1811: ' teach-case15-speech' - line 1812: ' teach-case15-content1' - line 1813: ' teach-case15-content1-1' - line 1814: ' teach-case15-content2' - line 1819: ' teach-case15-content3' - line 1820: ' teach-case15-content4' - line 1824: ' teach-case15-content5' - line 1838: ' teach-case15-content5-1' - line 1839: ' teach-case15-content5-2' - line 1840: ' teach-case15-content5-3' - line 1841: ' teach-case16-title' - line 1842: ' teach-case16-lead-name' - line 1843: ' teach-case16-image-alt' - line 1844: ' teach-case16-speech' - line 1845: ' teach-case16-content1' - line 1846: ' teach-case16-content1-1' - line 1847: ' teach-case16-content2' - line 1852: ' teach-case16-content3' - line 1853: ' teach-case16-content4' - line 1864: ' teach-case16-content5' - line 1865: ' teach-case16-content5-1' - line 1866: ' teach-case16-content5-2' - line 1867: ' teach-case16-content5-3' - line 1868: ' teach-case16-content5-4' - line 1869: ' teach-case17-title' - line 1870: ' teach-case17-lead-name' - line 1871: ' teach-case17-speech' - line 1881: ' teach-case17-content1' - line 1882: ' teach-case17-content1-1' - line 1883: ' teach-case17-content1-2' - line 1884: ' teach-case17-content1-3' - line 1885: ' teach-case17-content2' - line 1886: ' teach-case17-content3' - line 1887: ' teach-case17-content4' - line 1891: ' teach-case17-content5' - line 1901: ' teach-case17-content5-1' - line 1902: ' teach-case17-content5-2' - line 1903: ' teach-case17-content5-3' - line 1904: ' teach-case18-title' - line 1905: ' teach-case18-lead-name' - line 1906: ' teach-case18-image-alt' - line 1907: ' teach-case18-speech' - line 1924: ' teach-case18-content1' - line 1925: ' teach-case18-content1-1' - line 1926: ' teach-case18-content2' - line 1927: ' teach-case18-content3' - line 1928: ' teach-case18-content4' - line 1929: ' teach-case18-content5' - line 1930: ' teach-case18-content5-1' - line 1931: ' teach-case18-content5-2' - line 1932: ' teach-case18-content5-3' - line 1933: ' teach-case18-content5-4' - line 1934: ' teach-case18-content5-5' - line 1935: ' teach-case19-title' - line 1936: ' teach-case19-lead-name' - line 1937: ' teach-case19-speech' - line 1964: ' teach-case19-content1' - line 1965: ' teach-case19-content1-1' - line 1966: ' teach-case19-content2' - line 1967: ' teach-case19-content3' - line 1968: ' teach-case19-content4' - line 1969: ' teach-case19-content5' - line 1970: ' teach-case19-content5-1' - line 1971: ' teach-case20-title' - line 1972: ' teach-case20-lead-name' - line 1973: ' teach-case20-image-alt' - line 1974: ' teach-case20-content1' - line 1975: ' teach-case20-content1-1' - line 1976: ' teach-case20-content2' - line 1977: ' teach-case20-content3' - line 1978: ' teach-case20-content4' - line 1979: ' teach-case20-content5' - line 1980: ' teach-case20-content5-1' - line 1981: ' teach-case20-content5-2' - line 1982: ' teach-case21-title' - line 1983: ' teach-case21-lead-name' - line 1984: ' teach-case21-image-alt' - line 1985: ' teach-case21-content1' - line 1986: ' teach-case21-content1-1' - line 1987: ' teach-case21-content2' - line 1992: ' teach-case21-content3' - line 1993: ' teach-case21-content4' - line 1998: ' teach-case21-content5' - line 2009: ' teach-case21-content5-1' - line 2010: ' teach-case21-content5-2' - line 2011: ' teach-case21-content5-3' - line 2012: ' teach-case22-title' - line 2013: ' teach-case22-lead-name' - line 2014: ' teach-case22-content1' - line 2015: ' teach-case22-content3' - line 2016: ' teach-case22-content4' - line 2021: ' teach-case22-content5' - line 2035: ' teach-case22-content5-1' - line 2036: ' teach-case22-content5-2' - line 2037: ' teach-case23-title' - line 2038: ' teach-case23-lead-name' - line 2039: ' teach-case23-image-alt' - line 2040: ' teach-case23-content1' - line 2041: ' teach-case23-content1-1' - line 2042: ' teach-case23-content2' - line 2043: ' teach-case23-content3' - line 2044: ' teach-case23-content4' - line 2051: ' teach-case23-content5' - line 2052: ' teach-case23-content5-1' - line 2063: ' teach-case23-content5-2' - line 2064: ' teach-case23-content5-3' - line 2065: ' teach-case23-content5-4' - line 2066: ' teach-case23-content5-5' - line 2067: ' teach-case24-title' - line 2068: ' teach-case24-lead-name' - line 2069: ' teach-case24-image-alt' - line 2070: ' teach-case24-speech' - line 2081: ' teach-case24-content1' - line 2082: ' teach-case24-content1-1' - line 2083: ' teach-case24-content2' - line 2084: ' teach-case24-content3' - line 2085: ' teach-case24-content4' - line 2089: ' teach-case24-content5' - line 2095: ' teach-case24-content5-1' - line 2096: ' teach-case24-content5-2' - line 2097: ' teach-workshops-heading' - line 2098: ' teach-workshop1-title' - line 2099: ' teach-workshop1-time' - line 2100: ' teach-workshop2-title' - line 2101: ' teach-workshop2-time' - line 2102: ' teach-workshop3-title' - line 2103: ' teach-workshop3-time' -ko: - src/data/en.yml: - line 980: ' contributors-conference1' - line 1642: ' teach-case1-title' - line 1643: ' teach-case1-lead-name' - line 1644: ' teach-case1-image-alt' - line 1645: ' teach-case1-content1' - line 1646: ' teach-case1-content1-1' - line 1647: ' teach-case1-content2' - line 1648: ' teach-case1-content3' - line 1649: ' teach-case1-content4' - line 1650: ' teach-case1-content5' - line 1651: ' teach-case1-content5-1' - line 1652: ' teach-case1-content5-2' - line 1653: ' teach-case1-content5-3' - line 1654: ' teach-case2-title' - line 1655: ' teach-case2-lead-name' - line 1656: ' teach-case2-content1' - line 1657: ' teach-case2-content1-1' - line 1658: ' teach-case2-content2' - line 1659: ' teach-case2-content3' - line 1660: ' teach-case2-content4' - line 1661: ' teach-case2-content5' - line 1662: ' teach-case3-title' - line 1663: ' teach-case3-lead-name' - line 1664: ' teach-case3-content1' - line 1665: ' teach-case3-content1-1' - line 1666: ' teach-case3-content2' - line 1667: ' teach-case3-content3' - line 1668: ' teach-case3-content4' - line 1712: ' teach-case8-content5' - line 1713: ' teach-case9-title' - line 1714: ' teach-case9-lead-name' - line 1715: ' teach-case9-image-alt' - line 1716: ' teach-case9-content1' - line 1717: ' teach-case9-content1-1' - line 1718: ' teach-case9-content2' - line 1719: ' teach-case9-content3' - line 1720: ' teach-case9-content4' - line 1721: ' teach-case9-content5' - line 1722: ' teach-case10-title' - line 1723: ' teach-case10-lead-name' - line 1724: ' teach-case10-content1' - line 1725: ' teach-case10-content1-1' - line 1726: ' teach-case10-content2' - line 1727: ' teach-case10-content3' - line 1728: ' teach-case10-content4' - line 1729: ' teach-case10-content5' - line 1730: ' teach-case11-title' - line 1731: ' teach-case11-lead-name' - line 1732: ' teach-case11-content1' - line 1733: ' Seoul Museum of Art, Seoul, South Korea.''' - line 1734: ' teach-case11-content1-1' - line 1735: ' teach-case11-content2' - line 1736: ' teach-case11-content3' - line 1737: ' teach-case11-content4' - line 1738: ' teach-case11-content5' - line 1739: ' We also used dice, playing cards and various paper tools to help students learn about coding concepts. ''' - line 1740: ' teach-case12-title' - line 1741: ' teach-case12-lead-name' - line 1742: ' teach-case12-image-alt' - line 1743: ' teach-case12-content1' - line 1744: ' teach-case12-content1-1' - line 1745: ' teach-case12-content2' - line 1746: ' teach-case12-content3' - line 1747: ' teach-case12-content4' - line 1748: ' teach-case12-content5' - line 1749: ' Methods' - line 1750: ' teach-case12-content5-1' - line 1751: ' teach-case13-title' - line 1752: ' teach-case13-lead-name' - line 1753: ' teach-case13-content1' - line 1754: ' teach-case13-content1-1' - line 1755: ' teach-case13-content2' - line 1756: ' teach-case13-content3' - line 1757: ' teach-case13-content4' - line 1761: ' teach-case13-content5' - line 1766: ' teach-case13-content5-1' - line 1770: ' teach-case14-title' - line 1803: ' teach-case14-content5' - line 1804: ' teach-case14-content5-1' - line 1805: ' teach-case14-content5-2' - line 1806: ' teach-case14-content5-3' - line 1807: ' teach-case14-content5-4' - line 1808: ' teach-case14-content5-5' - line 1809: ' teach-case15-title' - line 1810: ' teach-case15-lead-name' - line 1811: ' teach-case15-speech' - line 1812: ' teach-case15-content1' - line 1813: ' teach-case15-content1-1' - line 1814: ' teach-case15-content2' - line 1819: ' teach-case15-content3' - line 1820: ' teach-case15-content4' - line 1824: ' teach-case15-content5' - line 2009: ' teach-case21-content5-1' - line 2010: ' teach-case21-content5-2' - line 2011: ' teach-case21-content5-3' - line 2012: ' teach-case22-title' - line 2013: ' teach-case22-lead-name' - line 2014: ' teach-case22-content1' - line 2015: ' teach-case22-content3' - line 2016: ' teach-case22-content4' - line 2021: ' teach-case22-content5' - line 2035: ' teach-case22-content5-1' - line 2036: ' teach-case22-content5-2' - line 2037: ' teach-case23-title' - line 2038: ' teach-case23-lead-name' - line 2039: ' teach-case23-image-alt' - line 2040: ' teach-case23-content1' - line 2041: ' teach-case23-content1-1' - line 2042: ' teach-case23-content2' - line 2043: ' teach-case23-content3' - line 2044: ' teach-case23-content4' - line 2051: ' teach-case23-content5' - line 2052: ' teach-case23-content5-1' - line 2063: ' teach-case23-content5-2' - line 2064: ' teach-case23-content5-3' - line 2065: ' teach-case23-content5-4' - line 2066: ' teach-case23-content5-5' - line 2067: ' teach-case24-title' - line 2068: ' teach-case24-lead-name' - line 2069: ' teach-case24-image-alt' - line 2070: ' teach-case24-speech' - line 2081: ' teach-case24-content1' - line 2082: ' teach-case24-content1-1' - line 2083: ' teach-case24-content2' - line 2084: ' teach-case24-content3' - line 2085: ' teach-case24-content4' - line 2089: ' teach-case24-content5' - line 2095: ' teach-case24-content5-1' - line 2096: ' teach-case24-content5-2' - line 2097: ' teach-workshops-heading' - line 2098: ' teach-workshop1-title' - line 2099: ' teach-workshop1-time' - line 2100: ' teach-workshop2-title' - line 2101: ' teach-workshop2-time' - line 2102: ' teach-workshop3-title' - line 2103: ' teach-workshop3-time' - line 883: ' p5.utils' - line 884: ' A set of utilities and additional features for my creative coding class aiming ' - line 885: ' to help students.' - line 1153: ' 2022-p5js-access-day-date' - line 1174: ' 2022-p5js-access-day-advisor' - line 1150: ' p5js-community-event-title' - line 1151: ' 2022-p5js-access-day-title' - line 1152: ' 2022-p5js-access-day-date' - line 1154: ' 2022-p5js-access-day-coordinator' - line 1155: ' 2022-p5js-access-day-description' - line 1156: ' The p5.js Access Day is a virtual conference to talk about access in ' - line 1157: ' open-source software for the arts (OSSTA) and greater issues beyond the software. ' - line 1158: ' The day-long online event features four themed-sessions — Critical Web ' - line 1159: ' Accessibility, Disability Arts, Access & Community Building, and Access ' - line 1160: ' via Translation. It provides space for contributors of p5.js and experienced ' - line 1161: ' practitioners from outside OSSTA projects to share their knowledge, perspectives, ' - line 1162: ' and dreams for building greater access to technical and arts spaces. ' - line 1163: ' 2022-p5js-access-day-recap-video' - line 1164: ' 2022-p5js-access-day-recap-video-asl' - line 1165: ' 2022-p5js-access-day-moderator' - line 1166: ' 2022-p5js-access-day-speakers' - line 1167: ' 2022-p5js-access-day-session-0' - line 1168: ' 2022-p5js-access-day-session-1' - line 1169: ' 2022-p5js-access-day-session-2' - line 1170: ' 2022-p5js-access-day-session-3' - line 1171: ' 2022-p5js-access-day-session-4' - line 1172: ' 2022-p5js-access-day-session-5' - line 1173: ' 2022-p5js-access-day-production' - line 1175: ' 2022-p5js-access-day-asl' - line 1176: ' 2022-p5js-access-day-designer' - line 1177: ' 2022-p5js-access-day-tech-support' - line 1178: ' 2022-p5js-access-day-transcriber' - line 1179: ' 2022-p5js-access-day-asl-support' - line 85: ' under the terms of the ' - line 26: footer6 - line 25: footer2 - line 27: footer4 - line 31: footer8 - line 32: footer9 - line 28: footer5 - line 29: footer6 - line 30: footer7 - line 270: ' particular topics. Check out the' - line 288: ' to the index.html containing your p5.js sketch.' - line 297: ' file and the embed.html file for the sketch.' - line 306: ' be' - line 310: ' stylesheet)' - line 319: ' was ported to P5 by Kelly Chang. If you find any errors or have comments,' - line 330: ' background(255); // Setting the background to white' - line 331: ' stroke(0); // Setting the outline (stroke) to black' - line 332: ' fill(150); // Setting the interior of a shape (fill) to grey' - line 340: ' black. Also, remember not to eliminate both—with' - line 349: ' percentage). You can do this by specifying a custom' - line 358: ' want to use the' - line 363: ' and the bottom right corner). The mode here is' - line 261: ' the' - line 279: ' of the p5js site. The file called index.hbs is the' - line 1536: ' teach-case2-image-alt' - line 1544: ' teach-case4-image-alt' - line 1552: ' teach-case6-image-alt' - line 1560: ' teach-case8-image-alt' - line 1568: ' teach-case9-image-alt' - line 1576: ' teach-case11-image-alt' - line 1584: ' teach-case12-image-alt' - line 1123: ' book-6-title' - line 1124: ' book-6-authors' - line 1125: ' book-6-publisher' - line 1126: ' book-6-pages' - line 1127: ' book-6-type' - line 1128: ' book-6-description' - line 1129: ' Using p5.js, this book introduces and demonstrates the reflexive practice ' - line 1130: ' of aesthetic programming, engaging with learning to program as a way to ' - line 1131: ' understand and question existing technological objects and paradigms, ' - line 1132: ' and to explore the potential for reprogramming wider eco-socio-technical systems.' - line 1133: ' book-6-order-a' - line 1134: ' book-6-order-b' - line 162: ' library in your html. To learn more visit ' - line 163: ' library in your html. To learn more visit ' - line 164: ' your-first-sketch7' - line 97: ' get-started-button' - line 96: ' get-started7' - line 114: ' environment15' - line 113: ' environment14' - line 115: ' environment16' - line 102: ' download8' - line 103: ' download9' - line 104: ' download10' - line 105: ' download11' - line 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open' - line 256: ' , the organization that supports p5.js.' - line 269: ' Your donation supports software development for p5.js, education resources' - line 265: ' and inclusive as possible. You can support this work by making a donation to' - line 266: ' the ' - line 267: ' support-2' - line 268: ' , the organization that supports p5.js. We need your help!' - line 275: ' support-3' - line 276: ' support-4' - line 277: ' support-5' - line 37: Editor - line 55: footer5 - line 123: ' p3xh2' - line 41: Reference - line 118: ' p2x3' - line 128: ' p3xp5' - line 59: tagline4 - line 136: ' p4xp6' - line 243: ' settingUp-title' - line 62: tagline7 - line 45: Books - line 34: Language-Settings - line 35: Sidebar-Title - line 36: Home - line 38: Download - line 39: Donate - line 40: Start - line 42: Libraries - line 43: Learn - line 56: tagline1 - line 60: tagline5 - line 61: tagline6 - line 111: ' identity and expression, sexual orientation, race, ethnicity, language,' - line 112: ' neuro-type, size, disability, class, religion, culture, subculture,' - line 116: ' kinds. We facilitate and foster access and empowerment. We are all learners.' - line 117: ' p2x2' - line 119: ' p2x4' - line 120: ' p2x5' - line 121: ' p2x6' - line 122: ' p2x7' - line 124: ' p3xp1' - line 125: ' p3xp2' - line 126: ' p3xp3' - line 127: ' p3xp4' - line 137: ' sketch_credits' - line 138: ' sketch_info' - line 271: ' Open Sublime. Go to the File menu and choose Open... and choose the folder' - line 272: ' that your html and js files are located in. On the left sidebar, you should' - line 273: ' find the folder name at the top, with a list of the files contained in the' - line 282: ' environment12' - line 283: ' environment13' - line 284: ' your-first-sketch-title' - line 285: ' your-first-sketch-intro1' - line 286: ' your-first-sketch-intro2' - line 287: ' your-first-sketch-intro3' - line 289: ' your-first-sketch1' - line 290: ' your-first-sketch2' - line 291: ' your-first-sketch3' - line 292: ' your-first-sketch4' - line 293: ' The line you just added draws an ellipse, with its center 50 pixels over' - line 294: ' from the left and 50 pixels down from the top, with a width and height of 80' - line 295: ' pixels.' - line 296: ' your-first-sketch5' - line 298: ' If you are using a screen reader, you must turn on the accessible outputs in' - line 299: ' the p5 online editor, outside the editor you must add the accessibility' - line 300: ' library in your html. To learn more visit' - line 301: ' your-first-sketch7' - line 302: ' your-first-sketch8' - line 303: ' If you''ve typed everything correctly, this will appear in the display' - line 304: ' window' - line 305: ' your-first-sketch9' - line 307: ' If nothing appears, the editor may be having trouble understanding what' - line 308: ' you’ve typed. If this happens, make sure that you''ve copied the example code' - line 309: ' exactly' - line 311: ' to be spelled correctly.' - line 312: ' your-first-sketch11' - line 313: ' One of the most difficult things about getting started with programming is' - line 314: ' that you have to be very specific about the syntax. The browser isn''t always' - line 315: ' smart enough to know what you mean, and can be quite fussy about the' - line 316: ' placement of punctuation. You''ll get used to it with a little practice. In' - line 317: ' the bottom left of the editor you will find the console section. Here, you' - line 318: ' can find messages from the editor with details about any errors it' - line 320: ' your-first-sketch12' - line 321: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the' - line 322: ' last example to try this' - line 323: ' your-first-sketch13' - line 324: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,' - line 325: ' and then starts drawing white circles at the position of the mouse. When a' - line 326: ' mouse button is pressed, the circle color changes to black. Run the code,' - line 327: ' move the mouse, and click to experience it.' - line 328: ' your-first-sketch14' - line 329: ' first-sketch-heading1' - line 333: ' learn1' - line 334: ' learn2' - line 335: ' learn3' - line 336: ' learn4' - line 337: ' learn5' - line 338: ' learn6' - line 339: ' learn7' - line 341: ' learn9' - line 342: ' learn10' - line 343: ' reference1' - line 344: ' reference2' - line 345: ' reference3' - line 346: ' learn11' - line 347: ' learn12' - line 348: ' processing-transition1' - line 350: ' processing-transition3' - line 351: ' processing-transition4' - line 352: ' book1' - line 353: ' Parts of this tutorial were adapted from the book, Getting Started with' - line 354: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.' - line 355: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019' - line 356: ' Contributors Conference.' - line 44: Examples - line 57: tagline2 - line 146: ' copyright-title' - line 231: ' get-started-title' - line 240: ' . If you would like to work on the the desktop version of p5.js you can' - line 258: ' download7' - line 281: ' file manager or type' - line 54: footer4 - line 110: ' We are a community of, and in solidarity with, people from every gender' - line 239: ' get-started6' - line 259: ' environment-title' - line 274: ' folder directly below.' - line 233: ' This page walks you through setting up a p5.js project and making your first' - line 234: ' sketch.' - line 244: ' download-title' - line 245: ' hosted-title' - line 50: footerxh1 - line 98: ' p1x1' - line 99: ' p5.js is a JavaScript library for creative coding, with a focus on making' - line 100: ' coding accessible and inclusive for artists, designers, educators,' - line 109: ' p2x1' - line 129: ' p3xp6' - line 148: ' The p5.js library is free software; you can redistribute it and/or modify it' - line 46: Community - line 133: ' p4xp3' - line 134: ' p4xp4' - line 141: ' project-a-2-5-phuong' - line 144: ' project-a-2-7-phuong' - line 64: ' color-p3x3' - line 70: ' color-rgb-p1x1' - line 87: ' color-custom-ranges-p2x1' - line 24: footer1 - line 77: ' color-rgb-p2x1' - line 82: ' color-transparency-p2x1' - line 139: ' project-a-2-7-phuong' - line 76: ' color-transparency-p1x1' - line 63: ' hosted-title' - line 75: ' download9' - line 140: ' learn5' - line 142: ' learn7' - line 143: ' learn8' - line 145: ' learn10' - line 159: ' processing-transition1' - line 160: ' processing-transition2' - line 161: ' processing-transition3' - line 357: ' link-2-chung' - line 359: ' project-a-1-1-chung' - line 360: ' project-a-1-2-chung' - line 361: ' project-a-1-3-chung' - line 362: ' project-a-2-1-chung' - line 364: ' project-a-2-2-chung' - line 365: ' project-a-3-1-chung' - line 79: ' environment1' - line 88: ' environment8' - line 173: ' complete-library-intro1' - line 182: ' learn3' - line 191: ' writing-a-tutorial-embedding-7' - line 197: ' writing-a-tutorial-iframe-1' - line 204: ' writing-a-tutorial-iframe-7' - line 213: ' color-description1' - line 222: ' coordinate-system-description3' - line 69: ' download5' - line 74: ' download8' - line 78: ' environment1' - line 157: ' learn11' - line 172: ' complete-library-intro1' - line 181: ' learn3' - line 190: ' writing-a-tutorial-embedding-7' - line 196: ' writing-a-tutorial-iframe-1' - line 203: ' writing-a-tutorial-iframe-7' - line 212: ' color-description1' - line 221: ' coordinate-system-description3' - line 230: ' coordinate-system-simple-shapes-p1x1' - line 66: ' sketch_credits' - line 67: ' sketch_info' - line 22: footer1 - line 23: footer2 - line 65: ' color-rgb-p1x1' - line 72: ' color-rgb-p2x1' - line 81: ' color-transparency-p1x1' - line 90: ' color-custom-ranges-p4x1' - line 153: ' project-a-4-7-casey-louise' - line 33: Skip-To-Content - line 47: Contribute - line 48: Forum - line 49: Showcase - line 51: footer1 - line 52: footer2 - line 53: footer3 - line 58: tagline3 - line 101: ' beginners, and anyone else! p5.js is free and open-source because we believe' - line 106: ' think of your whole browser page as your sketch, including HTML5 objects for' - line 107: ' text, input, video, webcam, and sound.' - line 108: ' p2xh2' - line 130: ' p4xh2' - line 131: ' p4xp1' - line 132: ' p4xp2' - line 135: ' p4xp5' - line 147: ' copyright1' - line 149: ' under the terms of the' - line 150: ' copyright2' - line 151: ' copyright3' - line 152: ' copyright4' - line 232: ' get-started1' - line 235: ' get-started2' - line 236: ' get-started3' - line 237: ' get-started4' - line 238: ' get-started5' - line 241: ' scroll down to' - line 242: ' get-started7' - line 246: ' download1' - line 247: ' download2' - line 248: ' download3' - line 249: ' download4' - line 250: ' If you look in index.html, you''ll notice that it links to the file p5.js. If' - line 252: ' loading), change the link to p5.min.js.' - line 253: ' download5' - line 254: ' Alternatively, you can link to a p5.js file hosted online. All versions of' - line 255: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history' - line 257: ' download6' - line 260: ' environment1' - line 262: ' environment2' - line 263: ' environment3' - line 264: ' environment4' - line 278: ' environment10' - line 280: ' Open the index.html file in your browser by double clicking on it in your' - line 750: ' other.' - line 751: ' p5-screen-reader-title' - line 752: ' p5-screen-reader' - line 957: ' with a bit of blue," you have to provide an exact amount. As with grayscale,' - line 958: ' the individual color elements are expressed as ranges from 0 (none of that' - line 959: ' color) to 255 (as much as possible), and they are listed in the order R, G,' - line 960: ' and B. You will get the hang of RGB color mixing through experimentation,' - line 961: ' but next we will cover some code using some common colors.' - line 962: ' color-transparency-title' - line 963: ' color-transparency-p1x1' - line 964: ' In addition to the red, green, and blue components of each color, there is' - line 965: ' an additional optional fourth component, referred to as the color''s "alpha".' - line 966: ' Alpha means transparency and is particularly useful when you want to draw' - line 967: ' elements that appear partially see-through on top of one another. The alpha' - line 968: ' values for an image are sometimes referred to collectively as the "alpha' - line 969: ' channel" of an image.' - line 970: ' color-transparency-p2x1' - line 971: ' It is important to realize that pixels are not literally transparent, this' - line 972: ' is simply a convenient illusion that is accomplished by blending colors.' - line 973: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of' - line 974: ' one to a percentage of another, creating the optical perception of blending.' - line 975: ' (If you are interested in programming "rose-colored" glasses, this is where' - line 976: ' you would begin.)' - line 977: ' color-transparency-p3x1' - line 978: ' Alpha values also range from 0 to 255, with 0 being completely transparent' - line 979: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).' - line 981: ' color-custom-ranges-p1x1' - line 982: ' RGB color with ranges of 0 to 255 is not the only way you can handle color' - line 983: ' in p5.js, in fact, it allows us to think about color any way we like. For' - line 984: ' example, you might prefer to think of color as ranging from 0 to 100 (like a' - line 985: ' percentage). You can do this by specifying a custom ' - line 986: ' color-custom-ranges-p2x1' - line 987: ' The above function says' - line 988: ' green, and blue. The range of RGB values will be from 0 to 100."' - line 989: ' color-custom-ranges-p3x1' - line 990: ' Although it is rarely convenient to do so, you can also have different' - line 991: ' ranges for each color component' - line 992: ' color-custom-ranges-p4x1' - line 993: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue' - line 994: ' from 0 to 10, and alpha from 0 to 255."' - line 995: ' color-custom-ranges-p5x1' - line 996: ' Finally, while you will likely only need RGB color for all of your' - line 997: ' programming needs, you can also specify colors in the HSB (hue, saturation,' - line 998: ' and brightness) mode. Without getting into too much detail, HSB color works' - line 999: ' as follows' - line 1000: ' color-custom-ranges-li1x1' - line 1001: ' color-custom-ranges-li1x2' - line 1002: ' color-custom-ranges-li2x1' - line 1003: ' color-custom-ranges-li2x2' - line 1004: ' color-custom-ranges-li3x1' - line 1005: ' color-custom-ranges-li3x2' - line 1006: ' color-custom-ranges-p6x1' - line 1007: ' color-custom-ranges-p6x2' - line 1008: ' coordinate-system-description1' - line 1009: ' coordinate-system-description2' - line 1010: ' coordinate-system-description3' - line 1011: ' coordinate-system-description4' - line 1012: ' coordinate-system-description5' - line 1013: ' coordinate-system-description-title' - line 1014: ' coordinate-system-description-p1x1' - line 1015: ' Before we begin programming with p5, we must first channel our eighth grade' - line 1016: ' selves, pull out a piece of graph paper, and draw a line. The shortest' - line 1017: ' distance between two points is a good old fashioned line, and this is where' - line 1018: ' we begin, with two points on that graph paper.' - line 1019: ' coordinate-system-description-p2x1' - line 1020: ' The above figure shows a line between point A (1,0) and point B (4,5). If' - line 1021: ' you wanted to direct a friend of yours to draw that same line, you would' - line 1022: ' give them a shout and say "draw a line from the point one-zero to the point' - line 1023: ' four-five, please." Well, for the moment, imagine your friend was a computer' - line 1024: ' and you wanted to instruct this digital pal to display that same line on its' - line 1025: ' screen. The same command applies (only this time you can skip the' - line 1026: ' pleasantries and you will be required to employ a precise formatting). Here,' - line 1027: ' the instruction will look like this' - line 1028: ' coordinate-system-description-p3x1' - line 1029: ' Even without having studied the syntax of writing code, the above statement' - line 1030: ' should make a fair amount of sense. We are providing a command (which we' - line 1031: ' will refer to as a "function") for the machine to follow entitled "line." In' - line 1032: ' addition, we are specifying some arguments for how that line should be' - line 1033: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of' - line 1034: ' code as a sentence, the function is a verb and the arguments are the objects' - line 1035: ' of the sentence. The code sentence also ends with a semicolon instead of a' - line 1036: ' period.' - line 1037: ' coordinate-system-description-p4x1' - line 1038: ' The key here is to realize that the computer screen is nothing more than a' - line 1039: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two' - line 1040: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the' - line 1041: ' location of a point in space. And it is our job to specify what shapes and' - line 1042: ' colors should appear at these pixel coordinates.' - line 1043: ' coordinate-system-description-p5x1' - line 1044: ' Nevertheless, there is a catch here. The graph paper from eighth grade' - line 1045: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis' - line 1046: ' pointing up and the x-axis pointing to the right (in the positive direction,' - line 1047: ' negative down and to the left). The coordinate system for pixels in a' - line 1048: ' computer window, however, is reversed along the y-axis. (0,0) can be found' - line 1049: ' at the top left with the positive direction to the right horizontally and' - line 1050: ' down vertically.' - line 1051: ' coordinate-system-simple-shapes-title' - line 1052: ' coordinate-system-simple-shapes-p1x1' - line 1053: ' The vast majority of p5 programming examples are visual in nature. These' - line 1054: ' examples, at their core, involve drawing shapes and setting pixels. Let''s' - line 1055: ' begin by looking at four primitive shapes.' - line 1056: ' coordinate-system-simple-shapes-p2x1' - line 1057: ' For each shape, we will ask ourselves what information is required to' - line 1058: ' specify the location and size (and later color) of that shape and learn how' - line 1059: ' p5 expects to receive that information. In each of the diagrams below, we''ll' - line 1060: ' assume a window with a width of 100 pixels and height of 100 pixels.' - line 1061: ' coordinate-system-simple-shapes-p3x1' - line 1062: ' coordinate-system-simple-shapes-p3x2' - line 1063: ' coordinate-system-simple-shapes-p4x1' - line 1064: ' coordinate-system-simple-shapes-p4x2' - line 1065: ' coordinate-system-simple-shapes-p5x1' - line 1066: ' coordinate-system-simple-shapes-p5x2' - line 1067: ' , things become a bit more complicated. In p5, a rectangle is specified by' - line 1068: ' the coordinate for the top left corner of the rectangle, as well as its' - line 1069: ' width and height.' - line 1070: ' coordinate-system-simple-shapes-p6x1' - line 1071: ' A second way to draw a rectangle involves specifying the centerpoint, along' - line 1072: ' with width and height. If we prefer this method, we first indicate that we' - line 1073: ' want to use the ' - line 1074: ' coordinate-system-simple-shapes-p6x2' - line 1075: ' coordinate-system-simple-shapes-p7x1' - line 1076: ' Finally, we can also draw a rectangle with two points (the top left corner' - line 1077: ' and the bottom right corner). The mode here is ' - line 1078: ' coordinate-system-simple-shapes-p7x2' - line 1079: ' coordinate-system-simple-shapes-p8x1' - line 1080: ' coordinate-system-simple-shapes-p8x2' - line 1081: ' coordinate-system-simple-shapes-p8x3' - line 1082: ' coordinate-system-simple-shapes-p8x4' - line 1083: ' coordinate-system-simple-shapes-p8x5' - line 1084: ' coordinate-system-simple-shapes-p8x6' - line 1085: ' coordinate-system-simple-shapes-p9x1' - line 1086: ' Now let''s look at what some code with shapes in more complete form, with' - line 1087: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function' - line 1088: ' to specify the width and height of the canvas.' - line 1089: ' teach-desc' - line 1090: test-tutorial - line 1147: ' Libraries' - line 1148: ' core-libraries' - line 1149: ' community-libraries' - line 1180: ' p5.experience' - line 1181: ' Extensive library for p5.js that adds additional event-listening' - line 1182: ' functionality for creating canvas-based web applications.' - line 1183: ' p5.func' - line 1184: ' p5.func is a p5 extension that provides new objects and utilities for' - line 1185: ' function generation in the time, frequency, and spatial domains.' - line 1186: ' p5.geolocation' - line 1187: ' p5.geolocation provides techniques for acquiring, watching, calculating, and' - line 1188: ' geofencing user locations for p5.js.' - line 1189: ' p5.gibber' - line 1190: ' grafica.js' - line 1191: ' grafica.js lets you add simple but highly configurable 2D plots to your' - line 1192: ' p5.js sketches.' - line 1193: ' p5.gui' - line 1194: ' p5.localmessage' - line 1195: ' p5.localmessage provides a simple interface to send messages locally from' - line 1196: ' one sketch to another for easy multi-window sketching!' - line 1197: ' marching' - line 1198: ' mappa' - line 1199: ' Mappa provides a set of tools for working with static maps, tile maps, and' - line 1200: ' geo-data. Useful when building geolocation-based visual representations.' - line 1201: ' ml5.js' - line 1202: ' ml5.js builds on Tensorflow.js and provides friendly access to machine' - line 1203: ' learning algorithms and models in the browser.' - line 1204: ' p5.play' - line 1205: ' p5.play provides sprites, animations, input and collision functions for' - line 1206: ' games and gamelike applications.' - line 1207: ' p5.particle' - line 1208: ' The Particle and Fountain objects can be used to create data-driven effects' - line 1209: ' that are defined through user structures or JSON input and user-draw' - line 1210: ' functions.' - line 1211: ' p5.Riso' - line 1212: ' p5.Riso is a library for generating files suitable for Risograph printing.' - line 1213: ' It helps turn your sketches into multi-color prints.' - line 1214: ' rita.js' - line 1215: ' RiTa.js provides a set of natural language processing objects for generative' - line 1216: ' literature.' - line 1217: ' Rotating knobs' - line 1218: ' p5.scenemanager' - line 1219: ' p5.SceneManager helps you create sketches with multiple states / scenes.' - line 1220: ' Each scene is a like a sketch within the main sketch.' - line 1221: ' p5.screenPosition' - line 1222: ' p5.scribble' - line 1223: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based' - line 1224: ' on a port of the original Processing library' - line 1225: ' p5.serial' - line 1226: ' p5.serial enables serial communication between devices that support serial' - line 1227: ' (RS-232) and p5 sketches running in the browser.' - line 1228: ' Shape5' - line 1229: ' Shape5 is a 2D primative library for elementary students who are learning to' - line 1230: ' code for the first time.' - line 1231: ' p5.shape.js' - line 1232: ' p5.speech' - line 1233: ' p5.speech provides simple, clear access to the Web Speech and Speech' - line 1234: ' Recognition APIs, allowing for the easy creation of sketches that can talk' - line 1235: ' and listen.' - line 1236: ' p5.start2d.js' - line 1237: ' p5.tiledmap' - line 1238: ' p5.tiledmap provides drawing and helper functions to include maps in your' - line 1239: ' sketches.' - line 1240: ' p5.touchgui' - line 1241: ' tramontana' - line 1242: ' Tramontana is a platform for easily use many devices (iOS, Android,' - line 1243: ' tramontana Board, ...) to create interactive environments, interactive' - line 1244: ' spaces or just prototype experiences at scale and in space.' - line 1245: ' vida' - line 1246: ' Vida is a simple library that adds camera (or video) based motion detection' - line 1247: ' and blob tracking functionality to p5js.' - line 1248: ' p5.voronoi' - line 1249: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in' - line 1250: ' your p5.js sketches.' - line 1251: ' p5.3D' - line 1252: ' using-a-library-title' - line 1253: ' using-a-library1' - line 1254: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js' - line 1255: ' core functionality. There are two categories of libraries. Core libraries (' - line 1256: ' using-a-library3' - line 1257: ' ) are part of the p5.js distribution, while contributed libraries are' - line 1258: ' developed, owned, and maintained by members of the p5.js community.' - line 1259: ' using-a-library4' - line 1260: ' To include a library in your sketch, link it into your HTML file, after you' - line 1261: ' have linked in p5.js. An example HTML file might look like this' - line 1262: ' create-your-own-title' - line 1263: ' create-your-own1' - line 1264: ' create-your-own2' - line 1265: ' create-your-own3' - line 1266: ' create-your-own4' - line 1267: ' If you have created a library and would like to have it included on this' - line 1268: ' page, submit this form!' - line 1420: ' community-title' - line 1421: ' community-statement-title' - line 1422: ' community-statement1' - line 1423: ' p5.js is a community interested in exploring the creation of art and design' - line 1424: ' with technology.' - line 1425: ' community-statement2' - line 1426: ' We are a community of, and in solidarity with, people from every gender' - line 1427: ' identity and expression, sexual orientation, race, ethnicity, language,' - line 1428: ' neuro-type, size, ability, class, religion, culture, subculture, political' - line 1429: ' opinion, age, skill level, occupation, and background. We acknowledge that' - line 1430: ' not everyone has the time, financial means, or capacity to actively' - line 1431: ' participate, but we recognize and encourage involvement of all kinds. We' - line 1432: ' facilitate and foster access and empowerment. We are all learners.' - line 1433: ' community-statement3' - line 1434: ' We like these hashtags' - line 1435: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore' - line 1436: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of' - line 1437: ' course).' - line 1438: ' in-practice-title' - line 1439: ' in-practice1' - line 1440: ' in-practice2' - line 1441: ' We insist on actively engaging with requests for feedback regardless of' - line 1442: ' their complexity.' - line 1443: ' in-practice3' - line 1444: ' We welcome newcomers and prioritize the education of others. We strive to' - line 1445: ' approach all tasks with the enthusiasm of a newcomer. Because we believe' - line 1446: ' that newcomers are just as valuable in this effort as experts.' - line 1447: ' in-practice4' - line 1448: ' We consistently make the effort to actively recognize and validate multiple' - line 1449: ' types of contributions.' - line 1450: ' in-practice5' - line 1451: ' in-times-conflict-title' - line 1452: ' in-times-conflict1' - line 1453: ' in-times-conflict2' - line 1454: ' in-times-conflict3' - line 1455: ' We admit when we''re wrong, apologize, and accept responsibility for our' - line 1456: ' actions.' - line 1457: ' in-times-conflict4' - line 1458: ' in-times-conflict5' - line 1459: ' in-times-conflict6' - line 1460: ' in-times-conflict7' - line 1461: ' in-the-future-title' - line 1462: ' in-the-future1' - line 1463: ' notes-title' - line 1464: ' notes1' - line 1465: ' notes2' - line 1466: ' notes3' - line 1467: ' notes4' - line 1468: ' notes5' - line 1469: ' contribute-title' - line 1470: ' contribute1' - line 1471: ' Our community is always looking for enthusiasts to help in all different' - line 1472: ' ways.' - line 1473: ' develop-title' - line 1474: ' develop1' - line 1475: ' develop2' - line 1476: ' develop3' - line 1477: ' develop4' - line 1478: ' develop5' - line 1479: ' document-title' - line 1480: ' document1' - line 1481: ' document2' - line 1482: ' document3' - line 1483: ' document4' - line 1484: ' document5' - line 1485: ' teach-title' - line 1486: ' teach1' - line 1487: ' create-title' - line 1488: ' create1' - line 1489: ' create2' - line 1490: ' create3' - line 1491: ' donate-title' - line 1492: ' donate1' - line 1493: ' donate2' - line 1494: ' donate3' - line 1495: ' contributors-conference-title' - line 1496: ' contributors-conference1' - line 1497: ' While most work happens online, we also convene IRL. We''ve had two' - line 1498: ' contributors conferences held at the' - line 1499: ' contributors-conference2' - line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,' - line 1501: ' developers, educators, and got together to advance the p5.js project.' - line 1502: ' participants-title' - line 1503: ' support-title' - line 1504: ' support1' - line 1505: ' support2' - line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,' - line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of' - line 1508: ' arts, science, technology, and culture.' - line 1509: ' support3' - line 1510: ' support4' - line 1511: ' support5' - line 1512: ' support6' - line 1513: ' mailing-list-title' - line 1514: ' mailing-list-1' - line 1515: ' Enter your email address to receive occasional updates from the Processing' - line 1516: ' Foundation.' - line 1517: ' 2015contributors-conference-title' - line 1518: ' 2015contributors-conference-date' - line 1519: ' 2015contributors-conference1' - line 1520: ' 2015contributors-conference2' - line 1521: ' , advancing the code, documentation, and community outreach tools of the' - line 1522: ' p5.js programming environment. Participants came from as far away as Hong' - line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working' - line 1524: ' professionals in the fields of creative technology, interaction design, and' - line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and' - line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.' - line 1527: ' 2015contributors-conference3' - line 1528: ' 2015contributors-conference-diversity-title' - line 1529: ' 2015contributors-conference-diversity1' - line 1530: ' Alongside technical development, one of the main focuses of this conference' - line 1531: ' was outreach, community, and diversity. The conference began with a panel' - line 1532: ' 2015contributors-conference-diversity2' - line 1533: ' Diversity' - line 1534: ' the Internet' - line 1535: ' 2015contributors-conference-diversity3' - line 1537: ' 2015contributors-conference-diversity5' - line 1538: ' 2015contributors-conference-diversity6' - line 1539: ' 2015contributors-conference-diversity7' - line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie' - line 1541: ' Mellon University. Speakers included' - line 1542: ' 2015contributors-conference-diversity8' - line 1543: ' 2015contributors-conference-diversity9' - line 1545: ' 2015cc_2' - line 1546: ' 2015cc_3' - line 1547: ' 2015cc_4' - line 1548: ' Woman expressively speaks into a microphone while two male collaborators' - line 1549: ' look on' - line 1550: ' 2015cc_5' - line 1551: ' 2015cc_6' - line 1553: ' Participants sit in a circle around a white board with sticky notes on it' - line 1554: ' while a female student speaks into a microphone' - line 1555: ' 2015cc_8' - line 1556: ' Participants sit around a table looking at each others laptops and compare' - line 1557: ' code' - line 1558: ' 2015cc_9' - line 1559: ' 2015cc_10' - line 1561: ' group of participants with laptops look at her powerpoint in a classroom' - line 1562: ' 2015cc_11' - line 1563: ' Woman speaks at a podium in an auditorium while three participants sit on' - line 1564: ' the stage and another three are skyping in on the stage screen' - line 1565: ' 2015cc_12' - line 1566: ' 2015cc_13' - line 1567: ' 2015cc_14' - line 1569: ' 2019contributors-conference-title' - line 1570: ' 2019contributors-conference-date' - line 1571: ' 2019contributors-conference1' - line 1572: ' 2019contributors-conference2' - line 1573: ' , advancing the code, documentation, and community outreach tools and' - line 1574: ' exploring the current landscape of the p5.js programming environment.' - line 1575: ' Comprising a diverse range of participants within the fields of creative' - line 1577: ' at fostering dialogue through a multidisciplinary lens. Working groups' - line 1578: ' focused on several topic areas' - line 1579: ' Landscape of Creative Tech; and Internationalization.' - line 1580: ' 2019contributors-conference3' - line 1581: ' 2019contributors-conference4' - line 1582: ' outputs' - line 1583: ' output1' - line 1585: ' octagon girds for p5.js. Created by Aren Davey.' - line 1586: ' output2' - line 1587: ' . A set of template files for building a multi-device, multiplayer game' - line 1588: ' where multiple clients can connect to a specified host page. Created by L05.' - line 1589: ' output3' - line 1590: ' output3-1' - line 1591: ' , testing early implementations of softCompile, OSC interfacing and added' - line 1592: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj' - line 1593: ' environment! Created by Ted Davis.' - line 1594: ' output4' - line 1595: ' A panel on Blackness and Gender in Virtual Space led by American Artist,' - line 1596: ' with shawné michaelain holloway and LaJuné McMillian.' - line 1597: ' output5' - line 1598: ' output6' - line 1599: ' output6-1' - line 1600: ' output6-2' - line 1601: ' output7' - line 1602: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and' - line 1603: ' Jon Chambers.' - line 1604: ' output8' - line 1605: ' output8-1' - line 1606: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian' - line 1607: ' Ye, Dorothy R. Santos, and Yasheng She.' - line 1608: ' output9' - line 1609: ' output9-1' - line 1610: ' output10' - line 1611: ' An overhaul of the p5.js website for accessibility. Including updates for' - line 1612: ' screen reader accessibility, and improvements to the home, download, getting' - line 1613: ' started, and reference pages. With contributions from Claire Kearney-Volpe,' - line 1614: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren' - line 1615: ' McCarthy, and Evelyn Masso.' - line 1616: ' output11' - line 1617: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,' - line 1618: ' Sona Lee, Ted Davis, and Carlos Garcia.' - line 1619: ' output12' - line 1620: ' output13' - line 1621: ' A design of the p5.js library system for the p5 Editor. Created by Cassie' - line 1622: ' Tarakajian and Luca Damasco.' - line 1623: ' output14' - line 1624: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and' - line 1625: ' Lauren Valley.' - line 1626: ' output15' - line 1627: ' 2019cc_1' - line 1628: ' 2019cc_2' - line 1629: ' 2019cc_3' - line 1630: ' 2019cc_4' - line 1631: ' 2019cc_5' - line 1632: ' 2019cc_6' - line 1633: ' 2019cc_7' - line 1634: ' 2019cc_8' - line 1635: ' 2019cc_9' - line 1636: ' Participant speaks at a podium in front of projected text about the problem' - line 1637: ' with anonymyzing data' - line 1638: ' 2019cc_10' - line 1639: ' Person with a microphone speaking to fellow participants in front of text' - line 1640: ' that reads p5.js will not add any new features except those that increase' - line 1641: ' access' - line 1758: ' book-4-order-b' - line 1759: ' book-5-title' - line 1760: ' book-5-authors' - line 1762: ' book-5-pages' - line 1763: ' book-5-type' - line 1764: ' book-5-description' - line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the' - line 1767: ' will acquire from this book are highly transferable to a myriad of' - line 1768: ' industries and can be used towards building web applications, programmable' - line 1769: ' robots, or generative art.' - line 1771: ' book-5-order-b' - line 1800: ' Examples' - line 1801: ' back-examples' - line 1802: ' Structure' - line 1815: ' Instance_Mode' - line 1816: ' Dom' - line 1817: ' Drawing' - line 1818: ' Transform' - line 1821: ' Input' - line 1822: ' Advanced_Data' - line 1823: ' Sound' - line 1825: ' Hello_P5' - line 1829: ' Reference' - line 2005: ' showcase-title' - line 2006: ' showcase-intro1' - line 2007: ' showcase-intro2' - line 2008: ' showcase-intro3' - line 2017: ' showcase-featuring' - line 2018: ' project-tag-art' - line 2019: ' project-tag-design' - line 2020: ' project-tag-code' - line 2022: ' project-tag-documentation' - line 2023: ' project-tag-game' - line 2024: ' project-tag-library' - line 2025: ' project-tag-organizing' - line 2026: ' project-tag-tool' - line 2027: ' project-tag-tutorial' - line 2028: ' project-roni' - line 2029: ' credit-roni' - line 2030: ' description-roni' - line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a' - line 2032: ' plotter and pens.' - line 2033: ' project-phuong' - line 2034: ' credit-phuong' - line 2045: ' credit-qianqian' - line 2046: ' description-qianqian' - line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,' - line 2048: ' and technology, including p5.js tutorials for beginners. Available on' - line 2049: ' YouTube, Instagram, Bilibili, and TikTok.' - line 2050: ' project-casey-louise' - line 2053: ' project-moon-xin' - line 2054: ' credit-moon-xin' - line 2055: ' description-moon-xin' - line 2056: ' Browser-based moving posters that use graphical systems, transformation' - line 2057: ' methods, and p5.js to address the connotations of a word less than 8' - line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative' - line 2059: ' Systems) at the University of Georgia.' - line 2060: ' created-by' - line 2061: ' pronouns-female' - line 2062: ' creator-from-roni-cantor' - line 2071: ' some more traditional forms of art—while still coding and playing with' - line 2072: ' robots.' - line 2073: ' project-a-1-2-roni-cantor' - line 2074: ' project-a-1-3-roni-cantor' - line 2075: ' project-a-1-4-roni-cantor' - line 2076: ' project-q-2' - line 2077: ' project-a-2-1-roni-cantor' - line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear' - line 2079: ' interpolation) formulas and display the visuals in the' - line 2080: ' project-a-2-2-roni-cantor' - line 2086: ' this information to the plotter with a program called' - line 2087: ' project-a-2-5-roni-cantor' - line 2088: ' project-q-3' - line 2090: ' project-q-4' - line 2091: ' Did you face any challenges working on this project? If so, how did you' - line 2092: ' overcome them?' - line 2093: ' project-a-4-roni-cantor' - line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really' - line 2104: ' project-a-1-1-qianqian' - line 2105: ' project-a-1-2-qianqian' - line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free' - line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with' - line 2108: ' different colors.' - line 2109: ' project-a-2-1-qianqian' - line 2110: ' This project started with an idea of teaching my mom, who lives in China and' - line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on' - line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why' - line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily' - line 2114: ' due to the lack of free creative coding education resources. Most of the' - line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js' - line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are' - line 2117: ' inaccessible in China because of internet censorship.' - line 2118: ' project-a-2-2-qianqian' - line 2119: ' project-a-2-3-qianqian' - line 2120: ' , but the more I watched coding tutorials online, the more I realized how' - line 2121: ' difficult it is to find other womxn and people of color teaching coding,' - line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to' - line 2123: ' creative coding.' - line 2124: ' project-a-2-4-qianqian' - line 2125: ' I am working on opening up the video channels to other Chinese creatives who' - line 2126: ' want to contribute to the educational resource together, like interviews and' - line 2127: ' guest tutorials. If you are interested in teaching/talking about creative' - line 2128: ' coding in Mandarin, HMU!' - line 2129: ' project-a-3-1-qianqian' - line 2130: ' project-a-3-2-qianqian' - line 2131: ' project-a-4-1-qianqian' - line 2132: ' Learning to code in a second language was difficult and the lack of' - line 2133: ' community made this process even harder. I hope to speak from my experience' - line 2134: ' as a beginner and someone who once felt like an outsider to the creative' - line 2135: ' coding and video tutorial world.' - line 2136: ' project-a-4-2-qianqian' - line 2137: ' I spend a lot of time researching the latest technology for my videos. In' - line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to' - line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get' - line 2140: ' started making instructional videos.' - line 2141: ' project-a-4-3-qianqian' - line 2142: ' Another issue I came across was my own fear of putting myself online. I' - line 2143: ' first had to get over my anxiety of making mistakes in the videos or' - line 2144: ' receiving negative comments online. Often womxn and people of color are' - line 2145: ' targets for online harassment. I’m hoping to help set an example for other' - line 2146: ' womxn and people of color that it’s ok to put yourselves online and' - line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will' - line 2148: ' be able to stop online harassment by creating strong diverse communities.' - line 2149: ' project-a-5-1-qianqian' - line 2150: ' project-a-5-2-qianqian' - line 2151: ' creator-from-phuong' - line 2152: ' project-a-1-1-phuong' - line 2153: ' link-1-phuong' - line 2154: ' link-2-phuong' - line 2155: ' link-3-phuong' - line 2156: ' project-a-1-2-phuong' - line 2157: ' project-a-1-3-phuong' - line 2158: ' I was taking a course at the School of Machines in Berlin this summer' - line 2159: ' called! "' - line 2160: ' project-a-1-4-phuong' - line 2161: ' project-a-2-1-phuong' - line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites' - line 2163: ' for Airi and the ghosts were drawn on an iPad app called' - line 2164: ' project-a-2-2-phuong' - line 2165: ' project-a-2-3-phuong' - line 2166: ' project-a-2-4-phuong' - line 2167: ' p5-sketch-by-chjno-phuong' - line 2168: ' project-a-2-5-phuong' - line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was' - line 2170: ' detected, the scrolling speed would change to make an illusion of Airi' - line 2171: ' flying up. When the user does not do anything, the scrolling speed is' - line 2172: ' negative, which makes it look like Airi is falling down.' - line 2173: ' project-a-2-6-phuong' - line 2174: ' project-a-2-7-phuong' - line 2175: ' project-a-3-1-phuong' - line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks' - line 2177: ' and classes with the' - line 2178: ' project-a-3-2-phuong' - line 2179: ' project-a-3-3-phuong' - line 2180: ' project-a-3-4-phuong' - line 2181: ' project-a-4-1-phuong' - line 2182: ' There were a lot of challenges simply because p5.js was something new to me.' - line 2183: ' I did not work much with JavaScript in general before. Reading documentation' - line 2184: ' and searching for similar examples helped a lot.' - line 2185: ' project-a-5-1-phuong' - line 2186: ' school-of-machines-phuong' - line 2187: ' project-a-5-2-phuong' - line 2188: ' ! They try hard to connect the most creative people in the world and they do' - line 2189: ' it well so far. ❤️' - line 2190: ' pronouns-male' - line 2191: ' creator-from-chung' - line 2192: ' link-1-casey-louise' - line 2193: ' link-2-casey-louise' - line 2194: ' link-1-chung' - line 2195: ' link-2-chung' - line 2196: ' link-3-chung' - line 2197: ' project-a-1-1-chung' - line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College' - line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)' - line 2200: ' and motion graphics.' - line 2201: ' project-a-1-2-chung' - line 2202: ' project-a-1-3-chung' - line 2203: ' project-a-2-1-chung' - line 2204: ' This summer, I gave myself a challenge of making typographic posters with' - line 2205: ' coding, and this is one of the posters I made. I didn’t know until very' - line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching' - line 2207: ' dan-shiffman-matterjs-tutorial' - line 2208: ' project-a-2-2-chung' - line 2209: ' project-a-3-1-chung' - line 2210: ' There are many things I love about p5.js such as the online community and' - line 2211: ' beginner friendliness. What I really like right now is the' - line 2212: ' project-a-3-2-chung' - line 2213: ' , with which I can not only work online for myself but also share URLs' - line 2214: ' quickly in the present mode. For this project in particular, I had to do a' - line 2215: ' lot of testing on my phone, and it was much easier and quicker than' - line 2216: ' committing to GitHub.' - line 2217: ' project-a-4-1-chung' - line 2218: ' project-a-4-2-chung' - line 2219: ' project-a-4-3-chung' - line 2220: ' project-a-5-1-chung' - line 2221: ' As mentioned above, if you want to render out frames and video files out of' - line 2222: ' p5.js sketches, check out my' - line 2223: ' project-a-5-2-chung' - line 2224: ' creator-from-casey-louise' - line 2225: ' project-a-1-1-casey-louise' - line 2226: ' Casey' - line 2227: ' interactive spaces, physical and digital.' - line 2228: ' project-a-1-2-casey-louise' - line 2229: ' Louise' - line 2230: ' interactive spaces based on sensor technologies.' - line 2231: ' project-a-1-3-casey-louise' - line 2232: ' Casey' - line 2233: ' I had been dabbling in' - line 2234: ' project-a-1-4-casey-louise' - line 2235: ' project-a-1-5-casey-louise' - line 2236: ' Louise' - line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for' - line 2238: ' me.' - line 2239: ' project-a-2-1-casey-louise' - line 2240: ' Casey' - line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open' - line 2242: ' source, storytelling, and learning resource projects at ITP called' - line 2243: ' project-a-2-2-casey-louise' - line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I' - line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource' - line 2246: ' for others to learn. When I told Louise about the project, she was' - line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been' - line 2248: ' great about making sure the project is a learning resource and not just a' - line 2249: ' collection of examples.' - line 2250: ' project-a-3-1-casey-louise' - line 2251: ' project-a-3-2-casey-louise' - line 2252: ' project-a-3-3-casey-louise' - line 2253: ' project-a-3-4-casey-louise' - line 2254: ' project-a-3-5-casey-louise' - line 2255: ' project-a-4-1-casey-louise' - line 2256: ' Casey' - line 2257: ' reaching out to amazing people, asking questions, and asking for permission' - line 2258: ' to use their examples in our project.' - line 2259: ' adam-ferris-repo-casey-louise' - line 2260: ' project-a-4-2-casey-louise' - line 2261: ' project-a-4-3-casey-louise' - line 2262: ' project-a-4-4-casey-louise' - line 2263: ' webgl-casey-louise' - line 2264: ' project-a-4-5-casey-louise' - line 2265: ' project-a-4-6-casey-louise' - line 2266: ' Louise' - line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam' - line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can' - line 2269: ' understand how to implement it, so it was as much a technical challenge as' - line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew' - line 2271: ' inspiration from the way the' - line 2272: ' openframeworks-book-casey-louise' - line 2273: ' project-a-4-7-casey-louise' - line 2274: ' project-a-5-1-casey-louise' - line 2275: ' project-a-5-2-casey-louise' - line 2276: ' pronouns-nonbinary' - line 2277: ' creator-from-moon' - line 2278: ' posters-by' - line 2279: ' project-a-1-1-moon' - line 2280: ' Moon' - line 2281: ' summer, I taught a graphic design course in the University of Georgia' - line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am' - line 2283: ' planning to teach and to study digital platforms at UGA.' - line 2284: ' project-a-1-2-moon' - line 2285: ' project-a-1-3-moon' - line 2286: ' project-a-1-4-moon' - line 2287: ' pcd-la-moon' - line 2288: ' project-a-1-5-moon' - line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent' - line 2290: ' teaching and learning experience.' - line 2291: ' project-a-2-1-moon' - line 2292: ' codetrain-moon' - line 2293: ' project-a-2-2-moon' - line 2294: ' p5-reference-moon' - line 2295: ' project-a-2-3-moon' - line 2296: ' project-a-3-1-moon' - line 2297: ' project-a-3-2-moon' - line 2298: ' project-a-3-3-moon' - line 2299: ' project-a-3-4-moon' - line 2300: ' . I was able to use and to teach this tool to visualize various ideas about' - line 2301: ' time in motion.' - line 2302: ' project-a-4-1-moon' - line 2303: ' It was challenging for me, a beginner, to understand the overall structure' - line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a' - line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I' - line 2306: ' understood the p5.js structure and code with strong constraints I set up. It' - line 2307: ' was an excellent teaching and learning experience.' - line 2308: ' project-a-5-1-moon' - line 2309: ' project-a-5-2-moon' - line 2310: teach - line 2311: ' teach-title2' - line 2312: ' teach-intro1' - line 2313: ' Every teaching has its own unique goals, messages, conditions, and' - line 2314: ' environments. ' - line 2315: ' teach-intro2' - line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to' - line 2317: ' better connect the p5.js learner and educator communities around the world. ' - line 2318: ' teach-intro3' - line 2319: ' teach-intro4' - line 2320: ' teach-heading' - line 2321: ' teach-search-filter' - line 2322: ' teach-filter1' - line 2323: ' teach-filter1-label1' - line 2324: ' teach-filter1-label2' - line 2325: ' teach-filter1-label3' - line 2326: ' teach-filter1-label4' - line 2327: ' teach-filter1-label5' - line 2328: ' teach-filter1-label6' - line 2329: ' teach-filter1-label7' - line 2330: ' teach-filter1-label8' - line 2331: ' teach-filter1-label9' - line 2332: ' teach-filter1-label10' - line 2333: ' teach-filter1-label11' - line 2334: ' teach-filter1-label12' - line 2335: ' teach-filter1-label13' - line 2336: ' teach-filter1-label14' - line 2337: ' teach-filter1-label15' - line 2338: ' teach-filter1-label16' - line 2339: ' teach-filter2' - line 2340: ' teach-filter2-label1' - line 2341: ' teach-filter2-label2' - line 2342: ' teach-filter2-label3' - line 2343: ' teach-filter2-label4' - line 2344: ' teach-filter2-label5' - line 2345: ' teach-filter2-label6' - line 2346: ' teach-filter2-label7' - line 2347: ' teach-filter3' - line 2348: ' teach-filter4' - line 2349: ' teach-filter4-label1' - line 2350: ' teach-filter4-label2' - line 2351: ' teach-filter4-label3' - line 2352: ' teach-case-subtitle1' - line 2353: ' teach-case-subtitle2' - line 2354: ' teach-case-subtitle3' - line 2355: ' teach-case-subtitle4' - line 2356: ' teach-case-subtitle5' - line 2357: ' teach-case1-title' - line 2358: ' teach-case1-lead-name' - line 2359: ' teach-case1-content1' - line 2360: ' teach-case1-content1-1' - line 2361: ' teach-case1-content2' - line 2362: ' teach-case1-content3' - line 2363: ' teach-case1-content4' - line 2364: ' To introduce a new public to programming through fun and compelling' - line 2365: ' examples. ' - line 2366: ' teach-case1-content5' - line 2367: ' Method' - line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web' - line 2369: ' editor. I was teaching using a video projector as well as a board.' - line 2370: ' teach-case1-content5-1' - line 2371: ' Materials' - line 2372: ' links available in ' - line 2373: ' teach-case2-title' - line 2374: ' Making The Thing that Makes the Thing' - line 2375: ' with p5.js' - line 2376: ' teach-case2-lead-name' - line 2377: ' teach-case2-content1' - line 2378: ' teach-case2-content1-1' - line 2379: ' teach-case2-content2' - line 2380: ' Our participants included art/design students & professionals, creative' - line 2381: ' coding enthusiasts. We had close to 50 participants.' - line 2382: ' teach-case2-content3' - line 2383: ' teach-case2-content4' - line 2384: ' To explore generative art & design and recreate some classical works' - line 2385: ' with p5.js. ' - line 2386: ' teach-case2-content5' - line 2387: ' teach-case2-content5-1' - line 2388: ' teach-case2-content5-2' - line 2389: ' teach-case2-content5-3' - line 2390: ' teach-case2-content5-4' - line 2391: ' teach-case2-content5-5' - line 2392: ' teach-case3-title' - line 2393: ' teach-case3-lead-name' - line 2394: ' teach-case3-speech' - line 2395: ' teach-case3-content1' - line 2396: ' teach-case3-content1-1' - line 2397: ' teach-case3-content2' - line 2398: ' Our participants included art/design students & professionals, creative' - line 2399: ' coding enthusiasts. We had close to 50 participants.' - line 2400: ' teach-case3-content3' - line 2401: ' teach-case3-content4' - line 2402: ' To build a teacher and student community around p5 for middle and high' - line 2403: ' school.' - line 2404: ' teach-case3-content5' - line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different' - line 2406: ' methods and materials. Most used some sort of slides or documentation, some' - line 2407: ' live coding using an editor, with work time for participant to remix.' - line 2408: ' teach-case3-content5-1' - line 2409: ' teach-case3-content5-2' - line 2410: ' teach-case3-content5-3' - line 2411: ' teach-case4-title' - line 2412: ' teach-case4-lead-name' - line 2413: ' teach-case4-speech' - line 2414: ' teach-case4-content1' - line 2415: ' teach-case4-content1-1' - line 2416: ' teach-case4-content2' - line 2417: ' I had around 16 students in the workshop, and a team including 3 people from' - line 2418: ' the PlusCode festival, and one person at the venue.' - line 2419: ' teach-case4-content3' - line 2420: ' teach-case4-content4' - line 2421: ' Introduction to beginners and artists of graphic web programming and open' - line 2422: ' source, using p5.js, in Spanish ' - line 2423: ' teach-case4-content5' - line 2424: ' teach-case4-content5-1' - line 2425: ' teach-case4-content5-2' - line 2426: ' teach-case4-content5-3' - line 2427: ' teach-case4-content5-4' - line 2428: ' teach-case5-title' - line 2429: ' teach-case5-lead-name' - line 2430: ' teach-case5-speech' - line 2431: ' My greatest source of uncertainty in developing the workshop was whether it' - line 2432: ' was trying to teach art to programmers or to teach programming to artists.' - line 2433: ' teach-case5-content1' - line 2434: ' teach-case5-content1-1' - line 2435: ' teach-case5-content1-2' - line 2436: ' teach-case5-content1-3' - line 2437: ' teach-case5-content2' - line 2438: ' teach-case5-content3' - line 2439: ' teach-case5-content4' - line 2440: ' To introduce p5.js to artists with little or no programming experience and' - line 2441: ' to suggest one way an analogue practice can migrate to a digital form.' - line 2442: ' teach-case5-content5' - line 2443: ' A printed workbook with activities that used the p5.js web editor to show' - line 2444: ' how translate an physical drawing into a digital drawing.' - line 2445: ' teach-case5-content5-1' - line 2446: ' teach-case5-content5-2' - line 2447: ' teach-case5-content5-3' - line 2448: ' teach-case6-title' - line 2449: ' teach-case6-lead-name' - line 2450: ' teach-case6-speech' - line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in' - line 2452: ' your everyday life!' - line 2453: ' teach-case6-content1' - line 2454: ' teach-case6-content1-1' - line 2455: ' teach-case6-content2' - line 2456: ' teach-case6-content3' - line 2457: ' teach-case6-content4' - line 2458: ' teach-case6-content5' - line 2459: ' teach-case6-content5-1' - line 2460: ' teach-case6-content5-2' - line 2461: ' teach-case6-content5-3' - line 2462: ' teach-case6-content5-4' - line 2463: ' teach-case6-content5-5' - line 2464: ' teach-case7-title' - line 2465: ' teach-case7-lead-name' - line 2466: ' teach-case7-speech' - line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you' - line 2468: ' to give it a try!' - line 2469: ' teach-case7-content1' - line 2470: ' teach-case7-content1-1' - line 2471: ' teach-case7-content2' - line 2472: ' teach-case7-content3' - line 2473: ' teach-case7-content4' - line 2474: ' teach-case7-content5' - line 2475: ' teach-case7-content5-1' - line 2476: ' teach-case8-title' - line 2477: ' teach-case8-lead-name' - line 2478: ' teach-case8-content1' - line 2479: ' teach-case8-content1-1' - line 2480: ' teach-case8-content2' - line 2481: ' teach-case8-content3' - line 2482: ' teach-case8-content4' - line 2483: ' teach-case8-content5' - line 2484: ' teach-case8-content5-1' - line 2485: ' teach-case8-content5-2' - line 2486: ' teach-case9-title' - line 2487: ' teach-case9-lead-name' - line 2488: ' teach-case9-content1' - line 2489: ' teach-case9-content1-1' - line 2490: ' teach-case9-content2' - line 2491: ' Students at Interactive Telecommunications Program, New York University. 16' - line 2492: ' people.' - line 2493: ' teach-case9-content3' - line 2494: ' teach-case9-content4' - line 2495: ' The goal of this class is to learn and understand common machine learning' - line 2496: ' techniques and apply them to generate creative outputs in the browser using' - line 2497: ' ml5.js and p5.js.' - line 2498: ' teach-case9-content5' - line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and' - line 2500: ' presentations. I used ' - line 2501: ' teach-case9-content5-1' - line 2502: ' teach-case9-content5-2' - line 2503: ' teach-case9-content5-3' - line 2504: ' teach-case10-title' - line 2505: ' teach-case10-lead-name' - line 2506: ' teach-case10-content1' - line 2507: ' teach-case10-content3' - line 2508: ' teach-case10-content4' - line 2509: ' Introduce learners (potentially with no coding experiences at all) to the' - line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding' - line 2511: ' and enable them to pursue own projects in a safe environment.' - line 2512: ' teach-case10-content5' - line 2513: ' p5.js source code (for the introductory project), JavaScript source code' - line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in' - line 2515: ' .pdf format, all hosted publicly on GitHub. ' - line 2516: ' teach-case10-content5-1' - line 2517: ' teach-case10-content5-2' - line 2518: ' teach-case11-title' - line 2519: ' teach-case11-lead-name' - line 2520: ' teach-case11-content1' - line 2521: ' teach-case11-content1-1' - line 2522: ' teach-case11-content2' - line 2523: ' teach-case11-content3' - line 2524: ' teach-case11-content4' - line 2525: ' Over the course of three workshops, we will draw and create patterns using' - line 2526: ' p5.js, an open-source graphical library; we will learn and apply' - line 2527: ' computational concepts to transform patterns and finally, we will bring a' - line 2528: ' weaving to life with electronic microcontrollers.' - line 2529: ' teach-case11-content5' - line 2530: ' teach-case11-content5-1' - line 2531: ' Materials' - line 2532: ' pattern weaving tool.' - line 2533: ' teach-case11-content5-2' - line 2534: ' teach-case11-content5-3' - line 2535: ' teach-case11-content5-4' - line 2536: ' teach-case11-content5-5' - line 2537: ' teach-case12-title' - line 2538: ' teach-case12-lead-name' - line 2539: ' teach-case12-speech' - line 2540: ' I''m working on a new series of coding class for Disabled students in South' - line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold' - line 2542: ' workshops in December 2020. The project is supported by the Open Society' - line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture' - line 2544: ' Center.' - line 2545: ' teach-case12-content1' - line 2546: ' teach-case12-content1-1' - line 2547: ' teach-case12-content2' - line 2548: ' teach-case12-content3' - line 2549: ' teach-case12-content4' - line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming' - line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.' - line 2552: ' teach-case12-content5' - line 2553: ' We used p5.js Web editor and code examples on the website. We also used' - line 2554: ' dice, playing cards and various paper tools to help students learn about' - line 2555: ' coding concepts.' - line 2556: ' teach-case12-content5-1' - line 2557: ' teach-case12-content5-2' - line 598: ' color-custom-ranges-li1x2' - line 601: ' color-custom-ranges-li2x2' - line 84: ' copyright1' - line 432: '' - line 434: '' - line 435: ' getting-started-in-webgl-coords-and-transform-heading3' - line 556: ' getting-started-in-webgl-coords-and-transform-glossary-term2-definition' - line 557: ' getting-started-in-webgl-coords-and-transform-glossary-term3-title' - line 558: ' getting-started-in-webgl-coords-and-transform-glossary-term3-definition' - line 560: ' getting-started-in-webgl-coords-and-transform-glossary-term4-definition' - line 561: ' getting-started-in-webgl-coords-and-transform-glossary-term5-title' - line 562: ' getting-started-in-webgl-coords-and-transform-glossary-term5-definition' - line 563: ' getting-started-in-webgl-coords-and-transform-glossary-term6-title' - line 564: ' getting-started-in-webgl-coords-and-transform-glossary-term6-definition' - line 570: '' - line 571: '' - line 572: '' - line 574: '' - line 575: '' - line 576: '' - line 577: '' - line 578: '' - line 579: '' - line 584: '' - line 585: '' - line 586: '' - line 595: ' to create geometry from scratch.' - line 607: ' There are other methods that offer greater control of the geometry. A shape can be defined point-by-point using' - line 615: '' - line 623: '' - line 624: ' getting-started-in-webgl-appearance-p0x1' - line 625: ' Creating in 3D is about more than just geometry. Cameras, lights, and materials are an' - line 632: ' getting-started-in-webgl-appearance-toc3' - line 633: ' getting-started-in-webgl-appearance-toc4' - line 634: ' getting-started-in-webgl-appearance-toc5' - line 635: '' - line 636: ' getting-started-in-webgl-appearance-heading1' - line 637: '' - line 638: ' getting-started-in-webgl-appearance-p1x1' - line 642: ' class="code" href="{{root}}/reference/#/p5/ortho">ortho().' - line 643: ' getting-started-in-webgl-appearance-p2x1' - line 644: ' A perspective camera skews objects so they appear to get smaller as they get further away, vanishing' - line 645: ' at a single point in the distance. This is in contrast to an orthographic camera, where the ' - line 646: ' geometry stays the same size as it gets further away and has no vanishing point. ' - line 647: ' getting-started-in-webgl-appearance-p3x1' - line 648: ' One setting that we can change with a perspective camera is the field-of-view, or FOV. This is the ' - line 649: ' term that is used to describe how much our camera can see, measured as an angle. In simple examples it might appear' - line 654: ' The near plane defines the minimum distance that geometry must be from the camera to be rendered. The far plane defines the maximum' - line 657: ' getting-started-in-webgl-appearance-p5x1' - line 658: ' Cameras can be moved by passing arguments to camera(), but constantly moving and adjusting the camera in code can be tedious, especially when you are experimenting with' - line 659: ' ideas. p5.js has a special camera method, orbitControl(), that can be used to zoom, pan,' - line 661: ' and position the camera using the mouse.' - line 662: ' getting-started-in-webgl-appearance-p6x1' - line 663: ' A scene can have multiple cameras, but only one camera can be active at a time. Sketches in p5.js will default' - line 664: ' to having a single perspective camera, but that can be changed by calling either perspective()' - line 667: ' position of the active camera and the position that the camera is looking at.' - line 668: '' - line 669: ' getting-started-in-webgl-appearance-heading2' - line 671: ' getting-started-in-webgl-appearance-p7x1' - line 672: ' Lighting is another essential part of a 3D scene. To be able to convey shape and depth in 3D is necessary to' - line 673: ' have a light source. p5.js has a few different types of light that can be used in a sketch.' - line 674: '' - line 675: ' getting-started-in-webgl-appearance-lighting-list1' - line 676: ' Ambient light makes everything display a little brighter, with no consideration for light position or' - line 677: ' direction.' - line 678: ' getting-started-in-webgl-appearance-lighting-list2' - line 679: ' A directional light shines from one direction, which can be especially useful for communicating depth in' - line 680: ' a scene, or when a scene needs a ''sun'' light. This method accepts a color and direction.' - line 681: ' getting-started-in-webgl-appearance-lighting-list3' - line 682: ' A point light emits from a single point in all directions, similar to something like a lightbulb. This' - line 683: ' method accepts a color and a position for the light.' - line 684: ' getting-started-in-webgl-appearance-lighting-list4' - line 685: ' A spot light emits from a single point in a single direction. This light is cast in a conical shape and' - line 686: ' it''s radius and concentration can be adjusted.' - line 687: ' getting-started-in-webgl-appearance-lighting-list5' - line 688: ' noLights() makes it so that all subsequent geometry is rendered without any lighting. This can be useful' - line 689: ' when you want flat, unshaded geometry.' - line 690: '' - line 693: ' simultaneously, allowing you to compose a scene with varied and complex lighting sources. ' - line 694: ' Try checking and unchecking the boxes in the following interactive example to see how lighting can' - line 695: ' be blended together. For each active light source there are visual indicators of their position or' - line 696: ' direction, just know that these are here for illustrative purposes!' - line 697: ' getting-started-in-webgl-appearance-p9x1' - line 698: ' In this next example, try commenting and uncommenting each light and experiment with their parameters.' - line 699: '' - line 700: ' getting-started-in-webgl-appearance-heading3' - line 701: '' - line 704: ' light interacts with the geometry and how color (or texture) gets applied to the object. Materials can be' - line 705: ' varied,' - line 706: ' making objects shiny, rough, or even textured with images.' - line 707: '' - line 708: ' getting-started-in-webgl-appearance-p11x1' - line 709: ' In this interactive example, try toggling each of the different materials to see how they' - line 710: ' affect the appearance of the geometry. You can move your mouse and see the effect that a point light has on the material.' - line 711: '' - line 712: ' getting-started-in-webgl-appearance-p12x1' - line 713: ' Try commenting and uncommenting the different lights in this example' - line 714: '' - line 715: ' getting-started-in-webgl-appearance-p13x1' - line 716: ' More custom materials can be achieved through using texture(). In short, these are images' - line 717: ' that can be mapped onto the surface of a geometry. These textures can be imported from an image and can even be' - line 718: ' generated within code using shaders. To map a texture to your geometry, use loadImage() ' - line 719: ' within preload(), then call texture() before drawing your shape.' - line 721: ' getting-started-in-webgl-appearance-info1x1' - line 722: ' While they are useful for changing the appearance of your geometry, shaders are a bit beyond the scope of this ' - line 723: ' tutorial, so make sure to check out the Introduction to Shaders ' - line 724: ' page when you are ready. ' - line 725: '' - line 726: ' getting-started-in-webgl-appearance-glossary-title' - line 727: ' getting-started-in-webgl-appearance-glossary-term1-title' - line 728: ' getting-started-in-webgl-appearance-glossary-term1-definition' - line 600: ' Objects can appear differently based on their material. Materials dictate how' - line 605: ' varied, making objects shiny, rough, or even textured with images.' - line 610: ' In this interactive example, try selecting each of the different materials to see how they' - line 611: ' affect the appearance of the geometry. You can move your mouse and see the effect that a directional light has on the material. ' - line 588: ' getting-started-in-webgl-custom-geometry-p6x1_' - line 589: ' , which p5.js uses internally for loadModel() but can also be used to' - line 616: ' change this using ' - line 617: ' getting-started-in-webgl-appearance-p1x2' - line 618: ' or ' -zh-Hans: - src/data/en.yml: - line 463: ' You can also use ' - line 484: ' getting-started-in-webgl-coords-and-transform-p16x3' - line 627: ' to have a zoom-like effect, but it also affects the way that shapes change size in the distance.' - line 630: ' Another important term when working with cameras in 3D is the camera frustum. The frustum of the camera is the' - line 691: ' only used in the vertex shader and are typically provided by p5.js. When you use p5.js methods like rect() or ' - line 381: ' This tutorial will introduce new concepts for creating 3D sketches with p5.js.' - line 390: ' getting-started-in-webgl-coords-and-transform-heading1' - line 409: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled ' - line 410: ' getting-started-in-webgl-coords-and-transform-info1x2' - line 411: ' Coordinate System and Shapes' - line 394: ' it allows us to do all kinds of math to help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 374: ' getting-started-in-webgl-glossary-title' - line 403: ' Let''s get started by setting up the p5.js to use WebGL, by passing WEBGL as a third parameter into createCanvas().' - line 424: ' and ' - line 442: ' reorients whatever is' - line 449: ' methods like ' - line 450: ' getting-started-in-webgl-coords-and-transform-p10x2' - line 451: ' and ' - line 452: ' getting-started-in-webgl-coords-and-transform-p10x3' - line 453: ' , which each allow for rotation around a specific axis.' - line 464: ' getting-started-in-webgl-coords-and-transform-info2x2' - line 465: ' , which allows' - line 466: ' you to specify which axis you''d like to rotate around using a vector as the second argument.' - line 471: ' changes the size of whatever is' - line 481: ' p5.js also has some methods that can control when transformations are applied' - line 482: ' getting-started-in-webgl-coords-and-transform-p16x2' - line 483: ' and' - line 485: ' . push() and push() method saves the current transformations and ' - line 493: ' style settings. Then, after performing new transformations, the pop() method is used to restore us to the the original transformations. The result is that ' - line 494: ' whatever transformations or styling changes that are made between push()' - line 495: ' and pop() are isolated to that portion of the code. If you don’t ' - line 496: ' use push() and' - line 511: ' These primitive shape methods are' - line 512: ' getting-started-in-webgl-coords-and-transform-p20x2' - line 513: ' and' - line 519: ' More information about custom geometry can be found in the ' - line 520: ' getting-started-in-webgl-coords-and-transform-p21x2' - line 521: ' Custom Geometry tutorial ' - line 539: ' getting-started-in-webgl-custom-geometry-info1x2' - line 540: ' tutorial.' - line 551: ' the ' - line 729: ' An image that is passed into a shader program.' - line 433: ' moves the origin in a' - line 422: ' p5.js has a few methods, ' - line 423: ' getting-started-in-webgl-coords-and-transform-p7x2' - line 425: ' getting-started-in-webgl-coords-and-transform-p7x3' - line 426: ' that we can use to position and orient objects' - line 552: ' getting-started-in-webgl-custom-geometry-p2x2' - line 553: ' method, which should be used within preload(). Then you can use the ' - line 554: ' getting-started-in-webgl-custom-geometry-p2x3' - line 555: ' function to draw the model, as demonstrated in the example below.' - line 559: ' might be a much different size when drawn in p5.js, or even be too small to be drawn at all. The' - line 565: ' can add color using materials or textures, which you can learn about in the ' - line 566: ' getting-started-in-webgl-custom-geometry-info2x2' - line 567: ' Styling and Appearance ' - line 568: ' getting-started-in-webgl-custom-geometry-info2x3' - line 569: ' tutorial.' - line 580: ' getting-started-in-webgl-custom-geometry-p5x2' - line 581: ' and ' - line 582: ' getting-started-in-webgl-custom-geometry-p5x3' - line 583: ' This following example shows how' - line 587: ' There is also a powerful class, ' - line 639: ' ideas. p5.js has a special camera method, ' - line 640: ' getting-started-in-webgl-appearance-p5x2' - line 641: ' , that can be used to zoom, pan,' - line 650: ' tutorial, so make sure to check out the ' - line 651: ' getting-started-in-webgl-appearance-info1x2' - line 652: ' Introduction to Shaders' - line 653: ' getting-started-in-webgl-appearance-info1x3' - line 666: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 670: ' A camera projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 692: ' vertex(), p5.js passes the vertex information to the shader automatically.' - line 702: ' This value can either be lowp, mediump, or highp, although you will likely' - line 703: ' use mediump, or highp in certain situations.' - line 720: ' A variable that is passed from your sketch to a shader.' - line 446: ' values. Use the sliders in the sketch above to change the translation of the box and see how it moves along' - line 447: ' each axis. The code below demonstrates simple translation on a box() shape.' - line 462: ' example above to see how rotation is performed on each axis. The code below shows each of these methods' - line 472: ' p5.js also has some methods that can control when transformations are applied' - line 475: ' class="code">pop() make it easier to move objects' - line 522: ' way that is similar to 2D drawing in p5.js. For example, methods like quad(), triangle(), rect(), and circle() each have extra parameters that make it possible to use them in 3D.' - line 531: ' In the following example, p5.Geometry is used to plot a grid of points for the geometry. Then, computeFaces() is used to give the geometry' - line 739: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 759: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 386: ' getting-started-in-webgl-other-tutorials-you-are-here' - line 573: ' position of the active camera and the position that the camera is looking at. Try it out in the sketch below.' - line 626: ' getting-started-in-webgl-appearance-heading4' - line 628: ' Being able to have control over the camera, lighting, and materials will give you much more flexibility' - line 629: ' to decide how your sketch looks, and it will open up the possibilities for you to introduce your own' - line 631: ' to shaders, which will make it possible to change the appearance of your sketch in even more interesting ways.' - line 655: ' first, requiring a different approach than the 2D drawing of p5.js. This document will outline the basics ' - line 656: ' of shader programming and point you towards other resources.' - line 406: '' - line 376: ' getting-started-in-webgl-other-tutorials-p' - line 377: ' This tutorial is part of a series about the basics of using WebGL in p5.js. Check out each of these other tutorials below.' - line 407: ' getting-started-in-webgl-coords-and-transform-p3x1' - line 384: '' - line 391: ' To get started in 3D there are some new concepts to learn and this document will introduce some ideas' - line 400: '' - line 401: ' getting-started-in-webgl-coords-and-transform-heading1' - line 404: ' it allows us to do all kinds of math that help arrange and display objects in 3D. p5.js makes it easier to work with WebGL' - line 408: ' Working in 3D introduces a lot of complexity, especially when a sketch involves motion, texture, lighting, and' - line 385: '' - line 393: ' getting-started-in-webgl-coords-and-transform-toc-title' - line 395: ' getting-started-in-webgl-coords-and-transform-toc2' - line 396: ' getting-started-in-webgl-coords-and-transform-toc3' - line 397: ' getting-started-in-webgl-coords-and-transform-toc4' - line 370: '' - line 375: ' getting-started-in-webgl-other-tutorials-title' - line 371: '' - line 373: '' - line 378: ' getting-started-in-webgl-other-tutorials-tut1' - line 379: ' getting-started-in-webgl-other-tutorials-tut2' - line 398: ' getting-started-in-webgl-coords-and-transform-toc5' - line 415: '' - line 380: ' getting-started-in-webgl-other-tutorials-tut3' - line 382: '' - line 383: '' - line 389: ' getting-started-in-webgl-coords-and-transform-p1x1' - line 392: ' that will be important to any 3D sketch.' - line 399: ' getting-started-in-webgl-coords-and-transform-toc6' - line 402: ' getting-started-in-webgl-coords-and-transform-p2x1' - line 405: ' through its special WebGL mode.' - line 412: '' - line 413: ' getting-started-in-webgl-coords-and-transform-p4x1' - line 414: ' Let''s get started by setting up the p5.js to use WebGL, by passing a third parameter into createCanvas().' - line 416: ' getting-started-in-webgl-coords-and-transform-heading2' - line 417: ' 3D Coordinate Space' - line 418: '' - line 419: ' getting-started-in-webgl-coords-and-transform-info1x1' - line 368: '' - line 369: '' - line 372: '' - line 883: ' With these skills you will be able to create some basic shaders, but shader programming can go incredibly deep,' - line 884: ' and there are many shader topics that go beyond this tutorial. Shaders in p5.js can be a powerful tool for' - line 885: ' creating visuals, effects, and even textures that can be mapped to your 3D geometry.' - line 875: ' p5.js handles a lot of attributes and uniforms for us, and translate(), rotate(), and scale(), that we can use to position and orient objects' - line 441: ' within space. Each of these methods affect what is known as the model matrix. Collectively these are' - line 443: '' - line 444: ' getting-started-in-webgl-coords-and-transform-subheading1' - line 445: ' translate()' - line 448: ' translate() moves the origin in a' - line 454: ' getting-started-in-webgl-coords-and-transform-subheading2' - line 455: ' rotate()' - line 456: '' - line 457: ' getting-started-in-webgl-coords-and-transform-p9x1' - line 458: ' rotate() reorients whatever is' - line 459: ' drawn after it.' - line 460: '' - line 461: ' getting-started-in-webgl-coords-and-transform-p10x1' - line 467: ' example above to see how rotation is performed on each axis.' - line 468: ' getting-started-in-webgl-coords-and-transform-p11x1' - line 469: ' By default p5.js will expect angles to be in radians. Radians use numbers from 0 - TWO_PI to specify an' - line 470: ' angle. To use degrees, either convert degrees to radians using radians(), or use' - line 473: '

    You can also use rotate(), which allows' - line 474: ' you to specify which axis you''d like to rotate around using a vector as the second argument.

    ' - line 476: ' scale()' - line 477: ' getting-started-in-webgl-coords-and-transform-p12x1' - line 478: ' scale() changes the size of whatever is' - line 479: ' drawn after it. Like the other methods described so far, it accepts arguments for x, y, and z values.' - line 480: ' getting-started-in-webgl-coords-and-transform-heading4' - line 486: ' getting-started-in-webgl-coords-and-transform-p14x1' - line 487: ' Transformations can be performed in any order, but using translate, rotate, and then scale will be the most intuitive.' - line 488: ' Translation, followed by rotation, produces the effect of moving the shape and then rotating around that new location.' - line 489: ' getting-started-in-webgl-coords-and-transform-p15x1' - line 490: ' In the below example, try changing the order of translate() and rotateY() and see how it affects where the object is' - line 497: ' individually. The push() method saves and sets aside the' - line 498: ' current transformations. The pop() method restores those transformations. Whatever transformations that' - line 499: ' are made between push() and pop() will be isolated to that portion of the code. If you don’t use push() and' - line 502: ' pop(), you have to keep track of whatever transformations have already taken place, which' - line 503: ' can get complicated' - line 504: ' and difficult to follow. Consider this following example, which places two boxes in our sketch. To position the second box' - line 505: ' without push() and pop(), you have to account for the first transformation. This ' - line 506: ' can be a lot to keep track of in a more complex 3D scene. ' - line 507: ' getting-started-in-webgl-coords-and-transform-p17x1' - line 508: ' Now, let''s try the same code with push() and pop(). Now we can just' - line 509: ' translate the object where we want it, without' - line 510: ' having to remember where our coordinate system lies.' - line 514: ' transformation matrix is combined with the view matrix and the projection matrix, both of which help simulate' - line 515: ' the view of a camera, and this combination results in our 3D scene!

    ' - line 516: ' box() but p5.js has seven different predefined geometries' - line 527: ' that you can use in your sketch. These basic predefined geometries are often referred to as ''primitives''.' - line 528: ' getting-started-in-webgl-coords-and-transform-p20x1' - line 529: ' These primitive shape methods are' - line 530: ' plane(),' - line 532: ' ellipsoid(),' - line 533: ' cone(),' - line 534: ' cylinder(), and' - line 535: ' torus()' - line 536: ' getting-started-in-webgl-coords-and-transform-p21x1' - line 537: ' It is also possible to create custom geometry, either from scratch or from 3D models created in another' - line 538: ' program.' - line 541: ' getting-started-in-webgl-coords-and-transform-heading6' - line 542: ' Conclusion' - line 543: ' getting-started-in-webgl-coords-and-transform-p22x1' - line 544: ' By having basic control over a 3D coordinate space, transformations, ' - line 545: ' and basic shapes, you should be able to begin creating basic scenes' - line 546: ' in 3D. The tutorials that follow this in the Getting Started in WebGL series' - line 547: ' will introduce custom geometries, allow you to tweak the appearance of ' - line 548: ' the scene, and introduce you to some basic shader programming to push' - line 549: ' your sketches further.' - line 550: ' getting-started-in-webgl-coords-and-transform-glossary-title' - line 730: ' getting-started-in-webgl-appearance-glossary-term2-definition' - line 731: ' getting-started-in-webgl-appearance-glossary-term3-title' - line 732: ' getting-started-in-webgl-appearance-glossary-term3-definition' - line 733: ' A projection that is orthogonal and unaffected by depth. It gives the appearance of being' - line 734: ' two-dimensional.' - line 735: ' getting-started-in-webgl-appearance-glossary-term4-title' - line 736: ' getting-started-in-webgl-appearance-glossary-term4-definition' - line 737: ' getting-started-in-webgl-appearance-glossary-term5-title' - line 738: ' getting-started-in-webgl-appearance-glossary-term5-definition' - line 740: ' getting-started-in-webgl-appearance-glossary-term6-definition' - line 741: ' The near plane represents the minimum distance a geometry must be from the camera to be displayed, while' - line 742: ' the far plane represents the maximum distance.' - line 743: ' getting-started-in-webgl-appearance-glossary-term7-title' - line 744: ' getting-started-in-webgl-appearance-glossary-term7-definition' - line 745: '' - line 746: '' - line 747: '' - line 748: '' - line 749: '' - line 753: ' getting-started-in-webgl-shaders-p0x1' - line 754: ' Shaders are special programs that run on the graphics processing unit, or GPU, that can do some incredible' - line 755: ' things. They take advantage of the' - line 756: ' GPU to process many pixels at once, making them fast and particularly well suited for certain tasks, like' - line 757: ' generating noise, applying filters like blur, or shading polygons. Shader programming can feel daunting at' - line 758: ' first, they require a different approach than the 2D drawing of p5.js and it can often involve more advanced' - line 760: '' - line 761: ' getting-started-in-webgl-shaders-toc-title' - line 762: ' getting-started-in-webgl-shaders-toc1' - line 763: ' getting-started-in-webgl-shaders-toc2' - line 764: ' getting-started-in-webgl-shaders-toc3' - line 765: ' getting-started-in-webgl-shaders-toc4' - line 766: ' getting-started-in-webgl-shaders-toc5' - line 767: ' getting-started-in-webgl-shaders-heading1' - line 768: '' - line 769: ' getting-started-in-webgl-shaders-p1x1' - line 770: ' p5.js is a great tool for working with shaders because it handles a lot of the WebGL setup so you can focus on' - line 771: ' the shader code itself. Before we can get started with shaders we have to set up our canvas so that it uses' - line 772: ' p5.js WebGL model.' - line 773: '' - line 774: ' getting-started-in-webgl-shaders-p2x1' - line 775: ' A shader program consists of two parts, a vertex shader and a fragment' - line 776: ' shader. The vertex shader affects where the 3D geometry is drawn on the screen and the fragment' - line 777: ' shader is responsible for affecting the color output. Each of these live in separate files and are loaded into' - line 778: ' p5.js using loadShader(). Once a shader is loaded it can be used within draw(). The following example will show' - line 780: ' how to set up a basic shader within p5.js' - line 781: '' - line 782: ' getting-started-in-webgl-shaders-heading2' - line 783: '' - line 784: ' getting-started-in-webgl-shaders-p3x1' - line 785: ' So now you might be wondering what we actually write in these shader files! Shader files are written in' - line 786: ' Graphics Library Shading Language, or GLSL, and have a very different syntax and structure than we are familiar' - line 787: ' with. GLSL has a' - line 788: ' syntax that resembles C, which means it comes with a handful of concepts that aren''t present in JavaScript.' - line 789: '' - line 790: ' getting-started-in-webgl-shaders-p4x1' - line 791: ' For one, the shading language is much more strict about types. Each variable you create has to be labeled with' - line 792: ' the kind of data it is storing. Here is a list of some of the common types' - line 793: '' - line 794: ' getting-started-in-webgl-shaders-typelist' - line 795: ' vec2(x,y) // a vector of two floats' - line 796: ' vec3(r,g,b) // a vector of three floats' - line 797: ' vec4(r,g,b,a) // a vector of four floats' - line 798: ' float // a number with decimal points' - line 799: ' int // a whole number without decimal points' - line 800: ' sampler2D // a reference to a texture' - line 801: '' - line 802: ' getting-started-in-webgl-shaders-p5x1' - line 803: ' In general the shading language is much more strict than JavaScript. A missing semicolon for example is not' - line 804: ' allowed and will result in an error message. You can''t use different types of numbers, like floats or integers' - line 805: ' interchangeably.' - line 806: '' - line 807: ' getting-started-in-webgl-shaders-p6x1' - line 808: ' First let''s look at a basic vertex shader' - line 809: '' - line 810: ' getting-started-in-webgl-shaders-p7x1' - line 811: ' This vertex shader begins with an attribute, which p5.js uses to share vertex position information' - line 812: ' with the shader. This' - line 813: ' attribute is a vec3, meaning it contains a value for x, y, and z. Attributes are special' - line 814: ' variable types that are' - line 815: ' only used in the vertex shader and are typically provided by p5.js.' - line 816: '' - line 817: ' getting-started-in-webgl-shaders-p8x1' - line 818: ' All vertex shaders require a function, main(), within which we position our vertices. In' - line 819: ' this example, the' - line 820: ' vertex shader repositions our vertices so that the shader output takes up the full sketch. At the end of main(),' - line 822: ' we have to assign a value to gl_Position.' - line 823: '' - line 824: ' getting-started-in-webgl-shaders-p9x1' - line 825: ' Don''t worry if this doesn''t make a ton of sense yet. The vertex shader plays an important role but it is often' - line 826: ' just responsible for making sure what we create in our fragment shader displays properly on the geometry. You''ll' - line 827: ' probably find yourself reusing the same vertex shaders in many of your projects.' - line 828: ' The fragment shader on the other hand is responsible for the color output of our shader and is where we will do' - line 829: ' a lot of our shader programming. Here is a very simple fragment shader that will just display the color red' - line 830: '' - line 831: ' getting-started-in-webgl-shaders-p10x1' - line 832: ' The fragment shader begins with a line specifying the float ''precision''.' - line 833: ' this value you can either be lowp, mediump, or highp, although you will likely' - line 834: ' use mediump, or highp in certain situations.' - line 835: '' - line 836: ' getting-started-in-webgl-shaders-p11x1' - line 837: ' And similar to the vertex shader, our fragment shader also requires a main() function, but instead of' - line 838: ' setting gl_Position, we will assign a color to gl_FragColor.' - line 839: '' - line 840: ' getting-started-in-webgl-shaders-p12x1' - line 841: ' The variable, myColor, is defined as a vec4, meaning it stores 4 values. Since we are dealing with color,' - line 842: ' those four values are red, green, blue, and alpha. Shaders don''t use 0 - 255 for colors like our sketches do, instead they use' - line 843: ' values between 0.0 and 1.0.' - line 844: '' - line 845: ' getting-started-in-webgl-shaders-p13x1' - line 846: ' Now that we have a vertex shader and a fragment shader, these can be saved to separate files (shader.vert and' - line 847: ' shader.frag respectively), and loaded into our sketch using loadShader().' - line 848: '' - line 849: ' getting-started-in-webgl-shaders-heading3' - line 850: ' Uniforms' - line 851: '' - line 852: ' getting-started-in-webgl-shaders-p14x1' - line 853: ' A simple shader like this can be useful by itself, but there are times when it''s necessary to communicate' - line 854: ' variables from the p5.js sketch to a shader. This is when uniforms come in. Uniforms are special variables that' - line 855: ' can be sent from a sketch to a shader. These make it possible to have much more control over a shader. For example,' - line 856: ' you could use the p5.js method millis() to pass a ''time'' uniform to our sketch to introduce motion.' - line 857: ' In the shader, uniforms are defined at the top of the file, outside of main(). In' - line 858: ' this following fragment shader' - line 859: ' we are creating a color uniform, myColor, that will allow us to change the color from our sketch.' - line 860: '' - line 861: ' getting-started-in-webgl-shaders-p15x1' - line 862: ' Back in our p5.js sketch, this color can now be sent using setUniform()' - line 863: '' - line 864: ' getting-started-in-webgl-shaders-p16x1' - line 865: ' There are also attributes, which are usually used to share certain data about the geometry between the' - line 866: ' sketch and the vertex shader, and varying variables, which share data between the vertex shader and the' - line 867: ' fragment shader.' - line 868: ' This makes it possible to use position or other geometry data within our fragment shaders.' - line 869: '' - line 870: ' getting-started-in-webgl-shaders-p17x1' - line 886: '' - line 887: ' getting-started-in-webgl-shaders-p19x1' - line 888: ' Want to keep learning more about shaders? Check out some of these websites!' - line 889: '' - line 890: ' getting-started-in-webgl-shaders-resources' - line 891: '
  • ' - line 897: '
  • ' - line 901: '' - line 902: ' getting-started-in-webgl-shaders-glossary-title' - line 903: '' - line 904: ' getting-started-in-webgl-shaders-glossary-term1-title' - line 905: ' getting-started-in-webgl-shaders-glossary-term1-definition' - line 906: ' A special graphics card program that can efficiently produce many visual effects and filters.' - line 907: '' - line 908: ' getting-started-in-webgl-shaders-glossary-term2-title' - line 909: ' getting-started-in-webgl-shaders-glossary-term2-definition' - line 910: ' Graphics Library Shader Language (GLSL) is a programming language that is used to write shaders.' - line 911: '' - line 912: ' getting-started-in-webgl-shaders-glossary-term3-title' - line 913: ' getting-started-in-webgl-shaders-glossary-term3-definition' - line 914: ' A variable that is passed from your sketch to a shader' - line 915: '' - line 916: ' getting-started-in-webgl-shaders-glossary-term4-title' - line 917: ' getting-started-in-webgl-shaders-glossary-term4-definition' - line 918: ' A data type that stores a group of numbers, most commonly two, three, or four, to represent colors, positions,' - line 919: ' and more.' - line 920: '' - line 921: ' getting-started-in-webgl-shaders-glossary-term5-title' - line 922: ' getting-started-in-webgl-shaders-glossary-term5-definition' - line 923: ' A data type that stores floating point numbers, which can have a decimal point.' - line 924: '' - line 925: ' getting-started-in-webgl-shaders-glossary-term6-title' - line 926: ' getting-started-in-webgl-shaders-glossary-term6-definition' - line 927: ' A data type that stores integers, which are whole numbers without a decimal.' - line 928: '' - line 929: ' getting-started-in-webgl-shaders-glossary-term7-title' - line 930: ' getting-started-in-webgl-shaders-glossary-term7-definition' - line 931: ' A data type that represents a texture being passed into the shader.' - line 932: '' - line 933: ' getting-started-in-webgl-shaders-glossary-term8-title' - line 934: ' getting-started-in-webgl-shaders-glossary-term8-definition' - line 935: ' A GLSL variable that is generated in the p5.js sketch and made available in the vertex shader. For most' - line 936: ' situations these are provided by p5.js.' - line 937: '' - line 938: ' getting-started-in-webgl-shaders-glossary-term9-title' - line 939: ' getting-started-in-webgl-shaders-glossary-term9-definition' - line 940: ' An image that passed into a shader program.' - line 941: '' - line 942: ' getting-started-in-webgl-shaders-glossary-term10-title' - line 943: ' getting-started-in-webgl-shaders-glossary-term10-definition' - line 944: ' A label describing the characterics of a piece of data, such as an int, a float, a vector, etc.' - line 945: '' - line 946: ' getting-started-in-webgl-shaders-glossary-term11-title' - line 947: ' getting-started-in-webgl-shaders-glossary-term11-definition' - line 948: ' The part of a shader program that is responsible for positioning geometry in 3D space.' - line 949: '' - line 950: ' getting-started-in-webgl-shaders-glossary-term12-title' - line 951: ' getting-started-in-webgl-shaders-glossary-term12-definition' - line 952: ' The part of a shader program that is responsible for the color and appearance of each pixel output by the' - line 953: ' shader.' - line 954: '' - line 955: ' ' - line 956: '' - line 604: ' way that is similar to 2D drawing in p5.js. For example, methods like quad() and triangle() each have extra parameters that make it possible to use them in 3D.' - line 420: ' If coordinates systems aren''t making sense it might be helpful to revisit the tutorial titled' - line 421: ' Coordinate System and Shapes.' - line 427: ' getting-started-in-webgl-coords-and-transform-p6x1' - line 428: ' When drawing in 2D, the point (0,0) is located at the top left corner of the screen. In WebGL mode, the' - line 429: ' origin of the sketch (0,0,0) is located in the middle of the screen. By default, the x-axis goes left-to-right,' - line 430: ' y-axis goes up-to-down, and the z-axis goes from further-to-closer.' - line 431: '' - line 387: ' getting-started-in-webgl-custom-geometry-p2x1' - line 388: ' Custom geometry can be imported into p5.js using either OBJ or STL files. These files are usually generated in' - line 1669: ' teach-case3-content5' - line 1670: ' teach-case4-title' - line 1671: ' teach-case4-lead-name' - line 1672: ' teach-case4-content1' - line 1673: ' teach-case4-content1-1' - line 1674: ' teach-case4-content2' - line 1675: ' teach-case4-content3' - line 1676: ' teach-case4-content4' - line 1677: ' teach-case4-content5' - line 1678: ' teach-case5-title' - line 1679: ' teach-case5-lead-name' - line 1680: ' teach-case5-image-alt' - line 1681: ' teach-case5-content1' - line 1682: ' teach-case5-content1-1' - line 1683: ' teach-case5-content2' - line 1684: ' teach-case5-content3' - line 1685: ' teach-case5-content4' - line 1686: ' teach-case5-content5' - line 1687: ' teach-case6-title' - line 1688: ' teach-case6-lead-name' - line 1689: ' teach-case6-image-alt' - line 1690: ' teach-case6-content1' - line 1691: ' teach-case6-content1-1' - line 1692: ' teach-case6-content2' - line 1693: ' teach-case6-content3' - line 1694: ' teach-case6-content4' - line 1695: ' teach-case6-content5' - line 1696: ' teach-case7-title' - line 1697: ' teach-case7-lead-name' - line 1698: ' teach-case7-image-alt' - line 1699: ' teach-case7-content1' - line 1700: ' teach-case7-content1-1' - line 1701: ' teach-case7-content2' - line 1702: ' teach-case7-content3' - line 1703: ' teach-case7-content4' - line 1704: ' teach-case7-content5' - line 1705: ' teach-case8-title' - line 1706: ' teach-case8-lead-name' - line 1707: ' teach-case8-content1' - line 1708: ' teach-case8-content1-1' - line 1709: ' teach-case8-content2' - line 1710: ' teach-case8-content3' - line 1711: ' teach-case8-content4' - line 1778: ' teach-case14-lead-name' - line 1779: ' teach-case14-image-alt' - line 1780: ' teach-case14-content1' - line 1781: ' teach-case14-content1-1' - line 1782: ' teach-case14-content2' - line 1787: ' teach-case14-content3' - line 1788: ' teach-case14-content4' - line 1838: ' teach-case15-content5-1' - line 1839: ' teach-case15-content5-2' - line 1840: ' teach-case15-content5-3' - line 1841: ' teach-case16-title' - line 1842: ' teach-case16-lead-name' - line 1843: ' teach-case16-image-alt' - line 1844: ' teach-case16-speech' - line 1845: ' teach-case16-content1' - line 1846: ' teach-case16-content1-1' - line 1847: ' teach-case16-content2' - line 1852: ' teach-case16-content3' - line 1853: ' teach-case16-content4' - line 1864: ' teach-case16-content5' - line 1865: ' teach-case16-content5-1' - line 1866: ' teach-case16-content5-2' - line 1867: ' teach-case16-content5-3' - line 1868: ' teach-case16-content5-4' - line 1869: ' teach-case17-title' - line 1870: ' teach-case17-lead-name' - line 1871: ' teach-case17-speech' - line 1881: ' teach-case17-content1' - line 1882: ' teach-case17-content1-1' - line 1883: ' teach-case17-content1-2' - line 1884: ' teach-case17-content1-3' - line 1885: ' teach-case17-content2' - line 1886: ' teach-case17-content3' - line 1887: ' teach-case17-content4' - line 1891: ' teach-case17-content5' - line 1901: ' teach-case17-content5-1' - line 1902: ' teach-case17-content5-2' - line 1903: ' teach-case17-content5-3' - line 1904: ' teach-case18-title' - line 1905: ' teach-case18-lead-name' - line 1906: ' teach-case18-image-alt' - line 1907: ' teach-case18-speech' - line 1924: ' teach-case18-content1' - line 1925: ' teach-case18-content1-1' - line 1926: ' teach-case18-content2' - line 1927: ' teach-case18-content3' - line 1928: ' teach-case18-content4' - line 1929: ' teach-case18-content5' - line 1930: ' teach-case18-content5-1' - line 1931: ' teach-case18-content5-2' - line 1932: ' teach-case18-content5-3' - line 1933: ' teach-case18-content5-4' - line 1934: ' teach-case18-content5-5' - line 1935: ' teach-case19-title' - line 1936: ' teach-case19-lead-name' - line 1937: ' teach-case19-speech' - line 1964: ' teach-case19-content1' - line 1965: ' teach-case19-content1-1' - line 1966: ' teach-case19-content2' - line 1967: ' teach-case19-content3' - line 1968: ' teach-case19-content4' - line 1969: ' teach-case19-content5' - line 1970: ' teach-case19-content5-1' - line 1971: ' teach-case20-title' - line 1972: ' teach-case20-lead-name' - line 1973: ' teach-case20-image-alt' - line 1974: ' teach-case20-content1' - line 1975: ' teach-case20-content1-1' - line 1976: ' teach-case20-content2' - line 1977: ' teach-case20-content3' - line 1978: ' teach-case20-content4' - line 1979: ' teach-case20-content5' - line 1980: ' teach-case20-content5-1' - line 1981: ' teach-case20-content5-2' - line 1982: ' teach-case21-title' - line 1983: ' teach-case21-lead-name' - line 1984: ' teach-case21-image-alt' - line 1985: ' teach-case21-content1' - line 1986: ' teach-case21-content1-1' - line 1987: ' teach-case21-content2' - line 1992: ' teach-case21-content3' - line 1993: ' teach-case21-content4' - line 1998: ' teach-case21-content5' -zh-Hans: - src/data/en.yml: - line 980: ' contributors-conference1' - line 1642: ' teach-case1-title' - line 1643: ' teach-case1-lead-name' - line 1644: ' teach-case1-image-alt' - line 1645: ' teach-case1-content1' - line 1646: ' teach-case1-content1-1' - line 1647: ' teach-case1-content2' - line 1648: ' teach-case1-content3' - line 1649: ' teach-case1-content4' - line 1650: ' teach-case1-content5' - line 1651: ' teach-case1-content5-1' - line 1652: ' teach-case1-content5-2' - line 1653: ' teach-case1-content5-3' - line 1654: ' teach-case2-title' - line 1655: ' teach-case2-lead-name' - line 1656: ' teach-case2-content1' - line 1657: ' teach-case2-content1-1' - line 1658: ' teach-case2-content2' - line 1659: ' teach-case2-content3' - line 1660: ' teach-case2-content4' - line 1661: ' teach-case2-content5' - line 1662: ' teach-case3-title' - line 1663: ' teach-case3-lead-name' - line 1664: ' teach-case3-content1' - line 1665: ' teach-case3-content1-1' - line 1666: ' teach-case3-content2' - line 1667: ' teach-case3-content3' - line 1668: ' teach-case3-content4' - line 1712: ' teach-case8-content5' - line 1713: ' teach-case9-title' - line 1714: ' teach-case9-lead-name' - line 1715: ' teach-case9-image-alt' - line 1716: ' teach-case9-content1' - line 1717: ' teach-case9-content1-1' - line 1718: ' teach-case9-content2' - line 1719: ' teach-case9-content3' - line 1720: ' teach-case9-content4' - line 1721: ' teach-case9-content5' - line 1722: ' teach-case10-title' - line 1723: ' teach-case10-lead-name' - line 1724: ' teach-case10-content1' - line 1725: ' teach-case10-content1-1' - line 1726: ' teach-case10-content2' - line 1727: ' teach-case10-content3' - line 1728: ' teach-case10-content4' - line 1729: ' teach-case10-content5' - line 1730: ' teach-case11-title' - line 1731: ' teach-case11-lead-name' - line 1732: ' teach-case11-content1' - line 1733: ' Seoul Museum of Art, Seoul, South Korea.''' - line 1734: ' teach-case11-content1-1' - line 1735: ' teach-case11-content2' - line 1736: ' teach-case11-content3' - line 1737: ' teach-case11-content4' - line 1738: ' teach-case11-content5' - line 1739: ' We also used dice, playing cards and various paper tools to help students learn about coding concepts. ''' - line 1740: ' teach-case12-title' - line 1741: ' teach-case12-lead-name' - line 1742: ' teach-case12-image-alt' - line 1743: ' teach-case12-content1' - line 1744: ' teach-case12-content1-1' - line 1745: ' teach-case12-content2' - line 1746: ' teach-case12-content3' - line 1747: ' teach-case12-content4' - line 1748: ' teach-case12-content5' - line 1749: ' Methods' - line 1750: ' teach-case12-content5-1' - line 1751: ' teach-case13-title' - line 1752: ' teach-case13-lead-name' - line 1753: ' teach-case13-content1' - line 1754: ' teach-case13-content1-1' - line 1755: ' teach-case13-content2' - line 1756: ' teach-case13-content3' - line 1757: ' teach-case13-content4' - line 1761: ' teach-case13-content5' - line 1766: ' teach-case13-content5-1' - line 1770: ' teach-case14-title' - line 1803: ' teach-case14-content5' - line 1804: ' teach-case14-content5-1' - line 1805: ' teach-case14-content5-2' - line 1806: ' teach-case14-content5-3' - line 1807: ' teach-case14-content5-4' - line 1808: ' teach-case14-content5-5' - line 1809: ' teach-case15-title' - line 1810: ' teach-case15-lead-name' - line 1811: ' teach-case15-speech' - line 1812: ' teach-case15-content1' - line 1813: ' teach-case15-content1-1' - line 1814: ' teach-case15-content2' - line 1819: ' teach-case15-content3' - line 1820: ' teach-case15-content4' - line 1824: ' teach-case15-content5' - line 2009: ' teach-case21-content5-1' - line 2010: ' teach-case21-content5-2' - line 2011: ' teach-case21-content5-3' - line 2012: ' teach-case22-title' - line 2013: ' teach-case22-lead-name' - line 2014: ' teach-case22-content1' - line 2015: ' teach-case22-content3' - line 2016: ' teach-case22-content4' - line 2021: ' teach-case22-content5' - line 2035: ' teach-case22-content5-1' - line 2036: ' teach-case22-content5-2' - line 2037: ' teach-case23-title' - line 2038: ' teach-case23-lead-name' - line 2039: ' teach-case23-image-alt' - line 2040: ' teach-case23-content1' - line 2041: ' teach-case23-content1-1' - line 2042: ' teach-case23-content2' - line 2043: ' teach-case23-content3' - line 2044: ' teach-case23-content4' - line 2051: ' teach-case23-content5' - line 2052: ' teach-case23-content5-1' - line 2063: ' teach-case23-content5-2' - line 2064: ' teach-case23-content5-3' - line 2065: ' teach-case23-content5-4' - line 2066: ' teach-case23-content5-5' - line 2067: ' teach-case24-title' - line 2068: ' teach-case24-lead-name' - line 2069: ' teach-case24-image-alt' - line 2070: ' teach-case24-speech' - line 2081: ' teach-case24-content1' - line 2082: ' teach-case24-content1-1' - line 2083: ' teach-case24-content2' - line 2084: ' teach-case24-content3' - line 2085: ' teach-case24-content4' - line 2089: ' teach-case24-content5' - line 2095: ' teach-case24-content5-1' - line 2096: ' teach-case24-content5-2' - line 2097: ' teach-workshops-heading' - line 2098: ' teach-workshop1-title' - line 2099: ' teach-workshop1-time' - line 2100: ' teach-workshop2-title' - line 2101: ' teach-workshop2-time' - line 2102: ' teach-workshop3-title' - line 2103: ' teach-workshop3-time' - line 883: ' p5.utils' - line 884: ' A set of utilities and additional features for my creative coding class aiming ' - line 885: ' to help students.' - line 1153: ' 2022-p5js-access-day-date' - line 1174: ' 2022-p5js-access-day-advisor' - line 1150: ' p5js-community-event-title' - line 1151: ' 2022-p5js-access-day-title' - line 1152: ' 2022-p5js-access-day-date' - line 1154: ' 2022-p5js-access-day-coordinator' - line 1155: ' 2022-p5js-access-day-description' - line 1156: ' The p5.js Access Day is a virtual conference to talk about access in ' - line 1157: ' open-source software for the arts (OSSTA) and greater issues beyond the software. ' - line 1158: ' The day-long online event features four themed-sessions — Critical Web ' - line 1159: ' Accessibility, Disability Arts, Access & Community Building, and Access ' - line 1160: ' via Translation. It provides space for contributors of p5.js and experienced ' - line 1161: ' practitioners from outside OSSTA projects to share their knowledge, perspectives, ' - line 1162: ' and dreams for building greater access to technical and arts spaces. ' - line 1163: ' 2022-p5js-access-day-recap-video' - line 1164: ' 2022-p5js-access-day-recap-video-asl' - line 1165: ' 2022-p5js-access-day-moderator' - line 1166: ' 2022-p5js-access-day-speakers' - line 1167: ' 2022-p5js-access-day-session-0' - line 1168: ' 2022-p5js-access-day-session-1' - line 1169: ' 2022-p5js-access-day-session-2' - line 1170: ' 2022-p5js-access-day-session-3' - line 1171: ' 2022-p5js-access-day-session-4' - line 1172: ' 2022-p5js-access-day-session-5' - line 1173: ' 2022-p5js-access-day-production' - line 1175: ' 2022-p5js-access-day-asl' - line 1176: ' 2022-p5js-access-day-designer' - line 1177: ' 2022-p5js-access-day-tech-support' - line 1178: ' 2022-p5js-access-day-transcriber' - line 1179: ' 2022-p5js-access-day-asl-support' - line 85: ' under the terms of the ' - line 26: footer6 - line 25: footer2 - line 27: footer4 - line 31: footer8 - line 32: footer9 - line 28: footer5 - line 29: footer6 - line 30: footer7 - line 270: ' particular topics. Check out the' - line 288: ' to the index.html containing your p5.js sketch.' - line 297: ' file and the embed.html file for the sketch.' - line 306: ' be' - line 310: ' stylesheet)' - line 319: ' was ported to P5 by Kelly Chang. If you find any errors or have comments,' - line 330: ' background(255); // Setting the background to white' - line 331: ' stroke(0); // Setting the outline (stroke) to black' - line 332: ' fill(150); // Setting the interior of a shape (fill) to grey' - line 340: ' black. Also, remember not to eliminate both—with' - line 349: ' percentage). You can do this by specifying a custom' - line 358: ' want to use the' - line 363: ' and the bottom right corner). The mode here is' - line 261: ' the' - line 279: ' of the p5js site. The file called index.hbs is the' - line 1536: ' teach-case2-image-alt' - line 1544: ' teach-case4-image-alt' - line 1552: ' teach-case6-image-alt' - line 1560: ' teach-case8-image-alt' - line 1568: ' teach-case9-image-alt' - line 1576: ' teach-case11-image-alt' - line 1584: ' teach-case12-image-alt' - line 1123: ' book-6-title' - line 1124: ' book-6-authors' - line 1125: ' book-6-publisher' - line 1126: ' book-6-pages' - line 1127: ' book-6-type' - line 1128: ' book-6-description' - line 1129: ' Using p5.js, this book introduces and demonstrates the reflexive practice ' - line 1130: ' of aesthetic programming, engaging with learning to program as a way to ' - line 1131: ' understand and question existing technological objects and paradigms, ' - line 1132: ' and to explore the potential for reprogramming wider eco-socio-technical systems.' - line 1133: ' book-6-order-a' - line 1134: ' book-6-order-b' - line 162: ' library in your html. To learn more visit ' - line 163: ' library in your html. To learn more visit ' - line 164: ' your-first-sketch7' - line 97: ' get-started-button' - line 96: ' get-started7' - line 114: ' environment15' - line 113: ' environment14' - line 115: ' environment16' - line 102: ' download8' - line 103: ' download9' - line 104: ' download10' - line 105: ' download11' - line 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open' - line 256: ' , the organization that supports p5.js.' - line 269: ' Your donation supports software development for p5.js, education resources' - line 265: ' and inclusive as possible. You can support this work by making a donation to' - line 266: ' the ' - line 267: ' support-2' - line 268: ' , the organization that supports p5.js. We need your help!' - line 275: ' support-3' - line 276: ' support-4' - line 277: ' support-5' - line 37: Editor - line 55: footer5 - line 123: ' p3xh2' - line 41: Reference - line 118: ' p2x3' - line 128: ' p3xp5' - line 59: tagline4 - line 136: ' p4xp6' - line 62: tagline7 - line 45: Books - line 34: Language-Settings - line 35: Sidebar-Title - line 36: Home - line 38: Download - line 39: Donate - line 40: Start - line 42: Libraries - line 43: Learn - line 56: tagline1 - line 60: tagline5 - line 61: tagline6 - line 111: ' identity and expression, sexual orientation, race, ethnicity, language,' - line 112: ' neuro-type, size, disability, class, religion, culture, subculture,' - line 116: ' kinds. We facilitate and foster access and empowerment. We are all learners.' - line 117: ' p2x2' - line 119: ' p2x4' - line 120: ' p2x5' - line 121: ' p2x6' - line 122: ' p2x7' - line 124: ' p3xp1' - line 125: ' p3xp2' - line 126: ' p3xp3' - line 127: ' p3xp4' - line 137: ' sketch_credits' - line 138: ' sketch_info' - line 271: ' Open Sublime. Go to the File menu and choose Open... and choose the folder' - line 272: ' that your html and js files are located in. On the left sidebar, you should' - line 273: ' find the folder name at the top, with a list of the files contained in the' - line 282: ' environment12' - line 283: ' environment13' - line 284: ' your-first-sketch-title' - line 285: ' your-first-sketch-intro1' - line 286: ' your-first-sketch-intro2' - line 287: ' your-first-sketch-intro3' - line 289: ' your-first-sketch1' - line 290: ' your-first-sketch2' - line 291: ' your-first-sketch3' - line 292: ' your-first-sketch4' - line 293: ' The line you just added draws an ellipse, with its center 50 pixels over' - line 294: ' from the left and 50 pixels down from the top, with a width and height of 80' - line 295: ' pixels.' - line 296: ' your-first-sketch5' - line 298: ' If you are using a screen reader, you must turn on the accessible outputs in' - line 299: ' the p5 online editor, outside the editor you must add the accessibility' - line 300: ' library in your html. To learn more visit' - line 301: ' your-first-sketch7' - line 302: ' your-first-sketch8' - line 303: ' If you''ve typed everything correctly, this will appear in the display' - line 304: ' window' - line 305: ' your-first-sketch9' - line 307: ' If nothing appears, the editor may be having trouble understanding what' - line 308: ' you’ve typed. If this happens, make sure that you''ve copied the example code' - line 309: ' exactly' - line 311: ' to be spelled correctly.' - line 312: ' your-first-sketch11' - line 313: ' One of the most difficult things about getting started with programming is' - line 314: ' that you have to be very specific about the syntax. The browser isn''t always' - line 315: ' smart enough to know what you mean, and can be quite fussy about the' - line 316: ' placement of punctuation. You''ll get used to it with a little practice. In' - line 317: ' the bottom left of the editor you will find the console section. Here, you' - line 318: ' can find messages from the editor with details about any errors it' - line 320: ' your-first-sketch12' - line 321: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the' - line 322: ' last example to try this' - line 323: ' your-first-sketch13' - line 324: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,' - line 325: ' and then starts drawing white circles at the position of the mouse. When a' - line 326: ' mouse button is pressed, the circle color changes to black. Run the code,' - line 327: ' move the mouse, and click to experience it.' - line 328: ' your-first-sketch14' - line 329: ' first-sketch-heading1' - line 333: ' learn1' - line 334: ' learn2' - line 335: ' learn3' - line 336: ' learn4' - line 337: ' learn5' - line 338: ' learn6' - line 339: ' learn7' - line 341: ' learn9' - line 342: ' learn10' - line 343: ' reference1' - line 344: ' reference2' - line 345: ' reference3' - line 346: ' learn11' - line 347: ' learn12' - line 348: ' processing-transition1' - line 350: ' processing-transition3' - line 351: ' processing-transition4' - line 352: ' book1' - line 353: ' Parts of this tutorial were adapted from the book, Getting Started with' - line 354: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.' - line 355: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019' - line 356: ' Contributors Conference.' - line 44: Examples - line 57: tagline2 - line 146: ' copyright-title' - line 231: ' get-started-title' - line 240: ' . If you would like to work on the the desktop version of p5.js you can' - line 258: ' download7' - line 281: ' file manager or type' - line 54: footer4 - line 110: ' We are a community of, and in solidarity with, people from every gender' - line 239: ' get-started6' - line 259: ' environment-title' - line 274: ' folder directly below.' - line 233: ' This page walks you through setting up a p5.js project and making your first' - line 234: ' sketch.' - line 244: ' download-title' - line 245: ' hosted-title' - line 50: footerxh1 - line 98: ' p1x1' - line 99: ' p5.js is a JavaScript library for creative coding, with a focus on making' - line 100: ' coding accessible and inclusive for artists, designers, educators,' - line 109: ' p2x1' - line 129: ' p3xp6' - line 148: ' The p5.js library is free software; you can redistribute it and/or modify it' - line 46: Community - line 133: ' p4xp3' - line 134: ' p4xp4' - line 141: ' project-a-2-5-phuong' - line 144: ' project-a-2-7-phuong' - line 64: ' color-p3x3' - line 70: ' color-rgb-p1x1' - line 87: ' color-custom-ranges-p2x1' - line 24: footer1 - line 77: ' color-rgb-p2x1' - line 82: ' color-transparency-p2x1' - line 139: ' project-a-2-7-phuong' - line 76: ' color-transparency-p1x1' - line 63: ' hosted-title' - line 75: ' download9' - line 140: ' learn5' - line 142: ' learn7' - line 143: ' learn8' - line 145: ' learn10' - line 159: ' processing-transition1' - line 160: ' processing-transition2' - line 161: ' processing-transition3' - line 357: ' link-2-chung' - line 359: ' project-a-1-1-chung' - line 360: ' project-a-1-2-chung' - line 361: ' project-a-1-3-chung' - line 362: ' project-a-2-1-chung' - line 364: ' project-a-2-2-chung' - line 365: ' project-a-3-1-chung' - line 79: ' environment1' - line 88: ' environment8' - line 173: ' complete-library-intro1' - line 182: ' learn3' - line 191: ' writing-a-tutorial-embedding-7' - line 197: ' writing-a-tutorial-iframe-1' - line 204: ' writing-a-tutorial-iframe-7' - line 213: ' color-description1' - line 222: ' coordinate-system-description3' - line 69: ' download5' - line 74: ' download8' - line 78: ' environment1' - line 157: ' learn11' - line 172: ' complete-library-intro1' - line 181: ' learn3' - line 190: ' writing-a-tutorial-embedding-7' - line 196: ' writing-a-tutorial-iframe-1' - line 203: ' writing-a-tutorial-iframe-7' - line 212: ' color-description1' - line 221: ' coordinate-system-description3' - line 230: ' coordinate-system-simple-shapes-p1x1' - line 66: ' sketch_credits' - line 67: ' sketch_info' - line 22: footer1 - line 23: footer2 - line 65: ' color-rgb-p1x1' - line 72: ' color-rgb-p2x1' - line 81: ' color-transparency-p1x1' - line 90: ' color-custom-ranges-p4x1' - line 153: ' project-a-4-7-casey-louise' - line 33: Skip-To-Content - line 47: Contribute - line 48: Forum - line 49: Showcase - line 51: footer1 - line 52: footer2 - line 53: footer3 - line 58: tagline3 - line 101: ' beginners, and anyone else! p5.js is free and open-source because we believe' - line 106: ' think of your whole browser page as your sketch, including HTML5 objects for' - line 107: ' text, input, video, webcam, and sound.' - line 108: ' p2xh2' - line 130: ' p4xh2' - line 131: ' p4xp1' - line 132: ' p4xp2' - line 135: ' p4xp5' - line 147: ' copyright1' - line 149: ' under the terms of the' - line 150: ' copyright2' - line 151: ' copyright3' - line 152: ' copyright4' - line 232: ' get-started1' - line 235: ' get-started2' - line 236: ' get-started3' - line 237: ' get-started4' - line 238: ' get-started5' - line 241: ' scroll down to' - line 242: ' get-started7' - line 243: ' settingUp-title' - line 246: ' download1' - line 247: ' download2' - line 248: ' download3' - line 249: ' download4' - line 250: ' If you look in index.html, you''ll notice that it links to the file p5.js. If' - line 252: ' loading), change the link to p5.min.js.' - line 253: ' download5' - line 254: ' Alternatively, you can link to a p5.js file hosted online. All versions of' - line 255: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history' - line 257: ' download6' - line 260: ' environment1' - line 262: ' environment2' - line 263: ' environment3' - line 264: ' environment4' - line 278: ' environment10' - line 280: ' Open the index.html file in your browser by double clicking on it in your' - line 750: ' other.' - line 751: ' p5-screen-reader-title' - line 752: ' p5-screen-reader' - line 957: ' with a bit of blue," you have to provide an exact amount. As with grayscale,' - line 958: ' the individual color elements are expressed as ranges from 0 (none of that' - line 959: ' color) to 255 (as much as possible), and they are listed in the order R, G,' - line 960: ' and B. You will get the hang of RGB color mixing through experimentation,' - line 961: ' but next we will cover some code using some common colors.' - line 962: ' color-transparency-title' - line 963: ' color-transparency-p1x1' - line 964: ' In addition to the red, green, and blue components of each color, there is' - line 965: ' an additional optional fourth component, referred to as the color''s "alpha".' - line 966: ' Alpha means transparency and is particularly useful when you want to draw' - line 967: ' elements that appear partially see-through on top of one another. The alpha' - line 968: ' values for an image are sometimes referred to collectively as the "alpha' - line 969: ' channel" of an image.' - line 970: ' color-transparency-p2x1' - line 971: ' It is important to realize that pixels are not literally transparent, this' - line 972: ' is simply a convenient illusion that is accomplished by blending colors.' - line 973: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of' - line 974: ' one to a percentage of another, creating the optical perception of blending.' - line 975: ' (If you are interested in programming "rose-colored" glasses, this is where' - line 976: ' you would begin.)' - line 977: ' color-transparency-p3x1' - line 978: ' Alpha values also range from 0 to 255, with 0 being completely transparent' - line 979: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).' - line 981: ' color-custom-ranges-p1x1' - line 982: ' RGB color with ranges of 0 to 255 is not the only way you can handle color' - line 983: ' in p5.js, in fact, it allows us to think about color any way we like. For' - line 984: ' example, you might prefer to think of color as ranging from 0 to 100 (like a' - line 985: ' percentage). You can do this by specifying a custom ' - line 986: ' color-custom-ranges-p2x1' - line 987: ' The above function says' - line 988: ' green, and blue. The range of RGB values will be from 0 to 100."' - line 989: ' color-custom-ranges-p3x1' - line 990: ' Although it is rarely convenient to do so, you can also have different' - line 991: ' ranges for each color component' - line 992: ' color-custom-ranges-p4x1' - line 993: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue' - line 994: ' from 0 to 10, and alpha from 0 to 255."' - line 995: ' color-custom-ranges-p5x1' - line 996: ' Finally, while you will likely only need RGB color for all of your' - line 997: ' programming needs, you can also specify colors in the HSB (hue, saturation,' - line 998: ' and brightness) mode. Without getting into too much detail, HSB color works' - line 999: ' as follows' - line 1000: ' color-custom-ranges-li1x1' - line 1001: ' color-custom-ranges-li1x2' - line 1002: ' color-custom-ranges-li2x1' - line 1003: ' color-custom-ranges-li2x2' - line 1004: ' color-custom-ranges-li3x1' - line 1005: ' color-custom-ranges-li3x2' - line 1006: ' color-custom-ranges-p6x1' - line 1007: ' color-custom-ranges-p6x2' - line 1008: ' coordinate-system-description1' - line 1009: ' coordinate-system-description2' - line 1010: ' coordinate-system-description3' - line 1011: ' coordinate-system-description4' - line 1012: ' coordinate-system-description5' - line 1013: ' coordinate-system-description-title' - line 1014: ' coordinate-system-description-p1x1' - line 1015: ' Before we begin programming with p5, we must first channel our eighth grade' - line 1016: ' selves, pull out a piece of graph paper, and draw a line. The shortest' - line 1017: ' distance between two points is a good old fashioned line, and this is where' - line 1018: ' we begin, with two points on that graph paper.' - line 1019: ' coordinate-system-description-p2x1' - line 1020: ' The above figure shows a line between point A (1,0) and point B (4,5). If' - line 1021: ' you wanted to direct a friend of yours to draw that same line, you would' - line 1022: ' give them a shout and say "draw a line from the point one-zero to the point' - line 1023: ' four-five, please." Well, for the moment, imagine your friend was a computer' - line 1024: ' and you wanted to instruct this digital pal to display that same line on its' - line 1025: ' screen. The same command applies (only this time you can skip the' - line 1026: ' pleasantries and you will be required to employ a precise formatting). Here,' - line 1027: ' the instruction will look like this' - line 1028: ' coordinate-system-description-p3x1' - line 1029: ' Even without having studied the syntax of writing code, the above statement' - line 1030: ' should make a fair amount of sense. We are providing a command (which we' - line 1031: ' will refer to as a "function") for the machine to follow entitled "line." In' - line 1032: ' addition, we are specifying some arguments for how that line should be' - line 1033: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of' - line 1034: ' code as a sentence, the function is a verb and the arguments are the objects' - line 1035: ' of the sentence. The code sentence also ends with a semicolon instead of a' - line 1036: ' period.' - line 1037: ' coordinate-system-description-p4x1' - line 1038: ' The key here is to realize that the computer screen is nothing more than a' - line 1039: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two' - line 1040: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the' - line 1041: ' location of a point in space. And it is our job to specify what shapes and' - line 1042: ' colors should appear at these pixel coordinates.' - line 1043: ' coordinate-system-description-p5x1' - line 1044: ' Nevertheless, there is a catch here. The graph paper from eighth grade' - line 1045: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis' - line 1046: ' pointing up and the x-axis pointing to the right (in the positive direction,' - line 1047: ' negative down and to the left). The coordinate system for pixels in a' - line 1048: ' computer window, however, is reversed along the y-axis. (0,0) can be found' - line 1049: ' at the top left with the positive direction to the right horizontally and' - line 1050: ' down vertically.' - line 1051: ' coordinate-system-simple-shapes-title' - line 1052: ' coordinate-system-simple-shapes-p1x1' - line 1053: ' The vast majority of p5 programming examples are visual in nature. These' - line 1054: ' examples, at their core, involve drawing shapes and setting pixels. Let''s' - line 1055: ' begin by looking at four primitive shapes.' - line 1056: ' coordinate-system-simple-shapes-p2x1' - line 1057: ' For each shape, we will ask ourselves what information is required to' - line 1058: ' specify the location and size (and later color) of that shape and learn how' - line 1059: ' p5 expects to receive that information. In each of the diagrams below, we''ll' - line 1060: ' assume a window with a width of 100 pixels and height of 100 pixels.' - line 1061: ' coordinate-system-simple-shapes-p3x1' - line 1062: ' coordinate-system-simple-shapes-p3x2' - line 1063: ' coordinate-system-simple-shapes-p4x1' - line 1064: ' coordinate-system-simple-shapes-p4x2' - line 1065: ' coordinate-system-simple-shapes-p5x1' - line 1066: ' coordinate-system-simple-shapes-p5x2' - line 1067: ' , things become a bit more complicated. In p5, a rectangle is specified by' - line 1068: ' the coordinate for the top left corner of the rectangle, as well as its' - line 1069: ' width and height.' - line 1070: ' coordinate-system-simple-shapes-p6x1' - line 1071: ' A second way to draw a rectangle involves specifying the centerpoint, along' - line 1072: ' with width and height. If we prefer this method, we first indicate that we' - line 1073: ' want to use the ' - line 1074: ' coordinate-system-simple-shapes-p6x2' - line 1075: ' coordinate-system-simple-shapes-p7x1' - line 1076: ' Finally, we can also draw a rectangle with two points (the top left corner' - line 1077: ' and the bottom right corner). The mode here is ' - line 1078: ' coordinate-system-simple-shapes-p7x2' - line 1079: ' coordinate-system-simple-shapes-p8x1' - line 1080: ' coordinate-system-simple-shapes-p8x2' - line 1081: ' coordinate-system-simple-shapes-p8x3' - line 1082: ' coordinate-system-simple-shapes-p8x4' - line 1083: ' coordinate-system-simple-shapes-p8x5' - line 1084: ' coordinate-system-simple-shapes-p8x6' - line 1085: ' coordinate-system-simple-shapes-p9x1' - line 1086: ' Now let''s look at what some code with shapes in more complete form, with' - line 1087: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function' - line 1088: ' to specify the width and height of the canvas.' - line 1089: ' teach-desc' - line 1090: test-tutorial - line 1147: ' Libraries' - line 1148: ' core-libraries' - line 1149: ' community-libraries' - line 1180: ' p5.experience' - line 1181: ' Extensive library for p5.js that adds additional event-listening' - line 1182: ' functionality for creating canvas-based web applications.' - line 1183: ' p5.func' - line 1184: ' p5.func is a p5 extension that provides new objects and utilities for' - line 1185: ' function generation in the time, frequency, and spatial domains.' - line 1186: ' p5.geolocation' - line 1187: ' p5.geolocation provides techniques for acquiring, watching, calculating, and' - line 1188: ' geofencing user locations for p5.js.' - line 1189: ' p5.gibber' - line 1190: ' grafica.js' - line 1191: ' grafica.js lets you add simple but highly configurable 2D plots to your' - line 1192: ' p5.js sketches.' - line 1193: ' p5.gui' - line 1194: ' p5.localmessage' - line 1195: ' p5.localmessage provides a simple interface to send messages locally from' - line 1196: ' one sketch to another for easy multi-window sketching!' - line 1197: ' marching' - line 1198: ' mappa' - line 1199: ' Mappa provides a set of tools for working with static maps, tile maps, and' - line 1200: ' geo-data. Useful when building geolocation-based visual representations.' - line 1201: ' ml5.js' - line 1202: ' ml5.js builds on Tensorflow.js and provides friendly access to machine' - line 1203: ' learning algorithms and models in the browser.' - line 1204: ' p5.play' - line 1205: ' p5.play provides sprites, animations, input and collision functions for' - line 1206: ' games and gamelike applications.' - line 1207: ' p5.particle' - line 1208: ' The Particle and Fountain objects can be used to create data-driven effects' - line 1209: ' that are defined through user structures or JSON input and user-draw' - line 1210: ' functions.' - line 1211: ' p5.Riso' - line 1212: ' p5.Riso is a library for generating files suitable for Risograph printing.' - line 1213: ' It helps turn your sketches into multi-color prints.' - line 1214: ' rita.js' - line 1215: ' RiTa.js provides a set of natural language processing objects for generative' - line 1216: ' literature.' - line 1217: ' Rotating knobs' - line 1218: ' p5.scenemanager' - line 1219: ' p5.SceneManager helps you create sketches with multiple states / scenes.' - line 1220: ' Each scene is a like a sketch within the main sketch.' - line 1221: ' p5.screenPosition' - line 1222: ' p5.scribble' - line 1223: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based' - line 1224: ' on a port of the original Processing library' - line 1225: ' p5.serial' - line 1226: ' p5.serial enables serial communication between devices that support serial' - line 1227: ' (RS-232) and p5 sketches running in the browser.' - line 1228: ' Shape5' - line 1229: ' Shape5 is a 2D primative library for elementary students who are learning to' - line 1230: ' code for the first time.' - line 1231: ' p5.shape.js' - line 1232: ' p5.speech' - line 1233: ' p5.speech provides simple, clear access to the Web Speech and Speech' - line 1234: ' Recognition APIs, allowing for the easy creation of sketches that can talk' - line 1235: ' and listen.' - line 1236: ' p5.start2d.js' - line 1237: ' p5.tiledmap' - line 1238: ' p5.tiledmap provides drawing and helper functions to include maps in your' - line 1239: ' sketches.' - line 1240: ' p5.touchgui' - line 1241: ' tramontana' - line 1242: ' Tramontana is a platform for easily use many devices (iOS, Android,' - line 1243: ' tramontana Board, ...) to create interactive environments, interactive' - line 1244: ' spaces or just prototype experiences at scale and in space.' - line 1245: ' vida' - line 1246: ' Vida is a simple library that adds camera (or video) based motion detection' - line 1247: ' and blob tracking functionality to p5js.' - line 1248: ' p5.voronoi' - line 1249: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in' - line 1250: ' your p5.js sketches.' - line 1251: ' p5.3D' - line 1252: ' using-a-library-title' - line 1253: ' using-a-library1' - line 1254: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js' - line 1255: ' core functionality. There are two categories of libraries. Core libraries (' - line 1256: ' using-a-library3' - line 1257: ' ) are part of the p5.js distribution, while contributed libraries are' - line 1258: ' developed, owned, and maintained by members of the p5.js community.' - line 1259: ' using-a-library4' - line 1260: ' To include a library in your sketch, link it into your HTML file, after you' - line 1261: ' have linked in p5.js. An example HTML file might look like this' - line 1262: ' create-your-own-title' - line 1263: ' create-your-own1' - line 1264: ' create-your-own2' - line 1265: ' create-your-own3' - line 1266: ' create-your-own4' - line 1267: ' If you have created a library and would like to have it included on this' - line 1268: ' page, submit this form!' - line 1420: ' community-title' - line 1421: ' community-statement-title' - line 1422: ' community-statement1' - line 1423: ' p5.js is a community interested in exploring the creation of art and design' - line 1424: ' with technology.' - line 1425: ' community-statement2' - line 1426: ' We are a community of, and in solidarity with, people from every gender' - line 1427: ' identity and expression, sexual orientation, race, ethnicity, language,' - line 1428: ' neuro-type, size, ability, class, religion, culture, subculture, political' - line 1429: ' opinion, age, skill level, occupation, and background. We acknowledge that' - line 1430: ' not everyone has the time, financial means, or capacity to actively' - line 1431: ' participate, but we recognize and encourage involvement of all kinds. We' - line 1432: ' facilitate and foster access and empowerment. We are all learners.' - line 1433: ' community-statement3' - line 1434: ' We like these hashtags' - line 1435: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore' - line 1436: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of' - line 1437: ' course).' - line 1438: ' in-practice-title' - line 1439: ' in-practice1' - line 1440: ' in-practice2' - line 1441: ' We insist on actively engaging with requests for feedback regardless of' - line 1442: ' their complexity.' - line 1443: ' in-practice3' - line 1444: ' We welcome newcomers and prioritize the education of others. We strive to' - line 1445: ' approach all tasks with the enthusiasm of a newcomer. Because we believe' - line 1446: ' that newcomers are just as valuable in this effort as experts.' - line 1447: ' in-practice4' - line 1448: ' We consistently make the effort to actively recognize and validate multiple' - line 1449: ' types of contributions.' - line 1450: ' in-practice5' - line 1451: ' in-times-conflict-title' - line 1452: ' in-times-conflict1' - line 1453: ' in-times-conflict2' - line 1454: ' in-times-conflict3' - line 1455: ' We admit when we''re wrong, apologize, and accept responsibility for our' - line 1456: ' actions.' - line 1457: ' in-times-conflict4' - line 1458: ' in-times-conflict5' - line 1459: ' in-times-conflict6' - line 1460: ' in-times-conflict7' - line 1461: ' in-the-future-title' - line 1462: ' in-the-future1' - line 1463: ' notes-title' - line 1464: ' notes1' - line 1465: ' notes2' - line 1466: ' notes3' - line 1467: ' notes4' - line 1468: ' notes5' - line 1469: ' contribute-title' - line 1470: ' contribute1' - line 1471: ' Our community is always looking for enthusiasts to help in all different' - line 1472: ' ways.' - line 1473: ' develop-title' - line 1474: ' develop1' - line 1475: ' develop2' - line 1476: ' develop3' - line 1477: ' develop4' - line 1478: ' develop5' - line 1479: ' document-title' - line 1480: ' document1' - line 1481: ' document2' - line 1482: ' document3' - line 1483: ' document4' - line 1484: ' document5' - line 1485: ' teach-title' - line 1486: ' teach1' - line 1487: ' create-title' - line 1488: ' create1' - line 1489: ' create2' - line 1490: ' create3' - line 1491: ' donate-title' - line 1492: ' donate1' - line 1493: ' donate2' - line 1494: ' donate3' - line 1495: ' contributors-conference-title' - line 1496: ' contributors-conference1' - line 1497: ' While most work happens online, we also convene IRL. We''ve had two' - line 1498: ' contributors conferences held at the' - line 1499: ' contributors-conference2' - line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,' - line 1501: ' developers, educators, and got together to advance the p5.js project.' - line 1502: ' participants-title' - line 1503: ' support-title' - line 1504: ' support1' - line 1505: ' support2' - line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,' - line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of' - line 1508: ' arts, science, technology, and culture.' - line 1509: ' support3' - line 1510: ' support4' - line 1511: ' support5' - line 1512: ' support6' - line 1513: ' mailing-list-title' - line 1514: ' mailing-list-1' - line 1515: ' Enter your email address to receive occasional updates from the Processing' - line 1516: ' Foundation.' - line 1517: ' 2015contributors-conference-title' - line 1518: ' 2015contributors-conference-date' - line 1519: ' 2015contributors-conference1' - line 1520: ' 2015contributors-conference2' - line 1521: ' , advancing the code, documentation, and community outreach tools of the' - line 1522: ' p5.js programming environment. Participants came from as far away as Hong' - line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working' - line 1524: ' professionals in the fields of creative technology, interaction design, and' - line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and' - line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.' - line 1527: ' 2015contributors-conference3' - line 1528: ' 2015contributors-conference-diversity-title' - line 1529: ' 2015contributors-conference-diversity1' - line 1530: ' Alongside technical development, one of the main focuses of this conference' - line 1531: ' was outreach, community, and diversity. The conference began with a panel' - line 1532: ' 2015contributors-conference-diversity2' - line 1533: ' Diversity' - line 1534: ' the Internet' - line 1535: ' 2015contributors-conference-diversity3' - line 1537: ' 2015contributors-conference-diversity5' - line 1538: ' 2015contributors-conference-diversity6' - line 1539: ' 2015contributors-conference-diversity7' - line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie' - line 1541: ' Mellon University. Speakers included' - line 1542: ' 2015contributors-conference-diversity8' - line 1543: ' 2015contributors-conference-diversity9' - line 1545: ' 2015cc_2' - line 1546: ' 2015cc_3' - line 1547: ' 2015cc_4' - line 1548: ' Woman expressively speaks into a microphone while two male collaborators' - line 1549: ' look on' - line 1550: ' 2015cc_5' - line 1551: ' 2015cc_6' - line 1553: ' Participants sit in a circle around a white board with sticky notes on it' - line 1554: ' while a female student speaks into a microphone' - line 1555: ' 2015cc_8' - line 1556: ' Participants sit around a table looking at each others laptops and compare' - line 1557: ' code' - line 1558: ' 2015cc_9' - line 1559: ' 2015cc_10' - line 1561: ' group of participants with laptops look at her powerpoint in a classroom' - line 1562: ' 2015cc_11' - line 1563: ' Woman speaks at a podium in an auditorium while three participants sit on' - line 1564: ' the stage and another three are skyping in on the stage screen' - line 1565: ' 2015cc_12' - line 1566: ' 2015cc_13' - line 1567: ' 2015cc_14' - line 1569: ' 2019contributors-conference-title' - line 1570: ' 2019contributors-conference-date' - line 1571: ' 2019contributors-conference1' - line 1572: ' 2019contributors-conference2' - line 1573: ' , advancing the code, documentation, and community outreach tools and' - line 1574: ' exploring the current landscape of the p5.js programming environment.' - line 1575: ' Comprising a diverse range of participants within the fields of creative' - line 1577: ' at fostering dialogue through a multidisciplinary lens. Working groups' - line 1578: ' focused on several topic areas' - line 1579: ' Landscape of Creative Tech; and Internationalization.' - line 1580: ' 2019contributors-conference3' - line 1581: ' 2019contributors-conference4' - line 1582: ' outputs' - line 1583: ' output1' - line 1585: ' octagon girds for p5.js. Created by Aren Davey.' - line 1586: ' output2' - line 1587: ' . A set of template files for building a multi-device, multiplayer game' - line 1588: ' where multiple clients can connect to a specified host page. Created by L05.' - line 1589: ' output3' - line 1590: ' output3-1' - line 1591: ' , testing early implementations of softCompile, OSC interfacing and added' - line 1592: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj' - line 1593: ' environment! Created by Ted Davis.' - line 1594: ' output4' - line 1595: ' A panel on Blackness and Gender in Virtual Space led by American Artist,' - line 1596: ' with shawné michaelain holloway and LaJuné McMillian.' - line 1597: ' output5' - line 1598: ' output6' - line 1599: ' output6-1' - line 1600: ' output6-2' - line 1601: ' output7' - line 1602: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and' - line 1603: ' Jon Chambers.' - line 1604: ' output8' - line 1605: ' output8-1' - line 1606: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian' - line 1607: ' Ye, Dorothy R. Santos, and Yasheng She.' - line 1608: ' output9' - line 1609: ' output9-1' - line 1610: ' output10' - line 1611: ' An overhaul of the p5.js website for accessibility. Including updates for' - line 1612: ' screen reader accessibility, and improvements to the home, download, getting' - line 1613: ' started, and reference pages. With contributions from Claire Kearney-Volpe,' - line 1614: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren' - line 1615: ' McCarthy, and Evelyn Masso.' - line 1616: ' output11' - line 1617: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,' - line 1618: ' Sona Lee, Ted Davis, and Carlos Garcia.' - line 1619: ' output12' - line 1620: ' output13' - line 1621: ' A design of the p5.js library system for the p5 Editor. Created by Cassie' - line 1622: ' Tarakajian and Luca Damasco.' - line 1623: ' output14' - line 1624: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and' - line 1625: ' Lauren Valley.' - line 1626: ' output15' - line 1627: ' 2019cc_1' - line 1628: ' 2019cc_2' - line 1629: ' 2019cc_3' - line 1630: ' 2019cc_4' - line 1631: ' 2019cc_5' - line 1632: ' 2019cc_6' - line 1633: ' 2019cc_7' - line 1634: ' 2019cc_8' - line 1635: ' 2019cc_9' - line 1636: ' Participant speaks at a podium in front of projected text about the problem' - line 1637: ' with anonymyzing data' - line 1638: ' 2019cc_10' - line 1639: ' Person with a microphone speaking to fellow participants in front of text' - line 1640: ' that reads p5.js will not add any new features except those that increase' - line 1641: ' access' - line 1758: ' book-4-order-b' - line 1759: ' book-5-title' - line 1760: ' book-5-authors' - line 1762: ' book-5-pages' - line 1763: ' book-5-type' - line 1764: ' book-5-description' - line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the' - line 1767: ' will acquire from this book are highly transferable to a myriad of' - line 1768: ' industries and can be used towards building web applications, programmable' - line 1769: ' robots, or generative art.' - line 1771: ' book-5-order-b' - line 1800: ' Examples' - line 1801: ' back-examples' - line 1802: ' Structure' - line 1815: ' Instance_Mode' - line 1816: ' Dom' - line 1817: ' Drawing' - line 1818: ' Transform' - line 1821: ' Input' - line 1822: ' Advanced_Data' - line 1823: ' Sound' - line 1825: ' Hello_P5' - line 1829: ' Reference' - line 2005: ' showcase-title' - line 2006: ' showcase-intro1' - line 2007: ' showcase-intro2' - line 2008: ' showcase-intro3' - line 2017: ' showcase-featuring' - line 2018: ' project-tag-art' - line 2019: ' project-tag-design' - line 2020: ' project-tag-code' - line 2022: ' project-tag-documentation' - line 2023: ' project-tag-game' - line 2024: ' project-tag-library' - line 2025: ' project-tag-organizing' - line 2026: ' project-tag-tool' - line 2027: ' project-tag-tutorial' - line 2028: ' project-roni' - line 2029: ' credit-roni' - line 2030: ' description-roni' - line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a' - line 2032: ' plotter and pens.' - line 2033: ' project-phuong' - line 2034: ' credit-phuong' - line 2045: ' credit-qianqian' - line 2046: ' description-qianqian' - line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,' - line 2048: ' and technology, including p5.js tutorials for beginners. Available on' - line 2049: ' YouTube, Instagram, Bilibili, and TikTok.' - line 2050: ' project-casey-louise' - line 2053: ' project-moon-xin' - line 2054: ' credit-moon-xin' - line 2055: ' description-moon-xin' - line 2056: ' Browser-based moving posters that use graphical systems, transformation' - line 2057: ' methods, and p5.js to address the connotations of a word less than 8' - line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative' - line 2059: ' Systems) at the University of Georgia.' - line 2060: ' created-by' - line 2061: ' pronouns-female' - line 2062: ' creator-from-roni-cantor' - line 2071: ' some more traditional forms of art—while still coding and playing with' - line 2072: ' robots.' - line 2073: ' project-a-1-2-roni-cantor' - line 2074: ' project-a-1-3-roni-cantor' - line 2075: ' project-a-1-4-roni-cantor' - line 2076: ' project-q-2' - line 2077: ' project-a-2-1-roni-cantor' - line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear' - line 2079: ' interpolation) formulas and display the visuals in the' - line 2080: ' project-a-2-2-roni-cantor' - line 2086: ' this information to the plotter with a program called' - line 2087: ' project-a-2-5-roni-cantor' - line 2088: ' project-q-3' - line 2090: ' project-q-4' - line 2091: ' Did you face any challenges working on this project? If so, how did you' - line 2092: ' overcome them?' - line 2093: ' project-a-4-roni-cantor' - line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really' - line 2104: ' project-a-1-1-qianqian' - line 2105: ' project-a-1-2-qianqian' - line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free' - line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with' - line 2108: ' different colors.' - line 2109: ' project-a-2-1-qianqian' - line 2110: ' This project started with an idea of teaching my mom, who lives in China and' - line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on' - line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why' - line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily' - line 2114: ' due to the lack of free creative coding education resources. Most of the' - line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js' - line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are' - line 2117: ' inaccessible in China because of internet censorship.' - line 2118: ' project-a-2-2-qianqian' - line 2119: ' project-a-2-3-qianqian' - line 2120: ' , but the more I watched coding tutorials online, the more I realized how' - line 2121: ' difficult it is to find other womxn and people of color teaching coding,' - line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to' - line 2123: ' creative coding.' - line 2124: ' project-a-2-4-qianqian' - line 2125: ' I am working on opening up the video channels to other Chinese creatives who' - line 2126: ' want to contribute to the educational resource together, like interviews and' - line 2127: ' guest tutorials. If you are interested in teaching/talking about creative' - line 2128: ' coding in Mandarin, HMU!' - line 2129: ' project-a-3-1-qianqian' - line 2130: ' project-a-3-2-qianqian' - line 2131: ' project-a-4-1-qianqian' - line 2132: ' Learning to code in a second language was difficult and the lack of' - line 2133: ' community made this process even harder. I hope to speak from my experience' - line 2134: ' as a beginner and someone who once felt like an outsider to the creative' - line 2135: ' coding and video tutorial world.' - line 2136: ' project-a-4-2-qianqian' - line 2137: ' I spend a lot of time researching the latest technology for my videos. In' - line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to' - line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get' - line 2140: ' started making instructional videos.' - line 2141: ' project-a-4-3-qianqian' - line 2142: ' Another issue I came across was my own fear of putting myself online. I' - line 2143: ' first had to get over my anxiety of making mistakes in the videos or' - line 2144: ' receiving negative comments online. Often womxn and people of color are' - line 2145: ' targets for online harassment. I’m hoping to help set an example for other' - line 2146: ' womxn and people of color that it’s ok to put yourselves online and' - line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will' - line 2148: ' be able to stop online harassment by creating strong diverse communities.' - line 2149: ' project-a-5-1-qianqian' - line 2150: ' project-a-5-2-qianqian' - line 2151: ' creator-from-phuong' - line 2152: ' project-a-1-1-phuong' - line 2153: ' link-1-phuong' - line 2154: ' link-2-phuong' - line 2155: ' link-3-phuong' - line 2156: ' project-a-1-2-phuong' - line 2157: ' project-a-1-3-phuong' - line 2158: ' I was taking a course at the School of Machines in Berlin this summer' - line 2159: ' called! "' - line 2160: ' project-a-1-4-phuong' - line 2161: ' project-a-2-1-phuong' - line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites' - line 2163: ' for Airi and the ghosts were drawn on an iPad app called' - line 2164: ' project-a-2-2-phuong' - line 2165: ' project-a-2-3-phuong' - line 2166: ' project-a-2-4-phuong' - line 2167: ' p5-sketch-by-chjno-phuong' - line 2168: ' project-a-2-5-phuong' - line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was' - line 2170: ' detected, the scrolling speed would change to make an illusion of Airi' - line 2171: ' flying up. When the user does not do anything, the scrolling speed is' - line 2172: ' negative, which makes it look like Airi is falling down.' - line 2173: ' project-a-2-6-phuong' - line 2174: ' project-a-2-7-phuong' - line 2175: ' project-a-3-1-phuong' - line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks' - line 2177: ' and classes with the' - line 2178: ' project-a-3-2-phuong' - line 2179: ' project-a-3-3-phuong' - line 2180: ' project-a-3-4-phuong' - line 2181: ' project-a-4-1-phuong' - line 2182: ' There were a lot of challenges simply because p5.js was something new to me.' - line 2183: ' I did not work much with JavaScript in general before. Reading documentation' - line 2184: ' and searching for similar examples helped a lot.' - line 2185: ' project-a-5-1-phuong' - line 2186: ' school-of-machines-phuong' - line 2187: ' project-a-5-2-phuong' - line 2188: ' ! They try hard to connect the most creative people in the world and they do' - line 2189: ' it well so far. ❤️' - line 2190: ' pronouns-male' - line 2191: ' creator-from-chung' - line 2192: ' link-1-casey-louise' - line 2193: ' link-2-casey-louise' - line 2194: ' link-1-chung' - line 2195: ' link-2-chung' - line 2196: ' link-3-chung' - line 2197: ' project-a-1-1-chung' - line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College' - line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)' - line 2200: ' and motion graphics.' - line 2201: ' project-a-1-2-chung' - line 2202: ' project-a-1-3-chung' - line 2203: ' project-a-2-1-chung' - line 2204: ' This summer, I gave myself a challenge of making typographic posters with' - line 2205: ' coding, and this is one of the posters I made. I didn’t know until very' - line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching' - line 2207: ' dan-shiffman-matterjs-tutorial' - line 2208: ' project-a-2-2-chung' - line 2209: ' project-a-3-1-chung' - line 2210: ' There are many things I love about p5.js such as the online community and' - line 2211: ' beginner friendliness. What I really like right now is the' - line 2212: ' project-a-3-2-chung' - line 2213: ' , with which I can not only work online for myself but also share URLs' - line 2214: ' quickly in the present mode. For this project in particular, I had to do a' - line 2215: ' lot of testing on my phone, and it was much easier and quicker than' - line 2216: ' committing to GitHub.' - line 2217: ' project-a-4-1-chung' - line 2218: ' project-a-4-2-chung' - line 2219: ' project-a-4-3-chung' - line 2220: ' project-a-5-1-chung' - line 2221: ' As mentioned above, if you want to render out frames and video files out of' - line 2222: ' p5.js sketches, check out my' - line 2223: ' project-a-5-2-chung' - line 2224: ' creator-from-casey-louise' - line 2225: ' project-a-1-1-casey-louise' - line 2226: ' Casey' - line 2227: ' interactive spaces, physical and digital.' - line 2228: ' project-a-1-2-casey-louise' - line 2229: ' Louise' - line 2230: ' interactive spaces based on sensor technologies.' - line 2231: ' project-a-1-3-casey-louise' - line 2232: ' Casey' - line 2233: ' I had been dabbling in' - line 2234: ' project-a-1-4-casey-louise' - line 2235: ' project-a-1-5-casey-louise' - line 2236: ' Louise' - line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for' - line 2238: ' me.' - line 2239: ' project-a-2-1-casey-louise' - line 2240: ' Casey' - line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open' - line 2242: ' source, storytelling, and learning resource projects at ITP called' - line 2243: ' project-a-2-2-casey-louise' - line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I' - line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource' - line 2246: ' for others to learn. When I told Louise about the project, she was' - line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been' - line 2248: ' great about making sure the project is a learning resource and not just a' - line 2249: ' collection of examples.' - line 2250: ' project-a-3-1-casey-louise' - line 2251: ' project-a-3-2-casey-louise' - line 2252: ' project-a-3-3-casey-louise' - line 2253: ' project-a-3-4-casey-louise' - line 2254: ' project-a-3-5-casey-louise' - line 2255: ' project-a-4-1-casey-louise' - line 2256: ' Casey' - line 2257: ' reaching out to amazing people, asking questions, and asking for permission' - line 2258: ' to use their examples in our project.' - line 2259: ' adam-ferris-repo-casey-louise' - line 2260: ' project-a-4-2-casey-louise' - line 2261: ' project-a-4-3-casey-louise' - line 2262: ' project-a-4-4-casey-louise' - line 2263: ' webgl-casey-louise' - line 2264: ' project-a-4-5-casey-louise' - line 2265: ' project-a-4-6-casey-louise' - line 2266: ' Louise' - line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam' - line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can' - line 2269: ' understand how to implement it, so it was as much a technical challenge as' - line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew' - line 2271: ' inspiration from the way the' - line 2272: ' openframeworks-book-casey-louise' - line 2273: ' project-a-4-7-casey-louise' - line 2274: ' project-a-5-1-casey-louise' - line 2275: ' project-a-5-2-casey-louise' - line 2276: ' pronouns-nonbinary' - line 2277: ' creator-from-moon' - line 2278: ' posters-by' - line 2279: ' project-a-1-1-moon' - line 2280: ' Moon' - line 2281: ' summer, I taught a graphic design course in the University of Georgia' - line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am' - line 2283: ' planning to teach and to study digital platforms at UGA.' - line 2284: ' project-a-1-2-moon' - line 2285: ' project-a-1-3-moon' - line 2286: ' project-a-1-4-moon' - line 2287: ' pcd-la-moon' - line 2288: ' project-a-1-5-moon' - line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent' - line 2290: ' teaching and learning experience.' - line 2291: ' project-a-2-1-moon' - line 2292: ' codetrain-moon' - line 2293: ' project-a-2-2-moon' - line 2294: ' p5-reference-moon' - line 2295: ' project-a-2-3-moon' - line 2296: ' project-a-3-1-moon' - line 2297: ' project-a-3-2-moon' - line 2298: ' project-a-3-3-moon' - line 2299: ' project-a-3-4-moon' - line 2300: ' . I was able to use and to teach this tool to visualize various ideas about' - line 2301: ' time in motion.' - line 2302: ' project-a-4-1-moon' - line 2303: ' It was challenging for me, a beginner, to understand the overall structure' - line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a' - line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I' - line 2306: ' understood the p5.js structure and code with strong constraints I set up. It' - line 2307: ' was an excellent teaching and learning experience.' - line 2308: ' project-a-5-1-moon' - line 2309: ' project-a-5-2-moon' - line 2310: teach - line 2311: ' teach-title2' - line 2312: ' teach-intro1' - line 2313: ' Every teaching has its own unique goals, messages, conditions, and' - line 2314: ' environments. ' - line 2315: ' teach-intro2' - line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to' - line 2317: ' better connect the p5.js learner and educator communities around the world. ' - line 2318: ' teach-intro3' - line 2319: ' teach-intro4' - line 2320: ' teach-heading' - line 2321: ' teach-search-filter' - line 2322: ' teach-filter1' - line 2323: ' teach-filter1-label1' - line 2324: ' teach-filter1-label2' - line 2325: ' teach-filter1-label3' - line 2326: ' teach-filter1-label4' - line 2327: ' teach-filter1-label5' - line 2328: ' teach-filter1-label6' - line 2329: ' teach-filter1-label7' - line 2330: ' teach-filter1-label8' - line 2331: ' teach-filter1-label9' - line 2332: ' teach-filter1-label10' - line 2333: ' teach-filter1-label11' - line 2334: ' teach-filter1-label12' - line 2335: ' teach-filter1-label13' - line 2336: ' teach-filter1-label14' - line 2337: ' teach-filter1-label15' - line 2338: ' teach-filter1-label16' - line 2339: ' teach-filter2' - line 2340: ' teach-filter2-label1' - line 2341: ' teach-filter2-label2' - line 2342: ' teach-filter2-label3' - line 2343: ' teach-filter2-label4' - line 2344: ' teach-filter2-label5' - line 2345: ' teach-filter2-label6' - line 2346: ' teach-filter2-label7' - line 2347: ' teach-filter3' - line 2348: ' teach-filter4' - line 2349: ' teach-filter4-label1' - line 2350: ' teach-filter4-label2' - line 2351: ' teach-filter4-label3' - line 2352: ' teach-case-subtitle1' - line 2353: ' teach-case-subtitle2' - line 2354: ' teach-case-subtitle3' - line 2355: ' teach-case-subtitle4' - line 2356: ' teach-case-subtitle5' - line 2357: ' teach-case1-title' - line 2358: ' teach-case1-lead-name' - line 2359: ' teach-case1-content1' - line 2360: ' teach-case1-content1-1' - line 2361: ' teach-case1-content2' - line 2362: ' teach-case1-content3' - line 2363: ' teach-case1-content4' - line 2364: ' To introduce a new public to programming through fun and compelling' - line 2365: ' examples. ' - line 2366: ' teach-case1-content5' - line 2367: ' Method' - line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web' - line 2369: ' editor. I was teaching using a video projector as well as a board.' - line 2370: ' teach-case1-content5-1' - line 2371: ' Materials' - line 2372: ' links available in ' - line 2373: ' teach-case2-title' - line 2374: ' Making The Thing that Makes the Thing' - line 2375: ' with p5.js' - line 2376: ' teach-case2-lead-name' - line 2377: ' teach-case2-content1' - line 2378: ' teach-case2-content1-1' - line 2379: ' teach-case2-content2' - line 2380: ' Our participants included art/design students & professionals, creative' - line 2381: ' coding enthusiasts. We had close to 50 participants.' - line 2382: ' teach-case2-content3' - line 2383: ' teach-case2-content4' - line 2384: ' To explore generative art & design and recreate some classical works' - line 2385: ' with p5.js. ' - line 2386: ' teach-case2-content5' - line 2387: ' teach-case2-content5-1' - line 2388: ' teach-case2-content5-2' - line 2389: ' teach-case2-content5-3' - line 2390: ' teach-case2-content5-4' - line 2391: ' teach-case2-content5-5' - line 2392: ' teach-case3-title' - line 2393: ' teach-case3-lead-name' - line 2394: ' teach-case3-speech' - line 2395: ' teach-case3-content1' - line 2396: ' teach-case3-content1-1' - line 2397: ' teach-case3-content2' - line 2398: ' Our participants included art/design students & professionals, creative' - line 2399: ' coding enthusiasts. We had close to 50 participants.' - line 2400: ' teach-case3-content3' - line 2401: ' teach-case3-content4' - line 2402: ' To build a teacher and student community around p5 for middle and high' - line 2403: ' school.' - line 2404: ' teach-case3-content5' - line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different' - line 2406: ' methods and materials. Most used some sort of slides or documentation, some' - line 2407: ' live coding using an editor, with work time for participant to remix.' - line 2408: ' teach-case3-content5-1' - line 2409: ' teach-case3-content5-2' - line 2410: ' teach-case3-content5-3' - line 2411: ' teach-case4-title' - line 2412: ' teach-case4-lead-name' - line 2413: ' teach-case4-speech' - line 2414: ' teach-case4-content1' - line 2415: ' teach-case4-content1-1' - line 2416: ' teach-case4-content2' - line 2417: ' I had around 16 students in the workshop, and a team including 3 people from' - line 2418: ' the PlusCode festival, and one person at the venue.' - line 2419: ' teach-case4-content3' - line 2420: ' teach-case4-content4' - line 2421: ' Introduction to beginners and artists of graphic web programming and open' - line 2422: ' source, using p5.js, in Spanish ' - line 2423: ' teach-case4-content5' - line 2424: ' teach-case4-content5-1' - line 2425: ' teach-case4-content5-2' - line 2426: ' teach-case4-content5-3' - line 2427: ' teach-case4-content5-4' - line 2428: ' teach-case5-title' - line 2429: ' teach-case5-lead-name' - line 2430: ' teach-case5-speech' - line 2431: ' My greatest source of uncertainty in developing the workshop was whether it' - line 2432: ' was trying to teach art to programmers or to teach programming to artists.' - line 2433: ' teach-case5-content1' - line 2434: ' teach-case5-content1-1' - line 2435: ' teach-case5-content1-2' - line 2436: ' teach-case5-content1-3' - line 2437: ' teach-case5-content2' - line 2438: ' teach-case5-content3' - line 2439: ' teach-case5-content4' - line 2440: ' To introduce p5.js to artists with little or no programming experience and' - line 2441: ' to suggest one way an analogue practice can migrate to a digital form.' - line 2442: ' teach-case5-content5' - line 2443: ' A printed workbook with activities that used the p5.js web editor to show' - line 2444: ' how translate an physical drawing into a digital drawing.' - line 2445: ' teach-case5-content5-1' - line 2446: ' teach-case5-content5-2' - line 2447: ' teach-case5-content5-3' - line 2448: ' teach-case6-title' - line 2449: ' teach-case6-lead-name' - line 2450: ' teach-case6-speech' - line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in' - line 2452: ' your everyday life!' - line 2453: ' teach-case6-content1' - line 2454: ' teach-case6-content1-1' - line 2455: ' teach-case6-content2' - line 2456: ' teach-case6-content3' - line 2457: ' teach-case6-content4' - line 2458: ' teach-case6-content5' - line 2459: ' teach-case6-content5-1' - line 2460: ' teach-case6-content5-2' - line 2461: ' teach-case6-content5-3' - line 2462: ' teach-case6-content5-4' - line 2463: ' teach-case6-content5-5' - line 2464: ' teach-case7-title' - line 2465: ' teach-case7-lead-name' - line 2466: ' teach-case7-speech' - line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you' - line 2468: ' to give it a try!' - line 2469: ' teach-case7-content1' - line 2470: ' teach-case7-content1-1' - line 2471: ' teach-case7-content2' - line 2472: ' teach-case7-content3' - line 2473: ' teach-case7-content4' - line 2474: ' teach-case7-content5' - line 2475: ' teach-case7-content5-1' - line 2476: ' teach-case8-title' - line 2477: ' teach-case8-lead-name' - line 2478: ' teach-case8-content1' - line 2479: ' teach-case8-content1-1' - line 2480: ' teach-case8-content2' - line 2481: ' teach-case8-content3' - line 2482: ' teach-case8-content4' - line 2483: ' teach-case8-content5' - line 2484: ' teach-case8-content5-1' - line 2485: ' teach-case8-content5-2' - line 2486: ' teach-case9-title' - line 2487: ' teach-case9-lead-name' - line 2488: ' teach-case9-content1' - line 2489: ' teach-case9-content1-1' - line 2490: ' teach-case9-content2' - line 2491: ' Students at Interactive Telecommunications Program, New York University. 16' - line 2492: ' people.' - line 2493: ' teach-case9-content3' - line 2494: ' teach-case9-content4' - line 2495: ' The goal of this class is to learn and understand common machine learning' - line 2496: ' techniques and apply them to generate creative outputs in the browser using' - line 2497: ' ml5.js and p5.js.' - line 2498: ' teach-case9-content5' - line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and' - line 2500: ' presentations. I used ' - line 2501: ' teach-case9-content5-1' - line 2502: ' teach-case9-content5-2' - line 2503: ' teach-case9-content5-3' - line 2504: ' teach-case10-title' - line 2505: ' teach-case10-lead-name' - line 2506: ' teach-case10-content1' - line 2507: ' teach-case10-content3' - line 2508: ' teach-case10-content4' - line 2509: ' Introduce learners (potentially with no coding experiences at all) to the' - line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding' - line 2511: ' and enable them to pursue own projects in a safe environment.' - line 2512: ' teach-case10-content5' - line 2513: ' p5.js source code (for the introductory project), JavaScript source code' - line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in' - line 2515: ' .pdf format, all hosted publicly on GitHub. ' - line 2516: ' teach-case10-content5-1' - line 2517: ' teach-case10-content5-2' - line 2518: ' teach-case11-title' - line 2519: ' teach-case11-lead-name' - line 2520: ' teach-case11-content1' - line 2521: ' teach-case11-content1-1' - line 2522: ' teach-case11-content2' - line 2523: ' teach-case11-content3' - line 2524: ' teach-case11-content4' - line 2525: ' Over the course of three workshops, we will draw and create patterns using' - line 2526: ' p5.js, an open-source graphical library; we will learn and apply' - line 2527: ' computational concepts to transform patterns and finally, we will bring a' - line 2528: ' weaving to life with electronic microcontrollers.' - line 2529: ' teach-case11-content5' - line 2530: ' teach-case11-content5-1' - line 2531: ' Materials' - line 2532: ' pattern weaving tool.' - line 2533: ' teach-case11-content5-2' - line 2534: ' teach-case11-content5-3' - line 2535: ' teach-case11-content5-4' - line 2536: ' teach-case11-content5-5' - line 2537: ' teach-case12-title' - line 2538: ' teach-case12-lead-name' - line 2539: ' teach-case12-speech' - line 2540: ' I''m working on a new series of coding class for Disabled students in South' - line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold' - line 2542: ' workshops in December 2020. The project is supported by the Open Society' - line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture' - line 2544: ' Center.' - line 2545: ' teach-case12-content1' - line 2546: ' teach-case12-content1-1' - line 2547: ' teach-case12-content2' - line 2548: ' teach-case12-content3' - line 2549: ' teach-case12-content4' - line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming' - line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.' - line 2552: ' teach-case12-content5' - line 2553: ' We used p5.js Web editor and code examples on the website. We also used' - line 2554: ' dice, playing cards and various paper tools to help students learn about' - line 2555: ' coding concepts.' - line 2556: ' teach-case12-content5-1' - line 2557: ' teach-case12-content5-2' - line 598: ' color-custom-ranges-li1x2' - line 601: ' color-custom-ranges-li2x2' - line 84: ' copyright1' - line 432: '' - line 434: '' - line 435: ' getting-started-in-webgl-coords-and-transform-heading3' - line 556: ' getting-started-in-webgl-coords-and-transform-glossary-term2-definition' - line 557: ' getting-started-in-webgl-coords-and-transform-glossary-term3-title' - line 558: ' getting-started-in-webgl-coords-and-transform-glossary-term3-definition' - line 560: ' getting-started-in-webgl-coords-and-transform-glossary-term4-definition' - line 561: ' getting-started-in-webgl-coords-and-transform-glossary-term5-title' - line 562: ' getting-started-in-webgl-coords-and-transform-glossary-term5-definition' - line 563: ' getting-started-in-webgl-coords-and-transform-glossary-term6-title' - line 564: ' getting-started-in-webgl-coords-and-transform-glossary-term6-definition' - line 570: '' - line 571: '' - line 572: '' - line 574: '' - line 575: '' - line 576: '' - line 577: '' - line 578: '' - line 579: '' - line 584: '' - line 585: '' - line 586: '' - line 595: ' to create geometry from scratch.' - line 607: ' There are other methods that offer greater control of the geometry. A shape can be defined point-by-point using' - line 615: '' - line 623: '' - line 624: ' getting-started-in-webgl-appearance-p0x1' - line 625: ' Creating in 3D is about more than just geometry. Cameras, lights, and materials are an' - line 632: ' getting-started-in-webgl-appearance-toc3' - line 633: ' getting-started-in-webgl-appearance-toc4' - line 634: ' getting-started-in-webgl-appearance-toc5' - line 635: '' - line 636: ' getting-started-in-webgl-appearance-heading1' - line 637: '' - line 638: ' getting-started-in-webgl-appearance-p1x1' - line 642: ' class="code" href="{{root}}/reference/#/p5/ortho">ortho().' - line 643: ' getting-started-in-webgl-appearance-p2x1' - line 644: ' A perspective camera skews objects so they appear to get smaller as they get further away, vanishing' - line 645: ' at a single point in the distance. This is in contrast to an orthographic camera, where the ' - line 646: ' geometry stays the same size as it gets further away and has no vanishing point. ' - line 647: ' getting-started-in-webgl-appearance-p3x1' - line 648: ' One setting that we can change with a perspective camera is the field-of-view, or FOV. This is the ' - line 649: ' term that is used to describe how much our camera can see, measured as an angle. In simple examples it might appear' - line 654: ' The near plane defines the minimum distance that geometry must be from the camera to be rendered. The far plane defines the maximum' - line 657: ' getting-started-in-webgl-appearance-p5x1' - line 658: ' Cameras can be moved by passing arguments to camera(), but constantly moving and adjusting the camera in code can be tedious, especially when you are experimenting with' - line 659: ' ideas. p5.js has a special camera method, orbitControl(), that can be used to zoom, pan,' - line 661: ' and position the camera using the mouse.' - line 662: ' getting-started-in-webgl-appearance-p6x1' - line 663: ' A scene can have multiple cameras, but only one camera can be active at a time. Sketches in p5.js will default' - line 664: ' to having a single perspective camera, but that can be changed by calling either perspective()' - line 667: ' position of the active camera and the position that the camera is looking at.' - line 668: '' - line 669: ' getting-started-in-webgl-appearance-heading2' - line 671: ' getting-started-in-webgl-appearance-p7x1' - line 672: ' Lighting is another essential part of a 3D scene. To be able to convey shape and depth in 3D is necessary to' - line 673: ' have a light source. p5.js has a few different types of light that can be used in a sketch.' - line 674: '' - line 675: ' getting-started-in-webgl-appearance-lighting-list1' - line 676: ' Ambient light makes everything display a little brighter, with no consideration for light position or' - line 677: ' direction.' - line 678: ' getting-started-in-webgl-appearance-lighting-list2' - line 679: ' A directional light shines from one direction, which can be especially useful for communicating depth in' - line 680: ' a scene, or when a scene needs a ''sun'' light. This method accepts a color and direction.' - line 681: ' getting-started-in-webgl-appearance-lighting-list3' - line 682: ' A point light emits from a single point in all directions, similar to something like a lightbulb. This' - line 683: ' method accepts a color and a position for the light.' - line 684: ' getting-started-in-webgl-appearance-lighting-list4' - line 685: ' A spot light emits from a single point in a single direction. This light is cast in a conical shape and' - line 686: ' it''s radius and concentration can be adjusted.' - line 687: ' getting-started-in-webgl-appearance-lighting-list5' - line 688: ' noLights() makes it so that all subsequent geometry is rendered without any lighting. This can be useful' - line 689: ' when you want flat, unshaded geometry.' - line 690: '' - line 693: ' simultaneously, allowing you to compose a scene with varied and complex lighting sources. ' - line 694: ' Try checking and unchecking the boxes in the following interactive example to see how lighting can' - line 695: ' be blended together. For each active light source there are visual indicators of their position or' - line 696: ' direction, just know that these are here for illustrative purposes!' - line 697: ' getting-started-in-webgl-appearance-p9x1' - line 698: ' In this next example, try commenting and uncommenting each light and experiment with their parameters.' - line 699: '' - line 700: ' getting-started-in-webgl-appearance-heading3' - line 701: '' - line 704: ' light interacts with the geometry and how color (or texture) gets applied to the object. Materials can be' - line 705: ' varied,' - line 706: ' making objects shiny, rough, or even textured with images.' - line 707: '' - line 708: ' getting-started-in-webgl-appearance-p11x1' - line 709: ' In this interactive example, try toggling each of the different materials to see how they' - line 710: ' affect the appearance of the geometry. You can move your mouse and see the effect that a point light has on the material.' - line 711: '' - line 712: ' getting-started-in-webgl-appearance-p12x1' - line 713: ' Try commenting and uncommenting the different lights in this example' - line 714: '' - line 715: ' getting-started-in-webgl-appearance-p13x1' - line 716: ' More custom materials can be achieved through using texture(). In short, these are images' - line 717: ' that can be mapped onto the surface of a geometry. These textures can be imported from an image and can even be' - line 718: ' generated within code using shaders. To map a texture to your geometry, use loadImage() ' - line 719: ' within preload(), then call texture() before drawing your shape.' - line 721: ' getting-started-in-webgl-appearance-info1x1' - line 722: ' While they are useful for changing the appearance of your geometry, shaders are a bit beyond the scope of this ' - line 723: ' tutorial, so make sure to check out the Introduction to Shaders ' - line 724: ' page when you are ready. ' - line 725: '' - line 726: ' getting-started-in-webgl-appearance-glossary-title' - line 727: ' getting-started-in-webgl-appearance-glossary-term1-title' - line 728: ' getting-started-in-webgl-appearance-glossary-term1-definition' - line 600: ' Objects can appear differently based on their material. Materials dictate how' - line 605: ' varied, making objects shiny, rough, or even textured with images.' - line 610: ' In this interactive example, try selecting each of the different materials to see how they' - line 611: ' affect the appearance of the geometry. You can move your mouse and see the effect that a directional light has on the material. ' - line 588: ' getting-started-in-webgl-custom-geometry-p6x1_' - line 589: ' , which p5.js uses internally for loadModel() but can also be used to' - line 616: ' change this using ' - line 617: ' getting-started-in-webgl-appearance-p1x2' - line 618: ' or ' - line 1669: ' teach-case3-content5' - line 1670: ' teach-case4-title' - line 1671: ' teach-case4-lead-name' - line 1672: ' teach-case4-content1' - line 1673: ' teach-case4-content1-1' - line 1674: ' teach-case4-content2' - line 1675: ' teach-case4-content3' - line 1676: ' teach-case4-content4' - line 1677: ' teach-case4-content5' - line 1678: ' teach-case5-title' - line 1679: ' teach-case5-lead-name' - line 1680: ' teach-case5-image-alt' - line 1681: ' teach-case5-content1' - line 1682: ' teach-case5-content1-1' - line 1683: ' teach-case5-content2' - line 1684: ' teach-case5-content3' - line 1685: ' teach-case5-content4' - line 1686: ' teach-case5-content5' - line 1687: ' teach-case6-title' - line 1688: ' teach-case6-lead-name' - line 1689: ' teach-case6-image-alt' - line 1690: ' teach-case6-content1' - line 1691: ' teach-case6-content1-1' - line 1692: ' teach-case6-content2' - line 1693: ' teach-case6-content3' - line 1694: ' teach-case6-content4' - line 1695: ' teach-case6-content5' - line 1696: ' teach-case7-title' - line 1697: ' teach-case7-lead-name' - line 1698: ' teach-case7-image-alt' - line 1699: ' teach-case7-content1' - line 1700: ' teach-case7-content1-1' - line 1701: ' teach-case7-content2' - line 1702: ' teach-case7-content3' - line 1703: ' teach-case7-content4' - line 1704: ' teach-case7-content5' - line 1705: ' teach-case8-title' - line 1706: ' teach-case8-lead-name' - line 1707: ' teach-case8-content1' - line 1708: ' teach-case8-content1-1' - line 1709: ' teach-case8-content2' - line 1710: ' teach-case8-content3' - line 1711: ' teach-case8-content4' - line 1778: ' teach-case14-lead-name' - line 1779: ' teach-case14-image-alt' - line 1780: ' teach-case14-content1' - line 1781: ' teach-case14-content1-1' - line 1782: ' teach-case14-content2' - line 1787: ' teach-case14-content3' - line 1788: ' teach-case14-content4' - line 1838: ' teach-case15-content5-1' - line 1839: ' teach-case15-content5-2' - line 1840: ' teach-case15-content5-3' - line 1841: ' teach-case16-title' - line 1842: ' teach-case16-lead-name' - line 1843: ' teach-case16-image-alt' - line 1844: ' teach-case16-speech' - line 1845: ' teach-case16-content1' - line 1846: ' teach-case16-content1-1' - line 1847: ' teach-case16-content2' - line 1852: ' teach-case16-content3' - line 1853: ' teach-case16-content4' - line 1864: ' teach-case16-content5' - line 1865: ' teach-case16-content5-1' - line 1866: ' teach-case16-content5-2' - line 1867: ' teach-case16-content5-3' - line 1868: ' teach-case16-content5-4' - line 1869: ' teach-case17-title' - line 1870: ' teach-case17-lead-name' - line 1871: ' teach-case17-speech' - line 1881: ' teach-case17-content1' - line 1882: ' teach-case17-content1-1' - line 1883: ' teach-case17-content1-2' - line 1884: ' teach-case17-content1-3' - line 1885: ' teach-case17-content2' - line 1886: ' teach-case17-content3' - line 1887: ' teach-case17-content4' - line 1891: ' teach-case17-content5' - line 1901: ' teach-case17-content5-1' - line 1902: ' teach-case17-content5-2' - line 1903: ' teach-case17-content5-3' - line 1904: ' teach-case18-title' - line 1905: ' teach-case18-lead-name' - line 1906: ' teach-case18-image-alt' - line 1907: ' teach-case18-speech' - line 1924: ' teach-case18-content1' - line 1925: ' teach-case18-content1-1' - line 1926: ' teach-case18-content2' - line 1927: ' teach-case18-content3' - line 1928: ' teach-case18-content4' - line 1929: ' teach-case18-content5' - line 1930: ' teach-case18-content5-1' - line 1931: ' teach-case18-content5-2' - line 1932: ' teach-case18-content5-3' - line 1933: ' teach-case18-content5-4' - line 1934: ' teach-case18-content5-5' - line 1935: ' teach-case19-title' - line 1936: ' teach-case19-lead-name' - line 1937: ' teach-case19-speech' - line 1964: ' teach-case19-content1' - line 1965: ' teach-case19-content1-1' - line 1966: ' teach-case19-content2' - line 1967: ' teach-case19-content3' - line 1968: ' teach-case19-content4' - line 1969: ' teach-case19-content5' - line 1970: ' teach-case19-content5-1' - line 1971: ' teach-case20-title' - line 1972: ' teach-case20-lead-name' - line 1973: ' teach-case20-image-alt' - line 1974: ' teach-case20-content1' - line 1975: ' teach-case20-content1-1' - line 1976: ' teach-case20-content2' - line 1977: ' teach-case20-content3' - line 1978: ' teach-case20-content4' - line 1979: ' teach-case20-content5' - line 1980: ' teach-case20-content5-1' - line 1981: ' teach-case20-content5-2' - line 1982: ' teach-case21-title' - line 1983: ' teach-case21-lead-name' - line 1984: ' teach-case21-image-alt' - line 1985: ' teach-case21-content1' - line 1986: ' teach-case21-content1-1' - line 1987: ' teach-case21-content2' - line 1992: ' teach-case21-content3' - line 1993: ' teach-case21-content4' - line 1998: ' teach-case21-content5' diff --git a/i18n.js b/i18n.js deleted file mode 100644 index 7f1145cc07..0000000000 --- a/i18n.js +++ /dev/null @@ -1,101 +0,0 @@ -// This file will automatically add entries that needs to be -// tracked for translation in i18n-tracking.yml file. -// -// It should be run as part of the build tool and changes to -// source files (en.yml) should be committed before translating -// and removing entries in the i18n-tracking.yml file. - -const fs = require('fs'); -const yaml = require('js-yaml'); -const _ = require('lodash'); -const git = require('simple-git/promise'); - -const pkg = require('./package.json'); - -const enSrcFile = 'src/data/en.yml'; - -function parseDiff(diff) { - return new Promise((resolve, reject) => { - const changes = []; - let [, lineNum] = diff.match(/@@ -(\d+),.*@@/); - lineNum = parseInt(lineNum, 10) - 1; - let lines = diff.split('\n'); - const startAt = lines.findIndex(line => line.startsWith('@@')); - lines = lines.slice(startAt); - lines.forEach((line, index) => { - if (line.startsWith('+')) { - changes.push([lineNum, line.replace(/^\+/, '')]); - } - lineNum++; - }); - writeTracker(enSrcFile, changes, resolve, reject); - }); -} - -var task = function(done) { - const repo = git(); - repo - .status() - .then(data => { - if (data.modified.includes(enSrcFile)) { - return repo.diff(['-p', '--cached', enSrcFile]); - } - return Promise.reject(`${enSrcFile} file was not modified.`); - }) - .then(parseDiff) - .then(done) - .catch(e => { - done(); - }); -}; - -function writeTracker(path, changes, resolve, reject) { - fs.readFile('./i18n-tracking.yml', 'utf-8', (err, data) => { - if (err) reject(err); - - const dest = {}; - const lang = pkg.languages.filter(v => v !== 'en'); - lang.forEach(langCode => { - dest[langCode] = {}; - dest[langCode][path] = {}; - var newObj = {}; - newObj[path] = {}; - var currentObj = yaml.safeLoad(data) ? yaml.safeLoad(data)[langCode] : {}; - - changes.forEach(change => { - var i = `line ${change[0]}`; - newObj[path][i] = change[1].split(':')[0]; - }); - - var intersect = _.intersection( - _.keys(currentObj[path]), - _.keys(newObj[path]) - ); - var diffAB = _.difference(_.keys(currentObj[path]), _.keys(newObj[path])); - var diffBA = _.difference(_.keys(newObj[path]), _.keys(currentObj[path])); - - intersect.forEach(line => { - dest[langCode][path][line] = newObj[path][line]; - }); - diffAB.forEach(line => { - dest[langCode][path][line] = currentObj[path][line]; - }); - diffBA.forEach(line => { - dest[langCode][path][line] = newObj[path][line]; - }); - }); - var dump = yaml.safeDump(dest, { - styles: { - '!!null': 'canonical' - }, - sortKeys: false - }); - - fs.writeFile('./i18n-tracking.yml', dump, (err, res) => { - if (err) reject(err); - resolve(); - }); - }); -} - -module.exports = task; diff --git a/package-lock.json b/package-lock.json index 9d2d252288..d1e98119fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,11 +43,9 @@ "grunt-shell": "^3.0.1", "grunt-uncss": "^0.8.6", "handlebars": "^4.7.7", - "husky": "^0.14.3", "imagemin-mozjpeg": "^9.0.0", "imagemin-pngquant": "^9.0.2", "js-yaml": "^3.14.1", - "lint-staged": "^9.5.0", "load-grunt-tasks": "^5.1.0", "lodash": "^4.17.21", "mkdirp": "^0.5.5", @@ -378,26 +376,6 @@ "node": ">= 8" } }, - "node_modules/@samverschueren/stream-to-observable": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz", - "integrity": "sha512-c/qwwcHyafOQuVQJj0IlBjf5yYgBI7YPJ77k4fOJYesb41jio65eaJODRUmfYKhTOFBrIZ66kgvGPlNbjuoRdQ==", - "dev": true, - "dependencies": { - "any-observable": "^0.3.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependenciesMeta": { - "rxjs": { - "optional": true - }, - "zen-observable": { - "optional": true - } - } - }, "node_modules/@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -407,28 +385,12 @@ "node": ">=4" } }, - "node_modules/@types/glob": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", - "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==", - "dev": true, - "dependencies": { - "@types/minimatch": "*", - "@types/node": "*" - } - }, "node_modules/@types/minimatch": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==", "dev": true }, - "node_modules/@types/node": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz", - "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==", - "dev": true - }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -503,28 +465,6 @@ "node": ">=0.4.0" } }, - "node_modules/aggregate-error": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", - "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", - "dev": true, - "dependencies": { - "clean-stack": "^2.0.0", - "indent-string": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/aggregate-error/node_modules/indent-string": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", - "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -567,20 +507,12 @@ "integrity": "sha512-iFY7JCgHbepc0b82yLaw4IMortylNb6wG4kL+4R0C3iv6i+RHGHux/yUX5BTiRvSX/shMnngjR1YyNMnXEFh5A==", "dev": true }, - "node_modules/ansi-escapes": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", - "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/ansi-regex": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz", "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==", "dev": true, + "optional": true, "engines": { "node": ">=4" } @@ -597,15 +529,6 @@ "node": ">=4" } }, - "node_modules/any-observable": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz", - "integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/aproba": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", @@ -2221,12 +2144,6 @@ "dev": true, "optional": true }, - "node_modules/ci-info": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz", - "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==", - "dev": true - }, "node_modules/class-utils": { "version": "0.3.6", "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", @@ -2242,15 +2159,6 @@ "node": ">=0.10.0" } }, - "node_modules/clean-stack": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", - "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/cli": { "version": "0.6.6", "resolved": "https://registry.npmjs.org/cli/-/cli-0.6.6.tgz", @@ -2264,78 +2172,6 @@ "node": ">=0.2.5" } }, - "node_modules/cli-cursor": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", - "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==", - "dev": true, - "dependencies": { - "restore-cursor": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/cli-truncate": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz", - "integrity": "sha512-f4r4yJnbT++qUPI9NR4XLDLq41gQ+uqnPItWG0F5ZkehuNiTTa3EY0S4AqTSUOeJ7/zU41oWPQSNkW5BqPL9bg==", - "dev": true, - "dependencies": { - "slice-ansi": "0.0.4", - "string-width": "^1.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/cli-truncate/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/cli-truncate/node_modules/is-fullwidth-code-point": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==", - "dev": true, - "dependencies": { - "number-is-nan": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/cli-truncate/node_modules/string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==", - "dev": true, - "dependencies": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/cli-truncate/node_modules/strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", - "dev": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/cli/node_modules/glob": { "version": "3.2.11", "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz", @@ -2432,6 +2268,7 @@ "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==", "dev": true, + "optional": true, "engines": { "node": ">=0.10.0" } @@ -3255,12 +3092,6 @@ "webidl-conversions": "^4.0.2" } }, - "node_modules/date-fns": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz", - "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==", - "dev": true - }, "node_modules/date-now": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", @@ -3496,12 +3327,6 @@ "node": ">=0.10.0" } }, - "node_modules/dedent": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", - "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==", - "dev": true - }, "node_modules/deep-extend": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", @@ -3567,176 +3392,6 @@ "node": ">=0.10.0" } }, - "node_modules/del": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz", - "integrity": "sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==", - "dev": true, - "dependencies": { - "globby": "^10.0.1", - "graceful-fs": "^4.2.2", - "is-glob": "^4.0.1", - "is-path-cwd": "^2.2.0", - "is-path-inside": "^3.0.1", - "p-map": "^3.0.0", - "rimraf": "^3.0.0", - "slash": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/del/node_modules/@nodelib/fs.stat": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", - "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", - "dev": true, - "engines": { - "node": ">= 8" - } - }, - "node_modules/del/node_modules/array-union": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", - "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/del/node_modules/dir-glob": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", - "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", - "dev": true, - "dependencies": { - "path-type": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/del/node_modules/fast-glob": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz", - "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==", - "dev": true, - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, - "node_modules/del/node_modules/glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dev": true, - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.1.1", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/del/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/del/node_modules/globby": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz", - "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==", - "dev": true, - "dependencies": { - "@types/glob": "^7.1.1", - "array-union": "^2.1.0", - "dir-glob": "^3.0.1", - "fast-glob": "^3.0.3", - "glob": "^7.1.3", - "ignore": "^5.1.1", - "merge2": "^1.2.3", - "slash": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/del/node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", - "dev": true, - "engines": { - "node": ">= 4" - } - }, - "node_modules/del/node_modules/p-map": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", - "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==", - "dev": true, - "dependencies": { - "aggregate-error": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/del/node_modules/path-type": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/del/node_modules/rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "dev": true, - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/del/node_modules/slash": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", - "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -4042,15 +3697,6 @@ "integrity": "sha512-YYbXHIBxAHe3KWvGOJOuWa6f3tgow44rBW+QAuwVp2DvGqNZeE//K2MowNdWS7XE8li5cgQDrX1LdBr41LufkA==", "dev": true }, - "node_modules/elegant-spinner": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz", - "integrity": "sha512-B+ZM+RXvRqQaAmkMlO/oSe5nMUOaUnyfGYCEHoR8wrXsZR2mA0XVibsxV1bvTwxdRWah1PkQqso2EzhILGHtEQ==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", @@ -5477,18 +5123,6 @@ "pend": "~1.2.0" } }, - "node_modules/figures": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", - "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==", - "dev": true, - "dependencies": { - "escape-string-regexp": "^1.0.5" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -6321,12 +5955,6 @@ "node": ">=0.10.0" } }, - "node_modules/get-own-enumerable-property-symbols": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz", - "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==", - "dev": true - }, "node_modules/get-proxy": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/get-proxy/-/get-proxy-2.1.0.tgz", @@ -8737,30 +8365,6 @@ "node": ">=8.12.0" } }, - "node_modules/husky": { - "version": "0.14.3", - "resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz", - "integrity": "sha512-e21wivqHpstpoiWA/Yi8eFti8E+sQDSS53cpJsPptPs295QTOQR0ZwnHo2TXy1XOpZFD9rPOd3NpmqTK6uMLJA==", - "dev": true, - "hasInstallScript": true, - "dependencies": { - "is-ci": "^1.0.10", - "normalize-path": "^1.0.0", - "strip-indent": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/husky/node_modules/normalize-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-1.0.0.tgz", - "integrity": "sha512-7WyT0w8jhpDStXRq5836AMmihQwq2nrUVQrgjvUo/p/NZf9uy/MeJ246lBJVmWuYXMlJuG9BNZHF0hWjfTbQUA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -9254,15 +8858,6 @@ "node": ">=0.8.19" } }, - "node_modules/indent-string": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz", - "integrity": "sha512-BYqTHXTGUIvg7t1r4sJNKcbDZkL92nkXA8YtRpbjFHRHGDL/NtUeiBJMeE60kIFN/Mg8ESaWQvftaYMGJzQZCQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/index-of": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/index-of/-/index-of-0.2.0.tgz", @@ -9451,18 +9046,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-ci": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", - "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", - "dev": true, - "dependencies": { - "ci-info": "^1.5.0" - }, - "bin": { - "is-ci": "bin.js" - } - }, "node_modules/is-color-stop": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz", @@ -9616,6 +9199,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==", "dev": true, + "optional": true, "engines": { "node": ">=4" } @@ -9738,18 +9322,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-observable": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz", - "integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==", - "dev": true, - "dependencies": { - "symbol-observable": "^1.1.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/is-odd": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-0.1.2.tgz", @@ -9762,15 +9334,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-path-cwd": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz", - "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/is-path-inside": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", @@ -9829,12 +9392,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-promise": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz", - "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==", - "dev": true - }, "node_modules/is-regex": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", @@ -9851,15 +9408,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-regexp": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz", - "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/is-relative": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz", @@ -10330,510 +9878,141 @@ "dev": true }, "node_modules/json-stable-stringify-without-jsonify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", - "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", - "dev": true - }, - "node_modules/json-stringify-safe": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", - "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==", - "dev": true - }, - "node_modules/jsonfile": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", - "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", - "dev": true, - "dependencies": { - "universalify": "^2.0.0" - }, - "optionalDependencies": { - "graceful-fs": "^4.1.6" - } - }, - "node_modules/jsprim": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz", - "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==", - "dev": true, - "dependencies": { - "assert-plus": "1.0.0", - "extsprintf": "1.3.0", - "json-schema": "0.4.0", - "verror": "1.10.0" - }, - "engines": { - "node": ">=0.6.0" - } - }, - "node_modules/keyv": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz", - "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==", - "dev": true, - "dependencies": { - "json-buffer": "3.0.0" - } - }, - "node_modules/kind-of": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", - "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==", - "dev": true, - "dependencies": { - "is-buffer": "^1.1.5" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/lazy-cache": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz", - "integrity": "sha512-7vp2Acd2+Kz4XkzxGxaB1FWOi8KjWIWsgdfD5MCb86DWvlLqhRPM+d6Pro3iNEL5VT9mstz5hKAlcd+QR6H3aA==", - "dev": true, - "dependencies": { - "set-getter": "^0.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/lazystream": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz", - "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==", - "dev": true, - "dependencies": { - "readable-stream": "^2.0.5" - }, - "engines": { - "node": ">= 0.6.3" - } - }, - "node_modules/left-pad": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz", - "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==", - "deprecated": "use String.prototype.padStart()", - "dev": true - }, - "node_modules/levn": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", - "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==", - "dev": true, - "dependencies": { - "prelude-ls": "~1.1.2", - "type-check": "~0.3.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/liftup": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/liftup/-/liftup-3.0.1.tgz", - "integrity": "sha512-yRHaiQDizWSzoXk3APcA71eOI/UuhEkNN9DiW2Tt44mhYzX4joFoCZlxsSOF7RyeLlfqzFLQI1ngFq3ggMPhOw==", - "dev": true, - "dependencies": { - "extend": "^3.0.2", - "findup-sync": "^4.0.0", - "fined": "^1.2.0", - "flagged-respawn": "^1.0.1", - "is-plain-object": "^2.0.4", - "object.map": "^1.0.1", - "rechoir": "^0.7.0", - "resolve": "^1.19.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/liftup/node_modules/findup-sync": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz", - "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==", - "dev": true, - "dependencies": { - "detect-file": "^1.0.0", - "is-glob": "^4.0.0", - "micromatch": "^4.0.2", - "resolve-dir": "^1.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/lint-staged": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-9.5.0.tgz", - "integrity": "sha512-nawMob9cb/G1J98nb8v3VC/E8rcX1rryUYXVZ69aT9kde6YWX+uvNOEHY5yf2gcWcTJGiD0kqXmCnS3oD75GIA==", - "dev": true, - "dependencies": { - "chalk": "^2.4.2", - "commander": "^2.20.0", - "cosmiconfig": "^5.2.1", - "debug": "^4.1.1", - "dedent": "^0.7.0", - "del": "^5.0.0", - "execa": "^2.0.3", - "listr": "^0.14.3", - "log-symbols": "^3.0.0", - "micromatch": "^4.0.2", - "normalize-path": "^3.0.0", - "please-upgrade-node": "^3.1.1", - "string-argv": "^0.3.0", - "stringify-object": "^3.3.0" - }, - "bin": { - "lint-staged": "bin/lint-staged" - } - }, - "node_modules/lint-staged/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, - "node_modules/lint-staged/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/lint-staged/node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, - "node_modules/lint-staged/node_modules/execa": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-2.1.0.tgz", - "integrity": "sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==", - "dev": true, - "dependencies": { - "cross-spawn": "^7.0.0", - "get-stream": "^5.0.0", - "is-stream": "^2.0.0", - "merge-stream": "^2.0.0", - "npm-run-path": "^3.0.0", - "onetime": "^5.1.0", - "p-finally": "^2.0.0", - "signal-exit": "^3.0.2", - "strip-final-newline": "^2.0.0" - }, - "engines": { - "node": "^8.12.0 || >=9.7.0" - } - }, - "node_modules/lint-staged/node_modules/get-stream": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", - "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", - "dev": true, - "dependencies": { - "pump": "^3.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/lint-staged/node_modules/is-stream": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", - "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", - "dev": true, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/lint-staged/node_modules/mimic-fn": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", - "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/lint-staged/node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true - }, - "node_modules/lint-staged/node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/lint-staged/node_modules/npm-run-path": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz", - "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==", - "dev": true, - "dependencies": { - "path-key": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/lint-staged/node_modules/onetime": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", - "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", - "dev": true, - "dependencies": { - "mimic-fn": "^2.1.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/lint-staged/node_modules/p-finally": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz", - "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/lint-staged/node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/lint-staged/node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true }, - "node_modules/lint-staged/node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, - "engines": { - "node": ">=8" - } + "node_modules/json-stringify-safe": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", + "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==", + "dev": true }, - "node_modules/lint-staged/node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dev": true, "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" + "universalify": "^2.0.0" }, - "engines": { - "node": ">= 8" + "optionalDependencies": { + "graceful-fs": "^4.1.6" } }, - "node_modules/listr": { - "version": "0.14.3", - "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz", - "integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==", + "node_modules/jsprim": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz", + "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==", "dev": true, "dependencies": { - "@samverschueren/stream-to-observable": "^0.3.0", - "is-observable": "^1.1.0", - "is-promise": "^2.1.0", - "is-stream": "^1.1.0", - "listr-silent-renderer": "^1.1.1", - "listr-update-renderer": "^0.5.0", - "listr-verbose-renderer": "^0.5.0", - "p-map": "^2.0.0", - "rxjs": "^6.3.3" + "assert-plus": "1.0.0", + "extsprintf": "1.3.0", + "json-schema": "0.4.0", + "verror": "1.10.0" }, "engines": { - "node": ">=6" + "node": ">=0.6.0" } }, - "node_modules/listr-silent-renderer": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz", - "integrity": "sha512-L26cIFm7/oZeSNVhWB6faeorXhMg4HNlb/dS/7jHhr708jxlXrtrBWo4YUxZQkc6dGoxEAe6J/D3juTRBUzjtA==", + "node_modules/keyv": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz", + "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==", "dev": true, - "engines": { - "node": ">=4" + "dependencies": { + "json-buffer": "3.0.0" } }, - "node_modules/listr-update-renderer": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz", - "integrity": "sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==", + "node_modules/kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==", "dev": true, "dependencies": { - "chalk": "^1.1.3", - "cli-truncate": "^0.2.1", - "elegant-spinner": "^1.0.1", - "figures": "^1.7.0", - "indent-string": "^3.0.0", - "log-symbols": "^1.0.2", - "log-update": "^2.3.0", - "strip-ansi": "^3.0.1" - }, - "engines": { - "node": ">=6" + "is-buffer": "^1.1.5" }, - "peerDependencies": { - "listr": "^0.14.2" - } - }, - "node_modules/listr-update-renderer/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/listr-update-renderer/node_modules/ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==", - "dev": true, "engines": { "node": ">=0.10.0" } }, - "node_modules/listr-update-renderer/node_modules/chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==", + "node_modules/lazy-cache": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz", + "integrity": "sha512-7vp2Acd2+Kz4XkzxGxaB1FWOi8KjWIWsgdfD5MCb86DWvlLqhRPM+d6Pro3iNEL5VT9mstz5hKAlcd+QR6H3aA==", "dev": true, "dependencies": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" + "set-getter": "^0.1.0" }, "engines": { "node": ">=0.10.0" } }, - "node_modules/listr-update-renderer/node_modules/figures": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", - "integrity": "sha512-UxKlfCRuCBxSXU4C6t9scbDyWZ4VlaFFdojKtzJuSkuOBQ5CNFum+zZXFwHjo+CxBC1t6zlYPgHIgFjL8ggoEQ==", + "node_modules/lazystream": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz", + "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==", "dev": true, "dependencies": { - "escape-string-regexp": "^1.0.5", - "object-assign": "^4.1.0" + "readable-stream": "^2.0.5" }, "engines": { - "node": ">=0.10.0" + "node": ">= 0.6.3" } }, - "node_modules/listr-update-renderer/node_modules/log-symbols": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz", - "integrity": "sha512-mmPrW0Fh2fxOzdBbFv4g1m6pR72haFLPJ2G5SJEELf1y+iaQrDG6cWCPjy54RHYbZAt7X+ls690Kw62AdWXBzQ==", + "node_modules/left-pad": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz", + "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==", + "deprecated": "use String.prototype.padStart()", + "dev": true + }, + "node_modules/levn": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", + "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==", "dev": true, "dependencies": { - "chalk": "^1.0.0" + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" }, "engines": { - "node": ">=0.10.0" + "node": ">= 0.8.0" } }, - "node_modules/listr-update-renderer/node_modules/strip-ansi": { + "node_modules/liftup": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", + "resolved": "https://registry.npmjs.org/liftup/-/liftup-3.0.1.tgz", + "integrity": "sha512-yRHaiQDizWSzoXk3APcA71eOI/UuhEkNN9DiW2Tt44mhYzX4joFoCZlxsSOF7RyeLlfqzFLQI1ngFq3ggMPhOw==", "dev": true, "dependencies": { - "ansi-regex": "^2.0.0" + "extend": "^3.0.2", + "findup-sync": "^4.0.0", + "fined": "^1.2.0", + "flagged-respawn": "^1.0.1", + "is-plain-object": "^2.0.4", + "object.map": "^1.0.1", + "rechoir": "^0.7.0", + "resolve": "^1.19.0" }, "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/listr-update-renderer/node_modules/supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==", - "dev": true, - "engines": { - "node": ">=0.8.0" + "node": ">=10" } }, - "node_modules/listr-verbose-renderer": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz", - "integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==", + "node_modules/liftup/node_modules/findup-sync": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz", + "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==", "dev": true, "dependencies": { - "chalk": "^2.4.1", - "cli-cursor": "^2.1.0", - "date-fns": "^1.27.2", - "figures": "^2.0.0" + "detect-file": "^1.0.0", + "is-glob": "^4.0.0", + "micromatch": "^4.0.2", + "resolve-dir": "^1.0.1" }, "engines": { - "node": ">=4" - } - }, - "node_modules/listr/node_modules/p-map": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz", - "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==", - "dev": true, - "engines": { - "node": ">=6" + "node": ">= 8" } }, "node_modules/livereload-js": { @@ -10995,32 +10174,6 @@ "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", "dev": true }, - "node_modules/log-symbols": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz", - "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==", - "dev": true, - "dependencies": { - "chalk": "^2.4.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/log-update": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz", - "integrity": "sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==", - "dev": true, - "dependencies": { - "ansi-escapes": "^3.0.0", - "cli-cursor": "^2.0.0", - "wrap-ansi": "^3.0.1" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/logalot": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz", @@ -11669,15 +10822,6 @@ "node": ">= 0.6" } }, - "node_modules/mimic-fn": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", - "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/mimic-response": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", @@ -12442,18 +11586,6 @@ "wrappy": "1" } }, - "node_modules/onetime": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", - "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==", - "dev": true, - "dependencies": { - "mimic-fn": "^1.0.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/opn": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", @@ -13003,15 +12135,6 @@ "node": ">=8" } }, - "node_modules/please-upgrade-node": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz", - "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==", - "dev": true, - "dependencies": { - "semver-compare": "^1.0.0" - } - }, "node_modules/plur": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/plur/-/plur-3.1.1.tgz", @@ -16041,19 +15164,6 @@ "lowercase-keys": "^1.0.0" } }, - "node_modules/restore-cursor": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", - "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==", - "dev": true, - "dependencies": { - "onetime": "^2.0.0", - "signal-exit": "^3.0.2" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/ret": { "version": "0.1.15", "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", @@ -16152,18 +15262,6 @@ "queue-microtask": "^1.2.2" } }, - "node_modules/rxjs": { - "version": "6.6.7", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", - "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", - "dev": true, - "dependencies": { - "tslib": "^1.9.0" - }, - "engines": { - "npm": ">=2.0.0" - } - }, "node_modules/safe-array-concat": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz", @@ -16277,12 +15375,6 @@ "semver": "bin/semver" } }, - "node_modules/semver-compare": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz", - "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==", - "dev": true - }, "node_modules/semver-regex": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz", @@ -16748,15 +15840,6 @@ "node": ">=0.10.0" } }, - "node_modules/slice-ansi": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", - "integrity": "sha512-up04hB2hR92PgjpyU3y/eg91yIBILyjVY26NvvciY3EVVPjybkMszMpXQ9QAkcS3I5rtJBDLoTxxg+qvW8c7rw==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", @@ -17196,15 +16279,6 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true }, - "node_modules/string-argv": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", - "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==", - "dev": true, - "engines": { - "node": ">=0.6.19" - } - }, "node_modules/string-template": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz", @@ -17216,6 +16290,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, + "optional": true, "dependencies": { "is-fullwidth-code-point": "^2.0.0", "strip-ansi": "^4.0.0" @@ -17269,20 +16344,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/stringify-object": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz", - "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==", - "dev": true, - "dependencies": { - "get-own-enumerable-property-symbols": "^3.0.0", - "is-obj": "^1.0.1", - "is-regexp": "^1.0.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/strings": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/strings/-/strings-0.2.1.tgz", @@ -17328,6 +16389,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==", "dev": true, + "optional": true, "dependencies": { "ansi-regex": "^3.0.0" }, @@ -17384,15 +16446,6 @@ "node": ">=6" } }, - "node_modules/strip-indent": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz", - "integrity": "sha512-RsSNPLpq6YUL7QYy44RnPVTn/lcVZtb48Uof3X5JLbF4zD/Gs7ZFDv2HWol+leoQN2mT86LAzSshGfkTlSOpsA==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", @@ -17602,15 +16655,6 @@ "node": ">=4.0.0" } }, - "node_modules/symbol-observable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -18225,12 +17269,6 @@ "node": ">=0.10.0" } }, - "node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true - }, "node_modules/tunnel-agent": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", @@ -19058,19 +18096,6 @@ "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", "dev": true }, - "node_modules/wrap-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz", - "integrity": "sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==", - "dev": true, - "dependencies": { - "string-width": "^2.1.1", - "strip-ansi": "^4.0.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index 6f6f67f426..fa6726c4fa 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,7 @@ "assemble": "grunt assemble", "build": "grunt build", "test": "grunt build", - "watch": "grunt server", - "precommit": "lint-staged" + "watch": "grunt server" }, "licenses": [ { @@ -71,11 +70,9 @@ "grunt-shell": "^3.0.1", "grunt-uncss": "^0.8.6", "handlebars": "^4.7.7", - "husky": "^0.14.3", "imagemin-mozjpeg": "^9.0.0", "imagemin-pngquant": "^9.0.2", "js-yaml": "^3.14.1", - "lint-staged": "^9.5.0", "load-grunt-tasks": "^5.1.0", "lodash": "^4.17.21", "mkdirp": "^0.5.5", diff --git a/pontoon-config.toml b/pontoon-config.toml deleted file mode 100644 index 7ff80e8c69..0000000000 --- a/pontoon-config.toml +++ /dev/null @@ -1,11 +0,0 @@ -basepath = "./src/data" - -locales = [ - "es", - "ko", - "zh-CN" -] - -[[paths]] - reference = "localization/en/**" - l10n = "localization/{locale}/**" \ No newline at end of file diff --git a/src/data/localization/en/JSON.ftl b/src/data/localization/en/JSON.ftl deleted file mode 100644 index 83d4818a30..0000000000 --- a/src/data/localization/en/JSON.ftl +++ /dev/null @@ -1,2 +0,0 @@ -stringify__description__0 = From the MDN entry: The JSON.stringify() method converts a JavaScript object or value to a JSON string. -stringify__params__object = Object: :Javascript object that you would like to convert to JSON diff --git a/src/data/localization/en/console.ftl b/src/data/localization/en/console.ftl deleted file mode 100644 index 5e550f68cb..0000000000 --- a/src/data/localization/en/console.ftl +++ /dev/null @@ -1,4 +0,0 @@ -log__description__0 = Prints a message to your browser's web console. When using p5, you can use print and console.log interchangeably. -log__description__1 = The console is opened differently depending on which browser you are using. Here are links on how to open the console in Firefox , Chrome, Edge, and Safari. With the online p5 editor the console is embedded directly in the page underneath the code editor. -log__description__2 = From the MDN entry: The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects. -log__params__message = String|Expression|Object: :Message that you would like to print to the console diff --git a/src/data/localization/en/p5.Amplitude.ftl b/src/data/localization/en/p5.Amplitude.ftl deleted file mode 100644 index aa3cced496..0000000000 --- a/src/data/localization/en/p5.Amplitude.ftl +++ /dev/null @@ -1,12 +0,0 @@ -description__0 = 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. -params__smoothing = Number: (Optional) between 0.0 and .999 to smooth amplitude readings (defaults to 0) -setInput__description__0 = Connects to the p5sound instance (main output) by default. Optionally, you can pass in a specific source (i.e. a soundfile). -setInput__params__snd = SoundObject|undefined: (Optional) set the sound source (optional, defaults to main output) -setInput__params__smoothing = Number|undefined: (Optional) a range between 0.0 and 1.0 to smooth amplitude readings -getLevel__description__0 = Returns a single Amplitude reading at the moment it is called. For continuous readings, run in the draw loop. -getLevel__returns = Number: Amplitude as a number between 0.0 and 1.0 -getLevel__params__channel = Number: (Optional) Optionally return only channel 0 (left) or 1 (right) -toggleNormalize__description__0 = 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. -toggleNormalize__params__boolean = Boolean: (Optional) set normalize to true (1) or false (0) -smooth__description__0 = Smooth Amplitude analysis by averaging with the last analysis frame. Off by default. -smooth__params__set = Number: smoothing from 0.0 <= 1 diff --git a/src/data/localization/en/p5.AudioIn.ftl b/src/data/localization/en/p5.AudioIn.ftl deleted file mode 100644 index 64a1d6490e..0000000000 --- a/src/data/localization/en/p5.AudioIn.ftl +++ /dev/null @@ -1,27 +0,0 @@ -description__0 = Get audio from an input, i.e. your computer's microphone. -description__1 = 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. -description__2 = If you want to hear the AudioIn, use the .connect() method. AudioIn does not connect to p5.sound output by default to prevent feedback. -description__3 = Note: This uses the getUserMedia/ Stream 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. -params__errorCallback = Function: (Optional) A function to call if there is an error accessing the AudioIn. For example, Safari and iOS devices do not currently allow microphone access. -enabled__description__0 = Client must allow browser to access their microphone / audioin source. Default: false. Will become true when the client enables access. -amplitude__description__0 = Input amplitude, connect to it by default but not to master out -start__description__0 = 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.
    -start__description__1 = 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. -start__params__successCallback = Function: (Optional) Name of a function to call on success. -start__params__errorCallback = Function: (Optional) Name of a function to call if there was an error. For example, some browsers do not support getUserMedia. -stop__description__0 = Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). If re-starting, the user may be prompted for permission access. -connect__description__0 = Connect to an audio unit. If no parameter is provided, will connect to the main output (i.e. your speakers).
    -connect__params__unit = Object: (Optional) An object that accepts audio input, such as an FFT -disconnect__description__0 = Disconnect the AudioIn from all audio units. For example, if connect() had been called, disconnect() will stop sending signal to your speakers.
    -getLevel__description__0 = 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). NOTE: AudioIn must .start() before using .getLevel().
    -getLevel__returns = Number: Volume level (between 0.0 and 1.0) -getLevel__params__smoothing = Number: (Optional) Smoothing is 0.0 by default. Smooths values based on previous values. -amp__description__0 = Set amplitude (volume) of a mic input between 0 and 1.0.
    -amp__params__vol = Number: between 0 and 1.0 -amp__params__time = Number: (Optional) ramp time (optional) -getSources__description__0 = Returns a list of available input sources. This is a wrapper for MediaDevices.enumerateDevices() - Web APIs | MDN and it returns a Promise. -getSources__returns = Promise: Returns a Promise that can be used in place of the callbacks, similar to the enumerateDevices() method -getSources__params__successCallback = Function: (Optional) This callback function handles the sources when they have been enumerated. The callback function receives the deviceList array as its only argument -getSources__params__errorCallback = Function: (Optional) This optional callback receives the error message as its argument. -setSource__description__0 = Set the input source. Accepts a number representing a position in the array returned by getSources(). This is only available in browsers that support navigator.mediaDevices.enumerateDevices() -setSource__params__num = Number: position of input source in the array diff --git a/src/data/localization/en/p5.AudioVoice.ftl b/src/data/localization/en/p5.AudioVoice.ftl deleted file mode 100644 index dd6d5826a9..0000000000 --- a/src/data/localization/en/p5.AudioVoice.ftl +++ /dev/null @@ -1,4 +0,0 @@ -description__0 = 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(); -connect__description__0 = Connect to p5 objects or Web Audio Nodes -connect__params__unit = Object -disconnect__description__0 = Disconnect from soundOut diff --git a/src/data/localization/en/p5.BandPass.ftl b/src/data/localization/en/p5.BandPass.ftl deleted file mode 100644 index 456ac14737..0000000000 --- a/src/data/localization/en/p5.BandPass.ftl +++ /dev/null @@ -1 +0,0 @@ -description__0 = Constructor: new p5.BandPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('bandpass'). See p5.Filter for methods. diff --git a/src/data/localization/en/p5.Camera.ftl b/src/data/localization/en/p5.Camera.ftl deleted file mode 100644 index 0044055c45..0000000000 --- a/src/data/localization/en/p5.Camera.ftl +++ /dev/null @@ -1,34 +0,0 @@ -description__0 = This class describes a camera for use in p5's WebGL mode. It contains camera position, orientation, and projection information necessary for rendering a 3D scene. -description__1 = New p5.Camera objects can be made through the createCamera() function and controlled through the methods described below. A camera created in this way will use a default position in the scene and a default perspective projection until these properties are changed through the various methods available. It is possible to create multiple cameras, in which case the current camera can be set through the setCamera() method. -description__2 = Note: The methods below operate in two coordinate systems: the 'world' coordinate system describe positions in terms of their relationship to the origin along the X, Y and Z axes whereas the camera's 'local' coordinate system describes positions from the camera's point of view: left-right, up-down, and forward-backward. The move() method, for instance, moves the camera along its own axes, whereas the setPosition() method sets the camera's position in world-space. -description__3 = The camera object propreties eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ which describes camera position, orientation, and projection are also accessible via the camera object generated using createCamera() -params__rendererGL = RendererGL: instance of WebGL renderer -eyeX__description__0 = camera position value on x axis -eyeY__description__0 = camera position value on y axis -eyeZ__description__0 = camera position value on z axis -centerX__description__0 = x coordinate representing center of the sketch -centerY__description__0 = y coordinate representing center of the sketch -centerZ__description__0 = z coordinate representing center of the sketch -upX__description__0 = x component of direction 'up' from camera -upY__description__0 = y component of direction 'up' from camera -upZ__description__0 = z component of direction 'up' from camera -perspective__description__0 = Sets a perspective projection. Accepts the same parameters as the global perspective(). More information on this function can be found there. -ortho__description__0 = Sets an orthographic projection. Accepts the same parameters as the global ortho(). More information on this function can be found there. -frustum__description__0 = Sets the camera's frustum. Accepts the same parameters as the global frustum(). More information on this function can be found there. -pan__description__0 = Panning rotates the camera view to the left and right. -pan__params__angle = Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left). -tilt__description__0 = Tilting rotates the camera view up and down. -tilt__params__angle = Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left). -lookAt__description__0 = Reorients the camera to look at a position in world space. -lookAt__params__x = Number: x position of a point in world space -lookAt__params__y = Number: y position of a point in world space -lookAt__params__z = Number: z position of a point in world space -camera__description__0 = Sets the camera's position and orientation. Accepts the same parameters as the global camera(). More information on this function can be found there. -move__description__0 = Move camera along its local axes while maintaining current camera orientation. -move__params__x = Number: amount to move along camera's left-right axis -move__params__y = Number: amount to move along camera's up-down axis -move__params__z = Number: amount to move along camera's forward-backward axis -setPosition__description__0 = Set camera position in world-space while maintaining current camera orientation. -setPosition__params__x = Number: x position of a point in world space -setPosition__params__y = Number: y position of a point in world space -setPosition__params__z = Number: z position of a point in world space diff --git a/src/data/localization/en/p5.Color.ftl b/src/data/localization/en/p5.Color.ftl deleted file mode 100644 index 3ff1e244cc..0000000000 --- a/src/data/localization/en/p5.Color.ftl +++ /dev/null @@ -1,14 +0,0 @@ -description__0 = Each color stores the color mode and level maxes that was applied at the time of its construction. These are used to interpret the input arguments (at construction and later for that instance of color) and to format the output e.g. when saturation() is requested. -description__1 = Internally, we store an array representing the ideal RGBA values in floating point form, normalized from 0 to 1. From this we calculate the closest screen color (RGBA levels from 0 to 255) and expose this to the renderer. -description__2 = We also cache normalized, floating point components of the color in various representations as they are calculated. This is done to prevent repeating a conversion that has already been performed. -toString__description__0 = This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries. -toString__returns = String: the formatted string -toString__params__format = String: (Optional) 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. -setRed__description__0 = The setRed function sets the red component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255. -setRed__params__red = Number: the new red value -setGreen__description__0 = The setGreen function sets the green component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255. -setGreen__params__green = Number: the new green value -setBlue__description__0 = The setBlue function sets the blue component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255. -setBlue__params__blue = Number: the new blue value -setAlpha__description__0 = The setAlpha function sets the transparency (alpha) value of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255. -setAlpha__params__alpha = Number: the new alpha value diff --git a/src/data/localization/en/p5.Compressor.ftl b/src/data/localization/en/p5.Compressor.ftl deleted file mode 100644 index a390a77703..0000000000 --- a/src/data/localization/en/p5.Compressor.ftl +++ /dev/null @@ -1,33 +0,0 @@ -description__0 = 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. -description__1 = This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. -compressor__description__0 = The p5.Compressor is built with a Web Audio Dynamics Compressor Node -process__description__0 = Performs the same function as .connect, but also accepts optional parameters to set compressor's audioParams -process__params__src = Object: Sound source to be connected -process__params__attack = Number: (Optional) The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1 -process__params__knee = Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the "ratio" portion. default = 30, range 0 - 40 -process__params__ratio = Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20 -process__params__threshold = Number: (Optional) The decibel value above which the compression will start taking effect default = -24, range -100 - 0 -process__params__release = Number: (Optional) The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1 -set__description__0 = Set the paramters of a compressor. -set__params__attack = Number: The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1 -set__params__knee = Number: A decibel value representing the range above the threshold where the curve smoothly transitions to the "ratio" portion. default = 30, range 0 - 40 -set__params__ratio = Number: The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20 -set__params__threshold = Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0 -set__params__release = Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1 -attack__description__0 = Get current attack or set value w/ time ramp -attack__params__attack = Number: (Optional) Attack is the amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1 -attack__params__time = Number: (Optional) Assign time value to schedule the change in value -knee__description__0 = Get current knee or set value w/ time ramp -knee__params__knee = Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the "ratio" portion. default = 30, range 0 - 40 -knee__params__time = Number: (Optional) Assign time value to schedule the change in value -ratio__description__0 = Get current ratio or set value w/ time ramp -ratio__params__ratio = Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20 -ratio__params__time = Number: (Optional) Assign time value to schedule the change in value -threshold__description__0 = Get current threshold or set value w/ time ramp -threshold__params__threshold = Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0 -threshold__params__time = Number: (Optional) Assign time value to schedule the change in value -release__description__0 = Get current release or set value w/ time ramp -release__params__release = Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1 -release__params__time = Number: (Optional) Assign time value to schedule the change in value -reduction__description__0 = Return the current reduction value -reduction__returns = Number: Value of the amount of gain reduction that is applied to the signal diff --git a/src/data/localization/en/p5.Convolver.ftl b/src/data/localization/en/p5.Convolver.ftl deleted file mode 100644 index 6c27d0df7b..0000000000 --- a/src/data/localization/en/p5.Convolver.ftl +++ /dev/null @@ -1,20 +0,0 @@ -description__0 = p5.Convolver extends p5.Reverb. It can emulate the sound of real physical spaces through a process called convolution. -description__1 = 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. -description__2 = Use the method createConvolution(path) to instantiate a p5.Convolver with a path to your impulse response audio file. -params__path = String: path to a sound file -params__callback = Function: (Optional) function to call when loading succeeds -params__errorCallback = Function: (Optional) function to call if loading fails. This function will receive an error or XMLHttpRequest object with information about what went wrong. -convolverNode__description__0 = Internally, the p5.Convolver uses the a Web Audio Convolver Node. -impulses__description__0 = If you load multiple impulse files using the .addImpulse method, they will be stored as Objects in this Array. Toggle between them with the toggleImpulse(id) method. -process__description__0 = Connect a source to the convolver. -process__params__src = Object: p5.sound / Web Audio object with a sound output. -addImpulse__description__0 = Load and assign a new Impulse Response to the p5.Convolver. The impulse is added to the .impulses array. Previous impulses can be accessed with the .toggleImpulse(id) method. -addImpulse__params__path = String: path to a sound file -addImpulse__params__callback = Function: function (optional) -addImpulse__params__errorCallback = Function: function (optional) -resetImpulse__description__0 = Similar to .addImpulse, except that the .impulses Array is reset to save memory. A new .impulses array is created with this impulse as the only item. -resetImpulse__params__path = String: path to a sound file -resetImpulse__params__callback = Function: function (optional) -resetImpulse__params__errorCallback = Function: function (optional) -toggleImpulse__description__0 = If you have used .addImpulse() to add multiple impulses to a p5.Convolver, then you can use this method to toggle between the items in the .impulses 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 .impulses Array (Number).
    You can access the objects in the .impulses Array directly. Each Object has two attributes: an .audioBuffer (type: Web Audio AudioBuffer) and a .name, a String that corresponds with the original filename. -toggleImpulse__params__id = String|Number: Identify the impulse by its original filename (String), or by its position in the .impulses Array (Number). diff --git a/src/data/localization/en/p5.Delay.ftl b/src/data/localization/en/p5.Delay.ftl deleted file mode 100644 index 477a0c7ee5..0000000000 --- a/src/data/localization/en/p5.Delay.ftl +++ /dev/null @@ -1,26 +0,0 @@ -description__0 = 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. -description__1 = This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. -leftDelay__description__0 = The p5.Delay is built with two Web Audio Delay Nodes, one for each stereo channel. -rightDelay__description__0 = The p5.Delay is built with two Web Audio Delay Nodes, one for each stereo channel. -process__description__0 = Add delay to an audio signal according to a set of delay parameters. -process__params__Signal = Object: An object that outputs audio -process__params__delayTime = Number: (Optional) Time (in seconds) of the delay/echo. Some browsers limit delayTime to 1 second. -process__params__feedback = Number: (Optional) sends the delay back through itself in a loop that decreases in volume each time. -process__params__lowPass = Number: (Optional) Cutoff frequency. Only frequencies below the lowPass will be part of the delay. -delayTime__description__0 = Set the delay (echo) time, in seconds. Usually this value will be a floating point number between 0.0 and 1.0. -delayTime__params__delayTime = Number: Time (in seconds) of the delay -feedback__description__0 = 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 -feedback__returns = Number: Feedback value -feedback__params__feedback = Number|Object: 0.0 to 1.0, or an object such as an Oscillator that can be used to modulate this param -filter__description__0 = Set a lowpass filter frequency for the delay. A lowpass filter will cut off any frequencies higher than the filter frequency. -filter__params__cutoffFreq = Number|Object: A lowpass filter will cut off any frequencies higher than the filter frequency. -filter__params__res = Number|Object: 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. -setType__description__0 = 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. -setType__params__type = String|Number: 'pingPong' (1) or 'default' (0) -amp__description__0 = Set the output level of the delay effect. -amp__params__volume = Number: amplitude between 0 and 1.0 -amp__params__rampTime = Number: (Optional) create a fade that lasts rampTime -amp__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now -connect__description__0 = Send output to a p5.sound or web audio object -connect__params__unit = Object -disconnect__description__0 = Disconnect all output. diff --git a/src/data/localization/en/p5.Distortion.ftl b/src/data/localization/en/p5.Distortion.ftl deleted file mode 100644 index ad6c63fddc..0000000000 --- a/src/data/localization/en/p5.Distortion.ftl +++ /dev/null @@ -1,15 +0,0 @@ -description__0 = A Distortion effect created with a Waveshaper Node, with an approach adapted from Kevin Ennis -description__1 = This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. -params__amount = Number: (Optional) Unbounded distortion amount. Normal values range from 0-1. -params__oversample = String: (Optional) 'none', '2x', or '4x'. -WaveShaperNode__description__0 = The p5.Distortion is built with a Web Audio WaveShaper Node. -process__description__0 = Process a sound source, optionally specify amount and oversample values. -process__params__amount = Number: (Optional) Unbounded distortion amount. Normal values range from 0-1. -process__params__oversample = String: (Optional) 'none', '2x', or '4x'. -set__description__0 = Set the amount and oversample of the waveshaper distortion. -set__params__amount = Number: (Optional) Unbounded distortion amount. Normal values range from 0-1. -set__params__oversample = String: (Optional) 'none', '2x', or '4x'. -getAmount__description__0 = Return the distortion amount, typically between 0-1. -getAmount__returns = Number: Unbounded distortion amount. Normal values range from 0-1. -getOversample__description__0 = Return the oversampling. -getOversample__returns = String: Oversample can either be 'none', '2x', or '4x'. diff --git a/src/data/localization/en/p5.EQ.ftl b/src/data/localization/en/p5.EQ.ftl deleted file mode 100644 index ed26786124..0000000000 --- a/src/data/localization/en/p5.EQ.ftl +++ /dev/null @@ -1,7 +0,0 @@ -description__0 = 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). -description__1 = This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. -returns = Object: p5.EQ object -params___eqsize = Number: (Optional) Constructor will accept 3 or 8, defaults to 3 -bands__description__0 = The p5.EQ is built with abstracted p5.Filter objects. To modify any bands, use methods of the p5.Filter API, especially gain and freq. Bands are stored in an array, with indices 0 - 3, or 0 - 7 -process__description__0 = Process an input by connecting it to the EQ -process__params__src = Object: Audio source diff --git a/src/data/localization/en/p5.Effect.ftl b/src/data/localization/en/p5.Effect.ftl deleted file mode 100644 index 6fe2788f9e..0000000000 --- a/src/data/localization/en/p5.Effect.ftl +++ /dev/null @@ -1,18 +0,0 @@ -description__0 = Effect is a base class for audio effects in p5. This module handles the nodes and methods that are common and useful for current and future effects. -description__1 = This class is extended by p5.Distortion, p5.Compressor, p5.Delay, p5.Filter, p5.Reverb. -params__ac = Object: (Optional) Reference to the audio context of the p5 object -params__input = AudioNode: (Optional) Gain Node effect wrapper -params__output = AudioNode: (Optional) Gain Node effect wrapper -params___drywet = Object: (Optional) Tone.JS CrossFade node (defaults to value: 1) -params__wet = AudioNode: (Optional) Effects that extend this class should connect to the wet signal to this gain node, so that dry and wet signals are mixed properly. -amp__description__0 = Set the output volume of the filter. -amp__params__vol = Number: (Optional) amplitude between 0 and 1.0 -amp__params__rampTime = Number: (Optional) create a fade that lasts until rampTime -amp__params__tFromNow = Number: (Optional) schedule this event to happen in tFromNow seconds -chain__description__0 = Link effects together in a chain Example usage: filter.chain(reverb, delay, panner); May be used with an open-ended number of arguments -chain__params__arguments = Object: (Optional) Chain together multiple sound objects -drywet__description__0 = Adjust the dry/wet value. -drywet__params__fade = Number: (Optional) The desired drywet value (0 - 1.0) -connect__description__0 = Send output to a p5.js-sound, Web Audio Node, or use signal to control an AudioParam -connect__params__unit = Object -disconnect__description__0 = Disconnect all output. diff --git a/src/data/localization/en/p5.Element.ftl b/src/data/localization/en/p5.Element.ftl deleted file mode 100644 index 16ad1b5646..0000000000 --- a/src/data/localization/en/p5.Element.ftl +++ /dev/null @@ -1,86 +0,0 @@ -description__0 = Base class for all elements added to a sketch, including canvas, graphics buffers, and other HTML elements. It is not called directly, but p5.Element objects are created by calling createCanvas, createGraphics, createDiv, createImg, createInput, etc. -params__elt = String: DOM node that is wrapped -params__pInst = P5: (Optional) pointer to p5 instance -elt__description__0 = Underlying HTML element. All normal HTML methods can be called on this. -parent__description__0 = Attaches the element to the parent specified. A way of setting the container for the element. Accepts either a string ID, DOM node, or p5.Element. If no arguments given, parent node is returned. For more ways to position the canvas, see the positioning the canvas wiki page. -parent__params__parent = String|p5.Element|Object: the ID, DOM node, or p5.Element of desired parent element -id__description__0 = Sets the ID of the element. If no ID argument is passed in, it instead returns the current ID of the element. Note that only one element can have a particular id in a page. The .class() function can be used to identify multiple elements with the same class name. -id__params__id = String: ID of the element -class__description__0 = Adds given class to the element. If no class argument is passed in, it instead returns a string containing the current class(es) of the element. -class__params__class = String: class to add -mousePressed__description__0 = The .mousePressed() function is called once after every time a mouse button is pressed over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners. -mousePressed__params__fxn = Function|Boolean: function to be fired when mouse is pressed over the element. if false is passed instead, the previously firing function will no longer fire. -doubleClicked__description__0 = The .doubleClicked() function is called once after every time a mouse button is pressed twice over the element. This can be used to attach element and action specific event listeners. -doubleClicked__returns = p5.Element: -doubleClicked__params__fxn = Function|Boolean: function to be fired when mouse is double clicked over the element. if false is passed instead, the previously firing function will no longer fire. -mouseWheel__description__0 = The mouseWheel() function is called once after every time a mouse wheel is scrolled over the element. This can be used to attach element specific event listeners. -mouseWheel__description__1 = The function accepts a callback function as argument which will be executed when the wheel event is triggered on the element, the callback function is passed one argument event. The event.deltaY property returns negative values if the mouse wheel is rotated up or away from the user and positive in the other direction. The event.deltaX does the same as event.deltaY except it reads the horizontal wheel scroll of the mouse wheel. -mouseWheel__description__2 = On OS X with "natural" scrolling enabled, the event.deltaY values are reversed. -mouseWheel__params__fxn = Function|Boolean: function to be fired when mouse is scrolled over the element. if false is passed instead, the previously firing function will no longer fire. -mouseReleased__description__0 = The mouseReleased() function is called once after every time a mouse button is released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners. -mouseReleased__params__fxn = Function|Boolean: function to be fired when mouse is released over the element. if false is passed instead, the previously firing function will no longer fire. -mouseClicked__description__0 = The .mouseClicked() function is called once after a mouse button is pressed and released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap.This can be used to attach element specific event listeners. -mouseClicked__params__fxn = Function|Boolean: function to be fired when mouse is clicked over the element. if false is passed instead, the previously firing function will no longer fire. -mouseMoved__description__0 = The .mouseMoved() function is called once every time a mouse moves over the element. This can be used to attach an element specific event listener. -mouseMoved__params__fxn = Function|Boolean: function to be fired when a mouse moves over the element. if false is passed instead, the previously firing function will no longer fire. -mouseOver__description__0 = The .mouseOver() function is called once after every time a mouse moves onto the element. This can be used to attach an element specific event listener. -mouseOver__params__fxn = Function|Boolean: function to be fired when a mouse moves onto the element. if false is passed instead, the previously firing function will no longer fire. -mouseOut__description__0 = The .mouseOut() function is called once after every time a mouse moves off the element. This can be used to attach an element specific event listener. -mouseOut__params__fxn = Function|Boolean: function to be fired when a mouse moves off of an element. if false is passed instead, the previously firing function will no longer fire. -touchStarted__description__0 = The .touchStarted() function is called once after every time a touch is registered. This can be used to attach element specific event listeners. -touchStarted__params__fxn = Function|Boolean: function to be fired when a touch starts over the element. if false is passed instead, the previously firing function will no longer fire. -touchMoved__description__0 = The .touchMoved() function is called once after every time a touch move is registered. This can be used to attach element specific event listeners. -touchMoved__params__fxn = Function|Boolean: function to be fired when a touch moves over the element. if false is passed instead, the previously firing function will no longer fire. -touchEnded__description__0 = The .touchEnded() function is called once after every time a touch is registered. This can be used to attach element specific event listeners. -touchEnded__params__fxn = Function|Boolean: function to be fired when a touch ends over the element. if false is passed instead, the previously firing function will no longer fire. -dragOver__description__0 = The .dragOver() function is called once after every time a file is dragged over the element. This can be used to attach an element specific event listener. -dragOver__params__fxn = Function|Boolean: function to be fired when a file is dragged over the element. if false is passed instead, the previously firing function will no longer fire. -dragLeave__description__0 = The .dragLeave() function is called once after every time a dragged file leaves the element area. This can be used to attach an element specific event listener. -dragLeave__params__fxn = Function|Boolean: function to be fired when a file is dragged off the element. if false is passed instead, the previously firing function will no longer fire. -addClass__description__0 = Adds specified class to the element. -addClass__params__class = String: name of class to add -removeClass__description__0 = Removes specified class from the element. -removeClass__params__class = String: name of class to remove -hasClass__description__0 = Checks if specified class already set to element -hasClass__returns = Boolean: a boolean value if element has specified class -hasClass__params__c = String: class name of class to check -toggleClass__description__0 = Toggles element class -toggleClass__params__c = String: class name to toggle -child__description__0 = Attaches the element as a child to the parent specified. Accepts either a string ID, DOM node, or p5.Element. If no argument is specified, an array of children DOM nodes is returned. -child__returns = Node[]: an array of child nodes -child__params__child = String|p5.Element: (Optional) the ID, DOM node, or p5.Element to add to the current element -center__description__0 = Centers a p5 Element either vertically, horizontally, or both, relative to its parent or according to the body if the Element has no parent. If no argument is passed the Element is aligned both vertically and horizontally. -center__params__align = String: (Optional) passing 'vertical', 'horizontal' aligns element accordingly -html__description__0 = If an argument is given, sets the inner HTML of the element, replacing any existing html. If true is included as a second argument, html is appended instead of replacing existing html. If no arguments are given, returns the inner HTML of the element. -html__returns = String: the inner HTML of the element -html__params__html = String: (Optional) the HTML to be placed inside the element -html__params__append = Boolean: (Optional) whether to append HTML to existing -position__description__0 = Sets the position of the element. If no position type argument is given, the position will be relative to (0, 0) of the window. Essentially, this sets position:absolute and left and top properties of style. If an optional third argument specifying position type is given, the x and y coordinates will be interpreted based on the positioning scheme. If no arguments given, the function returns the x and y position of the element. found documentation on how to be more specific with object type https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc -position__returns = Object: object of form {"{"} x: 0, y: 0 {"}"} containing the position of the element in an object -position__params__x = Number: (Optional) x-position relative to upper left of window (optional) -position__params__y = Number: (Optional) y-position relative to upper left of window (optional) -position__params__positionType = String: (Optional) it can be static, fixed, relative, sticky, initial or inherit (optional) -style__description__0 = Sets the given style (css) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if the single argument is given in css syntax ('text-align:center'), .style() sets the css appropriately. -style__returns = String: value of property -style__params__property = String: property to be set -style__params__value = String|p5.Color: value to assign to property -attribute__description__0 = Adds a new attribute or changes the value of an existing attribute on the specified element. If no value is specified, returns the value of the given attribute, or null if attribute is not set. -attribute__returns = String: value of attribute -attribute__params__attr = String: attribute to set -attribute__params__value = String: value to assign to attribute -removeAttribute__description__0 = Removes an attribute on the specified element. -removeAttribute__params__attr = String: attribute to remove -value__description__0 = Either returns the value of the element if no arguments given, or sets the value of the element. -value__returns = String|Number: value of the element -value__params__value = String|Number -show__description__0 = Shows the current element. Essentially, setting display:block for the style. -hide__description__0 = Hides the current element. Essentially, setting display:none for the style. -size__description__0 = Sets the width and height of the element. AUTO can be used to only adjust one dimension at a time. If no arguments are given, it returns the width and height of the element in an object. In case of elements which need to be loaded, such as images, it is recommended to call the function after the element has finished loading. -size__returns = Object: the width and height of the element in an object -size__params__w = Number|Constant: width of the element, either AUTO, or a number -size__params__h = Number|Constant: (Optional) height of the element, either AUTO, or a number -remove__description__0 = Removes the element, stops all media streams, and deregisters all listeners. -drop__description__0 = Registers a callback that gets called every time a file that is dropped on the element has been loaded. p5 will load every dropped file into memory and pass it as a p5.File object to the callback. Multiple files dropped at the same time will result in multiple calls to the callback. -drop__description__1 = You can optionally pass a second callback which will be registered to the raw drop event. The callback will thus be provided the original DragEvent. Dropping multiple files at the same time will trigger the second callback once per drop, whereas the first callback will trigger for each loaded file. -drop__params__callback = Function: callback to receive loaded file, called for each file dropped. -drop__params__fxn = Function: (Optional) callback triggered once when files are dropped with the drop event. diff --git a/src/data/localization/en/p5.Envelope.ftl b/src/data/localization/en/p5.Envelope.ftl deleted file mode 100644 index 41b0324830..0000000000 --- a/src/data/localization/en/p5.Envelope.ftl +++ /dev/null @@ -1,55 +0,0 @@ -description__0 = 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 ( ADSR ). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can control an Oscillator's frequency like this: osc.freq(env). -description__1 = Use setRange to change the attack/release level. Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime. -description__2 = Use the play method to play the entire envelope, the ramp method for a pingable trigger, or triggerAttack/ triggerRelease to trigger noteOn/noteOff. -attackTime__description__0 = Time until envelope reaches attackLevel -attackLevel__description__0 = Level once attack is complete. -decayTime__description__0 = Time until envelope reaches decayLevel. -decayLevel__description__0 = Level after decay. The envelope will sustain here until it is released. -releaseTime__description__0 = Duration of the release portion of the envelope. -releaseLevel__description__0 = Level at the end of the release. -set__description__0 = Reset the envelope with a series of time/value pairs. -set__params__attackTime = Number: Time (in seconds) before level reaches attackLevel -set__params__attackLevel = Number: Typically an amplitude between 0.0 and 1.0 -set__params__decayTime = Number: Time -set__params__decayLevel = Number: Amplitude (In a standard ADSR envelope, decayLevel = sustainLevel) -set__params__releaseTime = Number: Release Time (in seconds) -set__params__releaseLevel = Number: Amplitude -setADSR__description__0 = Set values like a traditional ADSR envelope . -setADSR__params__attackTime = Number: Time (in seconds before envelope reaches Attack Level -setADSR__params__decayTime = Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level -setADSR__params__susRatio = Number: (Optional) 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 setRange), then decayLevel would increase proportionally, to become 0.5. -setADSR__params__releaseTime = Number: (Optional) Time in seconds from now (defaults to 0) -setRange__description__0 = Set max (attackLevel) and min (releaseLevel) of envelope. -setRange__params__aLevel = Number: attack level (defaults to 1) -setRange__params__rLevel = Number: release level (defaults to 0) -setInput__description__0 = 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. -setInput__params__inputs = Object: (Optional) A p5.sound object or Web Audio Param. -setExp__description__0 = Set whether the envelope ramp is linear (default) or exponential. Exponential ramps can be useful because we perceive amplitude and frequency logarithmically. -setExp__params__isExp = Boolean: true is exponential, false is linear -play__description__0 = 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 Web Audio Audio Param. -play__params__unit = Object: A p5.sound object or Web Audio Param. -play__params__startTime = Number: (Optional) time from now (in seconds) at which to play -play__params__sustainTime = Number: (Optional) time to sustain before releasing the envelope -triggerAttack__description__0 = 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 Web Audio Param. -triggerAttack__params__unit = Object: p5.sound Object or Web Audio Param -triggerAttack__params__secondsFromNow = Number: time from now (in seconds) -triggerRelease__description__0 = 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. -triggerRelease__params__unit = Object: p5.sound Object or Web Audio Param -triggerRelease__params__secondsFromNow = Number: time to trigger the release -ramp__description__0 = Exponentially ramp to a value using the first two values from setADSR(attackTime, decayTime) as time constants for simple exponential ramps. If the value is higher than current value, it uses attackTime, while a decrease uses decayTime. -ramp__params__unit = Object: p5.sound Object or Web Audio Param -ramp__params__secondsFromNow = Number: When to trigger the ramp -ramp__params__v = Number: Target value -ramp__params__v2 = Number: (Optional) Second target value -add__description__0 = 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. -add__returns = p5.Envelope: Envelope Returns this envelope with scaled output -add__params__number = Number: Constant number to add -mult__description__0 = Multiply the p5.Envelope's output amplitude by a fixed value. Calling this method again will override the initial mult() with new values. -mult__returns = p5.Envelope: Envelope Returns this envelope with scaled output -mult__params__number = Number: Constant number to multiply -scale__description__0 = 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. -scale__returns = p5.Envelope: Envelope Returns this envelope with scaled output -scale__params__inMin = Number: input range minumum -scale__params__inMax = Number: input range maximum -scale__params__outMin = Number: input range minumum -scale__params__outMax = Number: input range maximum diff --git a/src/data/localization/en/p5.FFT.ftl b/src/data/localization/en/p5.FFT.ftl deleted file mode 100644 index 62f8486e2d..0000000000 --- a/src/data/localization/en/p5.FFT.ftl +++ /dev/null @@ -1,33 +0,0 @@ -description__0 = FFT (Fast Fourier Transform) is an analysis algorithm that isolates individual audio frequencies within a waveform. -description__1 = Once instantiated, a p5.FFT object can return an array based on two types of analyses: • FFT.waveform() 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. • FFT.analyze() 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 getEnergy() to measure amplitude at specific frequencies, or within a range of frequencies. -description__2 = FFT analyzes a very short snapshot of sound called a sample buffer. It returns an array of amplitude measurements, referred to as bins. 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. -params__smoothing = Number: (Optional) Smooth results of Freq Spectrum. 0.0 < smoothing < 1.0. Defaults to 0.8. -params__bins = Number: (Optional) Length of resulting array. Must be a power of two between 16 and 1024. Defaults to 1024. -setInput__description__0 = Set the input source for the FFT analysis. If no source is provided, FFT will analyze all sound in the sketch. -setInput__params__source = Object: (Optional) p5.sound object (or web audio API source node) -waveform__description__0 = 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. -waveform__returns = Array: Array Array of amplitude values (-1 to 1) over time. Array length = bins. -waveform__params__bins = Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024. -waveform__params__precision = String: (Optional) If any value is provided, will return results in a Float32 Array which is more precise than a regular array. -analyze__description__0 = 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 getEnergy(). -analyze__returns = Array: spectrum Array of energy (amplitude/volume) values across the frequency spectrum. Lowest energy (silence) = 0, highest possible is 255. -analyze__params__bins = Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024. -analyze__params__scale = Number: (Optional) If "dB," returns decibel float measurements between -140 and 0 (max). Otherwise returns integers from 0-255. -getEnergy__description__0 = Returns the amount of energy (volume) at a specific frequency, 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). 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. -getEnergy__returns = Number: Energy Energy (volume/amplitude) from 0 and 255. -getEnergy__params__frequency1 = Number|String: Will return a value representing energy at this frequency. Alternately, the strings "bass", "lowMid" "mid", "highMid", and "treble" will return predefined frequency ranges. -getEnergy__params__frequency2 = Number: (Optional) If a second frequency is given, will return average amount of energy that exists between the two frequencies. -getCentroid__description__0 = Returns the spectral centroid of the input signal. 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. -getCentroid__returns = Number: Spectral Centroid Frequency of the spectral centroid in Hz. -smooth__description__0 = Smooth FFT analysis by averaging with the last analysis frame. -smooth__params__smoothing = Number: 0.0 < smoothing < 1.0. Defaults to 0.8. -linAverages__description__0 = Returns an array of average amplitude values for a given number of frequency bands split equally. N defaults to 16. 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. -linAverages__returns = Array: linearAverages Array of average amplitude values for each group -linAverages__params__N = Number: Number of returned frequency groups -logAverages__description__0 = Returns an array of average amplitude values of the spectrum, for a given set of Octave Bands 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. -logAverages__returns = Array: logAverages Array of average amplitude values for each group -logAverages__params__octaveBands = Array: Array of Octave Bands objects for grouping -getOctaveBands__description__0 = Calculates and Returns the 1/N Octave Bands 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. -getOctaveBands__returns = Array: octaveBands Array of octave band objects with their bounds -getOctaveBands__params__N = Number: Specifies the 1/N type of generated octave bands -getOctaveBands__params__fCtr0 = Number: Minimum central frequency for the lowest band diff --git a/src/data/localization/en/p5.File.ftl b/src/data/localization/en/p5.File.ftl deleted file mode 100644 index 91fc131ddd..0000000000 --- a/src/data/localization/en/p5.File.ftl +++ /dev/null @@ -1,8 +0,0 @@ -description__0 = Base class for a file. Used for Element.drop and createFileInput. -params__file = File: File that is wrapped -file__description__0 = Underlying File object. All normal File methods can be called on this. -type__description__0 = File type (image, text, etc.) -subtype__description__0 = File subtype (usually the file extension jpg, png, xml, etc.) -name__description__0 = File name -size__description__0 = File size -data__description__0 = URL string containing either image data, the text contents of the file or a parsed object if file is JSON and p5.XML if XML diff --git a/src/data/localization/en/p5.Filter.ftl b/src/data/localization/en/p5.Filter.ftl deleted file mode 100644 index 4608f85587..0000000000 --- a/src/data/localization/en/p5.Filter.ftl +++ /dev/null @@ -1,28 +0,0 @@ -description__0 = A p5.Filter uses a Web Audio Biquad Filter to filter the frequency response of an input source. Subclasses include: p5.LowPass: Allows frequencies below the cutoff frequency to pass through, and attenuates frequencies above the cutoff.
    p5.HighPass: The opposite of a lowpass filter.
    p5.BandPass: Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range.
    -description__1 = The .res() method controls either width of the bandpass, or resonance of the low/highpass cutoff frequency. -description__2 = This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. -params__type = String: (Optional) 'lowpass' (default), 'highpass', 'bandpass' -biquadFilter__description__0 = The p5.Filter is built with a Web Audio BiquadFilter Node. -process__description__0 = Filter an audio signal according to a set of filter parameters. -process__params__Signal = Object: An object that outputs audio -process__params__freq = Number: (Optional) Frequency in Hz, from 10 to 22050 -process__params__res = Number: (Optional) Resonance/Width of the filter frequency from 0.001 to 1000 -set__description__0 = Set the frequency and the resonance of the filter. -set__params__freq = Number: (Optional) Frequency in Hz, from 10 to 22050 -set__params__res = Number: (Optional) Resonance (Q) from 0.001 to 1000 -set__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now -freq__description__0 = 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). -freq__returns = Number: value Returns the current frequency value -freq__params__freq = Number: Filter Frequency -freq__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now -res__description__0 = Controls either width of a bandpass frequency, or the resonance of a low/highpass cutoff frequency. -res__returns = Number: value Returns the current res value -res__params__res = Number: Resonance/Width of filter freq from 0.001 to 1000 -res__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now -gain__description__0 = 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. -gain__returns = Number: Returns the current or updated gain value -gain__params__gain = Number -toggle__description__0 = Toggle function. Switches between the specified type and allpass -toggle__returns = Boolean: [Toggle value] -setType__description__0 = Set the type of a p5.Filter. Possible types include: "lowpass" (default), "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass". -setType__params__t = String diff --git a/src/data/localization/en/p5.Font.ftl b/src/data/localization/en/p5.Font.ftl deleted file mode 100644 index b5105a863c..0000000000 --- a/src/data/localization/en/p5.Font.ftl +++ /dev/null @@ -1,17 +0,0 @@ -description__0 = Base class for font handling -params__pInst = P5: (Optional) pointer to p5 instance -font__description__0 = Underlying opentype font implementation -textBounds__description__0 = Returns a tight bounding box for the given text string using this font -textBounds__returns = Object: a rectangle object with properties: x, y, w, h -textBounds__params__line = String: a line of text -textBounds__params__x = Number: x-position -textBounds__params__y = Number: y-position -textBounds__params__fontSize = Number: (Optional) font size to use (optional) Default is 12. -textBounds__params__options = Object: (Optional) opentype options (optional) opentype fonts contains alignment and baseline options. Default is 'LEFT' and 'alphabetic' -textToPoints__description__0 = Computes an array of points following the path for specified text -textToPoints__returns = Array: an array of points, each with x, y, alpha (the path angle) -textToPoints__params__txt = String: a line of text -textToPoints__params__x = Number: x-position -textToPoints__params__y = Number: y-position -textToPoints__params__fontSize = Number: font size to use (optional) -textToPoints__params__options = Object: (Optional) an (optional) object that can contain: sampleFactor - the ratio of path-length to number of samples (default=.1); higher values yield more points and are therefore more precise simplifyThreshold - if set to a non-zero value, collinear points will be be removed from the polygon; the value represents the threshold angle to use when determining whether two edges are collinear diff --git a/src/data/localization/en/p5.Gain.ftl b/src/data/localization/en/p5.Gain.ftl deleted file mode 100644 index a06aa722c9..0000000000 --- a/src/data/localization/en/p5.Gain.ftl +++ /dev/null @@ -1,10 +0,0 @@ -description__0 = A gain node is usefull to set the relative volume of sound. It's typically used to build mixers. -setInput__description__0 = Connect a source to the gain node. -setInput__params__src = Object: p5.sound / Web Audio object with a sound output. -connect__description__0 = Send output to a p5.sound or web audio object -connect__params__unit = Object -disconnect__description__0 = Disconnect all output. -amp__description__0 = Set the output level of the gain node. -amp__params__volume = Number: amplitude between 0 and 1.0 -amp__params__rampTime = Number: (Optional) create a fade that lasts rampTime -amp__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now diff --git a/src/data/localization/en/p5.Geometry.ftl b/src/data/localization/en/p5.Geometry.ftl deleted file mode 100644 index 3453d8c46e..0000000000 --- a/src/data/localization/en/p5.Geometry.ftl +++ /dev/null @@ -1,9 +0,0 @@ -description__0 = p5 Geometry class -params__detailX = Integer: (Optional) number of vertices along the x-axis. -params__detailY = Integer: (Optional) number of vertices along the y-axis. -params__callback = Function: (Optional) function to call upon object instantiation. -computeFaces__description__0 = computes faces for geometry objects based on the vertices. -computeNormals__description__0 = computes smooth normals per vertex as an average of each face. -averageNormals__description__0 = Averages the vertex normals. Used in curved surfaces -averagePoleNormals__description__0 = Averages pole normals. Used in spherical primitives -normalize__description__0 = Modifies all vertices to be centered within the range -100 to 100. diff --git a/src/data/localization/en/p5.Graphics.ftl b/src/data/localization/en/p5.Graphics.ftl deleted file mode 100644 index 74372de2a2..0000000000 --- a/src/data/localization/en/p5.Graphics.ftl +++ /dev/null @@ -1,7 +0,0 @@ -description__0 = Thin wrapper around a renderer, to be used for creating a graphics buffer object. Use this class if you need to draw into an off-screen graphics buffer. The two parameters define the width and height in pixels. The fields and methods for this class are extensive, but mirror the normal drawing API for p5. -params__w = Number: width -params__h = Number: height -params__renderer = Constant: the renderer to use, either P2D or WEBGL -params__pInst = P5: (Optional) pointer to p5 instance -reset__description__0 = Resets certain values such as those modified by functions in the Transform category and in the Lights category that are not automatically reset with graphics buffer objects. Calling this in draw() will copy the behavior of the standard canvas. -remove__description__0 = Removes a Graphics object from the page and frees any resources associated with it. diff --git a/src/data/localization/en/p5.HighPass.ftl b/src/data/localization/en/p5.HighPass.ftl deleted file mode 100644 index 98f66dfc82..0000000000 --- a/src/data/localization/en/p5.HighPass.ftl +++ /dev/null @@ -1 +0,0 @@ -description__0 = Constructor: new p5.HighPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('highpass'). See p5.Filter for methods. diff --git a/src/data/localization/en/p5.Image.ftl b/src/data/localization/en/p5.Image.ftl deleted file mode 100644 index 8ba9fe97cc..0000000000 --- a/src/data/localization/en/p5.Image.ftl +++ /dev/null @@ -1,82 +0,0 @@ -description__0 = Creates a new p5.Image. A p5.Image is a canvas backed representation of an image. -description__1 = p5 can display .gif, .jpg and .png images. Images may be displayed in 2D and 3D space. Before an image is used, it must be loaded with the loadImage() function. The p5.Image class contains fields for the width and height of the image, as well as an array called pixels[] that contains the values for every pixel in the image. -description__2 = The methods described below allow easy access to the image's pixels and alpha channel and simplify the process of compositing. -description__3 = Before using the pixels[] array, be sure to use the loadPixels() method on the image to make sure that the pixel data is properly loaded. -params__width = Number -params__height = Number -width__description__0 = Image width. -height__description__0 = Image height. -pixels__description__0 = Array containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays may have more pixels (by a factor of pixelDensity^2). For example, if the image is 100×100 pixels, there will be 40,000. With pixelDensity = 2, there will be 160,000. The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): 
    let d = pixelDensity(); for (let i = 0; i < d; i++) {"{"}  for (let j = 0; j < d; j++) {"{"}  // loop over  index = 4 * ((y * d + j) * width * d + (x * d + i));  pixels[index] = r;  pixels[index+1] = g;  pixels[index+2] = b;  pixels[index+3] = a;  {"}"} {"}"}
    -pixels__description__1 = Before accessing this array, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes. -loadPixels__description__0 = Loads the pixels data for this image into the [pixels] attribute. -updatePixels__description__0 = Updates the backing canvas for this image with the contents of the [pixels] array. -updatePixels__description__1 = If this image is an animated GIF then the pixels will be updated in the frame that is currently displayed. -updatePixels__params__x = Integer: x-offset of the target update area for the underlying canvas -updatePixels__params__y = Integer: y-offset of the target update area for the underlying canvas -updatePixels__params__w = Integer: height of the target update area for the underlying canvas -updatePixels__params__h = Integer: height of the target update area for the underlying canvas -get__description__0 = Get a region of pixels from an image. -get__description__1 = If no params are passed, the whole image is returned. If x and y are the only params passed a single pixel is extracted. If all params are passed a rectangle region is extracted and a p5.Image is returned. -get__returns = p5.Image: the rectangle p5.Image -get__params__x = Number: x-coordinate of the pixel -get__params__y = Number: y-coordinate of the pixel -get__params__w = Number: width -get__params__h = Number: height -set__description__0 = Set the color of a single pixel or write an image into this p5.Image. -set__description__1 = Note that for a large number of pixels this will be slower than directly manipulating the pixels array and then calling updatePixels(). -set__params__x = Number: x-coordinate of the pixel -set__params__y = Number: y-coordinate of the pixel -set__params__a = Number|Number[]|Object: grayscale value | pixel array | a p5.Color | image to copy -resize__description__0 = Resize the image to a new width and height. To make the image scale proportionally, use 0 as the value for the wide or high parameter. For instance, to make the width of an image 150 pixels, and change the height using the same proportion, use resize(150, 0). -resize__params__width = Number: the resized image width -resize__params__height = Number: the resized image height -copy__description__0 = Copies a region of pixels from one image to another. If no srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region. -copy__params__srcImage = p5.Image|p5.Element: source image -copy__params__sx = Integer: X coordinate of the source's upper left corner -copy__params__sy = Integer: Y coordinate of the source's upper left corner -copy__params__sw = Integer: source image width -copy__params__sh = Integer: source image height -copy__params__dx = Integer: X coordinate of the destination's upper left corner -copy__params__dy = Integer: Y coordinate of the destination's upper left corner -copy__params__dw = Integer: destination image width -copy__params__dh = Integer: destination image height -mask__description__0 = Masks part of an image from displaying by loading another image and using its alpha channel as an alpha channel for this image. Masks are cumulative, one applied to an image object, they cannot be removed. -mask__params__srcImage = p5.Image: source image -filter__description__0 = Applies an image filter to a p5.Image -filter__description__1 = THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used. -filter__description__2 = GRAY Converts any colors in the image to grayscale equivalents. No parameter is used. -filter__description__3 = OPAQUE Sets the alpha channel to entirely opaque. No parameter is used. -filter__description__4 = INVERT Sets each pixel to its inverse value. No parameter is used. -filter__description__5 = POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges. -filter__description__6 = BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur. -filter__description__7 = ERODE Reduces the light areas. No parameter is used. -filter__description__8 = DILATE Increases the light areas. No parameter is used. -filter__description__9 = filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples. -filter__params__filterType = Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter -filter__params__filterParam = Number: (Optional) an optional parameter unique to each filter, see above -blend__description__0 = Copies a region of pixels from one image to another, using a specified blend mode to do the operation. -blend__params__srcImage = p5.Image: source image -blend__params__sx = Integer: X coordinate of the source's upper left corner -blend__params__sy = Integer: Y coordinate of the source's upper left corner -blend__params__sw = Integer: source image width -blend__params__sh = Integer: source image height -blend__params__dx = Integer: X coordinate of the destination's upper left corner -blend__params__dy = Integer: Y coordinate of the destination's upper left corner -blend__params__dw = Integer: destination image width -blend__params__dh = Integer: destination image height -blend__params__blendMode = Constant: the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL. Available blend modes are: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/ -save__description__0 = Saves the image to a file and force the browser to download it. Accepts two strings for filename and file extension Supports png (default), jpg, and gif Note that the file will only be downloaded as an animated GIF if the p5.Image was loaded from a GIF file. -save__params__filename = String: give your file a name -save__params__extension = String: 'png' or 'jpg' -reset__description__0 = Starts an animated GIF over at the beginning state. -getCurrentFrame__description__0 = Gets the index for the frame that is currently visible in an animated GIF. -getCurrentFrame__returns = Number: The index for the currently displaying frame in animated GIF -setFrame__description__0 = Sets the index of the frame that is currently visible in an animated GIF -setFrame__params__index = Number: the index for the frame that should be displayed -numFrames__description__0 = Returns the number of frames in an animated GIF -numFrames__returns = Number: -play__description__0 = Plays an animated GIF that was paused with pause() -pause__description__0 = Pauses an animated GIF. -delay__description__0 = Changes the delay between frames in an animated GIF. There is an optional second parameter that indicates an index for a specific frame that should have its delay modified. If no index is given, all frames will have the new delay. -delay__params__d = Number: the amount in milliseconds to delay between switching frames -delay__params__index = Number: (Optional) the index of the frame that should have the new delay value {"{"}optional{"}"} diff --git a/src/data/localization/en/p5.LowPass.ftl b/src/data/localization/en/p5.LowPass.ftl deleted file mode 100644 index 6d057d506a..0000000000 --- a/src/data/localization/en/p5.LowPass.ftl +++ /dev/null @@ -1 +0,0 @@ -description__0 = Constructor: new p5.LowPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('lowpass'). See p5.Filter for methods. diff --git a/src/data/localization/en/p5.MediaElement.ftl b/src/data/localization/en/p5.MediaElement.ftl deleted file mode 100644 index a946c36cd8..0000000000 --- a/src/data/localization/en/p5.MediaElement.ftl +++ /dev/null @@ -1,41 +0,0 @@ -description__0 = Extends p5.Element to handle audio and video. In addition to the methods of p5.Element, it also contains methods for controlling media. It is not called directly, but p5.MediaElements are created by calling createVideo, createAudio, and createCapture. -params__elt = String: DOM node that is wrapped -src__description__0 = Path to the media element source. -src__returns = String: src -play__description__0 = Play an HTML5 media element. -stop__description__0 = Stops an HTML5 media element (sets current time to zero). -pause__description__0 = Pauses an HTML5 media element. -loop__description__0 = Set 'loop' to true for an HTML5 media element, and starts playing. -noLoop__description__0 = Set 'loop' to false for an HTML5 media element. Element will stop when it reaches the end. -autoplay__description__0 = Set HTML5 media element to autoplay or not. If no argument is specified, by default it will autoplay. -autoplay__params__shouldAutoplay = Boolean: whether the element should autoplay -volume__description__0 = Sets volume for this HTML5 media element. If no argument is given, returns the current volume. -volume__returns = Number: current volume -volume__params__val = Number: volume between 0.0 and 1.0 -speed__description__0 = If no arguments are given, returns the current playback speed of the element. The speed parameter sets the speed where 2.0 will play the element twice as fast, 0.5 will play at half the speed, and -1 will play the element in normal speed in reverse.(Note that not all browsers support backward playback and even if they do, playback might not be smooth.) -speed__returns = Number: current playback speed of the element -speed__params__speed = Number: speed multiplier for element playback -time__description__0 = If no arguments are given, returns the current time of the element. If an argument is given the current time of the element is set to it. -time__returns = Number: current time (in seconds) -time__params__time = Number: time to jump to (in seconds) -duration__description__0 = Returns the duration of the HTML5 media element. -duration__returns = Number: duration -onended__description__0 = Schedule an event to be called when the audio or video element reaches the end. If the element is looping, this will not be called. The element is passed in as the argument to the onended callback. -onended__params__callback = Function: function to call when the soundfile has ended. The media element will be passed in as the argument to the callback. -connect__description__0 = Send the audio output of this element to a specified audioNode or p5.sound object. If no element is provided, connects to p5's main output. That connection is established when this method is first called. All connections are removed by the .disconnect() method. -connect__description__1 = This method is meant to be used with the p5.sound.js addon library. -connect__params__audioNode = AudioNode|Object: AudioNode from the Web Audio API, or an object from the p5.sound library -disconnect__description__0 = Disconnect all Web Audio routing, including to main output. This is useful if you want to re-route the output through audio effects, for example. -showControls__description__0 = Show the default MediaElement controls, as determined by the web browser. -hideControls__description__0 = Hide the default mediaElement controls. -addCue__description__0 = Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point. -addCue__description__1 = Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback. -addCue__description__2 = Time will be passed as the first parameter to the callback function, and param will be the second parameter. -addCue__returns = Number: id ID of this cue, useful for removeCue(id) -addCue__params__time = Number: 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. -addCue__params__callback = Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters. -addCue__params__value = Object: (Optional) An object to be passed as the second parameter to the callback function. -removeCue__description__0 = Remove a callback based on its ID. The ID is returned by the addCue method. -removeCue__params__id = Number: ID of the cue, as returned by addCue -clearCues__description__0 = Remove all of the callbacks that had originally been scheduled via the addCue method. -clearCues__params__id = Number: ID of the cue, as returned by addCue diff --git a/src/data/localization/en/p5.MonoSynth.ftl b/src/data/localization/en/p5.MonoSynth.ftl deleted file mode 100644 index 02c4d229ea..0000000000 --- a/src/data/localization/en/p5.MonoSynth.ftl +++ /dev/null @@ -1,26 +0,0 @@ -description__0 = 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. -attack__description__0 = Getters and Setters -play__description__0 = Play tells the MonoSynth to start playing a note. This method schedules the calling of .triggerAttack and .triggerRelease. -play__params__note = String | Number: 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 Tone. Defaults to 440 hz. -play__params__velocity = Number: (Optional) velocity of the note to play (ranging from 0 to 1) -play__params__secondsFromNow = Number: (Optional) time from now (in seconds) at which to play -play__params__sustainTime = Number: (Optional) time to sustain before releasing the envelope. Defaults to 0.15 seconds. -triggerAttack__description__0 = 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. -triggerAttack__params__note = String | Number: 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 Tone. Defaults to 440 hz -triggerAttack__params__velocity = Number: (Optional) velocity of the note to play (ranging from 0 to 1) -triggerAttack__params__secondsFromNow = Number: (Optional) time from now (in seconds) at which to play -triggerRelease__description__0 = 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. -triggerRelease__params__secondsFromNow = Number: time to trigger the release -setADSR__description__0 = Set values like a traditional ADSR envelope . -setADSR__params__attackTime = Number: Time (in seconds before envelope reaches Attack Level -setADSR__params__decayTime = Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level -setADSR__params__susRatio = Number: (Optional) 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 setRange), then decayLevel would increase proportionally, to become 0.5. -setADSR__params__releaseTime = Number: (Optional) Time in seconds from now (defaults to 0) -amp__description__0 = MonoSynth amp -amp__returns = Number: new volume value -amp__params__vol = Number: desired volume -amp__params__rampTime = Number: (Optional) Time to reach new volume -connect__description__0 = Connect to a p5.sound / Web Audio object. -connect__params__unit = Object: A p5.sound or Web Audio object -disconnect__description__0 = Disconnect all outputs -dispose__description__0 = Get rid of the MonoSynth and free up its resources / memory. diff --git a/src/data/localization/en/p5.Noise.ftl b/src/data/localization/en/p5.Noise.ftl deleted file mode 100644 index 4b92afc02c..0000000000 --- a/src/data/localization/en/p5.Noise.ftl +++ /dev/null @@ -1,4 +0,0 @@ -description__0 = Noise is a type of oscillator that generates a buffer with random values. -params__type = String: Type of noise can be 'white' (default), 'brown' or 'pink'. -setType__description__0 = Set type of noise to 'white', 'pink' or 'brown'. White is the default. -setType__params__type = String: (Optional) 'white', 'pink' or 'brown' diff --git a/src/data/localization/en/p5.NumberDict.ftl b/src/data/localization/en/p5.NumberDict.ftl deleted file mode 100644 index 338c059d12..0000000000 --- a/src/data/localization/en/p5.NumberDict.ftl +++ /dev/null @@ -1,21 +0,0 @@ -description__0 = A simple Dictionary class for Numbers. -add__description__0 = Add the given number to the value currently stored at the given key. The sum then replaces the value previously stored in the Dictionary. -add__params__Key = Number: for the value you wish to add to -add__params__Number = Number: to add to the value -sub__description__0 = Subtract the given number from the value currently stored at the given key. The difference then replaces the value previously stored in the Dictionary. -sub__params__Key = Number: for the value you wish to subtract from -sub__params__Number = Number: to subtract from the value -mult__description__0 = Multiply the given number with the value currently stored at the given key. The product then replaces the value previously stored in the Dictionary. -mult__params__Key = Number: for value you wish to multiply -mult__params__Amount = Number: to multiply the value by -div__description__0 = Divide the given number with the value currently stored at the given key. The quotient then replaces the value previously stored in the Dictionary. -div__params__Key = Number: for value you wish to divide -div__params__Amount = Number: to divide the value by -minValue__description__0 = Return the lowest number currently stored in the Dictionary. -minValue__returns = Number: -maxValue__description__0 = Return the highest number currently stored in the Dictionary. -maxValue__returns = Number: -minKey__description__0 = Return the lowest key currently used in the Dictionary. -minKey__returns = Number: -maxKey__description__0 = Return the highest key currently used in the Dictionary. -maxKey__returns = Number: diff --git a/src/data/localization/en/p5.OnsetDetect.ftl b/src/data/localization/en/p5.OnsetDetect.ftl deleted file mode 100644 index 29fd30bdc3..0000000000 --- a/src/data/localization/en/p5.OnsetDetect.ftl +++ /dev/null @@ -1,5 +0,0 @@ -description__0 = Listen for onsets (a sharp increase in volume) within a given frequency range. -params__freqLow = Number: Low frequency -params__freqHigh = Number: High frequency -params__threshold = Number: Amplitude threshold between 0 (no energy) and 1 (maximum) -params__callback = Function: Function to call when an onset is detected diff --git a/src/data/localization/en/p5.Oscillator.ftl b/src/data/localization/en/p5.Oscillator.ftl deleted file mode 100644 index 1421f1072a..0000000000 --- a/src/data/localization/en/p5.Oscillator.ftl +++ /dev/null @@ -1,50 +0,0 @@ -description__0 = 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). -description__1 = Set the type of oscillation with setType(), or by instantiating a specific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc. -params__freq = Number: (Optional) frequency defaults to 440Hz -params__type = String: (Optional) type of oscillator. Options: 'sine' (default), 'triangle', 'sawtooth', 'square' -start__description__0 = Start an oscillator. -start__description__1 = 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: userStartAudio(). -start__params__time = Number: (Optional) startTime in seconds from now. -start__params__frequency = Number: (Optional) frequency in Hz. -stop__description__0 = Stop an oscillator. Accepts an optional parameter to determine how long (in seconds from now) until the oscillator stops. -stop__params__secondsFromNow = Number: Time, in seconds from now. -amp__description__0 = Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal. -amp__returns = AudioParam: gain If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's gain/amplitude/volume) -amp__params__vol = Number|Object: between 0 and 1.0 or a modulating signal/oscillator -amp__params__rampTime = Number: (Optional) create a fade that lasts rampTime -amp__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now -getAmp__description__0 = Returns the value of output gain -getAmp__returns = Number: Amplitude value between 0.0 and 1.0 -freq__description__0 = 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. -freq__returns = AudioParam: Frequency If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's frequency -freq__params__Frequency = Number|Object: Frequency in Hz or modulating signal/oscillator -freq__params__rampTime = Number: (Optional) Ramp time (in seconds) -freq__params__timeFromNow = Number: (Optional) Schedule this event to happen at x seconds from now -getFreq__description__0 = Returns the value of frequency of oscillator -getFreq__returns = Number: Frequency of oscillator in Hertz -setType__description__0 = Set type to 'sine', 'triangle', 'sawtooth' or 'square'. -setType__params__type = String: 'sine', 'triangle', 'sawtooth' or 'square'. -getType__description__0 = Returns current type of oscillator eg. 'sine', 'triangle', 'sawtooth' or 'square'. -getType__returns = String: type of oscillator eg . 'sine', 'triangle', 'sawtooth' or 'square'. -connect__description__0 = Connect to a p5.sound / Web Audio object. -connect__params__unit = Object: A p5.sound or Web Audio object -disconnect__description__0 = Disconnect all outputs -pan__description__0 = Pan between Left (-1) and Right (1) -pan__params__panning = Number: Number between -1 and 1 -pan__params__timeFromNow = Number: schedule this event to happen seconds from now -getPan__description__0 = Returns the current value of panPosition , between Left (-1) and Right (1) -getPan__returns = Number: panPosition of oscillator , between Left (-1) and Right (1) -phase__description__0 = 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. -phase__params__phase = Number: float between 0.0 and 1.0 -add__description__0 = 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. -add__returns = p5.Oscillator: Oscillator Returns this oscillator with scaled output -add__params__number = Number: Constant number to add -mult__description__0 = 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. -mult__returns = p5.Oscillator: Oscillator Returns this oscillator with multiplied output -mult__params__number = Number: Constant number to multiply -scale__description__0 = 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. -scale__returns = p5.Oscillator: Oscillator Returns this oscillator with scaled output -scale__params__inMin = Number: input range minumum -scale__params__inMax = Number: input range maximum -scale__params__outMin = Number: input range minumum -scale__params__outMax = Number: input range maximum diff --git a/src/data/localization/en/p5.Panner3D.ftl b/src/data/localization/en/p5.Panner3D.ftl deleted file mode 100644 index 92fd144bc0..0000000000 --- a/src/data/localization/en/p5.Panner3D.ftl +++ /dev/null @@ -1,39 +0,0 @@ -description__0 = Panner3D is based on the Web Audio Spatial Panner Node. This panner is a spatial processing node that allows audio to be positioned and oriented in 3D space. -description__1 = The position is relative to an Audio Context Listener, which can be accessed by p5.soundOut.audiocontext.listener -panner__description__0 = Web Audio Spatial Panner Node -panner__description__1 = Properties include Panning Model : "equal power" or "HRTF" DistanceModel : "linear", "inverse", or "exponential" -process__description__0 = Connect an audio sorce -process__params__src = Object: Input source -set__description__0 = Set the X,Y,Z position of the Panner -set__returns = Array: Updated x, y, z values as an array -set__params__xVal = Number -set__params__yVal = Number -set__params__zVal = Number -set__params__time = Number -positionX__description__0 = Getter and setter methods for position coordinates -positionX__returns = Number: updated coordinate value -positionY__description__0 = Getter and setter methods for position coordinates -positionY__returns = Number: updated coordinate value -positionZ__description__0 = Getter and setter methods for position coordinates -positionZ__returns = Number: updated coordinate value -orient__description__0 = Set the X,Y,Z position of the Panner -orient__returns = Array: Updated x, y, z values as an array -orient__params__xVal = Number -orient__params__yVal = Number -orient__params__zVal = Number -orient__params__time = Number -orientX__description__0 = Getter and setter methods for orient coordinates -orientX__returns = Number: updated coordinate value -orientY__description__0 = Getter and setter methods for orient coordinates -orientY__returns = Number: updated coordinate value -orientZ__description__0 = Getter and setter methods for orient coordinates -orientZ__returns = Number: updated coordinate value -setFalloff__description__0 = Set the rolloff factor and max distance -setFalloff__params__maxDistance = Number (Optional) -setFalloff__params__rolloffFactor = Number (Optional) -maxDist__description__0 = Maxium distance between the source and the listener -maxDist__returns = Number: updated value -maxDist__params__maxDistance = Number -rollof__description__0 = How quickly the volume is reduced as the source moves away from the listener -rollof__returns = Number: updated value -rollof__params__rolloffFactor = Number diff --git a/src/data/localization/en/p5.Part.ftl b/src/data/localization/en/p5.Part.ftl deleted file mode 100644 index 6de2878e9a..0000000000 --- a/src/data/localization/en/p5.Part.ftl +++ /dev/null @@ -1,29 +0,0 @@ -description__0 = 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. -description__1 = See p5.Phrase for more about musical timing. -params__steps = Number: (Optional) Steps in the part -params__tatums = Number: (Optional) Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note) -setBPM__description__0 = Set the tempo of this part, in Beats Per Minute. -setBPM__params__BPM = Number: Beats Per Minute -setBPM__params__rampTime = Number: (Optional) Seconds from now -getBPM__description__0 = Returns the tempo, in Beats Per Minute, of this part. -getBPM__returns = Number: -start__description__0 = Start playback of this part. It will play through all of its phrases at a speed determined by setBPM. -start__params__time = Number: (Optional) seconds from now -loop__description__0 = Loop playback of this part. It will begin looping through all of its phrases at a speed determined by setBPM. -loop__params__time = Number: (Optional) seconds from now -noLoop__description__0 = Tell the part to stop looping. -stop__description__0 = Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again. -stop__params__time = Number: (Optional) seconds from now -pause__description__0 = Pause the part. Playback will resume from the current step. -pause__params__time = Number: seconds from now -addPhrase__description__0 = Add a p5.Phrase to this Part. -addPhrase__params__phrase = p5.Phrase: reference to a p5.Phrase -removePhrase__description__0 = Remove a phrase from this part, based on the name it was given when it was created. -removePhrase__params__phraseName = String -getPhrase__description__0 = Get a phrase from this part, based on the name it was given when it was created. Now you can modify its array. -getPhrase__params__phraseName = String -replaceSequence__description__0 = Find all sequences with the specified name, and replace their patterns with the specified array. -replaceSequence__params__phraseName = String -replaceSequence__params__sequence = Array: Array of values to pass into the callback at each step of the phrase. -onStep__description__0 = Set the function that will be called at every step. This will clear the previous function. -onStep__params__callback = Function: The name of the callback you want to fire on every beat/tatum. diff --git a/src/data/localization/en/p5.PeakDetect.ftl b/src/data/localization/en/p5.PeakDetect.ftl deleted file mode 100644 index 225467a07a..0000000000 --- a/src/data/localization/en/p5.PeakDetect.ftl +++ /dev/null @@ -1,17 +0,0 @@ -description__0 = PeakDetect works in conjunction with p5.FFT to look for onsets in some or all of the frequency spectrum. -description__1 = To use p5.PeakDetect, call update in the draw loop and pass in a p5.FFT object. -description__2 = You can listen for a specific part of the frequency spectrum by setting the range between freq1 and freq2. -description__3 = threshold 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. -description__4 = The update method is meant to be run in the draw loop, and frames 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: framesPerPeak = 60 / (estimatedBPM / 60 ); -description__5 = Based on example contribtued by @b2renger, and a simple beat detection explanation by Felix Turner. -params__freq1 = Number: (Optional) lowFrequency - defaults to 20Hz -params__freq2 = Number: (Optional) highFrequency - defaults to 20000 Hz -params__threshold = Number: (Optional) 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. -params__framesPerPeak = Number: (Optional) Defaults to 20. -isDetected__description__0 = isDetected is set to true when a peak is detected. -update__description__0 = The update method is run in the draw loop. -update__description__1 = 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. -update__params__fftObject = p5.FFT: A p5.FFT object -onPeak__description__0 = 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. -onPeak__params__callback = Function: Name of a function that will be called when a peak is detected. -onPeak__params__val = Object: (Optional) Optional value to pass into the function when a peak is detected. diff --git a/src/data/localization/en/p5.Phrase.ftl b/src/data/localization/en/p5.Phrase.ftl deleted file mode 100644 index 3713b544f7..0000000000 --- a/src/data/localization/en/p5.Phrase.ftl +++ /dev/null @@ -1,7 +0,0 @@ -description__0 = A phrase is a pattern of musical events over time, i.e. a series of notes and rests. -description__1 = 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. -description__2 = 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 playNote(value){"{"}{"}"}. 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). -params__name = String: Name so that you can access the Phrase. -params__callback = Function: 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. -params__sequence = Array: Array of values to pass into the callback at each step of the phrase. -sequence__description__0 = 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. diff --git a/src/data/localization/en/p5.PolySynth.ftl b/src/data/localization/en/p5.PolySynth.ftl deleted file mode 100644 index 477f8567df..0000000000 --- a/src/data/localization/en/p5.PolySynth.ftl +++ /dev/null @@ -1,33 +0,0 @@ -description__0 = 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. -params__synthVoice = Number: (Optional) A monophonic synth voice inheriting the AudioVoice class. Defaults to p5.MonoSynth -params__maxVoices = Number: (Optional) Number of voices, defaults to 8; -notes__description__0 = 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. -polyvalue__description__0 = A PolySynth must have at least 1 voice, defaults to 8 -AudioVoice__description__0 = Monosynth that generates the sound for each note that is triggered. The p5.PolySynth defaults to using the p5.MonoSynth as its voice. -play__description__0 = Play a note by triggering noteAttack and noteRelease with sustain time -play__params__note = Number: (Optional) midi note to play (ranging from 0 to 127 - 60 being a middle C) -play__params__velocity = Number: (Optional) velocity of the note to play (ranging from 0 to 1) -play__params__secondsFromNow = Number: (Optional) time from now (in seconds) at which to play -play__params__sustainTime = Number: (Optional) time to sustain before releasing the envelope -noteADSR__description__0 = 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. -noteADSR__params__note = Number: (Optional) Midi note on which ADSR should be set. -noteADSR__params__attackTime = Number: (Optional) Time (in seconds before envelope reaches Attack Level -noteADSR__params__decayTime = Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level -noteADSR__params__susRatio = Number: (Optional) 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 setRange), then decayLevel would increase proportionally, to become 0.5. -noteADSR__params__releaseTime = Number: (Optional) Time in seconds from now (defaults to 0) -setADSR__description__0 = Set the PolySynths global envelope. This method modifies the envelopes of each monosynth so that all notes are played with this envelope. -setADSR__params__attackTime = Number: (Optional) Time (in seconds before envelope reaches Attack Level -setADSR__params__decayTime = Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level -setADSR__params__susRatio = Number: (Optional) 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 setRange), then decayLevel would increase proportionally, to become 0.5. -setADSR__params__releaseTime = Number: (Optional) Time in seconds from now (defaults to 0) -noteAttack__description__0 = 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. -noteAttack__params__note = Number: (Optional) midi note on which attack should be triggered. -noteAttack__params__velocity = Number: (Optional) velocity of the note to play (ranging from 0 to 1)/ -noteAttack__params__secondsFromNow = Number: (Optional) time from now (in seconds) -noteRelease__description__0 = 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. -noteRelease__params__note = Number: (Optional) midi note on which attack should be triggered. If no value is provided, all notes will be released. -noteRelease__params__secondsFromNow = Number: (Optional) time to trigger the release -connect__description__0 = Connect to a p5.sound / Web Audio object. -connect__params__unit = Object: A p5.sound or Web Audio object -disconnect__description__0 = Disconnect all outputs -dispose__description__0 = Get rid of the MonoSynth and free up its resources / memory. diff --git a/src/data/localization/en/p5.PrintWriter.ftl b/src/data/localization/en/p5.PrintWriter.ftl deleted file mode 100644 index b0e9b6a172..0000000000 --- a/src/data/localization/en/p5.PrintWriter.ftl +++ /dev/null @@ -1,8 +0,0 @@ -params__filename = String -params__extension = String (Optional) -write__description__0 = Writes data to the PrintWriter stream -write__params__data = Array: all data to be written by the PrintWriter -print__description__0 = Writes data to the PrintWriter stream, and adds a new line at the end -print__params__data = Array: all data to be printed by the PrintWriter -clear__description__0 = Clears the data already written to the PrintWriter object -close__description__0 = Closes the PrintWriter diff --git a/src/data/localization/en/p5.Pulse.ftl b/src/data/localization/en/p5.Pulse.ftl deleted file mode 100644 index 52ad1a1668..0000000000 --- a/src/data/localization/en/p5.Pulse.ftl +++ /dev/null @@ -1,5 +0,0 @@ -description__0 = 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 p5.Oscillator for a full list of methods. -params__freq = Number: (Optional) Frequency in oscillations per second (Hz) -params__w = Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0) -width__description__0 = Set the width of a Pulse object (an oscillator that implements Pulse Width Modulation). -width__params__width = Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0) diff --git a/src/data/localization/en/p5.Renderer.ftl b/src/data/localization/en/p5.Renderer.ftl deleted file mode 100644 index f9fbf7272f..0000000000 --- a/src/data/localization/en/p5.Renderer.ftl +++ /dev/null @@ -1,4 +0,0 @@ -description__0 = Main graphics and rendering context, as well as the base API implementation for p5.js "core". To be used as the superclass for Renderer2D and Renderer3D classes, respectively. -params__elt = String: DOM node that is wrapped -params__pInst = P5: (Optional) pointer to p5 instance -params__isMainCanvas = Boolean: (Optional) whether we're using it as main canvas diff --git a/src/data/localization/en/p5.Reverb.ftl b/src/data/localization/en/p5.Reverb.ftl deleted file mode 100644 index ca566dba77..0000000000 --- a/src/data/localization/en/p5.Reverb.ftl +++ /dev/null @@ -1,18 +0,0 @@ -description__0 = 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. -description__1 = This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available. -process__description__0 = Connect a source to the reverb, and assign reverb parameters. -process__params__src = Object: p5.sound / Web Audio object with a sound output. -process__params__seconds = Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3. -process__params__decayRate = Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2. -process__params__reverse = Boolean: (Optional) Play the reverb backwards or forwards. -set__description__0 = Set the reverb settings. Similar to .process(), but without assigning a new input. -set__params__seconds = Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3. -set__params__decayRate = Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2. -set__params__reverse = Boolean: (Optional) Play the reverb backwards or forwards. -amp__description__0 = Set the output level of the reverb effect. -amp__params__volume = Number: amplitude between 0 and 1.0 -amp__params__rampTime = Number: (Optional) create a fade that lasts rampTime -amp__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now -connect__description__0 = Send output to a p5.sound or web audio object -connect__params__unit = Object -disconnect__description__0 = Disconnect all output. diff --git a/src/data/localization/en/p5.SawOsc.ftl b/src/data/localization/en/p5.SawOsc.ftl deleted file mode 100644 index e7f6c6ccdb..0000000000 --- a/src/data/localization/en/p5.SawOsc.ftl +++ /dev/null @@ -1,2 +0,0 @@ -description__0 = Constructor: new p5.SawOsc(). This creates a SawTooth Wave Oscillator and is equivalent to new p5.Oscillator('sawtooth') or creating a p5.Oscillator and then calling its method setType('sawtooth'). See p5.Oscillator for methods. -params__freq = Number: (Optional) Set the frequency diff --git a/src/data/localization/en/p5.Score.ftl b/src/data/localization/en/p5.Score.ftl deleted file mode 100644 index 8d57b4ee6e..0000000000 --- a/src/data/localization/en/p5.Score.ftl +++ /dev/null @@ -1,10 +0,0 @@ -description__0 = 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 new p5.Score(a, a, b, a, c) -params__parts = p5.Part: (Optional) One or multiple parts, to be played in sequence. -start__description__0 = Start playback of the score. -stop__description__0 = Stop playback of the score. -pause__description__0 = Pause playback of the score. -loop__description__0 = Loop playback of the score. -noLoop__description__0 = Stop looping playback of the score. If it is currently playing, this will go into effect after the current round of playback completes. -setBPM__description__0 = Set the tempo for all parts in the score -setBPM__params__BPM = Number: Beats Per Minute -setBPM__params__rampTime = Number: Seconds from now diff --git a/src/data/localization/en/p5.Shader.ftl b/src/data/localization/en/p5.Shader.ftl deleted file mode 100644 index 4f48485c0c..0000000000 --- a/src/data/localization/en/p5.Shader.ftl +++ /dev/null @@ -1,8 +0,0 @@ -description__0 = Shader class for WEBGL Mode -params__renderer = p5.RendererGL: an instance of p5.RendererGL that will provide the GL context for this new p5.Shader -params__vertSrc = String: source code for the vertex shader (as a string) -params__fragSrc = String: source code for the fragment shader (as a string) -setUniform__description__0 = Used to set the uniforms of a p5.Shader object. -setUniform__description__1 = Uniforms are used as a way to provide shader programs (which run on the GPU) with values from a sketch (which runs on the CPU). -setUniform__params__uniformName = String: the name of the uniform. Must correspond to the name used in the vertex and fragment shaders -setUniform__params__data = Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture: the data to associate with the uniform. The type can be a boolean (true/false), a number, an array of numbers, or an image (p5.Image, p5.Graphics, p5.MediaElement, p5.Texture) diff --git a/src/data/localization/en/p5.SinOsc.ftl b/src/data/localization/en/p5.SinOsc.ftl deleted file mode 100644 index 541f002d33..0000000000 --- a/src/data/localization/en/p5.SinOsc.ftl +++ /dev/null @@ -1,2 +0,0 @@ -description__0 = Constructor: new p5.SinOsc(). This creates a Sine Wave Oscillator and is equivalent to new p5.Oscillator('sine') or creating a p5.Oscillator and then calling its method setType('sine'). See p5.Oscillator for methods. -params__freq = Number: (Optional) Set the frequency diff --git a/src/data/localization/en/p5.SoundFile.ftl b/src/data/localization/en/p5.SoundFile.ftl deleted file mode 100644 index b564c506ef..0000000000 --- a/src/data/localization/en/p5.SoundFile.ftl +++ /dev/null @@ -1,91 +0,0 @@ -description__0 = SoundFile object with a path to a file. -description__1 = The p5.SoundFile may not be available immediately because it loads the file information asynchronously. -description__2 = To do something with the sound as soon as it loads pass the name of a function as the second parameter. -description__3 = 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. -params__path = String|Array: 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. -params__successCallback = Function: (Optional) Name of a function to call once file loads -params__errorCallback = Function: (Optional) 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. -params__whileLoadingCallback = Function: (Optional) 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. -isLoaded__description__0 = Returns true if the sound file finished loading successfully. -isLoaded__returns = Boolean: -play__description__0 = Play the p5.SoundFile -play__params__startTime = Number: (Optional) (optional) schedule playback to start (in seconds from now). -play__params__rate = Number: (Optional) (optional) playback rate -play__params__amp = Number: (Optional) (optional) amplitude (volume) of playback -play__params__cueStart = Number: (Optional) (optional) cue start time in seconds -play__params__duration = Number: (Optional) (optional) duration of playback in seconds -playMode__description__0 = p5.SoundFile has two play modes: restart and sustain. 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. -playMode__params__str = String: 'restart' or 'sustain' or 'untilDone' -pause__description__0 = Pauses a file that is currently playing. If the file is not playing, then nothing will happen. -pause__description__1 = 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(). -pause__params__startTime = Number: (Optional) (optional) schedule event to occur seconds from now -loop__description__0 = Loop the p5.SoundFile. Accepts optional parameters to set the playback rate, playback volume, loopStart, loopEnd. -loop__params__startTime = Number: (Optional) (optional) schedule event to occur seconds from now -loop__params__rate = Number: (Optional) (optional) playback rate -loop__params__amp = Number: (Optional) (optional) playback volume -loop__params__cueLoopStart = Number: (Optional) (optional) startTime in seconds -loop__params__duration = Number: (Optional) (optional) loop duration in seconds -setLoop__description__0 = 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. -setLoop__params__Boolean = Boolean: set looping to true or false -isLooping__description__0 = Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not. -isLooping__returns = Boolean: -isPlaying__description__0 = Returns true if a p5.SoundFile is playing, false if not (i.e. paused or stopped). -isPlaying__returns = Boolean: -isPaused__description__0 = Returns true if a p5.SoundFile is paused, false if not (i.e. playing or stopped). -isPaused__returns = Boolean: -stop__description__0 = Stop soundfile playback. -stop__params__startTime = Number: (Optional) (optional) schedule event to occur in seconds from now -pan__description__0 = 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). -pan__params__panValue = Number: (Optional) Set the stereo panner -pan__params__timeFromNow = Number: (Optional) schedule this event to happen seconds from now -getPan__description__0 = Returns the current stereo pan position (-1.0 to 1.0) -getPan__returns = Number: 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. -rate__description__0 = Set the playback rate of a sound file. Will change the speed and the pitch. Values less than zero will reverse the audio buffer. -rate__params__playbackRate = Number: (Optional) Set the playback rate. 1.0 is normal, .5 is half-speed, 2.0 is twice as fast. Values less than zero play backwards. -setVolume__description__0 = 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 rampTime parameter. For more complex fades, see the Envelope class. -setVolume__description__1 = Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal. -setVolume__params__volume = Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator -setVolume__params__rampTime = Number: (Optional) Fade for t seconds -setVolume__params__timeFromNow = Number: (Optional) Schedule this event to happen at t seconds in the future -duration__description__0 = Returns the duration of a sound file in seconds. -duration__returns = Number: The duration of the soundFile in seconds. -currentTime__description__0 = Return the current position of the p5.SoundFile playhead, in seconds. Time is relative to the normal buffer direction, so if reverseBuffer has been called, currentTime will count backwards. -currentTime__returns = Number: currentTime of the soundFile in seconds. -jump__description__0 = 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 play or loop methods. -jump__params__cueTime = Number: cueTime of the soundFile in seconds. -jump__params__duration = Number: duration in seconds. -channels__description__0 = Return the number of channels in a sound file. For example, Mono = 1, Stereo = 2. -channels__returns = Number: [channels] -sampleRate__description__0 = Return the sample rate of the sound file. -sampleRate__returns = Number: [sampleRate] -frames__description__0 = Return the number of samples in a sound file. Equal to sampleRate * duration. -frames__returns = Number: [sampleCount] -getPeaks__description__0 = 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. -getPeaks__description__1 = Inspired by Wavesurfer.js. -getPeaks__returns = Float32Array: Array of peaks. -getPeaks__params__length = Number: (Optional) length is the size of the returned array. Larger length results in more precision. Defaults to 5*width of the browser window. -reverseBuffer__description__0 = Reverses the p5.SoundFile's buffer source. Playback must be handled separately (see example). -onended__description__0 = 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. -onended__params__callback = Function: function to call when the soundfile has ended. -connect__description__0 = 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. -connect__params__object = Object: (Optional) Audio object that accepts an input -disconnect__description__0 = Disconnects the output of this p5sound object. -setPath__description__0 = Reset the source for this SoundFile to a new path (URL). -setPath__params__path = String: path to audio file -setPath__params__callback = Function: Callback -setBuffer__description__0 = Replace the current Audio Buffer with a new Buffer. -setBuffer__params__buf = Array: Array of Float32 Array(s). 2 Float32 Arrays will create a stereo source. 1 will create a mono source. -addCue__description__0 = Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point. -addCue__description__1 = Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback. -addCue__description__2 = Time will be passed as the first parameter to the callback function, and param will be the second parameter. -addCue__returns = Number: id ID of this cue, useful for removeCue(id) -addCue__params__time = Number: 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. -addCue__params__callback = Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters. -addCue__params__value = Object: (Optional) An object to be passed as the second parameter to the callback function. -removeCue__description__0 = Remove a callback based on its ID. The ID is returned by the addCue method. -removeCue__params__id = Number: ID of the cue, as returned by addCue -clearCues__description__0 = Remove all of the callbacks that had originally been scheduled via the addCue method. -save__description__0 = 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 getBlob -save__params__fileName = String: (Optional) name of the resulting .wav file. -getBlob__description__0 = This method is useful for sending a SoundFile to a server. It returns the .wav-encoded audio data as a "Blob". A Blob is a file-like data object that can be uploaded to a server with an http request. We'll use the httpDo options object to send a POST request with some specific options: we encode the request as multipart/form-data, and attach the blob as one of the form values using FormData. -getBlob__returns = Blob: A file-like data object diff --git a/src/data/localization/en/p5.SoundLoop.ftl b/src/data/localization/en/p5.SoundLoop.ftl deleted file mode 100644 index cfad2ea3de..0000000000 --- a/src/data/localization/en/p5.SoundLoop.ftl +++ /dev/null @@ -1,18 +0,0 @@ -description__0 = SoundLoop -params__callback = Function: this function will be called on each iteration of theloop -params__interval = Number|String: (Optional) amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second. -bpm__description__0 = 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) -timeSignature__description__0 = number of quarter notes in a measure (defaults to 4) -interval__description__0 = length of the loops interval -iterations__description__0 = how many times the callback has been called so far -musicalTimeMode__description__0 = musicalTimeMode uses Tone.Time convention true if string, false if number -maxIterations__description__0 = Set a limit to the number of loops to play. defaults to Infinity -start__description__0 = Start the loop -start__params__timeFromNow = Number: (Optional) schedule a starting time -stop__description__0 = Stop the loop -stop__params__timeFromNow = Number: (Optional) schedule a stopping time -pause__description__0 = Pause the loop -pause__params__timeFromNow = Number: (Optional) schedule a pausing time -syncedStart__description__0 = 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) -syncedStart__params__otherLoop = Object: a p5.SoundLoop to sync with -syncedStart__params__timeFromNow = Number: (Optional) Start the loops in sync after timeFromNow seconds diff --git a/src/data/localization/en/p5.SoundRecorder.ftl b/src/data/localization/en/p5.SoundRecorder.ftl deleted file mode 100644 index 8e8f2ca9aa..0000000000 --- a/src/data/localization/en/p5.SoundRecorder.ftl +++ /dev/null @@ -1,9 +0,0 @@ -description__0 = 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(). -description__1 = 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. -setInput__description__0 = Connect a specific device to the p5.SoundRecorder. If no parameter is given, p5.SoundRecorer will record all audible p5.sound from your sketch. -setInput__params__unit = Object: (Optional) p5.sound object or a web audio unit that outputs sound -record__description__0 = 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. -record__params__soundFile = p5.SoundFile: p5.SoundFile -record__params__duration = Number: (Optional) Time (in seconds) -record__params__callback = Function: (Optional) The name of a function that will be called once the recording completes -stop__description__0 = 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. diff --git a/src/data/localization/en/p5.SqrOsc.ftl b/src/data/localization/en/p5.SqrOsc.ftl deleted file mode 100644 index be2dd3c835..0000000000 --- a/src/data/localization/en/p5.SqrOsc.ftl +++ /dev/null @@ -1,2 +0,0 @@ -description__0 = Constructor: new p5.SqrOsc(). This creates a Square Wave Oscillator and is equivalent to new p5.Oscillator('square') or creating a p5.Oscillator and then calling its method setType('square'). See p5.Oscillator for methods. -params__freq = Number: (Optional) Set the frequency diff --git a/src/data/localization/en/p5.StringDict.ftl b/src/data/localization/en/p5.StringDict.ftl deleted file mode 100644 index b76b577e7c..0000000000 --- a/src/data/localization/en/p5.StringDict.ftl +++ /dev/null @@ -1 +0,0 @@ -description__0 = A simple Dictionary class for Strings. diff --git a/src/data/localization/en/p5.Table.ftl b/src/data/localization/en/p5.Table.ftl deleted file mode 100644 index 0768cc0699..0000000000 --- a/src/data/localization/en/p5.Table.ftl +++ /dev/null @@ -1,78 +0,0 @@ -description__0 = Table objects store data with multiple rows and columns, much like in a traditional spreadsheet. Tables can be generated from scratch, dynamically, or using data from an existing file. -params__rows = p5.TableRow[]: (Optional) An array of p5.TableRow objects -columns__description__0 = An array containing the names of the columns in the table, if the "header" the table is loaded with the "header" parameter. -rows__description__0 = An array containing the p5.TableRow objects that make up the rows of the table. The same result as calling getRows() -addRow__description__0 = Use addRow() to add a new row of data to a p5.Table object. By default, an empty row is created. Typically, you would store a reference to the new row in a TableRow object (see newRow in the example above), and then set individual values using set(). -addRow__description__1 = If a p5.TableRow object is included as a parameter, then that row is duplicated and added to the table. -addRow__returns = p5.TableRow: the row that was added -addRow__params__row = p5.TableRow: (Optional) row to be added to the table -removeRow__description__0 = Removes a row from the table object. -removeRow__params__id = Integer: ID number of the row to remove -getRow__description__0 = Returns a reference to the specified p5.TableRow. The reference can then be used to get and set values of the selected row. -getRow__returns = p5.TableRow: p5.TableRow object -getRow__params__rowID = Integer: ID number of the row to get -getRows__description__0 = Gets all rows from the table. Returns an array of p5.TableRows. -getRows__returns = p5.TableRow[]: Array of p5.TableRows -findRow__description__0 = 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. -findRow__returns = p5.TableRow: -findRow__params__value = String: The value to match -findRow__params__column = Integer|String: ID number or title of the column to search -findRows__description__0 = 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. -findRows__returns = p5.TableRow[]: An Array of TableRow objects -findRows__params__value = String: The value to match -findRows__params__column = Integer|String: ID number or title of the column to search -matchRow__description__0 = 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. -matchRow__returns = p5.TableRow: TableRow object -matchRow__params__regexp = String|RegExp: The regular expression to match -matchRow__params__column = String|Integer: The column ID (number) or title (string) -matchRows__description__0 = 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. -matchRows__returns = p5.TableRow[]: An Array of TableRow objects -matchRows__params__regexp = String: The regular expression to match -matchRows__params__column = String|Integer: (Optional) The column ID (number) or title (string) -getColumn__description__0 = Retrieves all values in the specified column, and returns them as an array. The column may be specified by either its ID or title. -getColumn__returns = Array: Array of column values -getColumn__params__column = String|Number: String or Number of the column to return -clearRows__description__0 = Removes all rows from a Table. While all rows are removed, columns and column titles are maintained. -addColumn__description__0 = Use addColumn() to add a new column to a Table 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.) -addColumn__params__title = String: (Optional) title of the given column -getColumnCount__description__0 = Returns the total number of columns in a Table. -getColumnCount__returns = Integer: Number of columns in this table -getRowCount__description__0 = Returns the total number of rows in a Table. -getRowCount__returns = Integer: Number of rows in this table -removeTokens__description__0 = Removes any of the specified characters (or "tokens"). -removeTokens__description__1 = 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. -removeTokens__params__chars = String: String listing characters to be removed -removeTokens__params__column = String|Integer: (Optional) Column ID (number) or name (string) -trim__description__0 = 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. -trim__params__column = String|Integer: (Optional) Column ID (number) or name (string) -removeColumn__description__0 = Use removeColumn() to remove an existing column from a Table object. The column to be removed may be identified by either its title (a String) or its index value (an int). removeColumn(0) would remove the first column, removeColumn(1) would remove the second column, and so on. -removeColumn__params__column = String|Integer: columnName (string) or ID (number) -set__description__0 = 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. -set__params__row = Integer: row ID -set__params__column = String|Integer: column ID (Number) or title (String) -set__params__value = String|Number: value to assign -setNum__description__0 = 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. -setNum__params__row = Integer: row ID -setNum__params__column = String|Integer: column ID (Number) or title (String) -setNum__params__value = Number: value to assign -setString__description__0 = 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. -setString__params__row = Integer: row ID -setString__params__column = String|Integer: column ID (Number) or title (String) -setString__params__value = String: value to assign -get__description__0 = 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. -get__returns = String|Number: -get__params__row = Integer: row ID -get__params__column = String|Integer: columnName (string) or ID (number) -getNum__description__0 = 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. -getNum__returns = Number: -getNum__params__row = Integer: row ID -getNum__params__column = String|Integer: columnName (string) or ID (number) -getString__description__0 = 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. -getString__returns = String: -getString__params__row = Integer: row ID -getString__params__column = String|Integer: columnName (string) or ID (number) -getObject__description__0 = 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. -getObject__returns = Object: -getObject__params__headerColumn = String: (Optional) Name of the column which should be used to title each row object (optional) -getArray__description__0 = Retrieves all table data and returns it as a multidimensional array. -getArray__returns = Array: diff --git a/src/data/localization/en/p5.TableRow.ftl b/src/data/localization/en/p5.TableRow.ftl deleted file mode 100644 index c2490a7af6..0000000000 --- a/src/data/localization/en/p5.TableRow.ftl +++ /dev/null @@ -1,22 +0,0 @@ -description__0 = A TableRow object represents a single row of data values, stored in columns, from a table. -description__1 = A Table Row contains both an ordered array, and an unordered JSON object. -params__str = String: (Optional) optional: populate the row with a string of values, separated by the separator -params__separator = String: (Optional) comma separated values (csv) by default -set__description__0 = Stores a value in the TableRow's specified column. The column may be specified by either its ID or title. -set__params__column = String|Integer: Column ID (Number) or Title (String) -set__params__value = String|Number: The value to be stored -setNum__description__0 = Stores a Float value in the TableRow's specified column. The column may be specified by either its ID or title. -setNum__params__column = String|Integer: Column ID (Number) or Title (String) -setNum__params__value = Number|String: The value to be stored as a Float -setString__description__0 = Stores a String value in the TableRow's specified column. The column may be specified by either its ID or title. -setString__params__column = String|Integer: Column ID (Number) or Title (String) -setString__params__value = String|Number|Boolean|Object: The value to be stored as a String -get__description__0 = Retrieves a value from the TableRow's specified column. The column may be specified by either its ID or title. -get__returns = String|Number: -get__params__column = String|Integer: columnName (string) or ID (number) -getNum__description__0 = Retrieves a Float value from the TableRow's specified column. The column may be specified by either its ID or title. -getNum__returns = Number: Float Floating point number -getNum__params__column = String|Integer: columnName (string) or ID (number) -getString__description__0 = Retrieves an String value from the TableRow's specified column. The column may be specified by either its ID or title. -getString__returns = String: String -getString__params__column = String|Integer: columnName (string) or ID (number) diff --git a/src/data/localization/en/p5.TriOsc.ftl b/src/data/localization/en/p5.TriOsc.ftl deleted file mode 100644 index a62708257c..0000000000 --- a/src/data/localization/en/p5.TriOsc.ftl +++ /dev/null @@ -1,2 +0,0 @@ -description__0 = Constructor: new p5.TriOsc(). This creates a Triangle Wave Oscillator and is equivalent to new p5.Oscillator('triangle') or creating a p5.Oscillator and then calling its method setType('triangle'). See p5.Oscillator for methods. -params__freq = Number: (Optional) Set the frequency diff --git a/src/data/localization/en/p5.TypedDict.ftl b/src/data/localization/en/p5.TypedDict.ftl deleted file mode 100644 index 374255da09..0000000000 --- a/src/data/localization/en/p5.TypedDict.ftl +++ /dev/null @@ -1,22 +0,0 @@ -description__0 = Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class. -size__description__0 = Returns the number of key-value pairs currently stored in the Dictionary. -size__returns = Integer: the number of key-value pairs in the Dictionary -hasKey__description__0 = Returns true if the given key exists in the Dictionary, otherwise returns false. -hasKey__returns = Boolean: whether that key exists in Dictionary -hasKey__params__key = Number|String: that you want to look up -get__description__0 = Returns the value stored at the given key. -get__returns = Number|String: the value stored at that key -get__params__the = Number|String: key you want to access -set__description__0 = Updates the value associated with the given key in case it already exists in the Dictionary. Otherwise a new key-value pair is added. -set__params__key = Number|String -set__params__value = Number|String -create__description__0 = Creates a new key-value pair in the Dictionary. -create__params__key = Number|String -create__params__value = Number|String -create__params__obj = Object: key/value pair -clear__description__0 = Removes all previously stored key-value pairs from the Dictionary. -remove__description__0 = Removes the key-value pair stored at the given key from the Dictionary. -remove__params__key = Number|String: for the pair to remove -print__description__0 = Logs the set of items currently stored in the Dictionary to the console. -saveTable__description__0 = Converts the Dictionary into a CSV file for local download. -saveJSON__description__0 = Converts the Dictionary into a JSON file for local download. diff --git a/src/data/localization/en/p5.Vector.ftl b/src/data/localization/en/p5.Vector.ftl deleted file mode 100644 index b6752a3e42..0000000000 --- a/src/data/localization/en/p5.Vector.ftl +++ /dev/null @@ -1,135 +0,0 @@ -description__0 = A class to describe a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. The datatype, however, stores the components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude and direction can be accessed via the methods mag() and heading(). -description__1 = In many of the p5.js examples, you will see p5.Vector used to describe a position, velocity, or acceleration. For example, if you consider a rectangle moving across the screen, at any given instant it has a position (a vector that points from the origin to its location), a velocity (the rate at which the object's position changes per time unit, expressed as a vector), and acceleration (the rate at which the object's velocity changes per time unit, expressed as a vector). -description__2 = Since vectors represent groupings of values, we cannot simply use traditional addition/multiplication/etc. Instead, we'll need to do some "vector" math, which is made easy by the methods inside the p5.Vector class. -params__x = Number: (Optional) x component of the vector -params__y = Number: (Optional) y component of the vector -params__z = Number: (Optional) z component of the vector -x__description__0 = The x component of the vector -y__description__0 = The y component of the vector -z__description__0 = The z component of the vector -toString__description__0 = Returns a string representation of a vector v by calling String(v) or v.toString(). This method is useful for logging vectors in the console. -toString__returns = String: -set__description__0 = Sets the x, y, and z component of the vector using two or three separate variables, the data from a p5.Vector, or the values from a float array. -set__params__x = Number: (Optional) the x component of the vector -set__params__y = Number: (Optional) the y component of the vector -set__params__z = Number: (Optional) the z component of the vector -set__params__value = p5.Vector|Number[]: the vector to set -copy__description__0 = Gets a copy of the vector, returns a p5.Vector object. -copy__returns = p5.Vector: the copy of the p5.Vector object -add__description__0 = Adds x, y, and z components to a vector, adds one vector to another, or adds two independent vectors together. The version of the method that adds two vectors together is a static method and returns a p5.Vector, the others acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context. -add__params__x = Number: the x component of the vector to be added -add__params__y = Number: (Optional) the y component of the vector to be added -add__params__z = Number: (Optional) the z component of the vector to be added -add__params__value = p5.Vector|Number[]: the vector to add -add__params__v1 = p5.Vector: a p5.Vector to add -add__params__v2 = p5.Vector: a p5.Vector to add -add__params__target = p5.Vector: (Optional) the vector to receive the result -rem__description__0 = Gives remainder of a vector when it is divided by another vector. See examples for more context. -rem__params__x = Number: the x component of divisor vector -rem__params__y = Number: the y component of divisor vector -rem__params__z = Number: the z component of divisor vector -rem__params__value = p5.Vector | Number[]: divisor vector -rem__params__v1 = p5.Vector: dividend p5.Vector -rem__params__v2 = p5.Vector: divisor p5.Vector -sub__description__0 = Subtracts x, y, and z components from a vector, subtracts one vector from another, or subtracts two independent vectors. The version of the method that subtracts two vectors is a static method and returns a p5.Vector, the other acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context. -sub__params__x = Number: the x component of the vector to subtract -sub__params__y = Number: (Optional) the y component of the vector to subtract -sub__params__z = Number: (Optional) the z component of the vector to subtract -sub__params__value = p5.Vector|Number[]: the vector to subtract -sub__params__v1 = p5.Vector: a p5.Vector to subtract from -sub__params__v2 = p5.Vector: a p5.Vector to subtract -sub__params__target = p5.Vector: (Optional) the vector to receive the result -mult__description__0 = Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies the x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y, and z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector, the x, y, z components of both vectors are multiplied by each other (for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context. -mult__params__n = Number: The number to multiply with the vector -mult__params__x = Number: The number to multiply with the x component of the vector -mult__params__y = Number: The number to multiply with the y component of the vector -mult__params__z = Number: (Optional) The number to multiply with the z component of the vector -mult__params__arr = Number[]: The array to multiply with the components of the vector -mult__params__v = p5.Vector: The vector to multiply with the components of the original vector -mult__params__target = p5.Vector: (Optional) the vector to receive the result -mult__params__v0 = p5.Vector -mult__params__v1 = p5.Vector -div__description__0 = Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and z components of two vectors against each other. When dividing a vector by a scalar, the x, y, and z components of the vector are all divided by the scalar. When dividing a vector by a vector, the x, y, z components of the source vector are treated as the dividend, and the x, y, z components of the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context. -div__params__n = Number: The number to divide the vector by -div__params__x = Number: The number to divide with the x component of the vector -div__params__y = Number: The number to divide with the y component of the vector -div__params__z = Number: (Optional) The number to divide with the z component of the vector -div__params__arr = Number[]: The array to divide the components of the vector by -div__params__v = p5.Vector: The vector to divide the components of the original vector by -div__params__target = p5.Vector: (Optional) the vector to receive the result -div__params__v0 = p5.Vector -div__params__v1 = p5.Vector -mag__description__0 = Calculates the magnitude (length) of the vector and returns the result as a float (this is simply the equation sqrt(x*x + y*y + z*z).) -mag__returns = Number: magnitude of the vector -mag__params__vecT = p5.Vector: the vector to return the magnitude of -magSq__description__0 = Calculates the squared magnitude of the vector and returns the result as a float (this is simply the equation (x*x + y*y + z*z).) Faster if the real length is not required in the case of comparing vectors, etc. -magSq__returns = Number: squared magnitude of the vector -dot__description__0 = Calculates the dot product of two vectors. The version of the method that computes the dot product of two independent vectors is a static method. See the examples for more context. -dot__returns = Number: the dot product -dot__params__x = Number: x component of the vector -dot__params__y = Number: (Optional) y component of the vector -dot__params__z = Number: (Optional) z component of the vector -dot__params__value = p5.Vector: value component of the vector or a p5.Vector -dot__params__v1 = p5.Vector: the first p5.Vector -dot__params__v2 = p5.Vector: the second p5.Vector -cross__description__0 = Calculates and returns a vector composed of the cross product between two vectors. Both the static and non static methods return a new p5.Vector. See the examples for more context. -cross__returns = p5.Vector: p5.Vector composed of cross product -cross__params__v = p5.Vector: p5.Vector to be crossed -cross__params__v1 = p5.Vector: the first p5.Vector -cross__params__v2 = p5.Vector: the second p5.Vector -dist__description__0 = Calculates the Euclidean distance between two points (considering a point as a vector object). If you are looking to calculate distance with 2 points see dist() -dist__returns = Number: the distance -dist__params__v = p5.Vector: the x, y, and z coordinates of a p5.Vector -dist__params__v1 = p5.Vector: the first p5.Vector -dist__params__v2 = p5.Vector: the second p5.Vector -normalize__description__0 = Normalize the vector to length 1 (make it a unit vector). -normalize__returns = p5.Vector: normalized p5.Vector -normalize__params__v = p5.Vector: the vector to normalize -normalize__params__target = p5.Vector: (Optional) the vector to receive the result -limit__description__0 = Limit the magnitude of this vector to the value used for the max parameter. -limit__params__max = Number: the maximum magnitude for the vector -setMag__description__0 = Set the magnitude of this vector to the value used for the len parameter. -setMag__params__len = Number: the new length for this vector -heading__description__0 = Calculate the angle of rotation for this vector(only 2D vectors). p5.Vectors created using createVector() will take the current angleMode into consideration, and give the angle in radians or degree accordingly. -heading__returns = Number: the angle of rotation -setHeading__description__0 = Rotate the vector to a specific angle (only 2D vectors), magnitude remains the same -setHeading__params__angle = Number: the angle of rotation -rotate__description__0 = Rotate the vector by an angle (only 2D vectors), magnitude remains the same -rotate__params__angle = Number: the angle of rotation -rotate__params__v = p5.Vector -rotate__params__target = p5.Vector: (Optional) the vector to receive the result -angleBetween__description__0 = Calculates and returns the angle between two vectors. This function will take the current angleMode into consideration, and give the angle in radians or degree accordingly. -angleBetween__returns = Number: the angle between (in radians) -angleBetween__params__value = p5.Vector: the x, y, and z components of a p5.Vector -lerp__description__0 = Linear interpolate the vector to another vector -lerp__params__x = Number: the x component -lerp__params__y = Number: the y component -lerp__params__z = Number: the z component -lerp__params__amt = Number: the amount of interpolation; some value between 0.0 (old vector) and 1.0 (new vector). 0.9 is very near the new vector. 0.5 is halfway in between. -lerp__params__v = p5.Vector: the p5.Vector to lerp to -lerp__params__v1 = p5.Vector -lerp__params__v2 = p5.Vector -lerp__params__target = p5.Vector: (Optional) the vector to receive the result -reflect__description__0 = Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D This method acts on the vector directly -reflect__params__surfaceNormal = p5.Vector: the p5.Vector to reflect about, will be normalized by this method -array__description__0 = Return a representation of this vector as a float array. This is only for temporary use. If used in any other fashion, the contents should be copied by using the p5.Vector.copy() method to copy into your own array. -array__returns = Number[]: an Array with the 3 values -equals__description__0 = Equality check against a p5.Vector -equals__returns = Boolean: whether the vectors are equals -equals__params__x = Number: (Optional) the x component of the vector -equals__params__y = Number: (Optional) the y component of the vector -equals__params__z = Number: (Optional) the z component of the vector -equals__params__value = p5.Vector|Array: the vector to compare -fromAngle__description__0 = Make a new 2D vector from an angle -fromAngle__returns = p5.Vector: the new p5.Vector object -fromAngle__params__angle = Number: the desired angle, in radians (unaffected by angleMode) -fromAngle__params__length = Number: (Optional) the length of the new vector (defaults to 1) -fromAngles__description__0 = Make a new 3D vector from a pair of ISO spherical angles -fromAngles__returns = p5.Vector: the new p5.Vector object -fromAngles__params__theta = Number: the polar angle, in radians (zero is up) -fromAngles__params__phi = Number: the azimuthal angle, in radians (zero is out of the screen) -fromAngles__params__length = Number: (Optional) the length of the new vector (defaults to 1) -random2D__description__0 = Make a new 2D unit vector from a random angle -random2D__returns = p5.Vector: the new p5.Vector object -random3D__description__0 = Make a new random 3D unit vector. -random3D__returns = p5.Vector: the new p5.Vector object diff --git a/src/data/localization/en/p5.XML.ftl b/src/data/localization/en/p5.XML.ftl deleted file mode 100644 index 8fff4e3de9..0000000000 --- a/src/data/localization/en/p5.XML.ftl +++ /dev/null @@ -1,46 +0,0 @@ -description__0 = XML is a representation of an XML object, able to parse XML code. Use loadXML() to load external XML files and create XML objects. -getParent__description__0 = Gets a copy of the element's parent. Returns the parent as another p5.XML object. -getParent__returns = p5.XML: element parent -getName__description__0 = Gets the element's full name, which is returned as a String. -getName__returns = String: the name of the node -setName__description__0 = Sets the element's name, which is specified as a String. -setName__params__the = String: new name of the node -hasChildren__description__0 = Checks whether or not the element has any children, and returns the result as a boolean. -hasChildren__returns = Boolean: -listChildren__description__0 = Get the names of all of the element's children, and returns the names as an array of Strings. This is the same as looping through and calling getName() on each child element individually. -listChildren__returns = String[]: names of the children of the element -getChildren__description__0 = Returns all of the element's children as an array of p5.XML objects. When the name parameter is specified, then it will return all children that match that name. -getChildren__returns = p5.XML[]: children of the element -getChildren__params__name = String: (Optional) element name -getChild__description__0 = Returns the first of the element's children that matches the name parameter or the child of the given index.It returns undefined if no matching child is found. -getChild__returns = p5.XML: -getChild__params__name = String|Integer: element name or index -addChild__description__0 = Appends a new child to the element. The child can be specified with either a String, which will be used as the new tag's name, or as a reference to an existing p5.XML object. A reference to the newly created child is returned as an p5.XML object. -addChild__params__node = p5.XML: a p5.XML Object which will be the child to be added -removeChild__description__0 = Removes the element specified by name or index. -removeChild__params__name = String|Integer: element name or index -getAttributeCount__description__0 = Counts the specified element's number of attributes, returned as an Number. -getAttributeCount__returns = Integer: -listAttributes__description__0 = Gets all of the specified element's attributes, and returns them as an array of Strings. -listAttributes__returns = String[]: an array of strings containing the names of attributes -hasAttribute__description__0 = Checks whether or not an element has the specified attribute. -hasAttribute__returns = Boolean: true if attribute found else false -hasAttribute__params__the = String: attribute to be checked -getNum__description__0 = Returns an attribute value of the element as an Number. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, the value 0 is returned. -getNum__returns = Number: -getNum__params__name = String: the non-null full name of the attribute -getNum__params__defaultValue = Number: (Optional) the default value of the attribute -getString__description__0 = Returns an attribute value of the element as an String. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, null is returned. -getString__returns = String: -getString__params__name = String: the non-null full name of the attribute -getString__params__defaultValue = Number: (Optional) the default value of the attribute -setAttribute__description__0 = Sets the content of an element's attribute. The first parameter specifies the attribute name, while the second specifies the new content. -setAttribute__params__name = String: the full name of the attribute -setAttribute__params__value = Number|String|Boolean: the value of the attribute -getContent__description__0 = Returns the content of an element. If there is no such content, defaultValue is returned if specified, otherwise null is returned. -getContent__returns = String: -getContent__params__defaultValue = String: (Optional) value returned if no content is found -setContent__description__0 = Sets the element's content. -setContent__params__text = String: the new content -serialize__description__0 = Serializes the element into a string. This function is useful for preparing the content to be sent over a http request or saved to file. -serialize__returns = String: Serialized string of the element diff --git a/src/data/localization/en/p5.ftl b/src/data/localization/en/p5.ftl deleted file mode 100644 index fead75094c..0000000000 --- a/src/data/localization/en/p5.ftl +++ /dev/null @@ -1,1556 +0,0 @@ -description__0 = This is the p5 instance constructor. -description__1 = A p5 instance holds all the properties and methods related to a p5 sketch. It expects an incoming sketch closure and it can also take an optional node parameter for attaching the generated p5 canvas to a node. The sketch closure takes the newly created p5 instance as its sole argument and may optionally set preload(), setup(), and/or draw() properties on it for running a sketch. -description__2 = A p5 sketch can run in "global" or "instance" mode: "global" - all properties and methods are attached to the window "instance" - all properties and methods are bound to this p5 object -returns = P5: a p5 instance -params__sketch = Function: a closure that can set optional preload(), setup(), and/or draw() properties on the given p5 instance -params__node = HTMLElement: (Optional) element to attach canvas to -describe__description__0 = Creates a screen reader accessible description for the canvas. The first parameter should be a string with a description of the canvas. The second parameter is optional. If specified, it determines how the description is displayed. -describe__description__1 = describe(text, LABEL) displays the description to all users as a tombstone or exhibit label/caption in a div adjacent to the canvas. You can style it as you wish in your CSS. -describe__description__2 = describe(text, FALLBACK) makes the description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the description will only be available to screen-reader users. -describe__params__text = String: description of the canvas -describe__params__display = Constant: (Optional) either LABEL or FALLBACK -describeElement__description__0 = This function creates a screen-reader accessible description for elements —shapes or groups of shapes that create meaning together— in the canvas. The first paramater should be the name of the element. The second parameter should be a string with a description of the element. The third parameter is optional. If specified, it determines how the element description is displayed. -describeElement__description__1 = describeElement(name, text, LABEL) displays the element description to all users as a tombstone or exhibit label/caption in a div adjacent to the canvas. You can style it as you wish in your CSS. -describeElement__description__2 = describeElement(name, text, FALLBACK) makes the element description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the element description will only be available to screen-reader users. -describeElement__params__name = String: name of the element -describeElement__params__text = String: description of the element -describeElement__params__display = Constant: (Optional) either LABEL or FALLBACK -textOutput__description__0 = textOutput() creates a screenreader accessible output that describes the shapes present on the canvas. The general description of the canvas includes canvas size, canvas color, and number of elements in the canvas (example: 'Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 4 shapes:'). This description is followed by a list of shapes where the color, position, and area of each shape are described (example: "orange ellipse at top left covering 1% of the canvas"). Each element can be selected to get more details. A table of elements is also provided. In this table, shape, color, location, coordinates and area are described (example: "orange ellipse location=top left area=2"). -textOutput__description__1 = textOutput() and textOutput(FALLBACK) make the output available in a sub DOM inside the canvas element which is accessible to screen readers. textOutput(LABEL) creates an additional div with the output adjacent to the canvas, this is useful for non-screen reader users that might want to display the output outside of the canvas' sub DOM as they code. However, using LABEL will create unnecessary redundancy for screen reader users. We recommend using LABEL only as part of the development process of a sketch and removing it before publishing or sharing with screen reader users. -textOutput__params__display = Constant: (Optional) either FALLBACK or LABEL -gridOutput__description__0 = gridOutput() lays out the content of the canvas in the form of a grid (html table) based on the spatial location of each shape. A brief description of the canvas is available before the table output. This description includes: color of the background, size of the canvas, number of objects, and object types (example: "lavender blue canvas is 200 by 200 and contains 4 objects - 3 ellipses 1 rectangle"). The grid describes the content spatially, each element is placed on a cell of the table depending on its position. Within each cell an element the color and type of shape of that element are available (example: "orange ellipse"). These descriptions can be selected individually to get more details. A list of elements where shape, color, location, and area are described (example: "orange ellipse location=top left area=1%") is also available. -gridOutput__description__1 = gridOutput() and gridOutput(FALLBACK) make the output available in a sub DOM inside the canvas element which is accessible to screen readers. gridOutput(LABEL) creates an additional div with the output adjacent to the canvas, this is useful for non-screen reader users that might want to display the output outside of the canvas' sub DOM as they code. However, using LABEL will create unnecessary redundancy for screen reader users. We recommend using LABEL only as part of the development process of a sketch and removing it before publishing or sharing with screen reader users. -gridOutput__params__display = Constant: (Optional) either FALLBACK or LABEL -alpha__description__0 = Extracts the alpha value from a color or pixel array. -alpha__returns = Number: the alpha value -alpha__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -blue__description__0 = Extracts the blue value from a color or pixel array. -blue__returns = Number: the blue value -blue__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -brightness__description__0 = Extracts the HSB brightness value from a color or pixel array. -brightness__returns = Number: the brightness value -brightness__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -color__description__0 = Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color. -color__description__1 = Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency. -color__description__2 = If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -color__returns = p5.Color: resulting color -color__params__gray = Number: number specifying value between white and black. -color__params__alpha = Number: (Optional) alpha value relative to current color range (default is 0-255) -color__params__v1 = Number: red or hue value relative to the current color range -color__params__v2 = Number: green or saturation value relative to the current color range -color__params__v3 = Number: blue or brightness value relative to the current color range -color__params__value = String: a color string -color__params__values = Number[]: an array containing the red,green,blue & and alpha components of the color -color__params__color = p5.Color -green__description__0 = Extracts the green value from a color or pixel array. -green__returns = Number: the green value -green__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -hue__description__0 = Extracts the hue value from a color or pixel array. -hue__description__1 = Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.) -hue__returns = Number: the hue -hue__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -lerpColor__description__0 = Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors. -lerpColor__description__1 = The way that colors are interpolated depends on the current color mode. -lerpColor__returns = p5.Color: interpolated color -lerpColor__params__c1 = p5.Color: interpolate from this color -lerpColor__params__c2 = p5.Color: interpolate to this color -lerpColor__params__amt = Number: number between 0 and 1 -lightness__description__0 = Extracts the HSL lightness value from a color or pixel array. -lightness__returns = Number: the lightness -lightness__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -red__description__0 = Extracts the red value from a color or pixel array. -red__returns = Number: the red value -red__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -saturation__description__0 = Extracts the saturation value from a color or pixel array. -saturation__description__1 = Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -saturation__returns = Number: the saturation value -saturation__params__color = p5.Color|Number[]|String: p5.Color object, color components, or CSS color -background__description__0 = The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once. -background__description__1 = The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255. -background__description__2 = If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -background__description__3 = A p5.Color object can also be provided to set the background color. -background__description__4 = A p5.Image can also be provided to set the background image. -background__params__color = p5.Color: any value created by the color() function -background__params__colorstring = String: color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex -background__params__a = Number: (Optional) opacity of the background relative to current color range (default is 0-255) -background__params__gray = Number: specifies a value between white and black -background__params__v1 = Number: red or hue value (depending on the current color mode) -background__params__v2 = Number: green or saturation value (depending on the current color mode) -background__params__v3 = Number: blue or brightness value (depending on the current color mode) -background__params__values = Number[]: an array containing the red, green, blue and alpha components of the color -background__params__image = p5.Image: image created with loadImage() or createImage(), to set as background (must be same size as the sketch window) -clear__description__0 = Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent. -clear__description__1 = Note: In WebGL mode, this function can be passed normalized RGBA color values in order to clear the screen to a specific color. In addition to color, it will also clear the depth buffer. If you are not using the webGL renderer these color values will have no effect. -clear__params__r = Number: normalized red val. -clear__params__g = Number: normalized green val. -clear__params__b = Number: normalized blue val. -clear__params__a = Number: normalized alpha val. -colorMode__description__0 = colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL. -colorMode__description__1 = Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance. -colorMode__params__mode = Constant: either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness) -colorMode__params__max = Number: (Optional) range for all values -colorMode__params__max1 = Number: range for the red or hue depending on the current color mode -colorMode__params__max2 = Number: range for the green or saturation depending on the current color mode -colorMode__params__max3 = Number: range for the blue or brightness/lightness depending on the current color mode -colorMode__params__maxA = Number: (Optional) range for the alpha -fill__description__0 = Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all shapes drawn after the fill command will be filled with the color orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255. -fill__description__1 = If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -fill__description__2 = A p5 Color object can also be provided to set the fill color. -fill__params__v1 = Number: red or hue value relative to the current color range -fill__params__v2 = Number: green or saturation value relative to the current color range -fill__params__v3 = Number: blue or brightness value relative to the current color range -fill__params__alpha = Number (Optional) -fill__params__value = String: a color string -fill__params__gray = Number: a gray value -fill__params__values = Number[]: an array containing the red,green,blue & and alpha components of the color -fill__params__color = p5.Color: the fill color -noFill__description__0 = Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. -noStroke__description__0 = Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. -stroke__description__0 = Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255. -stroke__description__1 = If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used. -stroke__description__2 = A p5 Color object can also be provided to set the stroke color. -stroke__params__v1 = Number: red or hue value relative to the current color range -stroke__params__v2 = Number: green or saturation value relative to the current color range -stroke__params__v3 = Number: blue or brightness value relative to the current color range -stroke__params__alpha = Number (Optional) -stroke__params__value = String: a color string -stroke__params__gray = Number: a gray value -stroke__params__values = Number[]: an array containing the red,green,blue & and alpha components of the color -stroke__params__color = p5.Color: the stroke color -erase__description__0 = All drawing that follows erase() will subtract from the canvas.Erased areas will reveal the web page underneath the canvas.Erasing can be canceled with noErase(). -erase__description__1 = Drawing done with image() and background() in between erase() and noErase() will not erase the canvas but works as usual. -erase__params__strengthFill = Number: (Optional) A number (0-255) for the strength of erasing for a shape's fill. This will default to 255 when no argument is given, which is full strength. -erase__params__strengthStroke = Number: (Optional) A number (0-255) for the strength of erasing for a shape's stroke. This will default to 255 when no argument is given, which is full strength. -noErase__description__0 = Ends erasing that was started with erase(). The fill(), stroke(), and blendMode() settings will return to what they were prior to calling erase(). -arc__description__0 = Draw an arc to the screen. If called with only x, y, w, h, start and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN), a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function. -arc__description__1 = The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. Be aware that the y-axis increases in the downward direction, therefore angles are measured clockwise from the positive x-direction ("3 o'clock"). -arc__params__x = Number: x-coordinate of the arc's ellipse -arc__params__y = Number: y-coordinate of the arc's ellipse -arc__params__w = Number: width of the arc's ellipse by default -arc__params__h = Number: height of the arc's ellipse by default -arc__params__start = Number: angle to start the arc, specified in radians -arc__params__stop = Number: angle to stop the arc, specified in radians -arc__params__mode = Constant: (Optional) optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN -arc__params__detail = Integer: (Optional) 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. -ellipse__description__0 = Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. -ellipse__description__1 = An ellipse with equal width and height is a circle. The origin may be changed with the ellipseMode() function. -ellipse__params__x = Number: x-coordinate of the center of ellipse. -ellipse__params__y = Number: y-coordinate of the center of ellipse. -ellipse__params__w = Number: width of the ellipse. -ellipse__params__h = Number: (Optional) height of the ellipse. -ellipse__params__detail = Integer: (Optional) 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. -circle__description__0 = Draws a circle to the screen. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre. This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle. -circle__params__x = Number: x-coordinate of the centre of the circle. -circle__params__y = Number: y-coordinate of the centre of the circle. -circle__params__d = Number: diameter of the circle. -line__description__0 = Draws a line (a direct path between two points) to the screen. If called with only 4 parameters, it will draw a line in 2D with a default width of 1 pixel. This width can be modified by using the strokeWeight() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. So to color a line, use the stroke() function. -line__params__x1 = Number: the x-coordinate of the first point -line__params__y1 = Number: the y-coordinate of the first point -line__params__x2 = Number: the x-coordinate of the second point -line__params__y2 = Number: the y-coordinate of the second point -line__params__z1 = Number: the z-coordinate of the first point -line__params__z2 = Number: the z-coordinate of the second point -point__description__0 = Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second param is the vertical value for the point. The color of the point is changed with the stroke() function. The size of the point can be changed with the strokeWeight() function. -point__params__x = Number: the x-coordinate -point__params__y = Number: the y-coordinate -point__params__z = Number: (Optional) the z-coordinate (for WebGL mode) -point__params__coordinate_vector = p5.Vector: the coordinate vector -quad__description__0 = Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. z-arguments only work when quad() is used in WEBGL mode. -quad__params__x1 = Number: the x-coordinate of the first point -quad__params__y1 = Number: the y-coordinate of the first point -quad__params__x2 = Number: the x-coordinate of the second point -quad__params__y2 = Number: the y-coordinate of the second point -quad__params__x3 = Number: the x-coordinate of the third point -quad__params__y3 = Number: the y-coordinate of the third point -quad__params__x4 = Number: the x-coordinate of the fourth point -quad__params__y4 = Number: the y-coordinate of the fourth point -quad__params__detailX = Integer: (Optional) number of segments in the x-direction -quad__params__detailY = Integer: (Optional) number of segments in the y-direction -quad__params__z1 = Number: the z-coordinate of the first point -quad__params__z2 = Number: the z-coordinate of the second point -quad__params__z3 = Number: the z-coordinate of the third point -quad__params__z4 = Number: the z-coordinate of the fourth point -rect__description__0 = Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, may be changed with the rectMode() function. -rect__description__1 = The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -rect__params__x = Number: x-coordinate of the rectangle. -rect__params__y = Number: y-coordinate of the rectangle. -rect__params__w = Number: width of the rectangle. -rect__params__h = Number: (Optional) height of the rectangle. -rect__params__tl = Number: (Optional) optional radius of top-left corner. -rect__params__tr = Number: (Optional) optional radius of top-right corner. -rect__params__br = Number: (Optional) optional radius of bottom-right corner. -rect__params__bl = Number: (Optional) optional radius of bottom-left corner. -rect__params__detailX = Integer: (Optional) number of segments in the x-direction (for WebGL mode) -rect__params__detailY = Integer: (Optional) number of segments in the y-direction (for WebGL mode) -square__description__0 = Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, may be changed with the rectMode() function. -square__description__1 = The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. -square__params__x = Number: x-coordinate of the square. -square__params__y = Number: y-coordinate of the square. -square__params__s = Number: side size of the square. -square__params__tl = Number: (Optional) optional radius of top-left corner. -square__params__tr = Number: (Optional) optional radius of top-right corner. -square__params__br = Number: (Optional) optional radius of bottom-right corner. -square__params__bl = Number: (Optional) optional radius of bottom-left corner. -triangle__description__0 = Draws a triangle to the canvas. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. -triangle__params__x1 = Number: x-coordinate of the first point -triangle__params__y1 = Number: y-coordinate of the first point -triangle__params__x2 = Number: x-coordinate of the second point -triangle__params__y2 = Number: y-coordinate of the second point -triangle__params__x3 = Number: x-coordinate of the third point -triangle__params__y3 = Number: y-coordinate of the third point -ellipseMode__description__0 = Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse(), circle() and arc() are interpreted. -ellipseMode__description__1 = The default mode is CENTER, in which the first two parameters are interpreted as the shape's center point's x and y coordinates respectively, while the third and fourth parameters are its width and height. -ellipseMode__description__2 = ellipseMode(RADIUS) also uses the first two parameters as the shape's center point's x and y coordinates, but uses the third and fourth parameters to specify half of the shapes's width and height. -ellipseMode__description__3 = ellipseMode(CORNER) interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height. -ellipseMode__description__4 = ellipseMode(CORNERS) interprets the first two parameters as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner. -ellipseMode__description__5 = The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language. -ellipseMode__params__mode = Constant: either CENTER, RADIUS, CORNER, or CORNERS -noSmooth__description__0 = Draws all geometry with jagged (aliased) edges. Note that smooth() is active by default in 2D mode, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry. -rectMode__description__0 = Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted. -rectMode__description__1 = The default mode is CORNER, which interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height. -rectMode__description__2 = rectMode(CORNERS) interprets the first two parameters as the location of one of the corners, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not neccesary that the first corner be the upper left corner. -rectMode__description__3 = rectMode(CENTER) interprets the first two parameters as the shape's center point, while the third and fourth parameters are its width and height. -rectMode__description__4 = rectMode(RADIUS) also uses the first two parameters as the shape's center point, but uses the third and fourth parameters to specify half of the shape's width and height respectively. -rectMode__description__5 = The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language. -rectMode__params__mode = Constant: either CORNER, CORNERS, CENTER, or RADIUS -smooth__description__0 = Draws all geometry with smooth (anti-aliased) edges. smooth() will also improve image quality of resized images. Note that smooth() is active by default in 2D mode; noSmooth() can be used to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry. -strokeCap__description__0 = Sets the style for rendering line endings. These ends are either rounded, squared or extended, each of which specified with the corresponding parameters: ROUND, SQUARE and PROJECT. The default cap is ROUND. -strokeCap__description__1 = The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language. -strokeCap__params__cap = Constant: either ROUND, SQUARE or PROJECT -strokeJoin__description__0 = Sets the style of the joints which connect line segments. These joints are either mitered, beveled or rounded and specified with the corresponding parameters MITER, BEVEL and ROUND. The default joint is MITER. -strokeJoin__description__1 = The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language. -strokeJoin__params__join = Constant: either MITER, BEVEL, ROUND -strokeWeight__description__0 = Sets the width of the stroke used for lines, points and the border around shapes. All widths are set in units of pixels. -strokeWeight__description__1 = Note that it is affected by any transformation or scaling that has been applied previously. -strokeWeight__params__weight = Number: the weight of the stroke (in pixels) -bezier__description__0 = Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points "pull" the curve towards them. -bezier__description__1 = Bezier curves were developed by French automotive engineer Pierre Bezier, and are commonly used in computer graphics to define gently sloping curves. See also curve(). -bezier__params__x1 = Number: x-coordinate for the first anchor point -bezier__params__y1 = Number: y-coordinate for the first anchor point -bezier__params__x2 = Number: x-coordinate for the first control point -bezier__params__y2 = Number: y-coordinate for the first control point -bezier__params__x3 = Number: x-coordinate for the second control point -bezier__params__y3 = Number: y-coordinate for the second control point -bezier__params__x4 = Number: x-coordinate for the second anchor point -bezier__params__y4 = Number: y-coordinate for the second anchor point -bezier__params__z1 = Number: z-coordinate for the first anchor point -bezier__params__z2 = Number: z-coordinate for the first control point -bezier__params__z3 = Number: z-coordinate for the second control point -bezier__params__z4 = Number: z-coordinate for the second anchor point -bezierDetail__description__0 = Sets the resolution at which Bezier's curve is displayed. The default value is 20. -bezierDetail__description__1 = Note, This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information. -bezierDetail__params__detail = Number: resolution of the curves -bezierPoint__description__0 = Given the x or y co-ordinate values of control and anchor points of a bezier curve, it evaluates the x or y coordinate of the bezier at position t. The parameters a and d are the x or y coordinates of first and last points on the curve while b and c are of the control points.The final parameter t is the position of the resultant point which is given between 0 and 1. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t. -bezierPoint__returns = Number: the value of the Bezier at position t -bezierPoint__params__a = Number: coordinate of first point on the curve -bezierPoint__params__b = Number: coordinate of first control point -bezierPoint__params__c = Number: coordinate of second control point -bezierPoint__params__d = Number: coordinate of second point on the curve -bezierPoint__params__t = Number: value between 0 and 1 -bezierTangent__description__0 = Evaluates the tangent to the Bezier at position t for points a, b, c, d. The parameters a and d are the first and last points on the curve, and b and c are the control points. The final parameter t varies between 0 and 1. -bezierTangent__returns = Number: the tangent at position t -bezierTangent__params__a = Number: coordinate of first point on the curve -bezierTangent__params__b = Number: coordinate of first control point -bezierTangent__params__c = Number: coordinate of second control point -bezierTangent__params__d = Number: coordinate of second point on the curve -bezierTangent__params__t = Number: value between 0 and 1 -curve__description__0 = Draws a curved line on the screen between two points, given as the middle four parameters. The first two parameters are a control point, as if the curve came from this point even though it's not drawn. The last two parameters similarly describe the other control point.

    Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines. -curve__params__x1 = Number: x-coordinate for the beginning control point -curve__params__y1 = Number: y-coordinate for the beginning control point -curve__params__x2 = Number: x-coordinate for the first point -curve__params__y2 = Number: y-coordinate for the first point -curve__params__x3 = Number: x-coordinate for the second point -curve__params__y3 = Number: y-coordinate for the second point -curve__params__x4 = Number: x-coordinate for the ending control point -curve__params__y4 = Number: y-coordinate for the ending control point -curve__params__z1 = Number: z-coordinate for the beginning control point -curve__params__z2 = Number: z-coordinate for the first point -curve__params__z3 = Number: z-coordinate for the second point -curve__params__z4 = Number: z-coordinate for the ending control point -curveDetail__description__0 = Sets the resolution at which curves display. The default value is 20 while the minimum value is 3. -curveDetail__description__1 = This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information. -curveDetail__params__resolution = Number: resolution of the curves -curveTightness__description__0 = Modifies the quality of forms created with curve() and curveVertex().The parameter tightness determines how the curve fits to the vertex points. The value 0.0 is the default value for tightness (this value defines the curves to be Catmull-Rom splines) and the value 1.0 connects all the points with straight lines. Values within the range -5.0 and 5.0 will deform the curves but will leave them recognizable and as values increase in magnitude, they will continue to deform. -curveTightness__params__amount = Number: amount of deformation from the original vertices -curvePoint__description__0 = Evaluates the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are control points of the curve, and b and c are the start and end points of the curve. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a curve at t. -curvePoint__returns = Number: bezier value at position t -curvePoint__params__a = Number: coordinate of first control point of the curve -curvePoint__params__b = Number: coordinate of first point -curvePoint__params__c = Number: coordinate of second point -curvePoint__params__d = Number: coordinate of second control point -curvePoint__params__t = Number: value between 0 and 1 -curveTangent__description__0 = Evaluates the tangent to the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points. -curveTangent__returns = Number: the tangent at position t -curveTangent__params__a = Number: coordinate of first control point -curveTangent__params__b = Number: coordinate of first point on the curve -curveTangent__params__c = Number: coordinate of second point on the curve -curveTangent__params__d = Number: coordinate of second conrol point -curveTangent__params__t = Number: value between 0 and 1 -beginContour__description__0 = Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must "wind" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise. -beginContour__description__1 = These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within. -beginShape__description__0 = Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon. -beginShape__description__1 = The parameters available for beginShape() are: -beginShape__description__2 = POINTS Draw a series of points -beginShape__description__3 = LINES Draw a series of unconnected line segments (individual lines) -beginShape__description__4 = TRIANGLES Draw a series of separate triangles -beginShape__description__5 = TRIANGLE_FAN Draw a series of connected triangles sharing the first vertex in a fan-like fashion -beginShape__description__6 = TRIANGLE_STRIP Draw a series of connected triangles in strip fashion -beginShape__description__7 = QUADS Draw a series of separate quad -beginShape__description__8 = QUAD_STRIP Draw quad strip using adjacent edges to form the next quad -beginShape__description__9 = TESS (WebGl only) Handle irregular polygon for filling curve by explicit tessellation -beginShape__description__10 = After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color. -beginShape__description__11 = Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). -beginShape__params__kind = Constant: (Optional) either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS -bezierVertex__description__0 = Specifies vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. For WebGL mode bezierVertex() can be used in 2D as well as 3D mode. 2D mode expects 6 parameters, while 3D mode expects 9 parameters (including z coordinates). -bezierVertex__description__1 = The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape(). -bezierVertex__params__x2 = Number: x-coordinate for the first control point -bezierVertex__params__y2 = Number: y-coordinate for the first control point -bezierVertex__params__x3 = Number: x-coordinate for the second control point -bezierVertex__params__y3 = Number: y-coordinate for the second control point -bezierVertex__params__x4 = Number: x-coordinate for the anchor point -bezierVertex__params__y4 = Number: y-coordinate for the anchor point -bezierVertex__params__z2 = Number: z-coordinate for the first control point (for WebGL mode) -bezierVertex__params__z3 = Number: z-coordinate for the second control point (for WebGL mode) -bezierVertex__params__z4 = Number: z-coordinate for the anchor point (for WebGL mode) -curveVertex__description__0 = Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). For WebGL mode curveVertex() can be used in 2D as well as 3D mode. 2D mode expects 2 parameters, while 3D mode expects 3 parameters. -curveVertex__description__1 = The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points. The curveVertex() function is an implementation of Catmull-Rom splines. -curveVertex__params__x = Number: x-coordinate of the vertex -curveVertex__params__y = Number: y-coordinate of the vertex -curveVertex__params__z = Number: (Optional) z-coordinate of the vertex (for WebGL mode) -endContour__description__0 = Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must "wind" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise. -endContour__description__1 = These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within. -endShape__description__0 = The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endShape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). -endShape__params__mode = Constant: (Optional) use CLOSE to close the shape -quadraticVertex__description__0 = Specifies vertex coordinates for quadratic Bezier curves. Each call to quadraticVertex() defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode. 2D mode expects 4 parameters, while 3D mode expects 6 parameters (including z coordinates). -quadraticVertex__description__1 = This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape(). -quadraticVertex__params__cx = Number: x-coordinate for the control point -quadraticVertex__params__cy = Number: y-coordinate for the control point -quadraticVertex__params__x3 = Number: x-coordinate for the anchor point -quadraticVertex__params__y3 = Number: y-coordinate for the anchor point -quadraticVertex__params__cz = Number: z-coordinate for the control point (for WebGL mode) -quadraticVertex__params__z3 = Number: z-coordinate for the anchor point (for WebGL mode) -vertex__description__0 = All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions. -vertex__params__x = Number: x-coordinate of the vertex -vertex__params__y = Number: y-coordinate of the vertex -vertex__params__z = Number: z-coordinate of the vertex. Defaults to 0 if not specified. -vertex__params__u = Number: the vertex's texture u-coordinate -vertex__params__v = Number: the vertex's texture v-coordinate -normal__description__0 = Sets the 3d vertex normal to use for subsequent vertices drawn with vertex(). A normal is a vector that is generally nearly perpendicular to a shape's surface which controls how much light will be reflected from that part of the surface. -normal__params__vector = Vector: A p5.Vector representing the vertex normal. -normal__params__x = Number: The x component of the vertex normal. -normal__params__y = Number: The y component of the vertex normal. -normal__params__z = Number: The z component of the vertex normal. -VERSION__description__0 = Version of this p5.js. -P2D__description__0 = The default, two-dimensional renderer. -WEBGL__description__0 = One of the two render modes in p5.js: P2D (default renderer) and WEBGL Enables 3D render by introducing the third dimension: Z -HALF_PI__description__0 = HALF_PI is a mathematical constant with the value 1.57079632679489661923. It is half the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). -PI__description__0 = PI is a mathematical constant with the value 3.14159265358979323846. It is the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). -QUARTER_PI__description__0 = QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). -TAU__description__0 = TAU is an alias for TWO_PI, a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). -TWO_PI__description__0 = TWO_PI is a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). -DEGREES__description__0 = Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either DEGREES or RADIANS). -RADIANS__description__0 = Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either RADIANS or DEGREES). -HSB__description__0 = HSB (hue, saturation, brightness) is a type of color model. You can learn more about it at HSB. -AUTO__description__0 = 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 size function as AUTO, at a time. -print__description__0 = The print() function writes to the console area of your browser. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+). -print__description__1 = Note that calling print() without any arguments invokes the window.print() function which opens the browser's print dialog. To print a blank line to console you can write print('\n'). -print__params__contents = Any: any combination of Number, String, Object, Boolean, Array to print -frameCount__description__0 = The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc. -deltaTime__description__0 = The system variable deltaTime contains the time difference between the beginning of the previous frame and the beginning of the current frame in milliseconds. -deltaTime__description__1 = This variable is useful for creating time sensitive animation or physics calculation that should stay constant regardless of frame rate. -focused__description__0 = Confirms if the window a p5.js program is in is "focused," meaning that the sketch will accept mouse or keyboard input. This variable is "true" if the window is focused and "false" if not. -cursor__description__0 = Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden. If you are trying to set an image as the cursor, the recommended size is 16×16 or 32×32 pixels. The values for parameters x and y must be less than the dimensions of the image. -cursor__params__type = String|Constant: Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT Native CSS properties: 'grab', 'progress', 'cell' etc. External: path for cursor's images (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png) For more information on Native CSS cursors and url visit: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor -cursor__params__x = Number: (Optional) the horizontal active spot of the cursor (must be less than 32) -cursor__params__y = Number: (Optional) the vertical active spot of the cursor (must be less than 32) -frameRate__description__0 = Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations. This is the same as setFrameRate(val). -frameRate__description__1 = Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate(). -frameRate__description__2 = Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate. -frameRate__params__fps = Number: number of frames to be displayed every second -noCursor__description__0 = Hides the cursor from view. -displayWidth__description__0 = System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -displayHeight__description__0 = System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity. -windowWidth__description__0 = System variable that stores the width of the inner window, it maps to window.innerWidth. -windowHeight__description__0 = System variable that stores the height of the inner window, it maps to window.innerHeight. -windowResized__description__0 = The windowResized() function is called once every time the browser window is resized. This is a good place to resize the canvas or do any other adjustments to accommodate the new window size. -windowResized__params__event = Object: (Optional) optional Event callback argument. -width__description__0 = System variable that stores the width of the drawing canvas. This value is set by the first parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the width variable to the value 320. The value of width defaults to 100 if createCanvas() is not used in a program. -height__description__0 = System variable that stores the height of the drawing canvas. This value is set by the second parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the height variable to the value 240. The value of height defaults to 100 if createCanvas() is not used in a program. -fullscreen__description__0 = If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below. -fullscreen__returns = Boolean: current fullscreen state -fullscreen__params__val = Boolean: (Optional) whether the sketch should be in fullscreen mode or not -pixelDensity__description__0 = Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch. -pixelDensity__params__val = Number: whether or how much the sketch should scale -displayDensity__description__0 = Returns the pixel density of the current display the sketch is running on. -displayDensity__returns = Number: current pixel density of the display -getURL__description__0 = Gets the current URL. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs. -getURL__returns = String: url -getURLPath__description__0 = Gets the current URL path as an array. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs. -getURLPath__returns = String[]: path components -getURLParams__description__0 = Gets the current URL params as an Object. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs. -getURLParams__returns = Object: URL params -preload__description__0 = Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. If asynchronous loading is preferred, the load methods can instead be called in setup() or anywhere else with the use of a callback parameter. -preload__description__1 = By default the text "loading..." will be displayed. To make your own loading page, include an HTML element with id "p5_loading" in your page. More information here. -setup__description__0 = The setup() function is called once when the program starts. It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution. -setup__description__1 = Note: Variables declared within setup() are not accessible within other functions, including draw(). -draw__description__0 = Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. Note if noLoop() is called in setup(), draw() will still be executed once before stopping. draw() is called automatically and should never be called explicitly. -draw__description__1 = It should always be controlled with noLoop(), redraw() and loop(). After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once, and loop() will cause the code inside draw() to resume executing continuously. -draw__description__2 = The number of times draw() executes in each second may be controlled with the frameRate() function. -draw__description__3 = There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed(). Sometimes, you might have an empty call to draw() in your program, as shown in the above example. -draw__description__4 = It is important to note that the drawing coordinate system will be reset at the beginning of each draw() call. If any transformations are performed within draw() (ex: scale, rotate, translate), their effects will be undone at the beginning of draw(), so transformations will not accumulate over time. On the other hand, styling applied (ex: fill, stroke, etc) will remain in effect. -remove__description__0 = Removes the entire p5 sketch. This will remove the canvas and any elements created by p5.js. It will also stop the draw loop and unbind any properties or methods from the window global scope. It will leave a variable p5 in case you wanted to create a new p5 sketch. If you like, you can set p5 = null to erase it. While all functions and variables and objects created by the p5 library will be removed, any other global variables created by your code will remain. -disableFriendlyErrors__description__0 = Turn off some features of the friendly error system (FES), which can give a significant boost to performance when needed. -disableFriendlyErrors__description__1 = Note that this will disable the parts of the FES that cause performance slowdown (like argument checking). Friendly errors that have no performance cost (like giving an descriptive error if a file load fails, or warning you if you try to override p5.js functions in the global space), will remain in place. -disableFriendlyErrors__description__2 = See disabling the friendly error system. -let__description__0 = Creates and names a new variable. A variable is a container for a value. -let__description__1 = Variables that are declared with let will have block-scope. This means that the variable only exists within the block that it is created within. -let__description__2 = From the MDN entry: Declares a block scope local variable, optionally initializing it to a value. -const__description__0 = Creates and names a new constant. Like a variable created with let, a constant that is created with const is a container for a value, however constants cannot be reassigned once they are declared. Although it is noteworthy that for non-primitive data types like objects & arrays, their elements can still be changeable. So if a variable is assigned an array, you can still add or remove elements from the array but cannot reassign another array to it. Also unlike let, you cannot declare variables without value using const. -const__description__1 = Constants have block-scope. This means that the constant only exists within the block that it is created within. A constant cannot be redeclared within a scope in which it already exists. -const__description__2 = From the MDN entry: Declares a read-only named constant. Constants are block-scoped, much like variables defined using the 'let' statement. The value of a constant can't be changed through reassignment, and it can't be redeclared. -===__description__0 = The strict equality operator === checks to see if two values are equal and of the same type. -===__description__1 = A comparison expression always evaluates to a boolean. -===__description__2 = From the MDN entry: The non-identity operator returns true if the operands are not equal and/or not of the same type. -===__description__3 = Note: In some examples around the web you may see a double-equals-sign ==, used for comparison instead. This is the non-strict equality operator in Javascript. This will convert the two values being compared to the same type before comparing them. ->__description__0 = The greater than operator > evaluates to true if the left value is greater than the right value. There is more info on comparison operators on MDN. ->=__description__0 = The greater than or equal to operator >= evaluates to true if the left value is greater than or equal to the right value. ->=__description__1 = There is more info on comparison operators on MDN. -<__description__0 = The less than operator < evaluates to true if the left value is less than the right value. -<__description__1 = There is more info on comparison operators on MDN. -<=__description__0 = The less than or equal to operator <= evaluates to true if the left value is less than or equal to the right value. -<=__description__1 = There is more info on comparison operators on MDN. -if-else__description__0 = The if-else statement helps control the flow of your code. -if-else__description__1 = A condition is placed between the parenthesis following 'if', when that condition evalues to truthy, the code between the following curly braces is run. Alternatively, when the condition evaluates to falsy, the code between the curly braces of 'else' block is run instead. Writing an else block is optional. -if-else__description__2 = From the MDN entry: The 'if' statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed -function__description__0 = Creates and names a function. A function is a set of statements that perform a task. -function__description__1 = Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by seperating them with commmas. -function__description__2 = From the MDN entry: Declares a function with the specified parameters. -return__description__0 = Specifies the value to be returned by a function. For more info checkout the MDN entry for return. -boolean__description__0 = Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned. -boolean__returns = Boolean: boolean representation of value -boolean__params__n = String|Boolean|Number|Array: value to parse -string__description__0 = A string is one of the 7 primitive data types in Javascript. A string is a series of text characters. In Javascript, a string value must be surrounded by either single-quotation marks(') or double-quotation marks("). -string__description__1 = From the MDN entry: A string is a sequence of characters used to represent text. -number__description__0 = A number is one of the 7 primitive data types in Javascript. A number can be a whole number or a decimal number. -number__description__1 = The MDN entry for number -object__description__0 = From MDN's object basics: An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.) -class__description__0 = Creates and names a class which is a template for the creation of objects. -class__description__1 = From the MDN entry: The class declaration creates a new Class with a given name using prototype-based inheritance. -for__description__0 = for creates a loop that is useful for executing one section of code multiple times. -for__description__1 = A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are separated by ; (semi-colon).In case of an empty expression, only a semi-colon is written. -for__description__2 = The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second and third expression. -for__description__3 = As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. The test condition with a for loop is the second expression detailed above. Ensuring that this expression can eventually become false ensures that your loop doesn't attempt to run an infinite amount of times, which can crash your browser. -for__description__4 = From the MDN entry: Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once. -while__description__0 = while creates a loop that is useful for executing one section of code multiple times. -while__description__1 = With a 'while loop', the code inside of the loop body (between the curly braces) is run repeatedly until the test condition (inside of the parenthesis) evaluates to false. The condition is tested before executing the code body with while, so if the condition is initially false the loop body, or statement, will never execute. -while__description__2 = As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. This is to keep your loop from trying to run an infinite amount of times, which can crash your browser. -while__description__3 = From the MDN entry: The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true.The condition is evaluated before executing the statement. -createCanvas__description__0 = Creates a canvas element in the document, and sets the dimensions of it in pixels. This method should be called only once at the start of setup. Calling createCanvas more than once in a sketch will result in very unpredictable behavior. If you want more than one drawing canvas you could use createGraphics (hidden by default but it can be shown). -createCanvas__description__1 = Important note: in 2D mode (i.e. when p5.Renderer is not set) the origin (0,0) is positioned at the top left of the screen. In 3D mode (i.e. when p5.Renderer is set to WEBGL), the origin is positioned at the center of the canvas. See this issue for more information. -createCanvas__description__2 = The system variables width and height are set by the parameters passed to this function. If createCanvas() is not used, the window will be given a default size of 100×100 pixels. -createCanvas__description__3 = For more ways to position the canvas, see the positioning the canvas wiki page. -createCanvas__returns = p5.Renderer: -createCanvas__params__w = Number: width of the canvas -createCanvas__params__h = Number: height of the canvas -createCanvas__params__renderer = Constant: (Optional) either P2D or WEBGL -resizeCanvas__description__0 = Resizes the canvas to given width and height. The canvas will be cleared and draw will be called immediately, allowing the sketch to re-render itself in the resized canvas. -resizeCanvas__params__w = Number: width of the canvas -resizeCanvas__params__h = Number: height of the canvas -resizeCanvas__params__noRedraw = Boolean: (Optional) don't redraw the canvas immediately -noCanvas__description__0 = Removes the default canvas for a p5 sketch that doesn't require a canvas -createGraphics__description__0 = Creates and returns a new p5.Renderer object. Use this class if you need to draw into an off-screen graphics buffer. The two parameters define the width and height in pixels. -createGraphics__returns = p5.Graphics: offscreen graphics buffer -createGraphics__params__w = Number: width of the offscreen graphics buffer -createGraphics__params__h = Number: height of the offscreen graphics buffer -createGraphics__params__renderer = Constant: (Optional) either P2D or WEBGL undefined defaults to p2d -blendMode__description__0 = Blends the pixels in the display window according to the defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B):
    • BLEND - linear interpolation of colours: C = A*factor + B. This is the default blending mode.
    • ADD - sum of A and B
    • DARKEST - only the darkest colour succeeds: C = min(A*factor, B).
    • LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B).
    • DIFFERENCE - subtract colors from underlying image.
    • EXCLUSION - similar to DIFFERENCE, but less extreme.
    • MULTIPLY - multiply the colors, result will always be darker.
    • SCREEN - opposite multiply, uses inverse values of the colors.
    • REPLACE - the pixels entirely replace the others and don't utilize alpha (transparency) values.
    • REMOVE - removes pixels from B with the alpha strength of A.
    • OVERLAY - mix of MULTIPLY and SCREEN . Multiplies dark values, and screens light values. (2D)
    • HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower. (2D)
    • SOFT_LIGHT - mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh. (2D)
    • DODGE - lightens light tones and increases contrast, ignores darks. (2D)
    • BURN - darker areas are applied, increasing contrast, ignores lights. (2D)
    • SUBTRACT - remainder of A and B (3D)
    -blendMode__description__1 = (2D) indicates that this blend mode only works in the 2D renderer. (3D) indicates that this blend mode only works in the WEBGL renderer. -blendMode__params__mode = Constant: blend mode to set for canvas. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT -drawingContext__description__0 = The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable drawingContext, as in the example shown. This is the equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl');. See this reference for the native canvas API for possible drawing functions you can call. -noLoop__description__0 = Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block. -noLoop__description__1 = When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrames() or loadPixels() may not be used. -noLoop__description__2 = Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. -noLoop__description__3 = Use isLooping() to check current state of loop(). -loop__description__0 = By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop(). -loop__description__1 = Avoid calling loop() from inside setup(). -loop__description__2 = Use isLooping() to check current state of loop(). -isLooping__description__0 = By default, p5.js loops through draw() continuously, executing the code within it. If the sketch is stopped with noLoop() or resumed with loop(), isLooping() returns the current state for use within custom event handlers. -push__description__0 = The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.) -push__description__1 = push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). -push__description__2 = In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader(). -pop__description__0 = The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.) -pop__description__1 = push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). -pop__description__2 = In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader(). -redraw__description__0 = Executes the code within draw() one time. This function allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs. -redraw__description__1 = In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed). -redraw__description__2 = The redraw() function does not work properly when called inside draw().To enable/disable animations, use loop() and noLoop(). -redraw__description__3 = In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws. -redraw__params__n = Integer: (Optional) Redraw for n-times. The default value is 1. -p5__description__0 = The p5() constructor enables you to activate "instance mode" instead of normal "global mode". This is an advanced topic. A short description and example is included below. Please see Dan Shiffman's Coding Train video tutorial or this tutorial page for more info. -p5__description__1 = By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries (synchronously or asynchronously) or writing long programs of your own. p5.js currently supports a way around this problem called "instance mode". In instance mode, all p5 functions are bound up in a single variable instead of polluting your global namespace. -p5__description__2 = Optionally, you can specify a default container for the canvas and any other elements to append to with a second argument. You can give the ID of an element in your html, or an html node itself. -p5__description__3 = Note that creating instances like this also allows you to have more than one p5 sketch on a single web page, as they will each be wrapped up with their own set up variables. Of course, you could also use iframes to have multiple sketches in global mode. -p5__params__sketch = Object: a function containing a p5.js sketch -p5__params__node = String|Object: ID or pointer to HTML DOM node to contain sketch in -applyMatrix__description__0 = Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia. -applyMatrix__description__1 = The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form:
    -applyMatrix__description__2 = The transformation matrix used when applyMatrix is called
    -applyMatrix__params__a = Number|Array: numbers which define the 2×3 matrix to be multiplied, or an array of numbers -applyMatrix__params__b = Number: numbers which define the 2×3 matrix to be multiplied -applyMatrix__params__c = Number: numbers which define the 2×3 matrix to be multiplied -applyMatrix__params__d = Number: numbers which define the 2×3 matrix to be multiplied -applyMatrix__params__e = Number: numbers which define the 2×3 matrix to be multiplied -applyMatrix__params__f = Number: numbers which define the 2×3 matrix to be multiplied -resetMatrix__description__0 = Replaces the current matrix with the identity matrix. -rotate__description__0 = Rotates a shape by the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES. -rotate__description__1 = Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All transformations are reset when draw() begins again. -rotate__description__2 = Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). -rotate__params__angle = Number: the angle of rotation, specified in radians or degrees, depending on current angleMode -rotate__params__axis = p5.Vector|Number[]: (Optional) (in 3d) the axis to rotate around -rotateX__description__0 = Rotates a shape around X axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES. -rotateX__description__1 = Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again. -rotateX__params__angle = Number: the angle of rotation, specified in radians or degrees, depending on current angleMode -rotateY__description__0 = Rotates a shape around Y axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES. -rotateY__description__1 = Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again. -rotateY__params__angle = Number: the angle of rotation, specified in radians or degrees, depending on current angleMode -rotateZ__description__0 = Rotates a shape around Z axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES. -rotateZ__description__1 = This method works in WEBGL mode only. -rotateZ__description__2 = Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again. -rotateZ__params__angle = Number: the angle of rotation, specified in radians or degrees, depending on current angleMode -scale__description__0 = Increases or decreases the size of a shape by expanding or contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%. -scale__description__1 = Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again. -scale__description__2 = Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop(). -scale__params__s = Number|p5.Vector|Number[]: percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given -scale__params__y = Number: (Optional) percent to scale the object in the y-axis -scale__params__z = Number: (Optional) percent to scale the object in the z-axis (webgl only) -scale__params__scales = p5.Vector|Number[]: per-axis percents to scale the object -shearX__description__0 = Shears a shape around the x-axis by the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. -shearX__description__1 = Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again. -shearX__description__2 = Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -shearX__params__angle = Number: angle of shear specified in radians or degrees, depending on current angleMode -shearY__description__0 = Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. -shearY__description__1 = Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again. -shearY__description__2 = Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions. -shearY__params__angle = Number: angle of shear specified in radians or degrees, depending on current angleMode -translate__description__0 = Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation. -translate__description__1 = Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop(). -translate__params__x = Number: left/right translation -translate__params__y = Number: up/down translation -translate__params__z = Number: (Optional) forward/backward translation (webgl only) -translate__params__vector = p5.Vector: the vector to translate by -storeItem__description__0 = Stores a value in local storage under the key name. Local storage is saved in the browser and persists between browsing sessions and page reloads. The key can be the name of the variable but doesn't have to be. To retrieve stored items see getItem. Sensitive data such as passwords or personal information should not be stored in local storage. -storeItem__params__key = String -storeItem__params__value = String|Number|Object|Boolean|p5.Color|p5.Vector -getItem__description__0 = Returns the value of an item that was stored in local storage using storeItem() -getItem__returns = Number|Object|String|Boolean|p5.Color|p5.Vector: Value of stored item -getItem__params__key = String: name that you wish to use to store in local storage -clearStorage__description__0 = Clears all local storage items set with storeItem() for the current domain. -removeItem__description__0 = Removes an item that was stored with storeItem() -removeItem__params__key = String -createStringDict__description__0 = Creates a new instance of p5.StringDict using the key-value pair or the object you provide. -createStringDict__returns = p5.StringDict: -createStringDict__params__key = String -createStringDict__params__value = String -createStringDict__params__object = Object: object -createNumberDict__description__0 = Creates a new instance of p5.NumberDict using the key-value pair or object you provide. -createNumberDict__returns = p5.NumberDict: -createNumberDict__params__key = Number -createNumberDict__params__value = Number -createNumberDict__params__object = Object: object -select__description__0 = Searches the page for the first element that matches the given CSS selector string (can be an ID, class, tag name or a combination) and returns it as a p5.Element. The DOM node itself can be accessed with .elt. Returns null if none found. You can also specify a container to search within. -select__returns = p5.Element|null: p5.Element containing node found -select__params__selectors = String: CSS selector string of element to search for -select__params__container = String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element, or HTML element to search within -selectAll__description__0 = Searches the page for elements that match the given CSS selector string (can be an ID a class, tag name or a combination) and returns them as p5.Elements in an array. The DOM node itself can be accessed with .elt. Returns an empty array if none found. You can also specify a container to search within. -selectAll__returns = p5.Element[]: Array of p5.Elements containing nodes found -selectAll__params__selectors = String: CSS selector string of elements to search for -selectAll__params__container = String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element , or HTML element to search within -removeElements__description__0 = Removes all elements created by p5, except any canvas / graphics elements created by createCanvas or createGraphics. Event handlers are removed, and element is removed from the DOM. -changed__description__0 = The .changed() function is called when the value of an element changes. This can be used to attach an element specific event listener. -changed__params__fxn = Function|Boolean: function to be fired when the value of an element changes. if false is passed instead, the previously firing function will no longer fire. -input__description__0 = The .input() function is called when any user input is detected with an element. The input event is often used to detect keystrokes in a input element, or changes on a slider element. This can be used to attach an element specific event listener. -input__params__fxn = Function|Boolean: function to be fired when any user input is detected within the element. if false is passed instead, the previously firing function will no longer fire. -createDiv__description__0 = Creates a <div></div> element in the DOM with given inner HTML. -createDiv__returns = p5.Element: pointer to p5.Element holding created node -createDiv__params__html = String: (Optional) inner HTML for element created -createP__description__0 = Creates a <p></p> element in the DOM with given inner HTML. Used for paragraph length text. -createP__returns = p5.Element: pointer to p5.Element holding created node -createP__params__html = String: (Optional) inner HTML for element created -createSpan__description__0 = Creates a <span></span> element in the DOM with given inner HTML. -createSpan__returns = p5.Element: pointer to p5.Element holding created node -createSpan__params__html = String: (Optional) inner HTML for element created -createImg__description__0 = Creates an <img> element in the DOM with given src and alternate text. -createImg__returns = p5.Element: pointer to p5.Element holding created node -createImg__params__src = String: src path or url for image -createImg__params__alt = String: alternate text to be used if image does not load. You can use also an empty string ("") if that an image is not intended to be viewed. -createImg__params__crossOrigin = String: crossOrigin property of the img element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with canvas. if an empty string("") is passed, CORS is not used -createImg__params__successCallback = Function: (Optional) callback to be called once image data is loaded with the p5.Element as argument -createA__description__0 = Creates an <a></a> element in the DOM for including a hyperlink. -createA__returns = p5.Element: pointer to p5.Element holding created node -createA__params__href = String: url of page to link to -createA__params__html = String: inner html of link element to display -createA__params__target = String: (Optional) target where new link should open, could be _blank, _self, _parent, _top. -createSlider__description__0 = Creates a slider <input></input> element in the DOM. Use .size() to set the display length of the slider. -createSlider__returns = p5.Element: pointer to p5.Element holding created node -createSlider__params__min = Number: minimum value of the slider -createSlider__params__max = Number: maximum value of the slider -createSlider__params__value = Number: (Optional) default value of the slider -createSlider__params__step = Number: (Optional) step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value) -createButton__description__0 = Creates a <button></button> element in the DOM. Use .size() to set the display size of the button. Use .mousePressed() to specify behavior on press. -createButton__returns = p5.Element: pointer to p5.Element holding created node -createButton__params__label = String: label displayed on the button -createButton__params__value = String: (Optional) value of the button -createCheckbox__description__0 = Creates a checkbox <input></input> element in the DOM. Calling .checked() on a checkbox returns if it is checked or not -createCheckbox__returns = p5.Element: pointer to p5.Element holding created node -createCheckbox__params__label = String: (Optional) label displayed after checkbox -createCheckbox__params__value = Boolean: (Optional) value of the checkbox; checked is true, unchecked is false -createSelect__description__0 = Creates a dropdown menu <select></select> element in the DOM. It also helps to assign select-box methods to p5.Element when selecting existing select box.
    • .option(name, [value]) can be used to set options for the select after it is created.
    • .value() will return the currently selected option.
    • .selected() will return current dropdown element which is an instance of p5.Element
    • .selected(value) can be used to make given option selected by default when the page first loads.
    • .disable() marks whole of dropdown element as disabled.
    • .disable(value) marks given option as disabled
    -createSelect__returns = p5.Element: -createSelect__params__multiple = Boolean: (Optional) true if dropdown should support multiple selections -createSelect__params__existing = Object: DOM select element -createRadio__description__0 = Creates a radio button element in the DOM.It also helps existing radio buttons assign methods of p5.Element.
    • .option(value, [label]) can be used to create a new option for the element. If an option with a value already exists, it will be returned. It is recommended to use string values as input for value. Optionally, a label can be provided as second argument for the option.
    • .remove(value) can be used to remove an option for the element. String values recommended as input for value.
    • .value() method will return the currently selected value.
    • .selected() method will return the currently selected input element.
    • .selected(value) method will select the option and return it. String values recommended as input for value.
    • .disable(Boolean) method will enable/disable the whole radio button element.
    -createRadio__returns = p5.Element: pointer to p5.Element holding created node -createRadio__params__containerElement = Object: An container HTML Element either a div or span inside which all existing radio inputs will be considered as options. -createRadio__params__name = String: (Optional) A name parameter for each Input Element. -createColorPicker__description__0 = Creates a colorPicker element in the DOM for color input. The .value() method will return a hex string (#rrggbb) of the color. The .color() method will return a p5.Color object with the current chosen color. -createColorPicker__returns = p5.Element: pointer to p5.Element holding created node -createColorPicker__params__value = String|p5.Color: (Optional) default color of element -createInput__description__0 = Creates an <input></input> element in the DOM for text input. Use .size() to set the display length of the box. -createInput__returns = p5.Element: pointer to p5.Element holding created node -createInput__params__value = String: default value of the input box -createInput__params__type = String: (Optional) type of text, ie text, password etc. Defaults to text. Needs a value to be specified first. -createFileInput__description__0 = Creates an <input></input> element in the DOM of type 'file'. This allows users to select local files for use in a sketch. -createFileInput__returns = p5.Element: pointer to p5.Element holding created DOM element -createFileInput__params__callback = Function: callback function for when a file is loaded -createFileInput__params__multiple = Boolean: (Optional) optional, to allow multiple files to be selected -createVideo__description__0 = Creates an HTML5 <video> element in the DOM for simple playback of audio/video. Shown by default, can be hidden with .hide() and drawn into canvas using image(). The first parameter can be either a single string path to a video file, or an array of string paths to different formats of the same video. This is useful for ensuring that your video can play across different browsers, as each supports different formats. See this page for further information about supported formats. -createVideo__returns = p5.MediaElement: pointer to video p5.MediaElement -createVideo__params__src = String|String[]: path to a video file, or array of paths for supporting different browsers -createVideo__params__callback = Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content -createAudio__description__0 = Creates a hidden HTML5 <audio> element in the DOM for simple audio playback. The first parameter can be either a single string path to a audio file, or an array of string paths to different formats of the same audio. This is useful for ensuring that your audio can play across different browsers, as each supports different formats. See this page for further information about supported formats. -createAudio__returns = p5.MediaElement: pointer to audio p5.MediaElement -createAudio__params__src = String|String[]: (Optional) path to an audio file, or array of paths for supporting different browsers -createAudio__params__callback = Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content -createCapture__description__0 = Creates a new HTML5 <video> element that contains the audio/video feed from a webcam. The element is separate from the canvas and is displayed by default. The element can be hidden using .hide(). The feed can be drawn onto the canvas using image(). The loadedmetadata property can be used to detect when the element has fully loaded (see second example). -createCapture__description__1 = More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers. -createCapture__description__2 = Security note: A new browser security specification requires that getUserMedia, which is behind createCapture(), only works when you're running the code locally, or on HTTPS. Learn more here and here. -createCapture__returns = p5.Element: capture video p5.Element -createCapture__params__type = String|Constant|Object: type of capture, either VIDEO or AUDIO if none specified, default both, or a Constraints object -createCapture__params__callback = Function: (Optional) function to be called once stream has loaded -createElement__description__0 = Creates element with given tag in the DOM with given content. -createElement__returns = p5.Element: pointer to p5.Element holding created node -createElement__params__tag = String: tag for the new element -createElement__params__content = String: (Optional) html content to be inserted into the element -deviceOrientation__description__0 = 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. -accelerationX__description__0 = The system variable accelerationX always contains the acceleration of the device along the x axis. Value is represented as meters per second squared. -accelerationY__description__0 = The system variable accelerationY always contains the acceleration of the device along the y axis. Value is represented as meters per second squared. -accelerationZ__description__0 = The system variable accelerationZ always contains the acceleration of the device along the z axis. Value is represented as meters per second squared. -pAccelerationX__description__0 = The system variable pAccelerationX always contains the acceleration of the device along the x axis in the frame previous to the current frame. Value is represented as meters per second squared. -pAccelerationY__description__0 = The system variable pAccelerationY always contains the acceleration of the device along the y axis in the frame previous to the current frame. Value is represented as meters per second squared. -pAccelerationZ__description__0 = The system variable pAccelerationZ always contains the acceleration of the device along the z axis in the frame previous to the current frame. Value is represented as meters per second squared. -rotationX__description__0 = The system variable rotationX always contains the rotation of the device along the x axis. If the sketch angleMode() is set to DEGREES, the value will be -180 to 180. If it is set to RADIANS, the value will be -PI to PI. -rotationX__description__1 = Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour. -rotationY__description__0 = The system variable rotationY always contains the rotation of the device along the y axis. If the sketch angleMode() is set to DEGREES, the value will be -90 to 90. If it is set to RADIANS, the value will be -PI/2 to PI/2. -rotationY__description__1 = Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour. -rotationZ__description__0 = The system variable rotationZ always contains the rotation of the device along the z axis. If the sketch angleMode() is set to DEGREES, the value will be 0 to 360. If it is set to RADIANS, the value will be 0 to 2*PI. -rotationZ__description__1 = Unlike rotationX and rotationY, this variable is available for devices with a built-in compass only. -rotationZ__description__2 = Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour. -pRotationX__description__0 = The system variable pRotationX always contains the rotation of the device along the x axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be -180 to 180. If it is set to RADIANS, the value will be -PI to PI. -pRotationX__description__1 = pRotationX can also be used with rotationX to determine the rotate direction of the device along the X-axis. -pRotationY__description__0 = The system variable pRotationY always contains the rotation of the device along the y axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be -90 to 90. If it is set to RADIANS, the value will be -PI/2 to PI/2. -pRotationY__description__1 = pRotationY can also be used with rotationY to determine the rotate direction of the device along the Y-axis. -pRotationZ__description__0 = The system variable pRotationZ always contains the rotation of the device along the z axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be 0 to 360. If it is set to RADIANS, the value will be 0 to 2*PI. -pRotationZ__description__1 = pRotationZ can also be used with rotationZ to determine the rotate direction of the device along the Z-axis. -turnAxis__description__0 = When a device is rotated, the axis that triggers the deviceTurned() method is stored in the turnAxis variable. The turnAxis variable is only defined within the scope of deviceTurned(). -setMoveThreshold__description__0 = The setMoveThreshold() function is used to set the movement threshold for the deviceMoved() function. The default threshold is set to 0.5. -setMoveThreshold__params__value = Number: The threshold value -setShakeThreshold__description__0 = The setShakeThreshold() function is used to set the movement threshold for the deviceShaken() function. The default threshold is set to 30. -setShakeThreshold__params__value = Number: The threshold value -deviceMoved__description__0 = The deviceMoved() 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 setMoveThreshold(). -deviceTurned__description__0 = The deviceTurned() function is called when the device rotates by more than 90 degrees continuously. -deviceTurned__description__1 = The axis that triggers the deviceTurned() method is stored in the turnAxis variable. The deviceTurned() method can be locked to trigger on any axis: X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'. -deviceShaken__description__0 = The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value. The default threshold is set to 30. The threshold value can be changed using setShakeThreshold(). -keyIsPressed__description__0 = The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed. -key__description__0 = The system variable key always contains the value of the most recent key on the keyboard that was typed. To get the proper capitalization, it is best to use it within keyTyped(). For non-ASCII keys, use the keyCode variable. -keyCode__description__0 = The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You can also check for custom keys by looking up the keyCode of any key on a site like this: keycode.info. -keyPressed__description__0 = The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable. -keyPressed__description__1 = For non-ASCII keys, use the keyCode variable. You can check if the keyCode equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. -keyPressed__description__2 = For ASCII keys, the key that was pressed is stored in the key variable. However, it does not distinguish between uppercase and lowercase. For this reason, it is recommended to use keyTyped() to read the key variable, in which the case of the variable will be distinguished. -keyPressed__description__3 = Because of how operating systems handle key repeats, holding down a key may cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -keyPressed__params__event = Object: (Optional) optional KeyboardEvent callback argument. -keyReleased__description__0 = The keyReleased() function is called once every time a key is released. See key and keyCode for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -keyReleased__params__event = Object: (Optional) optional KeyboardEvent callback argument. -keyTyped__description__0 = The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect a keyCode for one of these keys, use the keyPressed() function instead. The most recent key typed will be stored in the key variable. -keyTyped__description__1 = Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method. -keyTyped__params__event = Object: (Optional) optional KeyboardEvent callback argument. -keyIsDown__description__0 = The keyIsDown() function checks if the key is currently down, i.e. pressed. It can be used if you have an object that moves, and you want several keys to be able to affect its behaviour simultaneously, such as moving a sprite diagonally. You can put in any number representing the keyCode of the key, or use any of the variable keyCode names listed here. -keyIsDown__returns = Boolean: whether key is down or not -keyIsDown__params__code = Number: The key to check for. -movedX__description__0 = The variable movedX contains the horizontal movement of the mouse since the last frame -movedY__description__0 = The variable movedY contains the vertical movement of the mouse since the last frame -mouseX__description__0 = The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point. -mouseY__description__0 = The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point. -pmouseX__description__0 = The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX value at the start of each touch event. -pmouseY__description__0 = The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY value at the start of each touch event. -winMouseX__description__0 = The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window. -winMouseY__description__0 = The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window. -pwinMouseX__description__0 = The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event. -pwinMouseY__description__0 = The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event. -mouseButton__description__0 = p5 automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently. -mouseIsPressed__description__0 = The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not. -mouseMoved__description__0 = The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -mouseMoved__params__event = Object: (Optional) optional MouseEvent callback argument. -mouseDragged__description__0 = The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. If no mouseDragged() function is defined, the touchMoved() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -mouseDragged__params__event = Object: (Optional) optional MouseEvent callback argument. -mousePressed__description__0 = The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed. If no mousePressed() function is defined, the touchStarted() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -mousePressed__params__event = Object: (Optional) optional MouseEvent callback argument. -mouseReleased__description__0 = The mouseReleased() function is called every time a mouse button is released. If no mouseReleased() function is defined, the touchEnded() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -mouseReleased__params__event = Object: (Optional) optional MouseEvent callback argument. -mouseClicked__description__0 = The mouseClicked() function is called once after a mouse button has been pressed and then released. Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased(). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. -mouseClicked__params__event = Object: (Optional) optional MouseEvent callback argument. -doubleClicked__description__0 = The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification. The doubleClicked event is fired when a pointing device button (usually a mouse's primary button) is clicked twice on a single element. For more info on the dblclick event refer to mozilla's documentation here: https://developer.mozilla.org/en-US/docs/Web/Events/dblclick -doubleClicked__params__event = Object: (Optional) optional MouseEvent callback argument. -mouseWheel__description__0 = The function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad. The event.delta property returns the amount the mouse wheel have scrolled. The values can be positive or negative depending on the scroll direction (on OS X with "natural" scrolling enabled, the signs are inverted). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method. Due to the current support of the "wheel" event on Safari, the function may only work as expected if "return false" is included while using Safari. -mouseWheel__params__event = Object: (Optional) optional WheelEvent callback argument. -requestPointerLock__description__0 = The function requestPointerLock() locks the pointer to its current position and makes it invisible. Use movedX and movedY to get the difference the mouse was moved since the last call of draw. Note that not all browsers support this feature. This enables you to create experiences that aren't limited by the mouse moving out of the screen even if it is repeatedly moved into one direction. For example, a first person perspective experience. -exitPointerLock__description__0 = The function exitPointerLock() exits a previously triggered pointer Lock for example to make ui elements usable etc -touches__description__0 = The system variable touches[] contains an array of the positions of all current touch points, relative to (0, 0) of the canvas, and IDs identifying a unique touch as it moves. Each element in the array is an object with x, y, and id properties. -touches__description__1 = The touches[] array is not supported on Safari and IE on touch-based desktops (laptops). -touchStarted__description__0 = The touchStarted() function is called once after every time a touch is registered. If no touchStarted() function is defined, the mousePressed() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add "return false" to the end of the method. -touchStarted__params__event = Object: (Optional) optional TouchEvent callback argument. -touchMoved__description__0 = The touchMoved() function is called every time a touch move is registered. If no touchMoved() function is defined, the mouseDragged() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add "return false" to the end of the method. -touchMoved__params__event = Object: (Optional) optional TouchEvent callback argument. -touchEnded__description__0 = The touchEnded() function is called every time a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add "return false" to the end of the method. -touchEnded__params__event = Object: (Optional) optional TouchEvent callback argument. -createImage__description__0 = Creates a new p5.Image (the datatype for storing images). This provides a fresh buffer of pixels to play with. Set the size of the buffer with the width and height parameters. -createImage__description__1 = .pixels gives access to an array containing the values for all the pixels in the display window. These values are numbers. This array is the size (including an appropriate factor for the pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. See .pixels for more info. It may also be simpler to use set() or get(). -createImage__description__2 = Before accessing the pixels of an image, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes. -createImage__returns = p5.Image: the p5.Image object -createImage__params__width = Integer: width in pixels -createImage__params__height = Integer: height in pixels -saveCanvas__description__0 = Save the current canvas as an image. The browser will either save the file immediately, or prompt the user with a dialogue window. -saveCanvas__params__selectedCanvas = p5.Element|HTMLCanvasElement: a variable representing a specific html5 canvas (optional) -saveCanvas__params__filename = String (Optional) -saveCanvas__params__extension = String: (Optional) 'jpg' or 'png' -saveFrames__description__0 = Capture a sequence of frames that can be used to create a movie. Accepts a callback. For example, you may wish to send the frames to a server where they can be stored or converted into a movie. If no callback is provided, the browser will pop up save dialogues in an attempt to download all of the images that have just been created. With the callback provided the image data isn't saved by default but instead passed as an argument to the callback function as an array of objects, with the size of array equal to the total number of frames. -saveFrames__description__1 = Note that saveFrames() will only save the first 15 frames of an animation. To export longer animations, you might look into a library like ccapture.js. -saveFrames__params__filename = String -saveFrames__params__extension = String: 'jpg' or 'png' -saveFrames__params__duration = Number: Duration in seconds to save the frames for. -saveFrames__params__framerate = Number: Framerate to save the frames in. -saveFrames__params__callback = Function(Array): (Optional) A callback function that will be executed to handle the image data. This function should accept an array as argument. The array will contain the specified number of frames of objects. Each object has three properties: imageData - an image/octet-stream, filename and extension. -loadImage__description__0 = Loads an image from a path and creates a p5.Image from it. -loadImage__description__1 = The image may not be immediately available for rendering. If you want to ensure that the image is ready before doing anything with it, place the loadImage() call in preload(). You may also supply a callback function to handle the image when it's ready. -loadImage__description__2 = The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security. -loadImage__description__3 = You can also pass in a string of a base64 encoded image as an alternative to the file path. Remember to add "data:image/png;base64," in front of the string. -loadImage__returns = p5.Image: the p5.Image object -loadImage__params__path = String: Path of the image to be loaded -loadImage__params__successCallback = function(p5.Image): (Optional) Function to be called once the image is loaded. Will be passed the p5.Image. -loadImage__params__failureCallback = Function(Event): (Optional) called with event error if the image fails to load. -image__description__0 = Draw an image to the p5.js canvas. -image__description__1 = This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image. -image__description__2 = This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. Here's a diagram to explain further: -image__params__img = p5.Image|p5.Element|p5.Texture: the image to display -image__params__x = Number: the x-coordinate of the top-left corner of the image -image__params__y = Number: the y-coordinate of the top-left corner of the image -image__params__width = Number: (Optional) the width to draw the image -image__params__height = Number: (Optional) the height to draw the image -image__params__dx = Number: the x-coordinate of the destination rectangle in which to draw the source image -image__params__dy = Number: the y-coordinate of the destination rectangle in which to draw the source image -image__params__dWidth = Number: the width of the destination rectangle -image__params__dHeight = Number: the height of the destination rectangle -image__params__sx = Number: the x-coordinate of the subsection of the source image to draw into the destination rectangle -image__params__sy = Number: the y-coordinate of the subsection of the source image to draw into the destination rectangle -image__params__sWidth = Number: (Optional) the width of the subsection of the source image to draw into the destination rectangle -image__params__sHeight = Number: (Optional) the height of the subsection of the source image to draw into the destination rectangle -tint__description__0 = Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value. -tint__description__1 = To apply transparency to an image without affecting its color, use white as the tint color and specify an alpha value. For instance, tint(255, 128) will make an image 50% transparent (assuming the default alpha range of 0-255, which can be changed with colorMode()). -tint__description__2 = The value for the gray parameter must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255. -tint__params__v1 = Number: red or hue value relative to the current color range -tint__params__v2 = Number: green or saturation value relative to the current color range -tint__params__v3 = Number: blue or brightness value relative to the current color range -tint__params__alpha = Number (Optional) -tint__params__value = String: a color string -tint__params__gray = Number: a gray value -tint__params__values = Number[]: an array containing the red,green,blue & and alpha components of the color -tint__params__color = p5.Color: the tint color -noTint__description__0 = Removes the current fill value for displaying images and reverts to displaying images with their original hues. -imageMode__description__0 = Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height. -imageMode__description__1 = imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner. -imageMode__description__2 = imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height. -imageMode__params__mode = Constant: either CORNER, CORNERS, or CENTER -pixels__description__0 = Uint8ClampedArray containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays will have more pixels[] (by a factor of pixelDensity^2). For example, if the image is 100×100 pixels, there will be 40,000. On a retina display, there will be 160,000. -pixels__description__1 = The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): 
    let d = pixelDensity(); for (let i = 0; i < d; i++) {"{"}  for (let j = 0; j < d; j++) {"{"}  // loop over  index = 4 * ((y * d + j) * width * d + (x * d + i));  pixels[index] = r;  pixels[index+1] = g;  pixels[index+2] = b;  pixels[index+3] = a;  {"}"} {"}"}
    -pixels__description__2 = While the above method is complex, it is flexible enough to work with any pixelDensity. Note that set() will automatically take care of setting all the appropriate values in pixels[] for a given (x, y) at any pixelDensity, but the performance may not be as fast when lots of modifications are made to the pixel array. -pixels__description__3 = Before accessing this array, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes. -pixels__description__4 = Note that this is not a standard javascript array. This means that standard javascript functions such as slice() or arrayCopy() do not work. -blend__description__0 = Copies a region of pixels from one image to another, using a specified blend mode to do the operation. -blend__params__srcImage = p5.Image: source image -blend__params__sx = Integer: X coordinate of the source's upper left corner -blend__params__sy = Integer: Y coordinate of the source's upper left corner -blend__params__sw = Integer: source image width -blend__params__sh = Integer: source image height -blend__params__dx = Integer: X coordinate of the destination's upper left corner -blend__params__dy = Integer: Y coordinate of the destination's upper left corner -blend__params__dw = Integer: destination image width -blend__params__dh = Integer: destination image height -blend__params__blendMode = Constant: the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL. -copy__description__0 = Copies a region of the canvas to another region of the canvas and copies a region of pixels from an image used as the srcImg parameter into the canvas srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region. -copy__params__srcImage = p5.Image|p5.Element: source image -copy__params__sx = Integer: X coordinate of the source's upper left corner -copy__params__sy = Integer: Y coordinate of the source's upper left corner -copy__params__sw = Integer: source image width -copy__params__sh = Integer: source image height -copy__params__dx = Integer: X coordinate of the destination's upper left corner -copy__params__dy = Integer: Y coordinate of the destination's upper left corner -copy__params__dw = Integer: destination image width -copy__params__dh = Integer: destination image height -filter__description__0 = Applies a filter to the canvas. The presets options are: -filter__description__1 = THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used. -filter__description__2 = GRAY Converts any colors in the image to grayscale equivalents. No parameter is used. -filter__description__3 = OPAQUE Sets the alpha channel to entirely opaque. No parameter is used. -filter__description__4 = INVERT Sets each pixel to its inverse value. No parameter is used. -filter__description__5 = POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges. -filter__description__6 = BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur. -filter__description__7 = ERODE Reduces the light areas. No parameter is used. -filter__description__8 = DILATE Increases the light areas. No parameter is used. -filter__description__9 = filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples. -filter__params__filterType = Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter -filter__params__filterParam = Number: (Optional) an optional parameter unique to each filter, see above -get__description__0 = Get a region of pixels, or a single pixel, from the canvas. -get__description__1 = Returns an array of [R,G,B,A] values for any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a section of the display window by specifying additional w and h parameters. When getting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode(). -get__description__2 = Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from pixels[]. The equivalent statement to get(x, y) using pixels[] with pixel density d is 
    let x, y, d; // set these to the coordinates let off = (y * width + x) * d * 4; let components = [  pixels[off],  pixels[off + 1],  pixels[off + 2],  pixels[off + 3] ]; print(components);
    -get__description__3 = See the reference for pixels[] for more information. -get__description__4 = If you want to extract an array of colors or a subimage from an p5.Image object, take a look at p5.Image.get() -get__returns = p5.Image: the rectangle p5.Image -get__params__x = Number: x-coordinate of the pixel -get__params__y = Number: y-coordinate of the pixel -get__params__w = Number: width -get__params__h = Number: height -loadPixels__description__0 = Loads the pixel data for the display window into the pixels[] array. This function must always be called before reading from or writing to pixels[]. Note that only changes made with set() or direct manipulation of pixels[] will occur. -set__description__0 = Changes the color of any pixel, or writes an image directly to the display window. The x and y parameters specify the pixel to change and the c parameter specifies the color value. This can be a p5.Color object, or [R, G, B, A] pixel array. It can also be a single grayscale value. When setting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode(). -set__description__1 = After using set(), you must call updatePixels() for your changes to appear. This should be called once all pixels have been set, and must be called before calling .get() or drawing the image. -set__description__2 = Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[]. Setting the pixels[] values directly may be complicated when working with a retina display, but will perform better when lots of pixels need to be set directly on every loop. See the reference for pixels[] for more information. -set__params__x = Number: x-coordinate of the pixel -set__params__y = Number: y-coordinate of the pixel -set__params__c = Number|Number[]|Object: insert a grayscale value | a pixel array | a p5.Color object | a p5.Image to copy -updatePixels__description__0 = Updates the display window with the data in the pixels[] array. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels() — updating is only necessary to apply changes. updatePixels() should be called anytime the pixels array is manipulated or set() is called, and only changes made with set() or direct changes to pixels[] will occur. -updatePixels__params__x = Number: (Optional) x-coordinate of the upper-left corner of region to update -updatePixels__params__y = Number: (Optional) y-coordinate of the upper-left corner of region to update -updatePixels__params__w = Number: (Optional) width of region to update -updatePixels__params__h = Number: (Optional) height of region to update -loadJSON__description__0 = Loads a JSON file from a file or a URL, and returns an Object. Note that even if the JSON file contains an Array, an Object will be returned with index numbers as keys. -loadJSON__description__1 = This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. JSONP is supported via a polyfill and you can pass in as the second argument an object with definitions of the json callback following the syntax specified here. -loadJSON__description__2 = This method is suitable for fetching files up to size of 64MB. -loadJSON__returns = Object|Array: JSON data -loadJSON__params__path = String: name of the file or url to load -loadJSON__params__jsonpOptions = Object: (Optional) options object for jsonp related settings -loadJSON__params__datatype = String: (Optional) "json" or "jsonp" -loadJSON__params__callback = Function: (Optional) function to be executed after loadJSON() completes, data is passed in as first argument -loadJSON__params__errorCallback = Function: (Optional) function to be executed if there is an error, response is passed in as first argument -loadStrings__description__0 = Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder. -loadStrings__description__1 = Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network. -loadStrings__description__2 = This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. -loadStrings__description__3 = This method is suitable for fetching files up to size of 64MB. -loadStrings__returns = String[]: Array of Strings -loadStrings__params__filename = String: name of the file or url to load -loadStrings__params__callback = Function: (Optional) function to be executed after loadStrings() completes, Array is passed in as first argument -loadStrings__params__errorCallback = Function: (Optional) function to be executed if there is an error, response is passed in as first argument -loadTable__description__0 = Reads the contents of a file or URL and creates a p5.Table object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a file found online. By default, the file is assumed to be comma-separated (in CSV format). Table only looks for a header row if the 'header' option is included. -loadTable__description__1 = This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadTable() inside preload() guarantees to complete the operation before setup() and draw() are called. Outside of preload(), you may supply a callback function to handle the object: -loadTable__description__2 = All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB. -loadTable__returns = Object: Table object containing data -loadTable__params__filename = String: name of the file or URL to load -loadTable__params__extension = String: (Optional) parse the table by comma-separated values "csv", semicolon-separated values "ssv", or tab-separated values "tsv" -loadTable__params__header = String: (Optional) "header" to indicate table has header row -loadTable__params__callback = Function: (Optional) function to be executed after loadTable() completes. On success, the Table object is passed in as the first argument. -loadTable__params__errorCallback = Function: (Optional) function to be executed if there is an error, response is passed in as first argument -loadXML__description__0 = Reads the contents of a file and creates an XML object with its values. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder. -loadXML__description__1 = Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network. -loadXML__description__2 = This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadXML() inside preload() guarantees to complete the operation before setup() and draw() are called. -loadXML__description__3 = Outside of preload(), you may supply a callback function to handle the object. -loadXML__description__4 = This method is suitable for fetching files up to size of 64MB. -loadXML__returns = Object: XML object containing data -loadXML__params__filename = String: name of the file or URL to load -loadXML__params__callback = Function: (Optional) function to be executed after loadXML() completes, XML object is passed in as first argument -loadXML__params__errorCallback = Function: (Optional) function to be executed if there is an error, response is passed in as first argument -loadBytes__description__0 = This method is suitable for fetching files up to size of 64MB. -loadBytes__returns = Object: an object whose 'bytes' property will be the loaded buffer -loadBytes__params__file = String: name of the file or URL to load -loadBytes__params__callback = Function: (Optional) function to be executed after loadBytes() completes -loadBytes__params__errorCallback = Function: (Optional) function to be executed if there is an error -httpGet__description__0 = Method for executing an HTTP GET request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. This is equivalent to calling httpDo(path, 'GET'). 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). -httpGet__returns = Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs. -httpGet__params__path = String: name of the file or url to load -httpGet__params__datatype = String: (Optional) "json", "jsonp", "binary", "arrayBuffer", "xml", or "text" -httpGet__params__data = Object|Boolean: (Optional) param data passed sent with request -httpGet__params__callback = Function: (Optional) function to be executed after httpGet() completes, data is passed in as first argument -httpGet__params__errorCallback = Function: (Optional) function to be executed if there is an error, response is passed in as first argument -httpPost__description__0 = 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 httpDo(path, 'POST'). -httpPost__returns = Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs. -httpPost__params__path = String: name of the file or url to load -httpPost__params__datatype = String: (Optional) "json", "jsonp", "xml", or "text". If omitted, httpPost() will guess. -httpPost__params__data = Object|Boolean: (Optional) param data passed sent with request -httpPost__params__callback = Function: (Optional) function to be executed after httpPost() completes, data is passed in as first argument -httpPost__params__errorCallback = Function: (Optional) function to be executed if there is an error, response is passed in as first argument -httpDo__description__0 = Method for executing an HTTP request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. For more advanced use, you may also pass in the path as the first argument and a object as the second argument, the signature follows the one specified in the Fetch API specification. This method is suitable for fetching files up to size of 64MB when "GET" is used. -httpDo__returns = Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs. -httpDo__params__path = String: name of the file or url to load -httpDo__params__method = String: (Optional) either "GET", "POST", or "PUT", defaults to "GET" -httpDo__params__datatype = String: (Optional) "json", "jsonp", "xml", or "text" -httpDo__params__data = Object: (Optional) param data passed sent with request -httpDo__params__callback = Function: (Optional) function to be executed after httpGet() completes, data is passed in as first argument -httpDo__params__errorCallback = Function: (Optional) function to be executed if there is an error, response is passed in as first argument -httpDo__params__options = Object: Request object options as documented in the "fetch" API reference -createWriter__returns = p5.PrintWriter: -createWriter__params__name = String: name of the file to be created -createWriter__params__extension = String (Optional) -save__description__0 = Saves a given element(image, text, json, csv, wav, or html) to the client's computer. The first parameter can be a pointer to element we want to save. The element can be one of p5.Element,an Array of Strings, an Array of JSON, a JSON object, a p5.Table , a p5.Image, or a p5.SoundFile (requires p5.sound). The second parameter is a filename (including extension).The third parameter is for options specific to this type of object. This method will save a file that fits the given parameters. If it is called without specifying an element, by default it will save the whole canvas as an image file. You can optionally specify a filename as the first parameter in such a case. Note that it is not recommended to call this method within draw, as it will open a new save dialog on every render. -save__params__objectOrFilename = Object|String: (Optional) If filename is provided, will save canvas as an image with either png or jpg extension depending on the filename. If object is provided, will save depending on the object and filename (see examples above). -save__params__filename = String: (Optional) If an object is provided as the first parameter, then the second parameter indicates the filename, and should include an appropriate file extension (see examples above). -save__params__options = Boolean|String: (Optional) Additional options depend on filetype. For example, when saving JSON, true indicates that the output will be optimized for filesize, rather than readability. -saveJSON__description__0 = Writes the contents of an Array or a JSON object to a .json file. The file saving process and location of the saved file will vary between web browsers. -saveJSON__params__json = Array|Object -saveJSON__params__filename = String -saveJSON__params__optimize = Boolean: (Optional) If true, removes line breaks and spaces from the output file to optimize filesize (but not readability). -saveStrings__description__0 = Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers. -saveStrings__params__list = String[]: string array to be written -saveStrings__params__filename = String: filename for output -saveStrings__params__extension = String: (Optional) the filename's extension -saveStrings__params__isCRLF = Boolean: (Optional) if true, change line-break to CRLF -saveTable__description__0 = Writes the contents of a Table object to a file. Defaults to a text file with comma-separated-values ('csv') but can also use tab separation ('tsv'), or generate an HTML table ('html'). The file saving process and location of the saved file will vary between web browsers. -saveTable__params__Table = p5.Table: the Table object to save to a file -saveTable__params__filename = String: the filename to which the Table should be saved -saveTable__params__options = String: (Optional) can be one of "tsv", "csv", or "html" -abs__description__0 = Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive. -abs__returns = Number: absolute value of given number -abs__params__n = Number: number to compute -ceil__description__0 = Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10. -ceil__returns = Integer: rounded up number -ceil__params__n = Number: number to round up -constrain__description__0 = Constrains a value between a minimum and maximum value. -constrain__returns = Number: constrained number -constrain__params__n = Number: number to constrain -constrain__params__low = Number: minimum limit -constrain__params__high = Number: maximum limit -dist__description__0 = Calculates the distance between two points, in either two or three dimensions. If you looking for distance between two vectors see dist() -dist__returns = Number: distance between the two points -dist__params__x1 = Number: x-coordinate of the first point -dist__params__y1 = Number: y-coordinate of the first point -dist__params__x2 = Number: x-coordinate of the second point -dist__params__y2 = Number: y-coordinate of the second point -dist__params__z1 = Number: z-coordinate of the first point -dist__params__z2 = Number: z-coordinate of the second point -exp__description__0 = Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp(). -exp__returns = Number: e^n -exp__params__n = Number: exponent to raise -floor__description__0 = Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor(). -floor__returns = Integer: rounded down number -floor__params__n = Number: number to round down -lerp__description__0 = Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. -lerp__returns = Number: lerped value -lerp__params__start = Number: first value -lerp__params__stop = Number: second value -lerp__params__amt = Number: number -log__description__0 = Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log(). -log__returns = Number: natural logarithm of n -log__params__n = Number: number greater than 0 -mag__description__0 = Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y). -mag__returns = Number: magnitude of vector from (0,0) to (a,b) -mag__params__a = Number: first value -mag__params__b = Number: second value -map__description__0 = Re-maps a number from one range to another. -map__description__1 = In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -map__returns = Number: remapped number -map__params__value = Number: the incoming value to be converted -map__params__start1 = Number: lower bound of the value's current range -map__params__stop1 = Number: upper bound of the value's current range -map__params__start2 = Number: lower bound of the value's target range -map__params__stop2 = Number: upper bound of the value's target range -map__params__withinBounds = Boolean: (Optional) constrain the value to the newly mapped range -max__description__0 = Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length. -max__returns = Number: maximum Number -max__params__n0 = Number: Number to compare -max__params__n1 = Number: Number to compare -max__params__nums = Number[]: Numbers to compare -min__description__0 = Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length. -min__returns = Number: minimum Number -min__params__n0 = Number: Number to compare -min__params__n1 = Number: Number to compare -min__params__nums = Number[]: Numbers to compare -norm__description__0 = Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the example above.) -norm__returns = Number: normalized number -norm__params__value = Number: incoming value to be normalized -norm__params__start = Number: lower bound of the value's current range -norm__params__stop = Number: upper bound of the value's current range -pow__description__0 = Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 / 3 × 3 × 3 × 3 × 3. Maps to Math.pow(). -pow__returns = Number: n^e -pow__params__n = Number: base of the exponential expression -pow__params__e = Number: power by which to raise the base -round__description__0 = Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round(). -round__returns = Integer: rounded number -round__params__n = Number: number to round -round__params__decimals = Number: (Optional) number of decimal places to round to, default is 0 -sq__description__0 = Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. -sq__returns = Number: squared number -sq__params__n = Number: number to square -sqrt__description__0 = Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt(). -sqrt__returns = Number: square root of number -sqrt__params__n = Number: non-negative number to square root -fract__description__0 = Calculates the fractional part of a number. -fract__returns = Number: fractional part of x, i.e, {"{"}x{"}"} -fract__params__num = Number: Number whose fractional part needs to be found out -createVector__description__0 = Creates a new p5.Vector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. -createVector__returns = p5.Vector: -createVector__params__x = Number: (Optional) x component of the vector -createVector__params__y = Number: (Optional) y component of the vector -createVector__params__z = Number: (Optional) z component of the vector -noise__description__0 = Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more naturally ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

    The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

    The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

    Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. -noise__returns = Number: Perlin noise value (between 0 and 1) at specified coordinates -noise__params__x = Number: x-coordinate in noise space -noise__params__y = Number: (Optional) y-coordinate in noise space -noise__params__z = Number: (Optional) z-coordinate in noise space -noiseDetail__description__0 = Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence. By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise(). By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. -noiseDetail__params__lod = Number: number of octaves to be used by the noise -noiseDetail__params__falloff = Number: falloff factor for each octave -noiseSeed__description__0 = Sets the seed value for noise(). By default, noise() produces different results each time the program is run. Set the value parameter to a constant to return the same pseudo-random numbers each time the software is run. -noiseSeed__params__seed = Number: the seed value -randomSeed__description__0 = Sets the seed value for random(). -randomSeed__description__1 = By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -randomSeed__params__seed = Number: the seed value -random__description__0 = Return a random floating-point number. -random__description__1 = Takes either 0, 1 or 2 arguments. -random__description__2 = If no argument is given, returns a random number from 0 up to (but not including) 1. -random__description__3 = If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. -random__description__4 = If one argument is given and it is an array, returns a random element from that array. -random__description__5 = If two arguments are given, returns a random number from the first argument up to (but not including) the second argument. -random__returns = Number: the random number -random__params__min = Number: (Optional) the lower bound (inclusive) -random__params__max = Number: (Optional) the upper bound (exclusive) -random__params__choices = Array: the array to choose from -randomGaussian__description__0 = Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned. Takes either 0, 1 or 2 arguments. If no args, returns a mean of 0 and standard deviation of 1. If one arg, that arg is the mean (standard deviation is 1). If two args, first is mean, second is standard deviation. -randomGaussian__returns = Number: the random number -randomGaussian__params__mean = Number: (Optional) the mean -randomGaussian__params__sd = Number: (Optional) the standard deviation -acos__description__0 = The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the angle mode is DEGREES. -acos__returns = Number: the arc cosine of the given value -acos__params__value = Number: the value whose arc cosine is to be returned -asin__description__0 = The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES. -asin__returns = Number: the arc sine of the given value -asin__params__value = Number: the value whose arc sine is to be returned -atan__description__0 = The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES. -atan__returns = Number: the arc tangent of the given value -atan__params__value = Number: the value whose arc tangent is to be returned -atan2__description__0 = Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI if the angleMode is RADIANS or 180 to -180 if the angleMode is DEGREES. The atan2() function is most often used for orienting geometry to the position of the cursor. -atan2__description__1 = Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -atan2__returns = Number: the arc tangent of the given point -atan2__params__y = Number: y-coordinate of the point -atan2__params__x = Number: x-coordinate of the point -cos__description__0 = Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -cos__returns = Number: the cosine of the angle -cos__params__angle = Number: the angle -sin__description__0 = Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. -sin__returns = Number: the sine of the angle -sin__params__angle = Number: the angle -tan__description__0 = Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range of all real numbers. -tan__returns = Number: the tangent of the angle -tan__params__angle = Number: the angle -degrees__description__0 = Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -degrees__returns = Number: the converted angle -degrees__params__radians = Number: the radians value to convert to degrees -radians__description__0 = Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode. -radians__returns = Number: the converted angle -radians__params__degrees = Number: the degree value to convert to radians -angleMode__description__0 = Sets the current mode of p5 to given mode. Default mode is RADIANS. -angleMode__params__mode = Constant: either RADIANS or DEGREES -textAlign__description__0 = Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). -textAlign__description__1 = The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. -textAlign__description__2 = So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -textAlign__params__horizAlign = Constant: horizontal alignment, either LEFT, CENTER, or RIGHT -textAlign__params__vertAlign = Constant: (Optional) vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE -textLeading__description__0 = Sets/gets the spacing, in pixels, between lines of text. This setting will be used in all subsequent calls to the text() function. -textLeading__params__leading = Number: the size in pixels for spacing between lines -textSize__description__0 = Sets/gets the current font size. This size will be used in all subsequent calls to the text() function. Font size is measured in pixels. -textSize__params__theSize = Number: the size of the letters in units of pixels -textStyle__description__0 = Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this may be is overridden by CSS styling. For non-system fonts (opentype, truetype, etc.) please load styled fonts instead. -textStyle__params__theStyle = Constant: styling for text, either NORMAL, ITALIC, BOLD or BOLDITALIC -textWidth__description__0 = Calculates and returns the width of any character or text string. -textWidth__returns = Number: the calculated width -textWidth__params__theText = String: the String of characters to measure -textAscent__description__0 = Returns the ascent of the current font at its current size. The ascent represents the distance, in pixels, of the tallest character above the baseline. -textAscent__returns = Number: -textDescent__description__0 = Returns the descent of the current font at its current size. The descent represents the distance, in pixels, of the character with the longest descender below the baseline. -textDescent__returns = Number: -textWrap__description__0 = Specifies how lines of text are wrapped within a text box. This requires a max-width set on the text area, specified in text() as parameter x2. -textWrap__description__1 = WORD wrap style only breaks lines at spaces. A single string without spaces that exceeds the boundaries of the canvas or text area is not truncated, and will overflow the desired area, disappearing at the canvas edge. -textWrap__description__2 = CHAR wrap style breaks lines wherever needed to stay within the text box. -textWrap__description__3 = WORD is the default wrap style, and both styles will still break lines at any line breaks (\n) specified in the original text. The text area max-height parameter (y2) also still applies to wrapped text in both styles, lines of text that do not fit within the text area will not be drawn to the screen. -textWrap__returns = String: wrapStyle -textWrap__params__wrapStyle = Constant: text wrapping style, either WORD or CHAR -loadFont__description__0 = Loads an opentype font file (.otf, .ttf) from a file or a URL, and returns a PFont Object. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. -loadFont__description__1 = The path to the font should be relative to the HTML file that links in your sketch. Loading fonts from a URL or other remote location may be blocked due to your browser's built-in security. -loadFont__returns = p5.Font: p5.Font object -loadFont__params__path = String: name of the file or url to load -loadFont__params__callback = Function: (Optional) function to be executed after loadFont() completes -loadFont__params__onError = Function: (Optional) function to be executed if an error occurs -text__description__0 = Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions. -text__description__1 = The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates. -text__description__2 = The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y. -text__description__3 = WEBGL: Only opentype/truetype fonts are supported. You must load a font using the loadFont() method (see the example above). stroke() currently has no effect in webgl mode. Learn more about working with text in webgl mode on the wiki. -text__params__str = String|Object|Array|Number|Boolean: the alphanumeric symbols to be displayed -text__params__x = Number: x-coordinate of text -text__params__y = Number: y-coordinate of text -text__params__x2 = Number: (Optional) by default, the width of the text box, see rectMode() for more info -text__params__y2 = Number: (Optional) by default, the height of the text box, see rectMode() for more info -textFont__description__0 = Sets the current font that will be drawn with the text() function. If textFont() is called without any argument, it will return the current font if one has been set already. If not, it will return the name of the default font as a string. If textFont() is called with a font to use, it will return the p5 object. -textFont__description__1 = WEBGL: Only fonts loaded via loadFont() are supported. -textFont__returns = Object: the current font / p5 Object -textFont__params__font = Object|String: a font loaded via loadFont(), or a String representing a web safe font (a font that is generally available across all systems) -textFont__params__size = Number: (Optional) the font size to use -append__description__0 = Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push(). -append__returns = Array: the array that was appended to -append__params__array = Array: Array to append -append__params__value = Any: to be added to the Array -arrayCopy__description__0 = 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 concat(). -arrayCopy__description__1 = 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). -arrayCopy__description__2 = Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. -arrayCopy__params__src = Array: the source Array -arrayCopy__params__srcPosition = Integer: starting position in the source Array -arrayCopy__params__dst = Array: the destination Array -arrayCopy__params__dstPosition = Integer: starting position in the destination Array -arrayCopy__params__length = Integer: number of Array elements to be copied -concat__description__0 = Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays. -concat__returns = Array: concatenated array -concat__params__a = Array: first Array to concatenate -concat__params__b = Array: second Array to concatenate -reverse__description__0 = Reverses the order of an array, maps to Array.reverse() -reverse__returns = Array: the reversed list -reverse__params__list = Array: Array to reverse -shorten__description__0 = Decreases an array by one element and returns the shortened array, maps to Array.pop(). -shorten__returns = Array: shortened Array -shorten__params__list = Array: Array to shorten -shuffle__description__0 = Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm. -shuffle__returns = Array: shuffled Array -shuffle__params__array = Array: Array to shuffle -shuffle__params__bool = Boolean: (Optional) modify passed array -sort__description__0 = Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted. -sort__returns = Array: the sorted list -sort__params__list = Array: Array to sort -sort__params__count = Integer: (Optional) number of elements to sort, starting from 0 -splice__description__0 = Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.) -splice__returns = Array: the list -splice__params__list = Array: Array to splice into -splice__params__value = Any: value to be spliced in -splice__params__position = Integer: in the array from which to insert data -subset__description__0 = Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array. -subset__returns = Array: Array of extracted elements -subset__params__list = Array: Array to extract from -subset__params__start = Integer: position to begin -subset__params__count = Integer: (Optional) number of values to extract -float__description__0 = Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN. -float__description__1 = When an array of values is passed in, then an array of floats of the same length is returned. -float__returns = Number: floating point representation of string -float__params__str = String: float string to parse -int__description__0 = Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned. -int__returns = Number: integer representation of value -int__params__n = String|Boolean|Number: value to parse -int__params__radix = Integer: (Optional) the radix to convert to (default: 10) -int__params__ns = Array: values to parse -str__description__0 = Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned. -str__returns = String: string representation of value -str__params__n = String|Boolean|Number|Array: value to parse -byte__description__0 = Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned. -byte__returns = Number: byte representation of value -byte__params__n = String|Boolean|Number: value to parse -byte__params__ns = Array: values to parse -char__description__0 = Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned. -char__returns = String: string representation of value -char__params__n = String|Number: value to parse -char__params__ns = Array: values to parse -unchar__description__0 = Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned. -unchar__returns = Number: integer representation of value -unchar__params__n = String: value to parse -unchar__params__ns = Array: values to parse -hex__description__0 = Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned. -hex__returns = String: hexadecimal string representation of value -hex__params__n = Number: value to parse -hex__params__digits = Number (Optional) -hex__params__ns = Number[]: array of values to parse -unhex__description__0 = Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned. -unhex__returns = Number: integer representation of hexadecimal value -unhex__params__n = String: value to parse -unhex__params__ns = Array: values to parse -join__description__0 = Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs(). -join__returns = String: joined String -join__params__list = Array: array of Strings to be joined -join__params__separator = String: String to be placed between each item -match__description__0 = This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned. -match__description__1 = To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned. -match__description__2 = If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -match__returns = String[]: Array of Strings found -match__params__str = String: the String to be searched -match__params__regexp = String: the regexp to be used for matching -matchAll__description__0 = This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one. -matchAll__description__1 = To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned. -matchAll__description__2 = If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -matchAll__returns = String[]: 2d Array of Strings found -matchAll__params__str = String: the String to be searched -matchAll__params__regexp = String: the regexp to be used for matching -nf__description__0 = Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. -nf__description__1 = The values for the digits, left, and right parameters should always be positive integers. -nf__description__2 = (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. -nf__description__3 = For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -nf__returns = String: formatted String -nf__params__num = Number|String: the Number to format -nf__params__left = Integer|String: (Optional) number of digits to the left of the decimal point -nf__params__right = Integer|String: (Optional) number of digits to the right of the decimal point -nf__params__nums = Array: the Numbers to format -nfc__description__0 = Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer. -nfc__returns = String: formatted String -nfc__params__num = Number|String: the Number to format -nfc__params__right = Integer|String: (Optional) number of digits to the right of the decimal point -nfc__params__nums = Array: the Numbers to format -nfp__description__0 = Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers. -nfp__returns = String: formatted String -nfp__params__num = Number: the Number to format -nfp__params__left = Integer: (Optional) number of digits to the left of the decimal point -nfp__params__right = Integer: (Optional) number of digits to the right of the decimal point -nfp__params__nums = Number[]: the Numbers to format -nfs__description__0 = Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. -nfs__description__1 = The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. -nfs__description__2 = The values for the digits, left, and right parameters should always be positive integers. -nfs__description__3 = (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. -nfs__description__4 = (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. -nfs__description__5 = For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200. -nfs__returns = String: formatted String -nfs__params__num = Number: the Number to format -nfs__params__left = Integer: (Optional) number of digits to the left of the decimal point -nfs__params__right = Integer: (Optional) number of digits to the right of the decimal point -nfs__params__nums = Array: the Numbers to format -split__description__0 = The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. -split__description__1 = The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. -split__returns = String[]: Array of Strings -split__params__value = String: the String to be split -split__params__delim = String: the String used to separate the data -splitTokens__description__0 = The splitTokens() function splits a String at one or many character delimiters or "tokens." The delim parameter specifies the character or characters to be used as a boundary. -splitTokens__description__1 = If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. -splitTokens__returns = String[]: Array of Strings -splitTokens__params__value = String: the String to be split -splitTokens__params__delim = String: (Optional) list of individual Strings that will be used as separators -trim__description__0 = Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character. -trim__returns = String: a trimmed String -trim__params__str = String: a String to be trimmed -trim__params__strs = Array: an Array of Strings to be trimmed -day__description__0 = p5.js communicates with the clock on your computer. The day() function returns the current day as a value from 1 - 31. -day__returns = Integer: the current day -hour__description__0 = p5.js communicates with the clock on your computer. The hour() function returns the current hour as a value from 0 - 23. -hour__returns = Integer: the current hour -minute__description__0 = p5.js communicates with the clock on your computer. The minute() function returns the current minute as a value from 0 - 59. -minute__returns = Integer: the current minute -millis__description__0 = Returns the number of milliseconds (thousandths of a second) since starting the sketch (when setup() is called). This information is often used for timing events and animation sequences. -millis__returns = Number: the number of milliseconds since starting the sketch -month__description__0 = p5.js communicates with the clock on your computer. The month() function returns the current month as a value from 1 - 12. -month__returns = Integer: the current month -second__description__0 = p5.js communicates with the clock on your computer. The second() function returns the current second as a value from 0 - 59. -second__returns = Integer: the current second -year__description__0 = p5.js communicates with the clock on your computer. The year() function returns the current year as an integer (2014, 2015, 2016, etc). -year__returns = Integer: the current year -plane__description__0 = Draw a plane with given a width and height -plane__params__width = Number: (Optional) width of the plane -plane__params__height = Number: (Optional) height of the plane -plane__params__detailX = Integer: (Optional) Optional number of triangle subdivisions in x-dimension -plane__params__detailY = Integer: (Optional) Optional number of triangle subdivisions in y-dimension -box__description__0 = Draw a box with given width, height and depth -box__params__width = Number: (Optional) width of the box -box__params__Height = Number: (Optional) height of the box -box__params__depth = Number: (Optional) depth of the box -box__params__detailX = Integer: (Optional) Optional number of triangle subdivisions in x-dimension -box__params__detailY = Integer: (Optional) Optional number of triangle subdivisions in y-dimension -sphere__description__0 = Draw a sphere with given radius. -sphere__description__1 = DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a sphere. More subdivisions make the sphere seem smoother. The recommended maximum values are both 24. Using a value greater than 24 may cause a warning or slow down the browser. -sphere__params__radius = Number: (Optional) radius of circle -sphere__params__detailX = Integer: (Optional) optional number of subdivisions in x-dimension -sphere__params__detailY = Integer: (Optional) optional number of subdivisions in y-dimension -cylinder__description__0 = Draw a cylinder with given radius and height -cylinder__description__1 = DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser. -cylinder__params__radius = Number: (Optional) radius of the surface -cylinder__params__height = Number: (Optional) height of the cylinder -cylinder__params__detailX = Integer: (Optional) number of subdivisions in x-dimension; default is 24 -cylinder__params__detailY = Integer: (Optional) number of subdivisions in y-dimension; default is 1 -cylinder__params__bottomCap = Boolean: (Optional) whether to draw the bottom of the cylinder -cylinder__params__topCap = Boolean: (Optional) whether to draw the top of the cylinder -cone__description__0 = Draw a cone with given radius and height -cone__description__1 = DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the cone seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser. -cone__params__radius = Number: (Optional) radius of the bottom surface -cone__params__height = Number: (Optional) height of the cone -cone__params__detailX = Integer: (Optional) number of segments, the more segments the smoother geometry default is 24 -cone__params__detailY = Integer: (Optional) number of segments, the more segments the smoother geometry default is 1 -cone__params__cap = Boolean: (Optional) whether to draw the base of the cone -ellipsoid__description__0 = Draw an ellipsoid with given radius -ellipsoid__description__1 = DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother. Avoid detail number above 150, it may crash the browser. -ellipsoid__params__radiusx = Number: (Optional) x-radius of ellipsoid -ellipsoid__params__radiusy = Number: (Optional) y-radius of ellipsoid -ellipsoid__params__radiusz = Number: (Optional) z-radius of ellipsoid -ellipsoid__params__detailX = Integer: (Optional) number of segments, the more segments the smoother geometry default is 24. Avoid detail number above 150, it may crash the browser. -ellipsoid__params__detailY = Integer: (Optional) number of segments, the more segments the smoother geometry default is 16. Avoid detail number above 150, it may crash the browser. -torus__description__0 = Draw a torus with given radius and tube radius -torus__description__1 = DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a torus. More subdivisions make the torus appear to be smoother. The default and maximum values for detailX and detailY are 24 and 16, respectively. Setting them to relatively small values like 4 and 6 allows you to create new shapes other than a torus. -torus__params__radius = Number: (Optional) radius of the whole ring -torus__params__tubeRadius = Number: (Optional) radius of the tube -torus__params__detailX = Integer: (Optional) number of segments in x-dimension, the more segments the smoother geometry default is 24 -torus__params__detailY = Integer: (Optional) number of segments in y-dimension, the more segments the smoother geometry default is 16 -orbitControl__description__0 = Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking and dragging will rotate the camera position about the center of the sketch, right-clicking and dragging will pan the camera position without rotation, and using the mouse wheel (scrolling) will move the camera closer or further from the center of the sketch. This function can be called with parameters dictating sensitivity to mouse movement along the X and Y axes. Calling this function without parameters is equivalent to calling orbitControl(1,1). To reverse direction of movement in either axis, enter a negative number for sensitivity. -orbitControl__params__sensitivityX = Number: (Optional) sensitivity to mouse movement along X axis -orbitControl__params__sensitivityY = Number: (Optional) sensitivity to mouse movement along Y axis -orbitControl__params__sensitivityZ = Number: (Optional) sensitivity to scroll movement along Z axis -debugMode__description__0 = debugMode() helps visualize 3D space by adding a grid to indicate where the ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z directions. This function can be called without parameters to create a default grid and axes icon, or it can be called according to the examples above to customize the size and position of the grid and/or axes icon. The grid is drawn using the most recently set stroke color and weight. To specify these parameters, add a call to stroke() and strokeWeight() just before the end of the draw() loop. -debugMode__description__1 = By default, the grid will run through the origin (0,0,0) of the sketch along the XZ plane and the axes icon will be offset from the origin. Both the grid and axes icon will be sized according to the current canvas size. Note that because the grid runs parallel to the default camera view, it is often helpful to use debugMode along with orbitControl to allow full view of the grid. -debugMode__params__mode = Constant: either GRID or AXES -debugMode__params__gridSize = Number: (Optional) size of one side of the grid -debugMode__params__gridDivisions = Number: (Optional) number of divisions in the grid -debugMode__params__xOff = Number: (Optional) X axis offset from origin (0,0,0) -debugMode__params__yOff = Number: (Optional) Y axis offset from origin (0,0,0) -debugMode__params__zOff = Number: (Optional) Z axis offset from origin (0,0,0) -debugMode__params__axesSize = Number: (Optional) size of axes icon -debugMode__params__gridXOff = Number (Optional) -debugMode__params__gridYOff = Number (Optional) -debugMode__params__gridZOff = Number (Optional) -debugMode__params__axesXOff = Number (Optional) -debugMode__params__axesYOff = Number (Optional) -debugMode__params__axesZOff = Number (Optional) -noDebugMode__description__0 = Turns off debugMode() in a 3D sketch. -ambientLight__description__0 = Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas. It has no particular source. -ambientLight__params__v1 = Number: red or hue value relative to the current color range -ambientLight__params__v2 = Number: green or saturation value relative to the current color range -ambientLight__params__v3 = Number: blue or brightness value relative to the current color range -ambientLight__params__alpha = Number: (Optional) the alpha value -ambientLight__params__value = String: a color string -ambientLight__params__gray = Number: a gray value -ambientLight__params__values = Number[]: an array containing the red,green,blue & and alpha components of the color -ambientLight__params__color = p5.Color: the ambient light color -specularColor__description__0 = Set's the color of the specular highlight when using a specular material and specular light. -specularColor__description__1 = This method can be combined with specularMaterial() and shininess() functions to set specular highlights. The default color is white, ie (255, 255, 255), which is used if this method is not called before specularMaterial(). If this method is called without specularMaterial(), There will be no effect. -specularColor__description__2 = Note: specularColor is equivalent to the processing function lightSpecular. -specularColor__params__v1 = Number: red or hue value relative to the current color range -specularColor__params__v2 = Number: green or saturation value relative to the current color range -specularColor__params__v3 = Number: blue or brightness value relative to the current color range -specularColor__params__value = String: a color string -specularColor__params__gray = Number: a gray value -specularColor__params__values = Number[]: an array containing the red,green,blue & and alpha components of the color -specularColor__params__color = p5.Color: the ambient light color -directionalLight__description__0 = Creates a directional light with a color and a direction -directionalLight__description__1 = A maximum of 5 directionalLight can be active at one time -directionalLight__params__v1 = Number: red or hue value (depending on the current color mode), -directionalLight__params__v2 = Number: green or saturation value -directionalLight__params__v3 = Number: blue or brightness value -directionalLight__params__position = p5.Vector: the direction of the light -directionalLight__params__color = Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value -directionalLight__params__x = Number: x axis direction -directionalLight__params__y = Number: y axis direction -directionalLight__params__z = Number: z axis direction -pointLight__description__0 = Creates a point light with a color and a light position -pointLight__description__1 = A maximum of 5 pointLight can be active at one time -pointLight__params__v1 = Number: red or hue value (depending on the current color mode), -pointLight__params__v2 = Number: green or saturation value -pointLight__params__v3 = Number: blue or brightness value -pointLight__params__x = Number: x axis position -pointLight__params__y = Number: y axis position -pointLight__params__z = Number: z axis position -pointLight__params__position = p5.Vector: the position of the light -pointLight__params__color = Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value -lights__description__0 = Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1). Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop. -lightFalloff__description__0 = Sets the falloff rates for point lights. It affects only the elements which are created after it in the code. The default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation: -lightFalloff__description__1 = d = distance from light position to vertex position -lightFalloff__description__2 = falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC) -lightFalloff__params__constant = Number: constant value for determining falloff -lightFalloff__params__linear = Number: linear value for determining falloff -lightFalloff__params__quadratic = Number: quadratic value for determining falloff -spotLight__description__0 = Creates a spotlight with a given color, position, direction of light, angle and concentration. Here, angle refers to the opening or aperture of the cone of the spotlight, and concentration is used to focus the light towards the center. Both angle and concentration are optional, but if you want to provide concentration, you will also have to specify the angle. -spotLight__description__1 = A maximum of 5 spotLight can be active at one time -spotLight__params__v1 = Number: red or hue value (depending on the current color mode), -spotLight__params__v2 = Number: green or saturation value -spotLight__params__v3 = Number: blue or brightness value -spotLight__params__x = Number: x axis position -spotLight__params__y = Number: y axis position -spotLight__params__z = Number: z axis position -spotLight__params__rx = Number: x axis direction of light -spotLight__params__ry = Number: y axis direction of light -spotLight__params__rz = Number: z axis direction of light -spotLight__params__angle = Number: (Optional) optional parameter for angle. Defaults to PI/3 -spotLight__params__conc = Number: (Optional) optional parameter for concentration. Defaults to 100 -spotLight__params__color = Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value -spotLight__params__position = p5.Vector: the position of the light -spotLight__params__direction = p5.Vector: the direction of the light -noLights__description__0 = This function will remove all the lights from the sketch for the subsequent materials rendered. It affects all the subsequent methods. Calls to lighting methods made after noLights() will re-enable lights in the sketch. -loadModel__description__0 = Load a 3d model from an OBJ or STL file. -loadModel__description__1 = loadModel() should be placed inside of preload(). This allows the model to load fully before the rest of your code is run. -loadModel__description__2 = One of the limitations of the OBJ and STL format is that it doesn't have a built-in sense of scale. This means that models exported from different programs might be very different sizes. If your model isn't displaying, try calling loadModel() with the normalized parameter set to true. This will resize the model to a scale appropriate for p5. You can also make additional changes to the final size of your model with the scale() function. -loadModel__description__3 = Also, the support for colored STL files is not present. STL files with color will be rendered without color properties. -loadModel__returns = p5.Geometry: the p5.Geometry object -loadModel__params__path = String: Path of the model to be loaded -loadModel__params__normalize = Boolean: If true, scale the model to a standardized size when loading -loadModel__params__successCallback = function(p5.Geometry): (Optional) Function to be called once the model is loaded. Will be passed the 3D model object. -loadModel__params__failureCallback = Function(Event): (Optional) called with event error if the model fails to load. -loadModel__params__fileType = String: (Optional) The file extension of the model (.stl, .obj). -model__description__0 = Render a 3d model to the screen. -model__params__model = p5.Geometry: Loaded 3d model to be rendered -loadShader__description__0 = Creates a new p5.Shader object from the provided vertex and fragment shader files. -loadShader__description__1 = The shader files are loaded asynchronously in the background, so this method should be used in preload(). -loadShader__description__2 = Note, shaders can only be used in WEBGL mode. -loadShader__returns = p5.Shader: a shader object created from the provided vertex and fragment shader files. -loadShader__params__vertFilename = String: path to file containing vertex shader source code -loadShader__params__fragFilename = String: path to file containing fragment shader source code -loadShader__params__callback = Function: (Optional) callback to be executed after loadShader completes. On success, the p5.Shader object is passed as the first argument. -loadShader__params__errorCallback = Function: (Optional) callback to be executed when an error occurs inside loadShader. On error, the error is passed as the first argument. -createShader__description__0 = Creates a new p5.Shader object from the provided vertex and fragment shader code. -createShader__description__1 = Note, shaders can only be used in WEBGL mode. -createShader__returns = p5.Shader: a shader object created from the provided vertex and fragment shaders. -createShader__params__vertSrc = String: source code for the vertex shader -createShader__params__fragSrc = String: source code for the fragment shader -shader__description__0 = Sets the p5.Shader object to be used to render subsequent shapes. -shader__description__1 = Custom shaders can be created using the createShader() and loadShader() functions. -shader__description__2 = Use resetShader() to restore the default shaders. -shader__description__3 = Note, shaders can only be used in WEBGL mode. -shader__params__s = p5.Shader: the p5.Shader object to use for rendering shapes. -resetShader__description__0 = Restores the default shaders. Code that runs after resetShader() will not be affected by the shader previously set by shader() -texture__description__0 = Sets the texture that will be used to render subsequent shapes. -texture__description__1 = A texture is like a "skin" that wraps around a 3D geometry. Currently supported textures are images, video, and offscreen renders. -texture__description__2 = To texture a geometry created with beginShape(), you will need to specify uv coordinates in vertex(). -texture__description__3 = Note, texture() can only be used in WEBGL mode. -texture__description__4 = You can view more materials in this example. -texture__params__tex = p5.Image|p5.MediaElement|p5.Graphics|p5.Texture: image to use as texture -textureMode__description__0 = Sets the coordinate space for texture mapping. The default mode is IMAGE which refers to the actual coordinates of the image. NORMAL refers to a normalized space of values ranging from 0 to 1. -textureMode__description__1 = With IMAGE, if an image is 100×200 pixels, mapping the image onto the entire size of a quad would require the points (0,0) (100, 0) (100,200) (0,200). The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1). -textureMode__params__mode = Constant: either IMAGE or NORMAL -textureWrap__description__0 = Sets the global texture wrapping mode. This controls how textures behave when their uv's go outside of the 0 to 1 range. There are three options: CLAMP, REPEAT, and MIRROR. -textureWrap__description__1 = CLAMP causes the pixels at the edge of the texture to extend to the bounds. REPEAT causes the texture to tile repeatedly until reaching the bounds. MIRROR works similarly to REPEAT but it flips the texture with every new tile. -textureWrap__description__2 = REPEAT & MIRROR are only available if the texture is a power of two size (128, 256, 512, 1024, etc.). -textureWrap__description__3 = This method will affect all textures in your sketch until a subsequent textureWrap() call is made. -textureWrap__description__4 = If only one argument is provided, it will be applied to both the horizontal and vertical axes. -textureWrap__params__wrapX = Constant: either CLAMP, REPEAT, or MIRROR -textureWrap__params__wrapY = Constant: (Optional) either CLAMP, REPEAT, or MIRROR -normalMaterial__description__0 = Normal material for geometry is a material that is not affected by light. It is not reflective and is a placeholder material often used for debugging. Surfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue. You can view all possible materials in this example. -ambientMaterial__description__0 = Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting. For example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. Here's an example containing all possible materials. -ambientMaterial__params__v1 = Number: gray value, red or hue value (depending on the current color mode), -ambientMaterial__params__v2 = Number: (Optional) green or saturation value -ambientMaterial__params__v3 = Number: (Optional) blue or brightness value -ambientMaterial__params__color = Number[]|String|p5.Color: color, color Array, or CSS color string -emissiveMaterial__description__0 = Sets the emissive color of the material used for geometry drawn to the screen. This is a misnomer in the sense that the material does not actually emit light that effects surrounding polygons. Instead, it gives the appearance that the object is glowing. An emissive material will display at full strength even if there is no light for it to reflect. -emissiveMaterial__params__v1 = Number: gray value, red or hue value (depending on the current color mode), -emissiveMaterial__params__v2 = Number: (Optional) green or saturation value -emissiveMaterial__params__v3 = Number: (Optional) blue or brightness value -emissiveMaterial__params__a = Number: (Optional) opacity -emissiveMaterial__params__color = Number[]|String|p5.Color: color, color Array, or CSS color string -specularMaterial__description__0 = Specular material for geometry with a given color. Specular material is a shiny reflective material. Like ambient material it also defines the color the object reflects under ambient lighting. For example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. For all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer. Here's an example containing all possible materials. -specularMaterial__params__gray = Number: number specifying value between white and black. -specularMaterial__params__alpha = Number: (Optional) alpha value relative to current color range (default is 0-255) -specularMaterial__params__v1 = Number: red or hue value relative to the current color range -specularMaterial__params__v2 = Number: green or saturation value relative to the current color range -specularMaterial__params__v3 = Number: blue or brightness value relative to the current color range -specularMaterial__params__color = Number[]|String|p5.Color: color Array, or CSS color string -shininess__description__0 = Sets the amount of gloss in the surface of shapes. Used in combination with specularMaterial() in setting the material properties of shapes. The default and minimum value is 1. -shininess__params__shine = Number: Degree of Shininess. Defaults to 1. -camera__description__0 = Sets the position of the current camera in a 3D sketch. Parameters for this function define the camera's position, the center of the sketch (where the camera is pointing), and an up direction (the orientation of the camera). -camera__description__1 = This function simulates the movements of the camera, allowing objects to be viewed from various angles. Remember, it does not move the objects themselves but the camera instead. For example when the centerX value is positive, and the camera is rotating to the right side of the sketch, the object will seem like it's moving to the left. -camera__description__2 = See this example to view the position of your camera. -camera__description__3 = If no parameters are given, the following default is used: camera(0, 0, (height/2) / tan(PI/6), 0, 0, 0, 0, 1, 0) -camera__params__x = Number: (Optional) camera position value on x axis -camera__params__y = Number: (Optional) camera position value on y axis -camera__params__z = Number: (Optional) camera position value on z axis -camera__params__centerX = Number: (Optional) x coordinate representing center of the sketch -camera__params__centerY = Number: (Optional) y coordinate representing center of the sketch -camera__params__centerZ = Number: (Optional) z coordinate representing center of the sketch -camera__params__upX = Number: (Optional) x component of direction 'up' from camera -camera__params__upY = Number: (Optional) y component of direction 'up' from camera -camera__params__upZ = Number: (Optional) z component of direction 'up' from camera -perspective__description__0 = Sets a perspective projection for the current camera in a 3D sketch. This projection represents depth through foreshortening: objects that are close to the camera appear their actual size while those that are further away from the camera appear smaller. -perspective__description__1 = The parameters to this function define the viewing frustum (the truncated pyramid within which objects are seen by the camera) through vertical field of view, aspect ratio (usually width/height), and near and far clipping planes. -perspective__description__2 = If no parameters are given, the following default is used: perspective(PI/3, width/height, eyeZ/10, eyeZ*10), where eyeZ is equal to ((height/2) / tan(PI/6)). -perspective__params__fovy = Number: (Optional) camera frustum vertical field of view, from bottom to top of view, in angleMode units -perspective__params__aspect = Number: (Optional) camera frustum aspect ratio -perspective__params__near = Number: (Optional) frustum near plane length -perspective__params__far = Number: (Optional) frustum far plane length -ortho__description__0 = Sets an orthographic projection for the current camera in a 3D sketch and defines a box-shaped viewing frustum within which objects are seen. In this projection, all objects with the same dimension appear the same size, regardless of whether they are near or far from the camera. -ortho__description__1 = The parameters to this function specify the viewing frustum where left and right are the minimum and maximum x values, top and bottom are the minimum and maximum y values, and near and far are the minimum and maximum z values. -ortho__description__2 = If no parameters are given, the following default is used: ortho(-width/2, width/2, -height/2, height/2). -ortho__params__left = Number: (Optional) camera frustum left plane -ortho__params__right = Number: (Optional) camera frustum right plane -ortho__params__bottom = Number: (Optional) camera frustum bottom plane -ortho__params__top = Number: (Optional) camera frustum top plane -ortho__params__near = Number: (Optional) camera frustum near plane -ortho__params__far = Number: (Optional) camera frustum far plane -frustum__description__0 = Sets the frustum of the current camera as defined by the parameters. -frustum__description__1 = A frustum is a geometric form: a pyramid with its top cut off. With the viewer's eye at the imaginary top of the pyramid, the six planes of the frustum act as clipping planes when rendering a 3D view. Thus, any form inside the clipping planes is visible; anything outside those planes is not visible. -frustum__description__2 = Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective(). -frustum__description__3 = If no parameters are given, the following default is used: frustum(-width/2, width/2, -height/2, height/2, 0, max(width, height)). -frustum__params__left = Number: (Optional) camera frustum left plane -frustum__params__right = Number: (Optional) camera frustum right plane -frustum__params__bottom = Number: (Optional) camera frustum bottom plane -frustum__params__top = Number: (Optional) camera frustum top plane -frustum__params__near = Number: (Optional) camera frustum near plane -frustum__params__far = Number: (Optional) camera frustum far plane -createCamera__description__0 = Creates a new p5.Camera object and sets it as the current (active) camera. -createCamera__description__1 = The new camera is initialized with a default position (see camera()) and a default perspective projection (see perspective()). Its properties can be controlled with the p5.Camera methods. -createCamera__description__2 = Note: Every 3D sketch starts with a default camera initialized. This camera can be controlled with the global methods camera(), perspective(), ortho(), and frustum() if it is the only camera in the scene. -createCamera__returns = p5.Camera: The newly created camera object. -setCamera__description__0 = Sets the current (active) camera of a 3D sketch. Allows for switching between multiple cameras. -setCamera__params__cam = p5.Camera: p5.Camera object -setAttributes__description__0 = Set attributes for the WebGL Drawing context. This is a way of adjusting how the WebGL renderer works to fine-tune the display and performance. -setAttributes__description__1 = Note that this will reinitialize the drawing context if called after the WebGL canvas is made. -setAttributes__description__2 = If an object is passed as the parameter, all attributes not declared in the object will be set to defaults. -setAttributes__description__3 = The available attributes are: alpha - indicates if the canvas contains an alpha buffer default is false -setAttributes__description__4 = depth - indicates whether the drawing buffer has a depth buffer of at least 16 bits - default is true -setAttributes__description__5 = stencil - indicates whether the drawing buffer has a stencil buffer of at least 8 bits -setAttributes__description__6 = antialias - indicates whether or not to perform anti-aliasing default is false (true in Safari) -setAttributes__description__7 = premultipliedAlpha - indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha default is false -setAttributes__description__8 = preserveDrawingBuffer - if true the buffers will not be cleared and and will preserve their values until cleared or overwritten by author (note that p5 clears automatically on draw loop) default is true -setAttributes__description__9 = perPixelLighting - if true, per-pixel lighting will be used in the lighting shader otherwise per-vertex lighting is used. default is true. -setAttributes__params__key = String: Name of attribute -setAttributes__params__value = Boolean: New value of named attribute -setAttributes__params__obj = Object: object with key-value pairs -getAudioContext__description__0 = Returns the Audio Context for this sketch. Useful for users who would like to dig deeper into the Web Audio API . -getAudioContext__description__1 = Some browsers require users to startAudioContext with a user gesture, such as touchStarted in the example below. -getAudioContext__returns = Object: AudioContext for this sketch -userStartAudio__description__0 = It is not only a good practice to give users control over starting audio. This policy is enforced by many web browsers, including iOS and Google Chrome, which create the Web Audio API's Audio Context in a suspended state. -userStartAudio__description__1 = In these browser-specific policies, sound will not play until a user interaction event (i.e. mousePressed()) explicitly resumes the AudioContext, or starts an audio node. This can be accomplished by calling start() on a p5.Oscillator, play() on a p5.SoundFile, or simply userStartAudio(). -userStartAudio__description__2 = userStartAudio() starts the AudioContext on a user gesture. The default behavior will enable audio on any mouseUp or touchEnd event. It can also be placed in a specific interaction function, such as mousePressed() as in the example below. This method utilizes StartAudioContext , a library by Yotam Mann (MIT Licence, 2016). -userStartAudio__returns = Promise: Returns a Promise that resolves when the AudioContext state is 'running' -userStartAudio__params__element-_leftBracket_-s-_rightBracket_- = Element|Array: (Optional) This argument can be an Element, Selector String, NodeList, p5.Element, jQuery Element, or an Array of any of those. -userStartAudio__params__callback = Function: (Optional) Callback to invoke when the AudioContext has started -getOutputVolume__description__0 = Returns a number representing the output volume for sound in this sketch. -getOutputVolume__returns = Number: Output volume for sound in this sketch. Should be between 0.0 (silence) and 1.0. -outputVolume__description__0 = Scale the output of all sound in this sketch Scaled between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class. -outputVolume__description__1 = Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal. -outputVolume__description__2 = How This Works: When you load the p5.sound module, it creates a single instance of p5sound. All sound objects in this module output to p5sound before reaching your computer's output. So if you change the amplitude of p5sound, it impacts all of the sound in this module. -outputVolume__description__3 = If no value is provided, returns a Web Audio API Gain Node -outputVolume__params__volume = Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator -outputVolume__params__rampTime = Number: (Optional) Fade for t seconds -outputVolume__params__timeFromNow = Number: (Optional) Schedule this event to happen at t seconds in the future -soundOut__description__0 = p5.soundOut is the p5.sound final output bus. It sends output to the destination of this window's web audio context. It contains Web Audio API nodes including a dyanmicsCompressor (.limiter), and Gain Nodes for .input and .output. -sampleRate__description__0 = Returns a number representing the sample rate, in samples per second, of all sound objects in this audio context. It is determined by the sampling rate of your operating system's sound card, and it is not currently possile to change. It is often 44100, or twice the range of human hearing. -sampleRate__returns = Number: samplerate samples per second -freqToMidi__description__0 = Returns the closest MIDI note value for a given frequency. -freqToMidi__returns = Number: MIDI note value -freqToMidi__params__frequency = Number: A freqeuncy, for example, the "A" above Middle C is 440Hz -midiToFreq__description__0 = Returns the frequency value of a MIDI note value. General MIDI treats notes as integers where middle C is 60, C# is 61, D is 62 etc. Useful for generating musical frequencies with oscillators. -midiToFreq__returns = Number: Frequency value of the given MIDI note -midiToFreq__params__midiNote = Number: The number of a MIDI note -soundFormats__description__0 = List the SoundFile formats that you will include. LoadSound will search your directory for these extensions, and will pick a format that is compatable with the client's web browser. Here is a free online file converter. -soundFormats__params__formats = String: (Optional) i.e. 'mp3', 'wav', 'ogg' -saveSound__description__0 = Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. For uploading audio to a server, use p5.SoundFile.saveBlob. -saveSound__params__soundFile = p5.SoundFile: p5.SoundFile that you wish to save -saveSound__params__fileName = String: name of the resulting .wav file. -loadSound__description__0 = loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter. Using a local server is recommended when loading external files. -loadSound__returns = SoundFile: Returns a p5.SoundFile -loadSound__params__path = String|Array: 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. -loadSound__params__successCallback = Function: (Optional) Name of a function to call once file loads -loadSound__params__errorCallback = Function: (Optional) Name of a function to call if there is an error loading the file. -loadSound__params__whileLoading = Function: (Optional) Name of a function to call while file is loading. This function will receive the percentage loaded so far, from 0.0 to 1.0. -createConvolver__description__0 = Create a p5.Convolver. Accepts a path to a soundfile that will be used to generate an impulse response. -createConvolver__returns = p5.Convolver: -createConvolver__params__path = String: path to a sound file -createConvolver__params__callback = Function: (Optional) function to call if loading is successful. The object will be passed in as the argument to the callback function. -createConvolver__params__errorCallback = Function: (Optional) function to call if loading is not successful. A custom error will be passed in as the argument to the callback function. -setBPM__description__0 = Set the global tempo, in beats per minute, for all p5.Parts. This method will impact all active p5.Parts. -setBPM__params__BPM = Number: Beats Per Minute -setBPM__params__rampTime = Number: Seconds from now diff --git a/src/data/localization/en/p5.sound.ftl b/src/data/localization/en/p5.sound.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/en/root.ftl b/src/data/localization/en/root.ftl deleted file mode 100644 index 76c9ab6237..0000000000 --- a/src/data/localization/en/root.ftl +++ /dev/null @@ -1,63 +0,0 @@ -h1 = Reference -reference-search = Search reference -reference-description1 = Can't find what you're looking for? You may want to check out -reference-description3 = You can also download an offline version of the reference. -reference-contribute2 = Please let us know. -reference-error1 = Notice any errors or typos? -reference-error3 = Please feel free to edit -reference-error5 = and issue a pull request! -reference-example = Example -reference-description = Description -reference-extends = Extends -reference-parameters = Parameters -reference-syntax = Syntax -reference-returns = Returns -Environment = Environment -Color = Color -Color Conversion = Color Conversion -Creating & Reading = Creating & Reading -Setting = Setting -Shape = Shape -2D Primitives = 2D Primitives -Attributes = Attributes -Curves = Curves -Vertex = Vertex -Constants = Constants -Structure = Structure -DOM = DOM -Rendering = Rendering -Foundation = Foundation -Transform = Transform -Data = Data -LocalStorage = LocalStorage -Dictionary = Dictionary -Events = Events -Acceleration = Acceleration -Keyboard = Keyboard -Mouse = Mouse -Touch = Touch -Image = Image -Loading & Displaying = Loading & Displaying -Pixels = Pixels -IO = IO -Input = Input -Output = Output -Table = Table -Math = Math -Calculation = Calculation -Vector = Vector -Noise = Noise -Random = Random -Trigonometry = Trigonometry -Typography = Typography -Array Functions = Array Functions -Conversion = Conversion -String Functions = String Functions -Time & Date = Time & Date -3D Primitives = 3D Primitives -3D = 3D -Interaction = Interaction -Lights = Lights -3D Models = 3D Models -Material = Material -Camera = Camera diff --git a/src/data/localization/es/JSON.ftl b/src/data/localization/es/JSON.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/console.ftl b/src/data/localization/es/console.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Amplitude.ftl b/src/data/localization/es/p5.Amplitude.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.AudioIn.ftl b/src/data/localization/es/p5.AudioIn.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.AudioVoice.ftl b/src/data/localization/es/p5.AudioVoice.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.BandPass.ftl b/src/data/localization/es/p5.BandPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Camera.ftl b/src/data/localization/es/p5.Camera.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Color.ftl b/src/data/localization/es/p5.Color.ftl deleted file mode 100644 index e0050de46a..0000000000 --- a/src/data/localization/es/p5.Color.ftl +++ /dev/null @@ -1,11 +0,0 @@ -description__0 = Cada color almacena el modo de color y los niveles máximos que se aplicaron en el momento de su construcción. Estos se utilizan para interpretar los argumentos de entrada (en la construcción y más tarde para esa instancia de color) y para formatear el output, p. ej. cuando se solicita la saturation(). -description__1 = Internamente almacenamos una matriz que representa los valores ideales de RGBA en forma de coma flotante, normalizada de 0 a 1. A partir de esto, calculamos el color de pantalla más cercano (niveles de RGBA de 0 a 255) y lo exponemos al renderizador. -description__2 = También almacenamos en caché normalizado, componentes de coma flotante de color flotante del color en varias representaciones a medida que se calculan. Esto se hace para evitar repetir una conversión que ya se ha realizado. -setRed__description__0 = La función setRed establece el componente rojo de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255. -setRed__params__red = Number: the new red value -setGreen__description__0 = La función setGreen establece el componente verde de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255. -setGreen__params__green = Number: the new green value -setBlue__description__0 = La función setBlue establece el componente azul de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255. -setBlue__params__blue = Number: the new blue value -setAlpha__description__0 = La función setAlpha establece el valor de transparencia (alfa) de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255. -setAlpha__params__alpha = Number: the new alpha value diff --git a/src/data/localization/es/p5.Compressor.ftl b/src/data/localization/es/p5.Compressor.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Convolver.ftl b/src/data/localization/es/p5.Convolver.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Delay.ftl b/src/data/localization/es/p5.Delay.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Distortion.ftl b/src/data/localization/es/p5.Distortion.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.EQ.ftl b/src/data/localization/es/p5.EQ.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Effect.ftl b/src/data/localization/es/p5.Effect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Element.ftl b/src/data/localization/es/p5.Element.ftl deleted file mode 100644 index 3d01163ee3..0000000000 --- a/src/data/localization/es/p5.Element.ftl +++ /dev/null @@ -1,3 +0,0 @@ -description__0 = Clase base para todos los elementos añadidos al bosuqejo, incluyendo lienzo, buffers de gráficas, y otros elementos HTML. Los métodos en azul están incluidos en la funcionalidad base, los métodos en marrón son añadidos con la biblioteca p5.dom. No se ejecutan directamente, pero los objetos p5.Element son creados llamando a las funciones createCanvas(), createGraphics(), o en la biblioteca p5.dom, createDiv, createImg, createInput, etc. -params__elt = String: node DOM envolvente. -params__pInst = Objeto: puntero a instancia p5. diff --git a/src/data/localization/es/p5.Envelope.ftl b/src/data/localization/es/p5.Envelope.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.FFT.ftl b/src/data/localization/es/p5.FFT.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.File.ftl b/src/data/localization/es/p5.File.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Filter.ftl b/src/data/localization/es/p5.Filter.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Font.ftl b/src/data/localization/es/p5.Font.ftl deleted file mode 100644 index ff926a3318..0000000000 --- a/src/data/localization/es/p5.Font.ftl +++ /dev/null @@ -1,2 +0,0 @@ -description__0 = Clase base para manipulación de tipografía -params__pInst = Objeto: puntero a la instancia p5 diff --git a/src/data/localization/es/p5.Gain.ftl b/src/data/localization/es/p5.Gain.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Geometry.ftl b/src/data/localization/es/p5.Geometry.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Graphics.ftl b/src/data/localization/es/p5.Graphics.ftl deleted file mode 100644 index 04da39ad9c..0000000000 --- a/src/data/localization/es/p5.Graphics.ftl +++ /dev/null @@ -1,7 +0,0 @@ -description__0 = Contenedor fino alrededor de un renderizador, que se utilizará para crear un objeto de búfer de gráficos. Use esta clase si necesita dibujar en un búfer de gráficos fuera de la pantalla. Los dos parámetros definen el ancho y el alto en píxeles. Los campos y métodos para esta clase son extensos, pero reflejan la API de dibujo normal para p5. -params__w = Número: ancho -params__h = Número: altura -params__renderer = Constant: renderer el renderizador a utilizar, ya sea P2D o WEBGL -params__pInst = P5: pointer a una instancia p5 (Opcional) -reset__description__0 = Restablece ciertos valores, como los modificados por funciones en la categoría Transformar y en la categoría Luces que no se restablecen automáticamente con objetos gráficos de búfer. Llamando a esto en draw() copiará el comportamiento del canvas estándar. -remove__description__0 = Elimina un objeto Graphics de la página y libera todos los recursos asociados con él. diff --git a/src/data/localization/es/p5.HighPass.ftl b/src/data/localization/es/p5.HighPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Image.ftl b/src/data/localization/es/p5.Image.ftl deleted file mode 100644 index 5a0cdf827a..0000000000 --- a/src/data/localization/es/p5.Image.ftl +++ /dev/null @@ -1,30 +0,0 @@ -description__0 = Crea un nuevo p5.Image. Un p5.Image es una representación de una imagen respaldada por un canvas. -description__1 = p5 puede mostrar imágenes .gif, .jpg y .png. Las imágenes pueden mostrarse en espacio 2D y 3D. Antes de usar una imagen, debe cargarse con la función loadImage(). La clase p5.Image contiene campos para el ancho y alto de la imagen, así como una matriz llamada pixels[] que contiene los valores para cada píxel en la imagen. -description__2 = Los métodos descritos a continuación permiten un fácil acceso a los píxeles de la imagen y al canal alfa y simplifican el proceso de composición. -description__3 = Antes de usar la matriz de pixels[], asegúrese de usar el método loadPixels() en la imagen para asegurarse de que los datos de píxeles estén cargados correctamente. -params__width = Número de ancho: -params__height = Número de altura: -width__description__0 = Ancho de la imagen. -height__description__0 = Altura de imagen. -pixels__description__0 = Matriz que contiene los valores para todos los píxeles en la ventana de visualización. Estos valores son números. Esta matriz es el tamaño (incluya un factor apropiado para la densidad de píxeles) de la ventana de visualización x4, que representa los valores R, G, B, A en orden para cada píxel, moviéndose de izquierda a derecha a través de cada fila, luego hacia abajo en cada columna. La retina y otras pantallas de alta densidad pueden tener más píxeles (por un factor de densidad de píxeles ^ 2). Por ejemplo, si la imagen es de 100x100 píxeles, habrá 40,000. Con pixelDensity = 2, habrá 160,000. Los primeros cuatro valores (índices 0-3) en la matriz serán los valores R, G, B, A del píxel en (0, 0). Los segundos cuatro valores (índices 4-7) contendrán los valores R, G, B, A del píxel en (1, 0). Más generalmente, para establecer valores para un píxel en (x, y): 
    let d = pixelDensity(); for (let i = 0; i < d; i++) {"{"}  for (let j = 0; j < d; j++) {"{"}  // loop over  index = 4 * ((y * d + j) * width * d + (x * d + i));  pixels[index] = r;  pixels[index+1] = g;  pixels[index+2] = b;  pixels[index+3] = a;  {"}"} {"}"}
    -pixels__description__1 = Antes de acceder a esta matriz, los datos deben cargarse con la función loadPixels(). Después de que se hayan modificado los datos de la matriz, se debe ejecutar la función updatePixels() para actualizar los cambios. -loadPixels__description__0 = Carga los datos de píxeles para esta imagen en el atributo [píxeles]. -updatePixels__description__0 = Actualiza el canvas de respaldo para esta imagen con el contenido de la matriz [píxeles]. -updatePixels__description__1 = Si esta imagen es un GIF animado, los píxeles se actualizarán en el cuadro que se muestra actualmente -get__description__0 = Obtiene una región de píxeles de una imagen. -get__description__1 = Si no se pasan parámetros, se devuelve toda la imagen. Si x e y son los únicos parámetros pasados, se extrae un solo píxel. Si se pasan todos los parámetros, se extrae una región rectangular y se devuelve un p5.Image. -set__description__0 = Establece el color de un solo píxel o escribe una imagen en este p5.Image. -set__description__1 = Tenga en cuenta que para una gran cantidad de píxeles esto será más lento que manipular directamente la matriz de píxeles y luego llamar a updatePixels(). -resize__description__0 = Cambiar el tamaño de la imagen a un nuevo ancho y alto. Para hacer que la imagen escale proporcionalmente, use 0 como valor para el parámetro ancho o alto. Por ejemplo, para hacer que el ancho de una imagen sea de 150 píxeles y cambiar la altura con la misma proporción, use cambiar el tamaño (150, 0). -copy__description__0 = Copia una región de píxeles de una imagen a otra. Si no se especifica srcImage, se usa como fuente. Si las regiones de origen y destino no son del mismo tamaño, automáticamente redimensionará los píxeles de origen para que se ajusten a la región de destino especificada. -mask__description__0 = Enmascara parte de una imagen para que no se muestre cargando otra imagen y usando su canal alfa como canal alfa para esta imagen. -filter__description__0 = Aplica un filtro de imagen a un p5.Image -blend__description__0 = Copia una región de píxeles de una imagen a otra, utilizando un modo de blend específico para realizar la operación. -save__description__0 = Guarda la imagen en un archivo y obliga al navegador a descargarla. Acepta dos cadenas para nombre de archivo y extensión de archivo Admite png (predeterminado), jpg y gif Tenga en cuenta que el archivo solo se descargará como un GIF animado si la p5.Image se cargó desde un archivo GIF. -reset__description__0 = Inicia un GIF animado en el estado inicial. -getCurrentFrame__description__0 = Obtiene el índice del marco que está visible actualmente en un GIF animado. -setFrame__description__0 = Establece el índice del marco que está visible actualmente en un GIF animado -numFrames__description__0 = Devuelve el número de fotogramas en un GIF animado -play__description__0 = Reproduce un GIF animado que se detuvo con pause() -pause__description__0 = Pausa un GIF animado. -delay__description__0 = Cambia el retraso entre fotogramas en un GIF animado. Hay un segundo parámetro opcional que indica un índice para una trama específica que debería tener su retraso modificado. Si no se proporciona ningún índice, todos los cuadros tendrán el nuevo retraso. diff --git a/src/data/localization/es/p5.LowPass.ftl b/src/data/localization/es/p5.LowPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.MediaElement.ftl b/src/data/localization/es/p5.MediaElement.ftl deleted file mode 100644 index 98dc6d5336..0000000000 --- a/src/data/localization/es/p5.MediaElement.ftl +++ /dev/null @@ -1,24 +0,0 @@ -description__0 = Extiende p5.Element para manejar audio y video. Además de los métodos de p5.Element, también contiene métodos para controlar los medios. No se llama directamente, pero p5.MediaElements se crea llamando a createVideo, createAudio y createCapture. -params__elt = String: nodo DOM que está envuelto -src__description__0 = Ruta a la fuente del elemento multimedia. -src__returns = String: src -play__description__0 = Reproduce un elemento multimedia HTML5. -stop__description__0 = Detiene un elemento multimedia HTML5 (establece la hora actual en cero) -pause__description__0 = Pausa un elemento multimedia HTML5. -loop__description__0 = Establezca 'loop' en verdadero para un elemento multimedia HTML5 y comienza a reproducir. -autoplay__description__0 = Establezca 'loop' en falso para un elemento multimedia HTML5. El elemento se detendrá cuando llegue al final. -volume__description__0 = Establece el volumen para este elemento multimedia HTML5. Si no se proporciona ningún argumento, devuelve el volumen actual. -speed__description__0 = Si no se dan argumentos, devuelve la velocidad de reproducción actual del elemento. El parámetro de velocidad establece la velocidad donde 2.0 reproducirá el elemento dos veces más rápido, 0.5 reproducirá a la mitad de la velocidad y -1 reproducirá el elemento a velocidad normal en reversa (tenga en cuenta que no todos los navegadores admiten la reproducción hacia atrás e incluso si lo hacen, la reproducción podría no ser fluido.) -time__description__0 = Si no se dan argumentos, devuelve la hora actual del elemento. Si se proporciona un argumento, la hora actual del elemento se establece a la indicada. -duration__description__0 = Devuelve la duración del elemento multimedia HTML5. -onended__description__0 = Programe un evento para ser llamado cuando el elemento de audio o video llegue al final. Si el elemento está looping, esto no se llamará. El elemento se pasa como argumento para el onended callback. -connect__description__0 = Envíe la salida de audio de este elemento a un objeto audioNode o p5.sound especificado. Si no se proporciona ningún elemento, se conecta a la salida maestra de p5. Esa conexión se establece cuando este método se llama por primera vez. Todas las conexiones se eliminan mediante el método .disconnect (). -connect__description__1 = Este método está destinado a ser utilizado con la biblioteca de complementos p5.sound.js. -disconnect__description__0 = Desconecta todo el enrutamiento de audio web, incluso a la salida maestra. Esto es útil si desea redirigir la salida a través de efectos de audio, por ejemplo. -showControls__description__0 = Muestra los controles de MediaElement predeterminados, según lo determine el navegador web. -hideControls__description__0 = Ocultar los controles predeterminados de mediaElement. -addCue__description__0 = Programe eventos para que se activen cada vez que un MediaElement (audio / video) llegue a un punto de referencia de reproducción. -addCue__description__1 = Acepta una función de devolución de llamada, un tiempo (en segundos) para activar el callback y un parámetro opcional para el callback. -addCue__description__2 = El tiempo pasará como primer parámetro a la función de callback, y param será el segundo parámetro. -removeCue__description__0 = Eliminar una devolución de llamada en función de su ID. La identificación es devuelta por el método addCue. -clearCues__description__0 = Elimine todos los callbacks que originalmente se habían programado mediante el método addCue. diff --git a/src/data/localization/es/p5.MonoSynth.ftl b/src/data/localization/es/p5.MonoSynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Noise.ftl b/src/data/localization/es/p5.Noise.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.NumberDict.ftl b/src/data/localization/es/p5.NumberDict.ftl deleted file mode 100644 index b721e45ba1..0000000000 --- a/src/data/localization/es/p5.NumberDict.ftl +++ /dev/null @@ -1,8 +0,0 @@ -description__0 = Una simple clase de Diccionario para Números. -add__description__0 = Agregue el número dado al valor actualmente almacenado en la clave dada. La suma luego reemplaza el valor previamente almacenado en el Diccionario. -mult__description__0 = Resta el número dado del valor actualmente almacenado en la clave dada. La diferencia luego reemplaza el valor previamente almacenado en el Diccionario. -div__description__0 = Divida el número dado con el valor actualmente almacenado en la clave dada. El cociente luego reemplaza el valor previamente almacenado en el Diccionario. -minValue__description__0 = Devuelve el número más bajo actualmente almacenado en el Diccionario. -maxValue__description__0 = Devuelve el número más alto actualmente almacenado en el Diccionario. -minKey__description__0 = Devuelve la clave más baja utilizada actualmente en el Diccionario. -maxKey__description__0 = Devuelve la clave más alta utilizada actualmente en el Diccionario. diff --git a/src/data/localization/es/p5.OnsetDetect.ftl b/src/data/localization/es/p5.OnsetDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Oscillator.ftl b/src/data/localization/es/p5.Oscillator.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Panner3D.ftl b/src/data/localization/es/p5.Panner3D.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Part.ftl b/src/data/localization/es/p5.Part.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.PeakDetect.ftl b/src/data/localization/es/p5.PeakDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Phrase.ftl b/src/data/localization/es/p5.Phrase.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.PolySynth.ftl b/src/data/localization/es/p5.PolySynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.PrintWriter.ftl b/src/data/localization/es/p5.PrintWriter.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Pulse.ftl b/src/data/localization/es/p5.Pulse.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Renderer.ftl b/src/data/localization/es/p5.Renderer.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Reverb.ftl b/src/data/localization/es/p5.Reverb.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.SawOsc.ftl b/src/data/localization/es/p5.SawOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Score.ftl b/src/data/localization/es/p5.Score.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Shader.ftl b/src/data/localization/es/p5.Shader.ftl deleted file mode 100644 index d139b92db2..0000000000 --- a/src/data/localization/es/p5.Shader.ftl +++ /dev/null @@ -1,5 +0,0 @@ -description__0 = Clase Shader para el modo WEBGL -params__renderer = p5.RendererGL: una instancia de p5.RendererGL que servirá de contexto GL para este nuevo p5.Shader -params__vertSrc = String: código fuente para el vertex shader (en forma de string) -params__fragSrc = String: código fuente para el fragment shader (en forma de string) -setUniform__description__0 = Wrapper de las funciones gl.uniform. Como almacenamos información de uniform en el shader, la podemos usar para revisar los datos provistos y llamar a la función apropiada. diff --git a/src/data/localization/es/p5.SinOsc.ftl b/src/data/localization/es/p5.SinOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.SoundFile.ftl b/src/data/localization/es/p5.SoundFile.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.SoundLoop.ftl b/src/data/localization/es/p5.SoundLoop.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.SoundRecorder.ftl b/src/data/localization/es/p5.SoundRecorder.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.SqrOsc.ftl b/src/data/localization/es/p5.SqrOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.StringDict.ftl b/src/data/localization/es/p5.StringDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Table.ftl b/src/data/localization/es/p5.Table.ftl deleted file mode 100644 index 9896423d7e..0000000000 --- a/src/data/localization/es/p5.Table.ftl +++ /dev/null @@ -1,29 +0,0 @@ -description__0 = Los objetos Table almacenan datos con múltiples filas y columnas, tal como una hoja de cálculo tradicional. Los objetos Table pueden ser generados desde cero, dinámicamente, o usando datos desde un archivo existente. -params__rows = Arreglo: un arreglo de objetos p5.TableRow -columns__description__0 = Una matriz que contiene los nombres de las columnas en la tabla, si el "header" la tabla se carga con el parámetro "header". -rows__description__0 = Una matriz que contiene los objetos p5.TableRow que forman las filas de la tabla. El mismo resultado que llamar getRows() -addRow__description__0 = Use addRow() para agregar una nueva fila de datos a un objeto p5.Table. Por defecto, se crea una fila vacía. Por lo general, almacenaría una referencia a la nueva fila en un objeto TableRow (consulte newRow en el ejemplo anterior) y luego establecería valores individuales usando set(). -addRow__description__1 = Si se incluye un objeto p5.TableRow como parámetro, entonces esa fila se duplica y se agrega a la tabla. -removeRow__description__0 = Elimina una fila del objeto de tabla. -getRow__description__0 = Devuelve una referencia al p5.TableRow especificado. La referencia se puede utilizar para obtener y establecer valores de la fila seleccionada. -getRows__description__0 = Obtiene todas las filas de la tabla. Devuelve una matriz de p5.TableRows. -findRow__description__0 = Encuentra la primera fila de la tabla que contiene el valor proporcionado y devuelve una referencia a esa fila. Incluso si varias filas son posibles coincidencias, solo se devuelve la primera fila coincidente. La columna a buscar puede especificarse por su ID o título. -findRow__returns = p5.TableRow: -findRows__description__0 = Encuentra las filas en la tabla que contienen el valor proporcionado y devuelve referencias a esas filas. Devuelve una matriz, por lo que debe usarse para recorrer en iteración todas las filas, como se muestra en el ejemplo anterior. La columna a buscar puede especificarse por su ID o título. -matchRow__description__0 = Encuentra la primera fila de la tabla que coincide con la expresión regular proporcionada y devuelve una referencia a esa fila. Incluso si varias filas son posibles coincidencias, solo se devuelve la primera fila coincidente. La columna a buscar puede especificarse por su ID o título. -matchRows__description__0 = Encuentra las filas en la tabla que coinciden con la expresión regular proporcionada y devuelve referencias a esas filas. Devuelve una matriz, por lo que debe usarse para recorrer en iteración todas las filas, como se muestra en el ejemplo. La columna a buscar puede especificarse por su ID o título. -getColumn__description__0 = Recupera todos los valores en la columna especificada y los devuelve como una matriz. La columna se puede especificar por su ID o título. -clearRows__description__0 = Elimina todas las filas de una tabla. Mientras se eliminan todas las filas, se mantienen las columnas y los títulos de las columnas. -getColumnCount__description__0 = Devuelve el número total de columnas en una tabla. -getRowCount__description__0 = Devuelve el número total de filas en una tabla. -removeTokens__description__0 = Elimina cualquiera de los caracteres especificados (o "tokens"). -removeTokens__description__1 = Si no se especifica ninguna columna, se procesan los valores en todas las columnas y filas. Se puede hacer referencia a una columna específica por su ID o título. -trim__description__0 = Recorta los espacios en blanco iniciales y finales, como los espacios y las pestañas, a partir de los valores de la tabla de cadenas. Si no se especifica ninguna columna, los valores en todas las columnas y filas se recortan. Se puede hacer referencia a una columna específica por su ID o título. -set__description__0 = Almacena un valor en la fila y columna especificadas de la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título. -setNum__description__0 = Almacena un valor flotante en la fila y columna especificadas de la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título. -setString__description__0 = Almacena un valor de cadena en la fila y columna especificadas de la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título. -get__description__0 = Recupera un valor de la fila y columna especificadas en la Tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título. -getNum__description__0 = Recupera un valor flotante de la fila y columna especificadas en la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título. -getString__description__0 = Recupera un valor de cadena de la fila y columna especificadas en la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título. -getObject__description__0 = Recupera todos los datos de la tabla y los devuelve como un objeto. Si se pasa un nombre de columna, cada objeto de fila se almacenará con ese atributo como título. -getArray__description__0 = Recupera todos los datos de la tabla y los devuelve como una matriz multidimensional. diff --git a/src/data/localization/es/p5.TableRow.ftl b/src/data/localization/es/p5.TableRow.ftl deleted file mode 100644 index 8745e31130..0000000000 --- a/src/data/localization/es/p5.TableRow.ftl +++ /dev/null @@ -1,3 +0,0 @@ -description__0 = Un objeto TableRow representa una única fila de datos, grabados en columnas, de una tabla. Un objeto TableRow contiene tanto un arreglo ordenado, como un objeto JSON desordenado. -params__str = String: opcional, puebla la fila con una serie de valores, separados por el separador -params__separator = String: por defecto, valores separados por coma (csv) diff --git a/src/data/localization/es/p5.TriOsc.ftl b/src/data/localization/es/p5.TriOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.TypedDict.ftl b/src/data/localization/es/p5.TypedDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/p5.Vector.ftl b/src/data/localization/es/p5.Vector.ftl deleted file mode 100644 index 591751b243..0000000000 --- a/src/data/localization/es/p5.Vector.ftl +++ /dev/null @@ -1,11 +0,0 @@ -description__0 = Una clase para describir un vector de dos o tres dimensiones, específicamente un vector euclideano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección. El tipo de datos, sin embargo, graba los componentes del vector (x, y para 2D y x,y,z para 3D). La magnitud y la dirección pueden ser calculados con los métodos mag() y heading(). En muchos de los ejemplos de p5.js, verás que p5.Vector es usado para describir una posición, velocidad o aceleración. Por ejemplo, si consideras un rectángulo moviéndose a lo largo de la pantalla, en cada instante tiene una posición (un vector que apunta desde el origen hasta su ubicación), una velocidad(la tasa a la que la posición del objeto cambia por unidad de tiempo, expresada como vector), y aceleración (la tasa a la que la velocidad del objeto cambia por unidad de tiempo, expresada como vector). Como los vectores representan grupos de valores, no podemos simplemente usar las operaciones tradicionales de adición, multiplicación, etc. En vez de eso, necesitaremos hacer matemática de vectores, lo que es simplificado con los métodos dentro de la clase p5.Vector. -params__x = Número: componente x del vector -params__y = Número: componente y del vector -params__z = Número: componente z del vector -mult__params__v0 = p5.Vector -mult__params__v1 = p5.Vector -div__params__v0 = p5.Vector -div__params__v1 = p5.Vector -rotate__params__v = p5.Vector -lerp__params__v1 = p5.Vector -lerp__params__v2 = p5.Vector diff --git a/src/data/localization/es/p5.XML.ftl b/src/data/localization/es/p5.XML.ftl deleted file mode 100644 index 630e0e876a..0000000000 --- a/src/data/localization/es/p5.XML.ftl +++ /dev/null @@ -1 +0,0 @@ -description__0 = XML es una representación de un objeto XML, capaz de procesar código XML. Usa loadXML() para cargar archivos externos XML y crear objetos XML diff --git a/src/data/localization/es/p5.ftl b/src/data/localization/es/p5.ftl deleted file mode 100644 index bc5f05a203..0000000000 --- a/src/data/localization/es/p5.ftl +++ /dev/null @@ -1,864 +0,0 @@ -description__0 = This is the p5 instance constructor. -description__1 = A p5 instance holds all the properties and methods related to a p5 sketch. It expects an incoming sketch closure and it can also take an optional node parameter for attaching the generated p5 canvas to a node. The sketch closure takes the newly created p5 instance as its sole argument and may optionally set preload(), setup(), and/or draw() properties on it for running a sketch. -description__2 = A p5 sketch can run in "global" or "instance" mode: "global" - all properties and methods are attached to the window "instance" - all properties and methods are bound to this p5 object -alpha__description__0 = Extrae el valor de alpha de un color o de un arreglo de pixeles. -alpha__returns = el objeto p5 -alpha__params__color = Objeto: objeto p5.Color o arreglo de pixeles -blue__description__0 = Extrae el valor de azul de un color o de un arreglo de pixeles. -blue__returns = el objeto p5 -blue__params__color = Objeto: objeto p5.Color o arreglo de pixeles -brightness__description__0 = Extrae el valor de brillo HSB de un color o de un arreglo de pixeles. -brightness__returns = el objeto p5 -brightness__params__color = Objeto: objeto p5.Color o arreglo de pixeles -color__description__0 = Crea colores para ser almacenados en variables del tipo color. Los parámetros son interpretados como valores RGB o HSB, dependiendo del modo actual de color según colorMode)(). El modo por defecto es RGB con valores entre 0 y 255 y, por lo tanto, la función color(255, 204, 0) retorna un color amarillo brillante. Nota que si solo se provee un valor a la función color(), será interpretado como un valor en escala de grises. Añade un segundo valor, y será usado como transparencia alpha. Cuando se especifican tres valores, son interpretados como valores RGB o HSB. Al añadir un cuarto valor se aplica transparencia alpha. Si se provee solo un parámetro de tipo string, será interpretado como un string de color compatible con CSS.Los colores son almacenados como números o arreglos. -color__returns = Arreglo: color resultante -color__params__gray = Número|String: número especificando el valor entre blanco y negro. -color__params__alpha = Número: valor de alpha relativo al rango de color actual (por defecto es 0-255) -color__params__v1 = Número|String: valor de rojo o tinte relativo al rango de color actual, o un string de color -color__params__v2 = Número: valor de verde o saturación relativo al rango de color actual -color__params__v3 = Número: valor de azul o brillo relativo al rango de color actual -color__params__color = p5.Color -green__description__0 = Extrae el valor de verde de un color o de un arreglo de pixeles. -green__returns = el objeto p5 -green__params__color = Objeto: objeto p5.Color o arreglo de pixeles -hue__description__0 = Extrae el valor de tinte de un color o de un arreglo de pixeles. El tinte (hue) existe en HSB y HSL. Esta función retorna el tinte normalizado HSB que cuando se le provee un objeto de color HSB (o cuando se le provee un arreglo de pixeles mientras el modo de color es HSB), pero por defecto retornará el tinte normalizado según HSB en otro caso. (Estos valores solo son diferentes si la configuración de valor de tinte máximo de cada sistema es diferente.) -hue__returns = el objeto p5 -hue__params__color = Objeto: objeto p5.Color o arreglo de pixeles -lerpColor__description__0 = Mezcla dos colores para encontrar un tercer color según la combinación de ambos. El parámetro amt es la cantidad a interpolar entre los dos valores, donde 0.0 es igual al primer color, 0.1 es muy cercano al primer color, 0.5 está a medio camino entre ambos, etc. Un valor menor que 0 será tratado como 0. Del mismo modo, valores sobre 1 serán tratados como 1. Esto es distinto al comportamiento de lerp(), pero necesario porque de otra manera los números fuera de rango producirían colores no esperados y extraños. La manera en que los colores son interpolados depende del modo de color actual. -lerpColor__returns = Arreglo/Número: color interpolado -lerpColor__params__c1 = Arreglo/Número: interpola desde este color -lerpColor__params__c2 = Arreglo/Número: interpola hacia este color -lerpColor__params__amt = Número: número entre 0 y 1 -lightness__description__0 = Extrae el valor de luminosidad HSL de un color o de un arreglo de pixeles. -lightness__returns = el objeto p5 -lightness__params__color = Objeto: objeto p5.Color o arreglo de pixeles -red__description__0 = Extrae el valor de rojo de un color o de un arreglo de pixeles. -red__returns = el objeto p5 -red__params__color = Objeto: objeto p5.Color o arreglo de pixeles -saturation__description__0 = Extrae el valor de saturación de un color o de un arreglo de pixeles. La saturación es escalada en HSB y HSL de forma distinta. Esta función retornará la saturación HSB cuando le sea provisto un objeto de color HSB (o cuando le sea provisto un arreglo de pixeles mientras el modo de color es HSB), pero por defecto retornará saturación HSL. -saturation__returns = el objeto p5 -saturation__params__color = Objeto: objeto p5.Color o arreglo de pixeles -background__description__0 = La función background() define el color usado como fondo del lienzo p5.js. El fondo por defecto es gris claro. Esta función es típicamente usada dentro de draw() para despejar o borrar la ventana mostrada al inicio de cada cuadro, pero puede ser usada dentro de setup() para definir el fondo en el primer cuadro de la animación o si el fondo solo necesita ser definido una vez. -background__params__color = Color: cualquier valor creado con la función color() -background__params__colorstring = colorstring: string de color, formatos posibles: enteros rgb() o rgba(), porcentajes rgb() o rgba(), hex 3 dígitos, hex 6 dígitos -background__params__a = Número: opacidad del fondo relativo al rango de color actual (por defecto es 0-255) -background__params__gray = Número: especifica un valor entre blanco y negro -background__params__v1 = Número: valor de rojo o hue (dependiendo del modo de color actual) -background__params__v2 = Número: valor de verde o saturación (dependiendo del modo de color actual) -background__params__v3 = Número: valor de azul o brillo (dependiendo del modo de color actual) -background__params__image = p5.Image: imagen creada con loadImage() o createImage(), para ser definida como fondo (debe ser del mismo tamaño que la ventana del bosquejo) -clear__description__0 = Borra los pixeles del buffer. Esta función solo funciona en objetos p5.Canvas creados con la función createCanvas(); no funcionará con la ventana principal. A diferencia del contexto principal de gráficas, los pixeles en las áreas gráficas adicionales creadas con createGraphics() pueden ser entera o parcialmente transparentes. Esta función borra todo para hacer los pixeles 100% transparentes. -colorMode__description__0 = colorMode() cambia la manera en que p5.js interpreta los datos de color. Por defecto, los parámetros de fill(), stroke(), background() y color() son definidos por valores entre 0 y 255 en modo RGB. Esto es equivalente a definir el modo de color según colorMode(RGB, 255). Definir el modo de color en colorMode(HSB) permite usar el sistema HSB. Por defecto, este modo de color es colorMode(HSB, 360, 100, 100, 1). También se puede usar HSL. Nota: los objetos de color existentes recuerdan el modo en que fueron creados, por lo que puedes cambiar el modo como quieras, sin afectar su apariencia. -colorMode__params__mode = Constante: RGB o HSB, correspondiente a Rojo/Verde/Azul o tinte/saturación/brillo (o luminosidad) -colorMode__params__max1 = Número: rango de rojo o tinte, dependiendo del modo de color actual, o rango para todos los valores -colorMode__params__max2 = Número: rango de verde o saturación, dependiendo del modo de color actual. -colorMode__params__max3 = Número: rango de azul o brillo/luminosidad, dependiendo del modo de color actual. -colorMode__params__maxA = Número: rango de transparencia alpha -fill__description__0 = Define el color usado para el relleno de figuras geométricas. Por ejemplo, si ejecutas fill(204, 102, 0), todas las figuras a continuación tendrán relleno naranja. Este color es especificado en términos de color RGB o HSB, dependiendo del modo de color según colorMode() (el dominio de color por defecto es RGB, con cada valor en el rango entre 0 y 255). Si se provee un argumento tipo string, los tipos RGB, RGBA y CSS hexadecimal están soportados. Un objeto Color p5 puede ser provisto para definir el color del relleno. -fill__params__v1 = Número|Arreglo|String|p5.Color: valor de gris, rojo, tinte (dependiendo del modo de color actual), o arreglo de color, o string de color CSS. -fill__params__v2 = Número: valor de verde o saturación (dependiendo del modo de color actual) -fill__params__v3 = Número: valor de azul o brillo (dependiendo del modo de color actual) -fill__params__alpha = Número: opacidad del fondo -noFill__description__0 = Deshabilita el relleno de figuras geométricas. Si tanto noStroke() como noFill() son ejecutados, nada será dibujado en pantalla. -noStroke__description__0 = Deshabilita el dibujo de los trazos (bordes). Si tanto noStroke() como noFill() son ejecutados, nada será dibujado en pantalla. -stroke__description__0 = Define el color usado para dibujar líneas y bordes de figuras. Este color especificado en términos de color RGB o HSB, dependiendo del modo de color actual según colorMode() (el dominio de color por defecto es RGB, con cada valor en el rango entre 0 y 255). Si se provee un argumento tipo string, los tipos RGB, RGBA y CSS hexadecimal están soportados. Un objeto Color p5 puede ser provisto para definir el color del trazado. -stroke__params__v1 = Número|Arreglo|String|p5.Color: valor de gris, rojo, tinte (dependiendo del modo de color actual), o arreglo de color, o string de color CSS. -stroke__params__v2 = Número: valor de verde o saturación (dependiendo del modo de color actual) -stroke__params__v3 = Número: valor de azul o brillo (dependiendo del modo de color actual) -stroke__params__alpha = Número: opacidad del fondo -arc__description__0 = Dibuja un arco en la pantalla. Si se llama con solo a, b, c, d, start y stop, el arco se dibuja como un pastel abierto. Si el modo se provee, el arco será dibujado abierto, o como acorde, o como pastel, según lo especificado. El origen puede ser cambiado con la función ellipseMode(). Nota que si dibujas un círculo completo (ej: 0 a TWO_PI) aparecerá en blanco, porque 0 y TWO_PI son la misma posición en el círculo unitario. La mejor manera de manejar esto es usar la función ellipse() para una elipse cerrada, y la función arc() para generar solo secciones de una elipse. -arc__params__x = Número: coordenada x del arco de elipse. -arc__params__y = Número: coordenada y del arco de elipse. -arc__params__w = Número: ancho del arco de elipse. -arc__params__h = Número: altura del arco de elipse. -arc__params__start = Número: ángulo inicial del arco de elipse. -arc__params__stop = Número: ángulo final del arco de elipse. -arc__params__mode = Constante: parámetro opcional para determinar la manera de dibujar el arco. -arc__params__detail = Number: (Optional) 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. -ellipse__description__0 = Dibuja una elipse (óvalo) en la pantalla. Una elipse con igual ancho y altura es un círculo. Por defecto, los primeros dos parámetros definen la ubicación, y el tercero y cuarto definen el ancho y altura de la figura. Si no especifica una altura, el valor del ancho es usado como ancho y altura. El origen puede ser cambiado con la función ellipseMode(). -ellipse__description__1 = An ellipse with equal width and height is a circle. The origin may be changed with the ellipseMode() function. -ellipse__params__x = Número: coordenada x de la elipse. -ellipse__params__y = Número: coordenada y de la elipse. -ellipse__params__w = Número: ancho de la elipse. -ellipse__params__h = Número: altura de la elipse. -line__description__0 = Dibuja una línea (un camino directo entre dos puntos) en la pantalla. La versión de line() con cuatro parámetros dibuja la línea en 2D. Para darle color a una línea, usa la función stroke(). Una línea no puede ser rellenada, por lo que la función fill() no afectará el color de una línea. Las líneas 2D son dibujadas con una ancho de un pixel por defecto, pero esto puede ser cambiado con la función strokeWeight(). -line__params__x1 = Número: coordenada x del primer punto. -line__params__y1 = Número: coordenada y del primer punto. -line__params__x2 = Número: coordenada x del segundo punto. -line__params__y2 = Número: coordenada y del segundo punto. -point__description__0 = Dibuja un punto, una coordenada en el espacio de un pixel de dimensión. El primer parámetro es la coordenada horizontal del punto, el segundo valor es la coordenada vertical del punto. El color del punto es determinado por el trazado actual con la función stroke(). -point__params__x = Número: coordenada x. -point__params__y = Número: coordenada y . -quad__description__0 = Dibuja un cuadrilátero, un polígono de cuatro lados. Es similar a un rectángulo, pero los ángulos entre sus bordes no están limitados a noventa grados. El primer par de parámetros (x1, y1) corresponde a las coordenadas del primer vértice y los pares siguientes deben seguir en el mismo orden, según las manecillas del reloj o en contra, alrededor de la figura a definir. -quad__params__x1 = Número: coordenada x del primer punto. -quad__params__y1 = Número: coordenada y del primer punto. -quad__params__x2 = Número: coordenada x del segundo punto. -quad__params__y2 = Número: coordenada y del segundo punto. -quad__params__x3 = Número: coordenada x del tercer punto. -quad__params__y3 = Número: coordenada y del tercer punto. -quad__params__x4 = Número: coordenada x del cuarto punto. -quad__params__y4 = Número: coordenada y del cuarto punto. -rect__description__0 = Dibuja un rectángulo en la pantalla. Un rectángulo es una figura de cuatro lados con cada ángulo interior de noventa grados. Por defecto, los dos primeros parámetros definen la ubicación de la esquina superior izquierda, el tercero el ancho y el cuarto la altura. La manera en que estos parámetros son interpretados, sin embargo, puede ser cambiado con la función rectMode(). Los parámetros quinto, sexto, séptimo y octavo, si son especificados, determinan el radio de la esquina superior derecha, superior izquierda, inferior derecha e inferior izquierda, respectivamente. Si se omite un parámetro de radio de esquina, se usa el radio especificado por el valor anterior en la lista. -rect__params__x = Número: coordenada x del rectángulo. -rect__params__y = Número: coordenada y del rectángulo. -rect__params__w = Número: ancho del rectángulo. -rect__params__h = Número: altura del rectángulo. -rect__params__tl = Número: radio opcional de la esquina superior izquierda. -rect__params__tr = Número: radio opcional de la esquina superior derecha. -rect__params__br = Número: radio opcional de la esquina inferior derecha. -rect__params__bl = Número: radio opcional de la esquina inferior izquierda. -rect__params__detailX = Número: -rect__params__detailY = Número: -triangle__description__0 = Un triángulo es un plano creado por la conexión de tres puntos. Los primeros dos argumentos especifican el primer punto, los parámetros centrales especifican el segundo punto, y los dos últimos parámetros especifican el tercer punto. -triangle__params__x1 = Número: coordenada x del primer punto. -triangle__params__y1 = Número: coordenada y del primer punto. -triangle__params__x2 = Número: coordenada x del segundo punto. -triangle__params__y2 = Número: coordenada y del segundo punto. -triangle__params__x3 = Número: coordenada x del tercer punto. -triangle__params__y3 = Número: coordenada y del tercer punto. -ellipseMode__description__0 = Modifica la ubicación de donde las elipses son dibujadas, cambiando la manera en que los parámetros dados a ellipse() son interpretados. El modo por defecto es ellipseMode(CENTER), que interpreta los dos primeros parámetros de ellipse() como el centro de la figura, mientras que los parámetros tercero y cuarto son el ancho y la altura. ellipseMode(RADIUS) también usa los dos primeros parámetros de ellipse() como el punto central de la figura, pero usa los parámetros tercero y cuarto para especificar la mitad del ancho y la altura de la figura. ellipseMode(CORNER) interpreta los dos primeros parámetros de ellipse() como la esquina superior izquierda de la figura, mientras que los parámetros tercero y cuarto son el ancho y la altura. ellipseMode(CORNERS) interpreta los dos primeros parámetros de ellipse() como la ubicación de una esquina del rectángulo contenedor de la elipse, y los parámetros tercero y cuarto como la ubicación de la esquina opuesta. El parámetro debe ser escrito en MAYÚSCULAS porque Javascript es una lenguaje de programación que distingue entre mayúsculas y minúsculas. -ellipseMode__params__mode = Constante: puede ser CENTER, RADIUS, CORNER, o CORNERS. -noSmooth__description__0 = Dibuja las figuras geométricas con bordes no suaves (aliasing). Notar que smooth() está activo por defecto, así que es necesario ejectuar noSmooth() para deshabilitar el suavizado de las figuras geométricas, imágenes y tipografías. -rectMode__description__0 = Modifica la ubicación en que los rectángulos son dibujados, cambiando la manera en que los parámetros dados a rect() son interpretados. El modo por defecto es rectMode(CORNER), que interpreta los primeros dos parámetros de rect() como la esquina superior izquierda de la figura, mientras que los parámetros tercero y cuarto son su ancho y altura. rectMode(CORNERS) interpreta los dos primeros parámetros de rect() como la ubicación de una esquina, y los parámetros tercero y cuarto como la ubicación de la esquina opuesta. rectMode(CENTER) interpreta los dos primeros parámetros de rect() como el punto central de la figura, mientas que los parámetros tercero y cuarto son su ancho y altura. rectMode(RADIUS) también usa los dos primeros parámetros de rect()= como el punto central de la figura, pero usa los parámetros tercero y cuarto para especificar la mitad del ancho y la altura de la figura. Los parámetros deben ser escritos en MAYÚSCULAS porque Javascript es un lenguaje que distingue entre mayúsculas y minúsculas. -rectMode__params__mode = Constante: puede ser CORNER, CORNERS, CENTER, o RADIUS. -smooth__description__0 = Dibuja todas las figuras geométricas con bordes suaves (sin aliasing). smooth() también mejorará la calidad de las imágenes cuyo tamaño ha sido modificado. Notar que smooth() está activo por defecto; noSmooth() puede ser usado para deshabilitar el suavizado de las figuras geométricas, imágenes y tipografía. -strokeCap__description__0 = Define el estilo de rendering de los extremos de las líneas. Estos extremos pueden ser cuadrados, extendidos o redondeados, cada uno de estos especifados con los parámetros correspondientes: SQUARE, PROJECT, y ROUND. El extremo por defecto es redonedeado (ROUND). -strokeCap__params__cap = Constante: puede ser SQUARE, PROJECT, o ROUND. -strokeJoin__description__0 = Define el estilo de las uniones que conectan segmentos de líneas. Estas uniones pueden ser tipo inglete, biseladas o redondeadas, y especificadas con los parámetros correspondientes: MITER, BEVEL, y ROUND. La unión por defecto es MITER. -strokeJoin__params__join = Constante: puede ser MITER, BEVEL, o ROUND. -strokeWeight__description__0 = Define el ancho del trazo usado para dibujar líneas, puntos y los bordes de las figuras geométricas. Todos los anchos son medidos en pixeles. -strokeWeight__params__weight = Número: el peso (en pixeles) del trazado -bezier__description__0 = Dibuja una curva Bezier cúbica en la pantalla. Estas curvas están definidas por una serie de puntos ancla y de control. Los primeros dos parámetros especifican el primer punto ancla y los dos últimos especifican el otro punto ancla, que se convierten en los puntos primero y último de la curva. Los parámetros en el medio especifican los dos puntos de control que definen la forma de la curva. De forma aproximada, los puntos de control atraen la curva hacia ellos. Las curvas Bezier fueron desarrolladas por el ingeniero automotriz Pierre Bezier, y son comúnmente usadas en gráficas computacionales para definir curvas de pendiente suave. Ver también curve(). -bezier__params__x1 = Número: coordenada x del primer punto ancla -bezier__params__y1 = Número: coordenada y del primer punto ancla -bezier__params__x2 = Número: coordenada y del primer punto de control -bezier__params__y2 = Número: coordenada x del segundo punto de control -bezier__params__x3 = Número: coordenada x del segundo punto ancla -bezier__params__y3 = Número: coordenada y del segundo punto ancla -bezier__params__x4 = Número: coordenada z del primer punto de control -bezier__params__y4 = Número: coordenada z del segundo punto ancla -bezier__params__z1 = Número: coordenada x del primer punto de control -bezier__params__z2 = Número: coordenada y del segundo punto de control -bezier__params__z3 = Número: coordenada z del primer punto ancla -bezier__params__z4 = Número: coordenada z del segundo punto de control -bezierPoint__description__0 = Evalua la curva Bezier en la posición t para los puntos a, b, c, d. Los parámetros a y d son los puntos primero y último de la curva, mientras que b y c son los puntos de control. El parámetro final t varía entre 0 y 1. Esto puede ser realizado una vez con las coordenadas x y una segunda vez con las coordenadas y para obtener la ubicación de la curva Bezier en t. -bezierPoint__returns = el valor de la curva Bezier en la posición t -bezierPoint__params__a = Número: coordenada del primer punto de la curva -bezierPoint__params__b = Número: coordenada del primer punto de control de la curva -bezierPoint__params__c = Número: coordenada del segundo punto de control de la curva -bezierPoint__params__d = Número: coordenada del segundo punto de la curva -bezierPoint__params__t = Número: valor entre 0 y 1 -bezierTangent__description__0 = Evalua la tangente de la curva Bezier en la posición t para los puntos a, b, c, d. Los parámetros a y d son los puntos primero y último de la curva, mientras que b y c son los puntos de control. El parámetro final t varía entre 0 1. -bezierTangent__returns = la tangente en la posición t -bezierTangent__params__a = Número: coordenada del primer punto de la curva -bezierTangent__params__b = Número: coordenada del primer punto de control de la curva -bezierTangent__params__c = Número: coordenada del segundo punto de control de la curva -bezierTangent__params__d = Número: coordenada del segundo punto de la curva -bezierTangent__params__t = Número: valor entre 0 y 1 -curve__description__0 = Dibuja una línea curva en la pantalla entre dos puntos, dados como los cuatro parámetros centrales. Los dos primeros puntos son un punto de control, como si la curva viniera desde este punto, aunque no sea dibujado. Los dos últimos parámetros de forma similar describen el otro punto de control. SE pueden cerar curvas más largas, por medio del posicionamiento de varias funciones curve() juntas o usando curveVertex(). Una función adicional llamada curveTightness() provee control de la calidad visual de la curva. La función curve() es una implementación de la Catmull-Rom spline. -curve__params__x1 = Número: coordenada x del punto de control inicial -curve__params__y1 = Número: coordenada y del punto de control inicial -curve__params__x2 = Número: coordenada y del primer punto -curve__params__y2 = Número: coordenada x del segundo punto -curve__params__x3 = Número: coordenada x del punto de control final -curve__params__y3 = Número: coordenada y del punto de control final -curve__params__x4 = Número: coordenada z del primer punto -curve__params__y4 = Número: coordenada z del segundo punto -curve__params__z1 = Número: coordenada x del primer punto -curve__params__z2 = Número: coordenada y del segundo punto -curve__params__z3 = Número: coordenada z del punto de control inicial -curve__params__z4 = Número: coordenada z del punto de control final -curveTightness__description__0 = Modifica la calidad de las formas creadas con curve() y curveVertex(). El parámetro tightness (tirantez) determina cómo la curva calza con los vértices. El valor 0.0 es el valor por defecto (este valor define las curvas Spline Catmull-Rom) y el valor 1.0 conecta todos los puntos con líneas rectas. Valores en el rango entre -5.0 y 5.0 deformarán las curvas pero las dejarán reconocibles, y a medida que los valores crecen en magnitud, se continuarán deformando. -curveTightness__params__amount = Número: deformación de los vértices originales -curvePoint__description__0 = Evalua la curva en la posición t para los puntos a, b, c, d. El parámetro t varía entre 0 y 1, los puntos a y d son puntos en la cruva, y b y c son los puntos de control. Esto puede ser hecho una vez con las coordenadas x y una segunda vez con las coordenadas y para obtener la ubicación de la curva en t. -curvePoint__returns = el objeto p5 -curvePoint__params__a = Número: coordenada del primer punto de la curva -curvePoint__params__b = Número: coordenada del primer punto de control de la curva -curvePoint__params__c = Número: coordenada del segundo punto de control de la curva -curvePoint__params__d = Número: coordenada del segundo punto de la curva -curvePoint__params__t = Número: valor entre 0 y 1 -curveTangent__description__0 = Evalua la tangente de la curva en la posición t para los puntos a, b, c, d. El parámetro t varía entre 0 y 1, a y d son los puntos de la curva, b y c son los puntos de control. -curveTangent__returns = la tangente en la posición t -curveTangent__params__a = Número: coordenada del primer punto de la curva -curveTangent__params__b = Número: coordenada del primer punto de control de la curva -curveTangent__params__c = Número: coordenada del segundo punto de control de la curva -curveTangent__params__d = Número: coordenada del segundo punto de la curva -curveTangent__params__t = Número: valor entre 0 y 1 -beginContour__description__0 = Usa las funciones beginContour() y endContour() para crear figuras negativas dentro de figuras como el centro de la letra 'O'. beginContour() empieza la grabación de los vértices para la figura y endContour() finaliza la grabación. Los vértices que definen una figura negativa deben ser definidos en la dirección opuesta a la figura exterior. Primero dibuja los vértices de la figura exterior en el orden de las manecillas del reloj, y luego para figuras internas, dibuja vértices en el sentido contrario a las manecillas del reloj. Estas funciones solo pueden ser usadas dentro de un par beginShape()/endShape() y transformaciones como translate(), rotate(), y scale() no funcionan dentro de un par beginContour()/endContour(). Tampoco es posible usar otras figuras, como elupse() o rect() dentro. -beginShape__description__0 = El uso de las funciones beginShape() y endShape() permiten la creación de figuras más complejas. beginShape() empieza la grabación de vértices para una figura, mientras que endShape() termina la grabación. El valor del parámetro kind (tipo) define qué tipo de figuras serán creadas a partir de los vértices. Si no se especifica un modo, la figura puede ser cualquier polígono irregular. Los parámetros disponibles para beginShape() son POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, y QUAD_STRIP. Después de llamar a la función beginShape(), debe ser seguida por una serie de comandos vertex(). Para detener el dibujo de la figura, ejecuta endShape(). Cada figura será dibujada con el color de trazo y el color de relleno actual. Transformaciones como translate(), rotate(), y scale() no funcionan dentro de beginShape(). Tampoco es posible usar otras figuras como ellipse() o rect() dentro de beginShape(). -beginShape__params__kind = Constante: puede ser POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, o QUAD_STRIP -bezierVertex__description__0 = Especifica las coordenadas de un vértice para una curva Bezier. Cada llamada a la función bezierVertex() define la posición de dos puntos de control y un punto ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura. La primera vez que bezierVertex() es usada dentro de una llamada a beginShape(), debe ser antecedida por una llamada a la función vertex() para definir el primer punto ancla. Esta función debe ser usada entre beginShape() y endShape() y solo cuando no se ha especificado el parámetro MODE (modo) a beginShape(). -bezierVertex__params__x2 = Número: coordenada x del primer punto de control la curva -bezierVertex__params__y2 = Número: coordenada y del primer punto de control la curva -bezierVertex__params__x3 = Número: coordenada x del segundo punto de control la curva -bezierVertex__params__y3 = Número: coordenada y del segundo punto de control la curva -bezierVertex__params__x4 = Número: coordenada x del primer punto ancla -bezierVertex__params__y4 = Número: coordenada y del primer punto ancla -curveVertex__description__0 = Especifica las coordenadas de un vértice para una curva. Esta función solo puede ser usada entre beginShape() y endShape() y cuando no se ha especificado el parámetro MODE en la función beginShape(). Los puntos primero y último en una serie de líneas curveVertex() serán usados para guiar el inicio y final de una curva. Un mínimo de cuatro puntos es requerido para dibujar una pequeña curva entre los puntos segundo y tercero, Añadir un quinto punto con curveVertex() dibujará la curva entre los puntos segundo, tercero y cuarto. La función curveVertex() es una implementación de las splines de Catmull-Rom. -curveVertex__params__x = Número: coordenada x del vértice -curveVertex__params__y = Número: coordenada y del vértice -endContour__description__0 = Usa las funciones beginContour() y endContour() para crear figuras negativas dentro de figuras como el centro de la letra 'O'. beginContour() empieza la grabación de los vértices para la figura y endContour() finaliza la grabación. Los vértices que definen una figura negativa deben ser definidos en la dirección opuesta a la figura exterior. Primero dibuja los vértices de la figura exterior en el orden de las manecillas del reloj, y luego para figuras internas, dibuja vértices en el sentido contrario a las manecillas del reloj. Estas funciones solo pueden ser usadas dentro de un par beginShape()/endShape() y transformaciones como translate(), rotate(), y scale() no funcionan dentro de un par beginContour()/endContour(). Tampoco es posible usar otras figuras, como elupse() o rect() dentro. -endShape__description__0 = La función endShape() es compañera de la función beginShape() y solo puede ser ejecutada tras la ejecución de beginShape(). Cuando endshape() es ejecutada, todos los datos de imagen definidos desde la llamada anterior a beginShape() son escritos en el buffer de imagen. La constante CLOSE se usa como valor para el parámetro MODE para cerrar la figura (para conectar el comienzo con el final). -endShape__params__mode = Constante: usa CLOSE para cerrar la figura. -quadraticVertex__description__0 = Especifica las coordenadas de vértices par curvas Bezier cuadráticas. Cada llamada a quadraticVertex() define la posición de uno de los puntos de control y ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura. La primera vez que quadraticVertex() es usada dentro de una llamada a beginShape(), debe ser precedida por una llamada a la función vertex() para definir el primer punto ancla. Esta función debe ser usada entre un par beginShape() y endShape() y solo cuando no se ha especificado el parámetro MODE de beginShape(). -quadraticVertex__description__1 = This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape(). -quadraticVertex__params__cx = Número: coordenada x del punto de control -quadraticVertex__params__cy = Número: coordenada y del punto de control -quadraticVertex__params__x3 = Número: coordenada x del punto ancla -quadraticVertex__params__y3 = Número: coordenada y del punto ancla -vertex__description__0 = Todas las figuras son construidas mediante la conexión de una serie de vértices. vertex() es usado para especificar las coordenadas de los vértices para puntos, líneas, triángulos, cuadriláteros y polígonos. Es usada exclusivamente dentro de un par de funciones beginShape() y endShape(). -vertex__params__x = Número: coordenada x del vértice -vertex__params__y = Número: coordenada y del vértice -HALF_PI__description__0 = HALF_PI es una constante matemática de valor 1.57079632679489661923. Es la mitad de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos(). -PI__description__0 = PI es una constante matemática de valor 3.14159265358979323846. Es la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos(). -QUARTER_PI__description__0 = QUARTER_PI es una constante matemática de valor 0.7853982. Es un cuarto de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos(). -TAU__description__0 = TAU es un alias de TWO_PI, una constante matemática de valor 6.28318530717958647693. Es el doble de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos(). -TWO_PI__description__0 = TWO_PI es una constante matemática de valor 6.28318530717958647693. Es el doble de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos(). -print__description__0 = La función print() escribe en la consola del navegador. Esta función es a menudo de ayuda para observar los datos que un programa está produciendo. Esta función crea una nueva línea de texto por cada ejecución de la función. Elementos individuales pueden ser separados por comillas ('') y unidos con el operador de adición (+). Aunque print() es similar a console.log(), no llama a console.log() directamente, para simular una manera más simple de entender el comportamiento del programa. Por esto mismo, es más lento. Para resultados más rápidos, usar directamente console.log(). -print__params__contents = Cualquiera: cualquier combinación de número, string, objeto, boolean o arreglo a imprimir -frameCount__description__0 = La variable de sistema frameCount contiene el número de cuadros (frames) que se han mostrado desde que el programa empezó a ejecutarse. Dentro de setup() el valor es 0, después de la primera iteración de draw() es 1, etc. -focused__description__0 = Confirma si la ventana de un programa de p5.js está en foco, lo que significa que el bosquejo aceptará entradas desde el ratón o teclado. Esta variable es verdadera (true) si la ventana está en foco y falsa (false) si no. -cursor__description__0 = Define el cursor como un símbolo predeterminado o una imagen, o hace el cursor visible si es que estaba escondido. Si estás tratando de asignar una imagen al cursor, el tamaño recomendado es 16x16 o 32x32 pixeles. No es posible cargar una imagen al cursor si estás exportando tu programa a la Web, y no todos los modos funcionan con todos los navegadores. Los valores de los parámetros x e y deben ser menores a la dimensión de la imagen. -cursor__params__type = Número|Constante: puede ser ARROW, CROSS, HAND, MOVE, TEXT, o WAIT, o la dirección de una imagen -cursor__params__x = Número: el punto activo horizontal del cursor -cursor__params__y = Número: el punto activo vertical del cursor -frameRate__description__0 = Especifica el número de cuadros mostrados por segundo. Por ejemplo, la llamada a la función frameRate(30), tratará de refrescar 30 veces por segundo. Si el procesador no es lo suficientemente rápido para mantener la tasa especificada, la tasa de cuadros por segundo no será lograda. Definir la tasa de cuadros por segundo dentro de setup() es lo recomendable. La tasa por defecto es de 60 veces por segundo. Esto es lo mismo que setFrameRate(val). Llamar a la función frameRate() sin argumentos retorna la tasa actual. Esto es lo mismo que getFrameRate(). Llamar a la función frameRate() con arugmentos que no son de tipo número o no son positivos también retornarán la tasa actual. -frameRate__params__fps = Número: número de cuadros a ser mostrados cada segundo. -noCursor__description__0 = Esconde el cursor. -displayWidth__description__0 = Variable de sistema que almacena el ancho de la pantalla mostrada. Esto es usado para correr un programa a pantalla completa en cualquier dimensión de pantalla. -displayHeight__description__0 = Variable de sistema que almacena la altura de la pantalla mostrada. Esto es usado para correr un programa a pantalla completa en cualquier dimensión de pantalla. -windowWidth__description__0 = Variable de sistema que almacena el ancho interior de la ventana del navegador, equivale a window.innerWidth. -windowHeight__description__0 = Variable de sistema que almacena la altura interior de la ventana del navegador, equivale a window.innerHeight. -windowResized__description__0 = La función windowResized() es llamada cada vez que la ventana del navegador cambia de tamaño. Es un buen lugar para cambiar las dimensiones del lienzo o hacer cualquier otro ajuste necesario para acomodar las nuevas dimensiones de la ventana. -width__description__0 = Variable de sistema que almacena el ancho del lienzo dibujado. Este valor es definido por el primer parámetro de la función createCanvas(). Por ejemplo, la llamada a la función (320, 240) define la variable width al valor 320. El valor por defecto de ancho es de 100 si es que createCanvas() no ha sido usado en el programa. -height__description__0 = ariable de sistema que almacena la altura del lienzo dibujado. Este valor es definido por el primer parámetro de la función createCanvas(). Por ejemplo, la llamada a la función (320, 240) define la variable width al valor 240. El valor por defecto de ancho es de 100 si es que createCanvas() no ha sido usado en el programa. -fullscreen__description__0 = Si se da un argumento, define que el bosquejo esté a pantalla completa basado en el valor del argumento. Si no se da un argumento, retorna el estado actual de pantalla completa. Notar que debido a restricciones del navegador esto solo puede ser llamado con una entrada de parte del usuario, por ejemplo, cuando se presiona el ratón como en el ejemplo. -fullscreen__returns = Boolean: estado de pantalla completa actual -fullscreen__params__val = Boolean: define si el bosquejo debe estar a pantalla completa o no. -pixelDensity__description__0 = Define el escalamiento de pixeles para monitores de alta densidad de pixeles. Por defecto, la densidad de pixeles es definida para calzar con la densidad del monitor, ejecuta pixelDensity() para que no sea así. Llamar a pixelDensity() sin argumentos retorna la densidad de pixeles actual del bosquejo. -pixelDensity__params__val = Número: si es que el bosquejo debe ser escalado y cuánto. -displayDensity__description__0 = Retorna la densidad de pixeles del monitor actual en que el bosquejo está corriendo. -displayDensity__returns = Número: la densidad de pixeles actual del monitor -getURL__description__0 = Retorna la URL actual. -getURL__returns = String: URL -getURLPath__description__0 = Retorna la dirección URL como un arreglo -getURLPath__returns = Arreglo: los componentes de la dirección -getURLParams__description__0 = Retorna los parámetros de la URL actual como un objeto. -getURLParams__returns = Objeto: parámetros de la URL -preload__description__0 = La función preload() es ejecutada antes de setup(), es usada para manejar la carga asíncrona de archivos externos. Si se define una función preload(), setup() esperará hasta que las llamadas a funciones load hayan terminado. Solo se deben incluir instrucciones de carga dentro de preload() (loadImage, loadJSON, loadFont, loadStrings, etc). -setup__description__0 = La función setup() es ejecutada una vez, cuando el programa empieza. Es usada para definir propiedades iniciales como amaño de la pantalla y color de fondo y para cargar medios como imágenes y tipografías cuando el programa empieza. Solo puede haber una función setup() en cada programa y no debe ser llamada después de su ejecución inicial. Nota: las variables declaradas dentro de setup() no son accesibles dentro de otras funciones, como draw(). -draw__description__0 = La función draw() es ejecutada después de setup(), y ejecuta contínuamente las líneas de código dentro de su bloque hasta que el programa es detenido o se ejecuta la función noLoop(). Notar que si noLoop() es ejecutada dentro de setup(), draw() igualmente será ejecutado una vez antes de parar. La función draw() es ejecutada automáticamente y nunca debiera ser ejecutada explícitamente. Siempre debería ser controlada con noLoop(), redraw() y loop(). Después de que noLoop() detiene la ejecución del código dentro de draw(), redraw() causa que el código dentro de draw() se ejecute una vez, y loop() causa que el código dentro de draw() siga ejecutándose de forma continua. El número de veces que draw() se ejecuta por segundo puede ser controlado con la función frameRate(). Solo puede haber una función draw() en cada bosquejo, y draw() solo debe existir si quieres que el código corra de forma continua, o para procesar eventos como mousePressed(). Algunas veces, podrías querer ejecutar una función draw() vacía, como se mostró en el ejemplo más arriba. Es importante notar que el sistema de coordenadas de dibujo será reiniciado al principio de cada ejecución de la función draw(). Si cualquier transformación es hecha dentro de draw() (por ejemplo: escalar, rotar, trasladar), sus efectos serán anulados al principio de cada ejecución de draw(), así que las transformaciones no se acumulan en el tiempo. Por el otro lado, el estilo aplicado (color de relleno, color de trazado) sí se mantendrá en efecto. -remove__description__0 = Remueve el bosquejo de p5 completamente. Esto removerá el lienzo y cualquier otro elemento creado por p5.js. También detendrá el bucle de dibujo y desvinculará cualquier propiedad o método global de la ventana. Dejará una variable p5 en caso que quieras crear un nuevo bosquejo p5. Si quieres, puedes definir p5 = null para borrar esta variable. -boolean__description__0 = Convierte un número o string a su representación en boolean. Para números, cualquier valor distinto de cero (positivo o ne gativo), evalua a true, mientras que cero evalua a falso. Para un string, el valor true evalua a true, mientras que cualquier otro valor evalua a falso. Cuando un arreglo de números o strings es introducido, entonces un arreglo de booleans de la misma longitud es retornado. -boolean__returns = Boolean: representación en formato boolean del valor -boolean__params__n = String|Boolean|Número|Arreglo: valor a procesar -createCanvas__description__0 = Crea un elemento canvas en el documento, y define sus dimensiones medidas en pixeles. Este método debe ser llamado solo una vez al comienzo de la función setup(). Llamar a la función createCanvas() más de una vez en un bosquejo puede resultar en comportamientos impredecibles. Si quieres más de un lienzo donde dibujar, debes usar la función createGraphics() (escondido por defecto, pero puede ser mostrado), Las variables de sistema width (ancho) y height (altura) son definidas por los parámetros pasados a la función. Si createCanvas() no es usado, la ventana tendrá un tamaño por defecto de 100 x 100 pixeles. Para más maneras de posicionar el lienzo, ver la sección de posición del lienzo. -createCanvas__returns = Objeto: lienzo generado -createCanvas__params__w = Número: ancho del lienzo -createCanvas__params__h = Número: altura del lienzo -createCanvas__params__renderer = Constante: P2D o WEBGL -resizeCanvas__description__0 = Redimensiona el linezo al ancho y la altura dados. El lienzo será borrado y la función draw() será llamada inmediatamente, permitiendo que el bosquejo se ajuste al nuevo lienzo -noCanvas__description__0 = Remueve el lienzo por defecto para un bosquejo de p5 que no requiere un lienzo. -createGraphics__description__0 = Crea y retorna un nuevo objeto p5.Renderer. Usa esta clase si necesitas dibujar fuera de pantalla en un buffer gráfico. Los dos parámetros definen el ancho y la altura en pixeles. -createGraphics__returns = buffer gráfico fuera de pantalla -createGraphics__params__w = Número: ancho del buffer gráfico fuera de pantalla -createGraphics__params__h = Número: altura del buffer gráfico fuera de pantalla -createGraphics__params__renderer = Constante: P2D o WEBGL, si no se define es P2D por defecto -blendMode__description__0 = Combina los pixeles en la ventana según el modo definido. Existen distintas maneras de combinar los pixeles de la fuente (A) con los ya existentes en la pantalla mostrada (B). TODO -blendMode__params__mode = Constante: modo de combinar del lienzo -noLoop__description__0 = Detiene la ejecución continua del código de draw() de p5.js. Si se llama a la función loop(), el código dentro de draw() empieza a correr de forma continua nuevamente. Si se usa noLoop() dentro de setup(), debe ser la última línea de código dentro del bloque. Cuando se usa noLoop(), no es posible manipular o acceder a la pantalla dentro de las funciones que manejan eventos como mousePressed() o keyPressed(). En vez de eso, usa estas funciones para llamar a redraw() o loop(), que permitirán la ejecución de draw(), lo que permite el refresco correcto de la pantalla. Esto significa que cuando noLoop() ha sido ejecutado, no se sigue dibujando, y funciones como saveFrame() o loadPixels() no se pueden usar. Notar que si el bosquejo es escalado, redraw() será llamado para actualizar el bosquejo, incluso si noLoop() ha sido ejecutada. Por otro lado, el bosquejo entrará a un estado singular, hasta que loop() sea ejecutado. -loop__description__0 = Por defecto, p5.js repite de forma continua la función draw(), ejecutado el código dentro de su bloque. Sin embargo, el bucle de dibujo puede ser detenido llamando a la función noLoop(). En ese caso, el bucle de draw() puede ser retomado con loop(). -push__description__0 = La función push() graba la configuración actual de estilo de dibujo, y pop() restaura esta configuración. Notar que estas funciones siempre son usadas en conjunto. Permiten cambiar las configuraciones de estilo y transformaciones y luego volver a lo que tenías. Cuando un nuevo estado es iniciado con push(), construye encima de la información actual de estilo y transformación. Las funciones push() y pop() pueden ser embebidas para proveer más control (ver el segundo ejemplo para una demostración). push() almacena información relacionada a la configuración de estado de transformación y de estulo actual, controlada por las siguientes funciones: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading(). -pop__description__0 = La función push() graba la configuración actual de estilo de dibujo, y pop() restaura esta configuración. Notar que estas funciones siempre son usadas en conjunto. Permiten cambiar las configuraciones de estilo y transformaciones y luego volver a lo que tenías. Cuando un nuevo estado es iniciado con push(), construye encima de la información actual de estilo y transformación. Las funciones push() y pop() pueden ser embebidas para proveer más control (ver el segundo ejemplo para una demostración). push() almacena información relacionada a la configuración de estado de transformación y de estulo actual, controlada por las siguientes funciones: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading(). -redraw__description__0 = Ejecuta una vez el código dentro de la función draw(). Esta función permite al programa actualizar la ventana mostrada solamente cuando es necesario, por ejemplo, cuando un evento registrado por mousePressed() o keyPressed() ocurre. En la estructura de un programa, solo hace sentido llamar a redraw() dentro de eventos como mousePressed(). Esto es porque redraw() no hace que draw() se ejecute de forma inmediata (solo define una indicación de que se necesita un refresco). La función redraw() no funciona de forma correcta cuando se llama dentro de la función draw(). Para habilitar y deshabilitar animaciones, usa las funcioens loop() y noLoop(). Adicionalmente, puedes definir el número de veces que se dibuja por cada llamada a este método. Para esto, añade un entero como parámetro único a la función, que señale cuántas veces se requiere dibujar. -redraw__params__n = Entero: redibuja n-veces. Por defecto el valor es 1 -applyMatrix__description__0 = Multiplica la matriz actual por la especificada según los parámetros. Esto es muy lento porque tratará de calcular el inverso de la transformada, así que evítalo cuando sea posible -applyMatrix__params__a = Número: números que definen la matriz 3x2 a multiplicar -applyMatrix__params__b = Número: números que definen la matriz 3x2 a multiplicar -applyMatrix__params__c = Número: números que definen la matriz 3x2 a multiplicar -applyMatrix__params__d = Número: números que definen la matriz 3x2 a multiplicar -applyMatrix__params__e = Número: números que definen la matriz 3x2 a multiplicar -applyMatrix__params__f = Número: números que definen la matriz 3x2 a multiplicar -resetMatrix__description__0 = Reemplaza la matriz actual con la matriz identidad -rotate__description__0 = Rota una figura según el monto especificado por el parámetro ángulo. Esta función toma en cuenta el modo de ángulo definido por angleMode(), así que los ángulos pueden ser ingresados en radianes o grados. Los objetos son siempre rotados según su posición relativa al origen y los números positivos rotan en la dirección de las manecillas del reloj. Las transformaciones se aplican a todo lo que ocurre de forma posterior y las subsecuentes llamadas a la función acumulan el efecto. Por ejemplo, llamar a la función rotate(HALF_PI) y luego rotate(HALF_PI) equivale a una llamada a rotate(PI). Todas las transformaciones son anuladas cuando la función draw() comienza nuevamente. Técnicamente, rotate() multiplica la matriz de transformación actual por una matriz de rotación. Esta función puede ser controlada además con las funciones push() y pop(). -rotate__params__angle = Ángulo: el ángulo de rotación, especificado en radianes o grados, dependiendo de angleMode() -rotate__params__axis = p5.Vector|Arreglo: eje sobre el que se rota -rotateX__description__0 = Rota en torno al eje X -rotateX__params__angle = Número: ángulo en radianes -rotateY__description__0 = Rota en torno al eje Y -rotateY__params__angle = Número: ángulo en radianes -rotateZ__description__0 = Rota en torno al eje Z,. Sólo disponible en el modo WEBGL. -rotateZ__params__angle = Número: ángulo en radianes -scale__description__0 = Aumenta o decrementa el tamaño de una figura por medio de expandir o contraer sus vértices. Los objetos siempre escalan desde su origen relativo al sistema de coordenadas. Los valores de escalamiento son porcentajes decimales. Por ejemplo, la llamada a la función scale(2.0) aumenta la dimensión de una figura en un 200%. Las transformaciones se aplican a todo lo que ocurre después y llamadas subsecuentes a la función multiplican el efecto. Por ejemplo, llamar a scale(2.0) y luego a scale(1.5) equivale a llamar a scale(3.0). Si la función scale() es llamad dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. El uso de esta función con el parámetro z está solo disponible en el modo WEBGL. Esta función puede también ser controlada con las funciones push() y pop(). -scale__params__s = Número | p5.Vector| Arreglo: porcentaje a escalar del objeto, o porcentaje a esacalar del objeto en el eje x si se dan múltiples argumentos -scale__params__y = Número: porcentaje a escalar el objeto en el eje y -scale__params__z = Número: porcentaje a escalar el objeto en el eje z (sólo en modo WEBGL) -shearX__description__0 = Corta la figura en torno al eje x según el monto especificado por el parámetro ángulo. Los ángulos deben ser especificados según el modo actual de ángulo angleMode(). Los objetos son siempre cortados según su posición relativa al origen y los números positivos cortan los objetos en la dirección de las manecillas del reloj. Las transformaciones aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a shearX(PI/2) y luego a shearX(PI/2) equivale a llamar a shearX(PI). Si shearX() es llamado dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. Técnicamente, shearX() multiplica la matriz de transformación actual por una matriz de rotación. La función puede ser controlada con las funciones push() y pop(). -shearX__params__angle = Número: ángulo de corte especificado en radianes o grados, dependiendo del modo de ángulo actual angleMode() -shearY__description__0 = Corta la figura en torno al eje y según el monto especificado por el parámetro ángulo. Los ángulos deben ser especificados según el modo actual de ángulo angleMode(). Los objetos son siempre cortados según su posición relativa al origen y los números positivos cortan los objetos en la dirección de las manecillas del reloj. Las transformaciones aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a shearY(PI/2) y luego a shearY(PI/2) equivale a llamar a shearY(PI). Si shearY() es llamado dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. Técnicamente, shearY() multiplica la matriz de transformación actual por una matriz de rotación. La función puede ser controlada con las funciones push() y pop(). -shearY__params__angle = Número: ángulo de corte especificado en radianes o grados, dependiendo del modo de ángulo actual angleMode() -translate__description__0 = Especifica una cantidad a desplazar los objetos dentro de la ventana mostrada. El parámetro x especifica la traslación de izquierda a derecha, el parámetro y especifica la traslación de arriba a abajo. Las transformaciones son acumulativas y aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a translate(50, 0) y luego a translate(20, 0) equivale a llamar a translate(70, 0). Si translate() es llamado dentro de draw(), la transformación es anulada cada vez que el bucle empieza nuevamente. Esta función peude ser controlada con las funciones push() y pop(). -translate__params__x = Número: traslación izquierda-derecha -translate__params__y = Número: traslación arriba-abajo -translate__params__z = Número: traslación adelante-atrás (solo en modo WEBGL) -createStringDict__returns = p5.StringDict: -createStringDict__params__key = String -createStringDict__params__value = String -createNumberDict__returns = p5.NumberDict: -deviceOrientation__description__0 = La variable de sistema deviceOrientation siempre contiene la orientación del dispositivo. El valor de esta variable será o landscape (paisaje) o portrait (retrato). Si la información no está disponible, su valor será undefined. -accelerationX__description__0 = La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje X. El valor es representado en unidades de metros por segundo al cuadrado. -accelerationY__description__0 = La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje Y. El valor es representado en unidades de metros por segundo al cuadrado. -accelerationZ__description__0 = La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje Z. El valor es representado en unidades de metros por segundo al cuadrado. -pAccelerationX__description__0 = La variable de sistema pAccelerationX siempré contiene la aceleración del dispositivo en el eje X, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado. -pAccelerationY__description__0 = La variable de sistema pAccelerationY siempré contiene la aceleración del dispositivo en el eje Y, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado. -pAccelerationZ__description__0 = La variable de sistema pAccelerationZ siempré contiene la aceleración del dispositivo en el eje Z, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado. -rotationX__description__0 = La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje x. El valor está representado entre 0 y +/-180 grados. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado. -rotationY__description__0 = La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje x. El valor está representado entre 0 y +/-180 grados. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado. -rotationZ__description__0 = La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje y. El valor está representado entre 0 y 360 grados. A diferencia de rotationX y rotationY, esta variable está solo disponible en dispositivos equipados con una brújula interna. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado. -pRotationX__description__0 = La variable de sistema pRotationX siempre contiene la rotación del dispositivo en el eje x, en el cuadro anterior al actual. El valor está representado entre 0 y +/-180 grados. pRotationX puede ser usado en conjunto con rotationX para determinar la dirección de rotación del dispositivo a lo largo del eje x. -pRotationY__description__0 = La variable de sistema pRotationY siempre contiene la rotación del dispositivo en el eje x, en el cuadro anterior al actual. El valor está representado entre 0 y +/-90 grados. pRotationY puede ser usado en conjunto con rotationY para determinar la dirección de rotación del dispositivo a lo largo del eje y. -pRotationZ__description__0 = La variable de sistema pRotationZ siempre contiene la rotación del dispositivo en el eje z, en el cuadro anterior al actual. El valor está representado entre 0 y 359 grados. pRotationZ puede ser usado en conjunto con rotationZ para determinar la dirección de rotación del dispositivo a lo largo del eje z. -setMoveThreshold__description__0 = La función setMoveThreshold() es usada para definir el umbral para detectar movimiento de la función deviceMoved(). El valor umbral por defecto es 0.5 -setMoveThreshold__params__value = Número: el valor umbral -setShakeThreshold__description__0 = La función setShakeThreshold() es usada para definir el umbral para detectar agitamiento de la función deviceShaken(). El valor umbral por defecto es 30. -setShakeThreshold__params__value = Número: el valor umbral -deviceMoved__description__0 = La función deviceMoved() es llamada cuando el dispositivo es movido en una cantidad mayor al valor umbral en el eje X, Y o Z. El valor umbral por defecto es 0.5 -deviceTurned__description__0 = La función deviceTurned() es llamada cuando el dispositivo es girado en más de 90 grados de modo continuo. El eje que gatilla la función deviceTurned() es almacenado en la variable turnAxis. El método deviceTurned() puede ser restringido para gatillar en cualquier eje: X, Y o Z, comparando la variable turnAxis con X, Y o Z. -deviceShaken__description__0 = La función deviceShaken() es llamada cuando la aceleración total de los cambios de accelerationX y accelerationY son mayores al valor umbral. El valor umbral por defecto es 30 -keyIsPressed__description__0 = La variable boolean de sistema keyIsPressed es verdadera (true) cuando cualquier tecla es presionada y falsa (false) si no hay ninguna tecla presionada -key__description__0 = La variable de sistema key siempre contiene el valor más reciente de la tecla del teclado presionada. Para tener los mejores resultados, es mejor usarla dentro de la función keyTyped(). Para teclas sin valor ASCII, usa la variable keyCode -keyCode__description__0 = La variable keyCode es usada para detectar teclas especiales, como BACKSPACE, DELETE, ENTER, RETURN, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. También puedes revisar las teclas especiales buscando el código keyCode de cualquier tecla en internet. -keyPressed__description__0 = La función keyPressed() es llamada una vez cada vez que una tecla es presionada. El código keyCode de la tecla presionada es almacenado en la variable keyCode. Para las teclas sin valor ASCII, usa la variable keyCode. Puedes comprobar si la variable keyCode es igual a BACKSPACE, DELETE, ENTER, RETURN, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. Para las teclas con valor ASCII que son presionadas, el valor es almacenado en la variable key. Sin embargo, no distingue entre letras mayúsculas y minúsculas. Por esta razón, es recomendable usar la función keyTyped() para leer la variable key, que sí distingue entre mayúsculas y minúsculas. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método. -keyReleased__description__0 = La función keyReleased() es llamada una vez cada vez que una tecla es soltada. Ver key y keyCode para más información. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método. -keyTyped__description__0 = la función keyTyped es llamada cava vez que una tecla es presionada, excepto cuando son presionadas la steclas de acción como Ctrl, Shift y Alt, que son ignoradas. La tecla presionada más reciente será almacenada en la variable key. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método. -keyIsDown__description__0 = La función keyIsDown() comprueba si la tecla está presionada. Puede ser usada si tienes un objeto que se mueve, y quieres que varias teclas sean capaces de afectar este comportamiento de manera simultánea, como cuando mueves una imagen de forma diagonal. Puedes ingresar cualquier número representando el código de tecla keyCode de la tecla, o usar cualquier de los nombres de la variable keyCode. -keyIsDown__returns = el objeto p5 -keyIsDown__params__code = Número: la tecla a buscar -mouseX__description__0 = La variable de sistema mouseX siempre contiene la posición horizontal actual del ratón, relativa al origen (0, 0) del lienzo. -mouseY__description__0 = La variable de sistema mouseY siempre contiene la posición vertical actual del ratón, relativa al origen (0, 0) del lienzo. -pmouseX__description__0 = La variable de sistema pmouseX siempre contiene la posición horizontal actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) del lienzo. -pmouseY__description__0 = La variable de sistema pmouseY siempre contiene la posición vertical actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) del lienzo. -winMouseX__description__0 = La variable de sistema winMouseX siempre contiene la posición horizontal actual del ratón, relativa al origen (0, 0) de la ventana del navegador. -winMouseY__description__0 = La variable de sistema winMouseY siempre contiene la posición vertical actual del ratón, relativa al origen (0, 0) de la ventana del navegador. -pwinMouseX__description__0 = La variable de sistema pwinMouseX siempre contiene la posición horizontal actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) de la ventana del navegador. -pwinMouseY__description__0 = La variable de sistema pwinMouseY siempre contiene la posición vertical actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) de la ventana del navegador. -mouseButton__description__0 = P5.js automáticamente rastrea si el botón del ratón está presionado y cuál botón está presionado. El valor de la variable de sistema mouseButton es o LEFT, RIGHT o CENTER dependiendo de cual fue el último botón presionado. Advertencia: diferentes navegadores pueden diferir. -mouseIsPressed__description__0 = La variable boolean de sistema mouseIsPressed es verdadera (true) si el ratón está siendo presionado, y falsa (false) en caso contrario. -mouseMoved__description__0 = La función mouseMoved() es llamada cada vez que el ratón se mueve y un botón del ratón no está siendo presionado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. -mouseDragged__description__0 = La función mouseDragged() es llamada cada vez que el ratón se mueve y un botón del ratón está siendo presionado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. -mousePressed__description__0 = La función mousePressed() es llamada cada vez que un botón del ratón está siendo presionado. La variable mouseButton (ver la referencia) puede ser usada para determinar cual botón está siendo presionado. Si no se define una función mousePressed(), la función touchStarted() será llamada en su reemplazo, si es que está definida. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. -mouseReleased__description__0 = La función mouseReleased() es llamada cada vez que un botón del ratón es soltado. Si no se define una función mouseReleased(), la función touchEnded() será llamada en su reemplazo, si es que está definida. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. -mouseClicked__description__0 = La función mouseClicked() es llamada cada vez que un botón del ratón es presionado y luego soltado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. -mouseWheel__description__0 = La función mouseWheel() es llamada cada vez que se detecta un evento de rueda de ratón vertical, ya sea gatillado por un ratón o por un touchpad. La propiedad event.delta retorna el monto que el ratón ha avanzado. Estos valores pueden ser positivos o negativos, dependiendo de la dirección de navegación (en OS X con natural scrolling, los signos son invertidos). Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. Debido al soporte actual del evento wheel en Safari, la función podría solo funcionar si return false es incluido cuando se usa Safari. -touchStarted__description__0 = La función touchStarted() es llamada una vez, cada vez que un toque nuevo es registrado. Si la función touchStarted() no ha sido definida, la función mouseIsPressed() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método. -touchMoved__description__0 = La función touchStarted() es llamada una vez, cada vez que es registrado el movimiento de un toque. Si la función touchMoved() no ha sido definida, la función mouseDragged() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método. -touchEnded__description__0 = La función touchEnded() es llamada una vez, cada vez que un toque finaliza. Si la función touchEnded() no ha sido definida, la función mouseReleased() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método. -createImage__description__0 = Crea una nueva p5.Image (el tipo de datos para almacenar imágenes). Esto provee un nuevo buffer de pixeles para jugar. Define el tamaño del buffer con los parámetros de ancho y altuar. .pixels da acceso a un arreglo conteniendo los valores de todos los pixeles en la ventana mostrada. Estos valores son números. Este arreglo es del tamaño (incluyendo un factor apropiado de pixelDensity) de la ventana mostrada x4, representando los valroes R, G, B, A en orden para cada pixel., moviendo de izquierda a derecha en cada fila, y luego bajando de columna. Ver .pixels para mayor información. Podría ser más simple usar set() y get(). Antes de acceder a los pixeles de una imagen, los datos deben ser cargados con la función loadPixels(). Después de que el arreglo de datos ha sido modificado, la función updatePixels() debe ejecutarse para actualizar los cambios. -createImage__returns = el objeto p5 -createImage__params__width = Entero: ancho en pixeles -createImage__params__height = Entero: altura en pixeles -saveCanvas__description__0 = Graba el lienzo actual como una imagen. En Safari, esto abrirá la imagen en la ventana y el usuario deberá proveer su propio nombre de archivo. Otros navegadores o grabarán el archivo de inmediato, o abrirán una ventana de diálogo. -saveCanvas__params__selectedCanvas = Canvas seleccionado: una variable representando un canvas HTML5 específico (opcional) -saveCanvas__params__filename = String -saveCanvas__params__extension = String: jpg o png -saveFrames__description__0 = Captura una secuencia de cuadros que pueden ser usados para crear una película. Acepta una función callback. Por ejemplo, puedes querer mandar los cuadros a un servidor donde pueden ser almacenados o convertidos en una película. Si no se provee una función callback, el navegador abrirá varios diálogos tratando de descargar todas las imágenes que han sido creadas. Con una función callback provista, los datos de imagen no son grabados por defecto, sino que son pasados como argumento a la función callback como un arreglo de objetos, con el tamaño del arreglo siendo igual al número total de cuadros. -saveFrames__description__1 = Note that saveFrames() will only save the first 15 frames of an animation. To export longer animations, you might look into a library like ccapture.js. -saveFrames__params__filename = String: -saveFrames__params__extension = String: jpg o png -saveFrames__params__duration = Número: duración en segundos para grabar los cuadros -saveFrames__params__framerate = Número: tasa de cuadros por segundo a grabar -saveFrames__params__callback = Función: una función callback que será ejecutada para manejar los datos de imagen. Esta función deberá aceptar un arreglo como argumento. El arreglo contendrá el número especificado de cuadros como objetos. Cada objeto tiene tres propiedades: datos de imagen imageData, nombre del archivo y extensión -loadImage__description__0 = Carga una imagen desde una ruta de archivo y crea un objeto p5.Image. La imagen puede no estar inmediatamente disponible para render. Si quieres asegurarte que esté lista antes de hacer algo con ella, ubica la función loadImage() dentro de preload(). También puedes proveer una función callback para manejar la imagen cuando esté lista. La ruta a la imagen debe ser relativa al archivo HTML de tu bosquejo. Cargar desde una URL u otra ubicación remota podría estar bloqueado por las opciones de seguridad del navegador. -loadImage__returns = el objeto p5 -loadImage__params__path = String: ruta de la imagen a cargar -loadImage__params__successCallback = Función(p5.Image): función a ser llamada una vez que la imagen sea cargada. Le será pasado el objeto p5.Image -loadImage__params__failureCallback = Función(evento): llamada con el evento error si es que la carga de la imagen falla. -image__description__0 = Dibuja una imagen en el lienzo principal del bosquejo p5.js. -image__params__img = p5.Image: la imagen a mostrar -image__params__x = Número: la coordenada x donde se ubicará la esquina superior de la imagen -image__params__y = Número: la coordenada y donde se ubicará la esquina superior de la imagen -image__params__width = Número: ancho de la imagen a dibujar -image__params__height = Número: altura de la imagen a dibujar -image__params__dx = Número: la coordenada x en el lienzo de destino donde se ubicará la esquina superior izquierda de la imagen -image__params__dy = Número: la coordenada y en el lienzo de destino donde se ubicará la esquina superior izquierda de la imagen -image__params__dWidth = Número: ancho de la imagen a dibujar en el lienzo de destino -image__params__dHeight = Número: altura de la imagen a dibujar en el lienzo de destino -image__params__sx = Número: la coordenada x de la esquina superior izquierda del subrectángulo de la imagen original a dibujar en el lienzo de destino -image__params__sy = Número: la coordenada y de la esquina superior izquierda del subrectángulo de la imagen original a dibujar en el lienzo de destino -image__params__sWidth = Número: el ancho del subrectángulo de la imagen original a dibujar en el lienzo de destino -image__params__sHeight = Número: la altura del subrectángulo de la imagen original a dibujar en el lienzo de destino -tint__description__0 = Define el valor de relleno para mostrar imágenes. Las imágenes pueden ser teñidas en colores específicos o hacerse transparentes al incluir un valor alpha. Para aplicar transparencia a una imagen sin afectar su color, usa blanco como color de teñido y especifica un valor alpha. Por ejemplo, tint(255, 128) hará una imagen 50% transparente (asumiendo el rango alpha por defecto entre 0 y 255, el que puede ser modificado con la función colorMode()). El valor del parámetro gris debe ser menor o igual al actual valor máximo según lo especificado por colorMode(). El valor máximo por defecto es 255. -tint__params__v1 = Número|Arreglo: valor de gris, rojo o tinte (dependiendo del modo de color actual), o un arreglo de colores -tint__params__v2 = Número|Arreglo: valor de verde o saturación (dependiendo del modo de color actual) -tint__params__v3 = Número|Arreglo: valor de azul o brillo (dependiendo del modo de color actual) -tint__params__alpha = Número|Arreglo: opacidad del fondo -noTint__description__0 = Remueve el valor actual de relleno para mostrar imágenes y revierte a mostrar las imágenes con sus colores originales. -imageMode__description__0 = Define el modo de imagen. Modifica la ubicación desde la que las imágenes son dibujadas, por medio de cambiar la manera en que los parámetros dados a image() son interpretados. El modo por defecto es imageMode(CORNER), que interpreta los paráemtros segundo y tercero de image() como la posición de la esquina superior izquierda de la imagen. Si se dan dos parámetros adicionales, son usados para definir el ancho y la altura la imagen. imageMode(CORNERS) interpreta los paráemtros segundo y tercero de image() como la ubicación de una esquina, y los parámetros cuarto y quinto como la ubicación de la esquina opuesta. imageMode(CENTER) interpreta los parámetros segundo y tercero de image() como el punto central de la imagen. Si dos parámetros adicionales son especificados, son usados para definir el ancho y la altura de la imagen. -imageMode__params__mode = Constante: puede ser CORNER, CORNERS, o CENTER -blend__description__0 = Copia una región de pixeles de una imagen a otra, usando un modo específico de mezcla para hacer la operación. Los modos disponibles de mezcla son: BLEND | DARKEST | LIGHTEST | DIFFERENCE | MULTIPLY| EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT | SOFT_LIGHT | DODGE | BURN | ADD | NORMAL -blend__params__srcImage = p5.Image: imagen fuente -blend__params__sx = Entero: coordenada x de la esquina superior izquierda de la fuente -blend__params__sy = Entero: coordenada y de la esquina superior izquierda de la fuente -blend__params__sw = Entero: ancho de la imagen fuente -blend__params__sh = Entero: altura de la imagen fuente -blend__params__dx = Entero: coordenada x de la esquina superior izquierda del destino -blend__params__dy = Entero: coordenada y de la esquina superior izquierda del destino -blend__params__dw = Entero: ancho de la imagen destino -blend__params__dh = Entero: altura de la imagen destino -blend__params__blendMode = Constante: el modo de mezcla -copy__description__0 = Copia una región del lienzo a otra región del lienzo desde una imagen usada como el parámetro srcImage en el lienzo. Si la fuente y el destino no son del mismo tamaño, automáticamente redimensionará los pixeles de la fuente para calzar con la región especificada como destino. -copy__params__srcImage = p5.Image: imagen fuente -copy__params__sx = Entero: coordenada x de la esquina superior izquierda de la fuente -copy__params__sy = Entero: coordenada y de la esquina superior izquierda de la fuente -copy__params__sw = Entero: ancho de la imagen fuente -copy__params__sh = Entero: altura de la imagen fuente -copy__params__dx = Entero: coordenada x de la esquina superior izquierda de destino -copy__params__dy = Entero: coordenada y de la esquina superior izquierda de destino -copy__params__dw = Entero: ancho de la imagen de destino -copy__params__dh = Entero: altura de la imagen de destino -filter__description__0 = Aplica un filtro al lienzo. Las opciones posibles son: THRESHOLD, que convierte la imagen a pixeles blancos y negros dependiendo de si están arriba o abajo del umbral definido por el parámetro. El parámetro debe estar entre 0.0 (negro) y 1.0 (blanco). Si no se especifica ningún valor, el valor por defecto es 0.5. GRAY, convierte cualquier color en la imagen a un equivalente en la escala de grises, no tiene parámetros. OPAQUE, hace que el canal alpha sea totalmente opaco, no tiene parámetros. INVERT, hace que cada pixel tenga su valor inverso, no tiene parámetros. POSTERIZE, limita cada canal de la imagen a un número de colores especificado como parámetro. El parámetro puede definir entre 2 y 255 valores, pero los resultados más notorios se dan con valores bajos. BLUR, hace que la imagen sea borrosa con un proceso Gaussiano, siendo el parámetro el nivel de cuán borroso es el resultado, si no se usa ningún parámetro, el parámetro por defecto es 1, a mayores valores es más borroso el resultado. ERODE, reduce las áreas claras, no tiene parámetros. DILATE, aumenta las áreas claras, no tiene parámetros. -filter__params__filterType = Constante: -filter__params__filterParam = Número: un parámetro opcional único a cada filtro, ver más arriba -get__description__0 = Retorna un arreglo de valores RGBA por cada pixel o toma una sección de una imagen. Si no especifican parámetros, se retorna la imagen entera. Usa los parámetros x e y para obtener el valor de un pixel. Toma una sección de la ventana mostrada si especificas los parámetros adicionales w y h. Cuando se obtiene una imagen, los parámetros x e y definen las coordenadas de la esquina superior izquierda de la imagen, sin importar el actual mode imagen definido por imageMode(). Si el pixel solicitado está fuera de la imagen, se retorna el valor [0, 0, 0, 255]. Para obtener los números escalados según los rangoes de color actuales y tomar en cuenta el modo de color según colorMode(), usa getColor() en vez de get(). Tomar el valor de un pixel con get(x, y) es fácil, pero no tan rápido como tomar los datos directamente desde pixels[]. La instrucción equivalente a get(x, y) usando pixels[] con densidad de pixeles d es var off = (y width + x) d * 4; [pixels[off], pixels[off+1], pixels[off+2], pixels[off+3]]. Ver la referencia de pixels[] para mayor información. -get__returns = Arreglo|p5.Image: valores de pixel en la posición (x, y) en formato arreglo RGBAs o p5.Image -get__params__x = Número: coordenada x del pixel -get__params__y = Número: coordenada y del pixel -get__params__w = Número: ancho -get__params__h = Número: altura -loadPixels__description__0 = Carga los datos de los pixeles en pantalla al arreglo pixels[]. Esta función siempre debe ser llamada antes de leer o escribir en el arreglo pixels[] -set__description__0 = Cambia el color de cualquier pixel, o pone una imagen directamente en la ventana. Los parámetros x e y especifican el pixel a cambiar y c especifica el valor del color. Puede ser un objeto p5.Color o un arreglo de pixeles RGBA. También puede ser un valor único en escala de grises. Cuando se define una imagen, los parámetros x e y definen las coordenadas de la esquina superior izquierda de la imagen, sin importar el modo actual de imagen según imageMode(). Después de usar set(), debes llamar a updatePixels()' para que tus cambios aparezcan. Esta función debería ser llamada una vez que todos los pixeles han sido definidos. Definir el color de un solo pixel con set(x, y) es fácil, pero es tan rápido como poner los datos directamente en el arreglo pixels[]. Definir los valores de pixels[] directamente puede ser complicado cuando se trabaja con un monitor retina, pero tendrá un mejor desempeño cuando muchos pixeles necesiten ser definidos directamente en cada iteración. Ver la referencia de pixels[] para mayor información. -set__params__x = Número: coordenada x del pixel -set__params__y = Número: coordenada y del pixel -set__params__c = Número|Arreglo|Objeto: inserta un valor en escala de grises | un arreglo de pixeles | un objeto p5.Color | un objeto p5.Image a copiar -updatePixels__description__0 = Actualiza la ventana mostrada con los datos del arreglo pixels[]. Se usa en conjunto con loadPixels(). Si solo estás leyendo pixeles desde el arreglo, no hay necesidad de llamar a updatePixels() - actualizar es solo necesario para aplicar cambios. updatePixels() debe ser llamada cada vez que el arreglo de pixeles es manipulado o si se llama a la función set(). -updatePixels__params__x = Número: coordenada x de la esquina superior izquierda de la región a actualizar -updatePixels__params__y = Número: coordenada y de la esquina superior izquierda de la región a actualizar -updatePixels__params__w = Número: ancho de la región a actualizar -updatePixels__params__h = Número: altura de la región a actualizar -loadJSON__description__0 = Carga un archivo JSON desde un archivo o una URL, y retorna un objeto o un arreglo. Este método es asíncrono, lo que significa que puede que no termine antes que se ejecute la siguiente línea en tu bosquejo. -loadJSON__returns = Objeto|Arreglo: datos JSON -loadJSON__params__path = String: nombre de archivo o URL a cargar -loadJSON__params__datatype = Función: función a ser ejecutada después de que loadJSON() finalice, los datos son pasados como primer argumento -loadJSON__params__callback = Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento -loadJSON__params__errorCallback = String: json o jsonp -loadStrings__description__0 = Lee los contenidos de un archivo y crea un arreglo de Strings de sus líneas individuales. Si el nombre del archivo es usado como parámetro, como en el ejemplo anterior, el archivo debe estar ubicado en el directorio del bosquejo. Alternativamente, el archivo puede ser cargado desde cualquier lugar del computador local usando una dirección absoluta (empieza con / en Unix y Linux, o una letra representando el disco en Windows), o el parámetro de nombre de archivo puede ser una URL donde esté el archivo dentro de una red. Este método es asíncrono, lo que significa que puede ser que su ejecución no termine antes de que se ejecute la siguiente línea del bosquejo. -loadStrings__returns = Arreglo: un arreglo de Strings -loadStrings__params__filename = String: nombre de archivo o URL a cargar -loadStrings__params__callback = Función: función a ser ejecutada después de que loadStrings() finalice, el arreglo es pasado como primer argumento -loadStrings__params__errorCallback = Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento -loadTable__description__0 = Lee los contenidos de un archivo o URL y crea un objeto p5.Table con sus valores. Si un archivo es especificado, debe ser ubicado en el directorio data del bosquejo. El parámetro de nombre de archivo puede también ser una URL de un archivo en línea. Por defecto, se asume que el archivo está separado por comas (formato CSV), La tabla sólo busca una fila de encabezado si es que se incluye la opción header. Las opciones posibles incluyen: csv: se procesan los datos como valores separados por comas, tsv: se procesan los datos como separados por tabulación, header: la tabla tiene una fila de encabezados (títulos). Si se incluyenn múltiples opciones, se deben ingresar como parámetros separados por comas. Todos los archivos son cargados y grabados usando codificación UTF-8. Este método es asíncrono, lo que significa que su ejecución puede no haber terminado antes de que se ejecute la siguiente línea del bosquejo. Si se llama a loadTable() dentro de preload() se garantiza que se complete la operación antes de que setup() y draw() sean llamadas. Fuera de preload(), puedes suplir una función callback para manejar el objeto. -loadTable__returns = Objeto Table conteniendo los datos -loadTable__params__filename = String: nombre de archivo o URL a cargar -loadTable__params__callback = String|Strings: header, csv, tsv -loadTable__params__errorCallback = Función: función a ser ejecutada después de que loadTable() finalice, el arreglo es pasado como primer argumento. Si es exitosa, el objeto Table es pasado como primer argumento, en caso contrario se pasa el valor boolean false. -loadXML__description__0 = Lee los contenidos de un archivo y crea un objeto XML con sus valores. Si el nombre del archivo es usado como parámetro, el archivo debe estar ubicado en el directorio del bosquejo. Alternativamente, el archivo puede ser cargado desde cualquier lugar del computador local usando una dirección absoluta (que empieza con / en Unix y Linux, o con una letra que simbolice el disco duro en Windows). También se puede usar como parámetro de nombre de archivo una URL para un archivo en una red. Este método es asíncrono, lo que significa que su ejecución puede no estar completa antes de que se ejecute la siguiente línea de código en el bosquejo. Llamar a loadXML() dentro de preload() garantiza que la operación se complete antes de que setup() y draw() sean llamados. Fuera de preload(), puedes suplir una función callBack para manejar el objeto. -loadXML__returns = objeto XML que contiene los datos -loadXML__params__filename = String: nombre de archivo o URL a cargar -loadXML__params__callback = Función: función a ser ejecutada después de que loadXML() finalice, el objeto XML es pasado como primer argumento -loadXML__params__errorCallback = Función: la función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento -httpGet__description__0 = Método para ejecutar una solicitud HTTP GET. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto. -httpGet__returns = el objeto p5 -httpGet__params__path = String: nombre del archivo o URL a cargar -httpGet__params__datatype = Objeto: parámetro de datos pasados con la solicitud enviada -httpGet__params__data = String: json, jsonp, xml o text -httpGet__params__callback = Función: función a ser ejecutada después de que httpGet() finalice, los datos son pasados como primer argumento -httpGet__params__errorCallback = Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento -httpPost__description__0 = Método para ejecutar una solicitud HTTP POST. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto. -httpPost__returns = el objeto p5 -httpPost__params__path = String: nombre del archivo o URL a cargar -httpPost__params__datatype = Objeto: parámetro de datos pasados con la solicitud enviada -httpPost__params__data = String: json, jsonp, xml o text -httpPost__params__callback = Función: función a ser ejecutada después de que httpPost() finalice, los datos son pasados como primer argumento -httpPost__params__errorCallback = Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento -httpDo__description__0 = Método para ejecutar una solicitud HTTP. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto. También puedes pasar un objeto especificando todos los parámetros de la solicitud siguiendo los ejemplos dentro de las llamadas de reqwest() -httpDo__returns = el objeto p5 -httpDo__params__path = String: nombre del archivo o URL a cargar -httpDo__params__method = Objeto: parámetro de datos pasados con la solicitud enviada -httpDo__params__datatype = String: json, jsonp, xml o text -httpDo__params__data = Función: función a ser ejecutada después de que httpDo() finalice, los datos son pasados como primer argumento -httpDo__params__callback = Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento -createWriter__returns = p5.PrintWriter: -save__description__0 = Graba una imagen, text, json, csv, wav o html. Hace que la descarga ocurra en el computador cliente. Notar que no es recomendado llamar a save() dentro de draw() si está en bucle, porque la función save() abrirá una ventana de diálogo en cada cuadro. El comportamiento por defecto es grabar el lienzo como una imagen. Puedes opcionalmente especificar un nombre de archivo. Por ejemplo: TODO. Alternativamente, el primer parámetro puede ser un puntero a un lienzo p5.Element, un arreglo de Strings, un arreglo de JSON, un objeto JSON, un p5.Table, un p5.Image, o un p5.SoundFile (requiere p5.sound). El segundo parámetro es el nombre del archivo (incluyendo la extensión). El tercer parámetro es para opciones específicas a este tipo de objeto. Este método grabará un archivo que se austa a los parámetros dados. Por ejemplo: TODO. -save__params__objectOrFilename = Objeto|String: si se provee un nombre de archivo, se grabará el lienzo como una imagen con la extensión png o jpg, dependiendo del nombre del archivo. Si se provee un objeto, se grabará dependiendo del objeto y el nombre del archivo (ver los ejemplos anteriores) -save__params__filename = String: Si se provee un objeto como el primer parámetro, entonces el segundo parámetro indica el nombre del archivo, y debe incluir la extensión apropiada (ver los ejemplos anteriores). -save__params__options = Boolean|String: opciones adicionales depndiendo del tipo de archivo. Por ejemplo, cuando se graba un archivo JSON, true indica que la salida será optimizada según el tamaño del archivo, en vez de por legibilidad. -saveJSON__description__0 = Escribe los contenidos de un arreglo o un objeto JSON a un archivo .json. El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web. -saveJSON__params__json = Arreglo|Objeto: -saveJSON__params__filename = String -saveJSON__params__optimize = Boolean: si es verdadero (true), remueve los saltos de línea del archivo de salida para optimizar el tamaño del archivo, en desmedro de la legibilidad. -saveStrings__description__0 = Escribe un arreglo de Strings a un archivo de texto, una línea por String. El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web. -saveStrings__params__list = Arreglo: arreglo de Strings a ser escrito -saveStrings__params__filename = String: nombre del archivo de salida -saveTable__description__0 = Escribe los contenidos de un objeto Table a un archivo. Por defecto es un archivo de texto con valores separados por coma (csv), pero también puede usar separación por tabulación (tsv), o generar una tabla HTML (html). El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web. -saveTable__params__filename = String: el nombre del archivo en el que Table será grabado -saveTable__params__options = String: puede ser tsv, csv o html. -abs__description__0 = Calcula el valor absoluto (magnitud) de un número. Usa Math.abs(). El valor absoluto de un número es siempre positivo. -abs__returns = Número: valor absoluto del número dado -abs__params__n = Número: número a computar -ceil__description__0 = Calcula el entero más cercano que es mayor o igual que el valor del parámetro. Usa Math.ceil(). Por ejemplo, ceil(9.03) retorna el valor 10. -ceil__returns = Número: número redondeado hacia arriba -ceil__params__n = Número: número a redondear -constrain__description__0 = Restringe un valor a estar entre un valor mínimo y uno máximo. -constrain__returns = Número: número restringido -constrain__params__n = Número: número a restringir -constrain__params__low = Número: límite mínimo -constrain__params__high = Número: límite máximo -dist__description__0 = Calcula la distancia entre dos puntos -dist__returns = Número: distancia entre los dos puntos -dist__params__x1 = Número: la coordenada x del primer punto -dist__params__y1 = Número: la coordenada y del primer punto -dist__params__x2 = Número: la coordenada x del segundo punto -dist__params__y2 = Número: la coordenada y del segundo punto -dist__params__z1 = Número: la coordenada z del primer punto -dist__params__z2 = Número: la coordenada z del segundo punto -exp__description__0 = Retorna el número de Euler (2.71828...) elevado al parámetro n. Usa Math.exp(). -exp__returns = e^n -exp__params__n = Número: exponente a elevar -floor__description__0 = Calcula el valor entero más cercano que es menor o igual al parámetro. Usa Math.floor(). -floor__returns = Número: número redondeado hacia abajo -floor__params__n = Número: número a ser redondeado hacia abajo -lerp__description__0 = Calcula un número entre dos números a un incremento específico. El parámetro amt es la cantidad a interpolar entre los dos valores donde 0.0 es igual al primer punto, 0.1 está muy cerca del primer punto, 0.5 está a medio camino entre ambos números, etc. La función lerp es conveniente para crear movimiento a lo largo de un camino recto y para dibujar líneas punteadas. -lerp__returns = Número: valor interpolado -lerp__params__start = Número: primer valor -lerp__params__stop = Número: segundo valor -lerp__params__amt = Número: número entre 0.0 y 1.0 -log__description__0 = Calcula el logaritmo natural (logaritmo con base e) de un número. Esta función espera que el parámetro n sea de un valor más grande que 0.0. Usa Math.log(). -log__returns = Número: logaritmo naturla de n -log__params__n = Number: number greater than 0 -mag__description__0 = Calcula la magnitud (o tamaño) de un vector. Un vector es una dirección en el espacio comúnmente usada en gráfica computacional y álgebra lineal. Como no tiene posición de inicio, la magnitud del vector puede ser pensada como la distancia entre la coordenada 0,0 a su valor x,y. Por lo tanto, mag() es un atajo a escribir dist(0, 0, x, y). -mag__returns = Número: magnitud del vector entre (0, 0) y (a, b) -mag__params__a = Número: primer valor -mag__params__b = Número: segundo valor -map__description__0 = Escala un nombre de un rango a otro rango. En el primer ejemplo anterior, el número 25 es convertido de un valor en el rango entre 0 y 100 a un valor cuyo rango está entre el borde izquierdo de la ventana (0) y el borde derecho (ancho). -map__description__1 = In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width). -map__returns = Número: número escalado -map__params__value = Número: el valor a ser convertido -map__params__start1 = Número: límite inferior del rango actual -map__params__stop1 = Número: límite superior del rango actual -map__params__start2 = Número: límite inferior del rango deseado -map__params__stop2 = Número: límite superior del rango deseado -max__description__0 = Determina el valor más grande en una secuencia de números, y luego retorna ese valor. max() acepta cualquier número de parámetros tipo número, o un arreglo de cualquier largo. -max__returns = Número: número máximo -max__params__nums = Número|Arreglo: números a comparar -min__description__0 = Determina el valor más pequeño en una secuencia de números, y luego retorna ese valor. max() acepta cualquier número de parámetros tipo número, o un arreglo de cualquier largo. -min__returns = Número: número mínimo -min__params__nums = Número|Arreglo: números a comparar -norm__description__0 = Normaliza un número de un rango a otro rango entre 0 y 1. Es idéntico a map(value, low, high, 0, 1). Los números fuera del rango no son saturados a 0 o 1, porque los números fuera de rango son muchas veces intencionales y útiles (ver el segundo ejemplo más arriba) -norm__returns = Número: número normalizado -norm__params__value = Número: valor entrante a ser normalizado -norm__params__start = Número: límite inferior del rango actual -norm__params__stop = Número: límite superior del rango actual -pow__description__0 = Facilita las expresiones exponenciales. La función pow() es una manera eficiente de multiplicar números po sí mismos (o sus recíprocos) en grandes cantidades. Por ejemplo, pow(3, 5) es equivalente a la expresión 3*3*3*3*3 y pow (3, -5) es equivalente a 1/3*3*3*3*3. Usa Math.pow(). -pow__returns = n^e -pow__params__n = Número: base de la expresión exponencial -pow__params__e = Número: potencia a la que se eleva la base -round__description__0 = Calcula el entero más cercano al parámetro n. Por ejemplo, round(133.8) retorna el valor 134. Usa la función Math.round(). -round__returns = Número: número redondeado -round__params__n = Número: número a redondear -sq__description__0 = Eleva al cuadrado un número (lo multiplica por sí mismo), El resultado es siempre un número positivo, porque multiplicar dos números negativos siempre resulta en un número positivo. -sq__returns = Número: número elevado al cuadrado -sq__params__n = Número: número a elevar al cuadrado -sqrt__description__0 = Calcula la raíz cuadrada de un número. La raíz cuadrada de un número es siempre positiva, aunque puede haber una raíz cuadrada válida que sea negativa. La raíz cuadrada s de un número a es tal que s*s = a. Es lo opuesto a elevar al cuadrado. Usa Math.sqrt(). -sqrt__returns = Número: raíz cuadrada del número -sqrt__params__n = Número: número no negativo al que se le calcula la raíz cuadrada -fract__description__0 = Calculates the fractional part of a number. -createVector__description__0 = Crea un nuevo objeto p5.Vector (el tipo de datos para almacenar vectores). Esto provee un vector de dos o tres dimensiones, específicamente un vector euclideano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección. -createVector__returns = el objeto p5 -createVector__params__x = Número: componente x del vector -createVector__params__y = Número: componente y del vector -createVector__params__z = Número: componente z del vector -noise__description__0 = Retorna el valor del ruido Perlin en las coordenadas específicas. El ruido Perlin es un generador de secuencias aleatorias produciendo una sucesión de números más naturalmente ordenada y armónica, en comparación con la función estándar random(). Fue inventada por Ken Perlin en los 1980s y ha sido usada desde entonces en aplicaciones gráficas para producir texturas procedurales, movimiento natural, figuras, terrenos, etc. La principal diferencia con la función random() es definida en una espacio infinito n-dimensional donde cada par de coordenadas corresponde a un valor fijo semi-aleatorio (fijado solo durante el tiempo de vida del programa; ver la función noiseSeed()). p5.js puede calcular ruido 1D, 2D y 3D, dependiendo del número de coordenadas dado. El valor resultante siempre estará entre 0.0 y 1.0. El valor de ruido puede ser animado moviéndose a través del espacio del ruido como fue demostrado en el ejemplo superior. Las dimensiones segunda y tercera también pueden ser interpretadas como tiempo. El ruido está estructurado de forma similar a una señal de audio, con respecto al uso de la función de las frecuencias. De forma similar al conecpto de armónicas en física, el ruido Perlin es calculado a lo largo de varias octavas que se han sumado para dar forma al resultado final. Otra manera de ajustar el caracter de la secuencia resultante es la escala de las coordenadas de entrada. Como la función trabaja en un espacio infinito, el valor de las coordenadas no importa como tal, solo la distancia entre las coordenadas sucesivas importa (por ejemplo: cuando se usa noise() dentro de un bucle). Como regla general, a menor la diferencia entre coordenadas, más suave es el ruido resultante. Pasos entre 0.005 y 0.03 funcionan mejor para la mayor parte de las aplicaciones, pero esto diferirá dependiendo del uso. -noise__returns = valor de ruido Perlin (entre 0 y 1) en las coordenadas especificadas -noise__params__x = Número: coordenada x en el espacio del ruido -noise__params__y = Número: coordenada y en el espacio del ruido -noise__params__z = Número: coordenada z en el espacio del ruido -noiseDetail__description__0 = Ajusta el caracter y nivel de detalle producido por la función de ruido Perlin. Similar al concepto de armónicas en física, el ruido es calculado a lo largo de varias octavas. Las octavas más graves contribuyen de forma más significativa a la señal de salida y como define la intensidad general del ruido, mientras que las octavas más altas crean detalles más finos en la secuencia de ruido. Por defecto, el ruido es calculado a lo largo de 4 octavas, con cada octava contribuyendo exactamente la mitad que su predecesora, partiendo con una intensidad de 50% para la primera octava. Este tamaño de caída puede ser cambiado al añadir un parámetro adicional a la función. Por ejemplo, un factor de caída de 75% significa que cada octava tendrá un 75% de impacto (25% menos) que la octava anterior. Cualquier valor entre 0.0 y 1.0 es válido, sin embargo nota que valores superiores a 0.5 pueden resultar en que noise() retorne valores mayores a 1.0. Al cambiar estos parámetros, la señal creada por noise() puede ser adaptada para calzar con necesidades y características específicas. -noiseDetail__params__lod = Número: número de octavas a ser usadas por el ruido -noiseDetail__params__falloff = Número: factor de caída para cada octava -noiseSeed__description__0 = Define el valor semilla para la función noise(). Por defecto, noise() produce diferentes resultados cada vez que el programa es ejecutado. Defines el parámetro value a una constante para que retorne la misma secuencia de números pseudo-aleatorios cada vez que el programa es ejecutado -noiseSeed__params__seed = Número: el valor semilla -randomSeed__description__0 = Define la semilla para la función random(). Por defecto, la función random() produce diferentes resultados cada vez que el programa es ejecutado. Definir el parámetro semilla como una constante hace que retorne la misma secuencia de números pseudo-aleatorios cada vez que el programa es ejecutado. -randomSeed__params__seed = Número: el valor semilla -random__description__0 = Retorna un número aleaotorio de tipo float (punto flotante). Acepta 0, 1 o 2 argumentos. Si no se le da un argumento, retorna un número aleatorio entre 0 y 1 (sin incluir 1). Si se da un argumento y es un número, retorna un número aleatorio entre 0 y hasta (pero sin incluir) el parámetro. Si se da un argumento y es un arreglo, retorna una elemento al azar del arreglo. Si se dan dos argumentos, retorna un número aleatorio entre el primer argumento y hasta (pero sin incluir) el segundo argumento. -random__returns = Número: el número aleatorio o un elemento aleatorio de un conjunto de opciones -random__params__min = Número: el límite inferior (inclusivo) -random__params__max = Número: el límite superio (exclusivo) -random__params__choices = Arreglo: el arreglo del cual se elige -randomGaussian__description__0 = Retorna un número aleatorio ajjustado a una distribución Gaussiana o normal. No existe teóricamente un valor mínimo o máximo que la función randomGaussian() pueda retornar. En vez de eso, existe solo una muy baja probabilidad de retornar valores lejos de la media, y una alta probabilidad de retornar números cercanos a la media. Acepta 0, 1 o 2 argumentos. Si no tiene argumentos, retorna una media de 0 y una desviación estándar de 1. Si tiene un argumento, el argumento es la media (y la desviación estándar es 1). Si tiene dos argumentos, el primero es la media y el segundo es la desviación estándar. -randomGaussian__returns = el número aleatorio -randomGaussian__params__mean = Número: la media -randomGaussian__params__sd = Número: la desviación estándar -acos__description__0 = El inverso de la función cos(), retorna el arcocoseno de un valor. Esta función espera valores entre -1 y 1 y los valores retornados están en el rango entre 0 y PI (3.1415927). -acos__returns = Número: el arcocoseno del valor -acos__params__value = Número: el valor al que se aplica arcocoseno -asin__description__0 = El inverso de la función sin(), retorna el arcoseno de un valor. Esta función espera valores entre -1 y 1 y los valores retornados están en el rango entre -PI/2 y PI/2 . -asin__returns = Número: el arcoseno del valor -asin__params__value = Número: el valor al que se aplica arcoseno -atan__description__0 = El inverso de la función tan(), retorna el arcotangente de un valor. Esta función espera valores entre -Infinito e Infinito (exclusivo) y los valores retornados están en el rango entre -PI/2 y PI/2 . -atan__returns = Número: el arcotangente del valor -atan__params__value = Número: el valor al que se aplica arcotangente -atan2__description__0 = Calcula el ángulo (en radianes) desde un punto específico al origen, medido desde el eje x positivo. Los valores retornados son de tipo float entre -PI/2 y PI/2. La función atan2() es más frecuentemente usada para orientar figuras figuras geométricas según la posición del cursor. Nota: la coordenada y del punto es el primer parámetro, y la coordenada x es el segundo parámetro, debido a la estructura para calcular la tangente. -atan2__description__1 = Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent. -atan2__returns = Número: el arcotangente del punto dado -atan2__params__y = Número: coordenada y del punto -atan2__params__x = Número: coordenada x del punto -cos__description__0 = calcula el coseno de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1. -cos__returns = Número: el coseno del ángulo -cos__params__angle = Número: el ángulo -sin__description__0 = calcula el seno de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1. -sin__returns = Número: el seno del ángulo -sin__params__angle = Número: el ángulo -tan__description__0 = calcula la tangente de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1. -tan__returns = Número: la tangente del ángulo -tan__params__angle = Número: el ángulo -degrees__description__0 = Convierte una medida en radianes a su correspondiente valor en grados. Radianes y grados son dos maneras de calcular lo mismo. Hay 360 grados en un círculo y 2*PI radianes en un círculo. Por ejemplo, 90 grados equivalen a PI/2 radianes. -degrees__returns = el ángulo convertido -degrees__params__radians = Número: valor en radianes a ser convertido a grados. -radians__description__0 = Convierte una medida en grados a su correspondiente valor en radianes. Radianes y grados son dos maneras de calcular lo mismo. Hay 360 grados en un círculo y 2*PI radianes en un círculo. Por ejemplo, 90 grados equivalen a PI/2 radianes. -radians__returns = el ángulo convertido -radians__params__degrees = Número: valor en grados a ser convertido a radianes. -angleMode__description__0 = Define el modo actual de p5 para interpretar ángulos. El modo por defecto es en RADIANS (radianes). -angleMode__params__mode = CONSTANTE: puede ser RADIANS (radianes) o DEGREES (grados) -textAlign__description__0 = Define el alineamiento actual para dibujar texto. Acepta dos argumentos: horizAlign(LEFT, CENTER o RIGHT) y vertAlign(TOP, BOTTOM, CENTER, o BASELINE). El parámetro horizAlign se refiere al valor x de la función text(), mientras que vel parámetro vertAlign al valor y. Así que si escribes textAlign(LEFT), estás alineando el borde izquierdo de tu texto al valor x dado en la función text(). Si escribes textAlign(RIGHT, TOP), estás alineando el borde derecho de tu texto con el valor x y el borde superior con el valor y del texto. -textAlign__description__1 = The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. -textAlign__description__2 = So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value. -textAlign__params__horizAlign = Constante: alineamiento horizontal, puede ser LEFT, CENTER o RIGHT -textAlign__params__vertAlign = Constante: alineamiento vertical, puede ser TOP, BOTTOM, CENTER o BASELINE -textLeading__description__0 = Define o retorna el espaciado, en pixeles, entre líneas de texto. Esta configuración será usada en todas las llamadas posteriores a la función text(). -textLeading__params__leading = Número: el tamaño en pixeles de espaciamiento entre líneas -textSize__description__0 = Define o retorna el tamaño actual de la tipografía. Este tamaño será usado en todas las llamadas posteriores a la función text(). El tamaño de la tipografía es medido en pixeles. -textSize__params__theSize = Número: el tamaño en pixeles de las letras en pixeles -textStyle__description__0 = Define o retorna el estilo actual de la tipografía. Puede ser NORMAL (normal), ITALIC (cursivo) o BOLD (destacado). Notar que puede ser anulado por estilo CSS. Para tipografías que no sean de sistema (opentype, truetype, etc.), usa loadFont(). -textStyle__params__theStyle = Número|Constante: estilo del texto, puede ser NORMAL, ITALIC o BOLD -textWidth__description__0 = Calcula y retorna el ancho de cualquier caracter o string. -textWidth__returns = Número -textWidth__params__theText = String: el String de caracteres a medir -textWrap__returns = String: wrapStyle -loadFont__description__0 = Carga un archivo de fuente de letra (.otf, .ttf) desde un archivo o URL, y retorna un objeto PFont. Este método es asíncrono, lo que significa que puede que no finalice antes de que la siguiente línea en tu bosquejo sea ejecutada. La ubicación del archivo debe ser relativo al archivo HTML que lo vincula con tu bosquejo. Cargar desde una URL u otra ubicación remota puede ser bloqueado por las opciones de seguridad del navegador. -loadFont__description__1 = The path to the font should be relative to the HTML file that links in your sketch. Loading fonts from a URL or other remote location may be blocked due to your browser's built-in security. -loadFont__returns = Objeto: objeto p5.Font -loadFont__params__path = String: número del archivo o URL a cargar -loadFont__params__callback = Función: función a ser ejecutada después de que loadFont() es completada -text__description__0 = Dibuja texto en la pantalla. Muestra la información especificada en el primer parámetro en la pantalla, en la posición especificada por los parámetros adicionales. Una fuente por defecto será usada a menos que una fuente sea definida por la función textFont() y un tamaño por defecto será usado a menos que se use la función textSize(). Cambia el color del texto con la función fill(). Cambia la apariencia del texto con las funciones stroke() y strokeWeight(). El texto se muestra en relación a la función textAlign(), que da la opción de dibujar a la izuiqerda, derecha y centro de las coordenadas. Los parámetros x2 e y2 definen un área rectangular donde mostrar el texto y solo puede ser usado por los datos tipo String. Cuando estos parámetros son especificados, son interpretados según la configuración de rectMode(). El texto que no cabe completamente dentro del rectángulo especificado no será dibujado en pantalla. -text__params__str = String: símbolos alfanuméricos a ser mostrados -text__params__x = Número: coordenada x del texto -text__params__y = Número: coordenada y del texto -text__params__x2 = Número: por defecto, el ancho de la caja contenedora del texto, ver rectMode() para más información -text__params__y2 = Número: por defecto, la altura de la caja contenedora del texto, ver rectMode() para más información -textFont__description__0 = Define la función actual con la que se dibujará el contenido de la función text() -textFont__returns = Objeto -textFont__params__font = Objeto|String: una fuente cargada con loadFont(), o un String representando una tipografía segura de la web (una fuente ampliamente disponible a lo largo de todos los sistemas). -append__description__0 = Añade un valor al final de un arreglo. Extiende el largo de un arreglo en una unidad. Usa la función Array.push() -append__returns = el objeto p5 -append__params__array = Arreglo: Arreglo al que se agregará el dato -append__params__value = Cualquiera: a ser añadido al arreglo -arrayCopy__description__0 = Copia el arreglo (o una parte del arreglo) a otro arreglo. El arreglo fuente es copiado al arreglo de destino, empezando por la posición especificada por srcPosition y a la posición especificada por dstPosition. El número de elementos a copiar es determinado por el largo. Notar que al copiar valores se sobreescriben los valores existentes en el arreglo de destino. Para anexar valores en vez de sobreescribirlos, usa la función concat(). La versión simplificada con dos argumentos, arrayCopy(src, dest), copia un arreglo entero a otro del mismo tamaño. Es equivaletne a arrayCopy(src, 0, dst, 0, src.length). Usar esta función es mucho más eficiente para copiar datos de un arreglo que iterar con un bucle for() y copiar cada elemento individualmente. -arrayCopy__params__src = Arreglo: el arreglo fuente -arrayCopy__params__srcPosition = Número: posición inicial en el arreglo fuente -arrayCopy__params__dst = Arreglo: el arreglo de destino -arrayCopy__params__dstPosition = Número: posición inicial del arreglo de destino -arrayCopy__params__length = Número: númeor de elementos del arreglo a ser copiados -concat__description__0 = Concatena dos arreglos, usa la función Array.concat(). No modifica los arreglos de entrada. -concat__returns = Arreglo: el arreglo concatenado -concat__params__a = Arreglo: primer arreglo a concatenar -concat__params__b = Arreglo: segundo arreglo a concatenar -reverse__description__0 = Invierte el orden un arreglo, usa Array.reverse(). -reverse__returns = el objeto p5 -reverse__params__list = Arreglo: arreglo a ser invertido -shorten__description__0 = Disminuye un arreglo en un elemento y retorna el arreglo más corto, usa Array.pop(). -shorten__returns = Arreglo: el arreglo acortado -shorten__params__list = Lista: arreglo a acortar -shuffle__description__0 = Ordena aleatoriamente los elementos de un arreglo. Implementa el algoritmo Fisher Yates. -shuffle__returns = Arreglo: retorna el arreglo ordenado -shuffle__params__array = Arreglo: Arreglo a ordenar -shuffle__params__bool = Boolean: modifica el arreglo -sort__description__0 = Ordena un arreglo de números, desde el más pequeño al más grande, o pone un arreglo de palabras en orden alfabético. El arreglo original no es modificado, un nuevo arreglo ordenado es retornado. El parámetro count define el número de elementos a ordenar. Por ejemplo, si hay 12 elementos en un arreglo y count es 5, los primeros 5 elementos del arreglo serán ordenados. -sort__returns = el objeto p5 -sort__params__list = Arreglo: arreglo a ordenar -sort__params__count = Número: número de elementos a ordenar, empezando desde 0 -splice__description__0 = Inserta un valor o un arreglo de valores en un arreglo existente El primer parámetro especifica el arreglo inicial a ser modificado, y el segundo parámetro define los datos a insertarse. El tercer parámetro es un índice que especifica la posición del arreglo a partir de la que se insertarán los datos. Recuerda que el índice del arreglo empieza en 0, así que la primera posición es 0, la segunda es 1, etc. -splice__returns = el objeto p5 -splice__params__list = Arreglo: arreglo a ser modificado -splice__params__value = Cualquiera: valor a ser introducido -splice__params__position = Número: posición del arreglo donde se inserta el dato -subset__description__0 = Extrae un arreglo de elementos de un arreglo existente. El parámetro list define el arreglo desde el cual los elementos serán copiados, y los parámetros start y count especifican cuáles elementos extraer. Si no especifica count, los elementos serán extraidos desde el principio. Esta función no modifica el arreglo original -subset__returns = Arreglo: arreglo de elementos extraidos -subset__params__list = Arreglo: arreglo del cual se extrae -subset__params__start = Número: posición de donde empezar a extraer -subset__params__count = Número: número de valores a extraer -float__description__0 = Convierte un String a su representación de punto flotante. Los contenidos de un String deben parecerse a un número, en otro caso NaN es retornado. Por ejemplo, float('1234.56') evalua a 1234.56, pero float('giraffe') retorna NaN. Cuando un arreglo de valores es pasado, un arreglo de floats del mismo largo es retornado. -float__returns = Número: representación en punto flotante de un string -float__params__str = String: string a ser procesado -int__description__0 = Convierte un boolean, string o float a su representación en número entero. Cuando un arreglo de valores es introducido, entonces un arreglo de enteros de la misma longitud es retornado. -int__returns = Número: valor representado como entero -int__params__ns = String|Boolean|Número|Arreglo: valor a procesar -str__description__0 = Convierte un boolean, string, o número a su representación en string. Cuando un arreglo de valores es introducido, entonces un arreglo de strings de la misma longitud es retornado. -str__returns = String: valor representado como string -str__params__n = String|Boolean|Número|Arreglo: valor a procesar -byte__description__0 = Convierte un número, string o boolean a su representación en byte. Un byte puede solo ser un número entero entre -128 y 127, así que cuando un valor fuera de este rango es convertido, se hace wrap a la representación correspondiente en byte. Cuando un arreglo de números, string, o booleans es introducido, entonces un arreglo de bytes de la misma longitud es retornado. -byte__returns = Número: representación en formato byte del valor -byte__params__n = String|Boolean|Número|Arreglo: valor a procesar -byte__params__ns = Array: values to parse -char__description__0 = Convierte un número o string a su representaciómo como un string de un único caracter. Si se provee un parámetro, es primero pasado como entero y luego evaluado como un string de un único caracter. Cuando un arreglo de números o strings es introducido, entonces un arreglo de strings de un único caracter de la misma longitud es retornado. -char__returns = String: representación en formato string del valor -char__params__n = String|Número|Arreglo: valor a procesar -char__params__ns = Array: values to parse -unchar__description__0 = Convierte un string de un único caracter a su correspondiente representación como valor entero. Cuando un arreglo de strings de un caracter es introducido, entonces un arreglo de enteros de la misma longitud es retornado. -unchar__returns = Número: representación en formato entero del valor -unchar__params__n = String|Arreglo: valor a procesar -unchar__params__ns = Array: values to parse -hex__description__0 = Convierte un número a su correspondiente representación como hexadecimal. Si se ingersa un segundo parámetro, es usado para definir el número de caracteres a generar en la notación hexadecimal. Cuando un arreglo es introducido, entonces un arreglo de strings en notación hexadecimal de la misma longitud es retornado. -hex__returns = String: representación en formato string hexadecimal del valor -hex__params__n = Número|Arreglo: valor a procesar -unhex__description__0 = Convierte una representación en string de un número hexadecimal a su correspondiente representación como valor entero. Cuando un arreglo de strings en notación hexadecimal es introducido, entonces un arreglo de enteros de la misma longitud es retornado. -unhex__returns = Número: representación en formato entero del valor hexadecimal -unhex__params__n = String|Arreglo: valor a procesar -join__description__0 = Combina una arreglo de Strings en un String, cada uno separado por los caracteres usados como parámetro separator. Para unir arreglos de enteros o floats, es necesario primero convertirlos a Strings usando las funciones nf() o nfs(). -join__returns = String: String unificado -join__params__list = Arreglo: arreglo de Strings a ser unidos -join__params__separator = String: String a ser posicionado entre cada item -match__description__0 = Esta función es usada para aplicar una expresión regular a una porción de texto, y retorna grupos coincidentes (elementos encontrados entre paréntesis) como un arreglo de Strings. Si no existen coincidencias, se retorna el valor null. Si no se especifican grupos en la expresión regular, pero la secuencia coincide, un arreglo de largo 1 (con el texto coincidente como primer elemento del arreglo) será retornado. Para usar la función, primero comprueba si el resultado es null. Si el resultado es null, entonces la secuencia no tuvo coincidencias. Si la secuencia tuvo coincidencias, retorna un arreglo. Si exsiten grupos (especificados como conjuntos de paréntesis) en la expresión regular, entonces los contenidos de cada uno serán retornados en el arreglo. El elemento[0] de una coincidencia de expresión regular retorna el string coincidente, y el grupo de coincidencia empieza en el elemento[1] (el primer grupo es [1], el segundo es [2], etc). -match__returns = Arreglo: arreglo de Strings encontrados -match__params__str = String: el String a ser buscado -match__params__regexp = String: la expresión regular a ser usada para buscar coincidencias -matchAll__description__0 = Esta función es usada para aplicar una expresión regular a una porción de texto, y retorna una lista de grupos coincidentes (elementos encontrados entre paréntesis) como un arreglo de Strings bidimensional. Si no existen coincidencias, se retorna el valor null. Si no se especifican grupos en la expresión regular, pero la secuencia coincide, un arreglo de dos dimensiones es retornado, pero es de largo 1. Para usar la función, primero comprueba si el resultado es null. Si el resultado es null, entonces la secuencia no tuvo coincidencias. Si la secuencia tuvo coincidencias, retorna un arreglo 2D. Si exsiten grupos (especificados como conjuntos de paréntesis) en la expresión regular, entonces los contenidos de cada uno serán retornados en el arreglo. El elemento[i][0] de una coincidencia de expresión regular retorna el string coincidente completo, y el grupo de coincidencia empieza en el elemento[i][1] (el primer grupo es [i][1], el segundo es [i][2], etc). -matchAll__returns = Arreglo: arreglo 2D de Strings encontrados -matchAll__params__str = String: el String a ser buscado -matchAll__params__regexp = String: la expresión regular a ser usada para buscar coincidencias -nf__description__0 = Función de utilidad para formatear números a strings. Existen dos veriones: una para formatear floats, y una para formatear enteros. Los valores de los dígitos y los parámetros left y right siempre deben ser enteros positivos -nf__returns = String|Arreglo: String formateada -nf__params__num = Número|Arreglo: el número a formatear -nf__params__left = Número: número de dígitos a la izquierda del punto decimal -nf__params__right = Número: número de dígitos a la derecha del punto decimal -nfc__description__0 = Función de utilidad para formatear números en strings y poner las comas apropiadas para señalar múltiplos de mil. Hay dos versiones: una para números enteros y otra para arreglos de enteros. El valor del parámetro right debe siempre ser un entero positivo. -nfc__returns = String|Arreglo: String formateada -nfc__params__num = Número|Arreglo: el número a formatear -nfc__params__right = Número: número de dígitos a la derecha del punto decimal -nfp__description__0 = Función de utilidad para formatear números en strings. Similar a nf() pero pone un signo + en frente de los números positivos y un signo - en frente de números negativos. Hay dos versiones, una para formatear floats y otra para formatear enteros. Los valores de los parámetros left y right deben siempre ser enteros positivos. -nfp__returns = String|Arreglo: String formateada -nfp__params__num = Número|Arreglo: el número a formatear -nfp__params__left = Número: número de dígitos a la izquierda del punto decimal -nfp__params__right = Número: número de dígitos a la derecha del punto decimal -nfs__description__0 = Función de utilidad para formatear números en strings. Similar a nf() pero pone un espacio en frente de los números positivos y un signo - en frente de números negativos. Hay dos versiones, una para formatear floats y otra para formatear enteros. Los valores de los parámetros left y right deben siempre ser enteros positivos. -nfs__returns = String|Arreglo: String formateada -nfs__params__num = Número|Arreglo: el número a formatear -nfs__params__left = Número: número de dígitos a la izquierda del punto decimal -nfs__params__right = Número: número de dígitos a la derecha del punto decimal -split__description__0 = La función split usa String.split(), corta un String en pedazos usando un caracter o String como delimitador. El parámetro delim especifica el caracter o caracteres que marcan los bordes entre cada pieza. Un arreglo String[] es retornado, que contiene cada una de las piezas. La función splitTokens() funciona de forma similar, excepto que divide usango un rango de caracteres en vez de usar un caracter o una secuencia de caracteres específicos. -split__returns = Arreglo: arreglo de Strings -split__params__value = String: el String a ser dividido -split__params__delim = String: el String usado para separar los datos -splitTokens__description__0 = La función splitTokens() divide un String en uno o varios caracteres delimitadores o tokens. El parámetro delim especifica el o los caracteres a ser usados como borde. -splitTokens__description__1 = Si no se especifican caracteres delim, cualquier caracter tipo whitespace será usado para dividir. Los caracteres whitespace incluyen tabulación (\t), nueva línea (\n), retorno de carro (\r), entrada de formulario (\f), y espacio. -splitTokens__returns = Arreglo: arreglo de Strings -splitTokens__params__value = String: el String a ser dividido -splitTokens__params__delim = String: lista de Strings individuales que serán usados como separadores -trim__description__0 = Remueve caracteres tipo whitespace (espacio en blanco) del comienzo y el final de un String. En adición a los caracteres estámdar de whitespace como espacio, retorno de carro y tabulación, esta función también remueve el caracter Unicode nbsp. -trim__returns = String|Arreglo: un String o arreglo de Strings recortados. -day__description__0 = p5.js se comunica con el reloj de tu computador. La función day() retorna el día actual como un valor entre 1 y 31. -day__returns = Número: el día actual -hour__description__0 = p5.js se comunica con el reloj de tu computador. La función hour() retorna la hora actual como un valor entre 0 y 23. -hour__returns = Número: la hora actual -minute__description__0 = p5.js se comunica con el reloj de tu computador. La función minute() retorna el minuto actual como un valor entre 0 y 59. -minute__returns = Número: el minuto actual -millis__description__0 = Retorna el número de milisegundos (milésimas de segundo) desde que el programa empezó a correr. La información es usada a menudo para temporizar eventos y animar secuencias -millis__returns = Número: el número de milisegundos desde que empezó el programa -month__description__0 = p5.js se comunica con el reloj de tu computador. La función month() retorna el mes actual como un valor entre 1 y 12. -month__returns = Número: el mes actual -second__description__0 = p5.js se comunica con el reloj de tu computador. La función second() retorna el mes actual como un valor entre 0 y 59. -second__returns = Número: el segundo actual -year__description__0 = p5.js se comunica con el reloj de tu computador. La función year() retorna el año actual como un entero (2014, 2015, 2015, etc). -year__returns = Número: el año actual -plane__description__0 = Dibuja un plano con ancho y altura dados. -plane__params__width = Número: ancho del plano -plane__params__height = Número: altura del plano -plane__params__detailX = Número: número opcional de subdivisiones triangulares en la dimensión x -plane__params__detailY = Número: número opcional de subdivisiones triangulares en la dimensión y -box__description__0 = Dibuja una caja con ancho, altura y profundidad dados. -box__params__width = Número: ancho de la caja -box__params__Height = Número: altura de la caja -box__params__depth = Número: profundidad de la caja -box__params__detailX = Número: número opcional de subdivisiones triangulares en la dimensión x -box__params__detailY = Número: número opcional de subdivisiones triangulares en la dimensión y -sphere__description__0 = Dibuja una esfera de radio dado. -sphere__params__radius = Número: radio del círculo -sphere__params__detailX = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24 -sphere__params__detailY = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16 -cylinder__description__0 = Dibuja un cilindro de radio y altura dados. -cylinder__params__radius = Número: radio de la superficie -cylinder__params__height = Número: altura del cilindro -cylinder__params__detailX = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24 -cylinder__params__detailY = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16 -cone__description__0 = Dibuja un cono de radio y altura dados. -cone__description__1 = DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the cone seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser. -cone__params__radius = Número: radio de la superficie inferior -cone__params__height = Número: altura del cono -cone__params__detailX = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24 -cone__params__detailY = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16 -cone__params__cap = Boolean: (Optional) whether to draw the base of the cone -ellipsoid__description__0 = Dibuja un elipsoide de radio dado. -ellipsoid__params__radiusx = Número: radio x del círculo -ellipsoid__params__radiusy = Número: radio y del círculo -ellipsoid__params__radiusz = Número: radio z del círculo -ellipsoid__params__detailX = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24. Evita números mayores a 150 que podrían colapsar el navegador. -ellipsoid__params__detailY = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16. Evita números mayores a 150 que podrían colapsar el navegador. -torus__description__0 = Dibuja un toroide con radio y tubo dado. -torus__description__1 = DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a torus. More subdivisions make the torus appear to be smoother. The default and maximum values for detailX and detailY are 24 and 16, respectively. Setting them to relatively small values like 4 and 6 allows you to create new shapes other than a torus. -torus__params__radius = Número: radio del anillo completo -torus__params__tubeRadius = Número: radio del tubo -torus__params__detailX = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24. -torus__params__detailY = Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16. -ambientLight__description__0 = Crea una luz ambiente con color -ambientLight__params__v1 = Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS -ambientLight__params__v2 = Número: opcional, valor de verde o saturación -ambientLight__params__v3 = Número: opcional, valor de azul o brillo -ambientLight__params__alpha = Número: opcional, valor de opacidad -directionalLight__description__0 = Crea una luz direccional con color y dirección -directionalLight__params__v1 = Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS -directionalLight__params__v2 = Número: opcional, valor de verde o saturación -directionalLight__params__v3 = Número: opcional, valor de azul o brillo -directionalLight__params__x = Número|p5.Vector: dirección del eje x o un p5.Vector -directionalLight__params__y = Número: opcional, dirección del eje y -directionalLight__params__z = Número: opcional, dirección del eje z -pointLight__description__0 = Crea una luz puntual con color y posición -pointLight__params__v1 = Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS -pointLight__params__v2 = Número: opcional, valor de verde o saturación -pointLight__params__v3 = Número: opcional, valor de azul o brillo -pointLight__params__x = Número|p5.Vector: dirección del eje x o un p5.Vector -pointLight__params__y = Número: opcional, dirección del eje y -pointLight__params__z = Número: opcional, dirección del eje z -loadModel__description__0 = Carga un modelo 3d desde un archivo OBJ. Una de las limitaciones del formato OBJ es que no trae incorporado un sentido de escala. Esto significa que los modelos exportados por distintos programas pueden ser de tamaños radicalmente distintos. Si tu modelo no está siendo mostrado en pantalla, trata llamando a la función loadMode() con el parámetro de normalización configurado como verdadero. Esto escalará el tamaño del modelo a una escala apropiada para p5. También puedes hacer cambios adicionales al tamaño final de tu modelo con la función scale(). -loadModel__returns = el objeto p5.Geometry3D -loadModel__params__path = String: ubicación del modelo a cargar -loadModel__params__normalize = Boolean: Si es verdadero (true), escala el modelo a un tamaño estandarizado al momento de cargarlo. -loadModel__params__successCallback = Función(p5.Geometry3D): función a ser llamada cuando el modelo se cargue. Será pasada al modelo del objeto 3D. -loadModel__params__failureCallback = Función(evento): llamada con el error evento si la imagen no falla al cargar. -model__description__0 = Hace el render de un modelo 3D en la pantalla. -texture__description__0 = Textura para geometría. Puedes ver todos los posibles materiales en este ejemplo (TODO). -texture__params__tex = p5.Image|p5.MediaElement|p5.Graphics: gráfica bidimensional para hacer render como textura. -normalMaterial__description__0 = Material normal para geometría. Puedes ver todos los posibles materiales en este ejemplo (TODO). -ambientMaterial__description__0 = Material ambiente para geometría con un color dado. Puedes ver todos los posibles materiales en este ejemplo (TODO). -ambientMaterial__params__v1 = Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color), o arreglo de color, o String de color CSS -ambientMaterial__params__v2 = Número: opcional, valor de verde o saturación -ambientMaterial__params__v3 = Número: opcional, valor de azul o brillo -specularMaterial__description__0 = Material espejo para geometría con un color dado. Puedes ver todos los posibles materiales en este ejemplo. -specularMaterial__params__alpha = Número: opcional, valor de opacidad -specularMaterial__params__v1 = Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color), o arreglo de color, o String de color CSS -specularMaterial__params__v2 = Número: opcional, valor de verde o saturación -specularMaterial__params__v3 = Número: opcional, valor de azul o brillo -camera__description__0 = Define la posición de la cámara -camera__params__x = Número: valor de la posición de la cámara en el eje x -camera__params__y = Número: valor de la posición de la cámara en el eje y -camera__params__z = Número: valor de la posición de la cámara en el eje z -perspective__description__0 = Define la perspectiva de la cámara -perspective__params__fovy = Número: frustum del campo de visión vertical de la cámara, de abajo hacia arriba, en grados -perspective__params__aspect = Número: frustum de la relación de aspecto de la cámara -perspective__params__near = Número: frustum del largo del plano cercano -perspective__params__far = Número: frustum del largo del plano lejano -ortho__description__0 = Define la cámara ortogonal -ortho__params__left = Número: define el frustum del plano izquierdo de la cámara -ortho__params__right = Número: define el frustum del plano derecho de la cámara -ortho__params__bottom = Número: define el frustum del plano inferior de la cámara -ortho__params__top = Número: define el frustum del plano superior de la cámara -ortho__params__near = Número: define el frustum del plano cercano de la cámara -ortho__params__far = Número: define el frustum del plano lejano de la cámara diff --git a/src/data/localization/es/p5.sound.ftl b/src/data/localization/es/p5.sound.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/es/root.ftl b/src/data/localization/es/root.ftl deleted file mode 100644 index 5ecedaf47f..0000000000 --- a/src/data/localization/es/root.ftl +++ /dev/null @@ -1,63 +0,0 @@ -h1 = Referencia -reference-search = Busca en la API -reference-description1 = ¿No encuentras lo que buscas? Quizás debas revisar en -reference-description3 = Puedes descargar una versión de la referencia. -reference-contribute2 = por favor dinos -reference-error1 = ¿Encontraste algún error? -reference-error3 = Por favor siéntete libre de -reference-error5 = y de indicar un pull request. -reference-example = Ejemplo -reference-description = Descripción -reference-extends = Extiende -reference-parameters = Parámetros -reference-syntax = Sintaxis -reference-returns = Retorna -Environment = Ambiente -Color = Color -Color Conversion = Color Conversion -Creating & Reading = Creación y lectura -Setting = Configuración -Shape = Forma -2D Primitives = Primitivas 2D -Attributes = Atributos -Curves = Curvas -Vertex = Vértices -Constants = Constantes -Structure = Estructura -DOM = DOM -Rendering = Render -Foundation = Foundation -Transform = Transformar -Data = Datos -LocalStorage = LocalStorage -Dictionary = Diccionario -Events = Eventos -Acceleration = Aceleración -Keyboard = Teclado -Mouse = Ratón -Touch = Tacto -Image = Imagen -Loading & Displaying = Cargar & Mostrar -Pixels = Pixeles -IO = Entrada y salida -Input = Entrada -Output = Salida -Table = Tabla -Math = Matemáticas -Calculation = Cálculo -Vector = Vector -Noise = Ruido -Random = Random -Trigonometry = Trigonometría -Typography = Tipografía -Array Functions = Funciones de arreglo -Conversion = Conversión -String Functions = Funciones de String -Time & Date = Tiempo & Fecha -3D Primitives = Primitivas 3D -Lights, Camera = Luces, cámara -Interaction = Interaction -Lights = Luces -3D Models = Modelos 3D -Material = Materiales -Camera = Cámara diff --git a/src/data/localization/hi-IN/JSON.ftl b/src/data/localization/hi-IN/JSON.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/console.ftl b/src/data/localization/hi-IN/console.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Amplitude.ftl b/src/data/localization/hi-IN/p5.Amplitude.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.AudioIn.ftl b/src/data/localization/hi-IN/p5.AudioIn.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.AudioVoice.ftl b/src/data/localization/hi-IN/p5.AudioVoice.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.BandPass.ftl b/src/data/localization/hi-IN/p5.BandPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Camera.ftl b/src/data/localization/hi-IN/p5.Camera.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Color.ftl b/src/data/localization/hi-IN/p5.Color.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Compressor.ftl b/src/data/localization/hi-IN/p5.Compressor.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Convolver.ftl b/src/data/localization/hi-IN/p5.Convolver.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Delay.ftl b/src/data/localization/hi-IN/p5.Delay.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Distortion.ftl b/src/data/localization/hi-IN/p5.Distortion.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.EQ.ftl b/src/data/localization/hi-IN/p5.EQ.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Effect.ftl b/src/data/localization/hi-IN/p5.Effect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Element.ftl b/src/data/localization/hi-IN/p5.Element.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Envelope.ftl b/src/data/localization/hi-IN/p5.Envelope.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.FFT.ftl b/src/data/localization/hi-IN/p5.FFT.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.File.ftl b/src/data/localization/hi-IN/p5.File.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Filter.ftl b/src/data/localization/hi-IN/p5.Filter.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Font.ftl b/src/data/localization/hi-IN/p5.Font.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Gain.ftl b/src/data/localization/hi-IN/p5.Gain.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Geometry.ftl b/src/data/localization/hi-IN/p5.Geometry.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Graphics.ftl b/src/data/localization/hi-IN/p5.Graphics.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.HighPass.ftl b/src/data/localization/hi-IN/p5.HighPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Image.ftl b/src/data/localization/hi-IN/p5.Image.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.LowPass.ftl b/src/data/localization/hi-IN/p5.LowPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.MediaElement.ftl b/src/data/localization/hi-IN/p5.MediaElement.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.MonoSynth.ftl b/src/data/localization/hi-IN/p5.MonoSynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Noise.ftl b/src/data/localization/hi-IN/p5.Noise.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.NumberDict.ftl b/src/data/localization/hi-IN/p5.NumberDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.OnsetDetect.ftl b/src/data/localization/hi-IN/p5.OnsetDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Oscillator.ftl b/src/data/localization/hi-IN/p5.Oscillator.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Panner3D.ftl b/src/data/localization/hi-IN/p5.Panner3D.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Part.ftl b/src/data/localization/hi-IN/p5.Part.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.PeakDetect.ftl b/src/data/localization/hi-IN/p5.PeakDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Phrase.ftl b/src/data/localization/hi-IN/p5.Phrase.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.PolySynth.ftl b/src/data/localization/hi-IN/p5.PolySynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.PrintWriter.ftl b/src/data/localization/hi-IN/p5.PrintWriter.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Pulse.ftl b/src/data/localization/hi-IN/p5.Pulse.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Renderer.ftl b/src/data/localization/hi-IN/p5.Renderer.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Reverb.ftl b/src/data/localization/hi-IN/p5.Reverb.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.SawOsc.ftl b/src/data/localization/hi-IN/p5.SawOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Score.ftl b/src/data/localization/hi-IN/p5.Score.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Shader.ftl b/src/data/localization/hi-IN/p5.Shader.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.SinOsc.ftl b/src/data/localization/hi-IN/p5.SinOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.SoundFile.ftl b/src/data/localization/hi-IN/p5.SoundFile.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.SoundLoop.ftl b/src/data/localization/hi-IN/p5.SoundLoop.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.SoundRecorder.ftl b/src/data/localization/hi-IN/p5.SoundRecorder.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.SqrOsc.ftl b/src/data/localization/hi-IN/p5.SqrOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.StringDict.ftl b/src/data/localization/hi-IN/p5.StringDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Table.ftl b/src/data/localization/hi-IN/p5.Table.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.TableRow.ftl b/src/data/localization/hi-IN/p5.TableRow.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.TriOsc.ftl b/src/data/localization/hi-IN/p5.TriOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.TypedDict.ftl b/src/data/localization/hi-IN/p5.TypedDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.Vector.ftl b/src/data/localization/hi-IN/p5.Vector.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.XML.ftl b/src/data/localization/hi-IN/p5.XML.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/p5.ftl b/src/data/localization/hi-IN/p5.ftl deleted file mode 100644 index 6dabbdfa58..0000000000 --- a/src/data/localization/hi-IN/p5.ftl +++ /dev/null @@ -1,151 +0,0 @@ -alpha__returns = p5 ऑब्जेक्ट -blue__returns = p5 ऑब्जेक्ट -brightness__returns = p5 ऑब्जेक्ट -color__description__0 = रंग डेटाटाइप के चरों में भंडारण के लिए रंग बनाता है। पैरामीटर को वर्तमान colorMode() के आधार पर RGB या HSB मानों के रूप में व्याख्यायित किया जाता है। डिफ़ॉल्ट मोड आरजीबी मान 0 से 255 तक है और इसलिए, फ़ंक्शन कॉल रंग (255, 204, 0) एक चमकदार पीला रंग लौटाएगा। -color__description__1 = ध्यान दें कि यदि color() को केवल एक मान प्रदान किया जाता है, तो इसे ग्रेस्केल मान के रूप में समझा जाएगा। दूसरा मान जोड़ें, और यह होगा अल्फा पारदर्शिता के लिए उपयोग किया जाता है। जब तीन मान निर्दिष्ट किए जाते हैं, तो उन्हें आरजीबी या एचएसबी मान के रूप में व्याख्या किया जाता है। चौथा मान जोड़ने से अल्फा पारदर्शिता लागू होती है। -color__description__2 = यदि एक एकल स्ट्रिंग तर्क प्रदान किया जाता है, तो आरजीबी, आरजीबीए और हेक्स सीएसएस रंग स्ट्रिंग और सभी नामित रंग स्ट्रिंग समर्थित हैं। इस मामले में, दूसरे तर्क के रूप में अल्फा संख्या मान समर्थित नहीं है, आरजीबीए फॉर्म का उपयोग किया जाना चाहिए। -color__returns = फिक्स: परिणामस्वरूप रंग -green__returns = p5 ऑब्जेक्ट -hue__description__0 = रंग या पिक्सेल सरणी से रंग मान निकालता है। -hue__description__1 = ह्यू एचएसबी और एचएसएल दोनों में मौजूद है। एचएसबी रंग ऑब्जेक्ट के साथ आपूर्ति किए जाने पर यह फ़ंक्शन एचएसबी-सामान्यीकृत रंग लौटाएगा (या जब रंग मोड एचएसबी होने पर पिक्सेल सरणी के साथ आपूर्ति की जाती है), लेकिन एचएसएल-सामान्यीकृत रंग के लिए डिफ़ॉल्ट होगा अन्यथा। (मान केवल तभी भिन्न होंगे जब प्रत्येक सिस्टम के लिए अधिकतम ह्यू सेटिंग अलग हो।) -hue__returns = p5 ऑब्जेक्ट -lerpColor__description__0 = दो रंगों को मिलाता है उनके बीच कहीं तीसरा रंग खोजने के लिए। एएमटी पैरामीटर दो मानों के बीच इंटरपोलेट करने की मात्रा है जहां 0.0 पहले रंग के बराबर है, 0.1 पहले रंग के बहुत करीब है, 0.5 बीच में आधा है, आदि। एक 0 से नीचे की राशि को 0 माना जाएगा। इसी तरह, 1 से ऊपर की राशि को 1 पर सीमित कर दिया जाएगा। यह lerp() के व्यवहार से अलग है, लेकिन आवश्यक है क्योंकि अन्यथा सीमा के बाहर की संख्याएँ अजीब और अप्रत्याशित रंग उत्पन्न करेंगी। -lerpColor__description__1 = जिस तरह से रंगों को प्रक्षेपित किया जाता है वह वर्तमान रंग मोड पर निर्भर करता है। -lerpColor__returns = व्यवस्था / संख्या: प्रक्षेपित रंग -lightness__returns = p5 ऑब्जेक्ट -red__returns = p5 ऑब्जेक्ट -saturation__description__0 = रंग या पिक्सेल सरणी से संतृप्ति मान निकालता है। -saturation__description__1 = संतृप्ति को एचएसबी और एचएसएल में अलग-अलग स्केल किया जाता है। यह फ़ंक्शन एचएसबी रंग ऑब्जेक्ट के साथ आपूर्ति किए जाने पर एचएसबी संतृप्ति लौटाएगा (या जब रंग मोड एचएसबी है, तो पिक्सेल सरणी के साथ आपूर्ति की जाती है), लेकिन अन्यथा एचएसएल संतृप्ति में डिफ़ॉल्ट होगा। -saturation__returns = p5 ऑब्जेक्ट -background__description__0 = background() फ़ंक्शन p5.js कैनवास की पृष्ठभूमि के लिए उपयोग किए गए रंग को सेट करता है। डिफ़ॉल्ट पृष्ठभूमि पारदर्शी होती है। यह फ़ंक्शन आमतौर पर अंदर उपयोग किया जाता है draw() प्रत्येक फ्रेम की शुरुआत में डिस्प्ले विंडो को साफ करने के लिए, लेकिन इसका उपयोग सेटअप () एनिमेशन के पहले फ्रेम पर बैकग्राउंड सेट करने के लिए या अगर बैकग्राउंड को सिर्फ एक बार सेट करने की जरूरत है। -background__description__1 = रंग या तो आरजीबी, एचएसबी, या एचएसएल रंग के संदर्भ में निर्दिष्ट किया गया है जो वर्तमान colorMode पर निर्भर करता है। (डिफ़ॉल्ट रंग स्थान RGB है, जिसमें 0 से 255 तक की सीमा में प्रत्येक मान)। डिफ़ॉल्ट रूप से अल्फा श्रेणी भी 0 से 255 तक होती है। -background__description__2 = यदि एक एकल स्ट्रिंग तर्क प्रदान किया जाता है, तो आरजीबी, आरजीबीए और हेक्स सीएसएस रंग तार और सभी नामित रंग तार समर्थित हैं। इस मामले में, दूसरे तर्क के रूप में अल्फा संख्या मान समर्थित नहीं है, आरजीबीए फॉर्म का उपयोग किया जाना चाहिए। -background__description__3 = एक p5.Color ऑब्जेक्ट भी बैकग्राउंड कलर सेट करने के लिए दिया जा सकता है। -background__description__4 = एक p5.Image भी पृष्ठभूमि छवि सेट करने के लिए प्रदान किया जा सकता है। -colorMode__description__0 = colorMode() p5.js रंग डेटा की व्याख्या करने के तरीके को बदल देता है। डिफ़ॉल्ट रूप से, भरें(), stroke(), background(), और color() को RGB रंग मॉडल का उपयोग करके 0 और 255 के बीच के मानों द्वारा परिभाषित किया जाता है। यह colorMode (RGB, 255) सेट करने के बराबर है कलरमोड (एचएसबी) सेट करने से आप इसके बजाय एचएसबी सिस्टम का उपयोग कर सकते हैं। डिफ़ॉल्ट रूप से, यह कलरमोड (एचएसबी, 360, 100, 100, 1) है। आप एचएसएल का भी उपयोग कर सकते हैं। -colorMode__description__1 = नोट: मौजूदा रंगीन ऑब्जेक्ट उस मोड को याद रखते हैं जिसमें वे बनाए गए थे, इसलिए आप उनकी उपस्थिति को प्रभावित किए बिना अपनी पसंद के अनुसार मोड बदल सकते हैं। -fill__description__0 = आकृतियों को भरने के लिए प्रयुक्त रंग सेट करता है। उदाहरण के लिए, यदि आप भरण (204, 102, 0) चलाते हैं, तो भरण आदेश के बाद खींची गई सभी आकृतियों को नारंगी रंग से भर दिया जाएगा। यह रंग या तो आरजीबी के संदर्भ में निर्दिष्ट है या वर्तमान colorMode() के आधार पर HSB रंग। (डिफ़ॉल्ट रंग स्थान RGB है, जिसमें प्रत्येक मान 0 से 255 के बीच होता है)। अल्फा डिफ़ॉल्ट रूप से सीमा भी 0 से 255 तक होती है। -fill__description__1 = यदि एक एकल स्ट्रिंग तर्क प्रदान किया जाता है, तो आरजीबी, आरजीबीए और हेक्स सीएसएस रंग तार और सभी नामित रंग तार समर्थित हैं। इस मामले में, दूसरे तर्क के रूप में अल्फा संख्या मान समर्थित नहीं है, आरजीबीए फॉर्म का उपयोग किया जाना चाहिए। -fill__description__2 = एक p5 Color ऑब्जेक्ट भी भरण रंग सेट करने के लिए प्रदान किया जा सकता है। -noStroke__description__0 = स्ट्रोक (रूपरेखा) खींचना अक्षम करता है। यदि दोनों noStroke() और noFill() कहा जाता है, स्क्रीन पर कुछ भी नहीं खींचा जाएगा। -stroke__description__0 = आकृतियों के चारों ओर रेखाएँ और सीमाएँ खींचने के लिए उपयोग किए गए रंग को सेट करता है। यह रंग या तो RGB या HSB रंग के संदर्भ में निर्दिष्ट होता है जो वर्तमान colorMode()पर निर्भर करता है। (डिफ़ॉल्ट रंग स्थान आरजीबी है, प्रत्येक मान 0 से 255 तक की सीमा में है। डिफ़ॉल्ट रूप से अल्फा श्रेणी भी 0 से 255 है। -stroke__description__1 = यदि एक एकल स्ट्रिंग तर्क प्रदान किया जाता है, तो आरजीबी, आरजीबीए और हेक्स सीएसएस रंग तार और सभी नामित रंग तार समर्थित हैं। इस मामले में, दूसरे तर्क के रूप में अल्फा संख्या मान समर्थित नहीं है, आरजीबीए फॉर्म का उपयोग किया जाना चाहिए। -stroke__description__2 = स्ट्रोक रंग सेट करने के लिए एक p5 Color ऑब्जेक्ट भी प्रदान किया जा सकता है। -arc__description__0 = स्क्रीन पर एक चाप बनाएं। यदि केवल एक्स, वाई, डब्ल्यू, एच, स्टार्ट और स्टॉप के साथ बुलाया जाता है, तो चाप को एक खुले पाई सेगमेंट के रूप में खींचा और भर दिया जाएगा। यदि एक मोड पैरामीटर प्रदान किया जाता है, तो चाप भर जाएगा एक खुला अर्ध-वृत्त (OPEN), एक बंद अर्ध-वृत्त (CHORD), या एक बंद पाई खंड (PIE) के रूप में। मूल को ellipseMode()से बदला जा सकता है समारोह। -arc__description__1 = चाप हमेशा दक्षिणावर्त खींची जाती है, जहां से प्रारंभ गिरती है, जहां दीर्घवृत्त पर स्टॉप गिरती है। किसी भी कोण में TWO_PI को जोड़ने या घटाने से वह नहीं बदलता जहां वे गिरते हैं। यदि दोनों प्रारंभ और स्टॉप एक ही स्थान पर गिरते हैं, तो एक पूर्ण दीर्घवृत्त खींचा जाएगा। ध्यान रखें कि y-अक्ष नीचे की दिशा में बढ़ता है, इसलिए कोणों को धनात्मक x-दिशा ("3 बजे") से दक्षिणावर्त मापा जाता है। -ellipse__description__0 = स्क्रीन पर एक अंडाकार (अंडाकार) खींचता है। डिफ़ॉल्ट रूप से, पहले दो पैरामीटर अंडाकार के केंद्र का स्थान निर्धारित करते हैं, और तीसरा और चौथा पैरामीटर आकार की चौड़ाई और ऊंचाई निर्धारित करता है। यदि कोई ऊंचाई निर्दिष्ट नहीं है, तो का मान चौड़ाई का उपयोग चौड़ाई और ऊंचाई दोनों के लिए किया जाता है। यदि एक नकारात्मक ऊंचाई या चौड़ाई निर्दिष्ट की जाती है, तो निरपेक्ष मान लिया जाता है। -ellipse__description__1 = समान चौड़ाई और ऊंचाई वाला एक दीर्घवृत्त एक वृत्त है। मूल को ellipseMode() फ़ंक्शन के साथ बदला जा सकता है। -line__description__0 = स्क्रीन पर एक रेखा (दो बिंदुओं के बीच एक सीधा पथ) खींचता है। यदि केवल 4 पैरामीटर के साथ कॉल किया जाता है, तो यह 1 पिक्सेल की डिफ़ॉल्ट चौड़ाई के साथ 2D में एक रेखा खींचेगा। इस चौड़ाई को stokeWeight()का उपयोग करके संशोधित किया जा सकता है फ़ंक्शन। एक लाइन को भरा नहीं जा सकता है, इसलिए fill() फंक्शन होगा किसी रेखा के रंग को प्रभावित न करें। इसलिए किसी रेखा को रंगने के लिए, stroke() फ़ंक्शन का उपयोग करें। -point__description__0 = एक बिंदु खींचता है, एक पिक्सेल के आयाम पर अंतरिक्ष में एक निर्देशांक। पहला पैरामीटर बिंदु के लिए क्षैतिज मान है, दूसरा पैरामीटर बिंदु के लिए लंबवत मान है। बिंदु का रंग stoke() के साथ बदल जाता है फ़ंक्शन। बिंदु का आकार strokeWeight() समारोह। -quad__description__0 = कैनवास पर एक क्वाड खींचता है। एक क्वाड एक चतुर्भुज, एक चार भुजा वाला बहुभुज है। यह एक आयत के समान है, लेकिन इसके किनारों के बीच के कोण नब्बे डिग्री तक सीमित नहीं हैं। मापदंडों की पहली जोड़ी (x1,y1) सेट पहले शीर्ष और बाद के जोड़े को परिभाषित आकार के चारों ओर दक्षिणावर्त या वामावर्त आगे बढ़ना चाहिए। z- तर्क केवल तभी काम करते हैं जब quad() का उपयोग WEBGL मोड में किया जाता है। -rect__description__0 = कैनवास पर एक आयत बनाता है। एक आयत एक चार-तरफा बंद आकार है जिसमें प्रत्येक कोण नब्बे डिग्री पर होता है। डिफ़ॉल्ट रूप से, पहले दो पैरामीटर ऊपरी-बाएं कोने का स्थान निर्धारित करते हैं, तीसरा चौड़ाई सेट करता है, और चौथा ऊंचाई सेट करता है। जिस तरह से इन मापदंडों की व्याख्या की जाती है, उसे rectMode() फ़ंक्शन के साथ बदला जा सकता है। -rect__description__1 = पांचवां, छठा, सातवां और आठवां पैरामीटर, यदि निर्दिष्ट किया गया है, क्रमशः शीर्ष-बाएं, शीर्ष-दाएं, निचले-दाएं और निचले-बाएं कोनों के लिए कोने त्रिज्या निर्धारित करें। एक छोड़ा गया कोने त्रिज्या पैरामीटर के मान पर सेट किया गया है पैरामीटर सूची में पहले निर्दिष्ट त्रिज्या मान। -triangle__description__0 = एक त्रिभुज को कैनवास पर खींचता है। एक त्रिभुज तीन बिंदुओं को जोड़कर बनाया गया एक विमान है। पहले दो तर्क पहले बिंदु को निर्दिष्ट करते हैं, मध्य दो तर्क दूसरे बिंदु को निर्दिष्ट करते हैं, और अंतिम दो तर्क तीसरे बिंदु को निर्दिष्ट करते हैं। -ellipseMode__description__0 = उस स्थान को संशोधित करता है जहां से दीर्घवृत्त खींचे जाते हैं, जिस तरह से पैरामीटर दिए गए हैं ellipse(), circle() और arc() की व्याख्या की जाती है। -ellipseMode__description__1 = डिफ़ॉल्ट मोड CENTER है, जिसमें पहले दो मापदंडों की व्याख्या आकृति के केंद्र बिंदु के रूप में क्रमशः x और y निर्देशांक के रूप में की जाती है, जबकि तीसरा और चौथा पैरामीटर इसकी चौड़ाई और ऊंचाई है। -ellipseMode__description__2 = ellipseMode(RADIUS) आकृति के केंद्र बिंदु के x और y निर्देशांक के रूप में पहले दो पैरामीटर का भी उपयोग करता है, लेकिन आकार की चौड़ाई और ऊंचाई के आधे हिस्से को निर्दिष्ट करने के लिए तीसरे और चौथे पैरामीटर का उपयोग करता है। -ellipseMode__description__3 = ellipseMode(CORNER) आकृति के ऊपरी-बाएँ कोने के रूप में पहले दो मापदंडों की व्याख्या करता है, जबकि तीसरा और चौथा पैरामीटर इसकी चौड़ाई और ऊंचाई है। -ellipseMode__description__4 = ellipseMode(CORNERS) पहले दो मापदंडों को दीर्घवृत्त के बाउंडिंग बॉक्स के एक कोने के स्थान के रूप में और तीसरे और चौथे पैरामीटर को विपरीत कोने के स्थान के रूप में व्याख्या करता है। -ellipseMode__description__5 = इस पद्धति के पैरामीटर को सभी CAPS में लिखा जाना चाहिए क्योंकि वे सभी CAPS में स्थिरांक के रूप में पूर्वनिर्धारित हैं और जावास्क्रिप्ट एक केस-संवेदी भाषा है। -noSmooth__description__0 = सभी ज्यामिति को दांतेदार (उपनाम) किनारों के साथ खींचता है। ध्यान दें कि smooth() डिफ़ॉल्ट रूप से 2D मोड में सक्रिय है, इसलिए कॉल करना आवश्यक है noSmooth() ज्योमेट्री, इमेज और फॉण्ट की स्मूदिंग को डिसेबल करने के लिए। 3D मोड में noSmooth() डिफ़ॉल्ट रूप से सक्षम है, इसलिए smooth() को कॉल करना आवश्यक है यदि आप अपनी ज्यामिति पर चिकने (एंटीअलाइज्ड) किनारे चाहते हैं। -rectMode__description__0 = उस स्थान को संशोधित करता है जहां से पैरामीटर दिए गए तरीके को बदलकर आयतें खींची जाती हैं rect() की व्याख्या की जाती है। -rectMode__description__1 = डिफ़ॉल्ट मोड कॉर्नर है, जो पहले दो मापदंडों को आकार के ऊपरी-बाएँ कोने के रूप में व्याख्या करता है, जबकि तीसरा और चौथा पैरामीटर इसकी चौड़ाई और ऊंचाई है। -rectMode__description__2 = रेक्टमोड (कॉर्नर) पहले दो मापदंडों को कोनों में से एक के स्थान के रूप में और तीसरे और चौथे पैरामीटर को तिरछे विपरीत कोने के स्थान के रूप में व्याख्या करता है। ध्यान दें, आयत निर्देशांक के बीच खींचा जाता है, इसलिए यह आवश्यक नहीं है कि पहला कोना ऊपरी बाएँ कोना होगा। -rectMode__description__3 = rectMode(CENTER) आकृति के केंद्र बिंदु के रूप में पहले दो मापदंडों की व्याख्या करता है, जबकि तीसरा और चौथा पैरामीटर इसकी चौड़ाई और ऊंचाई है। -rectMode__description__4 = rectMode(RADIUS) आकृति के केंद्र बिंदु के रूप में पहले दो मापदंडों का भी उपयोग करता है, लेकिन क्रमशः आकार की चौड़ाई और ऊंचाई के आधे हिस्से को निर्दिष्ट करने के लिए तीसरे और चौथे पैरामीटर का उपयोग करता है। -rectMode__description__5 = इस पद्धति के पैरामीटर को सभी CAPS में लिखा जाना चाहिए क्योंकि वे सभी CAPS में स्थिरांक के रूप में पूर्वनिर्धारित हैं और जावास्क्रिप्ट एक केस-संवेदी भाषा है। -smooth__description__0 = सभी ज्यामिति को चिकने (एंटी-अलियास) किनारों के साथ खींचता है। smooth() आकार बदलने वाली छवियों की छवि गुणवत्ता में भी सुधार करेगा। ध्यान दें कि smooth() डिफ़ॉल्ट रूप से 2D मोड में सक्रिय है; noSmooth() का इस्तेमाल ज्योमेट्री, इमेज और फोंट की स्मूदिंग को डिसेबल करने के लिए किया जा सकता है। 3डी मोड में, noSmooth() डिफ़ॉल्ट रूप से सक्षम है, इसलिए smooth() को कॉल करना आवश्यक है यदि आप अपनी ज्यामिति पर चिकने (एंटीअलाइज्ड) किनारे चाहते हैं। -strokeCap__description__0 = लाइन एंडिंग को रेंडर करने के लिए स्टाइल सेट करता है। ये सिरे या तो गोल, चौकोर या विस्तारित होते हैं, जिनमें से प्रत्येक को संबंधित मापदंडों के साथ निर्दिष्ट किया जाता है: ROUND, SQUARE और PROJECT। डिफ़ॉल्ट कैप राउंड है। -strokeCap__description__1 = इस पद्धति के पैरामीटर को सभी CAPS में लिखा जाना चाहिए क्योंकि वे सभी CAPS में स्थिरांक के रूप में पूर्वनिर्धारित हैं और जावास्क्रिप्ट एक केस-संवेदी भाषा है। -strokeJoin__description__0 = जोड़ों की शैली सेट करता है जो लाइन सेगमेंट को जोड़ता है। ये जोड़ या तो मिटर्ड, बेवेल या गोलाकार होते हैं और संबंधित पैरामीटर एमआईटीईआर, बेवेल और राउंड के साथ निर्दिष्ट होते हैं। डिफ़ॉल्ट संयुक्त एमआईटीईआर है। इस पद्धति के पैरामीटर को सभी CAPS में लिखा जाना चाहिए क्योंकि वे सभी CAPS में स्थिरांक के रूप में पूर्वनिर्धारित हैं और जावास्क्रिप्ट एक केस-संवेदी भाषा है। -bezier__description__0 = स्क्रीन पर एक क्यूबिक बेज़ियर वक्र बनाता है। इन वक्रों को एंकर और नियंत्रण बिंदुओं की एक श्रृंखला द्वारा परिभाषित किया जाता है। पहले दो पैरामीटर पहले एंकर पॉइंट को निर्दिष्ट करते हैं और अंतिम दो पैरामीटर अन्य एंकर पॉइंट को निर्दिष्ट करते हैं, जो पहले और अंतिम बिंदु बन जाते हैं। वक्र पर। मध्य पैरामीटर दो नियंत्रण बिंदुओं को निर्दिष्ट करते हैं जो वक्र के आकार को परिभाषित करते हैं। लगभग बोलते हुए, नियंत्रण बिंदु वक्र को उनकी ओर "खींचें"। -bezier__description__1 = बेज़ियर कर्व्स फ्रांसीसी ऑटोमोटिव इंजीनियर पियरे बेज़ियर द्वारा विकसित किए गए थे, और आमतौर पर कंप्यूटर ग्राफिक्स में धीरे-धीरे ढलान वाले वक्रों को परिभाषित करने के लिए उपयोग किए जाते हैं। वक्र() भी देखें। -bezierPoint__description__0 = बेज़ियर वक्र के नियंत्रण और एंकर बिंदुओं के x या y समन्वय मानों को देखते हुए, यह स्थिति t पर बेज़ियर के x या y निर्देशांक का मूल्यांकन करता है। पैरामीटर a और d पहले और अंतिम बिंदुओं के x या y निर्देशांक हैं। वक्र पर जबकि बी और सी नियंत्रण बिंदुओं के हैं। अंतिम पैरामीटर टी परिणामी बिंदु की स्थिति है जो 0 और 1 के बीच दिया गया है। यह एक बार x निर्देशांक के साथ और दूसरी बार y निर्देशांक के साथ किया जा सकता है t पर एक बेजियर वक्र का स्थान प्राप्त करें। -bezierPoint__returns = स्थिति टी पर बेज़ियर वक्र का मूल्य -bezierTangent__description__0 = A, B, C, D के लिए स्थितिी t पर बेज़ियर के स्पर्शरेखा का मूल्यांकन करता है। पैरामीटर A और D वक्र पर पहले और आखिरी बिंदु हैं, और B और D नियंत्रण बिंदु हैं। अंतिम पैरामीटर t के बीच भिन्न होता है 0 और 1। -bezierTangent__returns = स्थिति में स्पर्शरेखा t -curve__description__0 = स्क्रीन पर दो बिंदुओं के बीच एक घुमावदार रेखा खींचता है, जिसे मध्य चार मापदंडों के रूप में दिया गया है। पहले दो पैरामीटर एक नियंत्रण बिंदु हैं, जैसे कि वक्र इस बिंदु से आया है, भले ही वह खींचा न गया हो। अंतिम दो पैरामीटर समान रूप से दूसरे का वर्णन करते हैं नियंत्रण बिंदु।

    curve() कार्यों की श्रृंखला को एक साथ रखकर या curveVertex()। एक अतिरिक्त फ़ंक्शन जिसे curveTightness() कहा जाता है, की दृश्य गुणवत्ता के लिए नियंत्रण प्रदान करता है वक्र। curve() फ़ंक्शन Catmull-Rom splines का कार्यान्वयन है। -curvePoint__returns = p5 ऑब्जेक्ट -curveTangent__returns = स्थिति में स्पर्शरेखा t -beginContour__description__0 = नकारात्मक बनाने के लिए beginContour() और endContour() फ़ंक्शन का उपयोग करें अक्षर 'O' के केंद्र जैसे आकार के भीतर आकार। beginContour() आकृति के लिए शीर्षों को रिकॉर्ड करना शुरू करता है और endContour() रिकॉर्डिंग बंद कर देता है। ऋणात्मक आकार को परिभाषित करने वाले शीर्षों को बाहरी आकार से विपरीत दिशा में "wind" होना चाहिए। पहले बाहरी दक्षिणावर्त क्रम के लिए शीर्ष बनाएं, फिर आंतरिक के लिए आकृतियाँ, वामावर्त में शीर्ष आकृतियाँ बनाएँ। -beginContour__description__1 = इन कार्यों का उपयोग केवल beginShape()/endShape() में किया जा सकता है। जोड़ी और रूपांतरण जैसे translate(), rotate() , और scale() एक beginContour()/ के भीतर काम नहीं करते हैं endContour() जोड़ी। अन्य आकृतियों का उपयोग करना भी संभव नहीं है, जैसे कि ellipse () या rect() भीतर। -beginShape__description__0 = beginShape() और endShape() फ़ंक्शन का उपयोग करने से और अधिक निर्माण करने की अनुमति मिलती है जटिल रूप। beginShape() एक आकृति के लिए शीर्षों को रिकॉर्ड करना शुरू करता है और endShape() रिकॉर्डिंग बंद कर देता है। प्रकार के पैरामीटर का मान यह बताता है कि दिए गए शीर्षों से किस प्रकार की आकृतियाँ बनानी हैं। बिना किसी विधा के निर्दिष्ट किए, आकार कोई भी अनियमित बहुभुज हो सकता है। -beginShape__description__1 = beginShape() के लिए उपलब्ध पैरामीटर POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, और TESS (केवल WebGL) हैं। कॉल करने के बाद beginShape() फ़ंक्शन, vertex() कमांड की एक श्रृंखला होनी चाहिए अनुसरण करें। आकृति बनाना बंद करने के लिए, endShape() पर कॉल करें। प्रत्येक आकृति को वर्तमान स्ट्रोक रंग से रेखांकित किया जाएगा और भरण रंग से भरा जाएगा। -beginShape__description__2 = रूपांतरण जैसे translate(), rotate(), और scale() beginShape() के भीतर काम नहीं करते। यह भी नहीं है अन्य आकृतियों का उपयोग करना संभव है, जैसे कि ellipse() या rect() के भीतर beginShape()। -bezierVertex__description__0 = बेज़ियर कर्व्स के लिए वर्टेक्स निर्देशांक निर्दिष्ट करता है। bezierVertex() के लिए प्रत्येक कॉल दो नियंत्रण बिंदुओं की स्थिति और एक बेज़ियर वक्र के एक एंकर पॉइंट को परिभाषित करता है, एक लाइन या आकार में एक नया सेगमेंट जोड़ता है। वेबजीएल मोड के लिए bezierVertex() में इस्तेमाल किया जा सकता है 2डी और साथ ही 3डी मोड। 2डी मोड 6 पैरामीटर की अपेक्षा करता है, जबकि 3डी मोड 9 पैरामीटर (जेड निर्देशांक सहित) की अपेक्षा करता है। -bezierVertex__description__1 = पहली बार bezierVertex() का उपयोग beginShape() कॉल के भीतर किया जाता है, इसे vertex()। इस फ़ंक्शन का उपयोग beginShape() और endShape() और केवल तभी जब beginShape()। -curveVertex__description__0 = वक्र के लिए शीर्ष निर्देशांक निर्दिष्ट करता है। इस फ़ंक्शन का उपयोग केवल beginShape() और endShape()के बीच किया जा सकता है और केवल तभी जब beginShape() के लिए निर्दिष्ट कोई मोड पैरामीटर न हो। WebGL मोड के लिए curveVertex() का उपयोग 2D में किया जा सकता है साथ ही 3D मोड। 2D मोड 2 पैरामीटर की अपेक्षा करता है, जबकि 3D मोड 3 पैरामीटर की अपेक्षा करता है। -curveVertex__description__1 = वक्र की शुरुआत और अंत को निर्देशित करने के लिए curveVertex() लाइनों की एक श्रृंखला में पहले और अंतिम बिंदुओं का उपयोग किया जाएगा। दूसरे और तीसरे बिंदुओं के बीच एक छोटा वक्र खींचने के लिए न्यूनतम चार बिंदुओं की आवश्यकता होती है। पांचवां जोड़ना curveVertex() के साथ बिंदु दूसरे, तीसरे और चौथे बिंदुओं के बीच वक्र खींचेगा। curveVertex() फ़ंक्शन कैटमुल-रोम स्प्लिन का कार्यान्वयन है। -endContour__description__0 = ऋण बनाने के लिए beginContour() और endContour() फ़ंक्शन का उपयोग करें अक्षर 'O' के केंद्र जैसे आकार के भीतर आकार। beginContour() आकृति के लिए शीर्षों को रिकॉर्ड करना शुरू करता है और endContour() रिकॉर्डिंग बंद कर देता है। ऋणात्मक आकार को परिभाषित करने वाले शीर्षों को बाहरी आकार से विपरीत दिशा में "wind" होना चाहिए। पहले बाहरी दक्षिणावर्त क्रम के लिए कोने बनाएं, फिर आंतरिक के लिए आकृतियाँ, वामावर्त में शीर्ष आकृतियाँ बनाएँ। -endContour__description__1 = इन कार्यों का उपयोग केवल beginShape()/endShape() में किया जा सकता है। जोड़ी और रूपांतरण जैसे translate(), rotate() , और scale() एक beginContour()/ के भीतर काम नहीं करते हैं endContour() जोड़ी। अन्य आकृतियों का उपयोग करना भी संभव नहीं है, जैसे कि ellipse () या rect() भीतर। -endShape__description__0 = endShape() फ़ंक्शन beginShape() का सहयोगी है और beginShape() के बाद ही कॉल किया जा सकता है। जब endShape() है कहा जाता है, पिछली कॉल के बाद से परिभाषित सभी छवि डेटा beginShape() को छवि बफर में लिखा जाता है। मोड पैरामीटर के मान के रूप में स्थिर बंद करें आकृति को बंद करने के लिए (शुरुआत और अंत को जोड़ने के लिए)। -quadraticVertex__description__0 = द्विघात बेज़ियर वक्रों के लिए शीर्ष निर्देशांक निर्दिष्ट करता है। quadraticVertex() के लिए प्रत्येक कॉल एक नियंत्रण बिंदु और एक Bezier वक्र के एक एंकर बिंदु की स्थिति को परिभाषित करता है, एक रेखा या आकार में एक नया खंड जोड़ता है। पहली बार quadraticVertex() का उपयोग किया जाता है एक beginShape() कॉल, इसे vertex()पर कॉल के साथ पहले से तैयार किया जाना चाहिए पहला एंकर पॉइंट सेट करने के लिए। WebGL मोड के लिए quadraticVertex() का उपयोग 2D के साथ-साथ 3D मोड में भी किया जा सकता है। 2D मोड 4 पैरामीटर की अपेक्षा करता है, जबकि 3D मोड 6 पैरामीटर (z निर्देशांक सहित) की अपेक्षा करता है। -quadraticVertex__description__1 = इस फ़ंक्शन का उपयोग beginShape() और endShape() के बीच किया जाना चाहिए और केवल तभी जब beginShape() में निर्दिष्ट कोई मोड या POINTS पैरामीटर न हो। -vertex__description__0 = सभी आकृतियों का निर्माण शीर्षों की एक श्रृंखला को जोड़कर किया जाता है। vertex() का उपयोग बिंदुओं, रेखाओं, त्रिभुजों, चतुर्भुज और के लिए शीर्ष निर्देशांक निर्दिष्ट करने के लिए किया जाता है। बहुभुज। इसका उपयोग विशेष रूप से beginShape() और endShape() में किया जाता है कार्य। -frameRate__description__0 = प्रत्येक सेकंड में प्रदर्शित होने वाले फ़्रेमों की संख्या निर्दिष्ट करता है। उदाहरण के लिए, फ़ंक्शन कॉल frameRate(30) एक सेकंड में 30 बार ताज़ा करने का प्रयास करेगा। यदि प्रोसेसर निर्दिष्ट दर को बनाए रखने के लिए पर्याप्त तेज़ नहीं है, तो फ़्रेम दर नहीं होगी हासिल किया। फ्रेम दर को setup() के भीतर सेट करने की अनुशंसा की जाती है। डिफ़ॉल्ट फ्रेम दर प्रदर्शन की फ्रेम दर पर आधारित होती है (यहां इसे " भी कहा जाता है) ताज़ा दर"), जो अधिकांश कंप्यूटरों पर 60 फ़्रेम प्रति सेकंड पर सेट है। 24 फ़्रेम प्रति सेकंड (फ़िल्मों के लिए सामान्य) या इससे अधिक की फ़्रेम दर सुचारू एनिमेशन के लिए पर्याप्त होगी। यह setFrameRate(val) के समान है। -frameRate__description__1 = कॉलिंग frameRate() बिना किसी तर्क के वर्तमान फ्रैमरेट लौटाती है। ड्रा फ़ंक्शन को मान वापस करने से पहले कम से कम एक बार चलना चाहिए। यह वही है getFrameRate() के रूप में। -frameRate__description__2 = frameRate() को ऐसे तर्कों के साथ कॉल करना जो संख्याओं के प्रकार के नहीं हैं या जो सकारात्मक नहीं हैं, वर्तमान फ्रैमरेट भी लौटाते हैं। -displayWidth__description__0 = सिस्टम वैरिएबल जो डिफ़ॉल्ट pixelDensity के अनुसार स्क्रीन डिस्प्ले की चौड़ाई को स्टोर करता है। इसका उपयोग किसी भी डिस्प्ले साइज पर फुल-स्क्रीन प्रोग्राम चलाने के लिए किया जाता है। वास्तविक स्क्रीन आकार वापस करने के लिए, इसे पिक्सेल घनत्व से गुणा करें। -displayHeight__description__0 = सिस्टम वैरिएबल जो डिफ़ॉल्ट pixelDensity के अनुसार स्क्रीन डिस्प्ले की ऊंचाई को स्टोर करता है। इसका उपयोग किसी भी डिस्प्ले साइज पर फुल-स्क्रीन प्रोग्राम चलाने के लिए किया जाता है। वास्तविक स्क्रीन आकार वापस करने के लिए, इसे पिक्सेल घनत्व से गुणा करें। -windowResized__description__0 = windowResized() फ़ंक्शन हर बार ब्राउज़र विंडो का आकार बदलने पर एक बार कॉल किया जाता है। कैनवास का आकार बदलने या इसके लिए कोई अन्य समायोजन करने के लिए यह एक अच्छी जगह है नई विंडो के आकार को समायोजित करें। -width__description__0 = सिस्टम वैरिएबल जो ड्रॉइंग कैनवास की चौड़ाई को स्टोर करता है। यह मान createCanvas() फ़ंक्शन के पहले पैरामीटर द्वारा सेट किया गया है। उदाहरण के लिए, फ़ंक्शन कॉल createCanvas(320, 240) चौड़ाई चर को मान 320 पर सेट करता है। चौड़ाई का मान डिफ़ॉल्ट रूप से 100 हो जाता है यदि createCanvas() का उपयोग नहीं किया जाता है कार्यक्रम। -height__description__0 = सिस्टम वैरिएबल जो ड्राइंग कैनवास की ऊंचाई को स्टोर करता है। यह मान createCanvas() फ़ंक्शन के दूसरे पैरामीटर द्वारा सेट किया गया है। उदाहरण के लिए, फ़ंक्शन कॉल createCanvas(320, 240) ऊंचाई चर को 240 मान पर सेट करता है। ऊंचाई का मान डिफ़ॉल्ट रूप से 100 हो जाता है यदि createCanvas() का उपयोग नहीं किया जाता है कार्यक्रम। -fullscreen__description__0 = यदि तर्क दिया गया है, तो तर्क के मूल्य के आधार पर स्केच को पूर्णस्क्रीन पर सेट करता है या नहीं। यदि कोई तर्क नहीं दिया जाता है, तो वर्तमान पूर्णस्क्रीन स्थिति लौटाता है। ध्यान दें कि ब्राउज़र प्रतिबंधों के कारण इसे केवल उपयोगकर्ता इनपुट पर ही कॉल किया जा सकता है, उदाहरण के लिए , माउस प्रेस पर नीचे दिए गए उदाहरण की तरह। -fullscreen__returns = बूलियन: वर्तमान पूर्ण स्क्रीन स्थिति -pixelDensity__description__0 = उच्च पिक्सेल घनत्व डिस्प्ले के लिए पिक्सेल स्केलिंग सेट करता है। डिफ़ॉल्ट रूप से पिक्सेल घनत्व प्रदर्शन घनत्व से मेल खाने के लिए सेट होता है, इसे बंद करने के लिए पिक्सेल घनत्व (1) पर कॉल करें। pixelDensity() पर कॉल करना बिना किसी तर्क के स्केच का वर्तमान पिक्सेल घनत्व लौटाता है। -displayDensity__returns = संख्या: मॉनिटर की वर्तमान पिक्सेल घनत्व -getURL__returns = स्ट्रिंग: URL -getURLPath__returns = फिक्स: पते के घटक -getURLParams__returns = ऑब्जेक्ट: URL पैरामीटर -preload__description__0 = setup() से पहले सीधे कॉल किया जाता है, preload() फ़ंक्शन है अवरुद्ध तरीके से बाहरी फ़ाइलों के एसिंक्रोनस लोडिंग को संभालने के लिए उपयोग किया जाता है। यदि एक प्रीलोड फ़ंक्शन परिभाषित किया गया है, तो setup() तब तक प्रतीक्षा करेगा जब तक कि कोई भी लोड कॉल समाप्त न हो जाए . लोड कॉल के अलावा कुछ नहीं (loadImage, loadJSON, loadFont, loadStrings, आदि) प्रीलोड फ़ंक्शन के अंदर होना चाहिए। यदि एसिंक्रोनस लोडिंग है पसंदीदा, लोड विधियों को इसके बजाय setup() या कहीं भी कॉलबैक पैरामीटर के उपयोग के साथ कॉल किया जा सकता है। -preload__description__1 = डिफ़ॉल्ट रूप से पाठ "loading..." प्रदर्शित किया जाएगा। अपना स्वयं का लोडिंग पृष्ठ बनाने के लिए, अपने पृष्ठ में आईडी "p5_loading" के साथ एक HTML तत्व शामिल करें। अधिक जानकारी यहां। -setup__description__0 = setup() फ़ंक्शन को प्रोग्राम शुरू होने पर एक बार कॉल किया जाता है। इसका उपयोग प्रारंभिक पर्यावरण गुणों जैसे स्क्रीन आकार और पृष्ठभूमि रंग को परिभाषित करने और मीडिया लोड करने के लिए किया जाता है जैसे कि प्रोग्राम शुरू होने पर इमेज और फोंट। प्रत्येक प्रोग्राम के लिए केवल एक setup() फ़ंक्शन हो सकता है और इसे इसके बाद फिर से कॉल नहीं किया जाना चाहिए प्रारंभिक निष्पादन। -setup__description__1 = ध्यान दें: setup() के अंतर्गत घोषित वैरिएबल draw() सहित अन्य कार्यों में पहुंच योग्य नहीं हैं। -draw__description__0 = setup() के बाद सीधे कॉल किया जाता है, draw() लगातार काम करता है प्रोग्राम के बंद होने तक या noLoop() कॉल किए जाने तक अपने ब्लॉक के अंदर निहित कोड की पंक्तियों को निष्पादित करता है। नोट करें यदि noLoop() को setup(), draw() में कॉल किया जाता है। रुकने से पहले एक बार निष्पादित किया जाएगा। draw() स्वचालित रूप से कॉल किया जाता है और इसे स्पष्ट रूप से कभी नहीं कहा जाना चाहिए। -draw__description__1 = इसे हमेशा noLoop(), redraw() से नियंत्रित किया जाना चाहिए और loop()। noLoop() के बाद कोड को में बंद कर देता है। draw() क्रियान्वित होने से, redraw() कोड को draw() एक बार निष्पादित करने के लिए, और loop() कोड को अंदर कर देगा draw() लगातार क्रियान्वित करना फिर से शुरू करने के लिए। -draw__description__2 = प्रत्येक सेकंड में draw() निष्पादित होने की संख्या को frameRate() से नियंत्रित किया जा सकता है समारोह। -draw__description__3 = प्रत्येक स्केच के लिए केवल एक draw() फ़ंक्शन हो सकता है, और draw()हो सकता है। मौजूद होना चाहिए यदि आप चाहते हैं कि कोड लगातार चलता रहे, या mousePressed() जैसी घटनाओं को संसाधित करने के लिए। कभी-कभी, आपके पास एक खाली हो सकता है अपने प्रोग्राम में draw() पर कॉल करें, जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है। -draw__description__4 = यह ध्यान रखना महत्वपूर्ण है कि ड्रॉइंग कोऑर्डिनेट सिस्टम प्रत्येक -createCanvas__description__0 = दस्तावेज़ में एक कैनवास तत्व बनाता है, और इसके आयामों को पिक्सेल में सेट करता है। इस विधि को सेटअप के प्रारंभ में केवल एक बार कॉल किया जाना चाहिए। createCanvasको कॉल करना एक स्केच में एक से अधिक बार बहुत अप्रत्याशित व्यवहार होगा। यदि आप एक से अधिक ड्राइंग कैनवास चाहते हैं तो आप createGraphics का उपयोग कर सकते हैं (डिफ़ॉल्ट रूप से छिपा हुआ लेकिन यह दिखाया जा सकता है)। -createCanvas__description__1 = महत्वपूर्ण नोट: 2D मोड में (अर्थात जब p5.Renderer सेट नहीं है) मूल (0,0) स्क्रीन के ऊपर बाईं ओर स्थित है। 3D मोड में (अर्थात जब p5.Renderer WEBGL पर सेट है), मूल कैनवास के केंद्र में स्थित है। this issue अधिक जानकारी के लिए। -createCanvas__description__2 = सिस्टम चर की चौड़ाई और ऊंचाई इस फ़ंक्शन को दिए गए पैरामीटर द्वारा निर्धारित की जाती है। यदि createCanvas() का उपयोग नहीं किया जाता है, तो विंडो को एक डिफ़ॉल्ट दिया जाएगा 100x100 पिक्सेल का आकार। -createCanvas__description__3 = कैनवास को स्थान देने के और तरीकों के लिए, कैनवस की स्थिति विकी पृष्ठ देखें। -createCanvas__returns = ऑब्जेक्ट: उत्पन्न कैनवास -createGraphics__returns = स्क्रीन पर ग्राफिक बफर -blendMode__description__0 = डिस्प्ले विंडो में पिक्सल को परिभाषित मोड के अनुसार ब्लेंड करता है। सोर्स पिक्सल (ए) को डिस्प्ले विंडो में पहले से मौजूद पिक्सल के साथ ब्लेंड करने के लिए निम्नलिखित मोड का विकल्प है:
    • BLEND - रंगों का रैखिक प्रक्षेप: C = A*factor + B. यह डिफ़ॉल्ट सम्मिश्रण मोड है।
    • ADD - A और B का योग
    • डार्केस्ट - केवल सबसे गहरा रंग सफल होता है: C = min(A*factor, B).
    • सबसे हल्का - केवल सबसे हल्का रंग सफल होता है: C = max(A*factor, B).
    • DIFFERENCE - अंतर्निहित छवि से रंगों को घटाएं।
      • < li>EXCLUSION - DIFFERENCE के समान, लेकिन कम चरम।
    • MULTIPLY - रंगों को गुणा करें, परिणाम हमेशा होगा गहरा।
    • SCREEN - विपरीत गुणा, रंगों के व्युत्क्रम मानों का उपयोग करता है।
    • REPLACE - पिक्सल पूरी तरह से दूसरों की जगह लेते हैं और अल्फ़ा (पारदर्शिता) मानों का उपयोग न करें।
    • REMOVE - A के अल्फा स्ट्रेंथ के साथ B से पिक्सेल निकालता है।
    • Overlay - MULTIPLY का मिश्रण और <कोड>स्क्रीन । डार्क वैल्यू को गुणा करता है, और लाइट वैल्यू को स्क्रीन करता है। (2D)
    • HARD_LIGHT - SCREEN जब ५०% से अधिक ग्रे, MULTIPLY जब निचला। (2D)
    • SOFT_LIGHT - DARKEST और LIGHTEST का मिश्रण। OVERLAY की तरह काम करता है, लेकिन उतना कठोर नहीं। (2D)
    • DODGE - हल्के टोन को हल्का करता है और कंट्रास्ट को बढ़ाता है, अंधेरे को नज़रअंदाज़ करता है। (2D)
    • BURN - गहरे रंग के क्षेत्र लगाए जाते हैं, कंट्रास्ट को बढ़ाते हुए, रोशनी को नज़रअंदाज़ किया जाता है। (2D)
    • सबट्रैक्ट - A और B के शेष (3D)
    -blendMode__description__1 = (2D) इंगित करता है कि यह मिश्रण मोड केवल 2D रेंडरर में काम करता है। (3D) इंगित करता है कि यह मिश्रण मोड केवल< /b> WEBGL रेंडरर में काम करता है। -noLoop__description__0 = p5.js को draw() में लगातार कोड निष्पादित करने से रोकता है। यदि loop() को कॉल किया जाता है, draw() में कोड लगातार चलने लगता है। यदि noLoop() setup() में, यह ब्लॉक के अंदर की आखिरी लाइन होनी चाहिए। -noLoop__description__1 = जब noLoop() का उपयोग किया जाता है, तो mousePressed() या keyPressed()। इसके बजाय, redraw() या loop(), जो draw() चलेगा, जो स्क्रीन को ठीक से अपडेट कर सकता है। इसका मतलब है कि जब noLoop() को कॉल किया गया है, तो कोई भी ड्रॉइंग नहीं कर सकता होता है, और saveFrames() या loadPixels() जैसे कार्य नहीं हो सकते हैं इस्तेमाल किया गया। -noLoop__description__2 = ध्यान दें कि अगर स्केच का आकार बदला जाता है, तो redraw() को स्केच को अपडेट करने के लिए noLoop()के बाद भी कॉल किया जाएगा। निर्दिष्ट किया गया है। अन्यथा, loop() को कॉल किए जाने तक स्केच एक विषम स्थिति में प्रवेश करेगा। -noLoop__description__3 = loop() की वर्तमान स्थिति की जांच करने के लिए isLooping() का उपयोग करें। -loop__description__0 = डिफ़ॉल्ट रूप से, p5.js draw() के माध्यम से लगातार लूप करता है, इसके भीतर कोड निष्पादित करता है। हालांकि, draw() लूप को कॉल करके रोका जा सकता है noLoop()। उस स्थिति में, draw() लूप कर सकते हैं loop() के साथ फिर से शुरू करें। -loop__description__1 = अंदर के setup() से loop() को कॉल करने से बचें। -loop__description__2 = loop() की वर्तमान स्थिति की जांच करने के लिए isLooping() का उपयोग करें। -push__description__0 = push() फ़ंक्शन वर्तमान आरेखण शैली सेटिंग्स और परिवर्तनों को सहेजता है, जबकि pop() इन सेटिंग्स को पुनर्स्थापित करता है। ध्यान दें कि ये फ़ंक्शन हमेशा एक साथ उपयोग किए जाते हैं। वे आपको शैली और परिवर्तन सेटिंग्स को बदलने की अनुमति देते हैं और बाद में जो आपके पास था उस पर वापस लौटते हैं। जब एक नया राज्य शुरू होता है push(), यह वर्तमान शैली पर आधारित है और जानकारी को रूपांतरित करता है। push() और pop() अधिक नियंत्रण प्रदान करने के लिए कार्यों को एम्बेड किया जा सकता है। (प्रदर्शन के लिए दूसरा उदाहरण देखें।) -push__description__1 = push() निम्नलिखित कार्यों द्वारा नियंत्रित वर्तमान परिवर्तन स्थिति और शैली सेटिंग्स से संबंधित जानकारी संग्रहीत करता है: भरें(), noFill(), noStroke() , stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix (), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). -push__description__2 = WEBGL मोड में अतिरिक्त स्टाइल सेटिंग्स संग्रहीत की जाती हैं। इन्हें निम्नलिखित कार्यों द्वारा नियंत्रित किया जाता है: setCamera(), ambientLight (), directionLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() और shader()। -pop__description__0 = push() फ़ंक्शन वर्तमान आरेखण शैली सेटिंग्स और परिवर्तनों को सहेजता है, जबकि pop() इन सेटिंग्स को पुनर्स्थापित करता है। ध्यान दें कि ये फ़ंक्शन हमेशा एक साथ उपयोग किए जाते हैं। वे आपको शैली और परिवर्तन सेटिंग्स को बदलने की अनुमति देते हैं और बाद में जो आपके पास था उस पर वापस लौटते हैं। जब एक नया राज्य शुरू होता है push(), यह वर्तमान शैली पर आधारित है और जानकारी को रूपांतरित करता है। push() और pop() अधिक नियंत्रण प्रदान करने के लिए कार्यों को एम्बेड किया जा सकता है। (प्रदर्शन के लिए दूसरा उदाहरण देखें।) -pop__description__1 = push() निम्नलिखित कार्यों द्वारा नियंत्रित वर्तमान परिवर्तन स्थिति और शैली सेटिंग्स से संबंधित जानकारी संग्रहीत करता है: भरें(), noFill(), noStroke() , stroke(), tint(), noTint(), strokeWeight(), स्ट्रोककैप(), strokeJoint(), imageMode(), rectMode(), ellipseMode() a>, colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix (), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). -pop__description__2 = WEBGL मोड में अतिरिक्त स्टाइल सेटिंग्स संग्रहीत की जाती हैं। इन्हें निम्नलिखित कार्यों द्वारा नियंत्रित किया जाता है: setCamera(), ambientLight(), directionLight(), pointLight(), texture(), specularMaterial(), चमकता(), normalMaterial() और shader()। -redraw__description__0 = कोड को एक बार draw() के भीतर निष्पादित करता है। यह फ़ंक्शन प्रोग्राम को केवल आवश्यक होने पर ही डिस्प्ले विंडो को अपडेट करने की अनुमति देता है, उदाहरण के लिए जब कोई ईवेंट पंजीकृत किया जाता है mousePressed() या keyPressed() होता है। -redraw__description__1 = किसी प्रोग्राम की संरचना में, redraw() को कॉल करना ही समझदारी है। >mousePressed(). ऐसा इसलिए है क्योंकि redraw() नहीं चलता है draw() तुरंत (यह केवल एक ध्वज सेट करता है जो इंगित करता है कि एक अद्यतन की आवश्यकता है)। -redraw__description__2 = redraw() फ़ंक्शन ठीक से काम नहीं करता है जब draw()के अंदर कॉल किया जाता है।. एनिमेशन को सक्षम/अक्षम करने के लिए, loop() और noLoop()का उपयोग करें। -redraw__description__3 = इसके अलावा आप प्रति मेथड कॉल के लिए रेड्रा की संख्या निर्धारित कर सकते हैं। बस एक पूर्णांक को एकल पैरामीटर के रूप में जोड़ें। -rotate__description__0 = कोण पैरामीटर द्वारा निर्दिष्ट राशि से एक आकृति को घुमाता है। यह फ़ंक्शन angleMode के लिए जिम्मेदार है, इसलिए कोणों को रेडियन या डिग्री में दर्ज किया जा सकता है। -rotate__description__1 = ऑब्जेक्ट्स को हमेशा उनकी सापेक्ष स्थिति के आसपास मूल में घुमाया जाता है और सकारात्मक संख्याएं वस्तुओं को एक दक्षिणावर्त दिशा में घुमाती हैं। परिवर्तन उन सभी चीजों पर लागू होता है जो फ़ंक्शन के बाद और बाद में कॉल के प्रभाव को जमा करते हैं। उदाहरण के लिए, रोटेट (HALF_PI) को कॉल करना और फिर घुमाएं (HALF_PI) रोटेट (PI) के समान है। draw() फिर से शुरू होने पर सभी रूपांतरण रीसेट हो जाते हैं। -rotate__description__2 = तकनीकी रूप से, rotate() वर्तमान रूपांतरण मैट्रिक्स को एक रोटेशन मैट्रिक्स से गुणा करता है। इस फ़ंक्शन को push()द्वारा और नियंत्रित किया जा सकता है। और pop()। -rotateX__description__0 = कोण पैरामीटर में निर्दिष्ट राशि द्वारा एक्स अक्ष के चारों ओर एक आकृति घुमाता है। कोणों को रेडियंस या डिग्री में दर्ज किया जा सकता है। -rotateX__description__1 = ऑब्जेक्ट हमेशा अपनी सापेक्ष स्थिति के आसपास मूल के लिए घुमाए जाते हैं और सकारात्मक संख्याएं वस्तुओं को दक्षिणावर्त दिशा में घुमाती हैं। सभी रूपांतरण रीसेट हो जाते हैं जब draw() फिर से शुरू होता है । -rotateY__description__0 = कोण पैरामीटर में निर्दिष्ट राशि द्वारा Z अक्ष के चारों ओर एक आकृति को घुमाता है। कोणों को रेडियन या डिग्री में दर्ज किया जा सकता है। -rotateY__description__1 = यह विधि केवल WEBGL मोड में काम करती है। -scale__description__0 = शीर्षों को विस्तारित या अनुबंधित करके आकार के आकार को बढ़ाता या घटाता है। वस्तुएं हमेशा अपने सापेक्ष मूल से समन्वय प्रणाली तक स्केल करती हैं। स्केल मान दशमलव प्रतिशत के रूप में निर्दिष्ट होते हैं। उदाहरण के लिए, फ़ंक्शन कॉल स्केल (2.0) एक के आयाम को बढ़ाता है 200% से आकार। -scale__description__1 = रूपांतरण हर उस चीज़ पर लागू होता है जो फ़ंक्शन के बाद और बाद में होने वाली कॉल के प्रभाव को गुणा करती है। उदाहरण के लिए, कॉलिंग स्केल (2.0) और फिर स्केल (1.5) स्केल (3.0) के समान है। यदि scale() को draw() में कॉल किया जाता है, जब लूप दोबारा शुरू होता है तो ट्रांसफॉर्मेशन रीसेट हो जाता है। -scale__description__2 = Z पैरामीटर के साथ इस फ़ंक्शन का उपयोग करना केवल WEBGL मोड में उपलब्ध है। इस फ़ंक्शन को push() और pop()के साथ और अधिक नियंत्रित किया जा सकता है। -shearX__description__0 = कोण पैरामीटर द्वारा निर्दिष्ट राशि द्वारा एक्स-अक्ष के चारों ओर एक आकृति को कतरता है। कोणों को वर्तमान कोण मोड में निर्दिष्ट किया जाना चाहिए। वस्तुओं को हमेशा उनकी सापेक्ष स्थिति के आसपास मूल और सकारात्मक संख्याएं घड़ी की दिशा में वस्तुओं को कतरनी करती हैं। -shearX__description__1 = परिवर्तन सब कुछ पर लागू होता है जो फ़ंक्शन के बाद और बाद में कॉल के प्रभाव को जमा करता है। उदाहरण के लिए, शीयरएक्स (पीआई/2) और फिर शीयरएक्स (पीआई/2) को कॉल करना शीयरएक्स (पीआई) के समान है। यदि shearX() को draw() के अंदर कॉल किया जाता है, जब लूप में ट्रांसफ़ॉर्मेशन रीसेट हो जाता है फिर से शुरू होता है। -shearX__description__2 = तकनीकी रूप से, shearX() वर्तमान रूपांतरण मैट्रिक्स को एक रोटेशन मैट्रिक्स से गुणा करता है। इस फ़ंक्शन को push()द्वारा और नियंत्रित किया जा सकता है और pop() फंक्शन। -shearY__description__0 = y-अक्ष के चारों ओर एक आकार को कोण पैरामीटर द्वारा निर्दिष्ट राशि को कतरता है। कोणों को वर्तमान कोण मोड में निर्दिष्ट किया जाना चाहिए। वस्तुओं को हमेशा उनकी सापेक्ष स्थिति के आसपास मूल और सकारात्मक संख्याएं वस्तुओं को दक्षिणावर्त दिशा में कतरती हैं। -shearY__description__1 = परिवर्तन सब कुछ पर लागू होता है जो फ़ंक्शन के बाद और बाद में कॉल के प्रभाव को जमा करता है। उदाहरण के लिए, शीयरवाई (PI/2) और फिर शीयरवाई (PI/2) को कॉल करना शीयरवाई (PI) के समान है। यदि shearY() को draw() में कॉल किया जाता है, जब लूप में ट्रांसफॉर्मेशन रीसेट हो जाता है फिर से शुरू होता है। -shearY__description__2 = तकनीकी रूप से, shearY() वर्तमान रूपांतरण मैट्रिक्स को एक रोटेशन मैट्रिक्स से गुणा करता है। इस फ़ंक्शन को push() और pop() फंक्शन। -translate__description__0 = डिस्प्ले विंडो के भीतर वस्तुओं को विस्थापित करने के लिए एक राशि निर्दिष्ट करता है। x पैरामीटर बाएँ/दाएँ अनुवाद निर्दिष्ट करता है, y पैरामीटर ऊपर/नीचे अनुवाद निर्दिष्ट करता है। -translate__description__1 = रूपांतरण संचयी होते हैं और उन सभी चीजों पर लागू होते हैं जो फ़ंक्शन के बाद और बाद में कॉल के प्रभाव को जमा करते हैं। उदाहरण के लिए, अनुवाद को कॉल करना (50, 0) और फिर अनुवाद (20, 0) अनुवाद (70, 0) के समान है। यदि translate() को draw() में कॉल किया जाता है, तो रूपांतरण है लूप के फिर से शुरू होने पर रीसेट करें। इस फ़ंक्शन को push() और pop()का उपयोग करके नियंत्रित किया जा सकता है। \ No newline at end of file diff --git a/src/data/localization/hi-IN/p5.sound.ftl b/src/data/localization/hi-IN/p5.sound.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/hi-IN/root.ftl b/src/data/localization/hi-IN/root.ftl deleted file mode 100644 index ec44f154b2..0000000000 --- a/src/data/localization/hi-IN/root.ftl +++ /dev/null @@ -1,63 +0,0 @@ -h1 = संदर्भ -reference-search = एपीआई खोजें -reference-description1 = आप जो खोज रहे हैं वह नहीं मिल रहा है? शायद आपको अंदर जांचना चाहिए -reference-description3 = आप संदर्भ का एक संस्करण डाउनलोड कर सकते हैं -reference-contribute2 = कृपया हमें बताएं -reference-error1 = क्या आपको कोई गलती मिली? -reference-error3 = कृपया बेझिझक करें -reference-error5 = और पुल अनुरोध का संकेत देते हैं। -reference-example = उदाहरण -reference-description = विवरण -reference-extends = फैली -reference-parameters = मापदंडों -reference-syntax = वाक्य-विन्यास -reference-returns = रिटर्न -Environment = वातावरण -Color = रंग -Color Conversion = Color Conversion -Creating & Reading = सृजन और पढ़ना -Setting = विन्यास -Shape = आकार -2D Primitives = 2D आदिम -Attributes = गुण -Curves = घटता -Vertex = कोने -Constants = स्थिरांक -Structure = संरचना -DOM = डोम -Rendering = प्रस्तुत करना -Foundation = Foundation -Transform = परिवर्तन -Data = डेटा -LocalStorage = LocalStorage -Dictionary = शब्दकोश -Events = घटनाक्रम -Acceleration = त्वरण -Keyboard = कीबोर्ड -Mouse = माउस -Touch = स्पर्श -Image = चित्र -Loading & Displaying = लोड और दिखाएँ -Pixels = पिक्सल -IO = प्रवेश और निकास -Input = प्रविष्टि -Output = उत्पादन -Table = तालिका -Math = गणित -Calculation = गणना -Vector = Vector -Noise = शोर -Random = Random -Trigonometry = त्रिकोणमिति -Typography = टाइपोग्राफी -Array Functions = सरणी कार्य करता है -Conversion = रूपांतरण -String Functions = स्ट्रिंग फ़ंक्शंस -Time & Date = समय और दिनांक -3D Primitives = 3 डी प्रिमिटिव -Lights, Camera = रोशनी, कैमरा -Interaction = Interaction -Lights = दीपक -3D Models = 3 डी मॉडल -Material = सामग्री -Camera = कैमरा diff --git a/src/data/localization/ko/JSON.ftl b/src/data/localization/ko/JSON.ftl deleted file mode 100644 index 47641ec68e..0000000000 --- a/src/data/localization/ko/JSON.ftl +++ /dev/null @@ -1,2 +0,0 @@ -stringify__description__0 = MDN에서 참고: JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다. -stringify__params__object = 객체: JSON으로 변형하고 싶은 JavaScript 객체 diff --git a/src/data/localization/ko/console.ftl b/src/data/localization/ko/console.ftl deleted file mode 100644 index 5d75a219f5..0000000000 --- a/src/data/localization/ko/console.ftl +++ /dev/null @@ -1,3 +0,0 @@ -log__description__0 = 브라우저의 메세지 콘솔에 메세지를 프린트합니다. p5에서는 print 또는 console.log 모두 사용가능합니다. -log__description__1 = 콘솔은 브라우저에 따라 다르게 열립니다. 다음은 여러가지 방법이 제시되어 있습니다. Firefox , Chrome, Edge, Safari.
    온라인 p5 에디터에서는 콘솔이 코트 에디터 바로 밑에 고정되어 있습니다. -log__params__message = 문자열|Expression|객체: 콘솔에 프린트하고 싶은 메세지 diff --git a/src/data/localization/ko/p5.Amplitude.ftl b/src/data/localization/ko/p5.Amplitude.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.AudioIn.ftl b/src/data/localization/ko/p5.AudioIn.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.AudioVoice.ftl b/src/data/localization/ko/p5.AudioVoice.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.BandPass.ftl b/src/data/localization/ko/p5.BandPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Camera.ftl b/src/data/localization/ko/p5.Camera.ftl deleted file mode 100644 index 9807f74b68..0000000000 --- a/src/data/localization/ko/p5.Camera.ftl +++ /dev/null @@ -1,42 +0,0 @@ -description__0 = p5의 WebGL 모드용 카메라를 위한 클래스입니다. 3D씬 렌더링에 필요한 카메라 위치, 방향, 투영 정보 등을 포함합니다. -description__1 = createCamera()로 새로운 p5.Camera 객체를 생성하고, 아래의 메소드들을 통해 이를 제어할 수 있습니다. 이러한 방식으로 생성된 카메라는, 여타 메소드들을 통해 변경하지 않는 한, 화면에 기본값으로 설정된 위치 및 투시 투영법을 사용합니다. 여러 대의 카메라 생성 또한 가능한데, 이 경우 setCamera() 메소드로 현재 카메라를 설정할 수 있습니다. -description__2 = 참고: 아래의 메소드들은 다음 2개의 좌표계에서 작동합니다: 월드 좌표계는 X,Y,Z축 상의 원점에 대한 위치를 나타내는 반면, 로컬 좌표계는 카메라 시점에서의 위치(좌-우, 위-아래, 앞-뒤)를 나타냅니다. move() 메소드는 카메라의 자체 축을 따라 움직이는 반면, setPosition()은 월드 공간에서의 카메라의 위치를 설정합니다. -description__3 = 카메라 객체의 속성인 eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ 은 카메라 위치, 화면방향, 투영을 지정하며, createCamera() 함수를 통해 형성된 카메라 객체에도 찾을 수 있습니다. -params__rendererGL = RendererGL: WebGL 렌더러의 인스턴스 -eyeX__description__0 = x 축에 있는 카메라 위치 값 -eyeY__description__0 = y 축에 있는 카메라 위치 값 -eyeZ__description__0 = z 축에 있는 카메라 위치 값 -centerX__description__0 = 스케치의 중심을 표시하는 x 좌표 -centerY__description__0 = 스케치의 중심을 표시하는 y 좌표 -centerZ__description__0 = 스케치의 중심을 표시하는 z 좌표 -upX__description__0 = 카메라의 '위' 방향을 표시하는 x 구성요소 -upY__description__0 = 카메라의 '위' 방향을 표시하는 y 구성요소 -upZ__description__0 = 카메라의 '위' 방향을 표시하는 z 구성요소 -perspective__description__0 = p5.Camera 객체의 투시 투영법을 설정하고, perspective() 구문에 따라 해당 투영법의 매개변수를 설정합니다. -ortho__description__0 = p5.Camera 객체의 직교 투영법을 설정하고, ortho() 구문에 따라 해당 투영법의 매개변수를 설정합니다. -frustum__description__0 = 주어진 매개변수로 퍼스펙티브 매트릭스 (perspective matrix)를 만듧니다. -frustum__description__1 = frustum은 피라미드 모양의 상단을 바닥과 평행한 면에서 잘라낸 기하학적 모양입니다. 이 피라미드의 위에 보는 사람의 눈이 있다 가정하면서 여섯 면은 장면의 특정 부분만 렌더링하는데에 쓰이는 가상의 면인 clipping plane입니다. 3D로 렌더링 할 시, 이 여섯 면 안에 있는 물체는 보이며, 그 바깥에 있는 물체는 보이지 않습니다. 이 링크를 통해 더 자세히 알 수 있습니다. -frustum__description__2 = frustum을 설정하면 렌더링되는 장면이 달라집니다. 이는 간단하게 perspective() 함수를 통해 이룰 수도 있습니다. -frustum__params__left = 숫자: (선택 사항) 카메라 frustum의 왼쪽 면 -frustum__params__right = 숫자: (선택 사항) 카메라 frustum의 오른쪽 면 -frustum__params__bottom = 숫자: (선택 사항) 카메라 frustum의 밑 면 -frustum__params__top = 숫자: (선택 사항) 카메라 frustum의 위 면 -frustum__params__near = 숫자: (선택 사항) 카메라 frustum의 근거리 면 -frustum__params__far = 숫자: (선택 사항) 카메라 frustum의 장거리 면 -pan__description__0 = 패닝은 카메라 화면을 좌우로 회전합니다. -pan__params__angle = 숫자: 현재 angleMode 단위로 카메라를 회전할 정도. 0을 초과하는 숫자는 카메라를 시계방향(왼쪽)으로 회전시킵니다. -tilt__description__0 = 틸트는 카메라 화면을 상하로 회전합니다. -tilt__params__angle = 숫자: 현재 angleMode 단위로 카메라를 회전할 정도. 0을 초과하는 숫자는 카메라를 시계방향(왼쪽)으로 회전시킵니다. -lookAt__description__0 = 월드 공간 위치에서 보도록 카메라 방향을 조정합니다. -lookAt__params__x = 숫자: 월드 공간 속 한 점의 x 위치 -lookAt__params__y = 숫자: 월드 공간 속 한 점의 y 위치 -lookAt__params__z = 숫자: 월드 공간 속 한 점의 z 위치 -camera__description__0 = 카메라의 위치와 방향을 설정합니다. p5.Camera 객체에 camera()를 호출하는 것과 동일한 효과를 갖습니다. -move__description__0 = 현재 카메라 방향을 유지하면서 그 로컬축을 따라 이동합니다. -move__params__x = 숫자: 카메라의 좌우축에서 움직일 정도 -move__params__y = 숫자: 카메라의 상하축에서 움직일 정도 -move__params__z = 숫자: 카메라의 앞뒤축에서 움직일 정도 -setPosition__description__0 = 현재 카메라 방향을 유지하면서 카메라의 위치를 월드 공간에서의 위치로 설정합니다. -setPosition__params__x = 숫자: 월드 공간 속 한 점의 x 위치 -setPosition__params__y = 숫자: 월드 공간 속 한 점의 y 위치 -setPosition__params__z = 숫자: 월드 공간 속 한 점의 z 위치 diff --git a/src/data/localization/ko/p5.Color.ftl b/src/data/localization/ko/p5.Color.ftl deleted file mode 100644 index 20b6105038..0000000000 --- a/src/data/localization/ko/p5.Color.ftl +++ /dev/null @@ -1,11 +0,0 @@ -description__0 = 처음 만들었을 때의 색상모드와 레벨들의 최댓값들을 저장합니다. 이 값들은 입력 인수로 사용되거나 (창조시기, 또는 같은 색의 인스턴스가 이후에 사용될 때) 출력의 체재를 설정하는데 사용됩니다 (saturation()와 같은 함수들을 사용할 때). -description__1 = 내적으로는 RGBA 값들을 부동소수점 형식으로 배열 안에 저장하며, 이 값들은 0과 1 사이로 정규화됩니다. 이 값들로 가장 가까운 색 (0과 255 사이)를 계산하며 렌더러에 전달합니다. -description__2 = 다양한 형식의 부동소수점 구성요소들을 케시에 임시저장하기도 합니다. 이는 최근에 이루어진 계산을 반복하지 않기 위해서입니다. -setRed__description__0 = setRed 함수는 색깔의 빨강값을 설정합니다. 컬러모드에 따라 다를 수도 있지만, RBG 모드는 0과 255 사이의 값입니다. -setRed__params__red = 숫자: 새로운 빨강값 -setGreen__description__0 = setGreen 함수는 색깔의 초록값을 설정합니다. 컬러모드에 따라 다를 수도 있지만, RBG 모드는 0과 255 사이의 값입니다. -setGreen__params__green = 숫자: 새로운 초록값 -setBlue__description__0 = setBlue 함수는 색깔의 파랑값을 설정합니다. 컬러모드에 따라 다를 수도 있지만, RBG 모드는 0과 255 사이의 값입니다. -setBlue__params__blue = 숫자: 새로운 파랑값 -setAlpha__description__0 = setAlpha 함수는 색깔의 알파값 (투명도)을 설정합니다. 컬러모드에 따라 다를 수도 있지만, RBG 모드는 0과 255 사이의 값입니다. -setAlpha__params__alpha = 숫자: 새로운 알파값 diff --git a/src/data/localization/ko/p5.Compressor.ftl b/src/data/localization/ko/p5.Compressor.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Convolver.ftl b/src/data/localization/ko/p5.Convolver.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Delay.ftl b/src/data/localization/ko/p5.Delay.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Distortion.ftl b/src/data/localization/ko/p5.Distortion.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.EQ.ftl b/src/data/localization/ko/p5.EQ.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Effect.ftl b/src/data/localization/ko/p5.Effect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Element.ftl b/src/data/localization/ko/p5.Element.ftl deleted file mode 100644 index 33b420c3fe..0000000000 --- a/src/data/localization/ko/p5.Element.ftl +++ /dev/null @@ -1,87 +0,0 @@ -description__0 = 캔버스, 그래픽 버퍼, 기타 HTML 요소를 비롯하여, 스케치에 추가된 모든 요소(element)들을 위한 기본 클래스입니다. p5.Element 클래스는 직접 호출되지 않지만, 그 객체는 createCanvas, createGraphics, createDiv, createImg, createInput 호출을 통해 생성됩니다. -params__elt = 문자열: 래핑된 DOM 노드 -params__pInst = P5: (선택 사항) p5 인스턴스에 대한 포인터 -elt__description__0 = 기본 HTML 요소로, 모든 일반 HTML 메소드를 호출. -parent__description__0 = 지정된 부모 클래스에 요소를 연결합니다. 요소의 컨테이너를 설정하는 방법입니다. 문자열 ID, DOM 노드, 또는 p5.Element를 허용합니다. 별도의 인수가 지정되지 않을 경우, 부모 노드가 반환됩니다. 캔버스 배치하는 다른 방법들은 이 위키 페이지에서 확인할 수 있습니다. -parent__params__parent = 문자열|p5.Element|객체: 지정된 부모 요소의 ID, DOM node, 또는 p5.Element -id__description__0 = 요소의 ID를 설정합니다. 별도로 지정한 ID 인수가 없으면, 요소의 현재 ID를 반환합니다. 요소당 1개의 특정 id를 가질 수 있습니다. .class() 함수는 동일한 클래스 이름을 가진 여러 요소들을 식별하는 데에 사용됩니다. -id__params__id = 문자열: 요소의 ID -class__description__0 = 사용자가 지정한 클래스를 요소에 더합니다. 별도로 지정한 클래스 인수가 없으면, 요소의 현재 클래스(들)를 포함하는 문자열을 반환합니다. -class__params__class = 문자열: 추가할 클래스 -mousePressed__description__0 = .mousePressed() 함수는 요소 위에서 마우스 버튼이 눌릴 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -mousePressed__params__fxn = 함수|불리언: 마우스를 요소 위에서 버튼이 눌릴 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -doubleClicked__description__0 = .doubleClicked() 함수는 요소 위에서 마우스 버튼을 빠르게 두 번 클릭할 때마다 한 번씩 호출됩니다. 요소에 행동 특정적 이벤트 리스너를 연결하는 데에 사용됩니다. -doubleClicked__returns = p5.Element: -doubleClicked__params__fxn = 함수|불리언: 마우스를 요소 위에서 더블클릭 할 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -mouseWheel__description__0 = .mouseWheel() 함수는 요소 위에서 마우스 휠을 스크롤 할 때마다 한 번싹 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -mouseWheel__description__1 = 이 함수에서는 콜백 함수를 인수로서 사용할 수 있습니다. 그 경우, 요소 위에서 휠 이벤트가 발생할 때마다 콜백 함수가 하나의 event 인수로서 전달됩니다. event.deltaY 속성은 마우스 휠이 위쪽으로 회전하거나 사용자로부터 멀어지면 음수값을 반환하고, 그 반대 방향에선 양수값을 반환합니다. event.deltaX 속성은 마우스 가로 휠 스크롤을 읽는다는 점을 제외하고 event.deltaY와 동일하게 작동합니다. -mouseWheel__description__2 = -mouseWheel__description__3 = -mouseWheel__params__fxn = 함수|불리언: 마우스를 요소 위에서 스크롤 할 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -mouseReleased__description__0 = .mouseReleased() 함수는 요소 위에서 마우스 버튼을 놓을 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -mouseReleased__params__fxn = 함수|불리언: 마우스를 요소 위에서 버튼이 놓일 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -mouseClicked__description__0 = .mouseClicked() 함수는 요소 위에서 마우스 버튼을 클릭한 뒤 놓을 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -mouseClicked__params__fxn = 함수|불리언: 마우스를 요소 위에서 클릭 할 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -mouseMoved__description__0 = .mouseMoved() 함수는 마우스가 요소 위에서 움직일 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -mouseMoved__params__fxn = 함수|불리언: 마우스를 요소 위에서 움직일 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -mouseOver__description__0 = .mouseOver() 함수는 마우스가 요소 위에 올라올 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -mouseOver__params__fxn = 함수|불리언: 마우스를 요소 위로 움직일 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -mouseOut__description__0 = .mouseOut() 함수는 마우스가 요소 위에서 벗어날 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -mouseOut__params__fxn = 함수|불리언: 마우스를 요소 위에서부터 다른 곳으로 움직일 때 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -touchStarted__description__0 = .touchStarted() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -touchStarted__params__fxn = 함수|불리언: 터치가 등록될 때마다 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -touchMoved__description__0 = .touchMoved() 함수는 터치 움직임이 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -touchMoved__params__fxn = 함수|불리언: 터치 움직임이 등록될 때마다 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -touchEnded__description__0 = .touchEnded() 함수는 터치의 끝이 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -touchEnded__params__fxn = 함수|불리언: 터치의 끝이 등록될 때마다 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -dragOver__description__0 = .dragOver() 함수는 요소 위에 파일을 드래그할 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -dragOver__params__fxn = 함수|불리언: 요소 위에 파일을 드래그할 때마다 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -dragLeave__description__0 = .dragLeave() 함수는 드래그된 파일이 요소 영역을 벗어날 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. -dragLeave__params__fxn = 함수|불리언: 드래그된 파일이 요소 영역을 벗어날 때마다 호출 될 함수. 대신 false을 사용할 시, 함수호출은 중지됩니다. -addClass__description__0 = 요소에 특정 클래스를 추가합니다. -addClass__params__class = 문자열: 추가할 클래스의 이름 -removeClass__description__0 = 요소로부터 특정 클래스를 제거합니다. -removeClass__params__class = 문자열: 삭제할 클래스의 이름 -hasClass__description__0 = 요소에 이미 클래스가 설정되어 있는지 확인합니다. -hasClass__returns = 불리언: 요소가 클래스가 있는 여부 -hasClass__params__c = 문자열: 확인할 클래스의 이름 -toggleClass__description__0 = 요소 클래스를 토글합니다. -toggleClass__params__c = 문자열: 토글할 클래스의 이름 -child__description__0 = 지정된 부모 클래스에 요소를 자식으로서 연결합니다. 문자열 ID, DOM 노드, 또는 p5.Element를 허용합니다. 별도의 인수가 지정되지 않을 경우, 자식 DOM 노드 배열이 반환됩니다. -child__returns = 노드 배열[]: 자식 노드의 배열 -child__params__child = 문자열|p5.Element: (선택 사항) 본 객체애 연결할 객체의 ID, 문서 객체 모델 (DOM) 노드, 또는 p5.Element -center__description__0 = p5 Element를 수직으로, 수평으로, 또는 수직 및 수평으로 가운데 정렬합니다. 별도로 지정한 부모가 있는 경우 부모를 기준으로, 부모가 없는 경우 그 자신을 기준으로 합니다. 별도로 지정한 인수가 없으면 요소는 수직 및 수평으로 정렬됩니다. -center__params__align = 문자열: (선택 사항) 'vertical' 또는 'horizontal'로 요소를 수직 또는 수평적으로 정렬합니다 -html__description__0 = 사용자가 별도로 지정한 인수로서 요소의 내부 HTML을 설정하며, 기존의 모든 HTML를 대체합니다. 참(true)이 그 2번째 인수로서 포함된 경우, 기존의 모든 HTML을 대체하는 대신 새로운 HTML을 추가(append)합니다. 별도로 지정한 인수가 없으면 요소의 내부 HTML을 반환합니다. -html__returns = 문자열: 요소의 내부 HTML 요소 -html__params__html = 문자열: (선택 사항) 요소 안에 설정할 HTML -html__params__append = 불리언: (선택 사항) 새로 입력한 HTML을 추가 (false의 경우 기존 HTML을 덮어 씁니다) -position__description__0 = 요소의 위치를 설정합니다. 별도로 지정한 위치 유형 인수가 없는 경우, 화면창의 (0,0)을 기준으로 합니다. 기본적으로, 이 메소드를 통해 position:absolute와 left 및 top 스타일 속성을 설정합니다. 선택적으로, 3번째 인수를 통해 x 및 y 좌표의 위치 지정 체계를 설정할 수 있습니다. 별도로 지정한 인수가 없으면 함수는 요소의 x와 y의 위치를 반환합니다. -position__returns = 객체: 요소의 위치를 나타내는 {"{"} x: 0, y: 0 {"}"} 형식의 객체 -position__params__x = 숫자: (선택 사항) 윈도우 왼쪽 위 기준으로한 x 위치 -position__params__y = 숫자: (선택 사항) 윈도우 왼쪽 위 기준으로한 y 위치 -position__params__positionType = 문자열: static, fixed, relative, sticky, initial 또는 inherit -style__description__0 = 별도 지정한 값(2번째 인수)으로 CSS 스타일 속성(1번째 인수)을 설정합니다. 1개의 인수만 지정할 경우, .style()은 주어진 속성의 값을 반환합니다. 그러나 이 인수를 CSS 구문('text-align:center')으로 작성할 경우, .style()은 CSS를 설정합니다. -style__returns = 문자열: 속성의 값 -style__params__property = 문자열: 설정할 속성 -style__params__value = 문자열|p5.Color: 속성에 설정할 값 -attribute__description__0 = 사용자가 지정한 요소에 새 속성을 추가하거나, 요소의 기존 속성값을 변경합니다. 별도로 지정한 값이 없는 경우 주어진 속성의 값을 반환하고, 속성이 설정되지 않은 경우 null을 반환합니다. -attribute__returns = 문자열: 속성의 값 -attribute__params__attr = 문자열: 설정할 속성 -attribute__params__value = 문자열: 설정할 속성값 -removeAttribute__description__0 = 요소로부터 속성을 제거합니다. -removeAttribute__params__attr = 문자열: 삭제할 속성 -value__description__0 = 별도로 지정한 인수가 없는 경우, 요소의 값을 반환하거나 설정합니다. -value__returns = 문자열|숫자: 요소의 값 -value__params__value = 문자열|숫자 -show__description__0 = 현재 요소를 보여줍니다. display:block로 스타일을 설정합니다. -hide__description__0 = 현재 요소를 숨깁니다. display:none으로 스타일을 설정합니다. -size__description__0 = 요소의 너비와 높이를 설정합니다. AUTO는 한 번에 한 개의 수치를 조정하는 데에 쓰입니다. 별도로 지정한 인수가 없는 경우, 객체 속 요소의 너비와 높이를 반환합니다. 이미지 파일과 같이 불러오기가 필요한 요소의 경우, 불러오기가 완료된 후 함수를 호출하는 것을 권장합니다. -size__returns = 객체: 객체 안 요소의 너비와 높이 -size__params__w = 숫자|상수: 요소의 너비 - AUTO, 또는 숫자 -size__params__h = 숫자|상수: (선택 사항) 요소의 높이 - AUTO, 또는 숫자 -remove__description__0 = 요소를 제거하고, 모든 미디어 스트림을 중지하며, 모든 리스너를 해제합니다. -drop__description__0 = 요소에 드롭된 파일이 로드될 때마다 호출되는 콜백을 등록합니다. p5는 메모리에 드롭된 모든 파일을 로드하고 이를 p5.File 객체로서 콜백에 전달합니다. 동시에 여러 파일을 드롭할 경우, 콜백이 여러 번 호출됩니다. 선택적으로, raw 드롭 이벤트에 등록될 2번째 콜백을 전달할 수 있습니다. -drop__description__1 = 이 경우, 콜백에 본래 DragEvent도 제공됩니다. 동시에 여러 파일을 드롭하면 2번째 콜백이 드롭당 한 번씩 발생하며, 1번째 콜백은 로드된 파일당 한 번씩 발생합니다. -drop__params__callback = 함수: 로딩된 파일을 사용할 콜백 함수. 파일이 드롭될 때마다 호출됩니다. -drop__params__fxn = 함수: (선택 사항) 파일들이 드롭될 경우 단 한번만 호출될 콜백 함수. diff --git a/src/data/localization/ko/p5.Envelope.ftl b/src/data/localization/ko/p5.Envelope.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.FFT.ftl b/src/data/localization/ko/p5.FFT.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.File.ftl b/src/data/localization/ko/p5.File.ftl deleted file mode 100644 index 5dcab1a7d6..0000000000 --- a/src/data/localization/ko/p5.File.ftl +++ /dev/null @@ -1,8 +0,0 @@ -description__0 = 파일을 위한 기본 클래스입니다. Element.drop()과 createFileInput()에 사용됩니다. -params__file = 파일: 래핑된 파일 -file__description__0 = 기본 파일 객체. 모든 일반 File 메소드를 호출할 수 있습니다. -type__description__0 = 파일 유형 (이미지, 텍스트 등) -subtype__description__0 = 파일 하위 유형 (주로 jpg, png, xml 등의 파일 확장자) -name__description__0 = 파일명 -size__description__0 = 파일 크기 -data__description__0 = 이미지 데이터를 담는 URL 문자열 diff --git a/src/data/localization/ko/p5.Filter.ftl b/src/data/localization/ko/p5.Filter.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Font.ftl b/src/data/localization/ko/p5.Font.ftl deleted file mode 100644 index e41680804d..0000000000 --- a/src/data/localization/ko/p5.Font.ftl +++ /dev/null @@ -1,15 +0,0 @@ -description__0 = 폰트 조정을 위한 기본 클래스 -params__pInst = P5: (선택 사항) p5 인스턴스 포인터 -font__description__0 = 기본 개방형 글꼴 구현 -textBounds__description__0 = 이 폰트로 지정된 텍스트 문자열에 대한 바운딩 박스를 반환합니다. (현재 텍스트 한 줄씩만 지원합니다.) -textBounds__returns = 객체: x, y, w, h의 속성을 가진 직사각형의 객체 -textBounds__params__line = 문자열: 텍스트 한 줄 -textBounds__params__x = 숫자: x 위치 -textBounds__params__y = 숫자: y 위치 -textBounds__params__fontSize = 숫자: (선택 사항) 사용할 폰트의 크기. 기본값은 12. -textBounds__params__options = 객체: (선택 사항) OTF (OpenType Font) 파일의 설정 옵션. OpenType 폰트는 정렬과 기준 선 (baseline) 옵션이 있습니다. 기본값은 'LEFT'와 'alphabetic'입니다. -textToPoints__description__0 = 지정된 텍스트 경로를 따르는 점들의 배열을 계산합니다. -textToPoints__params__txt = 문자열: 텍스트 한 줄 -textToPoints__params__x = 숫자: x 위치 -textToPoints__params__y = 숫자: y 위치 -textToPoints__params__fontSize = 숫자: (선택 사항) 사용할 폰트의 크기. 기본값은 12. diff --git a/src/data/localization/ko/p5.Gain.ftl b/src/data/localization/ko/p5.Gain.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Geometry.ftl b/src/data/localization/ko/p5.Geometry.ftl deleted file mode 100644 index ec54fb4665..0000000000 --- a/src/data/localization/ko/p5.Geometry.ftl +++ /dev/null @@ -1,9 +0,0 @@ -description__0 = p5 기하 클래스 -params__detailX = 정수: (선택 사항) 수평 표면 위의 꼭짓점 개수 -params__detailY = 정수: (선택 사항) 수직 표면 위의 꼭짓점 개수 -params__callback = 함수: 객체를 인스턴스화할 때 호출할 함수 -computeFaces__description__0 = 꼭짓점 기준으로 도형의 면들을 생성합니다. -computeNormals__description__0 = 꼭짓점 당 부드러운 법선을 각 면의 평균으로서 만듧니다. -averageNormals__description__0 = 꼭짓점 법선의 평균을 구합니다. 곡면에 사용됩니다. -averagePoleNormals__description__0 = 극점 법선의 평균을 구합니다. 구형의 기초 조형에 사용됩니다. -normalize__description__0 = 모든 꼭짓점이 -100부터 100사이의 중심에 오도록 수정합니다. diff --git a/src/data/localization/ko/p5.Graphics.ftl b/src/data/localization/ko/p5.Graphics.ftl deleted file mode 100644 index 7136c9328d..0000000000 --- a/src/data/localization/ko/p5.Graphics.ftl +++ /dev/null @@ -1,7 +0,0 @@ -description__0 = 렌더러을 둘러싼 얇은 래퍼(wrapper)로, 그래픽 버퍼 객체를 생성하는 데에 사용합니다. 화면 밖 그래픽 버퍼에 그리려면 이 클래스를 사용합니다. 2개의 매개변수는 너비와 높이를 픽셀 단위로 지정합니다. 이 클래스의 필드와 메소드는 확장성이 있으나, p5를 위한 일반적인 그리기 API를 반영합니다. p5.Element를 확장합니다. -params__w = 숫자: 너비값 -params__h = 숫자: 높이값 -params__renderer = 상수: 사용할 렌더러, P2D 또는 WEBGL -params__pInst = P5: (선택 사항) p5 인스턴스에 대한 포인터 -reset__description__0 = 그래픽 버퍼 객체로 자동 재설정되지 않은 특정값들(예: 레퍼런스 중 변형(Transform) 또는 조명(Light) 항목에 해당하는 함수들로서 지정된 값들). 이 메소드를 draw() 함수 안에서 호출하면, 기본 캔버스의 행위를 복제합니다. -remove__description__0 = 페이지에서 그래픽 객체를 제거하고 이 객체에 연결된 모든 소스들을 연결 해제합니다. diff --git a/src/data/localization/ko/p5.HighPass.ftl b/src/data/localization/ko/p5.HighPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Image.ftl b/src/data/localization/ko/p5.Image.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.LowPass.ftl b/src/data/localization/ko/p5.LowPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.MediaElement.ftl b/src/data/localization/ko/p5.MediaElement.ftl deleted file mode 100644 index 5dd76fd98f..0000000000 --- a/src/data/localization/ko/p5.MediaElement.ftl +++ /dev/null @@ -1,41 +0,0 @@ -description__0 = 오디오/비디오 처리를 위해 p5.Element를 확장합니다. p5.Element의 메소드 뿐 아니라, 미디어 제어를 위한 메소드도 포함합니다. p5.MediaElements는 직접 호출되지 않지만, createVideo, createAudio, CreateCapture 호출을 통해 생성됩니다. -params__elt = 문자열: 래핑된 DOM 노드 -src__description__0 = 미디어 요소 소스 경로 -src__returns = 문자열: 소스 -play__description__0 = HTML5 미디어 요소를 재생합니다. -stop__description__0 = HTML5 미디어 요소를 중지합니다. (현재 시간을 0으로 설정) -pause__description__0 = HTML5 미디어 요소를 일시정지합니다. -loop__description__0 = HTML5 미디어 요소의 반복을 참(true)로 설정하고, 재생 시작합니다. -noLoop__description__0 = HTML5 미디어 요소의 반복을 거짓(false)으로 설정합니다. 종료 시점에 도달하면 요소가 중지합니다. -autoplay__description__0 = HTML5 미디어 요소 자동재생 여부 설정 -autoplay__params__shouldAutoplay = 불리언: 요소의 자동재생 여부 -volume__description__0 = HTML5 미디어 요소의 볼륨을 설정합니다. 별도로 지정한 인수가 없으면, 현재 볼륨을 반환합니다. -volume__returns = 숫자: 현재 볼륨 -volume__params__val = 숫자: 0.0과 1.0 사이의 볼륨 -speed__description__0 = 별도로 지정한 인수가 없으면, 요소의 현재 재생 속도를 반환하빈다. 속도 매개변수는 2.0일 때 2배속으로, 0.5일 때 0.5배속으로, -1일 때 정상 속도로 역재생합니다. (모든 브라우저가 역재생을 지원하지 않으며, 일부 지원 브라우저에서도 부드럽게 재생되지 않을 수 있습니다.) -speed__returns = 숫자: 요소의 현재 재생 속도 -speed__params__speed = 숫자: 배속도 매개변수 -time__description__0 = 별도로 지정한 인수가 없을 경우, 요소의 현재 시간을 반환합니다. 인수가 지정될 경우, 요소의 현재 시간이 해당 인수로 설정됩니다. -time__returns = 숫자: 현재 시간 (초) -time__params__time = 숫자: 설정할 시간 (초) -duration__description__0 = HTML5 미디어 요소의 지속 시간을 반환합니다. -duration__returns = 숫자: 지속 시간 -onended__description__0 = 오디오/비디오 요소가 종료 시점에 도달할 때 호출할 이벤트를 예약합니다. 요소가 반복하는 경우 호출되지 않습니다. 요소는 oneded 콜백에 인수로 전달됩니다. -onended__params__callback = 함수: 오디오/비디오 요소가 끝났을 때 호출될 함수. 요소는 콜백 함수의 인자값으로 지정됩니다. -connect__description__0 = 요소가 출력한 오디오를 특정 audioNode나 p5.sound 객체로 보냅니다. 요소가 없는 경우, p5의 마스터 출력에 연결합니다. 모든 연결은 .disconnect() 메소드로 제거할 수 있습니다. -connect__description__1 = p5.sound.js 추가적 라이브러리로 이러한 방법을 사용할 수 있습니다. -connect__params__audioNode = AudioNode|객체: 웹 오디오 API의 AudioNode, 또는 p5.sound 라이브러리의 객체 -disconnect__description__0 = 마스터 출력을 비롯하여 모든 웹 오디오 라우팅을 분리합니다. 사용 예: 오디오 효과를 통해 출력을 다시 라우팅할 때 -showControls__description__0 = 웹 브라우저가 지정한 기본 미디어 요소(MediaElement) 컨트롤을 나타냅니다. -hideControls__description__0 = 기본 미디어 요소(MediaElement) 컨트롤을 숨깁니다. -addCue__description__0 = 오디오/비디오와 같은 미디어 요소(MediaElement)가 재생 큐 지점에 도달할 때 발생할 이벤트를 예약합니다. -addCue__description__1 = 콜백 함수, 콜백이 발생할 시간(초 단위), 콜백에 대한 선택적 매개변수를 허용합니다. -addCue__description__2 = 첫 번째 매개변수는 시간(time)을, 두 번째 매개변수는 param을 콜백 함수에 전달합니다. -addCue__returns = 숫자: 큐의 ID. removeCue(id) 함수에 유용함. -addCue__params__time = 숫자: 요소에 대한 초 단위의 시산. 예를 들어, 2초마다 이벤트를 발생시킬 시, 숫자 '2'를 인자값으로 합니다. 이 숫자는 콜백 함수의 첫 매개변수로 전달됩니다. -addCue__params__callback = 함수: 호출될 함수. 콜백 함수는 매개변수로 'time'과 'param'을 받습니다. -addCue__params__value = 객체: (선택 사항) 콜백 함수에 전달될 객체. -removeCue__description__0 = ID를 기반으로 콜백을 제거합니다. ID는 addCue 메소드로 반환됩니다. -removeCue__params__id = 숫자: addCue에서 반환되는 cue의 ID -clearCues__description__0 = addCue 메소드로 예약된 모든 콜백을 제거합니다. -clearCues__params__id = 숫자: addCue에서 반환되는 cue의 ID diff --git a/src/data/localization/ko/p5.MonoSynth.ftl b/src/data/localization/ko/p5.MonoSynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Noise.ftl b/src/data/localization/ko/p5.Noise.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.NumberDict.ftl b/src/data/localization/ko/p5.NumberDict.ftl deleted file mode 100644 index b75d08c5ec..0000000000 --- a/src/data/localization/ko/p5.NumberDict.ftl +++ /dev/null @@ -1,21 +0,0 @@ -description__0 = 숫자를 위한 간단한 사전 클래스
    p5.TypedDict를 확장합니다. -add__description__0 = 특정 키에 현재 저장된 값에 사용자가 지정한 숫자를 더하고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다. -add__params__Key = 숫자: 숫자를 더하고 싶은 키 -add__params__Number = 숫자: 값에 더할 숫자 -sub__description__0 = 특정 키에 현재 저장된 값에서 사용자가 지정한 숫자를 빼고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다. -sub__params__Key = 숫자: 숫자를 뻬고 싶은 키 -sub__params__Number = 숫자: 값에서 뺄 숫자 -mult__description__0 = 특정 키에 현재 저장된 값에 사용자가 지정한 숫자를 곱하고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다. -mult__params__Key = 숫자: 숫자를 곱하고 싶은 키 -mult__params__Amount = 숫자: 값에 곱할 숫자 -div__description__0 = 특정 키에 현재 저장된 값을 사용자가 지정한 숫자로 나누고, 그 몫은 사전 안에 저장되어있던 기존값을 대체합니다. -div__params__Key = 숫자: 숫자로 나누고 싶은 키 -div__params__Amount = 숫자: 값으로부터 나눌 숫자 -minValue__description__0 = 사전 안에 현재 저장된 값들 중 가장 낮은 숫자를 반환합니다. -minValue__returns = 숫자: 가장 낮은 숫자 -maxValue__description__0 = 사전 안에 현재 저장된 값들 중 가장 높은 숫자를 반환합니다. -maxValue__returns = 숫자: 가장 높은 숫자 -minKey__description__0 = 사전에서 사용된 키들 중 가장 낮은 키를 반환합니다. -minKey__returns = 숫자: 가장 낮은 키 -maxKey__description__0 = 사전에서 사용된 키들 중 가장 높은 키를 반환합니다. -maxKey__returns = 숫자: 가장 높은 키 diff --git a/src/data/localization/ko/p5.OnsetDetect.ftl b/src/data/localization/ko/p5.OnsetDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Oscillator.ftl b/src/data/localization/ko/p5.Oscillator.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Panner3D.ftl b/src/data/localization/ko/p5.Panner3D.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Part.ftl b/src/data/localization/ko/p5.Part.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.PeakDetect.ftl b/src/data/localization/ko/p5.PeakDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Phrase.ftl b/src/data/localization/ko/p5.Phrase.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.PolySynth.ftl b/src/data/localization/ko/p5.PolySynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.PrintWriter.ftl b/src/data/localization/ko/p5.PrintWriter.ftl deleted file mode 100644 index 28e3e50f25..0000000000 --- a/src/data/localization/ko/p5.PrintWriter.ftl +++ /dev/null @@ -1,8 +0,0 @@ -params__filename = 문자열: -params__extension = 문자열: (선택 사항) -write__description__0 = PrintWriter 스트림에 데이터를 작성합니다. -write__params__data = 배열: PrintWriter가 작성할 모든 데이터 -print__description__0 = PrintWriter 스트림에 데이터를 작성하고, 마지막에 새로운 한 줄을 추가합니다. -print__params__data = 배열: PrintWriter가 프린트 할 모든 데이터 -clear__description__0 = PrintWriter 객체에 이미 작성된 데이터를 제거합니다. -close__description__0 = PrintWriter를 종료합니다. diff --git a/src/data/localization/ko/p5.Pulse.ftl b/src/data/localization/ko/p5.Pulse.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Renderer.ftl b/src/data/localization/ko/p5.Renderer.ftl deleted file mode 100644 index 00ac1c4516..0000000000 --- a/src/data/localization/ko/p5.Renderer.ftl +++ /dev/null @@ -1,4 +0,0 @@ -description__0 = 그래픽과 렌더링의 기초되는 클래스이며, p5.js의 코어 (core)에 사용되는 기초적 API입니다. Render2D와 Renderer3D 클래스들의 부모클래스로 사용됩니다. -params__elt = 문자열: DOM 노드 -params__pInst = P5: (선택 사항) p5 인스턴스에 향한 포인터 -params__isMainCanvas = 불리언: (선택 사항) 메인 캔버스임의 여부 diff --git a/src/data/localization/ko/p5.Reverb.ftl b/src/data/localization/ko/p5.Reverb.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.SawOsc.ftl b/src/data/localization/ko/p5.SawOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Score.ftl b/src/data/localization/ko/p5.Score.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.Shader.ftl b/src/data/localization/ko/p5.Shader.ftl deleted file mode 100644 index 43f80690be..0000000000 --- a/src/data/localization/ko/p5.Shader.ftl +++ /dev/null @@ -1,7 +0,0 @@ -description__0 = WebGL 모드를 위한 셰이더 클래스 -params__renderer = p5.RendererGL: 새로운 p5.Shader에 GL 문맥을 제공하는 p5.RendererGL 인스턴스 -params__vertSrc = 문자열: 버텍스 셰이더의 소스 코드 (문자열 형식) -params__fragSrc = 문자열: 프래그먼트 셰이더의 소스 코드 (문자열 형식) -setUniform__description__0 = gl.uniform 함수들을 감싸는 래퍼. uniform (셰이더의 변수)의 데이터를 셰이더에 저장하면서 타입 검증을 한 후 알맞은 함수를 호출합니다. -setUniform__params__uniformName = 문자열: 셰이더 프로그램에 있는 uniform 속성의 이름 -setUniform__params__data = 객체|숫자|불리언|숫자 배열[]: 선택한 uniform과 연관시킬 데이터; 타입은 다양합니다 (숫자 하나, 배열, 매트릭스, 또는 텍스쳐/샘플러 참고자료). diff --git a/src/data/localization/ko/p5.SinOsc.ftl b/src/data/localization/ko/p5.SinOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.SoundFile.ftl b/src/data/localization/ko/p5.SoundFile.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.SoundLoop.ftl b/src/data/localization/ko/p5.SoundLoop.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.SoundRecorder.ftl b/src/data/localization/ko/p5.SoundRecorder.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.SqrOsc.ftl b/src/data/localization/ko/p5.SqrOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.StringDict.ftl b/src/data/localization/ko/p5.StringDict.ftl deleted file mode 100644 index 3156eab9d0..0000000000 --- a/src/data/localization/ko/p5.StringDict.ftl +++ /dev/null @@ -1 +0,0 @@ -description__0 = 문자열을 위한 간단한 사전. diff --git a/src/data/localization/ko/p5.Table.ftl b/src/data/localization/ko/p5.Table.ftl deleted file mode 100644 index 7f9f7686e2..0000000000 --- a/src/data/localization/ko/p5.Table.ftl +++ /dev/null @@ -1,76 +0,0 @@ -description__0 = 테이블 객체는 기존의 스프레트 시트처럼 복수의 행과 열에 데이터를 저장합니다. 동적으로 새로운 테이블을 생성하거나, 기존 파일 데이터를 사용하여 생성할 수 있습니다. -params__rows = p5.TableRow 배열[]: (선택 사항) p5.TableRow 객체의 배열 -columns__description__0 = 테이블의 행명을 담는 배열. 테이블의 헤더(header)를 함께 불러올 경우, header 매개변수. -rows__description__0 = 테이블의 행을 채우는 p5.TableRow 객체의 배열. getRows() 호출과 동일한 결과를 갖습니다. -addRow__description__0 = addRow()를 사용하여 p5.Table 객체에 새로운 행 데이터를 추가할 수 있습니다. 기본값으로 빈 행이 생성됩니다. 일반적으로, TableRow 객체에 있는 새로운 행에 레퍼런스를 저장하고 (위의 예제 중 newRow 참고), set()을 사용하여 각각의 개별값을 설정합니다. p5.TableRow 객체를 매개변수로 지정할 경우, 행을 복제하여 테이블에 추가합니다. -addRow__returns = p5.TableRow: 추가된 행 -addRow__params__row = p5.TableRow: (선택 사항) 추가될 행 -removeRow__description__0 = 테이블 객체에서 행을 제거합니다. -removeRow__params__id = 정수: 제거할 행의 ID -getRow__description__0 = 지정된 p5.TableRow에 레퍼런스를 반환합니다. 반환된 레퍼런스는 지정된 행의 값을 받아오거나 설정할 때 사용할 수 있습니다. -getRow__returns = p5.TableRow: p5.TableRow 객체 -getRow__params__rowID = 정수: 찾을 행의 ID -getRows__description__0 = 테이블의 모든 행을 받아옵니다. p5.TableRow 배열들을 반환합니다. -getRows__returns = p5.TableRow 배열[]: p5.TableRow의 배열 -findRow__description__0 = 지정된 값을 포함하는 테이블 행 중 1번째 행을 검색하고, 해당 행의 레퍼런스를 반환합니다. 여러 개의 행들이 지정된 값을 포함하더라도, 오직 1번째 행만 반환됩니다. ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다. -findRow__returns = p5.TableRow: -findRow__params__value = 문자열: 검색할 값 -findRow__params__column = 정수|문자열: 검색할 열의 ID 또는 제목 -findRows__description__0 = 지정된 값을 포함하는 테이블 행들을 검색하고, 해당 행들의 레퍼런스를 반환합니다. 반환된 배열은 위의 예제처럼 모든 행을 반복 처리하는 데에 사용됩니다.ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다. -findRows__returns = p5.TableRow 배열[]: p5.TableRow의 배열 -findRows__params__value = 문자열: 검색할 값 -findRows__params__column = 정수|문자열: 검색할 열의 ID 또는 제목 -matchRow__description__0 = 지정된 정규표현식과 매칭하는 테이블 행 중 1번째 행을 검색하고, 해당 행의 레퍼런스를 반환합니다. 반환된 배열은 모든 행을 반복 처리하는 데에 사용됩니다. ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다. -matchRow__returns = p5.TableRow: p5.TableRow 객체 -matchRow__params__regexp = 문자열|RegExp: 검색할 정규표현식 -matchRow__params__column = 문자열|정수: 검색할 열의 ID 또는 제목 -matchRows__description__0 = 지정된 정규표현식과 매칭하는 테이블 행들을 검색하고, 해당 행들의 배열을 반환합니다. 반환된 배열은 모든 행을 반복 처리하는 데에 사용됩니다. ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다. -matchRows__returns = p5.TableRow[]: p5.TableRow의 배열 -matchRows__params__regexp = 문자열: 검색할 정규표현식 -matchRows__params__column = 문자열|정수: (선택 사항) 검색할 열의 ID 또는 제목 -getColumn__description__0 = 특정 열의 모든 값들을 가져와 배열로 반환합니다. 열은 그 ID 또는 제목(title)으로 지정가능합니다. -getColumn__returns = 배열: 열 값들의 배열 -getColumn__params__column = 문자열|숫자: 반환할 열의 ID 또는 제목 -clearRows__description__0 = 테이블로부터 모든 행을 제거합니다. 모든 행들이 제거되어도 열과 열 제목은 유지됩니다. -addColumn__description__0 = addColumn()을 사용하여 p5.Table 객체에 새로운 열 데이터를 추가할 수 있습니다. 일반적으로 열 제목을 설정하여 이후 쉽게 참조되도록 합니다. (별도의 제목을 지정하지 않는 경우, 새로운 열의 제목은 null이 됩니다.) -addColumn__params__title = 문자열: (선택 사항) 해당 열의 제목 -getColumnCount__description__0 = 테이블의 전체 열 개수를 반환합니다. -getColumnCount__returns = 정수: 테이블의 열 개수 -getRowCount__description__0 = 테이블의 전체 행 개수를 반환합니다. -getRowCount__returns = 정수: 테이블의 행 개수 -removeTokens__description__0 = 지정된 문자(또는 '토큰')을 제거합니다. 별도의 열을 지정하지 않는 경우, 모든 행과 열 속 값들이 처리됩니다. 열은 ID 또는 제목으로 참조가능합니다. -removeTokens__params__chars = 문자열: 제거할 문자들의 문자열 -removeTokens__params__column = 문자열|정수: (선택 사항) 열 ID (숫자) 또는 제목 (문자열) -trim__description__0 = 문자열 테이블 값에서 스페이스나 탭과 같은 선행 및 후행 공백을 자릅니다. 별도의 열을 지정하지 않는 경우, 모든 행과 열 속 값들이 처리됩니다. 열은 ID 또는 제목으로 참조가능합니다. -trim__params__column = 문자열|정수: (선택 사항) 열 ID (숫자) 또는 제목 (문자열) -removeColumn__description__0 = removeColumn()을 사용하여 테이블 객체로부터 특정 열을 제거합니다. 제거될 열은 그 제목(문자열) 또는 인덱스 값(정수)로 식별할 수 있습니다. removeColumn(0)은 1번째 열을, removeColumn(1)은 2번째 열을 제거합니다. -removeColumn__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -set__description__0 = 테이블 중 지정된 행과 열에 값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다. -set__params__row = 정수: row ID -set__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -set__params__value = 문자열|숫자: 저장할 값 -setNum__description__0 = 테이블 중 지정된 행과 열에 실수(float)값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다. -setNum__params__row = 정수: row ID -setNum__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -setNum__params__value = 숫자: 저장할 값 -setString__description__0 = 테이블 중 지정된 행과 열에 문자열 값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다. -setString__params__row = 정수: row ID -setString__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -setString__params__value = 문자열: 저장할 값 -get__description__0 = 테이블 중 지정된 행과 열에 값을 받아옵니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다. -get__returns = 문자열|숫자: 지정된 행과 열에 값 -get__params__row = 정수: 행 ID -get__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -getNum__description__0 = 이블 중 지정된 행과 열에 실수(float)값을 받아옵니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다. -getNum__returns = 숫자: 실수값 -getNum__params__row = 정수: 행 ID -getNum__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -getString__description__0 = 테이블 중 지정된 행과 열에 문자열 값을 받아옵니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다. -getString__returns = 문자열: 문자열 값 -getString__params__row = 정수: 행 ID -getString__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -getObject__description__0 = 모든 테이블 데이터를 받아와 객체로 반환합니다. 열 이름이 전달될 경우, 각 행 객체는 해당 속성을 제목으로 저장합니다. -getObject__returns = 객체: 테이블 객체 -getObject__params__headerColumn = 문자열: (선택 사항) 행의 제목을 정할 열의 제목/이름 -getArray__description__0 = 모든 테이블 데이터를 받아와 다차원 배열로 반환합니다. -getArray__returns = 배열: 다차원 배열 diff --git a/src/data/localization/ko/p5.TableRow.ftl b/src/data/localization/ko/p5.TableRow.ftl deleted file mode 100644 index 411cef4104..0000000000 --- a/src/data/localization/ko/p5.TableRow.ftl +++ /dev/null @@ -1,23 +0,0 @@ -description__0 = TableRow 객체는 테이블 중 열에 저장된 데이터 값들의 단일 행을 표현합니다. -description__1 = 테이블 행은 정렬된 배열과 정렬되지 않은 JSON 객체를 모두 포함합니다. -description__2 = -params__str = 문자열: (선택 사항) 구분 기호로 분리된 문자열값으로 행 채우기 -params__separator = 문자열: (선택 사항) 기본값은 쉼표 단위 구분(csv) -set__description__0 = TableRow의 지정된 열에 값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다. -set__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -set__params__value = 문자열|숫자: 저장될 값 -setNum__description__0 = TableRow의 지정된 열에 실수(float)값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다. -setNum__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -setNum__params__value = 숫자|문자열: 저장될 값 as a Float -setString__description__0 = TableRow의 지정된 열에 문자열 값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다. -setString__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -setString__params__value = 문자열|숫자|불리언|객체: 저장될 값 -get__description__0 = TableRow의 지정된 열로부터 값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다. -get__returns = 문자열|숫자: -get__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -getNum__description__0 = TableRow의 지정된 열로부터 실수(float)값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다. -getNum__returns = 숫자: 실수 -getNum__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) -getString__description__0 = TableRow의 지정된 열로부터 문자열 값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다. -getString__returns = 문자열: String -getString__params__column = 문자열|정수: 열 ID (숫자) 또는 제목 (문자열) diff --git a/src/data/localization/ko/p5.TriOsc.ftl b/src/data/localization/ko/p5.TriOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/ko/p5.TypedDict.ftl b/src/data/localization/ko/p5.TypedDict.ftl deleted file mode 100644 index c7925ad602..0000000000 --- a/src/data/localization/ko/p5.TypedDict.ftl +++ /dev/null @@ -1,11 +0,0 @@ -description__0 = 모든 p5.Dictionary 유형을 위한 기본 클래스 입니다. 사용자가 지정한 사전(Dictionary) 클래스는 이 클래스를 상속할 수 있습니다. -size__description__0 = 사전 안에 현재 저장된 키-값(key-value) 쌍의 개수를 반환합니다. -hasKey__description__0 = 지정된 키(key)가 사전 안에 존재할 경우 참(true)을, 그렇지 않으면 거짓(false)를 반환합니다. -get__description__0 = 지정된 키에 저장된 값을 반환합니다. -set__description__0 = 지정된 키가 사전 안에 존재할 경우 연관된 값을 반환합니다. 그렇지 않으면 새로운 키-값 쌍이 추가됩니다. -create__description__0 = 새로운 키-값 쌍을 사전 안에 생성합니다. -clear__description__0 = 기존에 저장된 모든 키-값 쌍들을 사전으로부터 제거합니다. -remove__description__0 = 특정 키에 저장된 키-값 쌍을 사전으로부터 제거합니다. -print__description__0 = Dictionary에 현재 저장된 항목들의 로그를 콘솔창에 출력합니다. -saveTable__description__0 = 로컬 다운로드를 위해 사전을 CSV 파일로 변환합니다. -saveJSON__description__0 = 로컬 다운로드를 위해 사전을 JSON 파일로 변환합니다. diff --git a/src/data/localization/ko/p5.Vector.ftl b/src/data/localization/ko/p5.Vector.ftl deleted file mode 100644 index c9028d1e79..0000000000 --- a/src/data/localization/ko/p5.Vector.ftl +++ /dev/null @@ -1,133 +0,0 @@ -description__0 = 2차원 및 3차원 벡터, 특히 유클리드 (기하학) 벡터를 설명하는 클래스입니다. 벡터는 크기와 방향을 모두 지닌 개체입니다. 하지만, 그 데이터 유형은 벡터의 성분(2D의 경우 x와 y, 3D의 경우 x, y, z)을 저장합니다. 크기와 방향은 각각 mag() 및 heading() 메소드를 통해 접근할 수 있습니다. -description__1 = p5.Vector는 위치, 속도, 가속을 다루는 수많은 p5.js 예제에서 사용됩니다. 예를 들어, 화면을 가로질러 움직이는 직사각형을 만들려면, 이 물체의 위치(원점에서 그 위치를 가리키는 벡터), 속도(단위 시간당 객체의 위치가 변하는 속도, 벡터로 표시), 그리고 가속도(단위 시간당 객체의 속도가 변하는 속도, 벡터로 표시)를 반드시 고려해야 합니다. -description__2 = 벡터는 그룹화된 값들을 나타냅니다. 따라서, 전통적인 덧셈/곱셈 대신, p5.Vector 클래스 내부의 벡터 수학 메소드를 사용해서 계산해야 합니다. -params__x = 숫자: (선택 사항) 벡터의 x성분 -params__y = 숫자: (선택 사항) 벡터의 y성분 -params__z = 숫자: (선택 사항) 벡터의 z성분 -x__description__0 = 벡터의 x성분 -y__description__0 = 벡터의 y성분 -z__description__0 = 벡터의 z성분 -set__description__0 = 두 세개의 개별 변수, p5.Vector 데이터, 또는 실수(float) 배열의 값들을 사용하여 벡터의 x, y, z 성분을 설정합니다. -set__params__x = 숫자: (선택 사항) 벡터의 x 성분 -set__params__y = 숫자: (선택 사항) 벡터의 x 성분 -set__params__z = 숫자: (선택 사항) 벡터의 z 성분 -set__params__value = p5.Vector|숫자 배열[]: 설정할 벡터 -copy__description__0 = 벡터의 복사본을 가져와 p5.Vector 객체를 반환합니다. -copy__returns = p5.Vector: p5.Vector 객체의 복사본 -add__description__0 = x, y, z 성분을 벡터에 더하거나, 한 벡터를 다른 벡터에 더하거나, 또는 2개의 독립 벡터를 더합니다. 2개의 독립 벡터를 더하는 메소드는 정적 메소드에 해당하며, p5.Vector를 반환합니다. 다른 메소드들은 벡터에 직접 작용합니다. 자세한 내용을 위해서 예제를 참고할 수 있습니다. -add__params__x = 숫자: 추가할 벡터의 x 성분 -add__params__y = 숫자: (선택 사항) 추가할 벡터의 y 성분 -add__params__z = 숫자: (선택 사항) 추가할 벡터의 z 성분 -add__params__value = p5.Vector|숫자 배열[]: 추가할 벡터 -add__params__v1 = p5.Vector: 추가할 p5.Vector -add__params__v2 = p5.Vector: 추가할 p5.Vector -add__params__target = p5.Vector: (선택 사항) 결과를 받을 벡터 -rem__description__0 = 한 벡터를 다른 벡터로 나눌 때의 나머지(remainder)를 구합니다. 자세한 내용을 위해서 예제를 참고할 수 있습니다. -rem__params__x = 숫자: 나누는 벡터의 x 성분 -rem__params__y = 숫자: 나누는 벡터의 y 성분 -rem__params__z = 숫자: 나누는 벡터의 z 성분 -rem__params__value = p5.Vector | 숫자 배열[]: 나누는 벡터 -rem__params__v1 = p5.Vector: 나누어지는 p5.Vector -rem__params__v2 = p5.Vector: 나누는 p5.Vector -sub__description__0 = x, y, z성분을 벡터에서 빼거나, 한 벡터에서 다른 벡터를 빼거나, 또는 2개의 독립 벡터를 뺍니다. 2개의 독립 벡터를 빼는 메소드는 정적 메소드에 해당하며, p5.Vector를 반환합니다. 다른 메소드들은 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고할 수 있습니다. -sub__params__x = 숫자: 뺄샘할 벡터의 x 성분 -sub__params__y = 숫자: (선택 사항) 뺄샘할 벡터의 y 성분 -sub__params__z = 숫자: (선택 사항) 뺄샘할 벡터의 z 성분 -sub__params__value = p5.Vector|숫자 배열[]: 뺄샘할 벡터 -sub__params__v1 = p5.Vector: 뺄샘할 p5.Vector -sub__params__v2 = p5.Vector: 뺄샘할 p5.Vector -sub__params__target = p5.Vector: (선택 사항) 결과를 받을 벡터 -mult__description__0 = 벡터에 스칼라를 곱합니다. 정적 메소드인 경우 새로운 p5.Vector를 생성하는 반면, 정적 메소드가 아닌 경우 벡터에 직접 작용합니다. 자세한 내용을 위해서 예제를 참고할 수 있습니다. -mult__params__n = 숫자: 벡터로 곱할 숫자 -mult__params__x = 숫자: 벡터의 x 성분에 곱할 숫자 -mult__params__y = 숫자: 벡터의 y 성분에 곱할 숫자 -mult__params__z = 숫자: (선택 사항) 벡터의 z 성분에 곱할 숫자 -mult__params__arr = 숫자 배열[]: 벡터의 성분들에 곱할 숫자 배열 -mult__params__v = p5.Vector: 원본 벡터의 성분들에 곱할 벡터 -mult__params__target = p5.Vector: (선택 사항) 결과를 받을 벡터 -mult__params__v0 = p5.Vector -mult__params__v1 = p5.Vector -div__description__0 = 벡터를 스칼라로 나눕니다. 정적 메소드인 경우 새로운 p5.Vector를 생성하는 반면, 정적 메소드가 아닌 경우 벡터에 직접 작용합니다. 자세한 내용을 위해서 예제를 참고할 수 있습니다. -div__params__n = 숫자: 벡터를 나눌 숫자 -div__params__x = 숫자: 벡터의 x 성분에 나눌 숫자 -div__params__y = 숫자: 벡터의 y 성분에 나눌 숫자 -div__params__z = 숫자: (선택 사항) 벡터의 z 성분에 나눌 숫자 -div__params__arr = 숫자 배열[]: 벡터의 성분들을 나눌 숫자 -div__params__v = p5.Vector: 원본 벡터의 성분들을 나눌 벡터 -div__params__target = p5.Vector: (선택 사항) 결과를 받을 벡터 -div__params__v0 = p5.Vector -div__params__v1 = p5.Vector -mag__description__0 = 벡터의 크기(길이)를 계산하고 그 결과를 실수(float)으로 반환합니다. (이는 수식 sqrt(x*x + y*y + z*z)과도 같습니다.) -mag__returns = 숫자: 벡터의 크기(길이) -mag__params__vecT = p5.Vector: 크기를 찾을 벡터 -magSq__description__0 = 벡터의 제곱 크기를 계산하고 그 결과를 실수(float)로 반환합니다. (이는 수식 sqrt(x*x + y*y + z*z)과도 같습니다.) 벡터를 비교하는 등의 경우에서 실제 길이를 포함하지 않으면 더 빠르게 계산됩니다. -magSq__returns = 숫자: 벡터 크기의 제곱 -dot__description__0 = 두 벡터의 내적을 계산합니다. 2개의 독립 벡터의 내적을 계산하는 메소드는 정적 메소드에 해당합니다. 자세한 내용을 위해서 예제를 참고할 수 있습니다. -dot__returns = 숫자: the dot product -dot__params__x = 숫자: 벡터의 x 성분 -dot__params__y = 숫자: (선택 사항) 벡터의 y 성분 -dot__params__z = 숫자: (선택 사항) 벡터의 z 성분 -dot__params__value = p5.Vector: 벡터의 내적 값 또는 p5.Vector 객체 -dot__params__v1 = p5.Vector: 첫 번째 p5.Vector 객체 -dot__params__v2 = p5.Vector: 두 번째 p5.Vector 객체 -cross__description__0 = 두 벡터의 외적으로 구성된 벡터를 계산하고 반환합니다. 정적 및 비정적 메소드 모두 새로운 p5.Vector를 반환합니다. 자세한 내용을 위해서 예제를 참고할 수 있습니다. -cross__returns = p5.Vector: 외적을 가진 p5.Vector 객체 -cross__params__v = p5.Vector: 외적을 구할 p5.Vector 객체 -cross__params__v1 = p5.Vector: 첫 번째 p5.Vector 객체 -cross__params__v2 = p5.Vector: 두 번째 p5.Vector 객체 -dist__description__0 = 두 점 사이의 유클리드 거리를 계산합니다 (점을 벡터 객체로 간주). -dist__returns = 숫자: 두 점 사이의 거리 -dist__params__v = p5.Vector: x, y, z 좌표를 가진 p5.Vector -dist__params__v1 = p5.Vector: 첫 번째 p5.Vector 객체 -dist__params__v2 = p5.Vector: 두 번째 p5.Vector 객체 -normalize__description__0 = 벡터를 길이 1로 정규화합니다. (단위 벡터로 만듭니다.) -normalize__returns = p5.Vector: 정규화된 p5.Vector 객체 -normalize__params__v = p5.Vector: 정규화할 벡터 -normalize__params__target = p5.Vector: (선택 사항) 결과를 받을 벡터 -limit__description__0 = 벡터의 크기를 매개변수 max의 값으로 제한합니다. -limit__params__max = 숫자: 벡터의 최댓값 -setMag__description__0 = 벡터의 크기를 매개변수 len의 값으로 제한합니다. -setMag__params__len = 숫자: 벡터의 새로운 크리 -heading__description__0 = 벡터의 회전 각도를 계산합니다. (2D 벡터만 해당) -heading__returns = 숫자: 회전 각도 -setHeading__description__0 = 벡터를 회전시킵니다 (2D 벡터만 해당. 벡터의 크기는 유지됩니다. -setHeading__params__angle = 숫자: 회전의 각도 -rotate__description__0 = 벡터를 특정 각도로 회전하되 (2D 벡터만 해당), 크기는 동일하게 유지합니다. -rotate__params__angle = 숫자: 회전의 각도 -rotate__params__v = p5.Vector -rotate__params__target = p5.Vector: (선택 사항) 결과를 받을 벡터 -angleBetween__description__0 = 두 벡터 사이의 각도 (라디안 단위)를 계산하고 반환합니다. -angleBetween__returns = 숫자: 벡터 사이의 각도 (라디안 단위) -angleBetween__params__value = p5.Vector: p5.Vector 객체의 x, y, z 성분 -lerp__description__0 = 한 벡터와 다른 벡터를 선형적으로 보간합니다. -lerp__params__x = 숫자: 벡터의 x 성분 -lerp__params__y = 숫자: 벡터의 y 성분 -lerp__params__z = 숫자: 벡터의 z 성분 -lerp__params__amt = 숫자: 보간의 정도; 0.0 (구 벡터)과 1.0 (신 벡터) 사이의 값. 0.9은 새로운 벡터에 가까운 값입니다. 0.5은 두 벡터의 정중앙입니다. -lerp__params__v = p5.Vector: 선형적 보간을 할 p5.Vector 객체 -lerp__params__v1 = p5.Vector -lerp__params__v2 = p5.Vector -lerp__params__target = p5.Vector: (선택 사항) 결과를 받을 벡터 -reflect__description__0 = 2D 선 또는 3D 평면의 법선에 들어오는 벡터를 반영합니다. 이 메소드는 벡터에 직접 작용합니다. -reflect__params__surfaceNormal = p5.Vector: 반영 법선이 될 p5.Vector 객체가 정규화됩니다. -array__description__0 = 벡터의 표현을 실수 배열로 반환합니다. 이는 일시적으로만 사용됩니다. 다른 경우에도, p5.Vector.copy() 메소드를 통해 배열에 내용을 복사해야 합니다. -array__returns = 숫자 배열[]: 3 가지 값을 가진 배열 -equals__description__0 = p5.Vector에 대한 평등 검사 -equals__returns = 불리언: 벡터의 평등함 여부 -equals__params__x = 숫자: (선택 사항) 벡터의 x 성분 -equals__params__y = 숫자: (선택 사항) 벡터의 y 성분 -equals__params__z = 숫자: (선택 사항) 벡터의 z 성분 -equals__params__value = p5.Vector|배열: 비교할 벡터 -fromAngle__description__0 = 특정 각도에서 새로운 2D 벡터를 생성합니다. -fromAngle__returns = p5.Vector: 새로운 p5.Vector 객체 -fromAngle__params__angle = 숫자: 원하는 라디안 단위의 각도 (angleMode에 영향받지 않은 가도) -fromAngle__params__length = 숫자: (선택 사항) 새로운 벡터의 크리 (기본값은 1) -fromAngles__description__0 = 구면각 (spherical angle)의 쌍에서 새로운 3D 벡터를 생성합니다. -fromAngles__returns = p5.Vector: 새로운 p5.Vector 객체 -fromAngles__params__theta = 라디안 단위, 극각 (0는 위로 향함) -fromAngles__params__phi = 숫자: 라디안 단위, 방위각 (0은 화면 바깥에 있음) -fromAngles__params__length = 숫자: (선택 사항) 새로운 벡터의 크리 (기본값은 1) -random2D__description__0 = 임의의 각도에서 새로운 2D 단위 벡터를 생성합니다. -random2D__returns = p5.Vector: 새로운 p5.Vector 객체 -random3D__description__0 = 새로운 임의의 3D 단위 벡터를 생성합니다. -random3D__returns = p5.Vector: 새로운 p5.Vector 객체 diff --git a/src/data/localization/ko/p5.XML.ftl b/src/data/localization/ko/p5.XML.ftl deleted file mode 100644 index b2c5fafe01..0000000000 --- a/src/data/localization/ko/p5.XML.ftl +++ /dev/null @@ -1,46 +0,0 @@ -description__0 = XML은 XML 코드를 구문 분석할 수 있는 XML 객체의 표현입니다. loadXML()을 사용하여 외부 XML 파일을 불러와 XML 객체를 생성합니다. -getParent__description__0 = 요소 부모의 복사본을 가져와, 부모를 또다른 p5.XML 객체로 반환합니다. -getParent__returns = p5.XML: 부모 객체 -getName__description__0 = 요소의 전체 이름을 가져와 문자열로 반환합니다. -getName__returns = 문자열: 요소의 이름 -setName__description__0 = 문자열로 설정된 요소 이름을 지정합니다. -setName__params__the = 문자열: 요소의 새 이름 -hasChildren__description__0 = 요소의 자식 유무 여부를 확인하고, 그 결과를 불리언으로 반환합니다. -hasChildren__returns = 불리언: -listChildren__description__0 = 모든 요소의 자식 이름을 가져와 그 값들을 문자열 배열로 반환합니다. 이는 각 자식 요소마다 getName()을 호출하는 것과 동일한 효과를 갖습니다. -listChildren__returns = 문자열 배열[]: 요소의 자식요소의 배열 -getChildren__description__0 = 요소의 모든 자식을 p5.XML 객체 배열로 반환합니다. 이름 매개변수를 지정할 경우, 해당 변수명과 일치하는 모든 자식을 반환합니다. -getChildren__returns = p5.XML 배열[]: 요소의 자식 -getChildren__params__name = 문자열: (선택 사항) 요소의 이름 -getChild__description__0 = 이름 매개변수 또는 지정된 인덱스의 자식과 일치하는 요소의 1번째 자식을 반환합니다. 일치하는 자식을 찾지 못하는 경우, 'undefined'를 반환합니다. -getChild__returns = p5.XML: -getChild__params__name = 문자열|정수: 요소의 이름 또는 배열값 -addChild__description__0 = 요소에 새로운 자식을 추가합니다. 자식은 문자열로 지정될 수 있으며, 이는 새로운 태그명 또는 기존 p5.XML 객체에 대한 레퍼런스로서 사용할 수 있습니다. 새로 추가된 자식에 대한 레퍼런스는 p5.XML 객체로 반환됩니다. -addChild__params__node = p5.XML: a p5.XML 자식요소가 될 요소 또는 객체 -removeChild__description__0 = 이름 또는 인덱스로 지정된 요소를 제거합니다 -removeChild__params__name = 문자열|정수: 요소 이름 또는 배열값 -getAttributeCount__description__0 = 지정된 요소의 속성 개수를 숫자로 반환합니다. -getAttributeCount__returns = 정수: 요소의 속성 개수 -listAttributes__description__0 = 지정된 요소의 모든 속성을 가져와 문자열 배열로 반환합니다. -listAttributes__returns = 문자열 배열[]: 속성의 이름들을 담은 문자열 배열 -hasAttribute__description__0 = 요소가 지정된 속성을 갖는지 여부를 확인합니다. -hasAttribute__returns = 불리언: 속성이 있을 시 참, 없을 시 거짓 -hasAttribute__params__the = 문자열: 확인할 요소 -getNum__description__0 = 요소의 속성값을 숫자로 반환합니다. 매개변수 defaultValue가 지정되고 속성이 존재하지 않으면 defaultValue를 반환합니다. 매개변수 defaultValue가 지정되지 않고 속성이 존재하지 않으면 값 0을 반환합니다. -getNum__returns = 숫자: -getNum__params__name = 문자열: 속성의 부분적 이름 -getNum__params__defaultValue = 숫자: (선택 사항) 속성의 기본값 -getString__description__0 = 요소의 속성값을 문자열로 반환합니다. 매개변수 defaultValue가 지정되고 속성이 존재하지 않으면 'defaultValue'를 반환합니다. 매개변수 defaultValue가 지정되지 않고 속성이 존재하지 않으면 null을 반환합니다. -getString__returns = 문자열: -getString__params__name = 문자열: 속성의 부분적 이름 -getString__params__defaultValue = 숫자: (선택 사항) 속성의 기본값 -setAttribute__description__0 = 요소 속성의 내용을 설정합니다. 1번째 매개변수는 속성명을, 2번째 매개변수는 새로운 내용을 지정합니다. -setAttribute__params__name = 문자열: 속성의 부분적 이름 -setAttribute__params__value = 숫자|문자열|불리언: 속성의 값 -getContent__description__0 = 요소의 내용을 반환합니다. 매개변수 defaultValue가 지정되고 내용이 존재하지 않으면 'defaultValue'를 반환합니다. 매개변수 defaultValue가 지정되지 않고 내용이 존재하지 않으면 null을 반환합니다. -getContent__returns = 문자열: 요소의 내용 -getContent__params__defaultValue = 문자열: (선택 사항) 내용이 없을 시 반환될 문자열 -setContent__description__0 = 요소의 내용을 설정합니다. -setContent__params__text = 문자열: 새로운 내용 -serialize__description__0 = 요소를 문자열로 직렬화합니다. 요소의 내용을 http 요청으로 전송하거나 파일 저장을 준비할 때 사용됩니다. -serialize__returns = 문자열: 요소의 문자열 직렬화 diff --git a/src/data/localization/ko/p5.ftl b/src/data/localization/ko/p5.ftl deleted file mode 100644 index daa61d3023..0000000000 --- a/src/data/localization/ko/p5.ftl +++ /dev/null @@ -1,1552 +0,0 @@ -description__0 = p5 인스턴스 생성자 입니다. -description__1 = p5 인스턴스는 p5 스케치와 관련된 모든 속성과 메소드(method)를 보유합니다. 도래할 스케치 클로저(closure)를 예상하고, 생성된 p5 캔버스를 노드에 연결하기 위해 선택적으로 노드 매개변수를 취할 수 있습니다. 스케치 클로저는 새로이 생성된 p5 인스턴스를 유일한 인수로 취하며, 또 선택적으로, 스케치 실행을 위해 preload(), setup(), 그리고/또는 draw() 속성을 담을 수 있습니다. -description__2 = p5 스케치는 "전역" 또는 "인스턴스" 모드에서 실행됩니다: "전역 모드" - 모든 속성과 메소드가 윈도우에 속함 "인스턴스 모드" - 모든 속성과 메소드가 특정 p5 객체에 구속됨 -returns = P5: p5 인스턴스 -params__sketch = 함수: 주어진 p5 인스턴스에 선택적으로 preload(), setup(), 그리고/또는 draw() 속성을 설정할 수 있는 클로저 -params__node = HTML Element: (선택 사항) 캔버스에 속할 요소 -describe__description__0 = 스크린리더 (Screen Reader)를 위한 캔버스의 전체적인 서술적 묘사를 설정합니다. 첫 번째 매개변수는 문자열이며, 설정할 묘사입니다. 두 번째 매개변수는 선택 사항이며, 묘사의 표시법을 지정합니다. -describe__description__1 = describe(text, LABEL)은 설명을 모든 사용자에게 박물관 라벨/캡션을 캔버스 옆
    칸 안에 나타냅니다. CSS를 통해서 스타일을 자유자재로 바꿀 수 있습니다. -describe__description__2 = describe(text, FALLBACK)는 설정된 묘사를 스크린리더 사용자들에게만 이용가능케 하며, 캔버스의 부가적 문서객체모델 (DOM)에 설정됩니다. 두번 째 매개변수가 없을 시, 기본적으로 묘사는 스크린리더 사용자들에게만 이용가능합니다. -describe__params__text = 문자열: 켄버스의 설명 -describe__params__display = 상수: (선택 사항) LABEL 또는 FALLBACK -describeElement__description__0 = 스크린리더 (Screen Reader)를 위한 캔버스의 요소(도형, 또는 도형의 모임)의 서술적 묘사를 설정합니다. 첫 번째 매개변수는 묘사할 요소의 이름입니다. 두 번째 매개변수는 문자열이며 설정할 묘사입니다. 세 번째 매개변수는 선택 사항이며, 묘사의 표시법을 지정합니다. -describeElement__description__1 = describe(text, LABEL)은 설명을 모든 사용자에게 박물관 라벨/캡션을 캔버스 옆
    칸 안에 나타냅니다. CSS를 통해서 스타일을 자유자재로 바꿀 수 있습니다. -describeElement__description__2 = describeElement(name, text, FALLBACK)는 설정된 묘사를 스크린리더 사용자들에게만 이용가능케 하며, 캔버스의 부가적 문서객체모델 (DOM)에 설정됩니다. 두번 째 매개변수가 없을 시, 기본적으로 묘사는 스크린리더 사용자들에게만 이용가능합니다. -describeElement__params__name = 문자열: 요소의 이름 -describeElement__params__text = 문자열: 요소의 설명 및 묘사 -describeElement__params__display = 상수: (선택 사항) LABEL 또는 FALLBACK -textOutput__description__0 = textOutput() 함수는 스크린리더 (Screen Reader)를 위한 도형의 설명을 출력합니다. 이 설명은 자동적으로 만들어지며, 첫 부분은 캔버스의 높이 및 너비, 배경색, 그리고 캔버스상 요소 (도형, 또는 도형의 모임)의 개수를 출력합니다 (예: 'Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 4 shapes:'). 다음은 각 요소의 색, 위치, 넓이 등의 정보를 출력합니다 (예: "orange ellipse at top left covering 1% of the canvas"). 각 요소에 대한 구체적 정보는 선택해서 볼 수 있습니다. 요소들의 목록이 제공됩니다. 이 목록에는 도형, 색, 위치, 좌표와 넓이가 묘사되어 있습니다 (예: "orange ellipse location=top left area=2"). -textOutput__description__1 = textOutput()과 texOutput(FALLBACK)은 출력물을 스크린리더 (Screen Reader)에 사용되는 캔버스의 부가적 문서객체모델 (DOM)에 제공합니다. textOutput(LABEL)은 캔버스 옆 추가적인 div요소를 만들고 그 안에 설명을 출력합니다. 이는 스크린리더를 사용하지 않지만 코딩하는 동안 출력물을 보면서 하고 싶어하는 유저들에게 유용합니다. 하지만 LABEL을 사용할 시 스크린리더 사용자들에게는 의미없는 중복성을 만들 수 있습니다. 그 이유로 LABEL은 스케치를 만드는 동안에만 사용하고 스케치를 출판하거나 스크린리더 사용자들에게 나누기 전에 지우는 것을 권장합니다. -textOutput__params__display = 상수: (선택 사항) FALLBACK 또는 LABEL -gridOutput__description__0 = gridOutput()은 캔버스의 내용물을 위치적에 따라 격자 (grid) 형식으로 나열합니다. 이 테이블을 출력하기 전에 컨버스의 전반적 설명을 출력합니다. 캔버스의 높이 및 너비, 배경색, 그리고 캔버스상 요소 (도형, 또는 도형의 모임)의 개수를 출력합니다 (예: 'Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 4 shapes:'). 그리드는 내용물을 위치적으로 설명하며, 각 요소는 위치의 격자 위 셀 (cell)에 놓입니다. 각 셀에는 특정 요소의 색상과 모양이 저장되어 있습니다 (예: "orange ellipse"). 각 요소에 대한 구체적 정보는 선택해서 볼 수 있습니다. 각 요소의 모양, 색, 위치, 넓이 등의 정보가 표기되어 있는 목록 (예: "orange ellipse location=top left area=1%")도 사용 가능합니다. -gridOutput__description__1 = gridOutput() and gridOutput(FALLBACK)은 출력물을 스크린리더 (Screen Reader)에 사용되는 캔버스의 부가적 문서객체모델 (DOM)에 제공합니다. gridOutput(LABEL)은 캔버스 옆 추가적인 div요소를 만들고 그 안에 설명을 출력합니다. 이는 스크린리더를 사용하지 않지만 코딩하는 동안 출력물을 보면서 하고 싶어하는 유저들에게 유용합니다. 하지만 LABEL을 사용할 시 스크린리더 사용자들에게는 의미없는 중복성을 만들 수 있습니다. 그 이유로 LABEL은 스케치를 만드는 동안에만 사용하고 스케치를 출판하거나 스크린리더 사용자들에게 나누기 전에 지우는 것을 권장합니다. -gridOutput__params__display = 상수: (선택 사항) FALLBACK 또는 LABEL -alpha__description__0 = 픽셀 배열로부터 알파값을 추출합니다. -alpha__returns = 알파값 -alpha__params__color = p5.Color|숫자 배열[]| 문자열: p5.Color 객체, 색상 요소 또는 CSS 색상 -blue__description__0 = 색상 또는 픽셀 배열로부터 파랑값을 추출합니다. -blue__returns = 파랑값 -blue__params__color = p5.Color 객체, 색상 요소, CSS 색상 -brightness__description__0 = 색상 또는 픽셀 배열로부터 HSB 밝기값을 추출합니다. -brightness__returns = 밝기값 -brightness__params__color = p5.Color 객체, 색상 요소, CSS 색상 -color__description__0 = 색상 함수를 이용해 색상 데이터의 매개변수를 저장합니다. 이 때, 매개변수는 colorMode()의 설정에 따라 RGB 또는 HSB 값으로 처리됩니다. 기본 모드인 RGB값은 0부터 255까지이며, 따라서 color(255,204,0)와 같은 함수는 밝은 노랑색을 반환하게 됩니다. -color__description__1 = 만약에 color() 함수에 매개변수가 1개만 적히면, 회색 음영(grayscale)값으로 처리됩니다. 여기에 추가되는 두번째 변수는 투명도를 설정할 수 있는 알파값으로서 처리됩니다. 세번째 변수가 추가되었을 때 비로소 RGB나 HSB값으로 처리됩니다. RGB나 HSB값을 정하는 3개의 변수가 존재할 때 추가되는 네번째 변수는 알파값으로 적용됩니다. -color__description__2 = 나아가, p5는 RGB, RGBA, Hex CSS 색상 문자열과 모든 색상명 문자열 역시 지원합니다. 그 경우, 알파값은 괄호 내 2번째 매개변수 추가를 통해서가 아닌, RGBA 형식에 따라 지정될 수 있습니다. -color__returns = 색상 결과 -color__params__gray = 숫자: 흑과 백 사이의 값 지정 -color__params__alpha = 숫자: 현재 색상 범위(기본값: 0-255)에 대한 알파값 -color__params__v1 = 숫자: 현재 색상 범위 내 빨강색(R) 또는 색조값 지정 -color__params__v2 = 숫자: green or saturation value relative to the current color range -color__params__v3 = 숫자: 현재 색상 범위 내 파랑색(B) 또는 색조값 지정 -color__params__value = 문자열: 색상 문자열 -color__params__values = 숫자 배열[]: RGB 및 알파값을 포함한 숫자 배열 -color__params__color = p5.Color -green__description__0 = 색상 또는 픽셀 배열로부터 초록값을 추출합니다. -green__returns = 초록값 -green__params__color = p5.Color 객체, 색상 요소, CSS 색상 -hue__description__0 = 색상 또는 픽셀 배열로부터 색조를 추출합니다. -hue__description__1 = 색조는 HSB와 HSL상 모두 존재합니다. 이 함수는 HSB 색상 객체를 사용할 경우(또는 HSB 색상 모드로 지정된 픽셀 배열을 사용할 경우) HSB로 표준화된 색조 값을 반환합니다. 기본값으로는 HSL로 표준화된 색조를 반환합니다. (단, 최대 색조를 별도 지정한 경우 다른 값을 반환합니다.) -hue__returns = 색조 -hue__params__color = 객체, 색상 요소 또는 CSS 색상 -lerpColor__description__0 = 두 가지 색상을 혼합하고, 그 사이에 존재하는 제 3의 색상을 찾습니다. 여기서 매개변수 amt는 두 개의 값 사이를 선형적으로 보간합니다. 예를 들어, 0.0은 첫 번째 값과 동일한 색상값을, 0.1은 첫 번째 값에 매우 가까운 색상값을, 0.5는 두 값 사이의 중간 색상값을 나타내는 식입니다. 이 때, 0 미만의 값은 0으로, 1이상의 값은 1로 자동 변환됩니다. 이 점에서 lerpColor()는 lerp()와 다르게 작동하는 셈인데, 이처럼 lerpColor()는 색상값을 0과 1사이로 조정하여 지정된 범위를 벗어난 색상 생성을 방지합니다. -lerpColor__description__1 = 색상이 보간되는 방식은 현재 지정된 색상 모드에 따라 달라집니다. -lerpColor__returns = p5.Color: 선형적으로 보간된 색상 -lerpColor__params__c1 = 이 색상으로부터 선형 보간 -lerpColor__params__c2 = 이 색상을 향해 선형 보간 -lerpColor__params__amt = 숫자: 0과 1 사이의 숫자 -lightness__description__0 = 색상 또는 픽셀 배열로부터 HSL 명도를 추출합니다. -lightness__returns = 숫자: 명도 -lightness__params__color = p5.Color|숫자 배열[]|문자열: p5.Color 객체, 색상 요소 또는 CSS 색상 -red__description__0 = 색상 또는 픽셀 배열로부터 빨강값을 추출합니다. -red__returns = 숫자: 빨강값 -red__params__color = p5.Color|숫자 배열[]|문자열: p5.Color 객체, 색상 요소 또는 CSS 색상 -saturation__description__0 = 색상 또는 픽셀 배열로부터 채도값을 추출합니다. 채도값은 HSB와 HSL에서 각각 다르게 측정됩니다. 이 함수는 HSL 채도를 기본값으로 제공합니다. 하지만, HSB 색상 객체가 제공 될 때 (또는 색상 모드가 HSB이면서 픽셀 배열이 제공될 때) HSB 채도값을 반환합니다. -saturation__description__1 = Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise. -saturation__returns = 숫자: 채도값 -saturation__params__color = p5.Color|숫자 배열[]|문자열: p5.Color 객체, 색상 요소 또는 CSS 색상 -background__description__0 = background() 함수는 p5.js 캔버스의 배경색을 설정합니다. 배경색의 기본값은 투명입니다. 이 함수는 주로 draw() 함수 안에 위치하며, 매 프레임마다 캔버스 화면을 초기화하기 위해 사용됩니다. 하지만, 애니메이션의 첫 프레임 배경을 지정하거나 배경색을 최초 한번만 지정할 경우, setup() 함수 안에 쓰이기도 합니다. -background__description__1 = 색상은 현재 색상 모드(colorMode)에 따라 RGB, HSB, 또는 HSL값으로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 알파값의 기본 제공 범위 역시 0부터 255까지입니다. -background__description__2 = 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야 합니다. -background__description__3 = p5.Color 객체를 통해 배경색을 설정할 수 있습니다. -background__description__4 = p5.Image를 통해 배경 이미지를 설정할 수 있습니다. -background__params__color = p5.Color: color() 함수로 생성된 모든 값 -background__params__colorstring = 문자열, 지원되는 문자열 형식: 색상 문자열, 정수의 rgb()나 rgba(), 백분율의 rgb()나 rgba(), 3자리 숫자의 hex, 6자리 숫자의 hex -background__params__a = 숫자: (선택 사항) 현재 색상 범위에 따른 배경색 투명도 (기본값은 0-255) -background__params__gray = 숫자: 흑과 백 사이의 값 지정 -background__params__v1 = 숫자: 빨강값 또는 색조값 (현재 색상 모드에 따라 상이) -background__params__v2 = 숫자: 초록값 또는 채도값 (현재 색상 모드에 따라 상이) -background__params__v3 = 숫자: 파랑값 또는 밝기값 (현재 색상 모드에 따라 상이) -background__params__values = 숫자 배열[]: 빨강값, 초록값, 파랑값, 알파값을 포함한 배열 -background__params__image = p5.Image: loadImage()나 createImage()로 생성된 이미지를 배경 이미지로 설정하는 경우 (스케치 화면과 반드시 동일한 사이즈일 것) -clear__description__0 = 버퍼에 있는 픽셀들을 지우는 함수로, 오직 캔버스만 비게 됩니다. createVideo()나 createDiv()와 같은, createX()류의 메소드로 지정된 객체들을 제거하진 않습니다. 메인 그래픽이 아닌, createGraphics()로 생성된 부가적인 그래픽의 경우, 그 전체 또는 일부를 투명하게 처리할 수 있습니다. 이 함수는 모든 픽셀을 100% 투명하게 만듭니다. -colorMode__description__0 = colorMode()는 p5.js가 색상 데이터를 해석하는 방식을 결정합니다. 기본값으로, fill(), stroke(), background(), color()의 매개변수는 RGB 색상 모드에서 처리되며, 그 범위는 0부터 255까지입니다. 이 기본값은 colorMode(RGB, 255)와 동일한 효과를 지닙니다. colorMode(HSB)로 설정을 변경하면 HSB 색상 시스템을 사용할 수 있습니다. HSB 색상 시스템은 그 기본값으로 colorMode(HSB, 360, 100, 100, 1)와 같이 설정됩니다. 색상 모드는 HSL로도 설정가능합니다. -colorMode__description__1 = 참고: 모든 색상 객체들은 생성 당시에 지정된 색상 모드를 반영합니다. 따라서, 이미 생성된 색상 객체 중 일부에만 적용되는 색상 모드를 지정할 수도 있습니다. -colorMode__params__mode = 상수: RGB(빨강Red/초록Green/파랑색Blue), HSB(색조Hue/채도Saturation/밝기Brightness), HSL(색조Hue/채도Saturation/명도Lightness) 중 하나 -colorMode__params__max = 숫자: (선택 사항) 모든 값들의 범위 -colorMode__params__max1 = 숫자: (선택 사항) 모든 값들의 범위 -colorMode__params__max2 = 숫자: 현재 지정된 색상 모드의 색상 범위에 따른 빨강값 또는 색조값 -colorMode__params__max3 = 숫자: 현재 지정된 색상 모드의 색상 범위에 따른 초록값 또는 채도값 -colorMode__params__maxA = 숫자: (선택 사항) 알파값의 범위 -fill__description__0 = 도형의 면을 채울 색상을 지정합니다. 예를 들어, fill(204, 102, 0) 함수를 실행하면, 이 명령어 다음에 그려진 모든 도형들이 주황색으로 칠해집니다. 이 때, 색상값은 colorMode()로 지정된 현재의 색상 모드에 따라 RGB 또는 HSB로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 알파값의 기본 제공 범위 역시 0부터 255까지입니다. -fill__description__1 = 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야 합니다. -fill__description__2 = Color 객체로도 색상을 지정할 수 있습니다. -fill__params__v1 = 숫자: 현재 지정된 색상 모드의 색상 범위에 따른 빨강값 또는 색조값 -fill__params__v2 = 숫자: 현재 지정된 색상 모드의 색상 범위에 따른 초록값 또는 채도값 -fill__params__v3 = 숫자:현재 지정된 색상 모드의 색상 범위에 따른 파랑값 또는 밝기값 -fill__params__alpha = 숫자: (선택사항) -fill__params__value = 문자열: 색상 문자열 -fill__params__gray = 숫자: 회색값 -fill__params__values = 숫자 배열[]: 색상의 빨강값, 초록값, 파랑값, 그리고 알파값을 포함한 배열 -fill__params__color = p5.Color: 면채우기 색상 -noFill__description__0 = 도형에 색을 채우지 않도록 설정합니다. noStroke()과 noFill()을 동시에 사용하면, 화면에 아무것도 나타나지 않습니다. -noStroke__description__0 = 선이나 윤곽선을 그리지 않도록 설정합니다. noStroke()과 noFill()을 동시에 사용하면, 화면에 아무것도 나타나지 않습니다. -stroke__description__0 = 그려질 선 또는 도형 윤곽선의 색상을 설정합니다. 이 때, 색상값은 colorMode()로 지정된 현재의 색상 모드에 따라 RGB 또는 HSB로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) -stroke__description__1 = 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야 합니다. -stroke__description__2 = p5.Color 객체를 통해 선의 색상을 설정할 수 있습니다. -stroke__params__v1 = 숫자: 현재 지정된 색상 모드의 색상 범위에 따른 빨강값 또는 색조값 -stroke__params__v2 = 숫자: 현재 지정된 색상 모드의 색상 범위에 따른 초록값 또는 채도값 -stroke__params__v3 = 숫자:현재 지정된 색상 모드의 색상 범위에 따른 파랑값 또는 밝기값 -stroke__params__alpha = 숫자: (선택사항) -stroke__params__value = 문자열: 색상 문자열 -stroke__params__gray = 숫자: 회색값 -stroke__params__values = 숫자 배열[]: 색상의 빨강값, 초록값, 파랑값, 그리고 알파값을 포함한 배열 -stroke__params__color = p5.Color: 선의 색상 -erase__description__0 = erase() 함수의 영향을 받는 모든 드로잉을 캔버스로부터 지웁니다. 지워진 영역은 캔버스 이면의 웹 페이지 화면을 드러냅니다. 이러한 지우기 행위는 noErase()로 취소할 수 있습니다. -erase__description__1 = erase() 함수와 noErase() 함수 사이에서 image()나 background()로 그려진 드로잉은 캔버스에서 지워지지 않습니다. -erase__params__strengthFill = 숫자: (선택 사항) 도형의 면을 지우는 강도로서의 (0부터 255사이) 숫자. 별도 지정한 숫자가 없는 경우, 최고 강도인 255가 기본값으로 적용 -erase__params__strengthStroke = 숫자: (선택 사항) 도형의 테두리를 지우는 강도로서의 (0부터 255사이) 숫자. 별도 지정한 숫자가 없는 경우, 최고 강도인 255가 기본값으로 적용 -noErase__description__0 = erase()의 지우기 행위를 중단합니다. fill(), stroke(), 그리고 blendMode() 함수로 설정된 사항들은 erase() 함수가 호출되기 전의 상태로 돌아갑니다. -arc__description__0 = 화면에 호, 즉 아치형 선을 그립니다. x좌표, y좌표, w(너비), h(높이), 시작점, 끝점을 지정하면 호는 열린 파이 조각의 형태로 그려집니다. 모드 변수를 설정하기에 따라, 호는 각각 반원(OPEN), 닫힌 반원(CHORD), 닫힌 파이 조각(PIE) 형태로 그려집니다. ellipseMode() 함수를 이용하면 시작점을 변경할 수 있습니다. -arc__description__1 = 호는 언제나 시계방향으로 시작점으로부터 끝점까지 그려집니다. 만약 원 하나를 그리기 위해 arc()의 시작점을 0으로, 끝점을 TWO_PI으로 설정할 경우, 시작점과 끝점이 동일하여 아무것도 그려지지 않습니다. 원을 그릴 때는 ellipse() 함수를, 원의 일부를 그릴 때는 arc() 함수를 이용할 수 있습니다. -arc__params__x = 숫자: 호를 포함하는 원의 x좌표 -arc__params__y = 숫자: 호를 포함하는 원의 y좌표값 -arc__params__w = 숫자: 호를 포함하는 원의 너비값 -arc__params__h = 숫자: 호를 포함하는 원의 높이값 -arc__params__start = 숫자: 라디안 단위, 호의 시작점 각도값 -arc__params__stop = 숫자: 라디안 단위, 호의 끝점 각도값 -arc__params__mode = 상수: (선택 사항) 호를 그리는 방식들로, CHORD, PIEC, OPEN 중 선택 가능 -arc__params__detail = 숫자: (선택 사항) 호의 윤곽선을 구성하는 꼭짓점 개수를 지정. 기본값은 25. (WebGL 모드용) -ellipse__description__0 = 화면에 타원을 그립니다. 너비와 높이가 동일한 값으로 지정될 경우, 원이 그려집니다. 처음 두 변수는 각각 타원의 x좌표와 y좌표를, 3번째와 4번째 변수는 각각 타원의 너비와 높이를 지정합니다. 높이값 입력을 생략할 경우, 너비값이 높이값으로 동일하게 적용됩니다. 너비나 높이에 음수로 입력해도 그 절대값이 반영됩니다. -ellipse__description__1 = ellipseMode() 함수를 이용하면 타원의 시작점을 원의 중심으로 지정할 지의 여부를 결정할 수 있습니다. -ellipse__params__x = 숫자: 타원의 x좌표 -ellipse__params__y = 숫자: 타원의 y좌표값 -ellipse__params__w = 숫자: 타원의 너비값 -ellipse__params__h = 숫자: (선택사항) 타원의 높이값 -ellipse__params__detail = 정수: (선택사항) 타원을 몇 개의 부분으로 나누어 그릴 것인지 지정 (WebGL 모드용) -circle__description__0 = 화면에 원을 그립니다. 원은 닫힌 도형으로, 중심점으로부터 주어진 거리에있는 모든 점들의 집합입니다.이 함수는 높이와 너비가 다른 타원을 그려내는 ellipse() 함수와는 달리, 너비와 높이가 모두 동일한 원을 그립니다. 이 경우, 높이와 너비는 원의 지름과 같습니다. 기본값으로, 처음 두 매개변수는 원의 중심 위치를 설정하고, 세 번째 매개 변수는 원의 지름을 설정합니다. -circle__params__x = 숫자: 원 중심점의 x좌표 -circle__params__y = 숫자: 원 중심점의 y좌표 -circle__params__d = 숫자: 원의 지름 -line__description__0 = 화면에 선분, 즉 두 점을 연결하는 곧은 선을 그립니다. line() 함수에 4개의 변수를 입력하여 이차원 평면에 선을 그릴 수 있습니다. stroke() 함수를 사용해 선의 색상을 지정할 수 있습니다. 선은 면을 갖지 않으므로, 면채우기 함수인 fill()은 적용되지 않습니다. 기본값으로 제공되는 선의 두께는 1픽셀이며, 이를 변경하기 위해 strokeWeight() 함수를 사용할 수 있습니다. -line__params__x1 = 숫자: 1번째 점의 x좌표값 -line__params__y1 = 숫자: 1번째 점의 y좌표값 -line__params__x2 = 숫자: 2번째 점의 y좌표값 -line__params__y2 = 숫자: 1번째 점의 z좌표값 -line__params__z1 = 숫자: 2번째 점의 x좌표값 -line__params__z2 = 숫자: 2번째 점의 z좌표값 -point__description__0 = 화면 좌표에 해당하는, 1픽셀 크기의 점을 그립니다. 첫 번째 매개변수는 점의 x좌표값을, 두 번째 매개변수는 점의 y좌표값입니다. 점의 색상은 stroke() 함수로 변경할 수 있습니다. 점의 크기는 strokeWeight() 함수로 변경할 수 있습니다. -point__params__x = 숫자: x좌표값 -point__params__y = 숫자: y좌표값 -point__params__z = 숫자: z좌표값 (WebGL 모드용) -point__params__coordinate_vector = p5.Vector: 좌표 벡터 -quad__description__0 = 사각형을 그립니다. 사각형은 4개의 변을 가진 다각형으로, 얼핏 직사각형과 유사하게 들리나 직사각형과는 달리 변 사이의 각도가 90도로 고정되어 있지 않습니다. 처음 한 쌍의 변수는 최초의 꼭짓점을 설정하며, 뒤이은 다른 쌍들은 시계 방향이나 반시계 방향에 따라 나머지 3개의 꼭짓점 위치를 설정합니다. z 변수는 WebGL 모드에서 quad() 함수를 사용하는 경우에만 적용됩니다. -quad__params__x1 = 숫자: 1번째 꼭짓점의 x좌표값 -quad__params__y1 = 숫자: 1번째 꼭짓점의 y좌표값 -quad__params__x2 = 숫자: 2번째 꼭짓점의 y좌표값 -quad__params__y2 = 숫자: 3번째 꼭짓점의 x좌표값 -quad__params__x3 = 숫자: 4번째 꼭짓점의 x좌표값 -quad__params__y3 = 숫자: 4번째 꼭짓점의 y좌표값 -quad__params__x4 = 숫자: 2번째 꼭짓점의 z좌표값 -quad__params__y4 = 숫자: 3번째 꼭짓점의 z좌표값 -quad__params__detailX = 숫자: (선택 사항) 가로축에 있는 세그멘트의 수 -quad__params__detailY = 숫자: (선택 사항) 세로축에 있는 세그멘트의 수 -quad__params__z1 = 숫자: 2번째 꼭짓점의 x좌표값 -quad__params__z2 = 숫자: 3번째 꼭짓점의 y좌표값 -quad__params__z3 = 숫자: 1번째 꼭짓점의 z좌표값 -quad__params__z4 = 숫자: 4번째 꼭짓점의 z좌표값 -rect__description__0 = 화면에 직사각형을 그립니다. 직사각형은 변이 4개이고 모든 변 사이의 각도가 90도인 도형을 뜻합니다. 처음 두 변수는 좌측 상단 꼭짓점의 좌표를, 3번째 변수는 사각형의 너비를, 4번째 변수는 그 높이를 설정합니다. rectMode() 함수로 사각형 그리기 모드를 변경하면, 모든 매개변수값들이 달리 해석됩니다. -rect__description__1 = 5번째, 6번째, 7번째, 8번째 매개변수를 입력하면, 각각 좌측 상단, 우측 상단, 우측 하단, 좌측 하단 모퉁이들의 각도를 지정하게 됩니다. 이 때 특정 각도 변수가 누락되면, 직전에 입력된 변수와 동일한 값이 적용됩니다. -rect__params__x = 숫자: 직사각형의 x좌표값 -rect__params__y = 숫자: 직사각형의 y좌표값 -rect__params__w = 숫자: 직사각형의 너비값 -rect__params__h = 숫자: 직사각형의 높이값 -rect__params__tl = 숫자: (선택 사항) 좌측 상단 모퉁이 각도값. -rect__params__tr = 숫자: (선택 사항) 우측 상단 모퉁이 각도값. -rect__params__br = 숫자: (선택 사항) 우측 하단 모퉁이 각도값. -rect__params__bl = 숫자: (선택 사항) 좌측 하단 모퉁이 각도값. -rect__params__detailX = 정수: (선택 사항) x축 방향의 선분 수 (WebGL 모드용) -rect__params__detailY = 정수: (선택 사항) y축 방향의 선분 수 (WebGL 모드용) -square__description__0 = 화면에 정사각형을 그립니다. 정사각형은 동일한 길이의 네 개의 변을 갖고, 모든 변 사이의 각도가 90도인 도형을 뜻합니다. 이 함수는 rect()함수의 특수한 사례와도 같은데, 너비와 높이가 같고 변의 길이를 라는 매개변수로 처리하게 됩니다. 기본값으로, 처음 두 변수는 처음 두 변수는 좌측 상단 꼭짓점의 좌표를, 3번째 변수는 변의 길이를 지정합니다. rectMode() 함수로 사각형 그리기 모드를 변경하면, 모든 매개변수값들이 달리 해석됩니다. -square__description__1 = 5번째, 6번째, 7번째매개변수를 입력하면, 각각 좌측 상단, 우측 상단, 우측 하단, 좌측 하단 모퉁이들의 각도를 지정하게 됩니다. 이 때 특정 각도 변수가 누락되면, 직전에 입력된 변수와 동일한 값이 적용됩니다. -square__params__x = 숫자: 정사각형의 x좌표값 -square__params__y = 숫자: 정사각형의 y좌표값 -square__params__s = 숫자: 정사각형의 너비 및 높이값 -square__params__tl = 숫자: (선택 사항) 좌측 상단 모퉁이 각도값. -square__params__tr = 숫자: (선택 사항) 우측 상단 모퉁이 각도값. -square__params__br = 숫자: (선택 사항) 우측 하단 모퉁이 각도값. -square__params__bl = 숫자: (선택 사항) 좌측 하단 모퉁이 각도값. -triangle__description__0 = 삼각형은 세 개의 점을 이어 만들어진 평면을 뜻합니다. 처음 두 인수는 1번째 꼭짓점을, 중간의 두 변수는 2번째 꼭짓점을, 마지막 두 인수는 3번째 꼭짓점을 지정합니다. -triangle__params__x1 = 숫자：1번째 꼭짓점의 x좌표값 -triangle__params__y1 = 숫자：1번째 꼭짓점의 y좌표값 -triangle__params__x2 = 숫자：2번째 꼭짓점의 x좌표값 -triangle__params__y2 = 숫자：2번째 꼭짓점의 y좌표값 -triangle__params__x3 = 숫자：3번째 꼭짓점의 x좌표값 -triangle__params__y3 = 숫자：3번째 꼭짓점의 y좌표값 -ellipseMode__description__0 = ellipse(), circle(), 그리고 arc() 함수의 매개변수들이 해석되는 방식을 변경하여, 타원이 그려지는 시작점 위치를 변경합니다. -ellipseMode__description__1 = 기본적으로 제공되는 모드는 ellipseMode(CENTER) 함수와도 같습니다. 이는 ellipse() 함수의 처음 두 매개변수를 타원의 중심점으로, 3번째와 4번째 변수를 각각 그 너비와 높이값으로서 해석합니다. -ellipseMode__description__2 = ellipseMode(RADIUS) 역시 ellipse() 함수의 처음 두 매개변수를 타원의 중심점으로 해석하나, 3번째와 4번째 변수를 각각 너비와 높이의 중간 지점값으로 해석합니다. -ellipseMode__description__3 = ellipseMode(CORNER)는 ellipse() 함수의 처음 두 매개변수를 도형의 좌측 상단을 기준으로 해석하고, 3번째와 4번째 변수를 각각 그 너비와 높이로 해석합니다. -ellipseMode__description__4 = ellipseMode(CORNERS)는 ellipse() 함수의 처음 두 매개변수를 도형의 바운딩 박스 중 한 모퉁이의 위치값으로서 해석합니다. 그리고, 3번째와 4번째 변수는 그 정반대 모퉁이의 위치값으로 해석합니다. -ellipseMode__description__5 = 이 함수의 모든 매개변수(CENTER, RADIUS, CORNER, CORNERS)들은 반드시 대문자로 작성되어야 합니다. 자바스크립트에서는 대소문자 구분이 매우 중요하답니다. -ellipseMode__params__mode = 상수：CENTER, RADIUS, CORNER, 또는 CORNERS -noSmooth__description__0 = 모든 그래픽의 가장자리를 울퉁불퉁하게 처리합니다. smooth() 함수는 2D 모드상 언제나 기본값으로 활성화되며, 그래픽을 부드럽게 처리합니다. 따라서, noSmooth() 함수를 호출해야만 도형, 이미지, 폰트 등의 부드러운 처리를 비활성화할 수 있습니다. 반면, 3D 모드에서는 noSmooth()가 기본값으로 활성화됩니다. 따라서, smooth() 함수를 호출해야만 부드러운 처리가 가능합니다. -rectMode__description__0 = rect() 함수의 매개변수들이 해석되는 방식을 변경하여, 직사각형이 그려지는 시작점 위치를 변경합니다. -rectMode__description__1 = 기본적으로 제공되는 모드는 rectMode(CORNER) 함수와도 같습니다. 이는 rect() 함수의 처음 두 매개변수를도형의 좌측 상단을 기준으로 해석하고, 3번째와 4번째 변수를 각각 그 너비와 높이값로서 해석합니다. -rectMode__description__2 = rectMode(CORNERS)는 rect() 함수의 처음 두 매개변수를 한 모퉁이의 위치값으로 서 해석합니다. 그리고, 3번째와 4번째 변수는 그 정반대 모퉁이의 위치값으로 해석합니다. -rectMode__description__3 = ellipseMode(CENTER)는 rect() 함수의 처음 두 매개변수를 타원의 중심점으로, 3번째와 4번째 변수를 각각 그 너비와 높이값으로서 해석합니다. -rectMode__description__4 = rectMode(RADIUS) 역시 rect() 함수의 처음 두 매개변수를 타원의 중심점으로 해석하나, 3번째와 4번째 변수를 각각 너비와 높이의 중간 지점값으로 해석합니다. -rectMode__description__5 = 이 함수의 모든 매개변수(CORNER, CORNERS, CENTER, RADIUS)들은 반드시 대문자로 작성되어야 합니다. 자바스크립트에서는 대소문자 구분이 매우 중요하답니다. -rectMode__params__mode = 상수：CORNER, CORNERS, CENTER 또는 RADIUS -smooth__description__0 = 모든 그래픽을 부드럽게 처리하며, 불러온 이미지 또는 크기가 재조정된 이미지의 화질을 향상합니다. smooth()는 2D 모드상 언제나 기본값으로 활성화되며. 따라서, noSmooth() 함수를 호출해야만 도형, 이미지, 폰트 등의 부드러운 그래픽 처리를 비활성화할 수 있습니다. 반면, 3D 모드에서는 noSmooth()가 기본값으로 활성화됩니다. 따라서, smooth() 함수를 호출해야만 부드러운 그래픽 처리가 가능합니다. -strokeCap__description__0 = 선의 양끝에 대한 렌더링 스타일을 설정합니다. 선의 양끝은 매개변수 SQAURE로 각지게, PROJECT로 조금 더 길게, 그리고 ROUND로 둥글게 처리될 수 있습니다. 이 중에서 ROUND는 기본값으로 적용됩니다. -strokeCap__description__1 = The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language. -strokeCap__params__cap = 상수：SQUARE, PROJECT 또는 ROUND -strokeJoin__description__0 = 두 선분 간의 이음새에 대한 스타일을 설정합니다. 이음새는 매개변수 MITER로 각지게, BEVEL로 베벨 처리되듯 비스듬히 깎인 형태로, ROUND로 둥글게 처리될 수 있습니다. 이 중에서 MITER는 기본값으로 적용됩니다. -strokeJoin__description__1 = The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language. -strokeJoin__params__join = 상수：MITER, BEVEL 또는 ROUND -strokeWeight__description__0 = 선, 점, 그리고 도형 윤곽선을 그릴 때 쓰이는 함수인 stroke()의 결과값 두께를 설정합니다. 모든 두께는 픽셀 단위로 지정됩니다. -strokeWeight__params__weight = 숫자：선의 두께 (픽셀 단위) -bezier__description__0 = 화면에 3차 베지에 곡선을 그립니다. 베지에 곡선은 일련의 고정점 및 제어점들로 정의됩니다. 처음 두 매개변수는 1번째 고정점을, 마지막 두 매개변수는 마지막 고정점을 지정합니다. 중간의 두 매개변수는 두 개의 제어점을 지정하며, 이는 곧 곡선의 모양을 정의하게 됩니다. 여기서 제어점은 그 자신을 향해 곡선을 당기는 역할을 합니다. -bezier__description__1 = 베지에 곡선은 프랑스 출신 자동차 엔지니어인 피에르 베지에(Pierre Bezier)가 개발하였으며, 컴퓨터 그래픽상 부드럽게 경사진 곡선을 정의하는 데에 주로 사용됩니다. curve() 함수와도 관련있습니다. -bezier__params__x1 = 숫자: 1번째 고정점의 x좌표값 -bezier__params__y1 = 숫자: 1번째 고정점의 y좌표값 -bezier__params__x2 = 숫자: 1번째 제어점의 x좌표값 -bezier__params__y2 = 숫자: 1번째 제어점의 y좌표값 -bezier__params__x3 = 숫자: 2번째 제어점의 x좌표값 -bezier__params__y3 = 숫자: 2번째 제어점의 y좌표값 -bezier__params__x4 = 숫자: 2번째 고정점의 x좌표값 -bezier__params__y4 = 숫자: 2번째 고정점의 y좌표값 -bezier__params__z1 = 숫자: 1번째 고정점의 z좌표값 -bezier__params__z2 = 숫자: 1번째 제어점의 z좌표값 -bezier__params__z3 = 숫자: 2번째 제어점의 z좌표값 -bezier__params__z4 = 숫자: 2번째 고정점의 z좌표값 -bezierDetail__description__0 = 베지에 곡선들의 해상도를 설정합니다. 기본값은 20입니다. -bezierDetail__description__1 = 이 함수는 WebGL 렌더러용으로만 사용되며, 기본 캔버스 렌더러에서는 이 함수를 사용하지 않습니다. -bezierDetail__params__detail = 숫자: 곡선들의 해상도값 -bezierPoint__description__0 = 점 a, b, c, d로 정의된 베지에 곡선에서 위치 t를 계산합니다. 매개변수 a와 d는 각각 곡선의 1번째 점과 마지막 점에, b와 c는 제어점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다. 함수는 먼저 x좌표를 호출한 다음, y좌표를 호출하여 위치 t를 찾게됩니다. -bezierPoint__returns = 숫자: 위치 t에 해당하는 베지에 곡선의 값 -bezierPoint__params__a = 숫자: 곡선의 1번째 점 좌표값 -bezierPoint__params__b = 숫자: 1번째 제어점 좌표값 -bezierPoint__params__c = 숫자: 2번째 제어점 좌표값 -bezierPoint__params__d = 숫자: 곡선의 2번째 점 좌표값 -bezierPoint__params__t = 숫자: 0과 1 사이의 값 -bezierTangent__description__0 = 위치 t에서 곡선의 점 a, b, c, d에 대한 탄젠트를 계산합니다. 매개변수 a와 d는 각각 곡선의 1번째 점과 마지막 점에, b와 c는 제어점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다. -bezierTangent__returns = 숫자: 위치 t에 해당하는 탄젠트 -bezierTangent__params__a = 숫자: 곡선의 1번째 점 좌표값 -bezierTangent__params__b = 숫자: 1번째 제어점 좌표값 -bezierTangent__params__c = 숫자: 2번째 제어점 좌표값 -bezierTangent__params__d = 숫자: 곡선의 2번째 점 좌표값 -bezierTangent__params__t = 숫자: 0과 1 사이의 값 -curve__description__0 = 화면에 두 점 사이에 위치한 곡선을 그립니다. 이 때, 곡선의 형태는 함수의 매개변수들 중 가운데 네 개를 통해 정의됩니다. 처음 두 매개변수는 1번째 제어점의 좌표값을 지정하는데, 마치 이 제어점에서 곡선이 비롯된 것처럼 보이게 됩니다. 마지막 두 매개변수들은 마찬가지 원리로 또다른 제어점의 좌표를 지정합니다. curve() 함수를 조합하거나 curveVertex()를 사용하여 좀 더 긴 곡선을 만들 수 있습니다. 부가적으로, curveTightness()을 통해 곡선의 화질을 조절할 수 있습니다. curve() 함수는 캣멀롬 스플라인(Catmull-Rom Spline)을 구현합니다. -curve__params__x1 = 숫자: 최초 제어점의 x좌표값 -curve__params__y1 = 숫자: 최초 제어점의 y좌표값 -curve__params__x2 = 숫자: 1번째 점의 y좌표값 -curve__params__y2 = 숫자: 2번째 점의 x좌표값 -curve__params__x3 = 숫자: 마지막 제어점의 x좌표값 -curve__params__y3 = 숫자: 마지막 제어점의 y좌표값 -curve__params__x4 = 숫자: 1번째 점의 z좌표값 -curve__params__y4 = 숫자: 2번째 점의 z좌표값 -curve__params__z1 = 숫자: 1번째 점의 x좌표값 -curve__params__z2 = 숫자: 2번째 점의 y좌표값 -curve__params__z3 = 숫자: 최초 제어점의 z좌표값 -curve__params__z4 = 숫자: 마지막 제어점의 z좌표값 -curveDetail__description__0 = 곡선들의 해상도를 설정합니다.
    기본값은 20이고, 최소값은 3입니다. -curveDetail__description__1 = 이 함수는 WebGL 렌더러용으로만 사용되며, 기본 캔버스 렌더러에서는 이 함수를 사용하지 않습니다. -curveDetail__description__2 = -curveDetail__params__resolution = 숫자: 곡선들의 해상도값 -curveTightness__description__0 = curve()와 curveVertex() 함수를 사용하여 모양을 변경합니다. 곡선의 팽팽함(tightness)을 지정하는 매개변수 t는, 두 꼭짓점 사이에 곡선이 들어맞는 정도를 결정합니다. 값 0.0은 곡선의 팽팽함에 대한 기본값이며(이 값을 통해 곡선을 캣멀롬 스플라인으로 정의), 값 1.0은 모든 점을 직선 상태로 연결하게 됩니다. -5.0와 5.0 사이의 값들은 화면상 인식 가능한 범위 내에서 값의 크기에 비례하여 곡선을 변형합니다. -curveTightness__params__amount = 숫자: 원래 꼭짓점으로부터 변형된 정도의 양 -curvePoint__description__0 = 점 a, b, c, d로 정의된 곡선에서 위치 t를 계산합니다. 매개변수 a와 d는 곡선의 제어점에, b와 c는 각각 곡선의 시작점과 끝점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다. 함수는 먼저 x좌표를 호출한 다음, y좌표를 호출하여 위치 t를 찾게됩니다. -curvePoint__returns = 숫자: 위치 t에 해당하는 베지어값 -curvePoint__params__a = 숫자: 곡선의 1번째 제어점 좌표값 -curvePoint__params__b = 숫자: 1번째 점 좌표값 -curvePoint__params__c = 숫자: 2번째 점 좌표값 -curvePoint__params__d = 숫자: 곡선의 2번째 제어점 좌표값 -curvePoint__params__t = 숫자: 0과 1 사이의 값 -curveTangent__description__0 = 위치 t에서 곡선의 점 a, b, c, d에 대한 탄젠트를 계산합니다. 매개변수 a와 d는 각각 곡선 위 점에, b와 c는 제어점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다. -curveTangent__returns = 숫자: 위치 t에 해당하는 탄젠트 -curveTangent__params__a = 숫자: 곡선의 1번째 점 좌표값 -curveTangent__params__b = 숫자: 1번째 제어점 좌표값 -curveTangent__params__c = 숫자: 2번째 제어점 좌표값 -curveTangent__params__d = 숫자: 곡선의 2번째 점 좌표값 -curveTangent__params__t = 숫자: 0과 1 사이의 값 -beginContour__description__0 = beginContour()와 endContour() 함수를 사용하여 특정 도형 내부에 그 음수 좌표에 상응하는 동일한 도형 윤곽선을 그릴 수 있습니다. 예를 들어, 동그라미의 안쪽에 또다른 작은 동그라미를 그릴 수 있습니다. beginContour()는 도형의 꼭짓점을 기록하기 시작하고, endContour()는 그 기록을 중지합니다. 이 때, 안쪽의 도형을 정의하는 꼭짓점은 바깥쪽의 도형과 반대 순서로 그려져야 합니다. 먼저 바깥에 위치한 원래 도형의 꼭짓점을 시계 방향으로 그리고, 그 다음 내부의 도형을 시계 반대 방향으로 그립니다. -beginContour__description__1 = beginContour()/endContour() 함수는 반드시 beginShape()//Shape">endShape() 함수 사이에 작성되어야 합니다. 또한, beingContour()/endContour() 함수 사이에는 translate(), rotate(), scale()과 같은 변형 함수나 ellipse() 및 rect()와 같은 도형그리기 함수가 사용될 수 없습니다. -beginContour__description__2 = -beginShape__description__0 = beginShape()과 endShape()를 사용하여 좀 더 복잡한 모양을 만들 수 있습니다. beingShape()은 도형의 꼭짓점을 기록하기 시작하고, endShape()은 그 기록을 중지합니다. 함수의 매개변수를 통해 꼭짓점으로 어떤 도형을 그릴지 결정할 수 있습니다. 별도의 매개변수가 지정되지 않으면, 비정형의 다각형이 그려집니다. -beginShape__description__1 = beginShape()에 쓰이는 매개변수로는 POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, 그리고 TESS(WebGL 전용)가 있습니다. beginShape() 함수를 호출한 다음, 꼭짓점 지정을 위해 vertex() 명령문을 반드시 작성해야 합니다. 도형그리기를 멈추려면 endShape() 함수를 호출하면 됩니다. 각 도형은 현재 지정된 선그리기(stroke) 및 면채우기(fill) 색상으로 그려집니다. -beginShape__description__2 = beginShape()와 endShape() 함수들 사이에는 translate(), rotate(), scale()과 같은 변형 함수나 ellipse(), rect()와 같은 도형그리기 함수를 사용할 수 없습니다. -beginShape__description__3 = LINES - 여려 개의 분리 된 선들을 그립니다. -beginShape__description__4 = TRIANGLES - 여러 개의 분리 된 삼각형들을 그립니다. -beginShape__description__5 = TRIANGLE_FAN - 여러 개의 연결 된 삼각형들을 그립니다. 이 삼각형들은 첫 꼭짓점을 공통적으로 하며 부채 모양으로 그려집니다. -beginShape__description__6 = TRIANGLE_STRIP - 여러 개의 연결 된 삼각형들을 그립니다. 이 삼각형들은 한 줄로 그려집니다. -beginShape__description__7 = QUADS - 여러 개의 분리 된 사각형들을 그립니다. -beginShape__description__8 = QUAD_STRIP - 여러 개의 연결 된 사각형들을 한 줄로 그립니다. -beginShape__description__9 = TESS (WebGl만 가능) - 모자이크 세공 (tessellation)을 위한 불규칙적 도형을 그립니다. -beginShape__description__10 = beginShape() 함수는 호출할 시, 이후에 여러 개의 vertex() 명령들을 호출해야 합니다.그림 그리기를 멈추려면 endShape() 함수를 호출합니다. 각 도형은 현재의 윤곽선 색으로 그려지며, 면은 현재의 면 색으로 채워집니다. -beginShape__description__11 = translate(), rotate(), 또는 scale()와 같은 변형 함수들은 beginShape() 함수 안에서 사용할 수 없습니다. 또한, ellipse()와 rect() 같은 함수들을 beginShape() 함수 안에서 사용할 수 없습니다. -beginShape__params__kind = 상수: (선택 사항) POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS 또는 QUAD_STRIP -bezierVertex__description__0 = 베지에 곡선의 꼭짓점 좌표를 지정합니다. bezierVertex()은 매 호출마다 베지에 곡선의 제어점 2개와 고정점 1개의 위치를 정의하고, 이 새로운 선분을 선 또는 도형에 더합니다. bezierVertex()는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 6개의 매개변수가, 3D 모드에서는 9개의 매개변수(z좌표값 포함)가 필요합니다. -bezierVertex__description__1 = beginShape() 함수 안에 작성된 bezierVertex()를 호출하기에 앞서, vertex() 함수를 bezierVertex() 윗줄에 작성하여 곡선의 1번째 고정점을 설정해야 합니다. bezierVertex() 함수는 반드시 beginShape()//Shape">endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다. -bezierVertex__params__x2 = 숫자: 1번째 제어점의 x좌표값 -bezierVertex__params__y2 = 숫자: 1번째 제어점의 y좌표값 -bezierVertex__params__x3 = 숫자: 2번째 제어점의 x좌표값 -bezierVertex__params__y3 = 숫자: 2번째 제어점의 y좌표값 -bezierVertex__params__x4 = 숫자: 고정점의 x좌표값 -bezierVertex__params__y4 = 숫자: 고정점의 y좌표값 -bezierVertex__params__z2 = 숫자: 1번째 제어점의 z좌표값 (WebGL 모드용) -bezierVertex__params__z3 = 숫자: 2번째 제어점의 z좌표값 (WebGL 모드용) -bezierVertex__params__z4 = 숫자: 고정점의 z좌표값 (WebGL 모드용) -curveVertex__description__0 = 곡선의 꼭짓점 좌표를 지정합니다. 이 함수는 반드시 beginShape()//Shape">endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다. 또한, 이 함수는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 2개의 매개변수가, 3D 모드에서는 3개의 매개변수가 필요합니다. -curveVertex__description__1 = curveVertex()로 그려진 일련의 선들 중 1번째 점과 마지막 점을 통해 각각 전체 곡선의 시작점과 끝점을 알 수 있습니다. 2번째와 3번째 사이에도 작은 곡선을 만들기 위해선 최소 4개의 점들이 필요합니다. curveVertex() 함수로 5번째 점을 추가하면 함수는 2번째, 3번째, 4번째 점들 사이에 곡선을 그립니다. curveVertex() 함수는 캣멀롬 스플라인(Catmull-Rom Spline)을 구현합니다. -curveVertex__params__x = 숫자: 꼭짓점의 x좌표값 -curveVertex__params__y = 숫자: 꼭짓점의 y좌표값 -curveVertex__params__z = 숫자: (선택 사항) 꼭짓점의 z좌표값 (WebGL 모드용) -endContour__description__0 = beginContour()와 endContour() 함수를 사용하여 특정 도형 내부에 그 음수 좌표에 상응하는 동일한 도형 윤곽선을 그릴 수 있습니다. 예를 들어, 동그라미의 안쪽에 또다른 작은 동그라미를 그릴 수 있습니다. beginContour()는 도형의 꼭짓점을 기록하기 시작하고, endContour()는 그 기록을 중지합니다. 이 때, 안쪽의 도형을 정의하는 꼭짓점은 바깥쪽의 도형과 반대 순서로 그려져야 합니다. 먼저 바깥에 위치한 원래 도형의 꼭짓점을 시계 방향으로 그리고, 그 다음 내부의 도형을 시계 반대 방향으로 그립니다. -endContour__description__1 = beginContour()/endContour() 함수는 반드시 beginShape()//Shape">endShape() 함수 사이에 작성되어야 합니다. 또한, beingContour()/endContour() 함수 사이에는 translate(), rotate(), scale()과 같은 변형 함수나 ellipse() 및 rect()와 같은 도형그리기 함수가 사용될 수 없습니다. -endShape__description__0 = endShape()은 beginShape()과 한 쌍을 이루는 함수로, 반드시 beginShape() 다음에 호출될 수 있습니다. endShape() 함수가 호출되면, beginShape() 함수가 호출된 이래로 정의된 모든 이미지 데이터가이미지 버퍼로서 처리됩니다. endShape()의 MODE 매개변수로는 상수 CLOSE를 씁니다. -endShape__params__mode = 상수: CLOSE로 도형 닫기 -quadraticVertex__description__0 = 2차 베지에 곡선의 꼭짓점 좌표를 지정합니다. quadraticVertex()은 매 호출마다 베지에 곡선의 제어점 1개와 고정점 1개의 위치를 정의하고, 이 새로운 선분을 선 또는 도형에 더합니다. beginShape() 함수 안에 작성된 quadraticVertex()를 호출하기에 앞서, vertex() 함수를 quadraticVertex() 윗줄에 작성하여 곡선의 1번째 고정점을 설정해야 합니다. quadraticVertex()는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 6개의 매개변수가, 3D 모드에서는 9개의 매개변수(z좌표값 포함)가 필요합니다. -quadraticVertex__description__1 = quadraticVertex() 함수는 반드시 beginShape()//Shape">endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다. -quadraticVertex__params__cx = 숫자: 제어점의 x좌표값 -quadraticVertex__params__cy = 숫자: 제어점의 y좌표값 -quadraticVertex__params__x3 = 숫자: 고정점의 y좌표값 -quadraticVertex__params__y3 = 숫자: 제어점의 z좌표값 (WebGL 모드용) -quadraticVertex__params__cz = 숫자: 고정점의 x좌표값 -quadraticVertex__params__z3 = 숫자: 고정점의 z좌표값 (WebGL 모드용) -vertex__description__0 = 모든 도형들은 꼭짓점 연결을 통해 구축됩니다. vertex() 함수를 사용하여 점, 선, 삼각형, 사각형, 그리고 다각형의 꼭짓점 좌표를 지정할 수 있습니다.는 데에 쓰입니다. 이 때, vertex() 함수는 반드시 beginShape()//Shape">endShape() 함수 사이에 작성되어야합니다. -vertex__params__x = 숫자: 꼭짓점의 x좌표값 -vertex__params__y = 숫자: 꼭짓점의 y좌표값 -vertex__params__z = 숫자: 꼭짓점의 z좌표값 -vertex__params__u = 숫자: (선택 사항) 꼭짓점의 u좌표값 -vertex__params__v = 숫자: (선택 사항) 꼭짓점의 v좌표값 -normal__description__0 = 이후에 vertex() 함수로 그려질 꼭짓점들을 위한 3D 꼭짓점의 노멀 (normal)을 설정합니다. 도형의 면에 수직방향이 노멀 벡터이며, 이는 빛의 반사량을 지정합니다. -normal__params__vector = 벡터: 노멀을 표시하는 p5.Vector. -normal__params__x = 숫자: 꼭짓점의 x좌표값 -normal__params__y = 숫자: 꼭짓점의 y좌표값 -normal__params__z = 숫자: 꼭짓점의 z좌표값 -VERSION__description__0 = 본 p5.js 버전. -P2D__description__0 = 기본적 이차원적 렌더러 (2D Renderer). -WEBGL__description__0 = p5.js의 렌더 모드들 중 하나: P2D (기본)와 WEBGL. WEBGL은 제 3의 차원, 'Z'를 추가함으로서 3D 렌더를 가능하게 합니다. -HALF_PI__description__0 = HALF_PI는 1.57079632679489661923 값을 갖는 상수입니다. 지름에 대한 원주율의 절반에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다. -PI__description__0 = PI는 3.14159265358979323846 값을 갖는 상수입니다. 지름에 대한 원주율을 의미하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다. -QUARTER_PI__description__0 = QUARTER_PI는 0.7853982 값을 갖는 상수입니다. 지름에 대한 원주율의 1/4에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다. -TAU__description__0 = TAU는 TWO_PI의 약어로, 이는 6.28318530717958647693 값을 갖는 상수입니다. 지름에 대한 원주율의 2배에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다. -TWO_PI__description__0 = TWO_PI는6.28318530717958647693 값을 갖는 상수입니다. 지름에 대한 원주율의 2배에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다. -DEGREES__description__0 = p5.js가 각도를 해석하고 계산하는 방법을 설정하기 위해, angleMode() 함수와 그 매개변수(DEGREES 또는 RADIANS)를 사용합니다. -RADIANS__description__0 = p5.js가 각도를 해석하고 계산하는 방법을 설정하기 위해, angleMode() 함수와 그 매개변수(DEGREES 또는 RADIANS)를 사용합니다. -HSB__description__0 = HSB (색도, 채도값, 발기)는 색상 모델의 일종입니다. 이 링크를 통해 더 자세히 배울 수 있습니. -AUTO__description__0 = AUTO는 특정 요소의 높이나 너비 (둘 중 하나)를 그 요소의 너비나 높이에 따라 자동적으로 정할 수 있게 합니다. 따라서 size()에 AUTO를 지정할 수 있는 매개변수는 1 개로 제한됩니다. -print__description__0 = print() 함수는 브라우저 콘솔창에 출력할 때 사용됩니다. 프로그램이 생성하는 데이터를 확인할 때 주로 도움됩니다. 함수는 매번 호출될 때마다 콘솔창에 새로운 텍스트 줄을 만듭니다. 개별 요소는 큰따옴표로 분리하고, 더하기 연산자(+)로 두 요소를 결합할 수 있습니다. -print__description__1 = - 인수없이 print()를 호출하면, window.print()와 동일하게 브라우저상 인쇄 기능을 켭니다. 콘솔창에 빈 줄을 출력하려면 print(' - ')을 작성하면 됩니다. -print__params__contents = 전부: 출력할 숫자, 문자열, 객체, 불리언, 배열의 조합 -frameCount__description__0 = 시스템 변수 frameCount는 프로그램 시작 이후 화면에 나타난 프레임의 개수를 측정합니다. setup() 함수의 기본값은 0이고, draw() 함수의 첫 번째 반복 실행이 마치면 1씩 증가하는 식입니다. -deltaTime__description__0 = deltaTime 은 전 프레임의 시작 시간과 본 프레임의 시작 시간의 차를 저장합니다. -deltaTime__description__1 = 이 변수는 시간적으로 민감한 애니매시션, 또는 프레임레이트와 관계없이 일정해야 하는 물리학적 계산에 유용합니다. -focused__description__0 = p5.js 프로그램이 등장하는 화면창의 초점이 맞는지 여부를 확인하며, 이는 곧 스케치가 마우스나 키보드 입력을 허용한다는 것을 의미합니다. 화면창의 초점이 맞으면 변수는 true이고, 그렇지 않으면 false입니다. -cursor__description__0 = 마우스 커서를 사전에 정의된 기호나 이미지로 설정하거나, 숨김 상태일 경우 이를 해제합니다. 특정 이미지를 커서로 설정할 경우, 권장 사이즈는 16x16 또는 32x32 입니다. 매개변수 x와 y의 값은 이미지의 실제 크기보다 훨씬 더 작아야 합니다. -cursor__params__type = 문자열|상수: ARROW, CROSS, HAND, MOVE, TEXT, WAIT. CSS 요소인 'grab', 'progress', 'cell' 등. 외부: 커서 이미지의 경로(허용 파일 확장자:.cur, .gif, .jpg, .jpeg, .png, url 주소. 참고: https://developer.mozilla.org/ko/docs/Web/CSS/cursor -cursor__params__x = 숫자: (선택 사항) 커서의 수평 활성 지점 (32미만으로 지정) -cursor__params__y = 숫자: (선택 사항) 커서의 수직 활성 지점 (32미만으로 지정) -frameRate__description__0 = 화면에 나타날 프레임 수를 매 초단위로 지정합니다. 예를 들어, frameRate(30)은 초당 30회씩 새로 고침을 시도합니다. 프로세서가 지정된 속도를 유지할만큼 빠르지 않다면, 프레임 속도에 달성되지 않습니다. setup() 함수 내에서 프레임 속도를 설정하는 것을 권장합니다. 기본값으로 제공되는 프레임 속도는 디스플레이의 프레임 속도('새로 고침 빈도')를 기준으로 합니다. 초당 24 프레임 정도면 애니메이션을 부드럽게 재생할 수 있습니다. 이 함수는 setFrameRate(val)와 동일한 효과를 갖습니다. -frameRate__description__1 = 별도의 인수없이 frameRate() 함수를 호출하면 현재 프레임 속도가 반환됩니다. 프레임 속도를 반환하기 위해서는 draw() 함수를 한 번 이상 실행해야 합니다. 이는 getFrameRate() 함수와도 동일합니다. -frameRate__description__2 = 숫자형이 아니거나 양수가 아닌 숫자형의 인수로 frameRate() 함수를 호출하면 마찬가지로 현재 프레임 속도를 반환합니다. -frameRate__params__fps = 숫자：1초 동안 화면에 나타날 프레임 수 -noCursor__description__0 = 화면상 커서를 숨깁니다. -displayWidth__description__0 = pixelDensity 함수의 기본값에 따라 화면의 너비값을 저장하는 시스템 변수입니다. 모든 디스플레이에서 프로그램을 전체 화면으로 실행시킬 때 사용합니다. 실제 화면 크기값을 반환하려면 여기에 pixelDensity를 곱하면 됩니다. -displayHeight__description__0 = pixelDensity 함수의 기본값에 따라 화면의 높이값을 저장하는 시스템 변수입니다. 모든 디스플레이에서 프로그램을 전체 화면으로 실행시킬 때 사용합니다. 실제 화면 크기값을 반환하려면 여기에 pixelDensity를 곱하면 됩니다. -windowWidth__description__0 = 사용자의 윈도우 화면 너비값을 저장해주는 시스템 변수로, window.innerWidth에 매핑됩니다. -windowHeight__description__0 = 사용자의 윈도우 화면 높이값을 저장해주는 시스템 변수로, window.innerHeight에 매핑됩니다. -windowResized__description__0 = windowResized() 함수는 브라우저 창의 크기가 조정될 때마다 한 번씩 호출됩니다. 캔버스 크기를 재조정하거나 새 윈도우 화면의 크기에 맞춰 조정할 때 유용합니다. -windowResized__params__event = 객체: (선택 사항) 이벤트 콜백 (callback) 인자값. -width__description__0 = 생성된 캔버스의 너비값을 저장하는 시스템 변수입니다. 이 값은 createCanvas() 함수의 1번째 매개변수로 지정됩니다. createCanvas(320, 240)는 너비 변수를 320으로 설정한 사례입니다. 프로그램에 createCanvas()를 사용하지 않을 경우, 너비는 기본값인 100으로 설정됩니다. -height__description__0 = 생성된 캔버스의 높이값을 저장하는 시스템 변수입니다. 이 값은 createCanvas() 함수의 2번째 매개변수로 지정됩니다. createCanvas(320, 240)는 높이 변수를 240으로 설정한 사례입니다. 프로그램에 createCanvas()를 사용하지 않을 경우, 높이는 기본값인 100으로 설정됩니다. -fullscreen__description__0 = 사용자가 지정한 인수값을 기준으로 스케치를 전체 화면으로 설정합니다. 인수를 지정하지 않으면 현재 전체 화면 모드를 반환합니다. 위의 예제는 브라우저 제한으로 인해 마우스 입력과같은 사용자 입력이 있을 때 이 함수를 호출합니다. -fullscreen__returns = 불리언: 현재 전체 화면 상태 -fullscreen__params__val = 불리언: (선택 사항) 스케치를 전체 화면 모드로 실행할 지의 여부 -pixelDensity__description__0 = 픽셀 밀도가 높은 디스플레이의 픽셀 크기를 조정합니다. pixelDensity()는 그 기본값으로 화면의 픽셀 밀도와 일치하도록 설정되어 있으며, pixelDensity(1)를 호출하여 이를 해제할 수 있습니다. 별도의 인수없이 pixelDensity() 함수를 호출하면, 스케치의 현재 픽셀 밀도가 반환됩니다. -pixelDensity__params__val = 숫자: 스케치의 픽셀 크기를 조정할 지 여부 또는 조정값 -displayDensity__description__0 = 스케치가 실행 중인 현재 디스플레이의 픽셀 밀도를 반환합니다. -displayDensity__returns = 숫자: 디스플레이의 현재 픽셀 밀도 -getURL__description__0 = 현재 URL을 받아옵니다. -getURL__returns = 문자열: url -getURLPath__description__0 = 현재 URL 경로를 배열로 받아옵니다. -getURLPath__returns = 문자열 배열[]：경로 요소의 배열 -getURLParams__description__0 = 현재 URL 매개변수들을 객체로 받아옵니다. -getURLParams__returns = 객체: URL 매개변수들 -preload__description__0 = preload() 함수는 setup() 함수 직전에 호출되며, 외부 파일의 비동기 불러오기를 차단하기 위해 사용됩니다. preload() 함수로 외부 파일 사전 불러오기가 설정되면, setup() 함수는 불러오기 호출이 완료될 때까지 대기합니다. 불러오기 호출 이외의 다른 함수(loadImage, loadJOSN, loadFont, loadString)는 preload() 함수 안에 포함되지 않아야 합니다. 만약 비동기 불러오기를 선호한다면, 불러오기 메소드를 setup() 함수 안에 포함시키거나, 그 외의 영역에서 callback 매개변수를 사용하여 호출하면 됩니다. -preload__description__1 = 기본값으로 'loading..'이라는 텍스트가 화면에 나타납니다. 나만의 로딩 페이지를 만들려면 id가 p5_loading으로 지정된 HTML 요소를 추가하면 됩니다. 자세한 정보는 여기에 있습니다. -setup__description__0 = setup() 함수는 프로그램 실행시 단 한번 호출됩니다. 함수는 화면 크기나 배경색 등의 초기 환경 요소를 정의하고, 또 이미지나 폰트같은 미디어 파일을 불러오는 데에 쓰입니다. setup() 함수는 프로그램당 한 개씩만 존재할 수 있으며, 최초 한 번 실행된 이후에는 재호출되지 않아야 합니다. -setup__description__1 = 참고: setup() 함수 안에 선언된 변수는, draw() 함수를 비롯한 여타 함수들이 접근할 수 없습니다. -setup__description__2 = -draw__description__0 = draw() 함수는 setup() 함수 직후에 호출되며, 프로그램 실행이 중단되거나 noLoop() 함수가 호출되기 전까지 블록 내에 포함된 코드들을 계속 실행합니다. 만약 setup() 함수에서 noLoop()가 호출된다면, draw() 함수는 단 한 번 실행됩니다. draw() 함수는 자동으로 호출되며, 명시적으로 호출하면 안됩니다. -draw__description__1 = draw() 함수는 항상 noLoop(), redraw(), 그리고 loop() 함수로 제어됩니다. noLoop()함수가 draw() 함수에 포함된 코드 실행을 멈추면, redraw() 함수가 draw() 함수 안에 포함된 코드들을 한 번만 실행하게 됩니다. loop() 함수의 경우, draw() 함수 안에 있는 코드를 계속해서 반복적으로 실행되게 합니다. -draw__description__2 = draw() 함수가 초당 호출되는 횟수는 frameRate() 함수를 통해 조정할 수 있습니다. -draw__description__3 = draw() 함수는 한 스케치당 한 번만 작성되어야 하며, 코드를 계속 실행하거나 mousePressed()와 같은 이벤트를 처리할 때 반드시 필요합니다. 때로는 위의 예제처럼 비어있는 draw() 함수를 호출하기도 합니다. -draw__description__4 = 드로잉의 좌표계가 매 draw() 함수가 호출될 때마다 리셋되는 점에 유의해야 합니다. draw() 함수 안에서 변형 함수(scale, rotate, translate)가 실행될 경우, draw() 함수가 재호출되는 시점에 그 효과들은 무효화되고, 따라서 시간이 지나도 변형 내용이 누적되지 않습니다. 반면, 한 번 선언된 스타일(fill, stroke 등)은 계속해서 적용됩니다. -remove__description__0 = 전체 p5 스케치를 제거합니다. 이 함수는 캔버스와 p5.js로 생성한 모든 요소들을 제거합니다. 또한, 그리기 반복(draw loop)를 중지하고, 윈도우 전역 범위에서 선언된 속성이나 메소드의 구속력을 해제합니다. 새로운 p5 스케치를 만들고자 할 경우에는 변수 p5를 남겨둡니다. 원한다면 p5 = null로 처리하여 이를 제거할 수 있습니다. p5 라이브러리로 생성한 모든 함수, 변수, 그리고 객체가 제거되지만, 사용자가 코드로 생성한 여타 전역 변수들은 그대로 유지됩니다. -disableFriendlyErrors__description__0 = 스케치를 만드는 동안 '친근한 에러 시스템 (Friendly Error System, FES)'을 필요시 비활성화하여 성능을 향상시킵니다. 친근한 에러 시스템 비활성화하기에 더 자세히 기록되어 있습니다. -let__description__0 = 새로운 변수를 생성하고 그 이름을 지정합니다. 변수는 값을 담는 컨테이너입니다. -let__description__1 = let으로 선언된 변수는 블록 단위의 적용 범위를 갖습니다. 즉, 변수가 작성된 블록 내에서만 존재하고 사용될 수 있음을 뜻합니다. -let__description__2 = MDN Entry에서 발췌: 블록 범위의 지역 변수를 선언하고, 선택적으로 그 값을 초기화합니다. -const__description__0 = 새로운 상수를 생성하고 그 이름을 지정합니다. 마치 let으로 생성된 변수처럼, const로 생성된 상수는 값을 담는 컨테이너입니다. 하지만, 상수는 한 번 산언된 다음 변경할 수 없습니다. -const__description__1 = const로 선언된 상수는 블록 단위의 적용 범위를 갖습니다. 즉, 상수가 작성된 블록 내에서만 존재하고 사용될 수 있음을 뜻합니다. 상수는 자신이 존재하고 있는 범위 내에서 재선언될 수 없습니다. -const__description__2 = MDN Entry에서 발췌: 읽기만 가능한 상수를 선언합니다. const는 블록 단위로 적용되며, let으로 선언된 변수들과 유사합니다. 상수값은 재지정을 통해 변경될 수 없으며, 재선언될 수 없습니다. -===__description__0 = 완전 항등 연산자 '===' 는 두 값이 같으면서 동시에 동일한 유형인지 여부를 확인합니다. -===__description__1 = 비교 표현식은 항상 불리언으로 연산됩니다. -===__description__2 = MDN Entry에서 발췌: 이 연산자는 피연산자들이 동일한 값이 아니고/또는 동일한 유형이 아닐 때 참(true)을 반환합니다. -===__description__3 = 웹상의 몇몇 예제에서 피연산자 간의 비교를 위해 이중 등호(==)를 사용하는 것을 볼 수 있습니다. 이는 자바스크립트상의 완전 항등 연산자(===)에 해당하지 않으며, 두 피연산자의 값들을 비교하기에 앞서, 그 유형이 동일한지의 여부를 비교하게 됩니다. ->__description__0 = 비교 연산자 > 는 왼쪽 값이 오른쪽 값보다 큰 경우 참(true)으로 연산합니다. ->__description__1 = MDN 발췌 비교 연산자 상세 설명은 여기에 있습니다. ->=__description__0 = 비교 연산자 >= 는 왼쪽 값이 오른쪽 값보다 크거나 같은 경우 참(true)로 연산합니다. ->=__description__1 = MDN 발췌 비교 연산자 상세 설명은 여기에 있습니다. ->=__description__2 = -<__description__0 = 비교 연산자 < 는 왼쪽 값이 오른쪽 값보다 작은 경우 참(true)으로 연산합니다. -<__description__1 = MDN 발췌 비교 연산자 상세 설명은 여기에 있습니다. -<__description__2 = -<=__description__0 = 비교 연산자 <= 는 왼쪽 값이 오른쪽 값보다 작거나 같은 경우 참(true)로 연산합니다. -<=__description__1 = MDN 발췌 비교 연산자 상세 설명은 여기에 있습니다. -if-else__description__0 = if-else문으로 코드의 흐름을 제어할 수 있습니다. -if-else__description__1 = 'if' 바로 다음 괄호 안에 조건을 지정할 수 있으며, 조건이 참(truthy)으로 연산되면 뒤따른 중괄호 사이의 코드가 실행됩니다. 조건이 거짓(falsy)으로 연산되면 'else' 뒤에 오는 중괄호 사이의 코드가 대신 실행됩니다. -if-else__description__2 = MDN Entry에서 발췌: 지정된 조건이 참일 경우, if문은 명령문을 실행합니다. 조건이 거짓이면 다른 명령문을 실행할 수 잇습니다. -function__description__0 = 새로운 함수 (function)를 생성하고 함수명을 지정합니다. 함수란, 작업을 수행하는 일련의 명령문을 뜻합니다. -function__description__1 = 선택적으로, 함수는 매개변수를 가질 수 있습니다.매개변수(parameter)란, 특정 함수에만 그 사용 범위가 지정된 변수를 뜻하며 함수 호출시 그 값을 지정할 수 있습니다. -function__description__2 = MDN Entry에서 발췌: 사용자가 지정한 매개변수를 사용하여 함수를 선언합니다. -return__description__0 = 함수가 반환할 값을 지정합니다.
    MDN Entry 발췌 함수(function) 상세 설명 -boolean__description__0 = 불리언 (boolean)은 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 불리언은 참(true) 또는 거짓(false)으로 값을 나타냅니다. -boolean__description__1 = MDN Entry에서 발췌: 불리언은 논리적 개체를 나타내며 참(true) 또는 거짓(false)이라는 두 개의 값만 갖습니다. -boolean__returns = 불리언: 특정 값의 불리언형 표식 -boolean__params__n = 문자열|불리언|숫자|배열[]: 분해할 값 -string__description__0 = 문자열(string)은 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 문자열은 일련의 텍스트 문자들을 뜻하며, 자바스크립트에서 문자열 값은 작은 따옴표나 큰따옴표로 묶여 표현됩니다. -string__description__1 = MDN Entry에서 발췌: 문자열은 텍스트를 나타낼 때 사용하는 일련의 문자들입니다. -number__description__0 = 숫자(number)는 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 숫자는 정수 또는 10진수로 표현됩니다. -number__description__1 = MDN Entry 발췌 숫자(number) 상세 설명은 여기에 있습니다. -object__description__0 = MDN Entry 발췌 객체(object) 기초 설명: 객체(object)는 데이터 그리고/또는 함수의 모음을 뜻합니다. 일반적으로 여러 개의 변수와 함수로 구성됩니다. 변수와 함수가 객체 안에 포함된 경우, 각각을 속성(property)과 메소드(method)라 부릅니다. -class__description__0 = 클래스(class)를 생성하고 그 이름을 지정합니다. 클래스는 객체(object) 생성을 위한 하나의 템플릿입니다. -class__description__1 = MDN Entry에서 발췌: 클래스 선언을 통해 새로운 Class를 생성합니다. 이 때, 새로운 Class의 이름은 프로토타입 기반 상속을 통해 지정됩니다. -for__description__0 = for문을 사용하여 특정 부분의 코드에 대한 반복문(loop)을 만듭니다. -for__description__1 = 'for 반복문 (for loop)'은 괄호 속 3개의 다른 표현식들로 구성되며, 각각의 표현식은 모두 선택 사항입니다. 이 표현식들은 반복 실행(loop)의 횟수를 제어합니다. 1번째 표현식은 반복문의 초기 상태를 설정하는 명령문입니다. 2번째 표현식은 매 반복 실행에 앞서 조건 충족 여부를 확인합니다. 이 표현식이 거짓(false)를 반환하면 반복 실행이 종료됩니다. 3번째 표현식은 반복문의 가장 마지막 단계에 실행됩니다. -for__description__2 = for 반복문의 본문(중괄호 사이의 영역)에 포함된 코드는 2번째와 3번째 표현식의 연산과정 사이에 실행됩니다. -for__description__3 = 여타 반복문과 마찬가지로, for 반복문 역시 반복이 '종료'되는 시점이나, 조건을 더이상 충족하지 않아 거짓(false)으로 연산되는 시점을 명시해야 합니다. 앞서 설명된 2번째 표현식을 통해, for 반복문의 조건이 거짓으로 연산되는 시점을 정할 수 있습니다. for반복문의 조건이 언젠가 거짓으로 처리되는 시점을 지정함으로써, 해당 반복문이 무한으로 실행되지 않도록 처리하기 위함입니다. 그렇지 않으면, 브라우저가 중단될 수 있습니다. -for__description__4 = MDN Entry에서 발췌: for 반복문은 조건이 거짓(false)으로 연산될 때까지 지정된 명령문을 실행합니다. 명령문을 실행한 후에는 조건 충족 여부를 다시 평가하여, 명령문이 최소 1번 실행되도록 합니다. -while__description__0 = while문을 사용하여 특정 부분의 코드에 대한 반복문(loop)을 만듭니다. -while__description__1 = 'while 반복문(while loop)'을 사용하면, 소괄호 속 조건이 거짓(false)이 될 때까지 중괄호 속 본문의 코드가 반복적으로 실행됩니다. for 반복문과 달리, while 반복문은 그 본문 속 코드를 실행하기 앞서 조건 충족 여부를 먼저 확인합니다. 따라서, 최초 실행시 조건이 거짓일 경우, while문 속 본문과 명령문은 절대 실행되지 않습니다. -while__description__2 = 여타 반복문과 마찬가지로, while 반복문 역시 반복이 '종료'되는 시점이나, 조건을 더이상 충족하지 않아 거짓(false)으로 연산되는 시점을 명시해야 합니다. while 반복문의 조건이 언젠가 거짓으로 처리되는 시점을 지정함으로써, 해당 반복문이 무한으로 실행되지 않도록 처리하기 위함입니다. 그렇지 않을 경우, 브라우저가 중단될 수 있습니다. -while__description__3 = MDN Entry에서 발췌: while 반복문은 조건이 참(true)인 경우에 한해 지정된 명령문을 실행합니다. 명령문 실행에 앞서 조건 충족 여부가 평가됩니다. -createCanvas__description__0 = 캔버스를 생성하고 픽셀 단위로 크기를 설정합니다. createCanvas()는 setup() 함수 시작시 단 한 번만 실행되어야 합니다. createCanvas()를 한 번 이상 호출하면 스케치가 예기치 못한 반응을 보일 수 있습니다. 두 개 이상의 캔버스가 필요하다면 createGraphics()를 이용합니다. -createCanvas__description__1 = 설정된 캔버스 사이즈는 시스템 변수인 너비(width)와 높이(height)에 각각 저장됩니다. createCanvas() 함수를 생략하면, 스케치의 크기는 기본값인 100x100 픽셀로 지정됩니다. -createCanvas__description__2 = 캔버스의 위치 지정 방법은 캔버스 위치 지정하기 위키 페이지에 있습니다. -createCanvas__returns = p5.Renderer -createCanvas__params__w = 숫자: 캔버스의 너비값 -createCanvas__params__h = 숫자: 캔버스의 높이값 -createCanvas__params__renderer = 상수: (선택 사항) P2D 또는 WEBGL -resizeCanvas__description__0 = 사용자가 지정한 너비와 높이로 캔버스 크기를 재조정합니다. 이 함수를 사용하면 캔버스는 클리어되며, draw() 함수가 곧바로 호출되어 스케치를 재조정된 크기의 캔버스로 다시 렌더링되게 합니다. -resizeCanvas__params__w = 숫자: 캔버스의 너비값 -resizeCanvas__params__h = 숫자: 캔버스의 높이값 -resizeCanvas__params__noRedraw = 불리언: (선택 사항) 캔버스를 곧바로 다시 그리지 않도록 처리할지의 여부 -noCanvas__description__0 = 캔버스가 불필요한 p5 스케치를 위해 기본적으로 제공되는 캔버스를 제거합니다. -createGraphics__description__0 = 새로운 p5.Renderer 객체를 생성하고 반환합니다. 화면 밖 그래픽 버퍼(off-screen graphic buffer)에 그리려면 이 클래스를 사용합니다. 2개의 매개변수는 너비와 높이를 픽셀 단위로 지정합니다. -createGraphics__returns = p5.Graphics: 화면 밖 그래픽 버퍼 -createGraphics__params__w = 숫자: 화면 밖 그래픽 버퍼의 너비값 -createGraphics__params__h = 숫자: 화면 밖 그래픽 버퍼의 높이값 -createGraphics__params__renderer = 상수：P2D 또는 WEBGL, 기본값은 P2D -blendMode__description__0 = 사용자가 지정한 모드에 따라 디스플레이 화면상의 픽셀들을 혼합합니다. 소스 픽셀 (A)를 디스플레이 화면 (B)상에 있는 픽셀과 혼합하기 위해 다음 모드를 선택할 수 있습니다:
    • BLEND - 색상 선형 보간:C = (A)*계수 + (B). 기본 혼합 모드입니다.
    • ADD - (A)와 (B)의 합
    • DARKEST - 가장 어두운 색상만 혼합됩니다：C = min(A*계수, B).
    • LIGHTEST - 가장 밝은 색상만 혼합됩니다.：C = max(A*계수, B).
    • DIFFERENCE - 기본 이미지에서 색상값을 뺄셈합니다.
    • EXCLUSION - DIFFERENCE와 유사하지만 덜 극적입니다.
    • MULTIPLY - 색상을 곱하는 것으로, 결과값은 좀 더 어둡습니다.
    • SCREEN - MULTIPLY와 반대로 색상의 반전된 값을 사용합니다.
    • REPLACE - 픽셀이 다른 픽셀을 완전히 대체하며 알파값(투명도)를 사용하지 않습니다.
    • OVERLAY - MULTIPLY와 SCREEN의 혼합으로, 어두운 값을 곱하고 밝은 값의 반전된 값을 사용합니다. (2D)
    • HARD_LIGHT - 회색값이 50%보다 높으면 SCREEN로, 낮으면 MULTIPLY로 처리합니다. (2D)
    • SOFT_LIGHT - DARKEST와 LIGHTEST 혼합으로, OVERLAY처럼 작동하나 덜 강합니다. (2D)
    • DODGE - 밝은 색조를 더 밝게 처리하고 대비를 높이며, 어두운 영역은 무시합니다. (2D)
    • BURN - 어두운 영역이 적용되어 대비가 증가하고 밝기는 무시됩니다. (2D)
    • SUBTRACT - (A)와 (B)의 나머지(3D)
    -blendMode__description__1 = (2D)는 2D 렌더러에서만 작동하는 혼합 모드를 뜻합니다. -blendMode__description__2 = (3D)는 WEBGL 렌더러에서만 작동하는 혼합 모드를 뜻합니다. -blendMode__description__3 = -blendMode__params__mode = 상수：캔버스에 설정되는 혼합 모드. BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE 또는 SUBTRACT 중 하나 -drawingContext__description__0 = p5.js API는 다양한 그래픽 제작 기능들을 제공하지만, p5에 노출되지 않는 HTML5 고유의 캔버스 기능이 있습니다. 그러한 기능들은 예제처럼 drawingContext 변수를 사용하여 직접 호출할 수 있습니다. 이는 canvas.getContext('2d') 또는 canvas.getContext('webgl') 함수를 호출하는 것과도 같습니다. 호출 가능한 함수는 기본 캔버스 API 레퍼런스에 있습니다. -noLoop__description__0 = p5.js가 draw() 함수 안에 포함된 코드를 계속 실행하지 않도록 합니다. loop() 함수가 호출될 경우, draw() 함수 안의 코드가 다시 계속 실행 됩니다. setup() 함수 안에 noLoop() 함수를 사용할 경우, setup() 함수 블록의 가장 마지막 줄에 작성합니다. -noLoop__description__1 = noLoop()을 사용하면, mousePressed()나 keyPressed()와 같은 이벤트 처리 함수를 통해 화면에 접근하거나 조정할 수 없습니다. 대신, redraw()나 loop() 함수들을 이용하여, 화면 업데이트 함수인 draw()를 재실행시켜 이벤트 처리 함수를 실행할 수 있습니다. 다시 말해, noLoop() 함수가 호출된다는 것은 draw()가 실행되지 않으며, saveFrames()이나 loadPixels()와 같은 함수 역시 사용할 수 없음을 뜻합니다. -noLoop__description__2 = 스케치 크기를 재조정하면, noLoop() 함수가 호출되지 않더라도 redraw()가 호출되어 스케치를 업데이트하는 점에 유의해야 합니다. 그렇지 않으면, 스케치는 loop()가 호출될 때까지 예기치 못한 반응을 보일 수 있습니다. -noLoop__description__3 = loop()의 상태를 확인할 때 isLooping()를 사용합니다. -loop__description__0 = 기본적으로 p5.js는 draw() 함수 안에 포함된 코드를 계속해서 반복 실행(loop)합니다. 하지만 draw() 함수의 반복 실행 기능은 noLoop() 함수를 통해 중단할 수 있습니다. 이때 draw()의 반복 실행 기능은 loop() 함수를 통해 재개할 수 있습니다. -loop__description__1 = setup() 함수 안에서 loop()의 사용을 권장하지 않습니다. -loop__description__2 = loop()의 상태를 확인할 때 isLooping()를 사용합니다. -isLooping__description__0 = 기본적으로 p5.js는 draw() 함수 안에 포함된 코드를 계속해서 반복 실행(loop)합니다. 하지만 draw() 함수의 반복 실행 기능은 noLoop() 함수를 통해 중단할 수 있고 draw()의 반복 실행 기능은 loop() 함수를 통해 재개할 수 있습니다. 이때 isLooping()은 현재 상태를 반환합니다. -push__description__0 = push() 함수는 현재의 드로잉 스타일 설정과 변형을 저장하고, pop() 함수는 이 설정들을 복구합니다. 이 함수들은 항상 함께 쓰이는 점에 유의해야 합니다. 이 함수들을 통해 스타일과 변형 설정을 변경한 뒤에도 이전 설정 상태로 돌아갈 수 있습니다. push()와 pop() 함수들은 설정 사항에 대해 좀 더 많은 권한을 제공합니다. (두 번째 예제를 참고) -push__description__1 = push()는 다음의 함수들을 통해 지정된 현재 변형 상태 및 스타일 설정 사항을 저장합니다: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). -push__description__2 = WebGL 모드에서는 다음의 함수들을 통해 지정된, 더욱 다양한 스타일 설정 사항이 저장될 수 있습니다: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial(), 그리고 shader() -push__description__3 = -push__description__4 = -pop__description__0 = push() 함수는 현재의 드로잉 스타일 설정과 변형을 저장하고, pop() 함수는 이 설정들을 복구합니다. 이 함수들은 항상 함께 쓰이는 점에 유의해야 합니다. 이 함수들을 통해 스타일과 변형 설정을 변경한 뒤에도 이전 설정 상태로 돌아갈 수 있습니다. push()와 pop() 함수들은 설정 사항에 대해 좀 더 많은 권한을 제공합니다. (두 번째 예제.) -pop__description__1 = push()는 다음의 함수들을 통해 지정된 현재 변형 상태 및 스타일 설정 사항을 저장합니다: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). -pop__description__2 = WebGL 모드에서는 다음의 함수들을 통해 지정된, 더욱 다양한 스타일 설정 사항이 저장될 수 있습니다: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial(), 그리고 shader() -pop__description__3 = -pop__description__4 = -redraw__description__0 = draw() 함수 안에 포함된 코드를 한 번 재실행합니다. 이 함수를 통해 필요시에만 화면을 업데이트할 수 있습니다. mousePressed()나 keyPressed()가 지정한 이벤트를 발생시킬 때가 그 예입니다. -redraw__description__1 = 프로그램의 구조를 고려하면, mousePressed()와 같은 이벤트 함수에 redraw()를 호출하는 것이 좋습니다. 이는 redraw()가 draw()함수를 즉각적으로 실행시키지 않기 때문입니다. redraw()는 화면 업데이트가 필요함을 알리는 표식 설정만합니다. -redraw__description__2 = -redraw__description__3 = -redraw__description__4 = -redraw__params__n = 정수: (선택 사항) n번 간 redraw() 함수 실행. 기본값은 1 -p5__description__0 = p5() 생성자로 전역 모드 대신 인스턴스 모드를 활성화할 수 있습니다. 이는 고급 활용 사례에 해당합니다. 간단한 설명과 예제가 아래에 있습니다. 자세한 내용은 다니엘 쉬프만(Dan Shiffman)의 코딩 트레인(Coding Train) 비디오 튜토리얼 또는 이 페이지에 있습니다. -p5__description__1 = 기본적으로 모든 p5.js 함수들은 전역 네임스페이스에 속합니다. (즉, 화면창 객체에 구속됩니다.) 이는, p5.js 함수들을 ellipse(), fill()과 같은 이름으로 불러올 수 있음을 뜻합니다. 하지만, 이러한 방식은 자바스크립트의 여타 (동기식 또는 비동기식) 라이브러리를 사용하거나 긴 코딩을 작성할 때 다소 불편할 수 있습니다. 따라서, p5.js는 인스턴스 모드를 통해 이 문제를 해결할 수 있는 방법을 지원합니다. 인스턴스 모드에서는 모든 p5 함수의 전역 네임 스페이스를 오염시키는 대신, 이를 단일 변수에 구속되게 만듭니다. -p5__description__2 = 선택적으로 캔버스나 다른 요소에 추가할 두 번째 인수로서 기본 컨테이너를 지정할 수 있습니다. HTML상 요소의 id나 노드 자체를 추가(append)할 수 있습니다. -p5__description__3 = 이처럼 인스턴스를 만들면, 단일 웹페이지에 두 개 이상의 p5 스케치를 사용할 수 있게 됩니다. 각각의 고유한 설정 변수에 의거하기 때문입니다. 물론, 전역 모드에서도 iframe 기능을 이용하면 복수의 스케치를 웹페이지에 사용할 수 있습니다. -p5__params__sketch = 객체: p5.js 스케치를 포함하는 함수 -p5__params__node = 문자열|객체: 스케치를 포함할 HTML DOM 노드 ID 또는 포인터 -applyMatrix__description__0 = 현재 행렬(matrix)에 매개변수로 지정된 행렬을 곱합니다. 평행 이동과 같은 연속 이동(translate), 크기 조정(scale), 전단(shear), 회전(rotate)을 한 번에 수행할 수 있습니다. 변환행렬 위키피디아에서 더 많은 정보를 확인할 수 있습니다. -applyMatrix__description__1 = 이 때, 인수들은 WHATWG 사양에 따라 그 이름이 지정되며, 다음과 같은 형식의 변환 행렬에 상응합니다：

    applyMatrix() 함수 호출시 사용되는 변환 행렬

    -applyMatrix__description__2 = -applyMatrix__description__3 = -applyMatrix__params__a = 숫자: 곱할 2x3 행렬 정의 -applyMatrix__params__b = 숫자: 곱할 2x3 행렬 정의 -applyMatrix__params__c = 숫자: 곱할 2x3 행렬 정의 -applyMatrix__params__d = 숫자: 곱할 2x3 행렬 정의 -applyMatrix__params__e = 숫자: 곱할 2x3 행렬 정의 -applyMatrix__params__f = 숫자: 곱할 2x3 행렬 정의 -resetMatrix__description__0 = 현재 행렬을 항등 행렬로 바꿉니다. -rotate__description__0 = 사용자가 지정한 각도 매개변수에 따라 도형을 회전합니다. 이 함수는 angleMode() 함수의 영향을 받으며, 괄호 안에 RADIANS 또는 DEGREES를 입력하여 각도가 해석되는 방식을 지정할 수 있습니다. -rotate__description__1 = 객체는 항상 원점에 대한 상대적 위치를 중심으로 회전하며, 양수를 입력할 경우 시계 방향으로 객체를 회전합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용됩니다. 예를 들어, rotate(HALF_PI)를 호출한 뒤 rotate(HALF_PI)를 호출하면, 결과적으로 rotate(PI)와 동일한 효과를 갖습니다. 모든 변형은 draw() 함수가 다시 시작하는 시점에 리셋됩니다. -rotate__description__2 = 좀 더 기술적으로 설명하자면, rotate() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다. -rotate__description__3 = -rotate__description__4 = -rotate__params__angle = 숫자: 현재 angleMode의 매개변수인 RADIANS(라디안) 또는 DEGREES(도)의 설정 사항에 따른 회전각 -rotate__params__axis = p5.Vector|숫자 배열[]: (선택 사항) 3D의 경우, 회전축 -rotateX__description__0 = x축을 따라 회전합니다. -rotateX__params__angle = 숫자: 현재 angleMode의 매개변수인 RADIANS(라디안) 또는 DEGREES(도)의 설정 사항에 따른 회전각 -rotateY__description__0 = y축을 따라 회전합니다. -rotateY__params__angle = 숫자: 현재 angleMode의 매개변수인 RADIANS(라디안) 또는 DEGREES(도)의 설정 사항에 따른 회전각 -rotateZ__description__0 = z축을 따라 회전합니다. (WebGL 모드 전용) -rotateZ__params__angle = 숫자: 현재 angleMode의 매개변수인 RADIANS(라디안) 또는 DEGREES(도)의 설정 사항에 따른 회전각 -scale__description__0 = 꼭짓점을 확장하거나 축소하여 도형의 크기를 키우거나 줄입니다. 객체의 크기는 언제나 좌표계에 대한 상대적 원점을 기준으로 조정됩니다. 크기값들은 10진수 백분율로 지정됩니다. 예를 들어, scale(2.0) 함수를 호출하면 도형의 크기를 200% 증가시킵니다. -scale__description__1 = 이러한 변형(transformation) 함수는 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용됩니다. 예를 들어, scale(2.0)을 호출한 뒤 scale(1.5)를 호출하면, 결과적으로 scale(3.0)과 동일한 효과를 갖습니다. 모든 변형은 draw() 함수가 다시 시작하는 시점에 리셋됩니다. -scale__description__2 = 매개변수 z는 오직 WebGL 모드에서만 사용 가능합니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다. -scale__description__3 = -scale__description__4 = -scale__params__s = 숫자|p5.Vector|숫자 배열[]：객체 크기를 조정하는 백분율, 또는 여러 인수를 지정할 경우 x축에서의 객체 크기 배율을 조정하는 백분율 -scale__params__y = 숫자: (선택 사항) y축에서의 객체 크기를 조정하는 백분율 -scale__params__z = 숫자: (선택 사항) z축에서의 객체 크기를 조정하는 백분율 (WebGL 모드용) -scale__params__scales = p5.Vector|숫자 배열[]: 축을 기준으로 객체의 크기 조정 -shearX__description__0 = 사용자가 지정한 각도 매개변수에 따라 도형을 x축에서 전단(shear)합니다. 이 함수는 angleMode() 함수의 영향을 받습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 전단되며, 양수를 입력할 경우 시계 방향으로 객체를 전단합니다. -shearX__description__1 = 이러한 변형(transformation) 함수는 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 누적됩니다. 예를 들어, shearX(PI/2)를 호출한 뒤 shearX(PI/2)를 또 호출하면, 결과적으로 shearX(PI)와 동일한 효과를 갖습니다. draw() 함수 내에서 shearX()를 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. -shearX__description__2 = 보다 기술적으로 설명하자면, shearX() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다. -shearX__description__3 = -shearX__description__4 = -shearX__params__angle = 숫자: 현재 angleMode의 매개변수인 RADIANS(라디안) 또는 DEGREES(도)의 설정 사항에 따른 전단각 -shearY__description__0 = 사용자가 지정한 각도 매개변수에 따라 도형을 y축에서 전단(shear)합니다. 이 함수는 angleMode() 함수의 영향을 받습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 전단되며, 양수를 입력할 경우 시계 방향으로 객체를 전단합니다. -shearY__description__1 = 이러한 변형(transformation) 함수는 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 누적됩니다. 예를 들어, shearY(PI/2)를 호출한 뒤 shearY(PI/2)를 또 호출하면, 결과적으로 shearY(PI)와 동일한 효과를 갖습니다. draw() 함수 내에서 shearY()를 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. -shearY__description__2 = 보다 기술적으로 설명하자면, shearY() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다. -shearY__description__3 = -shearY__description__4 = -shearY__params__angle = 숫자: 현재 angleMode의 매개변수인 RADIANS(라디안) 또는 DEGREES(도)의 설정 사항에 따른 전단각 -translate__description__0 = 디스플레이 화면 내에서 객체를 이동시킬 정도를 지정합니다. 매개변수 x는 좌/우 이동을, 매개변수 y는 상/하 이동을 지정합니다. -translate__description__1 = 이러한 변형(transformation) 함수는 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 누적됩니다. 예를 들어, translate(50, 0)를 호출한 뒤 translate(20, 0)를 또 호출하면, 결과적으로 translate(70, 0)와 동일한 효과를 갖습니다. draw() 함수 내에서 translate()을 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. -translate__description__2 = 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다. -translate__params__x = 숫자: 좌/우 이동 -translate__params__y = 숫자: 상/하 이동 -translate__params__z = 숫자: 앞/뒤 이동 (WebGL 모드용) -translate__params__vector = p5.Vector: 이동시킬 벡터 -storeItem__description__0 = 로컬 저장소에 값을 키 이름(key name)으로 저장합니다. 로컬 저장소는 브라우저에 저장되며, 브라우징 세션과 페이지를 다시 불러오는 사이에 유지됩니다. 키(key)는 변수명과 동일하게 지정될 수 있으나, 반드시 그럴 필요는 없습니다. 저장된 항목(item)을 가져오는 방법은 getItem에 있습니다. -storeItem__description__1 = 비밀번호나 개인 정보와같이 민감한 데이터는 로컬 저장소에 저장되면 안됩니다. -storeItem__params__key = 문자열: -storeItem__params__value = 문자열|숫자|객체|불리언|p5.Color|p5.Vector: -getItem__description__0 = storeItem()로 저장한 항목(item)의 값을 로컬 저장소로부터 반환합니다. -getItem__returns = 숫자|객체|문자열|불리언|p5.Color|p5.Vector: 저장된 항목의 값 -getItem__params__key = 문자열: 로컬 저장소에 저장시 사용할 이름 -clearStorage__description__0 = 현재 영역에서 storeItem()으로 설정된 모든 로컬 저장소 항목(item)을 제거합니다. -removeItem__description__0 = storeItem()으로 저장된 항목(item)을 제거합니다. -removeItem__params__key = 문자열 -createStringDict__description__0 = 키-값(key-value) 쌍 또는 사용자가 지정한 객체를 사용하여 p5.StringDict의 새로운 인스턴스를 생성합니다. -createStringDict__returns = p5.StringDict: -createStringDict__params__key = 문자열: -createStringDict__params__value = 문자열: -createStringDict__params__object = 객체: 객체 -createNumberDict__description__0 = 키-값(key-value) 쌍 또는 사용자가 지정한 객체를 사용하여 p5.NumberDict의 새로운 인스턴스를 생성합니다. -createNumberDict__returns = p5.NumberDict: -createNumberDict__params__key = 숫자: -createNumberDict__params__value = 숫자 -createNumberDict__params__object = 객체: 객체 -select__description__0 = 지정한 ID, 클래스, 또는 태그 이름(접두어 '#'로 ID를, '.'로 클래스 지정 가능, 태그는 별도의 접두어 없음)에 해당하는 요소를 페이지 내에서 검색하고, p5.Element를 반환합니다. 클래스나 태그의 이름이 2개 이상의 요소로 지정된 경우, 1번째 요소만 반환됩니다. 문서 객체 모델 (DOM) 노드는 .elt로 검섹할 수 있습니다. 아무 것도 검색되지 않을 경우 null을 반환합니다. 검색할 컨테이너를 별도로 지정할 수 있습니다. -select__returns = 검색된 노드를 포함한 p5.Element -select__params__selectors = 문자열: 찾을 요소의 CSS 선택 문자열 (selector string) -select__params__container = 문자열|p5.Element|HTML 요소: (선택 사항) id, p5.Element, 또는 HTML 요소 내에서 검색 -selectAll__description__0 = 지정한 클래스 또는 태그 이름('.'로 클래스 지정 가능, 태그는 별도의 접두어 없음)에 해당하는 요소를 페이지 내에서 검색하고, p5.Element 배열로 반환합니다. 문서 객체 모델 (DOM) 노드는 .elt로 검색할 수 있습니다. 아무 것도 검색되지 않을 경우 빈 배열을 반환합니다. 검색할 컨테이너를 별도로 지정할 수 있습니다. -selectAll__returns = 검색된 노드를 포함한 p5.Element 배열 -selectAll__params__selectors = 문자열: 찾을 요소의 CSS 선택 문자열 (selector string) -selectAll__params__container = 문자열: (선택 사항) id, p5.Element, 또는 HTML 요소 내에서 검색 -removeElements__description__0 = createCanvase() 또는 createGraphics()로 생성된 캔버스와 그래픽을 제외하고, p5로 생성된 모든 요소를 제거합니다. 이벤트 핸들러 역시 제거되며, 요소가 문서 객체 모델 (DOM)에서 제거됩니다. -changed__description__0 = .changed() 함수는 요소값이 변경될 때 호출됩니다. 특정 요소의 이벤트 리스너와 연결하는 데에 사용됩니다. -changed__params__fxn = 함수|불리언: 요소값이 변경될 때 발생하는 함수. 거짓(false)이 전달되면 이전 실행 함수는 더이상 실행 불가 -input__description__0 = .input() 함수는 요소가 사용자 입력을 감지할 때 호출됩니다. 입력 이벤트는 키 또는 슬라이더 요소의 변경을 감지합니다. 특정 요소의 이벤트 리스너와 연결하는 데에 사용됩니다. -input__params__fxn = 함수|불리언: 요소가 사용자 입력을 감지할 때 발생하는 함수. 거짓(false)이 전달되면 이전 실행 함수는 더이상 실행 불가 -createDiv__description__0 = 주어진 내부 HTML을 사용하여 문서 객체 모델 (DOM)에
    요소를 생성합니다. -createDiv__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createDiv__params__html = 문자열: (선택 사항) 요소를 생성한 내부 HTML -createP__description__0 = 주어진 내부 HTML을 사용하여 문서 객체 모델 (DOM)에

    요소를 생성합니다. 문단형 텍스트 작성시 사용됩니다. -createP__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createP__params__html = 문자열: (선택 사항) 요소를 생성한 내부 HTML -createSpan__description__0 = 주어진 내부 HTML을 사용하여 문서 객체 모델 (DOM)에 요소를 생성합니다. -createSpan__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createSpan__params__html = 문자열: (선택 사항) 요소를 생성한 내부 HTML -createImg__description__0 = 주어진 src와 대체 텍스트(alt text)를 사용하여 문서 객체 모델 (DOM)에 요소를 생성합니다. -createImg__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createImg__params__src = 문자열: 이미지의 src 또는 url 경로 -createImg__params__alt = 문자열: 이미지가 로드되지 않을 경우 사용할 대체 텍스트. 빈 문자열(" ")로 이미지 숨기기 가능 -createImg__params__crossOrigin = 문자열: img 요소의 교차 출처 속성(crossOrigin property). '익명(anonymous)' 또는 '사용 자격 증명(use-credentials)'을 통해 교차 출처 권한이 있는 이미지를 검색할 수 있습니다. 이는 캔버스에 이미지를 사용하기 위함이며, 빈 문자열(" ")이 전달된 경우 교차 출처 리소스 공유(CORS)는 사용되지 않습니다. -createImg__params__successCallback = 함수: (선택 사항) 인수로 지정된 p5.Element가 이미지 데이터를 불러왔을 때 호출되는 콜백 함수 -createA__description__0 = 문서 객체 모델 (DOM)에 하이퍼링크를 포함한 요소를 생성합니다. -createA__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createA__params__href = 문자열: 링크될 페이지 url -createA__params__html = 문자열: 화면에 보여질 링크 요소의 내부 HTML -createA__params__target = 문자열: (선택 사항) 새로운 링크가 보여질 대상, _blank, _self, _parent, _top 중 지정 가능 -createSlider__description__0 = 문서 객체 모델 (DOM)에 슬라이더 요소를 생성합니다. .size() 함수로 슬라이더의 길이를 설정합니다. -createSlider__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createSlider__params__min = 숫자: 슬라이더의 최소값 -createSlider__params__max = 숫자: 슬라이더의 최대값 -createSlider__params__value = 숫자: (선택 사항) 슬라이더의 기본값 -createSlider__params__step = 숫자: (선택 사항) 슬라이더의 단위당 이동 크기(이동 크기가 0으로 지정된 경우, 슬라이더는 최소값과 최대값 사이를 부드럽게 이동합니다.) -createButton__description__0 = 문서 객체 모델 (DOM)에 요소를 생성합니다. .size() 함수로 버튼의 크기를 설정합니다. .mousePressed() 함수로 버튼이 클릭됐을 때의 행동을 지정합니다. -createButton__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createButton__params__label = 문자열: 버튼 위에 나타나는 레이블 -createButton__params__value = 문자열: (선택 사항) 버튼값 -createCheckbox__description__0 = 문서 객체 모델 (DOM)에 체크박스 요소를 생성합니다. .checked() 함수를 통해 체크되었는지의 여부를 반환합니다. -createCheckbox__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createCheckbox__params__label = 문자열: (선택 사항) 체크박스 위에 나타나는 레이블 -createCheckbox__params__value = 불리언: (선택 사항) 체크박스의 값. 체크는 참(true), 체크 해제는 거짓(false) -createSelect__description__0 = 문서 객체 모델 (DOM)에 드롭다운 메뉴 요소를 생성합니다. 이미 생성된 셀렉트 박스(select box)를 선택할 경우, p5.Element에 select-box 메소드를 지정하는 데에도 쓰입니다. 셀렉트 박스 생성 후, .option() 메소드로 선택지(option)를 설정할 수 있습니다. .selected() 메소드는 p5.Element 인스턴스인 현재 드롭다운 요소를 반환합니다. .selected() 메소드는 특정 선택지를 최초 페이지 로드시의 기본값으로서 설정할 수 있습니다. .disable() 메소드는 특정 선택지를 비활성화하고, 별도로 지정된 인수가 없는 경우엔 전체 드롭다운 요소를 비활성화 상태로 표시합니다. -createSelect__returns = p5.Element -createSelect__params__multiple = 불리언: (선택 사항) 드롭다운이 여러 개의 선택지를 제공할 경우 참(true) -createSelect__params__existing = 객체: 문서 객체 모델 셀렉트 요소 -createRadio__description__0 = 문서 객체 모델 (DOM)에 라디오 버튼 요소를 생성합니다. 라디오 버튼 생성 후, .option() 메소드로 옵션을 설정할 수 있습니다. .value() 메소드는 현재 선택된 옵션을 반환합니다. -createRadio__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createRadio__params__containerElement = 객체: 옵션으로 설정 될 모든 라디오 입력소들이 있는 div 또는 span의 HTML 컨테인어. -createRadio__params__name = 문자열: (선택 사항) 각 입력 요소의 매개변수 명. -createColorPicker__description__0 = 문서 객체 모델 (DOM)에 색상 입력을 위한 색상 추출(colorPicker) 요소를 생성합니다. .value() 메소드는 색상의 헥사(Hex) 문자열(#rrggbb)을 반환합니다. .color() 메소드는 현재 선택된 색상의 p5.Color 객체를 반환합니다. -createColorPicker__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createColorPicker__params__value = 문자열|p5.Color: (선택 사항) 요소의 색상 기본값 -createInput__description__0 = 문서 객체 모델 (DOM)에 텍스트 입력을 위한 요소를 생성합니다. .size() 함수로 상자의 크기를 설정합니다. -createInput__returns = p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터 -createInput__params__value = 문자열: (선택 사항) 입력 상자의 기본값 -createInput__params__type = 문자열: (선택 사항) 텍스트 유형 (예: text, password 등) 기본값은 text -createFileInput__description__0 = '파일(file)' 유형의 문서 객체 모델 (DOM)에 요소를 생성합니다. 스케치에 사용할 로컬 파일을 선택할 수 있게 됩니다. -createFileInput__returns = p5.Element: 생성된 DOM 요소를 담고있는 p5.Element에 대한 포인터 -createFileInput__params__callback = 함수: (선택 사항) 파일이 로드될 때의 콜백 함수 -createFileInput__params__multiple = 문자열: (선택 사항) 여러 파일 선택 허용 -createVideo__description__0 = 문서 객체 모델 (DOM)에 간단한 오디오/비디오 재생을 위한 HTML5
  • .option(name, [value]) pode ser utilizado para configurar opções para a selecão depois de criada.
  • .value() retornará a opção selecionada no momento.
  • .selected() retornará o elemento da lista suspensa atual que é uma instância do p5.Element.
  • .selected(value) pode ser usado para tornar determinado item selecionado por padrão quando a página é carregada pela primeira vez.
  • .disable() marca toda lista suspensa como desativada.
  • .disable(value) marca o item determinado como desativado.
    • -createSelect__returns = p5.Element: -createSelect__params__multiple = Booleano (Opcional): true (verdadeiro) se o elemento suportar várias seleções -createSelect__params__existing = Objeto: elemento de seleção do DOM -createRadio__description__0 = Cria um elemento HTML de <input></input> do tipo botão de escolha (tipe = "radio") no DOM. Também auxilia a atribuir métodos de p5.Element a botões de escolha (radio) existentes.
    • O método .option(value, [label]) pode ser utilizado para criar um novo item para o elemento. Se já existir um item com o valor indicado, o método retornará este item. Opcionalmente, um label (etiqueta) pode ser fornecido como segundo argumento para o item.
    • O método .remove(value) pode ser utilizado para remover um item do elemento.
    • O método .value() retorna o valor do item selecionado no momento.
    • O método .selected() retorna o elemento de input selecionado no momento.
    • O método .selected(value) marca um item como selecionado, retorna ele mesmo.
    • O método .disable(Boolean) desativa/ativa o elemento todo.
    -createRadio__returns = p5.Element: ponteiro para um p5.Element contendo o node (nó) criado. -createRadio__params__containerElement = Objeto: Um elemento container de HTML, pode ser um <div></div> ou <span></span>, dentro do qual todas os inputs existentes serão considerados como itens do botão de escolha. -createRadio__params__name = String (Opcional): parâmetro nome para cada elemnto de input. -createColorPicker__description__0 = Cria um elemento no DOM para input de cor. O método .value() retorna uma string HEX (#rrggbb) da cor. O método .color() retorna um objeto p5.Color com a selecão de cor atual. -createColorPicker__returns = p5.Element: ponteiro para um p5.Element contendo o node (nó) criado. -createColorPicker__params__value = String|p5.Color (Opcional): cor padrão do elemento. -createInput__description__0 = Cria um elemento de <input></input> de texto no DOM. Use .size() para configurar o tamanho da caixa de texto. -createInput__returns = p5.Element: ponteiro para um p5.Element contendo o node (nó) do DOM criado. -createInput__params__value = String: default valor padrão da caixa de texto do input -createInput__params__type = String (Opcional): tipo do texto, por ex.: "text", "password" etc. Por padrão o tipo definido é "text". -createFileInput__description__0 = Cria um elemento de <input></input> de arquivo no DOM. Permite que usuários carreguem arquivos locais para utilizar em um sketch. -createFileInput__returns = p5.Element: ponteiro para um p5.Element contendo o node (nó) do DOM criado. -createFileInput__params__callback = Função: Funcão callback para quando o arquivo é carregado. -createFileInput__params__multiple = Booleano (Opcional): permite que múltiplos arquivos sejam selecionados. -createVideo__description__0 = Cria um elemento de <video> HTML5 no DOM para a reprodução simples de áudio/video. O elemento de vídeo é definido como visível por padrão, pode ser ocultado com o método .hide() e desenhado na canvas utilizando image(). O primeiro parâmetro pode ser uma única string com o caminho para um arquivo de vídeo ou uma array de strings com endereços de arquivos de videos em diferentes formatos de arquivo. Isso é útil para garantir que seu vídeo possa ser reproduzido em diferentes navegadores, já que cada um suporta formatos diferentes. Você pode encontrar mais informações sobre os formatos de mídias suportados aqui . -createVideo__returns = p5.MediaElement: ponteiro para um p5.Element de vídeo. -createVideo__params__src = String | String[]: endereço do arquivo de video ou uma array de endereços de arquivos de video em formatos diferentes. -createVideo__params__callback = Função (Optional): função callback chamada no disparo do evento 'canplaythrough', ou seja, quando a mídia está pronta para ser reproduzida, e estima que já foram carregados dados suficientes para reproduzir a mídia sem interrupcões para mais buffering. -createAudio__description__0 = Cria um elemento de <audio> HTML5 no DOM element in the DOM para a reprodução simples de áudio. Por definição, o elemento de áudio é criado como um elemento oculto (hidden). O primeiro parâmetro pode ser uma única string com o caminho para um arquivo de áudio ou uma array de strings com endereços de arquivos de áudio em diferentes formatos de arquivo. Isso é útil para garantir que seu vídeo possa ser reproduzido em diferentes navegadores, já que cada um suporta formatos diferentes. Você pode encontrar mais informações sobre os formatos de mídias suportados aqui. -createAudio__returns = p5.MediaElement: ponteiro para um p5.Element de áudio. -createAudio__params__src = String | String[] (Opcional): endereço do arquivo ou uma array de endereços de arquivos em formatos diferentes. -createAudio__params__callback = Função (Opcional): função chamada no disparo do evento 'canplaythrough', ou seja, quando a mídia está pronta para ser reproduzida, e estima que já foram carregados dados suficientes para reproduzir a mídia sem interrupcões para mais buffering. -createCapture__description__0 = Cria um novo elemento <video> HTML5 que contém o fluxo de áudio e vídeo de uma webcam. O elemento de vídeo é definido como visível por padrão, pode ser ocultado com o método .hide() e desenhado na canvas utilizando image(). A propriedade loadedmetadata pode ser utilizada para detectar quando o elemento for totalmente carregado (ver o segundo exemplo). -createCapture__description__1 = !! More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers. -createCapture__description__2 = Nota de segurança: Devido a especificações de segurança dos navegadores é preciso solicitar ao usuário permissão para utilizar entradas de mídia como a webcam, para isso o método .getUserMedia() é utilizado dentro da função createCapture(), também por razões de segurança este método só pode ser executado quando o código está rodando localmente ou sob o protocolo HTTPS. -createCapture__returns = p5.Element: ponteiro para um p5.Element com fluxo de video da webcam -createCapture__params__type = String | Constante | Objeto: tipo da captura. AUDIO e VIDEO são as definições padrão caso nenhuma especificação seja passada. !! Também pode ser definido por !! Constraints object -createCapture__params__callback = Função (Opcional): função chamada quando o fluxo de mídia é carregado. -createElement__description__0 = Cria um elemento HTML no DOM com segundo a tag definida. -createElement__returns = p5.Element: ponteiro para um p5.Element contendo o node (nó) criado. -createElement__params__tag = String: tag HTML do novo elemento -createElement__params__content = String (Opcional): conteúdo HTML do elemento. -deviceOrientation__description__0 = A variável global deviceOrientation, embutida na biblioteca p5.js, armazena a orientação do dispositivo em que o sketch está sendo executado. O valor da variável será LANDSCAPE (horizontal) ou PORTRAIT (vertical). Se nenhuma informação estiver disponível, o valor será undefined (indefinido). -accelerationX__description__0 = A variável global accelerationX, embutida na biblioteca p5.js, armazena a aceleração do dispositivo no eixo X. O valor é representado como metros por segundo ao quadrado. -accelerationY__description__0 = A variável global accelerationY, embutida na biblioteca p5.js, armazena a aceleração do dispositivo no eixo Y. O valor é representado como metros por segundo ao quadrado. -accelerationZ__description__0 = A variável global accelerationZ, embutida na biblioteca p5.js, armazena a aceleração do dispositivo no eixo Z. O valor é representado como metros por segundo ao quadrado. -pAccelerationX__description__0 = A variável global pAccelerationX, embutida na biblioteca p5.js, armazena a aceleração do dispositivo no eixo X no frame anterior ao atual. O valor é representado como metros por segundo ao quadrado. -pAccelerationY__description__0 = A variável global pAccelerationY, embutida na biblioteca p5.js, armazena a aceleração do dispositivo no eixo Y no frame anterior ao atual. O valor é representado como metros por segundo ao quadrado. -pAccelerationZ__description__0 = A variável global pAccelerationZ, embutida na biblioteca p5.js, armazena a aceleração do dispositivo no eixo Z no frame anterior ao atual. O valor é representado como metros por segundo ao quadrado. -rotationX__description__0 = A variável global rotationX, embutida na biblioteca p5.js, armazena a rotação do dispositivo em relação ao eixo X. Se o modo de ângulo do sketch (angleMode()) estiver definido como graus (DEGREES), o valor será entre -180 e 180. Caso esteja definido como radianos (RADIANS), o valor será entre -PI e PI. -rotationX__description__1 = Nota: A ordem em que as rotações são chamas é importate. Se usadas em conjunto, é preciso chamá-las na ordem Z-X-Y, ou é possível que aconteçam comportamentos inesperados. -rotationY__description__0 = A variável global rotationY, embutida na biblioteca p5.js, armazena a rotação do dispositivo em relação ao eixo Y. Se o modo de ângulo do sketch (angleMode()) estiver definido como graus (DEGREES), o valor será entre -90 e 90. Caso esteja definido como radianos (RADIANS), o valor será entre -PI/2 e PI/2. -rotationY__description__1 = Nota: A ordem em que as rotações são chamas é importate. Se usadas em conjunto, é preciso chamá-las na ordem Z-X-Y, ou é possível que aconteçam comportamentos inesperados. -rotationZ__description__0 = A variável global rotationZ, embutida na biblioteca p5.js, armazena a rotação do dispositivo em relação ao eixo Z. Se o modo de ângulo do sketch (angleMode()) estiver definido como graus (DEGREES), o valor será entre 0 e 360. Caso esteja definido como radianos (RADIANS), o valor será entre 0 e 2*PI. -rotationZ__description__1 = Nota: A ordem em que as rotações são chamas é importate. Se usadas em conjunto, é preciso chamá-las na ordem Z-X-Y, ou é possível que aconteçam comportamentos inesperados. -pRotationX__description__0 = A variável global pRotationX, embutida na biblioteca p5.js, armazena a rotação do dispositivo em relação ao eixo X no frame anterior ao atual. Se o modo de ângulo do sketch (angleMode()) estiver definido como graus (DEGREES), o valor será entre -180 e 180. Caso esteja definido como radianos (RADIANS), o valor será entre -PI e PI. -pRotationX__description__1 = pRotationX pode ser utilizada em conjunto com rotationX para determinar a direção de rotação do dispositivo no eixo X. -pRotationY__description__0 = A variável global pRotationY, embutida na biblioteca p5.js, armazena a rotação do dispositivo em relação ao eixo Y no frame anterior ao atual. Se o modo de ângulo do sketch (angleMode()) estiver definido como graus (DEGREES), o valor será entre -90 e 90. Caso esteja definido como radianos (RADIANS), o valor será entre -PI/2 e PI/2. -pRotationY__description__1 = pRotationY pode ser utilizada em conjunto com rotationY para determinar a direção de rotação do dispositivo no eixo Y. -pRotationZ__description__0 = A variável global pRotationZ, embutida na biblioteca p5.js, armazena a rotação do dispositivo em relação ao eixo Z no frame anterior ao atual. Se o modo de ângulo do sketch (angleMode()) estiver definido como graus (DEGREES), o valor será entre 0 e 360. Caso esteja definido como radianos (RADIANS), o valor será entre 0 e 2*PI. -pRotationZ__description__1 = pRotationZ pode ser utilizada em conjunto com rotationZ para determinar a direção de rotação do dispositivo no eixo Z. -turnAxis__description__0 = Quanto o dispositivo é rotacionado, o método deviceTurned() é acionado, e o eixo de rotação é armazenado na variável turnAxis. Essa variável só é definida dentro do escopo de deviceTurned(). -setMoveThreshold__description__0 = A função setMoveThreshold() é utilizada para definir o limiar de movimento da função deviceMoved(). O valor limiar padrão é 0.5. -setMoveThreshold__params__value = Número: o valor do limiar -setShakeThreshold__description__0 = A função setShakeThreshold() é utilizada para definir o limiar de movimento da função deviceShaken(). O valor limiar padrão é 30. -setShakeThreshold__params__value = Número: o valor do limiar -deviceMoved__description__0 = A função deviceMoved() é chamada quando o dispositivo for movido para além do limiar em qualquer um dos eixos (X, Y ou Z). O valor limiar padrão é 0.5, e pode ser alterado através da função setMoveThreshold(). -deviceTurned__description__0 = A função deviceTurned() é chamada quando o dispositivo for rotacionado mais de 90 graus contínuos em qualquer eixo (X, Y ou Z). -deviceTurned__description__1 = O eixo que dispara este método é armazenado na variável turnAxis. Assim, é possível direcionar sua execução para eixos específicos ao comparar a variável turnAxis com 'X', 'Y' ou 'Z' -deviceShaken__description__0 = A função deviceShaken() é chamada quando a aceleração total do dispositivo nos eixos X (accelerationX) e Y (accelerationY) for superior ao valor limiar. -keyIsPressed__description__0 = A variável booleana global keyIsPressed é true (verdadeira) quando uma tecla está pressionada, e false (falsa) quando não. -key__description__0 = A variável global key armazena o valor da última tecla que foi pressionada no teclado. Para garantir que o resultado transmita a informação correta em relação a minúsculas ou maiúsculas, é melhor utilizá-la dentro da função keyTyped(). Para teclas especiais ou caracteres fora do padrão ASCII, utilize a variável keyCode. -keyCode__description__0 = A variável global keyCode armazena o código correspondente à última tecla que foi pressionada no teclado. Diferente da variável key, keyCode permite detectar teclas especiais. Para tal, é preciso comparar a variável com o código correspondente à tecla especial desejada, ou com as constantes correspondentes como BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW (seta superior), DOWN_ARROW (seta inferior), LEFT_ARROW (seta esquerda), RIGHT_ARROW (seta direita). Você também pode utilizar um site como keycode.info para encontrar o código da tecla (key code) de qualquer tecla em seu teclado. -keyPressed__description__0 = A função keyPressed() é chamada a cada vez que uma tecla é pressionada. O código da tecla e seu valor são então armazenados nas variáveis keyCode e key. -keyPressed__description__1 = Para caracteres dentro do padrão ASCII, o valor da tecla é armazenado na variável key. No entanto, a distinção entre maiúsculas e minúsculas não é garantida. Caso essa distinção seja necessária, é recomendado ler a variável dentro da função keyTyped(). -keyPressed__description__2 = Para caracteres fora do padrão ASCII, o código da tecla é armazenado na variável keyCode. Ela permite detectar teclas especiais ao ser comparada com o código correspondente à tecla especial desejada, ou com as constantes correspondentes como BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW (seta superior), DOWN_ARROW (seta inferior), LEFT_ARROW (seta esquerda), RIGHT_ARROW (seta direita). -keyPressed__description__3 = Por causa da forma com que os sistemas operacionais tratam repetições nas teclas, pressionar continuamente uma tecla pode causar chamadas múltiplas aos métodos keyPressed(), keyTyped() e keyReleased(). A frequência de repetição é definida pelo sistema operacional, e pela configuração de cada dispositivo. Navegadores podem ter comportamentos diferentes relacionados a cada evento de tecla. Para previnir qualquer comportamento padrão, adicione return false ao fim do método. -keyPressed__params__event = Objeto (opcional): argumento de callback do tipo KeyboardEvent (evento de teclado) -keyReleased__description__0 = A função keyReleased() é chamada a cada vez que uma tecla é liberada após ser pressionada. Veja key e keyCode para mais detalhes. -keyReleased__params__event = Objeto (opcional): argumento de callback do tipo KeyboardEvent (evento de teclado) -keyTyped__description__0 = A função keyTyped() é chamada a cada vez que uma tecla é pressionada, mas teclas de ação como Backspace, Delete, Ctrl, Shift, e Alt são ignoradas. A última tecla pressionada é armazenada na variável key. Caso esteja buscando o código da tecla, utilize a função keyPressed(). -keyTyped__description__1 = Por causa da forma com que os sistemas operacionais tratam repetições nas teclas, pressionar continuamente uma tecla pode causar chamadas múltiplas aos métodos keyTyped(), keyPressed() e keyReleased(). A frequência de repetição é definida pelo sistema operacional, e pela configuração de cada dispositivo. Navegadores podem ter comportamentos diferentes relacionados a cada evento de tecla. Para previnir qualquer comportamento padrão, adicione return false ao fim do método. -keyTyped__params__event = Objeto (opcional): argumento de callback do tipo KeyboardEvent (evento de teclado) -keyIsDown__description__0 = A função keyIsDown() verifica se alguma tecla está sendo pressionada. Ela pode ser utilizada caso você queira que diversas teclas afetem o comportamento de um objeto simultaneamente. Por exemplo, você pode querer que um objeto mova diagonalmente somente se as setas esquerda e superior estejam pressionadas ao mesmo tempo. -keyIsDown__returns = Booleano: se a tecla está pressionada ou não -keyIsDown__params__code = Número: A tecla a ser verificada -movedX__description__0 = A variável movedX contém o movimento horizontal do mouse desde o último quadro (frame). -movedY__description__0 = A variável movedY contém o movimento vertical do mouse desde o último quadro (frame). -mouseX__description__0 = A variável global mouseX armazena a posição horizontal do mouse no quadro (frame) atual, relativa ao sistema de coordenadas da canvas. O valor no canto superior esquerdo é (0, 0) para 2D e (-width/2, -height/2) para WebGL. Se o aparelho utilizar touch em vez do mouse, mouseX armazenará o valor de X do último toque. -mouseY__description__0 = A variável global mouseY armazena a posição vertical do mouse no quadro (frame) atual, relativa ao sistema de coordenadas da canvas. O valor no canto superior esquerdo é (0, 0) para 2D e (-width/2, -height/2) para WebGL. Se o aparelho utilizar touch em vez do mouse, mouseY armazenará o valor de Y do último toque. -pmouseX__description__0 = A variável global pmouseX armazena a posição horizontal do mouse ou dedo no quadro (frame) anterior ao atual, relativa ao sistema de coordenadas da canvas. O valor no canto superior esquerdo é (0, 0) para 2D e (-width/2, -height/2) para WebGL. Nota: pmouseX será atribuída ao valor atual de mouseX no início de cada evento de toque. -pmouseY__description__0 = A variável global pmouseY armazena a posição vertical do mouse ou dedo no quadro (frame) anterior ao atual, relativa ao sistema de coordenadas da canvas. O valor no canto superior esquerdo é (0, 0) para 2D e (-width/2, -height/2) para WebGL. Nota: pmouseY será atribuída ao valor atual de mouseY no início de cada evento de toque. -winMouseX__description__0 = A variável global winMouseX armazena a posição horizontal do mouse no frame atual, relativo ao sistema de coordenadas da janela do browser. -winMouseY__description__0 = A variável global winMouseY armazena a posição vertical do mouse no frame atual, relativo ao sistema de coordenadas da janela do browser. -pwinMouseX__description__0 = A variável global pwinMouseX armazena a posição horizontal do mouse no frame anterior ao atual, relativo ao sistema de coordenadas da janela do browser. Nota: pwinMouseX será definido como a posição atual do mouse ( winMouseX) no início de cada evento de toque. -pwinMouseY__description__0 = A variável global pwinMouseY armazena a posição vertical do mouse no frame anterior ao atual, relativo ao sistema de coordenadas da janela do browser. Nota: pwinMouseY será definido como a posição atual do mouse ( winMouseY) no início de cada evento de toque. -mouseButton__description__0 = A biblioteca p5 rastreia automaticamente se algum botão do mouse é pressionado, e qual botão é pressionado. O valor da variável global mouseButton é LEFT (referente ao botão esquerdo), RIGHT (referente ao botão direito), ou CENTER (referente ao botão central), dependendo de qual botão foi pressionado por último. Aviso: diferentes navegadores podem rastrear mouseButton de forma diferente. -mouseIsPressed__description__0 = A variável global booleana mouseIsPressed é true (verdadeira) caso algum botão do mouse esteja pressionado, e false (falsa) caso não. -mouseMoved__description__0 = A função mouseMoved () é chamada toda vez que o mouse se move sem que um botão seja pressionado.Os navegadores podem ter diferentes comportamentos padrão associados aos eventos de mouse. Para evitar qualquer comportamento padrão para este evento, adicione return false ao final do método. -mouseMoved__params__event = Objeto (opcional): evento do mouse (MouseEvent) de callback. -mouseDragged__description__0 = A função mouseDragged() é chamada a cada vez que o mouse se move enquanto um botão do mouse é pressionado. Se nenhuma função mouseDragged() for definida, e a função touchMoved() for definida, esta será chamada em lugar da primeira. Os navegadores podem ter diferentes padrões de comportamentos associados aos eventos de mouse. Para evitar qualquer comportamento padrão para este evento, adicione return false ao final do método. -mouseDragged__params__event = Objeto (opcional): argumento de callback do evento do mouse (MouseEvent). -mousePressed__description__0 = - A função mousePressed() é chamada a cada vez que um botão do mouse é pressionado. A variável mouseButton pode, então, ser usada para determinar qual botão foi pressionado. Se a função mousePressed() não for definida no seu código, e houver definição para a função touchStarted(), esta será chamada no lugar da primeira. - - Os navegadores podem ter diferentes padrões de comportamento associados aos eventos do mouse. Para evitar qualquer comportamento padrão para este evento, adicione return false ao final do método. -mousePressed__params__event = Objeto (opcional): argumento de callback do evento do mouse (MouseEvent). -mouseReleased__description__0 = A função mouseReleased() é chamada toda vez que um botão do mouse é liberado após ter sido pressionado. Se nenhuma função touchEnded() for definida, a função touchEnded(), caso esteja definida, será chamada em seu lugar. Os navegadores podem ter diferentes comportamentos padrão associados aos eventos de mouse. Para evitar qualquer comportamento padrão para este evento, adicione return false ao final do método. -mouseReleased__params__event = Objeto (opcional): argumento de callback do evento do mouse (MouseEvent). -mouseClicked__description__0 = - A função mouseClicked() é chamada a cada vez que um botão do mouse é pressionado e então liberado. Navegadores processam cliques de forma diferente, portanto o funcionamento dessa função só é garantido quando o botão esquerdo for clicado. Para verificar cliques em outros botões, prefira as funções mousePressed() ou mouseReleased(). - Os navegadores podem ter diferentes comportamentos padrão associados aos eventos do mouse. Para evitar qualquer comportamento padrão para este evento, adicione return false ao final do método. - - Se nenhuma função mouseReleased () for definida, a função touchEnded () será chamada em seu lugar se estiver definido. Os navegadores podem ter diferentes comportamentos padrão associados a vários eventos de mouse. Para evitar qualquer comportamento padrão para este evento, adicione "return false" ao final do método. -mouseClicked__params__event = Objeto (opcional): argumento de callback do evento do mouse (MouseEvent). -doubleClicked__description__0 = - A função doubleClicked() é executada quando uma função de escuta de eventos (event listener) detecta um evento do tipo dblclick, que é parte da especificação L3 do DOM. Este evento é disparado quando um botão (geralmente o botão principal do mouse) clica duas vezes sobre um mesmo elemento. Para mais informações sobre o evento dblclick, acesse a documentação da Mozilla sobre o tema (em inglês). -doubleClicked__params__event = Objeto (opcional): argumento de callback do evento do mouse (MouseEvent). -mouseWheel__description__0 = - A função mouseWheel() é executada a cada vez que um evento de rolagem vertical for detectado, seja através de uma roda de rolagem, ou um trackpad. A propriedade event.delta retorna a quantia que a roda foi rolada. Os valores podem ser positivos ou negativos, dependendo da direção da rolagem -- em um computador OS X, com a "rolagem natural" ativada, os sinais são invertidos. - Os navegadores podem ter diferentes comportamentos padrão associados aos eventos do mouse. Para evitar qualquer comportamento padrão para este evento, adicione return false ao final do método. Devido ao suporte atual do evento wheel no Safari, para que a função funcione como esperado, é preciso adicionar return false ao fim do método para rodar o programa neste browser. -mouseWheel__params__event = Objeto (opcional): argumento de callback do evento de rolagem (WheelEvent). -requestPointerLock__description__0 = A função requestPointerLock() trava o cursor em sua posição atual e o torna invisível. Utilize as variáveis movedX e movedY para acessar o movimento do mouse desde o último quadro (frame). Note que nem todos os navegadores suportam este recurso. requestPointerLock() permite que você crie experiências que não restrinjam o movimento do mouse ao tamanho da tela, mesmo que este mova repetidamente para o mesmo lado — por exemplo, um ambiente 3D com perspectiva em primeira pessoa. -exitPointerLock__description__0 = A função exitPointerLock() desativa o modo de bloqueio de cursor disparado pela função requestPointerLock(), permitindo que se volte a utilizar os elementos da interface normalmente. -touches__description__0 = A variável global touches[] armazena uma array com a posição de todos os pontos de toque acontecendo simultaneamente em uma tela touchscreen. Cada elemento da array é um objeto contendo x, y e id. As coordenadas (x e y) são relativas ao ponto (0, 0) da canvas, e a id identifica cada ponto de toque enquanto este se move. -touches__description__1 = A array touches[] não é compatível com os navegadores Safari e Internet Explorer em computadores com touchscreen. -touchStarted__description__0 = A função touchStarted() é chamada a cada vez que um toque é detectado pela tela do dispositivo. Se nenhuma função touchStarted() for definida, a função mousePressed(), caso definida, será chamada em seu lugar. Os navegadores podem ter diferentes comportamentos padrão associados aos eventos de toque. Para evitar os comportamentos padrão para este evento, adicione return false ao final do método. -touchStarted__params__event = Objeto (opcional): argumento de callback do evento de toque (TouchEvent). -touchMoved__description__0 = A função touchMoved() é chamada a cada vez que um toque detectado pela tela do dispositivo muda de posição. Se nenhuma função touchMoved() for definida, a função mouseDragged(), caso definida, será chamada em seu lugar. Os navegadores podem ter diferentes comportamentos padrão associados aos eventos de toque. Para evitar os comportamentos padrão para este evento, adicione return false ao final do método. -touchMoved__params__event = Objeto (opcional): argumento de callback do evento de toque (TouchEvent). -touchEnded__description__0 = A função touchEnded() é chamada toda vez que um toque à tela do dispositivo termina. Se nenhuma função touchEnded() for definida, a função mouseReleased(), caso esteja definida, será chamada em seu lugar. Os navegadores podem ter diferentes comportamentos padrão associados aos eventos de mouse. Para evitar qualquer comportamento padrão para este evento, adicione return false ao final do método. -touchEnded__params__event = Objeto (opcional): argumento de callback do evento de toque (TouchEvent). -createImage__description__0 = Cria um novo objeto do tipo p5.Image , que é usado para armazenar imagens . Esta função retorna um novo buffer de pixels para ser utilizado. O tamanho do buffer é definido pelos parâmetros de largura (width) e altura (height). -createImage__description__1 = O método . pixels dá acesso a uma array contendo os valores de todos os pixels na janela de exibição. Esses valores são números. Esta matriz é do tamanho da janela de exibição (incluindo um fator apropriado para a pixelDensity ) multiplicado por 4, representando os valores R, G, B, A (nesta ordem) para cada pixel, movendo-se da esquerda para a direita em cada linha e, em seguida, para baixo em cada coluna. Consulte. pixels para obter mais informações. Também pode ser mais simples usar set () ou get () . -createImage__description__2 = Antes de acessar os pixels de uma imagem os dados devem ser carregados com a função loadPixels () . Se os dados da array forem modificados, a função updatePixels () deve ser executada para atualizar as alterações. -createImage__returns = p5.Image: o objeto do tipo p5.Image -createImage__params__width = Inteiro: largura em pixels -createImage__params__height = Inteiro: altura em pixels -saveCanvas__description__0 = Salva a canvas atual como uma imagem. O navegador salvará o arquivo imediatamente ou exibirá uma janela de diálogo ao usuário. -saveCanvas__params__selectedCanvas = p5.Element | HTMLCanvasElement (opcional): uma variável que representa um elemento HTML de canvas específico -saveCanvas__params__filename = String (opcional): uma string com o nome do arquivo que será salvo -saveCanvas__params__extension = String (Opcional): uma string contendo a extensão do arquivo que será salvo, valores aceitos são 'jpg' ou 'png' -saveFrames__description__0 = Captura uma sequência de quadros que podem ser usados para criar um filme. Aceita um argumento de callback que pode ser usado quando, por exemplo, caso você deseja enviar os quadros a um servidor onde eles serão armazenados ou convertidos em um filme. Se nenhum argumento de callback for fornecido, por padrão o navegador iniciará o download de todas imagens geradas. Com um argumento de callback fornecido, os dados da imagem não serão salvos, mas sim passados como um argumento para a função de callback como uma array de objetos, o tamanho da array será igual ao número total de quadros. Cada objeto terá três propriedades: imageData - image/octet-stream, filename e extension. -saveFrames__description__1 = Observe que saveFrames () salva apenas os primeiros 15 quadros de uma animação. Para exportar animações mais longas, sugerimos que procure uma biblioteca como a ccapture.js . -saveFrames__params__filename = String: nome do arquivo que será salvo -saveFrames__params__extension = String: formato do arquivo que será salvo, os formatos aceitos são 'jpg' ou 'png' -saveFrames__params__duration = Número: tempo em segundos durante o qual os quadros serão salvos. -saveFrames__params__framerate = Número: Framerate para salvar os quadros. -saveFrames__params__callback = (Opcional) Uma função de callback que será executada para manusear os dados de imagem. Esta função deve aceitar uma array como argumento. função (array) -loadImage__description__0 = Carrega uma imagem a partir de um endereço de arquivo fornecido e cria uma p5.Image a partir dela. -loadImage__description__1 = Ao usar esta função no setup pode ser que a imagem leve um tempo para carregar e para que esteja pronta para a renderização. Se você quiser garantir que a imagem esteja carregada antes de fazer qualquer coisa com ela, coloque a chamada loadImage () em preload () . Você também pode fornecer uma função de callback para lidar com a imagem quando ela estiver pronta. -loadImage__description__2 = O caminho para a imagem deve ser relativo à localização do arquivo HTML que se refere ao seu sketch. O carregamento de uma imagem a partir de uma URL que se refere a um local remoto pode falhar, devido a bloqueios impostos pelas políticas de segurança do seu navegador. -loadImage__description__3 = Você também pode passar uma string de uma imagem codificada em base64 como alternativa ao caminho do arquivo. Lembre-se de adicionar "data: image / png; base64," na frente da string. -loadImage__returns = p5.Image: objeto do tipo p5.Image -loadImage__params__path = String: Endereço do arquivo da imagem a ser carregada -loadImage__params__successCallback = function (p5.Image) (Opcional): Função a ser chamada assim que a imagem for carregada. Será passado o p5.Image . -loadImage__params__failureCallback = Função (Evento) (Opcional): chamada no caso de erro no carregamento da imagem. -image__description__0 = Desenha uma imagem no canvas do p5.js. -image__description__1 = Esta função pode ser usada com um número diferente de parâmetros. O uso mais simples requer apenas três parâmetros: img, x, y — onde (x, y) são a posição da imagem. Mais dois parâmetros podem ser adicionados opcionalmente para especificar a largura (width) e altura(height) da imagem. -image__description__2 = Esta função também pode ser usada com todos os oito parâmetros. Para diferenciar entre todos esses parâmetros, p5.js usa a linguagem de "retângulo de destino" (na imagem: "destination rectangle") que corresponde a "dx", "dy", e "imagem de origem" (na imagem: "source image") que corresponde a "sx", "sy" abaixo. Especificar as dimensões da "imagem de origem" pode ser útil quando você deseja exibir uma subseção da imagem de origem em vez de tudo. Aqui está um diagrama para explicar melhor: -image__params__img = p5.Imagem | p5.Element: a imagem a ser exibida -image__params__x = Número: a coordenada do eixo x do canto superior esquerdo da imagem -image__params__y = Número: a coordenada do eixo y do canto superior esquerdo da imagem -image__params__width = Número: (opcional) a largura (width) para da imagem -image__params__height = Número: (opcional) a altura (height) da imagem -tint__description__0 = Define o valor de preenchimento das imagens desenhadas com a função image (). Você pode tingir uma imagem ou ajustar sua transparência por meio de um valor alpha. -tint__description__1 = Para aplicar transparência enquanto mantém a cor original da imagem, você pode atribuir um valor alfa à tonalidade branca. Por exemplo, tint (255, 128) tornará a imagem 50% transparente (assumindo o intervalo alfa padrão de 0-255, que pode ser alterado com colorMode () ). -tint__description__2 = O valor do parâmetro cinza deve ser menor ou igual ao valor máximo atual, conforme especificado por colorMode () . O valor máximo padrão é 255. -tint__params__v1 = Number: o valor de vermelho ou de matiz (dependendo do formato de cor sendo utilizado) -tint__params__v2 = Número: valor do verde em modo RGB ou da saturação de cor no modo HSB -tint__params__v3 = Número: valor do azul em modo RGB ou do brilho de cor no modo HSB -tint__params__alpha = Número (opcional): valor de alpha (opacidade) do preenchimento -tint__params__value = String: uma string de cor -tint__params__gray = Número: um valor de cinza -tint__params__values = Número[]: uma array contendo os valores de vermelho, verde, azul e alpha (transparência) da cor final -tint__params__color = p5.Color: a cor da tonalidade a ser aplicada -noTint__description__0 = Remove o valor de preenchimento atual e restaura as cores originais da imagem. -imageMode__description__0 = Define o modo de imagem. Modifica o local de onde as imagens são desenhadas, alterando a maneira como os parâmetros dados a image () são interpretados. O modo padrão é imageMode (CORNER), que interpreta o segundo e o terceiro parâmetros de image () como o canto superior esquerdo da imagem. Se dois parâmetros adicionais forem especificados, eles serão usados para definir a largura (width) e a altura (height) da imagem. -imageMode__description__1 = imageMode (CORNERS) interpreta o segundo e terceiro parâmetros de image () como a localização de um canto, e o quarto e quinto parâmetros como o canto oposto. -imageMode__description__2 = imageMode (CENTER) interpreta o segundo e terceiro parâmetros de image () como o ponto central da imagem. Se dois parâmetros adicionais forem especificados, eles serão usados para definir a largura e a altura da imagem. -imageMode__params__mode = Constante: CORNER, CORNERS ou CENTER -pixels__description__0 = Uint8ClampedArray contendo os valores de todos os pixels na tela de exibição. Os valores dos pixels são expressos em números. A array tem quatro vezes o tamanho da tela de exibição (incluindo um fator para densidade de pixels), representando os valores R, G, B e A para cada pixel. A array é preenchida da esquerda para a direita em linhas e depois para baixo em colunas. Telas de retina e outras telas de alta densidade também têm matrizes maiores de pixels [] (devido ao coeficiente pixelDensity ^ 2). Se uma imagem em uma tela comum tiver 100x100 pixels e seu arranjo for 40.000, então na Retina o arranjo seria 160.000. -pixels__description__1 = Os primeiros 4 valores na array (ou seja, índice 0-3) são os valores R, G, B, A no pixel (0,0) , os próximos 4 valores ( ou seja, o índice 4 - 7) contém os valores R, G, B, A no pixel (1,0) . O exemplo abaixo mostra como definir o valor do pixel em uma coordenada específica (x, y). 
    let d = pixelDensity(); for (let i = 0; i < d; i++) { "{" } · for (let j = 0; j < d; j++) { "{" } · // loop over · index = 4 * ((y * d + j) * width * d + (x * d + i)); · pixels[index] = r; · pixels[index+1] = g; · pixels[index+2] = b; · pixels[index+3] = a; · { "}" } { "}" }
    -pixels__description__2 = Este exemplo parece um pouco complicado, mas é flexível o suficiente para usar qualquer pixelDensity. Observe que set() define automaticamente todos os valores na array de pixels [] para um determinado (x, y) em qualquer pixelDensity. No entanto, modificar uma matriz várias vezes pode reduzir o desempenho. -pixels__description__3 = Antes de acessar esta array, os dados devem ser carregados com a função loadPixels () . Depois que os dados da array forem modificados, a função updatePixels() deve ser executada para atualizar as alterações. -pixels__description__4 = Observe que esta referência não é uma array JavaScript padrão, portanto, funções JavaScript padrão como slice() ou arrayCopy()não funcionarão. -blend__description__0 = Copia áreas de pixels de uma imagem para outra usando um modo de mesclagem especificado pelo usuário. -blend__params__srcImage = p5.Imagem: imagem de origem -blend__params__sx = Inteiro: valor da coordenada x do canto superior esquerdo da área original -blend__params__sy = Inteiro: valor da coordenada y do canto superior esquerdo da área original -blend__params__sw = Inteiro: largura (width) da imagem de origem -blend__params__sh = Inteiro: altura (height) da imagem de origem -blend__params__dx = Inteiro: valor da coordenada y do canto superior esquerdo da área de destino -blend__params__dy = Inteiro: valor da coordenada y do canto superior esquerdo da área de destino -blend__params__dw = Inteiro: largura (width) da imagem de destino -blend__params__dh = Inteiro: altura (height) da imagem de destino -blend__params__blendMode = Constante: o modo de mesclagem, podem ser: BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD ou NORMAL. -copy__description__0 = Copia os pixels de uma área da canvas para outra. Esta função pode ser utilizada como um método de imagem, neste caso deve ser definida uma imagem de origem através do parâmetro srcImg . Neste caso, uma área de pixels da uma imagem de origem será copiada para uma área de outra imagem especificada pelo usuário. Se as áreas de origem e destino da cópia não forem do mesmo tamanho, a área de pixel de origem será redimensionada automaticamente para se ajustar ao tamanho da área de destino. -copy__params__srcImage = p5.Image | p5.Element: imagem de origem -copy__params__sx = Inteiro: valor da coordenada x do canto superior esquerdo da área de origem -copy__params__sy = Inteiro: valor da coordenada y do canto superior esquerdo da área de origem -copy__params__sw = Inteiro: largura (width) da imagem de origem -copy__params__sh = Inteiro: altura (height) da imagem de origem -copy__params__dx = Inteiro: valor da coordenada x do canto superior esquerdo da área de destino -copy__params__dy = Inteiro: valor da coordenada y do canto superior esquerdo da área de destino -copy__params__dw = Inteiro: largura (width) da imagem de destino -copy__params__dh = Inteiro: altura (height) da imagem de destino -filter__description__0 = Aplica um filtro à Canvas. As opções predefinidas são: -filter__description__1 = THRESHOLD Converte a imagem em pixels preto e branco, dependendo se eles estão acima ou abaixo do limite definido pelo parâmetro de (level) nível. O parâmetro deve estar entre 0 (preto) e 1 (branco). Se nenhum valor for especificado, o valor 0,5 é definido por padrão. -filter__description__2 = GRAY Converte as cores da imagem em tons de cinza equivalentes. Nenhum parâmetro é usado. -filter__description__3 = OPAQUE Define o canal alpha como totalmente opaco. Nenhum parâmetro é usado. -filter__description__4 = INVERT Define cada pixel para o seu valor inverso. Nenhum parâmetro é usado. -filter__description__5 = POSTERIZE Limita cada canal da imagem ao número de cores especificado como parâmetro. Os valores do parâmetro podem ser definidos entre 2 e 255, mas os resultados são mais perceptíveis nas faixas inferiores. -filter__description__6 = BLUR aplica um desfoque gaussiano à imagem. O parâmetro nível define o valor do raio do desfoque desvio, ou quantos pixels na tela se misturam, portanto, um valor maior criará mais desfoque. Se nenhum parâmetro for usado o valor do raio de desfoque será 1, por definição. -filter__description__7 = ERODE Reduz as áreas claras. Nenhum parâmetro é usado. -filter__description__8 = DILATE Aumenta as áreas claras. Nenhum parâmetro é usado. -filter__description__9 = o método filter() não funciona no modo WEBGL. Um efeito semelhante pode ser obtido no modo WEBGL usando shaders personalizados. Adam Ferriss escreveu uma seleção de exemplos de shaders que contém muitos dos efeitos presentes nos exemplos de filtro. -filter__params__filterType = THRESHOLD, GRAY, OPAQUE, INVERT, · POSTERIZE, BLUR, ERODE, DILATE ou BLUR. Veja Filters.js para documentação de cada filtro disponível. -filter__params__filterParam = Número (opcional): este parâmetro varia de acordo com o filtro, veja a descrição acima. -get__description__0 = Obtém uma área de pixels especificada ou pixel único do Canvas. -get__description__1 = Retorna uma matriz de valores [R, G, B, A] para um pixel específico ou uma área de uma imagem. Se nenhum parâmetro for especificado, a imagem inteira será retornada. Você pode obter as coordenadas de um pixel específico por meio dos parâmetros x e y. Uma área da janela de exibição também pode ser especificada por meio dos parâmetros adicionais w, h. Ao buscar uma imagem, os parâmetros x e y definem as coordenadas do canto superior esquerdo, independentemente do imageMode() atual. -get__description__2 = Obter a cor de um único pixel com a função get (x, y) é uma maneira fácil, mas não é tão rápida quanto obter os dados diretamente da array pixels[]. Você pode obter o mesmo resultado de get (x, y) utilizando a array pixels[] e o parâmetro de densidade de pixels d, como no exemplo a seguir: 
    let x, y, d; // set these to the coordinates let off = (y * width + x) * d * 4; let components = [ · pixels[off], · pixels[off + 1], · pixels[off + 2], · pixels[off + 3] ]; print(components);
    -get__description__3 = Consulte pixels[] para obter mais informações. -get__description__4 = Se você deseja extrair uma array de cores ou uma subimagem de um objeto do tipo p5.Image, dê uma olhada em p5.Image.get() -get__returns = p5.Image: o retângulo p5.Image -get__params__x = Número: coordenada do pixel relativo ao eixo X -get__params__y = Número: coordenada do pixel relativo ao eixo Y -get__params__w = Número: largura (width) -get__params__h = Número: altura (height) -loadPixels__description__0 = Esta função carrega os dados de pixel da janela de exibição na array pixels[] . Esta função sempre deve ser chamada antes de ler ou gravar na array pixels[] . Observe que somente ocorrerão as alterações feitas com set() ou manipulação direta de pixels[] . -set__description__0 = Altera a cor de qualquer pixel ou grava uma imagem diretamente na janela de exibição. Os parâmetros "x" e "y" especificam o pixel a ser alterado. O parâmetro "c" especifica o valor da cor, pode ser um objeto p5.Color , uma matriz de pixels [R, G, B, A] ou um valor único de escala de cinza. Ao definir uma imagem, os parâmetros "x" e "y" definem as coordenadas para o canto superior esquerdo da imagem, independentemente do atual imageMode() . -set__description__1 = Depois de usar set() , você deve chamar updatePixels() para que suas alterações apareçam. A função updatePixels() deve ser chamada assim que todos os pixels forem definidos e também antes de chamar a função get() ou desenhar a imagem. -set__description__2 = Definir a cor de um único pixel com set (x, y) é simples, mas não tão rápido quanto colocar os dados diretamente na array pixels[] . Definir os valores de pixels[] diretamente pode ser complicado ao trabalhar com uma tela de retina, mas terá um desempenho melhor se muitos pixels precisam ser definidos diretamente em cada loop. Consulte pixels[] para obter mais informações. -set__params__x = Número: coordenada do pixel relativo ao eixo X -set__params__y = Número: coordenada do pixel relativo ao eixo Y -set__params__c = Número | Número[] | Objeto: insira um valor de escala de cinza | uma matriz de pixels | um objeto p5.Color | uma p5.Image para copiar -updatePixels__description__0 = Atualiza a janela de exibição com os dados contidos na array pixels[] . Use em conjunto com a função loadPixels() . Se você estiver apenas lendo pixels da array, não há necessidade de chamar updatePixels() - a atualização é necessária apenas para aplicar as alterações. A função updatePixels() deve ser chamada sempre que a array de pixels for manipulada ou a função set() for chamada. Apenas alterações feitas com set () ou alterações diretas em pixels [] ocorrerão. -updatePixels__params__x = Número: (opcional) coordenada x do canto superior esquerdo da área a ser atualizada -updatePixels__params__y = Número: (opcional) coordenada y do canto superior esquerdo da área a ser atualizada -updatePixels__params__w = Número (opcional): largura da região a ser atualizada -updatePixels__params__h = Número (opcional): altura da região a ser atualizada -loadJSON__description__0 = Carrega um arquivo JSON de um arquivo ou URL e retorna um Object. Observe que, mesmo se o arquivo JSON contiver um Array, um Object será retornado com os números de índice como keys. -loadJSON__description__1 = Este método é assíncrono, o que significa que pode não terminar antes que a próxima linha em seu esboço seja executada. JSONP é suportado por meio de um polyfill e você pode passar como o segundo argumento um objeto com definições do retorno de chamada json seguindo a sintaxe especificada aqui . -loadJSON__description__2 = Este método é adequado para buscar arquivos de até 64 MB. -loadJSON__returns = Object | Array: dados do JSON -loadJSON__params__path = String: nome do arquivo ou url para carregar -loadJSON__params__jsonpOptions = Object: (opcional) objeto de opções para configurações relacionadas ao jsonp -loadJSON__params__datatype = String: (Opcional) "json" ou "jsonp" -loadJSON__params__callback = Função: (Opcional) função a ser executada após a conclusão de loadJSON () , os dados são passados como primeiro argumento -loadJSON__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro, a resposta é passada como primeiro argumento -loadStrings__description__0 = Lê o conteúdo de um arquivo e cria uma array String de suas linhas individuais. Se o nome do arquivo for usado como parâmetro, como no exemplo acima, o arquivo deve estar localizado no diretório / pasta de esboço. -loadStrings__description__1 = Alternativamente, o arquivo pode ser carregado de qualquer lugar no computador local usando um caminho absoluto (algo que começa com / no Unix e Linux, ou uma letra de unidade no Windows), ou o parâmetro do nome do arquivo pode ser uma URL para um arquivo encontrado em um rede. -loadStrings__description__2 = Este método é assíncrono, o que significa que não pode terminar antes que a próxima linha em seu esboço seja executada. -loadStrings__description__3 = Este método é adequado para buscar arquivos de até 64 MB. -loadStrings__returns = String[]: Array de Strings -loadStrings__params__filename = String: nome do arquivo ou da url para carregar -loadStrings__params__callback = Função: (Opcional) função a ser executada após a conclusão de loadStrings () , a Array é passada como primeiro argumento -loadStrings__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro, a resposta é passada como primeiro argumento -loadTable__description__0 = Lê o conteúdo de um arquivo ou URL e cria um objeto p5.Table com seus valores. Se um arquivo for especificado, ele deve estar localizado na pasta "data" do esboço. O parâmetro filename também pode ser um URL para um arquivo online. Por padrão, o arquivo é considerado separado por vírgulas (no formato CSV). A tabela só procura uma linha de cabeçalho se a opção 'cabeçalho' estiver incluída. -loadTable__description__1 = Este método é assíncrono, o que significa que não pode terminar antes que a próxima linha em seu esboço seja executada. Chamar loadTable () dentro de preload () garante a conclusão da operação antes de setup () e draw () são chamados. Fora de preload () , você pode fornecer uma função de retorno de chamada para manipular o objeto: -loadTable__description__2 = Todos os arquivos carregados e salvos usam a codificação UTF-8. Este método é adequado para buscar arquivos de até 64 MB. -loadTable__returns = Object: objeto Tabela contendo dados -loadTable__params__filename = String: nome do arquivo ou da URL para carregar -loadTable__params__extension = String: (Opcional) analisa a tabela por valores separados por vírgula "csv", valores separados por ponto e vírgula "ssv" ou valores separados por tabulação "tsv" -loadTable__params__header = String: (Opcional) "header" para indicar que a tabela tem uma linha de cabeçalho -loadTable__params__callback = Função: (Opcional) função a ser executada após a conclusão de loadTable () . Em caso de sucesso, o objeto Tabela é passado como o primeiro argumento. -loadTable__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro, a resposta é passada como primeiro argumento -loadXML__description__0 = Lê o conteúdo de um arquivo e cria um objeto XML com seus valores. Se o nome do arquivo for usado como parâmetro, como no exemplo acima, o arquivo deve estar localizado no diretório / pasta de sketch. -loadXML__description__1 = Alternativamente, o arquivo pode ser carregado de qualquer lugar no computador local usando um caminho absoluto (algo que começa com / no Unix e Linux, ou uma letra de unidade no Windows), ou o parâmetro do nome do arquivo pode ser uma URL para um arquivo encontrado em uma rede. -loadXML__description__2 = Este método é assíncrono, o que significa que não pode terminar antes que a próxima linha em seu esboço seja executada. Chamar loadXML () dentro de preload () garante a conclusão da operação antes que setup () e draw () sejam chamados. -loadXML__description__3 = Fora de preload () , você pode fornecer uma função de retorno de chamada para manipular o objeto. -loadXML__description__4 = Este método é adequado para buscar arquivos de até 64 MB. -loadXML__returns = Object: objeto XML contendo dados -loadXML__params__filename = String: nome do arquivo ou da URL para carregar -loadXML__params__callback = Função: (Opcional) função a ser executada após a conclusão de loadXML () , o objeto XML é passado como primeiro argumento -loadXML__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro, a resposta é passada como primeiro argumento -loadBytes__description__0 = Este método é adequado para buscar arquivos de até 64 MB. -loadBytes__returns = Object: um objeto cuja propriedade 'bytes' será carregado no buffer -loadBytes__params__file = String: nome do arquivo ou da URL para carregar -loadBytes__params__callback = Função: (Opcional) função a ser executada após a conclusão de loadBytes () -loadBytes__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro -httpGet__description__0 = Método para executar uma solicitação HTTP GET. Se o tipo de dados não for especificado, o p5 tentará adivinhar com base na URL, assumindo como padrão o texto. Isso é equivalente a chamar httpDo (path, 'GET') . O tipo de dados 'binário' retornará um objeto Blob e o tipo de dados 'arrayBuffer' retornará uma ArrayBuffer que pode ser usado para inicializar arrays digitadas (como Uint8Array). -httpGet__returns = Promise: uma "promessa" que se resolve com os dados quando a operação é concluída com sucesso ou rejeita com o erro depois que ocorre. -httpGet__params__path = String: nome do arquivo ou da url para carregar -httpGet__params__datatype = String: (Opcional) "json", "jsonp", "binary", "arrayBuffer", "xml" ou "text" -httpGet__params__data = Object | Boolean: (Opcional) dados de parâmetros enviados com solicitação -httpGet__params__callback = Função: (Opcional) função a ser executada após a conclusão de httpGet () , os dados são passados como primeiro argumento -httpGet__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro, a resposta é passada como primeiro argumento -httpPost__description__0 = Método para executar uma solicitação HTTP POST. Se o tipo de dados não for especificado, o p5 tentará adivinhar com base na URL, assumindo como padrão o texto. Isso é equivalente a chamar httpDo (path, 'POST') . -httpPost__returns = Promise: uma "promessa" que se resolve com os dados quando a operação é concluída com sucesso ou rejeita com o erro depois que ocorre. -httpPost__params__path = String: nome do arquivo ou da url para carregar -httpPost__params__datatype = String: (Opcional) "json", "jsonp", "xml" ou "text". Se omitido, a httpPost () irá tentar adivinhar. -httpPost__params__data = Object | Boolean: (Opcional) dados de parâmetros enviados com solicitação -httpPost__params__callback = Função: (Opcional) função a ser executada após a conclusão de httpPost () , os dados são passados como primeiro argumento -httpPost__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro, a resposta é passada como primeiro argumento -httpDo__description__0 = xmlMétodo para executar uma solicitação tipo HTTP. Se o tipo de dados não for especificado, o p5 tentará adivinhar com base na URL, assumindo como padrão o texto. Para um uso mais avançado, você também pode passar o caminho como o primeiro argumento e um object como o segundo argumento, a assinatura segue aquela especificada na especificação da Fetch API. Este método é adequado para buscar arquivos de até 64 MB quando "GET" é usado. -httpDo__returns = Promise: uma "promessa" que se resolve com os dados quando a operação é concluída com sucesso ou rejeita com o erro depois que ocorre. -httpDo__params__path = String: nome do arquivo ou da url para carregar -httpDo__params__method = String: (Opcional) "GET", "POST" ou "PUT", o padrão é "GET" -httpDo__params__datatype = String: (Opcional) "json", "jsonp", "xml" ou "text" -httpDo__params__data = Object: (Opcional) dados de parâmetros transmitidos enviados com solicitação -httpDo__params__callback = Função: (Opcional) função a ser executada após a conclusão de httpGet () , os dados são passados como primeiro argumento -httpDo__params__errorCallback = Função: (Opcional) função a ser executada se houver um erro, a resposta é passada como primeiro argumento -httpDo__params__options = Object: Solicita as opções de objeto conforme documentado na referência da "fetch" API -createWriter__returns = p5.PrintWriter: -createWriter__params__name = String: nome do arquivo a ser criado -createWriter__params__extension = String: (Opcional) uma string com o nome do arquivo que será salvo -save__description__0 = Salva um determinado elemento (imagem, texto, json, csv, wav ou html) no computador cliente. O primeiro parâmetro pode ser uma indicação do elemento que queremos salvar. O elemento pode ser p5.Element , uma Array de Strings, uma Array de JSON, um objeto JSON, um p5.Table , um p5.Image ou um p5.SoundFile (requer p5.sound). O segundo parâmetro é um nome de arquivo (incluindo a extensão). O terceiro parâmetro é para opções específicas para este tipo de objeto. Este método salvará um arquivo que se encaixa nos parâmetros fornecidos. Se for chamado sem especificar um elemento, por padrão, ele salvará toda a tela como um arquivo de imagem. Você pode, opcionalmente, especificar um nome de arquivo como o primeiro parâmetro nesse caso. Observe que não é recomendado chamar esse método dentro do draw, pois ele abrirá uma nova caixa de diálogo para salvar a cada renderização. -save__params__objectOrFilename = Object | String: (Opcional) Se o nome do arquivo for fornecido, salvará a tela como uma imagem com extensão png ou jpg, dependendo do nome do arquivo. Se o objeto for fornecido, o salvará dependendo do objeto e do nome do arquivo (veja os exemplos acima). -save__params__filename = String: (Opcional) Se um objeto for fornecido como o primeiro parâmetro, o segundo parâmetro indica o nome do arquivo e deve incluir uma extensão de arquivo apropriada (consulte os exemplos acima). -save__params__options = Boolean | String: (Opcional) As opções adicionais dependem do tipo de arquivo. Por exemplo, ao salvar JSON, true indica que a saída será otimizada para o tamanho do arquivo, em vez de legibilidade. -saveJSON__description__0 = Grava o conteúdo de um objeto Array ou JSON em um arquivo .json. O processo de salvamento do arquivo e a localização do arquivo salvo variam entre os navegadores da web. -saveJSON__params__json = Array | Object -saveJSON__params__filename = String -saveJSON__params__optimize = Boolean: (Opcional) Se true (verdadeiro), remove quebras de linha e espaços do arquivo de saída para otimizar o tamanho do arquivo (mas não a legibilidade). -saveStrings__description__0 = Grava uma array de Strings em um arquivo de texto, uma linha por String. O processo de salvamento do arquivo e a localização do arquivo salvo variam entre os navegadores da web. -saveStrings__params__list = String []: string array a ser escrito -saveStrings__params__filename = String: nome do arquivo a ser gerado -saveStrings__params__extension = String: (Opcional) extensão do nome do arquivo -saveStrings__params__isCRLF = Boolean: (Opcional) se true (verdadeiro), altere a quebra de linha para CRLF -saveTable__description__0 = Grava o conteúdo de um objeto Table em um arquivo. O padrão é um arquivo de texto com valores separados por vírgula ('csv'), mas também pode usar separação por tabulação ('tsv') ou gerar uma tabela HTML ('html'). O processo de salvamento do arquivo e a localização do arquivo salvo variam entre os navegadores da web. -saveTable__params__Table = p5.Table: o objeto Table para salvar em um arquivo -saveTable__params__filename = String: o nome do arquivo no qual a Table deve ser salva -saveTable__params__options = String: (Opcional) pode ser "tsv", "csv" ou "html" -abs__description__0 = Calcula o valor absoluto (magnitude) de um número. Corresponde à função Math.abs(). O valor absoluto de um número é sempre positivo. -abs__returns = Número: valor absoluto do número em questão. -abs__params__n = Número: número a ser calculado o valor absoluto. -ceil__description__0 = Calcula o número inteiro mais próximo que seja maior ou igual ao valor passado como parâmetro da função, ou seja, arredonda o número para cima. Corresponde a Math.ceil(). Por exemplo, ceil(9.03) retorna o valor 10. -ceil__returns = Número: número inteiro correspondendo ao valor passado à função arredondado para cima. -ceil__params__n = Número: número a ser arredondado. -constrain__description__0 = Limita o valor passado à função entre um valor mínimo e um máximo. -constrain__returns = Número: o valor do parâmetro, restrito entre os limites definidos. -constrain__params__n = Número: valor a ser restringido. -constrain__params__low = Número: valor limite mínimo. -constrain__params__high = Número: valor limite máximo. -dist__description__0 = Calcula a distância entre dois pontos, tanto em duas quanto em três dimensões. Se você estiver buscando a distância entre dois vetores, veja a função dist(). -dist__returns = Número: distância entre dois pontos. -dist__params__x1 = Number: x-coordinate do primeiro ponto -dist__params__y1 = Number: y-coordinate do primeiro ponto -dist__params__x2 = Number: x-coordinate do segundo ponto -dist__params__y2 = Number: y-coordinate do segundo ponto -dist__params__z1 = Number: z-coordinate do primeiro ponto -dist__params__z2 = Number: z-coordinate do segundo ponto -exp__description__0 = Retorna o número de Euler — e (2.71828...) elevado à potência do parâmetro n. Corresponde à função Math.exp(). -exp__returns = Número: número de Euler (e) elevado à potência de n. -exp__params__n = Número: expoente para elevar o número de Euler. -floor__description__0 = Calcula o número inteiro mais próximo que seja menor ou igual ao valor passado como parâmetro da função, ou seja, arredonda o número para baixo. Corresponde a Math.floor(). Por exemplo, floor(10.8) retorna o valor 10. -floor__returns = Número: número inteiro correspondendo ao valor passado à função arredondado para baixo. -floor__params__n = Número: número a ser arredondado. -lerp__description__0 = Realiza uma interpolação linear, ou seja, calcula um número entre dois números, de acordo com um incremento específico. O parâmetro amt é a quantia a interpolar entre os dois números, onde 0.0 é igual ao primeiro valor, 0.1 é muito próximo ao primeiro valor, 0.5 é a média entre os dois, e 1.0 é igual ao segundo valor. Se o valor de amt for menor que 0 ou maior que 1, o número será calculado proporcionalmente. A função lerp() é útil para criar movimento dentro de uma linha reta, e para desenhar linhas pontilhadas. -lerp__returns = Número: o valor resultante da interpolação. -lerp__params__start = Número: primeiro valor a ser interpolado. -lerp__params__stop = Número: segundo valor a ser interpolado. -lerp__params__amt = Número: incremento da interpolação. -randomSeed__description__0 = Configura o valor da semente da função random(). -randomSeed__description__1 = - Por padrão, a função random() produz resultados diferentes a cada vez que o programa é executado. Configure uma semente padrão para ter sempre a mesma ordem de números pseudo-aleatórios a cada vez que executa seu sketch. - Para compreender mais sobre a semente do gerador de números aleatórios, veja este material do Instituto de Matemática e Estatística da Universidade de São Paulo. -randomSeed__params__seed = Número: o valor da semente. -textAlign__description__0 = Define o alinhamento atual para o texto que será desenhado. Aceita dois argumentos: horizAlign (LEFT, CENTER ou RIGHT) e vertAlign (TOP, BOTTOM, CENTER ou BASELINE). -textAlign__description__1 = O parâmetro horizAlign se refere ao parâmetro x da função text() , enquanto o parâmetro vertAlign se refere ao parâmetro y. -textAlign__description__2 = Portanto, se você escrever textAlign (LEFT), estará alinhando a borda esquerda do seu texto com o valor x fornecido em text() . Se você escrever textAlign (RIGHT, TOP), estará alinhando a borda direita do texto com o valor x e a parte superior da borda do texto com o valor y. -textAlign__params__horizAlign = Constante: alinhamento horizontal, aceita os valores LEFT, CENTER, ou RIGHT -textAlign__params__vertAlign = Constante (opcional): alinhamento vertical, aceita os valores TOP, BOTTOM, CENTER, ou BASELINE. -textLeading__description__0 = Define/obtém o espaçamento, em pixels, entre as linhas de texto. Esta configuração será usada em todas as chamadas subsequentes para a função text() . -textLeading__params__leading = Número: o tamanho em pixels para espaçamento entre linhas -textSize__description__0 = Define/obtém o tamanho da fonte atual. Este tamanho será usado em todas as chamadas subsequentes para a função text() . O tamanho da fonte é medido em pixels. -textSize__params__theSize = Número: o tamanho das letras em unidades de pixels -textStyle__description__0 = Define/obtém o estilo do texto das fontes do sistema para NORMAL, ITALIC, BOLD ou BOLDITALIC. Nota: pode ser anulada pelo estilo CSS. Para fontes que não são do sistema (opentype, truetype, etc.), carregue as fontes estilizadas com a função loadFont() . -textStyle__params__theStyle = Constante: estilo do texto, NORMAL, ITALIC, BOLD ou BOLDITALIC -textWidth__description__0 = Calcula e retorna a largura de qualquer caractere ou string de texto. -textWidth__returns = Número: a largura calculada -textWidth__params__theText = String: a string de caracteres a medir -textAscent__description__0 = Retorna ao valor do ascendente da fonte atual em seu tamanho atual. O ascendente é a altura máxima do corpo da fonte. O valor retornado pela função representa a distância em pixels da linha de base até o ponto mais alto do caractere mais alto da fonte. -textAscent__returns = Número: -textDescent__description__0 = Retorna ao valor da linha descendente da fonte atual em seu tamanho atual. O descendente é a linha que acompanha quão abaixo da linha de base os caracteres alcançam (por exemplo caracteres como g, j, p e q) . O valor retornado pela função representa a distância em pixels da linha de base até o ponto mais baixo que a fonte se estende. -textDescent__returns = Número: -textWrap__description__0 = Especifica como as linhas de texto são quebradas em uma caixa de texto. Isso requer uma largura máxima definida na área de texto, especificada em text() como parâmetro x2 . -textWrap__description__1 = O estilo de quebra de palavra WORD somente quebra linhas em espaços. Uma única string sem espaços que exceda os limites da tela ou área de texto não será truncada e irá extravasar a área desejada, desaparecendo na borda da tela. -textWrap__description__2 = O estilo de quebra de linha CHAR quebra as linhas sempre que necessário para permanecer dentro da caixa de texto. -textWrap__description__3 = WORD é o estilo de quebra de linha padrão e ambos os estilos ainda quebrarão linhas em qualquer quebra de linha ( \ n ) especificada no texto original. O parâmetro max-height da área de texto ( y2 ) também se aplica ao texto quebrado em ambos os estilos, linhas de texto que não cabem na área de texto não serão desenhadas na tela. -textWrap__returns = String: wrapStyle -textWrap__params__wrapStyle = Constante: estilo de quebra automática de texto, WORD ou CHAR -loadFont__description__0 = Carrega um arquivo de fonte opentype (.otf, .ttf) de um arquivo ou URL e retorna um objeto P5.Font. Este método é assíncrono, o que significa que pode não terminar antes que a próxima linha em seu esboço seja executada. -loadFont__description__1 = O caminho para a fonte deve ser relativo à localização do arquivo HTML que se refere ao seu sketch. O carregamento de uma fonte a partir de uma URL que se refere a um local remoto pode falhar, devido a bloqueios impostos pelas políticas de segurança do seu navegador. -loadFont__returns = p5.Font: objeto do tipo p5.Font -loadFont__params__path = String: nome do arquivo ou url para ser carregada -loadFont__params__callback = Função (opcional): função a ser executada após a conclusão de loadFont() -loadFont__params__onError = Função: (opcional) função a ser executada se ocorrer um erro durante o carregamento -text__description__0 = Desenha texto na tela. Exibe as informações especificadas no primeiro parâmetro na tela na posição especificada pelos parâmetros adicionais. Uma fonte padrão será usada a menos que uma fonte seja definida com a função textFont() e um tamanho padrão será usado a menos que seja definido com textSize() . Propriedades como cor do texto e contorno podem ser alteradas com a funções fill() , stroke() e strokeWeight() . -text__description__1 = O texto é exibido em relação à função textAlign() , que oferece a opção de desenhar à esquerda, à direita e ao centro das coordenadas x e y. -text__description__2 = Os parâmetros x2e y2 definem uma caixa de texto retangular dentro da qual o texto será exibido. Quando esses parâmetros são especificados, eles são interpretados com base na configuração atual de rectMode () . O texto que não se ajusta completamente ao retângulo especificado não será desenhado na tela. Se x2 e y2 não forem especificados, o alinhamento da linha de base será o padrão, o que significa que o texto será desenhado para cima a partir das coordenadas x e y. Note que os parâmetros x2 e y2 só podem ser usados quando o primeiro parâmetro da função text() é uma string. -text__description__3 = WEBGL : Apenas fontes opentype / truetype são suportadas. Você deve carregar uma fonte usando o método loadFont() (veja o exemplo acima). A função stroke() atualmente não tem efeito no modo WEBGL. -text__params__str = String | Objeto | Array | Número | Booleano: os símbolos alfanuméricos a serem exibidos -text__params__x = Número: coordenada x do texto -text__params__y = Número: coordenada y do texto -text__params__x2 = Número (opcional): por padrão, a largura da caixa de texto, consulte rectMode() para obter mais informações -text__params__y2 = Número (opcional): por padrão, a altura da caixa de texto, consulte rectMode() para obter mais informações -textFont__description__0 = Define a fonte a ser utilizada na função text() . Se textFont() for chamada sem nenhum argumento, ela retornará a fonte atual se uma já tiver sido definida. Caso contrário, ele retornará o nome da fonte padrão como uma string. -textFont__description__1 = WEBGL : Apenas fontes carregadas via loadFont() são suportadas. -textFont__returns = Objeto: a fonte atual / Objeto do tipo p5.Font -textFont__params__font = Object | String: uma fonte carregada via loadFont() , ou uma String representando uma web fonte segura (uma fonte geralmente disponível em todos os sistemas) -textFont__params__size = Número (opcional): o tamanho da fonte em pixels -append__description__0 = Adiciona um valor ao final de uma array. Aumenta o comprimento da array em um. É equivalente a Array.push(). -append__returns = Array: a array a ser adicionada a -append__params__array = Array: Array a ser adicionada -append__params__value = Qualquer: qualquer valor a ser adicionado na array -arrayCopy__description__0 = Copia uma array (ou parte de uma array) para outra array. A array src é copiada para a array dst, começando na posição especificada por srcPosition e na posição especificada por dstPosition. O número de elementos a serem copiados é determinado pelo comprimento. Observe que a cópia dos valores sobrescreve os valores existentes na matriz de destino. Para anexar valores em vez de substituí-los, use concat(). -arrayCopy__description__1 = A versão simplificada com apenas dois argumentos, arrayCopy(src, dst), copia uma array inteira para outra do mesmo tamanho. É equivalente a arrayCopy(src, 0, dst, 0, src.length). -arrayCopy__description__2 = Usar esta função é muito mais eficiente para copiar dados da array do que iterar através de um loop for() e copiar cada elemento individualmente. -arrayCopy__params__src = Array: array de origem (source). -arrayCopy__params__srcPosition = Número: posição inicial na array de origem -arrayCopy__params__dst = Array: array de destino -arrayCopy__params__dstPosition = Número: posição inicial na array de destino -arrayCopy__params__length = Número: número de elementos da array a serem copiados -concat__description__0 = Concatena dois arrays, equivalente a Array.concat(). Não modifica as arrays de entrada. -concat__returns = Array: a array concatenada -concat__params__a = Array: primeira array a ser concatenada -concat__params__b = Array: segunda array a ser concatenada -reverse__description__0 = Inverte a ordem de uma array, equivalente a Array.reverse() -reverse__returns = Array: a lista invertida -reverse__params__list = Array: Array para inverter -shorten__description__0 = Diminui a array em um elemento e retorna a array encurtada, equivalente a Array.pop(). -shorten__returns = Array: a array encurtada -shorten__params__list = Array: a array que será encurtada -shuffle__description__0 = Randomiza a ordem dos elementos de uma array. Implementa o Fisher-Yates Shuffle Algorithm. -shuffle__returns = Array: a array embaralhada -shuffle__params__array = Array: a array que será embaralhada -shuffle__params__bool = Booleano (opcional): modifica a array dada -sort__description__0 = Ordena uma array de números do menor ao maior ou coloca uma array de palavras em ordem alfabética. A array original não é modificada; uma array reordenada é retornada. O parâmetro de contagem indica o número de elementos a serem ordenados. Por exemplo, se houver 12 elementos em uma array e a contagem for definida como 5, apenas os 5 primeiros elementos na array serão ordenados. -sort__returns = Array: a lista ordenada -sort__params__list = Array: a array que será ordenada -sort__params__count = Número (opcional): número de elementos a serem ordenados, começando por 0 -splice__description__0 = Insere um valor ou uma array de valores em uma array existente. O primeiro parâmetro especifica a array inicial que será modificada, e o segundo parâmetro define os dados a serem inseridos. O terceiro parâmetro é um valor de índice que especifica a posição da array a partir da qual inserir os dados. (Lembre-se de que a numeração do índice da array começa em zero, então a primeira posição é 0, a segunda posição é 1 e assim por diante.) -splice__returns = Array: a lista -splice__params__list = Array: array que será emendada -splice__params__value = Qualquer: qualquer valor a ser emendado na array -splice__params__position = Número: índice na array a partir do qual se insere os dados -subset__description__0 = Extrai uma array de elementos de uma array existente. O parâmetro "list" define a array da qual os elementos serão copiados e os parâmetros "start" e "count" especificam quais elementos extrair. Se nenhuma contagem for fornecida, os elementos serão extraídos do início ao fim da array. Ao especificar o início, lembre-se de que o primeiro elemento da array é 0. Esta função não altera a array de origem. -subset__returns = Array: Array de elementos extraídos -subset__params__list = Array: Array da qual se extrair -subset__params__start = Número: posição de início -subset__params__count = Número (opcional): número de valores a serem extraídos -float__description__0 = Converte uma string em sua representação de ponto flutuante. O conteúdo de uma string deve ser semelhante a um número ou NaN (not a number - não número) será retornado. Por exemplo, float ("1234,56") é avaliado como 1234,56, mas float ("girafa") retornará NaN. -float__description__1 = Quando uma array de valores é passada, uma array de floats (pontos flutuantes) do mesmo comprimento é retornada. -float__returns = Número: representação de ponto flutuante da string -float__params__str = String: string flutuante a ser processada -int__description__0 = Converte um booleano, string ou float em sua representação inteira. Quando uma array de valores é passada, uma array de inteiros do mesmo comprimento é retornada. -int__returns = Número: representação inteira do valor -int__params__n = String|Booleano|Número: valor a ser processado -int__params__radix = Inteiro (opcional): a base para a qual converter (padrão: 10) -int__params__ns = Array: valores a serem processados -str__description__0 = Converte um booleano, string ou número em sua representação de string. Quando uma array de valores é passada, uma array de strings do mesmo comprimento é retornada. -str__returns = String: representação de string do valor -str__params__n = String|Booleano|Número|Array: valor a ser processado -byte__description__0 = Converte um número, representação de string de um número ou booleano em sua representação de byte. Um byte pode ser apenas um número inteiro entre -128 e 127, portanto, quando um valor fora desse intervalo é convertido, ele volta para a representação de byte correspondente. Quando uma array de números, strings ou valores booleanos é passada, uma array de bytes com o mesmo comprimento é retornada. -byte__returns = Número: representação em byte do valor -byte__params__n = String|Booleano|Número: valor a ser processado -byte__params__ns = Array: valores a serem processados -char__description__0 = Converte um número ou string em sua representação de string de caractere único correspondente. Se um parâmetro de string for fornecido, ele será primeiro analisado como um número inteiro e, em seguida, convertido em uma string de um único caractere. Quando uma array de números ou valores de string é passada, uma array de strings de um único caractere do mesmo comprimento é retornada. -char__returns = String: representação de string do valor -char__params__n = String|Número: valor a ser processado -char__params__ns = Array: valores a serem processados -unchar__description__0 = Converte uma string de caractere único em sua representação inteira correspondente. Quando uma array de valores de string de caractere único é passada, uma array de inteiros do mesmo comprimento é retornada. -unchar__returns = Número: representação inteira do valor -unchar__params__n = String: valor a ser processado -unchar__params__ns = Array: valores a serem processados -hex__description__0 = Converte um número em uma string em sua notação hexadecimal equivalente. Se um segundo parâmetro é passado, ele é usado para definir o número de caracteres a serem gerados na notação hexadecimal. Quando uma array é passada, uma array de strings em notação hexadecimal do mesmo comprimento é retornada. -hex__returns = String: representação de string hexadecimal do valor -hex__params__n = Número: valor a ser processado -hex__params__digits = Número (opcional) -hex__params__ns = Número []: array de valores a serem processados -unhex__description__0 = Converte uma representação de string de um número hexadecimal em seu valor inteiro equivalente. Quando uma array de strings em notação hexadecimal é passada, uma array de inteiros do mesmo comprimento é retornada. -unhex__returns = Número: representação inteira do valor hexadecimal -unhex__params__n = String: valor a ser processado -unhex__params__ns = Array: valores a serem processados -join__description__0 = Combina uma array de Strings em uma String, cada uma separada pelo(s) caractere(s) usado(s) para o parâmetro separador. Para unir arrays de ints ou floats, é necessário primeiro convertê-las em Strings usando nf() ou nfs(). -join__returns = String: String unida -join__params__list = Array: array de Strings a serem unidas -join__params__separator = String: String a ser colocada entre cada item -match__description__0 = Esta função é usada para aplicar uma expressão regular a um trecho de texto e retornar grupos correspondentes (elementos encontrados entre parênteses) como um vetor de Strings. Se não houver correspondências, um valor nulo será retornado. Se nenhum grupo for especificado na expressão regular, mas a sequência corresponder, um vetor de comprimento 1 (com o texto correspondente como o primeiro elemento do vetor) será retornado. -match__description__1 = Para usar a função, primeiro verifique se o resultado é nulo. Se o resultado for nulo, então a sequência não coincidiu. Se a sequência coincidiu, um vetor é retornada. -match__description__2 = Se houver grupos (especificados por conjuntos de parênteses) na expressão regular, os conteúdos de cada um serão retornados no vetor. O elemento [0] de uma correspondência de uma expressão regular retorna toda a string correspondente e os grupos de correspondência começam no elemento [1] (o primeiro grupo é [1], o segundo [2] e assim por diante). -match__returns = String[]: Vetor de Strings encontrado -match__params__str = String: a String a ser procurada -match__params__regexp = String: a expressão regular a ser usada para procurar correspondências -matchAll__description__0 = Esta função é usada para aplicar uma expressão regular a um trecho de texto e retornar uma lista de grupos correspondentes (elementos encontrados entre parênteses) como uma matriz de strings bidimensional. Se não houver correspondências, um valor nulo será retornado. Se nenhum grupo for especificado na expressão regular, mas a sequência corresponder, uma matriz bidimensional ainda será retornada, mas a segunda dimensão terá apenas o comprimento um. -matchAll__description__1 = Para usar a função, primeiro verifique se o resultado é nulo. Se o resultado for nulo, então a sequência não coincidiu. Se a sequência coincidiu, uma matriz 2D é retornada. -matchAll__description__2 = Se houver grupos (especificados por conjuntos de parênteses) na expressão regular, os conteúdos de cada um serão retornados na matriz. Assumindo um loop com variável de contador i, o elemento [i][0] de uma correspondência de expressão regular retorna toda a string correspondente e os grupos de correspondência começam no elemento [i][1] (o primeiro grupo é [i][1] , o segundo [i][2] e assim por diante). -matchAll__returns = String[]: Array 2D de strings encontradas -matchAll__params__str = String: a String a ser procurada -matchAll__params__regexp = String: a expressão regular a ser usada para procurar correspondências -nf__description__0 = Função utilitária para formatar números em strings. Existem duas versões: uma para formatar floats e outra para formatar ints. Os valores dos dígitos, parâmetros esquerdo e direito devem ser sempre inteiros positivos. (NOTA): Tenha cautela ao usar os parâmetros esquerdo e direito, uma vez que eles adicionam números de 0s se o parâmetro for maior que o comprimento atual do número. Por exemplo, se o número for 123,2 e o parâmetro esquerdo passado for de 4, que é maior que o comprimento de 123 (parte inteira), ou seja, 3, o resultado será 0123,2. Mesmo caso para o parâmetro direito, ou seja, se o direito for 3, o resultado será 123,200. -nf__returns = String: String formatada -nf__params__num = Número|String: o número a ser formatado -nf__params__left = Inteiro|String (opcional): número de dígitos à esquerda da vírgula decimal -nf__params__right = Inteiro|String (opcional):número de dígitos à direita da vírgula decimal -nf__params__nums = Array: os números a se formatar -nfc__description__0 = Função utilitária para formatar números em strings e colocar vírgulas apropriadas para marcar unidades de 1000. Existem duas versões: uma para formatar ints e outra para formatar uma array de ints. O valor do parâmetro correto deve ser sempre um número inteiro positivo. -nfc__returns = String: String formatada -nfc__params__num = Numero|String: o número a ser formatado -nfc__params__right = Inteiro|String (opcional): número de dígitos à direita da vírgula decimal -nfc__params__nums = Array: os números a se formatar -nfp__description__0 = Função utilitária para formatar números em strings. Similar a nf() mas coloca um "+" na frente de números positivos e um "-" na frente de números negativos. Existem duas versões: uma para formatar floats e outra para formatar ints. Os valores dos parâmetros esquerdo e direito devem ser sempre inteiros positivos. -nfp__returns = String: String formatada -nfp__params__num = Número: o número a ser formatado -nfp__params__left = Número (opcional): número de dígitos à esquerda da vírgula decimal -nfp__params__right = Número (opcional): número de dígitos à direita da vírgula decimal -nfp__params__nums = Número[]: os números a se formatar -nfs__description__0 = Função utilitária para formatar números em strings. Similar a nf() mas coloca um "_" (espaço) adicional na frente de números positivos a fim de alinhá-los com números negativos que incluem o sinal "-" (menos). O principal tipo de uso de nfs() pode ser visto quando se deseja alinhar os dígitos (valores de posição) de um número não negativo com algum número negativo (veja o exemplo para obter uma imagem clara). Existem duas versões: uma para formatar floats e outra para formatar ints. Os valores dos dígitos, parâmetros esquerdo e direito, devem ser sempre inteiros positivos.
    Importante: o resultado mostrado no Canvas do alinhamento esperado pode variar com base no tipo de fonte tipográfica que você está usando.
    (NOTA): Tenha cautela ao usar os parâmetros esquerdo e direito, uma vez que eles adicionam números de 0s se o parâmetro for maior que o comprimento atual do número. Por exemplo, se o número for 123,2 e o parâmetro esquerdo passado for de 4, que é maior que o comprimento de 123 (parte inteira), ou seja, 3, o resultado será 0123,2. Mesmo caso para o parâmetro direito, ou seja, se o direito for 3, o resultado será 123,200. -nfs__returns = String: String formatada -nfs__params__num = Número: o número a ser formatado -nfs__params__left = Número (opcional): número de dígitos à esquerda da vírgula decimal -nfs__params__right = Número (opcional): número de dígitos à direita da vírgula decimal -nfs__params__nums = Array: os números a se formatar -split__description__0 = A função split() mapeia para String.split(), ela divide uma String em pedaços usando um caractere ou string como delimitador. O parâmetro delim especifica o caractere ou caracteres que marcam os limites entre cada pedaço. Uma array de String[] é retornado contendo cada uma das peças. -split__description__1 = A função splitTokens() funciona de maneira semelhante, exceto por se dividir usando um intervalo de caracteres em vez de um caractere ou sequência específica. -split__returns = String[]: Array de Strings -split__params__value = String: a String a ser dividida -split__params__delim = String: a String usada para separar os dados -splitTokens__description__0 = A função splitTokens() divide uma String em um ou mais delimitadores de caracteres ou "tokens." O parâmetro delim especifica o caractere ou caracteres a serem usados como limite. -splitTokens__description__1 = Se nenhum caractere delim for especificado, qualquer caractere de espaço em branco será usado para dividir. Os caracteres de espaço em branco incluem tab (\t), nova linha (\n), retorno de carro (\r), alimentação de formulário (\f), e espaço. -splitTokens__returns = String[]: Array de Strings -splitTokens__params__value = String: a String a ser dividida -splitTokens__params__delim = String (opcional): lista de Strings individuais que serão usadas como separadores -trim__description__0 = Remove os caracteres de espaço em branco do início e do final de uma String. Além dos caracteres de espaço em branco padrão, como espaço, retorno de carro e tab, esta função também remove o caractere Unicode "nbsp". -trim__returns = String: uma String aparada -trim__params__str = String: uma String a ser aparada -trim__params__strs = Array: uma Array de Strings a ser aparado -day__description__0 = p5.js se comunica com o relógio do seu computador. A função day() retorna o dia atual como um valor de 1 - 31. -day__returns = Inteiro: o dia atual -hour__description__0 = p5.js se comunica com o relógio do seu computador. A função hour() retorna a hora atual como um valor de 0 - 23. -hour__returns = Inteiro: a hora atual -minute__description__0 = p5.js se comunica com o relógio do seu computador. A função minute() retorna o minuto atual como um valor de 0 - 59. -minute__returns = Inteiro: o minuto atual -millis__description__0 = retorna o número de milissegundos (milésimos de segundo) desde que o programa começou a ser executado (quando setup() é chamado). Esta informação é frequentemente usada para eventos de temporização e sequências de animação. -millis__returns = Número: o número de milissegundos desde que o programa começou a ser executado -month__description__0 = p5.js se comunica com o relógio do seu computador. A função month() retorna o mês atual como um valor de 1 - 12. -month__returns = Inteiro: o mês atual -second__description__0 = p5.js se comunica com o relógio do seu computador. A função second() retorna o segundo atual como um valor de 0 - 59. -second__returns = Inteiro: o segundo atual -year__description__0 = p5.js se comunica com o relógio do seu computador. A função year() retorna o ano atual como um inteiro (2014, 2015, 2016, etc). -year__returns = Inteiro: o ano atual -plane__description__0 = Desenha um plano com largura e altura fornecidas -plane__params__width = Número (opcional): largura do plano -plane__params__height = Número (opcional): altura do plano -plane__params__detailX = Número (opcional): Número opcional de subdivisões de triângulo na dimensão x -plane__params__detailY = Número (opcional): Número opcional de subdivisões de triângulo na dimensão y -box__description__0 = Desenha uma caixa com largura, altura e profundidade fornecidas -box__params__width = Número (opcional): largura da caixa -box__params__Height = Número (opcional): altura da caixa -box__params__depth = Número (opcional): profundidade da caixa -box__params__detailX = Número (opcional): Número opcional de subdivisões de triângulo na dimensão x -box__params__detailY = Número (opcional): Número opcional de subdivisões de triângulo na dimensão y -sphere__description__0 = Desenha uma esfera com determinado raio. -sphere__description__1 = DetailX e detailY determinam o número de subdivisões na dimensão x e na dimensão y de uma esfera. Mais subdivisões fazem a esfera parecer mais regular. Os valores máximos recomendados são ambos 24. Usar um valor maior que 24 pode causar um alerta ou tornar o navegador mais lento. -sphere__params__radius = Número (opcional): raio do círculo -sphere__params__detailX = Número (opcional): Número opcional de subdivisões na dimensão x -sphere__params__detailY = Número (opcional): Número opcional de subdivisões na dimensão y -cylinder__description__0 = Desenha um cilindro com determinado raio e altura -cylinder__description__1 = DetailX e detailY determinam o número de subdivisões na dimensão x e na dimensão y de um cilindro. Mais subdivisões fazem o cilindro parecer mais regular. O valor máximo recomendado para detailX é 24. Usar um valor maior que 24 pode causar um alerta ou tornar o navegador mais lento. -cylinder__params__radius = Número (opcional): raio da superfície -cylinder__params__height = Número (opcional): altura do cilindro -cylinder__params__detailX = Número (opcional): Número de subdivisões na dimensão x; o padrão é 24 -cylinder__params__detailY = Número (opcional): Número de subdivisões na dimensão y; o padrão é 1 -cylinder__params__bottomCap = Booleano (opcional): se deve desenhar a base do cilindro -cylinder__params__topCap = Booleano (opcional): se deve desenhar o topo do cilindro -cone__description__0 = Desenha um cone com determinado raio e altura -cone__description__1 = DetailX e detailY determinam o número de subdivisões na dimensão x e na dimensão y de um cone. Mais subdivisões fazem o cone parecer mais regular. O valor máximo recomendado para detailX é 24. Usar um valor maior que 24 pode causar um alerta ou tornar o navegador mais lento. -cone__params__radius = Número (opcional): raio da base -cone__params__height = Número (opcional): altura do cone -cone__params__detailX = Número (opcional): Número de segmentos, por padrão é 24, quanto mais segmentos, mais regular sua geometria. -cone__params__detailY = Número (opcional): Número de segmentos, por padrão é 1, quanto mais segmentos, mais regular sua geometria -cone__params__cap = Booleano (opcional): se deve desenhar a base do cone -ellipsoid__description__0 = Desenha um elipsóide com determinado raio -ellipsoid__description__1 = DetailX e detailY determinam o número de subdivisões na dimensão x e na dimensão y de um cone. Mais subdivisões fazem o elipsóide parecer mais regular. Evite o número do parâmetro acima de 150, pois pode travar o navegador. -ellipsoid__params__radiusx = Número (opcional): raio x do elipsóide -ellipsoid__params__radiusy = Número (opcional): raio y do elipsóide -ellipsoid__params__radiusz = Número (opcional): raio z do elipsóide -ellipsoid__params__detailX = Número (opcional): Número de segmentos, por padrão é 24, quanto mais segmentos, mais regular sua geometria. Evite o número do parâmetro acima de 150, pois pode travar o navegador. -ellipsoid__params__detailY = Número (opcional): Número de segmentos, por padrão é 16, quanto mais segmentos, mais regular sua geometria. Evite o número do parâmetro acima de 150, pois pode travar o navegador. -torus__description__0 = Desenha um toro com determinado raio e raio do tubo -torus__description__1 = DetailX e detailY determinam o número de subdivisões na dimensão x e na dimensão y de um toro. Mais subdivisões fazem o toro parecer mais regular. Os valores padrão e máximos para detailX e detailY são 24 e 16, respectivamente. Configurá-los com valores relativamente pequenos, como 4 e 6, permite criar novas formas além de um toro. -torus__params__radius = Número (opcional): raio do anel todo -torus__params__tubeRadius = Número (opcional): raio do tubo -torus__params__detailX = Número (opcional): Número de segmentos na dimensão x, por padrão é 24, quanto mais segmentos, mais regular sua geometria. -torus__params__detailY = Número (opcional): Número de segmentos na dimensão y, por padrão é 16, quanto mais segmentos, mais regular sua geometria. -orbitControl__description__0 = Permite o movimento em torno de um sketch 3D usando um mouse ou trackpad. Clicar e arrastar com o botão esquerdo girará a posição da câmera sobre o centro do sketch, ao clicar e arrastar com o botão direito, irá mover a câmera horizontalmente sem rotação, e usando a roda do mouse (rolagem), irá mover a câmera para mais perto ou mais longe do centro do sketch. Esta função pode ser chamada com parâmetros que ditam a sensibilidade ao movimento do mouse ao longo dos eixos X e Y. Chamar esta função sem parâmetros é equivalente a chamar orbitControl(1,1). Para inverter a direção do movimento em qualquer um dos eixos, insira um número negativo para sensibilidade. -orbitControl__params__sensitivityX = Número (opcional): sensibilidade ao movimento do mouse ao longo do eixo X -orbitControl__params__sensitivityY = Número (opcional): sensibilidade ao movimento do mouse ao longo do eixo Y -orbitControl__params__sensitivityZ = Número (opcional): sensibilidade para rolar o movimento ao longo do eixo Z -debugMode__description__0 = debugMode() ajuda a visualizar o espaço 3D adicionando uma grade para indicar onde o "solo" está em um sketch e um ícone de eixo que indica as direções + X, + Y e + Z. Esta função pode ser chamada sem parâmetros para criar um padrão de grade e ícone de eixos, ou pode ser chamada de acordo com os exemplos acima para personalizar o tamanho e a posição da grade e/ou ícone de eixos. A grade é desenhada usando a cor e a espessura do traço definidas por último. Para especificar esses parâmetros, adicione uma chamada para stroke() e strokeWeight() antes do final do loop draw(). -debugMode__description__1 = Por padrão, a grade percorrerá a origem (0,0,0) do sketch ao longo do plano XZ e o ícone dos eixos será deslocado da origem. Ambos, a grade e ícone de eixos serão dimensionados de acordo com o tamanho do Canvas atual. Observe que, como a grade é executada paralelamente à visualização padrão da câmera, muitas vezes é útil usar o debugMode junto com orbitControl para permitir a visualização completa da grade. -debugMode__params__mode = Constante: tanto GRADE quanto EIXOS -debugMode__params__gridSize = Número (opcional): tamanho de um lado da grade -debugMode__params__gridDivisions = Número (opcional): Número de divisões na grade -debugMode__params__xOff = Número (opcional): deslocamento do eixo X da origem (0,0,0) -debugMode__params__yOff = Número (opcional): deslocamento do eixo Y da origem (0,0,0) -debugMode__params__zOff = Número (opcional): deslocamento do eixo Z da origem (0,0,0) -debugMode__params__axesSize = Número (opcional): tamanho do ícone de eixos -debugMode__params__gridXOff = Número (opcional) -debugMode__params__gridYOff = Número (opcional) -debugMode__params__gridZOff = Número (opcional) -debugMode__params__axesXOff = Número (opcional) -debugMode__params__axesYOff = Número (opcional) -debugMode__params__axesZOff = Número (opcional) -noDebugMode__description__0 = Desativa o debugMode() em um sketch 3D. -ambientLight__description__0 = Cria uma luz ambiente com uma cor. A luz ambiente é a luz que vem de todos os lugares do canvas. Não tem uma fonte particular. -ambientLight__params__v1 = Número: vermelho ou valor de matiz relativo ao intervalo de cores atual -ambientLight__params__v2 = Número: verde ou valor de saturação relativo ao intervalo de cores atual -ambientLight__params__v3 = Número: azul ou valor de brilho relativo ao intervalo de cores atual -ambientLight__params__alpha = Número (opcional): valor de alpha -ambientLight__params__value = String: uma string de cor -ambientLight__params__gray = Número: um valor de cinza -ambientLight__params__values = Número[]: uma array contendo os componentes vermelho, verde, azul e alfa da cor -ambientLight__params__color = p5.Color: a cor da luz ambiente -specularColor__description__0 = Define a cor do realce especular ao usar um material especular e luz especular. -specularColor__description__1 = Este método pode ser combinado com as funções specularMaterial() e shininess() para definir realces especulares. A cor padrão é o branco, isto é (255, 255, 255), que é usado se este método não for chamado antes de specularMaterial(). Se este método é chamado sem specularMaterial(), não haverá efeito. -specularColor__description__2 = Nota: specularColor é equivalente à função do processing lightSpecular. -specularColor__params__v1 = Número: vermelho ou valor de matiz relativo ao intervalo de cores atual -specularColor__params__v2 = Número: verde ou valor de saturação relativo ao intervalo de cores atual -specularColor__params__v3 = Número: azul ou valor de brilho relativo ao intervalo de cores atual -specularColor__params__value = String: uma string de cor -specularColor__params__gray = Número: um valor de cinza -specularColor__params__values = Número[]: uma array contendo os componentes vermelho, verde, azul e alfa da cor -specularColor__params__color = p5.Color: a cor da luz ambiente -directionalLight__description__0 = Cria uma luz direcional com uma cor e uma direção -directionalLight__description__1 = Um máximo de 5 luzes direcionais podem estar ativas ao mesmo tempo -directionalLight__params__v1 = Número: vermelho ou valor de matiz (dependendo do modelo de cores atual) -directionalLight__params__v2 = Número: verde ou valor de saturação -directionalLight__params__v3 = Número: azul ou valor de brilho -directionalLight__params__position = p5.Vector: a direção da luz -directionalLight__params__color = Número[]|String|p5.Color: Array de cor, string CSS de cor, ou valor de p5.Color -directionalLight__params__x = Número: direção do eixo x -directionalLight__params__y = Número: direção do eixo y -directionalLight__params__z = Número: direção do eixo z -pointLight__description__0 = Cria um ponto de luz com uma cor e uma posição de luz -pointLight__description__1 = Um máximo de 5 pontos de luz podem estar ativos ao mesmo tempo -pointLight__params__v1 = Número: vermelho ou valor de matiz (dependendo do modelo de cores atual) -pointLight__params__v2 = Número: verde ou valor de saturação -pointLight__params__v3 = Número: azul ou valor de brilho -pointLight__params__x = Número: posição do eixo x -pointLight__params__y = Número: posição do eixo y -pointLight__params__z = Número: posição do eixo z -pointLight__params__position = p5.Vector: a posição da luz -pointLight__params__color = Número[]|String|p5.Color: Array de cor, string CSS de cor, ou valor de p5.Color -lights__description__0 = Define a luz ambiente e direcional padrão. Os padrões são ambientLight(128, 128, 128) e directionalLight(128, 128, 128, 0, 0, -1). As luzes precisam ser incluídas no draw() para permanecerem persistentes em um programa de loop. Colocando-as no setup() de um programa de loop, fará com que tenham efeito apenas na primeira vez que o loop rodar.. -lightFalloff__description__0 = Define as taxas de queda (falloff) para luzes pontuais. Afeta apenas os elementos que são criados depois dele no código. Por padrão o valor é lightFalloff(1.0, 0.0, 0.0), e os parâmetros são usados para calcular a queda (falloff) com a seguinte equação: -lightFalloff__description__1 = d = distância da posição da luz à posição do vértice -lightFalloff__description__2 = falloff = 1 / (Constante + d * LINEAR + ( d * d ) * QUADRATIC) -lightFalloff__params__linear = Número: valor linear para determinar a queda (falloff) -lightFalloff__params__quadratic = Número: valor quadrático para determinar a queda (falloff) -spotLight__description__0 = Cria um holofote com uma determinada cor, posição, direção de luz, ângulo e concentração. Aqui, ângulo se refere à abertura do cone do holofote, e a concentração é usada para focar a luz em direção ao centro. Ambos o ângulo e a concentração são opcionais, mas se você quiser fornecer a concentração, também terá que especificar o ângulo. -spotLight__description__1 = Um máximo de 5 holofotes podem estar ativos ao mesmo tempo -spotLight__params__v1 = Número: vermelho ou valor de matiz (dependendo do modelo de cores atual) -spotLight__params__v2 = Número: verde ou valor de saturação -spotLight__params__v3 = Número: azul ou valor de brilho -spotLight__params__x = Número: posição do eixo x -spotLight__params__y = Número: posição do eixo y -spotLight__params__z = Número: posição do eixo z -spotLight__params__rx = Número: direção do eixo x da luz -spotLight__params__ry = Número: direção do eixo y da luz -spotLight__params__rz = Número: direção do eixo z da luz -spotLight__params__angle = Número (opcional): parâmetro opcional para ângulo. Por padrão até PI/3 -spotLight__params__conc = Número (opcional): parâmetro opcional para concentração. Por padrão até 100 -spotLight__params__color = Número[]|String|p5.Color: Array de cor, string CSS de cor, ou valor de p5.Color -spotLight__params__position = p5.Vector: a posição da luz -spotLight__params__direction = p5.Vector: a direção da luz -noLights__description__0 = Esta função irá remover todas as luzes do sketch para os materiais renderizados subsequentes. Ela afeta todos os métodos subsequentes. Chamadas para métodos de iluminação feitas após o noLights() irão reativar as luzes no sketch. -loadModel__description__0 = Carregar um modelo 3D de um arquivo OBJ ou STL. -loadModel__description__1 = loadModel() deve ser colocado dentro de preload(). Isso permite que o modelo carregue totalmente antes que o resto do seu código seja executado. -loadModel__description__2 = Uma das limitações dos formatos OBJ e STL é que eles não têm um senso de escala embutido. Isso significa que os modelos exportados de programas diferentes podem ter tamanhos muito diferentes. Se o seu modelo não estiver sendo exibido, tente chamar loadModel() com o parâmetro normalize definido como true (verdadeiro).Isso redimensionará o modelo para uma escala apropriada para p5. Você também pode fazer alterações adicionais no tamanho final do seu modelo com a função scale() . -loadModel__description__3 = Além disso, o suporte para arquivos STL coloridos não está presente. Arquivos STL com cor serão renderizados sem propriedades de cor. -loadModel__returns = o objeto p5.Geometry: p5.Geometry -loadModel__params__path = String: endereço do modelo a ser carregado -loadModel__params__normalize = Booleano: Se true (verdadeiro), dimensiona o modelo para um tamanho padronizado ao carregar -loadModel__params__successCallback = função(p5.Geometry) (opcional): Função a ser chamada assim que o modelo for carregado. Será passado o objeto do modelo 3D. -loadModel__params__failureCallback = Função(evento) (opcional): chamado com erro de evento se o modelo não carregar. -loadModel__params__fileType = String (opcional): A extensão de arquivo do modelo (.stl, .obj). -model__description__0 = Renderizar um modelo 3D para a tela. -model__params__model = p5.Geometry: Modelo 3D carregado para ser renderizado -loadShader__description__0 = Carrega uma shader personalizado dos caminhos de vértice e fragmento de shader fornecidos. Os arquivos de shader são carregados de forma assíncrona em segundo plano, portanto, este método deve ser usado em preload(). -loadShader__description__1 = Por enquanto, existem três tipos principais de shaders. O p5 fornecerá automaticamente vértices, normais, cores e atributos de iluminação apropriados se os parâmetros definidos na shader corresponderem aos nomes. -loadShader__returns = p5.Shader: um objeto de shader criado a partir dos arquivos de shaders de vértice e fragmento fornecidos. -loadShader__params__vertFilename = String: endereço para o arquivo que contém o código fonte do vértice da shader -loadShader__params__fragFilename = String: endereço para o arquivo que contém o código fonte do fragmento da shader -loadShader__params__callback = Função (opcional): callback a ser executado após a conclusão de loadShader. Em caso de sucesso, o objeto Shader é passado como o primeiro argumento. -loadShader__params__errorCallback = Função (opcional): callback a ser executado quando ocorrer um erro dentro do loadShader. Em caso de erro, o erro é passado como o primeiro argumento. -createShader__returns = p5.Shader: um objeto de shader criado a partir dos vértices e fragmentos de shader fornecidos. -createShader__params__vertSrc = String: código fonte para o vértice da shader -createShader__params__fragSrc = String: código fonte para o fragmento da shader -shader__description__0 = A função shader() permite que o usuário forneça uma shader personalizada para preencher as formas no modo WEBGL. Os usuários podem criar suas próprias shaders carregando seus vértices e fragmentos com loadShader(). -shader__params__s = p5.Shader (opcional): a desejada p5.Shader para usar para renderizar formas. -resetShader__description__0 = Esta função restaura os padrões de shaders no modo WEBGL. O código que for executado após o resetShader() não será afetado pelas definições de shaders anteriores. Deve ser executado depois de shader(). -texture__description__0 = Textura para geometria. Você pode ver outros materiais possíveis neste exemplo. -texture__params__tex = p5.Image|p5.MediaElement|p5.Graphics: Gráficos bidimensionais para renderizar como textura -textureMode__description__0 = Define o espaço de coordenadas para mapeamento de textura. O modo padrão é IMAGE, que se refere às coordenadas reais da imagem. NORMAL refere-se a um espaço normalizado de valores que variam de 0 a 1. Esta função só funciona no modo WEBGL. -textureMode__description__1 = Em modo IMAGE, se uma imagem é de 100 x 200 pixels, mapear a imagem por todo o tamanho de um quadrante exigiria os pontos (0,0) (100, 0) (100,200) (0,200). O mesmo mapeamento em NORMAL é (0,0) (1,0) (1,1) (0,1). -textureMode__params__mode = Constante: tanto IMAGE ou NORMAL -textureWrap__description__0 = Define o wrapping mode (modo de embrulhamento) de textura global. Isso controla como as texturas se comportam quando seu mapeamento uv sai do intervalo 0 - 1. Existem três opções: CLAMP, REPEAT e MIRROR. -textureWrap__description__1 = faz com que os pixels na extremidade da textura se estendam para os limites. REPEAT faz com que a textura se espalhe repetidamente até atingir os limites. MIRROR funciona de forma semelhante a REPEAT, mas inverte a textura a cada novo tile (ladrilho). -textureWrap__description__2 = REPEAT & MIRROR só estão disponíveis se a textura for uma for uma multiplicação de dois (128, 256, 512, 1024, etc.). -textureWrap__description__3 = Este método afetará todas as texturas em seu sketch até que uma chamada de textureWrap subsequente seja feita. -textureWrap__description__4 = Se apenas um argumento for fornecido, ele será aplicado aos eixos horizontal e vertical. -textureWrap__params__wrapX = Constante: tanto CLAMP, REPEAT ou MIRROR -textureWrap__params__wrapY = Constante (opcional): tanto CLAMP, REPEAT ou MIRROR -normalMaterial__description__0 = O material normal para geometria é um material que não é afetado pela luz. Não é reflexivo e é um material de placeholder (espaço reservado) frequentemente usado para depurar (debug). As superfícies voltadas para o eixo X tornam-se vermelhas, as voltadas para o eixo Y tornam-se verdes e as voltadas para o eixo Z tornam-se azuis. Você pode ver todos os materiais possíveis neste exemplo. -ambientMaterial__description__0 = Material ambiente para geometria com uma determinada cor. O material ambiente define a cor que o objeto reflete sob qualquer iluminação. Por exemplo, se o material ambiente de um objeto for vermelho puro, mas a iluminação ambiente contiver apenas verde, o objeto não refletirá nenhuma luz. Aqui está um exemplo contendo todos os materiais possíveis. -ambientMaterial__params__v1 = Número: valor de cinza, de vermelho ou valor de matiz (dependendo do modo de cor atual), -ambientMaterial__params__v2 = Número (opcional): verde ou valor de saturação -ambientMaterial__params__v3 = Número (opcional): azul ou valor de brilho -ambientMaterial__params__color = Número[]|String|p5.Color: cor, array de cor ou string de cor CSS -emissiveMaterial__description__0 = Define a cor emissiva do material usado para a geometria desenhada na tela. Este é um nome incorreto no sentido de que o material não emite luz que afeta os polígonos circundantes. Em vez disso, dá a aparência de que o objeto está brilhando. Um material emissivo será exibido com força total, mesmo se não houver luz para ele refletir. -emissiveMaterial__params__v1 = Número: valor de cinza, de vermelho ou valor de matiz (dependendo do modo de cor atual), -emissiveMaterial__params__v2 = Número (opcional): valor de verde ou de saturação -emissiveMaterial__params__v3 = Número (opcional): valor de azul ou de brilho -emissiveMaterial__params__a = Número (opcional): opacidade -emissiveMaterial__params__color = Número[]|String|p5.Color: cor, array de cor ou string de cor CSS -specularMaterial__description__0 = Material especular para geometria com uma determinada cor. O material especular é um material reflexivo brilhante. Como o material ambiente, também define a cor que o objeto reflete sob a iluminação ambiente. Por exemplo, se o material especular de um objeto for vermelho puro, mas a iluminação ambiente contiver apenas verde, o objeto não refletirá nenhuma luz. Para todos os outros tipos de luz como ponto de luz e luz direcional, um material especular refletirá a cor da fonte de luz para o observador. Aqui está um exemplo contendo todos os materiais possíveis. -specularMaterial__params__gray = Número: Número especificando o valor entre branco e preto. -specularMaterial__params__alpha = Número (opcional): valor alfa relativo ao intervalo de cores atual (por padrão é 0 - 255) -specularMaterial__params__v1 = Número: valor de cinza, de vermelho ou valor de matiz relativo ao intervalo de cores atual , -specularMaterial__params__v2 = Número (opcional): valor de verde ou de saturação relativo ao intervalo de cores atual -specularMaterial__params__v3 = Número (opcional): valor de azul ou de brilho relativo ao intervalo de cores atual -specularMaterial__params__color = Número[]|String|p5.Color: cor, array de cor ou string de cor CSS -shininess__description__0 = Define a quantidade de brilho na superfície de formas. Usado em combinação com specularMaterial() para definir as propriedades do material das formas. O valor padrão e mínimo é 1. -shininess__params__shine = Número: grau de brilho. Por padrão 1. -camera__description__0 = Define a posição da câmera para um sketch 3D. Os parâmetros para esta função definem a posição da câmera, o centro do sketch (para onde a câmera está apontando) e uma direção para cima (a orientação da câmera). -camera__description__1 = Esta função simula os movimentos da câmera, permitindo que os objetos sejam visualizados de vários ângulos. Lembre-se de que ele não move os próprios objetos, mas sim a câmera. Por exemplo, quando o valor centerX é positivo, a câmera está girando para o lado direito do sketch, então o objeto parece estar se movendo para a esquerda. -camera__description__2 = Veja este exemplo para ver a posição de sua câmera. -camera__description__3 = Quando chamada sem argumentos, esta função cria uma câmera padrão equivalente à camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0); -camera__params__x = Número (opcional): valor da posição da câmera no eixo x -camera__params__y = Número (opcional): valor da posição da câmera no eixo y -camera__params__z = Número (opcional): valor da posição da câmera no eixo z -camera__params__centerX = Número (opcional): coordenada x representando o centro do sketch -camera__params__centerY = Número (opcional): coordenada y representando o centro do sketch -camera__params__centerZ = Número (opcional): coordenada z representando o centro do sketch -camera__params__upX = Número (opcional): componente x da direção 'para cima' da câmera -camera__params__upY = Número (opcional): componente y da direção 'para cima' da câmera -camera__params__upZ = Número (opcional): componente z da direção 'para cima' da câmera -perspective__description__0 = Define uma projeção em perspectiva para a câmera em um sketch 3D. Esta projeção representa a profundidade através da técnica de Escorço (encurtamento): os objetos que estão perto da câmera aparecem em seu tamanho real, enquanto os que estão mais distantes da câmera parecem menores. Os parâmetros para esta função definem o frustum (tronco) de visualização (a pirâmide frustum dentro da qual os objetos são vistos pela câmera) por meio do campo de visão vertical, relação de aspecto (geralmente largura / altura) e planos de recorte próximos e distantes. -perspective__description__1 = Quando chamada sem argumentos, os padrões fornecidos são equivalentes a perspective(PI/3.0, width/height, eyeZ/10.0, eyeZ10.0), where eyeZ is equal to ((height/2.0) / tan(PI60.0/360.0)); -perspective__params__fovy = Número (opcional): tronco do campo de visão vertical da câmera, de baixo para cima, em angleMode graus -perspective__params__aspect = Número (opcional): relação de aspecto da câmara de frustum (tronco) -perspective__params__near = Número (opcional): frustum (tronco) perto do plano de comprimento -perspective__params__far = Número (opcional): frustum (tronco) distante do plano de comprimento -ortho__description__0 = Define uma projeção ortográfica para a câmera em um sketch 3D e define um frustum de visualização em forma de caixa dentro do qual os objetos são vistos. Nesta projeção, todos os objetos com a mesma dimensão aparecem do mesmo tamanho, independentemente de estarem próximos ou distantes da câmera. Os parâmetros para esta função especificam o frustum (tronco) de visualização onde esquerda e direita são os valores x mínimo e máximo, topo e fundo são os valores y mínimo e máximo e próximo e longe são os valores z mínimo e máximo. Se nenhum parâmetro for fornecido, por padrão será usado: ortho(-width/2, width/2, -height/2, height/2). -ortho__params__left = Número (opcional): câmera frustum (tronco) do plano esquerdo -ortho__params__right = Número (opcional): câmera frustum (tronco) do plano direito -ortho__params__bottom = Número (opcional): câmera frustum (tronco) do plano inferior -ortho__params__top = Número (opcional): câmera frustum (tronco) do plano superior -ortho__params__near = Número (opcional): câmera frustum (tronco) próxima ao plano -ortho__params__far = Número (opcional): câmera frustum (tronco) longe do plano -frustum__description__0 = Define uma matriz de perspectiva conforme definida pelos parâmetros. -frustum__description__1 = Um frustum (tronco) é uma forma geométrica: uma pirâmide com o topo cortado. Com o olho do observador no topo imaginário da pirâmide, os seis planos do frustum atuam como planos de recorte ao renderizar uma vista 3D. Assim, qualquer forma dentro dos planos de recorte é visível; qualquer coisa fora desses planos não é visível. -frustum__description__2 = Definir o frustum muda a perspectiva da cena sendo renderizada. Isso pode ser alcançado de forma mais simples em muitos casos, usando perspective(). -frustum__params__left = Número (opcional): câmera frustum (tronco) do plano esquerdo -frustum__params__right = Número (opcional): câmera frustum (tronco) do plano direito -frustum__params__bottom = Número (opcional): câmera frustum (tronco) do plano inferior -frustum__params__top = Número (opcional): câmera frustum (tronco) do plano superior -frustum__params__near = Número (opcional): câmera frustum (tronco) próxima ao plano -frustum__params__far = Número (opcional): câmera frustum (tronco) longe do plano -createCamera__description__0 = Cria um novo objeto p5.Camera e diz ao renderizador para usar aquela câmera. Retorna o objeto p5.Camera. -createCamera__returns = p5.Camera: O objeto de câmera recém-criado. -setCamera__description__0 = Define a câmera atual do rendererGL para um objeto p5.Camera. Permite alternar entre várias câmeras. -setCamera__params__cam = p5.Camera: objeto p5.Camera -setAttributes__description__0 = Define atributos para o contexto de desenho WebGL. Esta é uma maneira de ajustar a forma como o renderizador WebGL funciona para afinar a exibição e o desempenho. -setAttributes__description__1 = Observe que isso reinicializará o contexto de desenho se for chamado depois que o canvas WebGL for feito. -setAttributes__description__2 = Se um objeto for passado como parâmetro, todos os atributos não declarados no objeto serão configurados como padrão. -setAttributes__description__3 = Os atributos disponíveis são: alfa - indica se a tela contém um buffer alfa. Por padrão é true (verdadeiro). -setAttributes__description__4 = depth - indica se o buffer do desenho tem um buffer de profundidade de pelo menos 16 bits. Por padrão é true (verdadeiro). -setAttributes__description__5 = stencil - indica se o buffer do desenho tem um buffer de estêncil de pelo menos 8 bits. -setAttributes__description__6 = antialias - indica se deve ou não executar anti-aliasing. Por padrão é false (true no Safari). -setAttributes__description__7 = premultipliedAlpha - indica que o compositor da página irá assumir que o buffer do desenho contém cores com alfa pré-multiplicado. Por padrão é false (falso). -setAttributes__description__8 = preserveDrawingBuffer - se true (verdadeiro) os buffers não serão apagados e preservarão seus valores até que sejam apagados ou sobrescritos pelo autor (observe que o p5 apaga automaticamente no loop de desenho - draw). Por padrão é true (verdadeiro). -setAttributes__description__9 = perPixelLighting - se true (verdadeiro), a iluminação por pixel será usada na shader de iluminação, caso contrário, a iluminação por vértice será usada. Por padrão é true (verdadeiro). -setAttributes__params__key = String: Nome do atributo -setAttributes__params__value = Booleano: Novo valor do atributo nomeado -setAttributes__params__obj = Objeto: objeto com pares de chave-valor -getAudioContext__description__0 = retorna o contexto de áudio para este sketch. Útil para usuários que desejam se aprofundar no Web Audio API . -getAudioContext__description__1 = Alguns navegadores exigem que os usuários iniciem o AudioContext com um gesto do usuário, como o touchStarted no exemplo abaixo. -getAudioContext__returns = Objeto: AudioContext para este sketch. -userStartAudio__description__0 = Não é apenas uma boa prática dar aos usuários controle sobre como iniciar o áudio. Esta política é aplicada por muitos navegadores da web, incluindo iOS e Google Chrome, que criou a Web Audio API Audio Context em um estado suspenso. -userStartAudio__description__1 = Nessas políticas específicas do navegador, o som não será reproduzido até um evento de interação do usuário (i.e. mousePressed()) retoma explicitamente o AudioContext, ou inicia um audio node (nó). Isso pode ser feito chamando start() em um p5.Oscillator, play() em um p5.SoundFile, ou simplesmente userStartAudio(). -userStartAudio__description__2 = userStartAudio() inicia o AudioContext em um gesto do usuário. O comportamento padrão habilitará o áudio em qualquer evento mouseUp ou touchEnd. Ele também pode ser colocado em uma função de interação específica, como o mousePressed() como no exemplo abaixo. Este método utiliza StartAudioContext , uma biblioteca por Yotam Mann (MIT Licence, 2016). -userStartAudio__returns = Promise: retorna uma Promise que é resolvida quando o estado AudioContext está 'em execução' -userStartAudio__params__element-_leftBracket_-s-_rightBracket_- = Elemento|Array (opcional): Este argumento pode ser um Element, Selector String, NodeList, p5.Element, jQuery Element, ou um Array de qualquer um desses. -userStartAudio__params__callback = Função (opcional): Callback para invocar quando o AudioContext for iniciado -sampleRate__description__0 = retorna um número que representa a taxa de amostragem, em amostras por segundo, de todos os objetos de som neste contexto de áudio. É determinado pela taxa de amostragem da placa de som do seu sistema operacional e atualmente não é possível mudar. Freqüentemente, é 44100, ou duas vezes o alcance da audição humana. -sampleRate__returns = Número: taxa de amostragem de amostras por segundo -freqToMidi__description__0 = retorna o valor de nota MIDI mais próximo para uma determinada frequência. -freqToMidi__returns = Número: valor da nota MIDI -freqToMidi__params__frequency = Número: uma frequência, por exemplo, o "A" acima do C médio é 440Hz. -midiToFreq__description__0 = retorna o valor da frequência de um valor de nota MIDI. O MIDI geral trata as notas como inteiros onde o C médio é 60, o C# é 61, D é 62 etc. Útil para gerar frequências musicais com osciladores. -midiToFreq__returns = Número: valor de frequência da nota MIDI fornecida -midiToFreq__params__midiNote = Número: o número de uma nota MIDI -soundFormats__description__0 = Lista os formatos de SoundFile que você incluirá. O LoadSound pesquisará essas extensões em seu diretório e escolherá um formato compatível com o navegador da Web do cliente. Aqui há um conversor de arquivos online grátis. -soundFormats__params__formats = String (opcional): i.e. 'mp3', 'wav', 'ogg' -saveSound__description__0 = Salva um p5.SoundFile como um arquivo .wav. O navegador solicitará que o usuário baixe o arquivo em seu dispositivo. Para fazer upload de áudio para um servidor, use p5.SoundFile.saveBlob. -saveSound__params__soundFile = p5.SoundFile: p5.SoundFile que você deseja salvar -saveSound__params__fileName = String: nome do arquivo .wav resultante. -loadSound__description__0 = loadSound() retorna um novo p5.SoundFile de um endereço de arquivo especificado. Se chamado durante o preload(), o p5.SoundFile estará pronto para tocar a tempo para o setup() e draw(). Se chamado fora do preload, o p5.SoundFile não estará pronto imediatamente, então o loadSound aceita um callback como segundo parâmetro. Usar um servidor local é recomendado ao carregar arquivos externos. -loadSound__returns = SoundFile: retorna um p5.SoundFile -loadSound__params__path = String|Array: endereço para o arquivo de som, ou um array com os endereços dos arquivos para os soundfiles em vários formatos i.e. ['sound.ogg', 'sound.mp3']. Alternativamente, aceita um objeto: tanto do arquivo de API HTML5, ou um p5.File. -loadSound__params__successCallback = Função (opcional): nome de uma função a ser chamada assim que o arquivo carregar -loadSound__params__errorCallback = Função (opcional): nome de uma função a ser chamada se houver um erro ao carregar o arquivo. -loadSound__params__whileLoading = Função (opcional): Nome de uma função a ser chamada durante o carregamento do arquivo. Esta função receberá a porcentagem carregada até o momento, de 0.0 a 1.0. -createConvolver__description__0 = Cria um p5.Convolver. Aceita um caminho para um arquivo de som que será usado para gerar uma resposta de impulso. -createConvolver__returns = p5.Convolver: -createConvolver__params__path = String: endereço para o arquivo de som. -createConvolver__params__callback = Função (opcional): função a ser chamada se o carregamento for bem-sucedido. O objeto será passado como argumento para a função de callback. -createConvolver__params__errorCallback = Função (opcional): função a ser chamada se o carregamento não for bem-sucedido. Um erro personalizado será passado como argumento para a função de callback. -setBPM__description__0 = Define o tempo global, em batidas por minuto, para todas as p5.Parts. Este método afetará todas as p5.Parts ativas. -setBPM__params__BPM = Número: Beats Por Minuto -setBPM__params__rampTime = Número: Daqui a segundos diff --git a/src/data/localization/pt-BR/p5.sound.ftl b/src/data/localization/pt-BR/p5.sound.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/pt-BR/root.ftl b/src/data/localization/pt-BR/root.ftl deleted file mode 100644 index 38afa76a57..0000000000 --- a/src/data/localization/pt-BR/root.ftl +++ /dev/null @@ -1,63 +0,0 @@ -h1 = Referência -reference-search = Buscar referência -reference-description1 = Não encontrou o que você estava buscando? Você pode tentar em -reference-description3 = Você também pode baixar uma versão off-line da Referência. -reference-contribute2 = Por favor nos comunique. -reference-error1 = Encontrou algum erro? -reference-error3 = Por favor fique à vontade para editar -reference-error5 = e iniciar um pull request! -reference-example = Exemplo -reference-description = Descrição -reference-extends = Extensões -reference-parameters = Parâmetros -reference-syntax = Sintaxe -reference-returns = Returns -Environment = Ambiente -Color = Cor -Color Conversion = Conversão de cor -Creating & Reading = Criando e lendo -Setting = Configuração -Shape = Forma -2D Primitives = 2D Primitivos -Attributes = Atributos -Curves = Curvas -Vertex = Vértices -Constants = Constantes -Structure = Estrutura -DOM = DOM -Rendering = Renderização -Foundation = Fundação -Transform = Transformar -Data = Dados -LocalStorage = LocalStorage -Dictionary = Dicionário -Events = Eventos -Acceleration = Aceleração -Keyboard = Teclado -Mouse = Mouse -Touch = Toque -Image = Imagem -Loading & Displaying = Loading & Displaying -Pixels = Pixels -IO = IO -Input = Input -Output = Output -Table = Table -Math = Math -Calculation = Calculation -Vector = Vetor -Noise = Noise -Random = Aleatório -Trigonometry = Trigonometria -Typography = Tipografia -Array Functions = Array Functions -Conversion = Conversão -String Functions = String Functions -Time & Date = Hora e Data -3D Primitives = 3D Primitivos -Lights, Camera = Luz, Câmera -Interaction = Interação -Lights = Luzes -3D Models = Modelos 3D -Material = Material -Camera = Câmera diff --git a/src/data/localization/zh-CN/JSON.ftl b/src/data/localization/zh-CN/JSON.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/console.ftl b/src/data/localization/zh-CN/console.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Amplitude.ftl b/src/data/localization/zh-CN/p5.Amplitude.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.AudioIn.ftl b/src/data/localization/zh-CN/p5.AudioIn.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.AudioVoice.ftl b/src/data/localization/zh-CN/p5.AudioVoice.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.BandPass.ftl b/src/data/localization/zh-CN/p5.BandPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Camera.ftl b/src/data/localization/zh-CN/p5.Camera.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Color.ftl b/src/data/localization/zh-CN/p5.Color.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Compressor.ftl b/src/data/localization/zh-CN/p5.Compressor.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Convolver.ftl b/src/data/localization/zh-CN/p5.Convolver.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Delay.ftl b/src/data/localization/zh-CN/p5.Delay.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Distortion.ftl b/src/data/localization/zh-CN/p5.Distortion.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.EQ.ftl b/src/data/localization/zh-CN/p5.EQ.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Effect.ftl b/src/data/localization/zh-CN/p5.Effect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Element.ftl b/src/data/localization/zh-CN/p5.Element.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Envelope.ftl b/src/data/localization/zh-CN/p5.Envelope.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.FFT.ftl b/src/data/localization/zh-CN/p5.FFT.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.File.ftl b/src/data/localization/zh-CN/p5.File.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Filter.ftl b/src/data/localization/zh-CN/p5.Filter.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Font.ftl b/src/data/localization/zh-CN/p5.Font.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Gain.ftl b/src/data/localization/zh-CN/p5.Gain.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Geometry.ftl b/src/data/localization/zh-CN/p5.Geometry.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Graphics.ftl b/src/data/localization/zh-CN/p5.Graphics.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.HighPass.ftl b/src/data/localization/zh-CN/p5.HighPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Image.ftl b/src/data/localization/zh-CN/p5.Image.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.LowPass.ftl b/src/data/localization/zh-CN/p5.LowPass.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.MediaElement.ftl b/src/data/localization/zh-CN/p5.MediaElement.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.MonoSynth.ftl b/src/data/localization/zh-CN/p5.MonoSynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Noise.ftl b/src/data/localization/zh-CN/p5.Noise.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.NumberDict.ftl b/src/data/localization/zh-CN/p5.NumberDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.OnsetDetect.ftl b/src/data/localization/zh-CN/p5.OnsetDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Oscillator.ftl b/src/data/localization/zh-CN/p5.Oscillator.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Panner3D.ftl b/src/data/localization/zh-CN/p5.Panner3D.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Part.ftl b/src/data/localization/zh-CN/p5.Part.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.PeakDetect.ftl b/src/data/localization/zh-CN/p5.PeakDetect.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Phrase.ftl b/src/data/localization/zh-CN/p5.Phrase.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.PolySynth.ftl b/src/data/localization/zh-CN/p5.PolySynth.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.PrintWriter.ftl b/src/data/localization/zh-CN/p5.PrintWriter.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Pulse.ftl b/src/data/localization/zh-CN/p5.Pulse.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Renderer.ftl b/src/data/localization/zh-CN/p5.Renderer.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Reverb.ftl b/src/data/localization/zh-CN/p5.Reverb.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.SawOsc.ftl b/src/data/localization/zh-CN/p5.SawOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Score.ftl b/src/data/localization/zh-CN/p5.Score.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Shader.ftl b/src/data/localization/zh-CN/p5.Shader.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.SinOsc.ftl b/src/data/localization/zh-CN/p5.SinOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.SoundFile.ftl b/src/data/localization/zh-CN/p5.SoundFile.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.SoundLoop.ftl b/src/data/localization/zh-CN/p5.SoundLoop.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.SoundRecorder.ftl b/src/data/localization/zh-CN/p5.SoundRecorder.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.SqrOsc.ftl b/src/data/localization/zh-CN/p5.SqrOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.StringDict.ftl b/src/data/localization/zh-CN/p5.StringDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Table.ftl b/src/data/localization/zh-CN/p5.Table.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.TableRow.ftl b/src/data/localization/zh-CN/p5.TableRow.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.TriOsc.ftl b/src/data/localization/zh-CN/p5.TriOsc.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.TypedDict.ftl b/src/data/localization/zh-CN/p5.TypedDict.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.Vector.ftl b/src/data/localization/zh-CN/p5.Vector.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.XML.ftl b/src/data/localization/zh-CN/p5.XML.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/p5.ftl b/src/data/localization/zh-CN/p5.ftl deleted file mode 100644 index 3ed9186cb3..0000000000 --- a/src/data/localization/zh-CN/p5.ftl +++ /dev/null @@ -1,948 +0,0 @@ -alpha__description__0 = 从颜色或像素数组中提取透明度（alpha）值。 -alpha__returns = 数字：该透明度值 -alpha__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -blue__description__0 = 从颜色或像素数组中提取蓝色彩值。 -blue__returns = 数字：该蓝色彩值 -blue__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -brightness__description__0 = 从颜色或像素数组中提取 HSB 的亮度值。 -brightness__returns = 数字：该亮度值 -brightness__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -color__description__0 = 创造颜色物件并将其存放在颜色变量内。依当时的颜色模式而定，参数可被解读成 RGB 或 HSB 值。默认模式为 RGB 值从 0 至 255，因此调用函数 color(255, 204, 0) 将返回亮黄色。

    请注意如果 color() 值被提供一个参数，它将被解读成灰阶值；增加多一个参数，它将被用来定义透明度。当被提供三个参数时，它们将被解读成 RGB 或 HSB 值；增加第四个参数将定义透明度。

    如果只提供单一字符串参数，RGB、RGBA 和 十六进制 CSS 颜色字符串都为受支持的模式。在这情况下，提供第二个参数以定义透明度值并不被支持，而需使用 RGBA 字符串。 -color__returns = p5.Color：返回的颜色 -color__params__gray = 数字：一个定义白与黑之间的数值 -color__params__alpha = 数字：透明度值，需在被定义的范围内（默认为 0 至 255） -color__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -color__params__v2 = 数字：绿彩值或饱和度值，需在被定义的范围内 -color__params__v3 = 数字：蓝彩值或亮度值，需在被定义的范围内 -color__params__value = 字符串：颜色字符串 -color__params__values = 数字[]：一个有红、绿、蓝及透明度值的数组 -color__params__color = p5.Color： -green__description__0 = 从颜色或像素数组中提取绿色彩值。 -green__returns = 数字：该绿色彩值 -green__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -hue__description__0 = 从颜色或像素数组中提取色调值。

    色调值可在 HSB 及 HSL 颜色中找到。此函数会返回标准化 HSB 值的色调值只要被提供的参数是 HSB 颜色物件（或如果被提供的参数是像素数组，颜色模式是 HSB），不然默认将会返回标准化 HSL 值的色调值。（两者的值只有在这两个不同的系统有不同的最高色调值时才会有差别） -hue__returns = 数字：该色调值 -hue__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -lerpColor__description__0 = 混合两个颜色以找到一个介于它们之间的颜色。

    amt 参数代表两个值之间插入的量，0.0 代表第一个颜色、0.1 代表非常接近第一个颜色、0.5 代表两个颜色之间的一半等等。低于 0 的值将被当作 0 看待。这和 lerp() 的行为不一样不过这是因为在范围外的值可能产生奇怪和意料之外的颜色。 -lerpColor__returns = p5.Color：插值颜色 -lerpColor__params__c1 = p5.Color：从这颜色开始插入 -lerpColor__params__c2 = p5.Color：在这颜色结束插入 -lerpColor__params__amt = 数字：一个介于 0 和 1 的数字 -lightness__description__0 = 从颜色或像素数组中提取 HSL 的光度值。 -lightness__returns = 数字：该光度值 -lightness__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -red__description__0 = 从颜色或像素数组中提取红色彩值。 -red__returns = 数字：该红色彩值 -red__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -saturation__description__0 = 从颜色或像素数组中提取饱和度值。

    饱和度在 HSB 和 HSL 模式中的缩放比例不同。此函数将会返回 HSB 值的饱和度值只要被提供的参数是 HSB 颜色物件（或如果被提供的参数是像素数组，颜色模式是 HSB），不然默认将会返回 HSL 值的饱和度值。 -saturation__returns = 数字：该饱和度值 -saturation__params__color = p5.Color | 数字数组 | 字符串：p5.Color 物件、颜色部件或 CSS 颜色值 -background__description__0 = background() 函数设定 p5.js 画布的背景颜色。默认背景颜色为浅灰色。这函数通常用在 draw() 函数内以在各画面开始时清空画布，不过它也能在 setup() 内使用以定义第一个画面的背景颜色或当背景颜色只需要被定义一次时。

    背景颜色可用 RGB、HSB 或 HSL 颜色定义，取决于当时的颜色模式（默认色彩空间是 RGB，而每个数值都介于 0 至 255 之间）。默认透明度值也介于 0 至 255 之间。

    如果所提供的参数是单一字符串，RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下，提供第二个参数以定义透明度值并不被支持，而需使用 RGBA 字符串。

    p5.Color 物件也能被用来定义背景颜色。

    p5.Image 也能被用来提供背景图像。 -background__params__color = p5.Color：任何使用 color() 函数创造的颜色 -background__params__colorstring = 字符串：颜色字符串，可接受的格式包括：整数 rgb() 或 rgba()、百分率 rgb() 或 rgba()、3 位十六进制、6 位十六进制 -background__params__a = 数字：透明度值，需在被定义的范围内（默认为 0 至 255） -background__params__gray = 数字：一个定义白与黑之间的数值 -background__params__v1 = 数字：红彩值或色调值（取决于当时的颜色模式） -background__params__v2 = 数字：绿彩值或饱和度值（取决于当时的颜色模式） -background__params__v3 = 数字：蓝彩值或亮度值（取决于当时的颜色模式） -background__params__values = 数字[]：一个有红、绿、蓝及透明度值的数组 -background__params__image = p5.Image：一个使用 loadImage() 或 createImage() 创造的图像，用以设定背景图像（必须和画布有相同的大小） -clear__description__0 = 清除图形缓冲区内的像素。这函数只能用于使用 createCanvas() 函数创造的 p5.Canvas 物件，而不能用于主要的显示窗口。使用 createGraphics() 创造的图形缓冲并不像主要的图形缓冲，它们能是完全透明或半透明的。这函数将清空所有东西使每个像素都是 100% 透明。 -colorMode__description__0 = colorMode() 改变 p5.js 解读颜色资料的方式。默认情况下，fill()、stroke()、background() 及 color() 的参数都是介于 0 至 255 的 RGB 颜色值。这和设置 colorMode(RGB, 255) 的效果一样。设置 colorMode(HSB) 让您使用 HSB 模式，默认情况下，这代表 colorMode(HSB, 360, 100, 100, 1)。您也可以使用 HSL。 -colorMode__params__mode = 常量: RGB、HSB 或 HSL，分别代表红绿蓝及色调/饱和度/亮度（或光度） -colorMode__params__max = 数字：所有数值的最大值 -colorMode__params__max1 = 数字：红色值或色调值的最大值，取决于当时的颜色模式 -colorMode__params__max2 = 数字：绿色值或饱和度值的最大值，取决于当时的颜色模式 -colorMode__params__max3 = 数字：蓝色值或亮度/光度值的最大值，取决于当时的颜色模式 -colorMode__params__maxA = 数字：透明度值的最大值 -fill__description__0 = 设置形状的填充色。比如说，如果您调用 fill(204, 102, 0)，所有接下来的形状都会被填上橙色。这颜色可用 RGB 或 HSB 颜色定义，取决于当时的颜色模式（默认色彩空间是 RGB，而每个数值都介于 0 至 255 之间）。默认透明度值也介于 0 至 255 之间。

    如果所提供的参数是单一字符串，RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下，提供第二个参数以定义透明度值并不被支持，而需使用 RGBA 字符串。

    p5.Color 物件也能被用来定义填充颜色。 -fill__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -fill__params__v2 = 数字：绿彩值或饱和度值，需在被定义的范围内 -fill__params__v3 = 数字：蓝彩值或亮度值，需在被定义的范围内 -fill__params__alpha = 数字： -fill__params__value = 字符串：颜色字符串 -fill__params__gray = 数字：灰阶值 -fill__params__values = 数字[]：一个有红、绿、蓝及透明度值的数组 -fill__params__color = p5.Color：填充色 -noFill__description__0 = 禁用形状填充。如果 noStroke() 和 noFill() 都被调用的话，没有形状会被画在荧幕上。 -noStroke__description__0 = 禁用形状外线。如果 noStroke() 和 noFill() 都被调用的话，没有形状会被画在荧幕上。 -stroke__description__0 = 设置形状的外形线色。这颜色可用 RGB 或 HSB 颜色定义，取决于当时的颜色模式（默认色彩空间是 RGB，而每个数值都介于 0 至 255 之间）。默认透明度值也介于 0 至 255 之间。

    如果所提供的参数是单一字符串，RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下，提供第二个参数以定义透明度值并不被支持，而需使用 RGBA 字符串。

    p5.Color 物件也能被用来定义外形线颜色。 -stroke__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -stroke__params__v2 = 数字：绿彩值或饱和度值，需在被定义的范围内 -stroke__params__v3 = 数字：蓝彩值或亮度值，需在被定义的范围内 -stroke__params__alpha = 数字： -stroke__params__value = 字符串：颜色字符串 -stroke__params__gray = 数字：灰阶值 -stroke__params__values = 数字[]：一个有红、绿、蓝及透明度值的数组 -stroke__params__color = p5.Color：外形线色 -arc__description__0 = 在荧幕上画个弧形。如果函数调用只提供 x、y、w、h、start 及 stop 参数，弧形将会被画成开放的饼形段。如果提供 mode 参数，弧形可是开放式半圆形（OPEN）、封闭式半圆形（CHORD）或封闭式饼形段（PIE）。原点可使用 ellipseMode() 函数设定。 -arc__params__x = 数字：弧形的椭圆形的 x 坐标 -arc__params__y = 数字：弧形的椭圆形的 y 坐标 -arc__params__w = 数字：弧形的椭圆形的宽度 -arc__params__h = 数字：弧形的椭圆形的高度 -arc__params__start = 数字：弧形开始的角度，用弧度定义 -arc__params__stop = 数字：弧形结束的角度，用弧度定义 -arc__params__mode = 常数：可选参数用以定义弧形的画法，可用 CHORD、PIE 或 OPEN -ellipse__description__0 = 在荧幕上画个椭圆形。宽度和高度相同的椭圆形为正圆形。在默认上，前两个参数将定义位置而第三和第四个参数将定义形状的宽度和高度。如果高度参数没有被提供的话，宽度参数值将为用来定义高度和宽度。如果高度或宽度为负数，函数将会取绝对值。原点可使用 ellipseMode() 函数设定。 -ellipse__params__x = 数字：椭圆形的 x 坐标 -ellipse__params__y = 数字：椭圆形的 y 坐标 -ellipse__params__w = 数字：椭圆形的宽度 -ellipse__params__h = 数字：椭圆形的高度 -ellipse__params__detail = 整数：椭圆形的径向扇区数 -line__description__0 = 在荧幕上画个直线（两点之间的直接路径）。有四个参数的 line() 函数将画个二维直线。如果要将直线上色，可使用 stroke() 函数。直线并不能有填充色，因此 fill() 函数将不会影响直线的颜色。二维直线在默认情况下有一像素的宽度，不过您可以使用 strokeWeight() 函数更改宽度。 -line__params__x1 = 数字：第一个点的 x 坐标 -line__params__y1 = 数字：第一个点的 y 坐标 -line__params__x2 = 数字：第二个点的 y 坐标 -line__params__y2 = 数字：第一个点的 z 坐标 -line__params__z1 = 数字：第二个点的 x 坐标 -line__params__z2 = 数字：第二个点的 z 坐标 -point__description__0 = 画一个点，一个在空间内一像素的坐标。第一个参数是点的横向值，第二个参数是点的垂直值。点的颜色是由当时的外线色决定。 -point__params__x = 数字：x 坐标 -point__params__y = 数字：y 坐标 -point__params__z = 数字：z 坐标（用于 WEBGL 模式 -point__params__coordinate_vector = p5.Vector: the coordinate vector -quad__description__0 = 画一个四角形。四角形或四边形是个有四个边的多边形。他和方形相似不过四个角并不需要是九十度。前两个参数 （x1、x2）定义第一个点而随后的配对参数应该以顺时或逆时针的方向定义。 -quad__params__x1 = 数字：第一个点的 x 坐标 -quad__params__y1 = 数字：第一个点的 y 坐标 -quad__params__x2 = 数字：第二个点的 y 坐标 -quad__params__y2 = 数字：第三个点的 x 坐标 -quad__params__x3 = 数字：第四个点的 x 坐标 -quad__params__y3 = 数字：第四个点的 y 坐标 -quad__params__x4 = 数字： -quad__params__y4 = 数字： -quad__params__detailX = Integer: (Optional) number of segments in the x-direction -quad__params__detailY = Integer: (Optional) number of segments in the y-direction -quad__params__z1 = 数字：第二个点的 x 坐标 -quad__params__z2 = 数字：第三个点的 y 坐标 -quad__params__z3 = 数字： -quad__params__z4 = 数字： -rect__description__0 = 在荧幕上画个方形。方形是每个角都为九十度的四边形。在默认上，前两个参数将定义位置而第三和第四个参数将定义形状的宽度和高度。这些参数被解读的方式可用 rectMode() 函数改变。

    如果提供第五、六、七及八个参数，将定义左上角、右上角、右下角及左下角的拐角半径。没被定义的拐角半径参数将被定义为参数列内上一个定义的拐角半径值。 -rect__params__x = 数字：方形的 x 坐标 -rect__params__y = 数字：方形的 y 坐标 -rect__params__w = 数字：方形的宽度 -rect__params__h = 数字：方形的高度 -rect__params__tl = 数字：可选性左上角拐角半径值 -rect__params__tr = 数字：可选性右上角拐角半径值 -rect__params__br = 数字：可选性右下角拐角半径值 -rect__params__bl = 数字：可选性左下角拐角半径值 -rect__params__detailX = 整数：x 方向段数 -rect__params__detailY = 整数：y 方向段数 -triangle__description__0 = 三角形是个由连接三个点所形成的平面形。前两个参数定义第一个点，中间两个参数定义第二个点而最后两个参数定义第三个点。 -triangle__params__x1 = 数字：第一个点的 x 坐标 -triangle__params__y1 = 数字：第一个点的 y 坐标 -triangle__params__x2 = 数字：第二个点的 x 坐标 -triangle__params__y2 = 数字：第二个点的 y 坐标 -triangle__params__x3 = 数字：第三个点的 x 坐标 -triangle__params__y3 = 数字：第三个点的 y 坐标 -ellipseMode__description__0 = 更改 ellipse() 参数被解读的方式，用以更改椭圆形被画在画布上的位置。

    默认模式为 ellipseMode(CENTER)，ellipse() 前两个参数将被解读成椭圆形的中心点，而第三和第四个参数为宽度和高度。

    ellipseMode(RADIUS) 将 ellipse() 的前两个参数解读成形状的中心点，但是第三和第四个参数被用于定义形状的半径宽度和半径高度

    ellipseMode(CORNER) 将 ellipse() 的前两个参数解读成形状左上角的位置，而第三和第四个参数为宽度和高度

    ellipseMode(CORNERS) 将 ellipse() 的前两个参数解读成形状其中一个角落的位置，而第三和第四个参数则被解读成对面角落的位置。

    参数必须全是大写因为 Javascript 是个区分大小写的编程语言。 -ellipseMode__params__mode = 常量：CENTER、RADIUS、CORNER 或 CORNERS -noSmooth__description__0 = 所有形状的边缘都为锯齿状。注意 smooth() 为默认模式所以您必须调用 noSmooth() 以禁用平滑形状、图像及字体。 -rectMode__description__0 = 更改 rect() 参数被解读的方式，用以更改方形被画在画布上的位置。

    默认模式为 rectMode(CORNER), rect() 前两个参数将被解读成形状的左上角的位置，而第三和第四个参数为宽度和高度。

    rectMode(CORNERS) 将 rect() 的前两个参数解读成形状其中一个角落的位置，而第三和第四个参数则被解读成对面角落的位置。

    rectMode(CENTER) 将 rect() 的前两个参数解读成形状的中心点，而第三和第四个参数为宽度和高度。

    rectMode(RADIUS) 也将的前两个参数解读成形状的中心点，但第三和第四个参数被用来定义形状一半的宽度和一半的高度。

    参数必须全是大写因为 Javascript 是个区分大小写的编程语言。 -rectMode__params__mode = 常量：CORNER、CORNERS、CENTER 或 RADIUS -smooth__description__0 = 所有形状的边缘都为非锯齿（平滑）状。smooth() 也将提高调整过大小的图像的素质。注意 smooth() 为默认模式；noSmooth() 也能用来禁用平滑形状、图像及字体。 -strokeCap__description__0 = 定义线条顶点的风格。顶点风格可以是方形、扩展式或圆形，它们个别参数为：SQUARE、PROJECT 及 ROUND。默认模式为 ROUND。 -strokeCap__params__cap = 常量：SQUARE、PROJECT 或 ROUND -strokeJoin__description__0 = 定义线条连接的风格。这些链接可以是尖角、斜角或圆角，它们个别参数为：MITER、BEVEL 及 ROUND。默认模式为 MITER。 -strokeJoin__params__join = 常量：MITER、BEVEL 或 ROUND -strokeWeight__description__0 = 定义线条、点及形状边线的宽度（粗度）。所有宽度单位都是像素。 -strokeWeight__params__weight = 数字：线条的粗度（像素单位） -bezier__description__0 = 在荧幕上画个三次贝塞尔曲线。这些曲线是由一系列锚点和控制点所定义的。前两个参数定义第一个锚点而最后两个参数定义另一个锚点，这也是曲线的第一和最后一个点。中间的参数是用来定义控制点的位置并将决定曲线的形状。一般来说，控制点会将曲线“拉”向它们的方向。 -bezier__params__x1 = 数字：第一个锚点的 x 坐标 -bezier__params__y1 = 数字：第一个锚点的 y 坐标 -bezier__params__x2 = 数字：第一个控制点的 y 坐标 -bezier__params__y2 = 数字：第二个控制点的 x 坐标 -bezier__params__x3 = 数字：第二个锚点的 x 坐标 -bezier__params__y3 = 数字：第二个锚点的 y 坐标 -bezier__params__x4 = 数字：第一个控制点的 z 坐标 -bezier__params__y4 = 数字：第二个锚点的 z 坐标 -bezier__params__z1 = 数字：第一个控制点的 x 坐标 -bezier__params__z2 = 数字：第二个控制点的 y 坐标 -bezier__params__z3 = 数字：第一个锚点的 z 坐标 -bezier__params__z4 = 数字：第二个控制点的 z 坐标 -bezierDetail__description__0 = 定义贝塞尔曲线的解析度

    默认值为 20。

    这函数只有在 WEBGL 模式下有效果因为默认画布渲染模式并不会使用这设定。 -bezierDetail__params__detail = 数字：曲线的解析度 -bezierPoint__description__0 = 计算在 a、b、c、d 点定义的贝塞尔曲线上 t 位置的坐标。a 和 d 参数分别为曲线上第一和最后一个点，而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。这函数可以先调用 x 坐标然后在调用 y 坐标已找到曲线上 t 位置的点坐标。 -bezierPoint__returns = 数字：贝塞尔曲线上 t 位置的值 -bezierPoint__params__a = 数字：曲线上第一个点的坐标 -bezierPoint__params__b = 数字：第一个控制点的坐标 -bezierPoint__params__c = 数字：第二个控制点的坐标 -bezierPoint__params__d = 数字：曲线上第二个点的坐标 -bezierPoint__params__t = 数字：介于 0 和 1 之间的值 -bezierTangent__description__0 = 计算在 a、b、c、d 点定义的贝塞尔曲线上 t 位置的切线值。a 和 d 参数分别为曲线上第一和最后一个点，而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。 -bezierTangent__returns = 数字：贝塞尔曲线上 t 位置的切线值 -bezierTangent__params__a = 数字：曲线上第一个点的坐标 -bezierTangent__params__b = 数字：第一个控制点的坐标 -bezierTangent__params__c = 数字：第二个控制点的坐标 -bezierTangent__params__d = 数字：曲线上第二个点的坐标 -bezierTangent__params__t = 数字：介于 0 和 1 之间的值 -curve__description__0 = 在荧幕上的两点之间画一个曲线，两点由中间四个参数定义。前两个参数为控制点，可以当作曲线是从这个点开始的虽然它并不会被画出来。最后两个参数同样也是用来定义另外一个控制点。

    更长的曲线能使用一系列 curve() 函数创造或使用 curveVertex()。另外一个叫 curveTightness() 的函数提供曲线视觉质量的控制。curve() 函数使用的是 Catmull-Rom 样条函数。 -curve__params__x1 = 数字：起点控制点的 x 坐标 -curve__params__y1 = 数字：起点控制点的 y 坐标 -curve__params__x2 = 数字：第一个点的 y 坐标 -curve__params__y2 = 数字：第二个点的 x 坐标 -curve__params__x3 = 数字：终点控制点的 x 坐标 -curve__params__y3 = 数字：终点控制点的 y 坐标 -curve__params__x4 = 数字：第一个点的 z 坐标 -curve__params__y4 = 数字：第二个点的 z 坐标 -curve__params__z1 = 数字：第一个点的 x 坐标 -curve__params__z2 = 数字：第二个点的 y 坐标 -curve__params__z3 = 数字：起点控制点的 z 坐标 -curve__params__z4 = 数字：终点控制点的 z 坐标 -curveDetail__description__0 = 定义曲线的解析度

    默认值为 20。

    这函数只有在 WEBGL 模式下有效果因为默认画布渲染模式并不会使用这设定。 -curveDetail__params__resolution = 数字：曲线的解析度 -curveTightness__description__0 = 更改由 curve() 及 curveVertex() 所创造的曲线的质量。所提供的参数将决定曲线如何切合顶点。0.0 是紧实度的默认值（这值表示曲线为 Catmull-Rom 样条）而 1.0 将使用直线连接所有点。在 -5.0 及 5.0 之间的值会是曲线变形不过他们仍然能被识别而当值越来越大时，曲线也会跟着变形。 -curveTightness__params__amount = 数字：从原顶点的变形量 -curvePoint__description__0 = 计算在 a、b、c、d 点定义的曲线上 t 位置的坐标。a 和 d 参数分别为曲线上第一和最后一个点，而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。这函数可以先调用 x 坐标然后在调用 y 坐标已找到曲线上 t 位置的点坐标。 -curvePoint__returns = 数字：贝塞尔曲线上 t 位置的值 -curvePoint__params__a = 数字：曲线上第一个点的坐标 -curvePoint__params__b = 数字：第一个控制点的坐标 -curvePoint__params__c = 数字：第二个控制点的坐标 -curvePoint__params__d = 数字：曲线上第二个点的坐标 -curvePoint__params__t = 数字：介于 0 和 1 之间的值 -curveTangent__description__0 = 计算在 a、b、c、d 点定义的曲线上 t 位置的切线值。a 和 d 参数分别为曲线上第一和最后一个点，而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。 -curveTangent__returns = 数字：贝塞尔曲线上 t 位置的切线值 -curveTangent__params__a = 数字：曲线上第一个点的坐标 -curveTangent__params__b = 数字：第一个控制点的坐标 -curveTangent__params__c = 数字：第二个控制点的坐标 -curveTangent__params__d = 数字：曲线上第二个点的坐标 -curveTangent__params__t = 数字：介于 0 和 1 之间的值 -beginContour__description__0 = 使用 beginContour() 及 endContour() 函数以在其他形状内创造剪影形状，比如说 “O” 字母内的空间。beginContour() 将开始记录形状的顶点而 endContour() 则停止记录。定义剪影形状的顶点定义的方向（顺时或逆时针）必须和包含它的形状不同。如果外形的顶点是顺时针方向定义的，那么它里面的形状的顶点需是逆时针方向定义。

    这些函数只能在一对 beginShape()/endShape() 函数之间使用而变形函数如 translate()、rotate() 及 scale() 在一对 beginContour()/endContour() 内并不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在里面使用。 -beginContour__description__1 = These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within. -beginShape__description__0 = 使用 beginShape() 及 endShape() 函数可让您创造更复杂的形状。beginShape() 将开始记录形状的顶点而 endShape() 则停止记录。所提供的参数将决定由所提供的顶点该画出怎样的形状。如果模式没有被提供，所定义的形状可以是任何不规则的多边形。

    可提供给 beginShape() 的参数包括 POINTS、LINES、TRIANGLES、TRIANGLE_FAN、TRIANGLE_STRIP、QUADS 及 QUAD_STRIP。在调用 beginShape() 函数之后，一系列 vertex() 函数必须接着调用。调用 endShape() 以停止绘制形状。每个形状都将会有由当时外线色所定义的外线色及当时的填充色。

    变形函数如 translate()、rotate() 及 scale() 在 beginShape() 内不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在beginShape()里面使用。 -beginShape__params__kind = 常量：POINTS、LINES、TRIANGLES、TRIANGLE_FAN、TRIANGLE_STRIP、QUADS 或 QUAD_STRIP -bezierVertex__description__0 = 定义贝塞尔曲线的顶点坐标。每次调用 bezierVertex() 将定义贝塞尔曲线的两个控制点和一个锚点，以在线或形状上增加一个新部分。

    在 beginShape() 内第一次调用 bezierVertex() 之前必须先调用一次 vertex() 以定义第一个锚点。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE（模式）参数的情况下使用。 -bezierVertex__params__x2 = 数字：第一个控制点的 x 坐标 -bezierVertex__params__y2 = 数字：第一个控制点的 y 坐标 -bezierVertex__params__x3 = 数字：第二个控制点的 x 坐标 -bezierVertex__params__y3 = 数字：第二个控制点的 y 坐标 -bezierVertex__params__x4 = 数字：第一个锚点的 x 坐标 -bezierVertex__params__y4 = 数字：第二个锚点的 x 坐标 -curveVertex__description__0 = 定义曲线顶点的坐标。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE（模式）参数的情况下使用。

    在一系列 curveVertex() 线条中第一个和最后一个点将被用来引导曲线的起点和终点。至少必须提供四个点以画一个介于第二和第三个点的小曲线。增加第五个点将会在第二、第三及第四个点之间画个曲线。curveVertex() 函数使用的是 Catmull-Rom 样条函数。 -curveVertex__params__x = 数字：顶点的 x 坐标 -curveVertex__params__y = 数字：顶点的 y 坐标 -endContour__description__0 = 使用 beginContour() 及 endContour() 函数以在其他形状内创造剪影形状，比如说 “O” 字母内的空间。beginContour() 将开始记录形状的顶点而 endContour() 则停止记录。定义剪影形状的顶点定义的方向（顺时或逆时针）必须和包含它的形状不同。如果外形的顶点是顺时针方向定义的，那么它里面的形状的顶点需是逆时针方向定义。

    这些函数只能在一对 beginShape()/endShape() 函数之间使用而变形函数如 translate()、rotate() 及 scale() 在一对 beginContour()/endContour() 内并不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在里面使用。 -endShape__description__0 = endShape() 函数和 beginShape() 是一对的而且它只能在 beginShape() 后使用。当 endshape() 被调用时，自上一次 beginShape() 调用后的所有被定义的图像资料将被写进图像缓冲区。定义常量 CLOSE 给 MODE 参数将会关闭该形状（连接起点和终点）。 -endShape__params__mode = 常量：使用 CLOSE 以关闭形状 -quadraticVertex__description__0 = 定义二次贝塞尔曲线顶点的坐标。每次调用 quadraticVertex() 将定义贝塞尔曲线的一个控制点和一个锚点，以在线或形状上增加一个新部分。在 beginShape() 内第一次调用 quadraticVertex() 之前必须先调用一次 vertex() 以定义第一个锚点。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE（模式）参数的情况下使用。 -quadraticVertex__params__cx = 数字：控制点的 x 坐标 -quadraticVertex__params__cy = 数字：控制点的 y 坐标 -quadraticVertex__params__x3 = 数字：锚点的 x 坐标 -quadraticVertex__params__y3 = 数字：锚点的 y 坐标 -vertex__description__0 = 所有形状都是由连接一系列顶点形成的。vertex() 可用于定义点、线、三角形、四角形及多边形的顶点坐标。它只能在 beginShape() 和 endShape() 函数之间使用。 -vertex__params__x = 数字：顶点的 x 坐标 -vertex__params__y = 数字：顶点的 y 坐标 -vertex__params__z = 数字：顶点的 z 坐标 -vertex__params__u = 数字：顶点的纹理 u 坐标 -vertex__params__v = 数字：顶点的纹理 v 坐标 -HALF_PI__description__0 = HALF_PI 是个值为 1.57079632679489661923 的数学常量。它是圆形周长与直径的比例的一半。它能有效的与三角函数如 sin() 及 cos() 一起使用。 -PI__description__0 = PI 是个值为 3.14159265358979323846 的数学常量。它是圆形周长与直径的比例。它能有效的与三角函数如 sin() 及 cos() 一起使用。 -QUARTER_PI__description__0 = QUARTER_PI 是个值为 0.7853982 的数学常量。它是圆形周长与直径的比例的四分之一。它能有效的与三角函数如 sin() 及 cos() 一起使用。 -TAU__description__0 = TAU 是 TWO_PI 的别名，是个值为 6.28318530717958647693 的数学常量。它是圆形周长与直径的比例的两倍。它能有效的与三角函数如 sin() 及 cos() 一起使用。 -TWO_PI__description__0 = TWO_PI 是个值为 6.28318530717958647693 的数学常量。它是圆形周长与直径的比例的两倍。它能有效的与三角函数如 sin() 及 cos() 一起使用。 -DEGREES__description__0 = 与 angleMode() 函数一起使用的常量，用于设定 p5.js 如何解读及计算角度（可以是 DEGREES 或 RADIANS）。 -RADIANS__description__0 = 与 angleMode() 函数一起使用的常量，用于设定 p5.js 如何解读及计算角度（可以是 DEGREES 或 RADIANS）。 -print__description__0 = print() 函数将写入浏览器的控制台区。这函数适用于查看程式生成的资料。这函数每一次被调用将创造新的一行字串。个别元素可使用引号（""）分隔并使用加号（+）连接在一起。 -print__params__contents = 任何：任何要写进控制台的数字、字符串、物件、布尔值或数组的组合 -frameCount__description__0 = 系统变量 frameCount 存着自程序开始已被展示的影格数量。在 setup() 这值为 0，在第一次执行 draw() 后为 1 等等。 -focused__description__0 = 确定 p5.js 程式正在运行的窗口是否获得“焦点”，这表示绘图可接受滑鼠或键盘输入。如果窗口获得焦点，次变量为 “true” 否则为 “false”。 -cursor__description__0 = 设置鼠标成预定的符号或一个图像，或者如果鼠标被隐藏显示鼠标。如果你想要设置一个图像为鼠标，建议的图像大小为 16x16 或 32x32 像素。 It is not possible to load an image as the cursor if you are exporting your program for the Web, and not all MODES work with all browsers. 参数 x 及 y 必须低于图像的大小。 -cursor__params__type = 字符串|常量：ARROW、CROSS、HAND、MOVE、TEXT 或图像的路径 -cursor__params__x = 数字：鼠标的横向活跃点 -cursor__params__y = 数字：鼠标的直向活跃点 -frameRate__description__0 = 定义每一秒应该显示的影格数。比如说，调用 frameRate(30) 将使绘图每秒刷新 30 次。如果处理器没法跟上所定义的速率，该帧率将不会被达到。建议在 setup() 内设置帧率。默认的帧率值为每秒 60 影格。这和调用 setFrameRate(val) 的效果一样。

    调用 frameRate() 但不给予任何参数将会返回当时的帧率。draw() 函数必须至少执行一次它才会返回帧率。这和调用 getFrameRate() 的效果一样。

    调用 frameRate() 并给予任何不是数字或正数的参数也将会返回当时的帧率。 -frameRate__params__fps = 数字：每一秒该显示的影格数 -noCursor__description__0 = 隐藏鼠标。 -displayWidth__description__0 = 储存整个荧幕宽度的系统变量。这可用来在任何大小的荧幕制作任何大小的全屏程序。 -displayHeight__description__0 = 储存整个荧幕高度的系统变量。这可用来在任何大小的荧幕制作任何大小的全屏程序。 -windowWidth__description__0 = 储存窗口内部宽度的系统变量， 此函数映射 window.innerWidth。 -windowHeight__description__0 = 储存窗口内部高度的系统变量， 此函数映射 window.innerHeight。 -windowResized__description__0 = windowResized() 函数将在每次浏览器窗口缩放时被调用。这是个适合缩放画布及或任何其他调整以符合新的窗口大小的地方。 -width__description__0 = 储存画布宽度的系统变量。这值是由 createCanvas() 函数的第一个参数所定义。比如说，调用函数 createCanvas(320, 240) 将定义此宽度变量为 320。如果一个程式没有使用 createCanvas() 宽度值将默认为 100。 -height__description__0 = 储存画布高度的系统变量。这值是由 createCanvas() 函数的第二个参数所定义。比如说，调用函数 createCanvas(320, 240) 将定义此高度变量为 240。如果一个程式没有使用 createCanvas() 高度值将默认为 100。 -fullscreen__description__0 = 如果提供一个参数，依该参数而定该绘图是否是全屏。如果没有给予任何参数，将返回当时的全屏状态。注意因为浏览器限制，此函数只能在使用者输入时调用，比如说在滑鼠点击时如以上范例。 -fullscreen__returns = 布尔值：当时的全屏状态 -fullscreen__params__val = 布尔值：该绘图是否应该是全屏 -pixelDensity__description__0 = 定义像素缩放值，用于高像素密度显示器。默认像素密度为显示器的像素密度，可调用 pixelDensity(1) 以关闭此功能。调用 pixelDensity() 并不给予任何参数将返回该绘图的像素密度。 -pixelDensity__params__val = 数字：绘图是否应该缩放及缩放多少 -displayDensity__description__0 = 返回正在运行该绘图的显示器的像素密度。 -displayDensity__returns = 数字：该显示器的像素密度 -getURL__description__0 = 返回当下的网址。 -getURL__returns = 字符串：网址 -getURLPath__description__0 = 返回当下的网址的路径数组 -getURLPath__returns = 字符串[]：路径组 -getURLParams__description__0 = 返回当下网址的参数物件 -getURLParams__returns = 物件：网址参数 -preload__description__0 = 在 setup() 之前被调用，preload() 函数可用来以阻断的方式处理异步加载外来文件。如果 preload 函数有被定义，setup() 将等到其中的加载工作都完成后才开始执行。preload 函数只能含有加载函数（如 loadImage、loadJSON、loadFont、loadStrings 等）。如果您想使用异步加载，加载函数可在 setup() 内或任何其他地方调用，您只需使用其回调函数参数。

    在默认情况下 “loading...” 字眼将会被显示。如果您想只做您自己的加载页面，只需在您也页面上加个 id 为 “p5_loading” 的 HTML 元素。更多详情请查看这里。 -preload__description__1 = By default the text "loading..." will be displayed. To make your own loading page, include an HTML element with id "p5_loading" in your page. More information here. -setup__description__0 = setup() 函数将在程式开始时被调用一次。它可在程序开始时被用来定义初始的环境属性如荧幕大小、背景颜色及媒体加载如图像及字体。每个程序只能有一个 setup() 函数并且他不能在一开始执行后再次被调用。

    请注意：在 setup() 内定义的变量并不能在其他函数内使用，这包括 draw() 。 -draw__description__0 = 在 setup() 之后被调用，draw() 函数将持续地重复执行其中的代码直到该程式终止或当 noLoop() 被调用。注意如果 noLoop() 在 setup() 内被调用，draw() 仍然会被执行一个然后才停止。draw() 将会自动被调用并不应该被直接调用。

    您应该使用 noLoop()、redraw() 及 loop() 来控制它。当 noLoop() 停止执行 draw() 内的代码，redraw() 会使 draw() 内的代码执行一次，而 loop() 将会使 draw() 内的代码继续重复执行。

    每一秒 draw() 执行的次数可使用 frameRate() 函数来控制。

    每个绘图只能有一个 draw() 函数，而如果您想持续重复执行代码或处理事件如 mousePressed()，draw() 必须存在。有时候您的程式可能会有空白的 draw() 函数，如以上的范例所示。

    请特别注意绘图坐标系统将在每次 draw() 在开始被调用时重置。任何在 draw() 内执行的变形指令（如 scale、rotate、translate）将会在下一个 draw() 开始时复原，所以变形指令并不会随着时间积累。另一方面，样式（如 fill、stroke等）将会持续同样的效果。 -remove__description__0 = 移除整个 p5 绘图。这函数将移除画布及任何由 p5.js 创造的元素。它也会终止绘图循环及解除任何被绑定在窗口对象的属性或函数。它会留下一个 p5 变量以防您还想创造一个新的 p5 绘图。您也可以舍去 p5 = null 以完全删除它。虽然所有由 p5 程式库所创造的函数、变量和物件将会被移除，任何其他由您的代码所定义的公共变量将会被保留。 -boolean__description__0 = 转换一个数字或字符串成其布尔值。在数字上，任何非零的值（无论正负）都将转换为 true，而零将转换为 false。在字符串上，"true" 将转换成 true，而任何其他值都会转换成 false。当给予一数组的数字或字符串时，将返回一个等同大小的布尔值数组。 -boolean__returns = 布尔值：该值的布尔值 -boolean__params__n = 字符串|布尔值|数字|数组：该解析的值 -createCanvas__description__0 = 在文件内创造一个画布元素，并以像素定义其大小。这函数只应该在 setup() 开始时被调用一次。在同一个绘图里调用 createCanvas 多过一次将造成难以预料的行为。如果你想要使用多过一个绘图画布您可以使用 createGraphics（默认上会被隐藏可是可以被显示）。

    给予这函数的宽度和高度参数将被用来定义 width 和 height 系统变量。如果 createCanvas() 没有被使用，画布将会被给予默认大小 100x100。

    以知更多放置画布的方法，请参考画布放置维基（英文页面）。 -createCanvas__returns = p5.Renderer： -createCanvas__params__w = 数字：画布的宽度 -createCanvas__params__h = 数字：画布的高度 -createCanvas__params__renderer = 常量：P2D 或 WEBGL -resizeCanvas__description__0 = 缩放画布至给予的宽度和高度。该画布将会马上被清空及调用 draw()，使得画布能在缩放后重新渲染。 -resizeCanvas__params__w = 数字：画布的宽度 -resizeCanvas__params__h = 数字：画布的高度 -resizeCanvas__params__noRedraw = 布尔值：不要马上更新画布 -noCanvas__description__0 = 如果该 p5 绘图不需要画布，此函数将移除默认画布。 -createGraphics__description__0 = 创造及返回一个新的 p5.Renderer 物件。如果您需要在一个画面外的图形缓冲区作画，您可以使用这个函数。前两个参数将定义宽度和高度像素。 -createGraphics__returns = buffer gráfico fuera de pantalla -createGraphics__params__w = 数字：画面外图形缓冲区的宽度 -createGraphics__params__h = 数字：画面外图形缓冲区的高度 -createGraphics__params__renderer = 常量：P2D 或 WEBGL，默认为 P2D -blendMode__description__0 = 根据所设定的模式在显示窗口内混合像素。以下模式选择可用来混合源像素（A）与已经在显示窗口的像素（B）：
    • BLEND - 颜色线性插值：C = A*系数 + B。这是默认混合模式。
    • ADD - A 与 B 的总和
    • DARKEST - 将显示当中最深的颜色：C = min(A*系数, B)。
    • LIGHTEST - 将显示当中最浅的颜色：C = max(A*系数, B)。
    • DIFFERENCE - 从底下的图像中减去颜色。
    • EXCLUSION - 与 DIFFERENCE 相似但不那么强烈。
    • MULTIPLY - 将颜色相乘，效果一定会更暗。
    • SCREEN - 与 MULTIPLY 相反，使用颜色的反值。
    • REPLACE - 像素将完全盖过其他像素并将不会使用透明度值。
    • OVERLAY - MULTIPLY 及 SCREEN 和混合。暗值将相乘，亮值将相乘反值。
    • HARD_LIGHT - 当高于 50% 灰时 SCREEN，低于时 MULTIPLY。
    • SOFT_LIGHT - DARKEST 及 LIGHTEST 的混合。与 OVERLAY 的效果相似，但不那么强烈。
    • DODGE - 使浅色更浅及增加对比度，忽略暗色。
    • BURN - 是深色更深及增加对比度，忽略浅色。
    -blendMode__params__mode = 常量：画布的混合模式。BLEND、DARKEST、LIGHTEST、DIFFERENCE、MULTIPLY、EXCLUSION、SCREEN、REPLACE、OVERLAY、HARD_LIGHT、SOFT_LIGHT、DODGE、BURN、ADD 或 NORMAL -noLoop__description__0 = 停止 p5.js 持续重复执行 draw() 内的代码。如果 loop() 被调用，draw() 内的代码将开始继续重复执行。如果 noLoop() 在 setup() 被调用，它应该是代码块的最后一行代码。

    在使用 noLoop() 时，您并不能在事件处理函数如 mousePressed() 或 keyPressed() 内操纵或存取荧幕。不过您可以使用哪些函数调用 redraw() 或 loop()，从而执行 draw()，以正确的更新荧幕。这表示当 noLoop() 被调用后，您不能绘制任何东西，同时某些函数如 saveFrame() 或 loadPixels() 也不能使用。

    注意如果绘图的大小改变，redraw() 将会被调用以更新绘图，即使 noLoop() 已经被调用，不然绘图将会处于一个奇怪的状态直到 loop() 再次被调用。 -loop__description__0 = 在默认下，p5.js 将会循环执行 draw() 内的代码。不过 draw() 循环能使用 noLoop() 停止。在这情况下 draw() 循环可使用 loop() 函数恢复执行。 -push__description__0 = push() 函数将储存当时的绘画样式设置及变形，而 pop() 将恢复这些设置。注意这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。当使用 push() 开始一个新的状态时，它将继续建立在当时的样式和变形上。push() 和 pop() 函数可被重复嵌入以提供更复杂的控制。（请参考第二个范例）

    push() 将现有的变形及样式设置资料储存上来，这包括以下的函数：fill()、stroke()、tint()、strokeWeight()、strokeCap()、strokeJoin()、imageMode()、rectMode()、ellipseMode()、colorMode()、textAlign()、textFont()、textMode()、textSize()、textLeading()。 -pop__description__0 = push() 函数将储存当时的绘画样式设置及变形，而 pop() 将恢复这些设置。注意这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。当使用 push() 开始一个新的状态时，它将继续建立在当时的样式和变形上。push() 和 pop() 函数可被重复嵌入以提供更复杂的控制。（请参考第二个范例）

    push() 将现有的变形及样式设置资料储存上来，这包括以下的函数：fill()、stroke()、tint()、strokeWeight()、strokeCap()、strokeJoin()、imageMode()、rectMode()、ellipseMode()、colorMode()、textAlign()、textFont()、textMode()、textSize()、textLeading()。 -redraw__description__0 = 执行在 draw() 内的代码一次。这函数让该程序只在需要的时候更新显示窗口，比如说当 mousePressed() 或 keyPressed()事件被触发时。

    再构造程式时，只有在如 mousePressed() 之类的时间内调用 redraw() 才有意义，因为 redraw() 并不会直接调用 draw() （它只会表示绘图有需要更新）。

    redraw() 函数并不会在 draw() 内正常运作。以启用/禁用动画，请使用 loop() 及 noLoop()。

    此外您也能定义每次调用 redraw() 将使 draw() 被调用几次。您这需给予一个整数参数已表示执行的次数。 -redraw__params__n = 整数：重绘 n 次。默认值为 1 -applyMatrix__description__0 = 将现有的矩阵乘于由参数所定义的矩阵。这是个强大的功能并能够同时执行平移、缩放、切变及旋转。您能在维基百科了解更多关于变形矩阵的资讯。

    这里的参数命名跟着 WHATWG 规范（英文页面）的命名方式并代表着一个如下的变形矩阵：

    当 applyMatrix 被调用时所使用的变形矩阵

    -applyMatrix__params__a = 数字：定义该乘于的 2x3 矩阵 -applyMatrix__params__b = 数字：定义该乘于的 2x3 矩阵 -applyMatrix__params__c = 数字：定义该乘于的 2x3 矩阵 -applyMatrix__params__d = 数字：定义该乘于的 2x3 矩阵 -applyMatrix__params__e = 数字：定义该乘于的 2x3 矩阵 -applyMatrix__params__f = 数字：定义该乘于的 2x3 矩阵 -resetMatrix__description__0 = 将现有的矩阵替换成单位矩阵。 -rotate__description__0 = 将一个形状根据参数所定义的角度旋转。这函数将考虑角度模式，所以角度可以是弧度或角度定义。

    所有物件都会绕着原点旋转而正数将使物件在顺时针方向旋转。此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说，调用 rotate(HALF_PI) 然后 rotate(HALF_PI) 效果会与 rotate(PI) 相同。所有变形将会在 draw() 重新开始时恢复。 -rotate__params__angle = 数字：旋转的角度，根据当时的角度模式，以弧度或角度定义 -rotate__params__axis = p5.Vector|数字[]：（3D 模式下）旋转轴 -rotateX__description__0 = 绕着 x 轴旋转。 -rotateX__params__angle = 数字：旋转角度，根据当时的角度模式，以弧度或角度定义 -rotateY__description__0 = 绕着 y 轴旋转。 -rotateY__params__angle = 数字：旋转角度，根据当时的角度模式，以弧度或角度定义 -rotateZ__description__0 = 绕着 x 轴旋转。只适用于 WEBGL 模式。 -rotateZ__params__angle = 数字：旋转角度，根据当时的角度模式，以弧度或角度定义 -scale__description__0 = 通过扩大和收缩顶点，放大或缩小形状。形状物件将会从坐标系统的原点开始缩放。缩放值为十进制百分比。比如说，调用函数 scale(2.0) 将使该形状放大 200%。

    此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积相乘。比如说，调用 scale(2.0) 然后 scale(1.5) 效果会与 scale(3.0) 相同。如果 scale() 在 draw() 内被调用，变形将会在下一次循环开始时恢复。

    给予此函数一个 z 参数只在 WEBGL 模式下受支持。这函数能使用 push() 及 pop() 控制。 -scale__params__s = 数字|p5.Vector|数字[]：缩放物件的百分比，或如果给予多个参数 x 轴的缩放百分比 -scale__params__y = 数字：y 轴的缩放百分比 -scale__params__z = 数字：z 轴的缩放百分比（只适用于 WEBGL 模式） -scale__params__scales = p5.Vector|数字[]：各轴缩放百分比 -shearX__description__0 = 有角度参数所定义的形状 x 轴切变量。角度必须符合当时的角度模式。形状物件将会从坐标系统的原点开始切变而正数表示切变方向为顺时针方向。

    此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说，调用 shearX(PI/2) 然后 shearX(PI/2) 效果会与 shearX(PI) 相同。如果 shearX() 在 draw() 内被调用，变形将会在下一次循环开始时恢复。

    技术上，shearX() 将现有的变形矩阵乘以一个旋转矩阵。这函数能使用 push() 及 pop() 控制。 -shearX__params__angle = 数字：根据当时的角度模式，以弧度或角度定义和切变角度 -shearY__description__0 = 有角度参数所定义的形状 y 轴切变量。角度必须符合当时的角度模式。形状物件将会从坐标系统的原点开始切变而正数表示切变方向为顺时针方向。

    此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说，调用 shearY(PI/2) 然后 shearY(PI/2) 效果会与 shearY(PI) 相同。如果 shearY() 在 draw() 内被调用，变形将会在下一次循环开始时恢复。

    技术上，shearY() 将现有的变形矩阵乘以一个旋转矩阵。这函数能使用 push() 及 pop() 控制。 -shearY__params__angle = 数字：根据当时的角度模式，以弧度或角度定义和切变角度 -translate__description__0 = 定义在显示窗口内平移物件的量。x 参数将定义左/右平移，y 参数将定义上/下平移。

    此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说，调用 translate(50, 0) 然后 translate(20, 0) 效果会与 translate(70, 0) 相同。如果 translate() 在 draw() 内被调用，变形将会在下一次循环开始时恢复。这函数能使用 push() 及 pop() 控制。 -translate__params__x = 数字：左/右平移 -translate__params__y = 数字：上/下平移 -translate__params__z = 数字：前/后平移（只适用于 WEBGL 模式） -translate__params__vector = p5.Vector：平移向量 -deviceOrientation__description__0 = deviceOrientation 系统变量将会储存设备的旋转方向。此变量的值可以是 ‘landscape’ 或 ‘portrait’。如果没有资料可用他会被定义成 ‘undefined’。LANDSCAPE 或 PORTRAIT。 -accelerationX__description__0 = accelerationX 系统变量将会储存设备的 x 轴加速度。值的单位为每平方秒米。 -accelerationY__description__0 = accelerationY 系统变量将会储存设备的 y 轴加速度。值的单位为每平方秒米。 -accelerationZ__description__0 = accelerationZ 系统变量将会储存设备的 z 轴加速度。值的单位为每平方秒米。 -pAccelerationX__description__0 = pAccelerationX 系统变量将会储存上一个影格该设备的 x 轴加速度。值的单位为每平方秒米。 -pAccelerationY__description__0 = pAccelerationY 系统变量将会储存上一个影格该设备的 y 轴加速度。值的单位为每平方秒米。 -pAccelerationZ__description__0 = pAccelerationZ 系统变量将会储存上一个影格该设备的 z 轴加速度。值的单位为每平方秒米。 -rotationX__description__0 = rotationX 系统变量将会储存设备在 x 轴的旋转角度。值介于 0 与 +/-180 度之间。

    注意：旋转的顺序很重要，比如说，如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。 -rotationY__description__0 = rotationY 系统变量将会储存设备在 y 轴的旋转角度。值介于 0 与 +/-90 度之间。

    注意：旋转的顺序很重要，比如说，如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。 -rotationZ__description__0 = rotationZ 系统变量将会储存设备在 z 轴的旋转角度。值介于 0 与 359 度之间。

    与 rotationX 及 rotationY 不同的是，这变量只能在有内建指南针的设备使用。

    注意：旋转的顺序很重要，比如说，如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。 -pRotationX__description__0 = pRotationX 系统变量将会储存上一个影格该设备在 x 轴的旋转角度。值介于 0 与 +/-180 度之间。

    pRotationX 可以和 rotationX 一起使用以找出设备 x 轴的旋转方向。 -pRotationY__description__0 = pRotationY 系统变量将会储存上一个影格该设备在 y 轴的旋转角度。值介于 0 与 +/-90 度之间。

    pRotationY 可以和 rotationY 一起使用以找出设备 y 轴的旋转方向。 -pRotationZ__description__0 = pRotationZ 系统变量将会储存上一个影格该设备在 z 轴的旋转角度。值介于 0 与 359 度之间。

    pRotationZ 可以和 rotationZ 一起使用以找出设备 z 轴的旋转方向。 -setMoveThreshold__description__0 = setMoveThreshold() 函数可用来设置 deviceMoved() 函数的移动阈值。默认阈值为 0.5。 -setMoveThreshold__params__value = 数字：阈值 -setShakeThreshold__description__0 = setShakeThreshold() 函数可用来设置 deviceShaken() 函数的摇动阈值。默认阈值为 30。 -setShakeThreshold__params__value = 数字：阈值 -deviceMoved__description__0 = deviceMoved() 函数将在设备在 X、Y 或 Z 轴被移动多过阈值时被调用。默认阈值为 0.5。 -deviceTurned__description__0 = deviceTurned() 函数将在设备被连续旋转多过 90 度时被调用。

    触发 deviceTurned() 的旋转轴将被储存在 turnAxis 变量中。deviceTurned() 函数能被锁定在 X、Y 或 Z 以确保只有所定义的轴会导致函数被调用，您只需比较 turnAxis 变量和 'X'、'Y' 或 'Z' 字符串。 -deviceShaken__description__0 = deviceShaken() 函数将在设备的 accelerationX 及 accelerationY 加速度值改变超过阈值。默认阈值为 30。 -keyIsPressed__description__0 = keyIsPressed 布尔系统变量将会在任何键被按下时为真（true）而没键被按下时为假（false）。 -key__description__0 = key 系统变量将会储存上一个被键入的键盘键值。以获得正确的大小写，最好在 keyTyped() 内使用。至于非 ASCII 值的键，请使用 keyCode 变量。 -keyCode__description__0 = keyCode 变量可用来探测特别键如 BACKSPACE、DELETE、ENTER、RETURN、TAB、ESCAPE、SHIFT、CONTROL、OPTION、ALT、UP_ARROW、DOWN_ARROW、LEFT_ARROW、RIGHT_ARROW 是否被按下。您也可以使用特别网站如 keycode.info 以找出自定义键的 keyCode。 -keyPressed__description__0 = keyPressed() 函数将会在每一次任何键被按下时被调用。被按下的键的 keyCode 将被储存在 keyCode 变量内。

    对于非 ASCII 值的键，请使用 keyCode 变量。您能查看 keyCode 是否等于 BACKSPACE、DELETE、ENTER、RETURN、TAB、ESCAPE、SHIFT、CONTROL、OPTION、ALT、UP_ARROW、DOWN_ARROW、LEFT_ARROW、RIGHT_ARROW。

    至于 ASCII 键值它们的值会被储存在 key 变量内。不过，它并不会分辨大小写。因此，建议使用 keyTyped() 以读取 key 变量，因为其大小写在这里会被分辨出来。

    取决于操作系统如何处理按键重复，按住一个键可能使 keyTyped() （及 keyReleased()）被调用多过一次。重复的速度应操作系统及该电脑的设置而定。

    不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -keyReleased__description__0 = keyReleased() 函数将会在每一次任何键被释放时被调用。请查看 key 及 keyCode 以知更多详情。

    不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -keyTyped__description__0 = keyTyped() 函数将会在每一次任何键被按下时被调用，可是会忽略操作键如 Ctrl、Shift 及 Alt。被按下的键的 keyCode 将被储存在 keyCode 变量内。

    取决于操作系统如何处理按键重复，按住一个键可能使 keyTyped() （及 keyReleased()）被调用多过一次。重复的速度应操作系统及该电脑的设置而定。

    不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -keyIsDown__description__0 = keyIsDown() 函数将查看被提供的键是否正被按下。它能在当您需要使用多个不同的键同时用来移动一个物件时使用（如将一个图像往斜移动）。您能给予任何代表该键的 keyCode 会任何此页的 keyCode 变量名为参数。 -keyIsDown__params__code = 数字：该查看的键 -mouseX__description__0 = mouseX 系统变量将会储存当时的鼠标相对于画布 (0, 0) 位置的的横向位置。如果使用的是触动而不是滑鼠的话，mouseX 将会储存上一个触动点的 x 值。 -mouseY__description__0 = mouseY 系统变量将会储存当时的鼠标相对于画布 (0, 0) 位置的的直向位置。如果使用的是触动而不是滑鼠的话，mouseY 将会储存上一个触动点的 y 值。 -pmouseX__description__0 = pmouseX 系统变量将会储存上一个影格鼠标或触动点相对于画布 (0, 0) 位置的的横向位置。 -pmouseY__description__0 = pmouseY 系统变量将会储存上一个影格鼠标或触动点相对于画布 (0, 0) 位置的的直向位置。 -winMouseX__description__0 = winMouseX 系统变量将会储存当时鼠标相对于窗口 (0, 0) 位置的横向位置。 -winMouseY__description__0 = winMouseY 系统变量将会储存当时鼠标相对于窗口 (0, 0) 位置的直向位置。 -pwinMouseX__description__0 = pwinMouseX 系统变量将会储存上一个影格鼠标相对于窗口 (0, 0) 位置的横向位置。 -pwinMouseY__description__0 = pwinMouseY 系统变量将会储存上一个影格鼠标相对于窗口 (0, 0) 位置的直向位置。 -mouseButton__description__0 = p5 将自动记录滑鼠键是否被按下及哪个键被按下。mouseButton 系统变量的值可能是 LEFT、RIGHT 或 CENTER，取决于上一个被按下的滑鼠键。请注意：不同的浏览器可能记录不同的 mouseButton 值。 -mouseIsPressed__description__0 = mouseIsPressed 系统变量将会在滑鼠键被按下时为真（true），而没按下时为假（false）。 -mouseMoved__description__0 = mouseMoved() 函数将在每次鼠标移动而滑鼠键没有被按下的时候被调用。

    不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -mouseDragged__description__0 = mouseDragged() 函数将在每次鼠标移动及滑鼠键正被按下的时候被调用。如果 mouseDragged() 函数并未有被定义，touchMoved() 函数有被定义的话将会被调用。

    不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -mousePressed__description__0 = mousePressed() 函数将在每次滑鼠键被按下时被调用。mouseButton 函数（请参考其文献）可以被用来探测哪一个滑鼠键刚被按下。如果 mousePressed() 函数并未有被定义，touchStarted() 函数有被定义的话将会被调用。

    不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -mouseReleased__description__0 = mouseReleased() 函数将在每次滑鼠键被释放时被调用。如果 mouseReleased() 函数并未有被定义，touchEnded() 函数有被定义的话将会被调用。

    不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -mouseClicked__description__0 = mouseClicked() 函数将在滑鼠键被按下然后被释放后被调用。

    不同浏览器处理滑鼠点击的方式不大一样，所以这函数只有在滑鼠左键被点击时才保证会被触发。如果想要处理其他滑鼠键的点击或释放事件，请参考 mousePressed() 或 mouseReleased()。

    不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -doubleClicked__description__0 = doubleClicked() 函数将在 dblclick 事件被触发式被调用，dblclick 时间是 DOM L3 规范的一部分。doubleClicked 将在滑鼠键（通常为左键）连续两次在同样一个元素上点击时被触发。以知更多详情请参考 Mozilla 的参考文献：https://developer.mozilla.org/en-US/docs/Web/Events/dblclick。 -mouseWheel__description__0 = mouseWheel() 函数将在每次直向滑鼠滚轮事件被触发式被调用，可以由实际的滑鼠滚轮或摸板触发。

    event.delta 属性将返回滑鼠滚轮所滚动的量。这值可以是正数或负数，取决于滚动的方向（在 OS X 如果启用“自然”滚屏方向，正反方向将相反）。 -touches__description__0 = touches[] 系统变量将储存一个含有现在所有触动点相对于画布 (0, 0) 位置的位置数组，及分辨个别触动点移动时的 ID。数组内的每个元素都会有 x、y 及 id 属性。

    touches[] 数组并不受 Safari 及 IE 移动设备（包括手提电脑）所支持。 -touchStarted__description__0 = touchStarted() 函数将在每次触动事件被触发时被调用。如果 touchStarted() 函数并未有被定义，mousePressed() 函数有被定义的话将会被调用。

    不同浏览器可能有不同附属于个别触动事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -touchMoved__description__0 = touchMoved() 函数将在每次触点移动事件被触发时被调用。如果 touchMoved() 函数并未有被定义，mouseDragged() 函数有被定义的话将会被调用。

    不同浏览器可能有不同附属于个别触动事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -touchEnded__description__0 = touchEnded() 函数将在每次触动结束时被调用。如果 touchEnded() 函数并未有被定义，mouseReleased() 函数有被定义的话将会被调用。

    不同浏览器可能有不同附属于个别触动事件的行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。 -createImage__description__0 = 创造一个新的 p5.Image 物件（储存图像的数据类型）。这将提供一个全新的像素缓冲供您使用。缓冲区的大小将由所提供的宽度和高度参数决定。

    .pixels 将提供一个含有所有像素资料的数组。这些值都为数字。这数组的大小为（同时考虑像素密度）显示窗口的大小 x4，分别代表每个像素由左到右，上到下的 R、G、B、A 值。请参考 .pixels 文献。您也能使用更简单的 set() 或 get()。

    在获取一个图像的像素之前，像素资料必须先使用 loadPixels() 函数加载。在数组资料被修改后，updatePixels() 函数必须被调用以更新图像资料。 -createImage__returns = p5.Image：p5.Image 物件 -createImage__params__width = 整数：像素宽度 -createImage__params__height = 整数：像素宽度 -saveCanvas__description__0 = 将现有的画布储存成图像。In Safari, this will open the image in the window and the user must provide their own filename on save-as. Other browsers will either save the file immediately, or prompt the user with a dialogue window. -saveCanvas__params__filename = 字符串 -saveCanvas__params__extension = 字符串：'jpg' 或 'png' -saveFrames__description__0 = 捕捉一系列可用于制作影响的影格图像。接受回调函数。比如说，您可能想要将影格传送至伺服器以方便储存或转变成影像。如果回调函数没有被提供，浏览器将弹出储存文件对话框以尝试下载所有刚被创造的图像。如果提供回调函数，图像资料默认上并不会被储存而是以物件数组的形式被转送至回调函数做参数，数组大小为储存影格的总数。 -saveFrames__params__filename = 字符串 -saveFrames__params__extension = 字符串：'jpg' 或 'png' -saveFrames__params__duration = 数字：该捕捉的影格的秒数 -saveFrames__params__framerate = 数字：捕捉影格的帧率 -saveFrames__params__callback = 函数(数组)：一个用来处理图像资料的回调函数。此函数将会被给予一个数组为参数。此数组将会储存所定义的捕捉影格物件。每一个物件都会有三个属性：imageData - 为 image/octet-stream 类型、filename 及 extension。 -loadImage__description__0 = 从被给予的路径加载一个图像并使用其图像创造一个 p5.Image 物件。

    该图像或许不能立刻被渲染，如果您想要保证您在图像加载完毕后才开始做任何事情，您可以将 loadImage() 函数调用在 preload() 里。您也能提供回调函数以在图像加载完毕时处理图像资料。

    图像的路径应该相对于链接您的绘图的 HTML 文件。从其他 URL 或远程位置加载图像可能会被浏览器的内建安全模式阻止。 -loadImage__returns = p5.Image：p5.Image 物件 -loadImage__params__path = 字符串：欲加载的图像的路径 -loadImage__params__successCallback = 函数(p5.Image)：图像加载结束调用的函数。会被给予 p5.Image 做参数。 -loadImage__params__failureCallback = 函数(错误物件)：如果图像加载失败此函数将被调用并给予错误物件做参数。 -image__description__0 = 在 p5 画布上画一个图像。

    此函数能使用几个不同数量的参数。最简单的用法只需要三个参数：img（图像）、x 及 y - (x, y) 为图像的位置。多两个可选参数能用来定义绘制图像的宽度及高度。

    此函数也能使用所有八个数字参数。以分辨所有的参数，p5.js 在以下将使用“终点方形”（应对于 “dx”、“dy” 等）及“原图像”（应对于 “sx”、“sy”等）的名词。提供“原图像”大小可用来显示原图像的一个子部分而不需要显示整个图像。以下图表能解释得更清楚： -image__params__img = p5.Image|p5.Element：该显示的图像 -image__params__x = 数字：图像左上角的 x 坐标 -image__params__y = 数字：图像左上角的 y 坐标 -image__params__width = 数字：绘制图像的宽度 -image__params__height = 数字：绘制图像的高度 -image__params__dx = 数字：绘制图像的终点方形的 x 坐标位置 -image__params__dy = 数字：绘制图像的终点方形的 y 坐标位置 -image__params__dWidth = 数字：终点方形的宽度 -image__params__dHeight = 数字：终点方形的高度 -image__params__sx = 数字：该画进终点方形的原图像子部分的 x 坐标 -image__params__sy = 数字：该画进终点方形的原图像子部分的 y 坐标 -image__params__sWidth = 数字：该画进终点方形的原图像子部分的宽度 -image__params__sHeight = 数字：该画进终点方形的原图像子部分的高度 -tint__description__0 = 定义显示图像的填色值。图像能着色成所定义的颜色或提供透明度值以使其透明化。

    如想是图像透明化但不想影响其颜色，可使用白色为着色值并定义透明度值。比如说，tint(255, 128) 将会使一个图像成为 50% 透明（假设为默认透明度范围 0-255，可使用 colorMode() 调整）。

    灰阶值参数必须低于或等于当时 colorMode() 所定义的最高值。默认最高值为 255。 -tint__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -tint__params__v2 = 数字：绿彩值或饱和度值，需在被定义的范围内 -tint__params__v3 = 数字：蓝彩值或亮度值，需在被定义的范围内 -tint__params__alpha = 数字： -tint__params__value = 字符串：颜色字符串 -tint__params__gray = 数字：灰阶值 -tint__params__values = 数字[]：一个有红、绿、蓝及透明度值的数组 -tint__params__color = p5.Color：着色色值 -noTint__description__0 = 移除当时显示图像的填色值并将其恢复成显示图形的原色调。 -imageMode__description__0 = 定义图像模式。更改 image() 解读参数的方式以更改图像开始绘制的位置。默认模式为 imageMode(CORNER)，此模式将解读第二及第三个参数为图像的左上角位置。如果加多两个参数，它们则被用来定义图像的宽度和高度。

    imageMode(CORNERS) 将使 image() 函数解读第二及第三个参数为一个角落的位置，而第四个第五个参数为对面角落的位置。

    imageMode(CENTER) 将使 image() 函数解读第二及第三个参数为图像的中心点。如果提供多两个参数，它们将被用来定义图像的宽度和高度。 -imageMode__params__mode = 常量：CORNER、CORNERS 或 CENTER -pixels__description__0 = 此数组为一个储存显示窗口内所有像素值的 Uint8ClampedArray。这些值都为数字。这数组的大小为（同时考虑像素密度）显示窗口的大小 x4，分别代表每个像素由左到右，上到下的 R、G、B、A 值。视网膜显示及其他高密度显示器将会有更多像素（pixelDensity^2 倍）。比如说，如果图像为 100x100 像素，总共会有 40,000 个元素在 pixels[] 数组内。而在一个视网膜显示，将会有 160,000 个元素。

    数组内最初四个值（指数 0-3）将会是在坐标 (0, 0) 的像素的 R、G、B、A 值。下四个值（指数 4-7）将会是在坐标 (1, 0) 的像素的 R、G、B、A 值。一般上，如果要设置像素 (x, y) 的值： 
    CODE BLOCK PENDING
    虽然以上的方式有点复杂，它能提供足够的弹性以应对任何像素密度的显示。注意 set() 将会自动处理设定所有在任何像素密度下 (x, y) 坐标在 pixels[] 内的值，不过程序性能可能在像素数组被更改很多次时时不佳。

    在使用这个数组之前，像素资料必须先使用 loadPixels() 函数加载。在数组资料被修改后，updatePixels() 函数必须被调用以更新图像资料。

    注意这不是个普通的 Javascript 数组。这表示 Javascript 数组函数如 slice() 或 arrayCopy() 将不会有效果。 -blend__description__0 = 将一个图像内一个区域的像素复制去另一个图像，同时使用所定义的混合模式执行复制。 -blend__params__srcImage = p5.Image：原图像 -blend__params__sx = 整数：原图像的左上角 x 坐标 -blend__params__sy = 整数：原图像的左上角 y 坐标 -blend__params__sw = 整数：原图像的宽度 -blend__params__sh = 整数：原图像的高度 -blend__params__dx = 整数：终点图像左上角的 x 坐标 -blend__params__dy = 整数：终点图像左上角的 y 坐标 -blend__params__dw = 整数：终点图像的宽度 -blend__params__dh = 整数：终点图像的高度 -blend__params__blendMode = 常量：混合模式。BLEND、DARKEST、LIGHTEST、DIFFERENCE、MULTIPLY、EXCLUSION、SCREEN、REPLACE、OVERLAY、HARD_LIGHT、SOFT_LIGHT、DODGE、BURN、ADD 或 NORMAL。 -copy__description__0 = 将画布内一个区域的像素复制去画布内另外一个区域同时也复制一个由 srcImg 参数所定义的图像内一个区域的像素去定义 srcImage 的画布上，这将是原图像。如果原图像与重点区域的大小不同，它将会自动缩放原图像的像素以符合所定义的终点区域。 -copy__params__srcImage = p5.Image：原图像 -copy__params__sx = 整数：原图像的左上角 x 坐标 -copy__params__sy = 整数：原图像的左上角 y 坐标 -copy__params__sw = 整数：原图像的宽度 -copy__params__sh = 整数：原图像的高度 -copy__params__dx = 整数：终点图像左上角的 x 坐标 -copy__params__dy = 整数：终点图像左上角的 y 坐标 -copy__params__dw = 整数：终点图像的宽度 -copy__params__dh = 整数：终点图像的高度 -filter__description__0 = 在画布上使用过滤器。

    预设选择为：

    THRESHOLD 将图像转换成黑与白像素，取决于它们是否高于或低于所定义的 level 参数值。参数值必须在 0.0（黑色）与 1.0（白色）之间。如果并没有提供参数的话，默认将设为 0.5。

    GRAY 将图像内的颜色转换成灰阶色。不使用任何参数。

    OPAQUE 设置所有透明度值成完全不透明。不使用任何参数。

    INVERT 设置每个像素成其反值。不使用任何参数。

    POSTERIZE 将限制每个图像的彩色通道至参数所定义的颜色数。参数值可以介于 2 至 255 之间，但是效果会在较低值是比较明显。

    BLUR 将使用 level 参数所定义的模糊度执行高斯模糊。如果没有提供参数，模糊度为高斯模糊半径为 1。越大的值越模糊。

    ERODE 减少亮区。不使用任何参数。

    DILATE 增加亮区。不使用任何参数。 -filter__params__filterType = 常量：THRESHOLD、GRAY、OPAQUE、INVERT、POSTERIZE、BLUR、ERODE、DILATE 或 BLUR。 -filter__params__filterParam = 数字：每个过滤器独有的可选性参数，请看以上 -get__description__0 = 返回任何像素值的一个为 [R,G,B,A] 的数组或捕捉图像的一部分。如果没有提供任何参数，将会返回整个图像。可使用 x 及 y 参数以取得一个像素的值。多加定义 w 及 h 参数可取的显示窗口的一部分。当在取得图像时，x 及 y 参数将定义图像的左上角坐标值，无论当时的图像模式为何。

    如果欲取得的像素在图像外，将返回 [0,0,0,255]。以取得根据当时的颜色值范围及颜色模式的数字，请使用 getColor 而不是 get。

    使用 get(x, y) 以取得一个像素的颜色相对来说简单，但是其速度并没有直接从 pixels[] 数组获取数据来的快。与使用 get(x, y) 有相同的效果但使用 pixels[] 及像素密度 d 的范例如下 var x, y, d; // 设置这为坐标 var off = (y width + x) d * 4; var components = [ pixels[off], pixels[off + 1], pixels[off + 2], pixels[off + 3] ]; print(components);

    请参考 pixels[] 文献以知更多详情。 -get__returns = 数字[]|p5.Image：在 x,y 的像素值数组或 p5.Image -get__params__x = 数字：像素的 x 坐标 -get__params__y = 数字：像素的 y 坐标 -get__params__w = 数字：宽度 -get__params__h = 数字：高度 -loadPixels__description__0 = 将显示窗口的像素资料加载到 pixels[] 数组里。这函数必须在读写 pixels[] 之前被调用。注意只有使用 set() 或直接修改 pixels[] 的改变会发生。 -set__description__0 = 改变任何像素的颜色，或直接在显示窗口内绘画一个图像。

    x 及 y 参数用于定义该改变的像素而 c 参数用于定义颜色值。这可以是一个 p5.Color 物件或一个 [R, G, B, A] 像素数组。它也能是一个灰阶值。在设定一个图像时，x 及 y 参数将定义图像左上角的坐标值，无论当时的图像模式为何。

    在使用 set() 后，您必须调用 updatePixels() 以使您的改变生效。这应该在所有像素都被设定后才被调用，而且也必须在调用 get() 或绘制图像之前调用。

    使用 set(x, y) 设置一个像素的颜色相对来说简单，但使其速度并没有直接将数据写在 pixels[] 数组里来的快。直接使用 pixels[] 设置像素值可能在使用视网膜显示器时比较复杂，不过它会在每一个循环有很多像素需要被设定时表现得更好。

    请参考 pixels[] 文献以知更多详情。 -set__params__x = 数字：像素的 x 坐标 -set__params__y = 数字：像素的 y 坐标 -set__params__c = 数字|数字[]|物件：插入一个灰阶值 | 一个像素数组 | 一个 p5.Color 物件 | 一个用于复制的 p5.Image -updatePixels__description__0 = 使用 pixels[] 数组内的资料更新显示窗口。通常与 loadPixels() 一起使用。如果您只需从该数组中读取像素资料，您不需要调用 updatePixels() — 更新只有在进行更改时需要被调用。updatePixels() 应该在像素数组被更改或 set() 被调用时使用，只有使用 set() 或直接修改 pixels[] 的改变会发生。 -updatePixels__params__x = 数字：欲更新的区域的左上角 x 坐标 -updatePixels__params__y = 数字：欲更新的区域的左上角 y 坐标 -updatePixels__params__w = 数字：欲更新的区域的宽度 -updatePixels__params__h = 数字：欲更新的区域的高度 -loadJSON__description__0 = 从一个文件或网址加载一个 JSON 文件，将返回一个物件。注意如果该 JSON 文件内涵一个数组，此函数仍然会返回一个以数字为指数的物件。

    这函数为异步进行，这表示它可能不会在您绘图的下一行代码执行前完成。JSONP 功能支持是由填充工具所提供而您可以使用第二个参数来定义一个有 JSON 回调定义的物件，只需跟从这里的指示。 -loadJSON__returns = 物件：JSON 数据 -loadJSON__params__path = 字符串：该加载的文件名或网址 -loadJSON__params__jsonpOptions = 物件：关于 jsonp 设置的设置物件 -loadJSON__params__datatype = 字符串："json" 或 "jsonp" -loadJSON__params__callback = 函数：在 loadJSON() 完成后该执行的函数，返回的数据将会是函数第一个参数 -loadJSON__params__errorCallback = 函数：在发生错误时该执行的函数，回复将会是函数第一个参数 -loadStrings__description__0 = 读取一个文件的内容并使用个别字行创造一个字符串数组。如果文件名被用作第一个参数，如以上范例，该文件必须被储存在绘图文件夹内。

    除此之外，该文件也能从本地电脑任何位置加载，只需使用绝对路径（任何在 Unix 及 Linux 内由 / 开始的路径，或在 Windows 内由驱动器符号开始的路径），又或者任何在网络上的文件网址也能用来当作 filename 参数。

    这函数为异步进行，这表示它可能不会在您绘图的下一行代码执行前完成。 -loadStrings__returns = 字符串[]：字符串数组 -loadStrings__params__filename = 字符串：该加载的文件名或网址 -loadStrings__params__callback = 函数：在 loadStrings() 完成后该执行的函数，返回的数组将会是函数第一个参数 -loadStrings__params__errorCallback = 函数：在发生错误时该执行的函数，回复将会是函数第一个参数 -loadTable__description__0 = 读取一个文件的内容并使用其内容创造一个 p5.Table 物件。如果文件名被用作第一个参数，该文件必须被储存在绘图文件夹内。文件名参数也能是一个在网络上的文件的网址。默认上，该文件被假定为以逗号分隔（格式为 CSV）。该表格只会在 ‘header’ 设置被使用时才会寻找标签。

    可使用的设置包括：
    • csv - 将表格解析为逗号分隔值
    • tsv - 将表格解析为制表符分隔值
    • header - 这表格有标签行


    当使用多个设置时，您只需将他们分为个别的参数并使用逗号分隔。例如：

    loadTable('my_csv_file.csv', 'csv', 'header');

    所有加载及储存的文件都需使用 UTF-8 编码。

    这函数为异步进行，这表示它可能不会在您绘图的下一行代码执行前完成。在 preload() 内调用 loadTable() 将保证加载工作会在 setup() 及 draw() 被调用前完成

    在 preload() 外，您可以提供一个回调函数以处理加载物件。 -loadTable__returns = 物件：含有数据的 Table 物件 -loadTable__params__filename = 字符串：该加载的文件名或网址 -loadTable__params__callback = 函数：在 loadTable() 完成后该执行的函数，返回的 Table 物件将会是函数第一个参数 -loadTable__params__errorCallback = 函数：在发生错误时该执行的函数，回复将会是函数第一个参数 -loadXML__description__0 = 读取一个文件的内容并使用其内容创造一个 XML 物件。如果文件名被用作第一个参数，该文件必须被储存在绘图文件夹内。

    除此之外，该文件也能从本地电脑任何位置加载，只需使用绝对路径（任何在 Unix 及 Linux 内由 / 开始的路径，或在 Windows 内由驱动器符号开始的路径），又或者任何在网络上的文件网址也能用来当作 filename 参数。

    这函数为异步进行，这表示它可能不会在您绘图的下一行代码执行前完成。在 preload() 内调用 loadTable() 将保证加载工作会在 setup() 及 draw() 被调用前完成

    在 preload() 外，您可以提供一个回调函数以处理加载物件。 -loadXML__returns = 物件：含有数据的 XML 物件 -loadXML__params__filename = 字符串：该加载的文件名或网址 -loadXML__params__callback = 函数：在 loadXML() 完成后该执行的函数，返回的 XML 物件将会是函数第一个参数 -loadXML__params__errorCallback = 函数：在发生错误时该执行的函数，回复将会是函数第一个参数 -loadBytes__returns = 物件：一个 ‘bytes’ 属性将为被加载的缓冲区的物件 -loadBytes__params__file = 字符串：该加载的文件名或网址 -loadBytes__params__callback = 函数：在 load() 完成后该执行的函数 -loadBytes__params__errorCallback = 函数：在发生错误时该执行的函数 -httpGet__description__0 = 执行 HTTP GET 请求的函数。如果数据类型（datatype）没有被定义的话，p5 将会尝试根据网址猜返回数据的类型，默认为文字。这和调用 httpDo(path, 'GET') 的效果一样。‘binary’ 数据类型将会返回一个 Blob 物件，而 ‘arrayBuffer’ 数据类型将会返回一个 ArrayBuffer 并可用来创造类型化数组（如 Uint8Array）。 -httpGet__params__path = 字符串：该加载的文件名或网址 -httpGet__params__datatype = 字符串："json"、"jsonp"、"binary"、"arrayBuffer"、"xml"或"text" -httpGet__params__data = 物件|布尔值：与请求一起传送的参数资料 -httpGet__params__callback = 函数：在 httpGet() 完成后该执行的函数，返回的资料物件将会是函数第一个参数 -httpGet__params__errorCallback = 函数：在发生错误时该执行的函数，回复将会是函数第一个参数 -httpPost__description__0 = 执行 HTTP POST 请求的函数。如果数据类型（datatype）没有被定义的话，p5 将会尝试根据网址猜返回数据的类型，默认为文字。这和调用 httpDo(path, 'POST') 的效果一样。 -httpPost__params__path = 字符串：该加载的文件名或网址 -httpPost__params__datatype = 字符串："json"、"jsonp"、"xml" 或 "text"。如果不提供此参数，httpPost() 将尝试猜 -httpPost__params__data = 物件|布尔值：与请求一起传送的参数资料 -httpPost__params__callback = 函数：在 httpPost() 完成后该执行的函数，返回的资料物件将会是函数第一个参数 -httpPost__params__errorCallback = 函数：在发生错误时该执行的函数，回复将会是函数第一个参数 -httpDo__description__0 = 执行 HTTP 请求的函数。如果数据类型（datatype）没有被定义的话，p5 将会尝试根据网址猜返回数据的类型，默认为文字。

    如果需要更高等的使用法，您可以在第一个参数给予路径而第二个参数给予一个物件，物件内容设置与 Fetch API 规范的一样。 -httpDo__params__path = 字符串：该加载的文件名或网址 -httpDo__params__method = 字符串："GET"、"POST" 或 "PUT"，默认为 "GET" -httpDo__params__datatype = 字符串："json"、"jsonp"、"xml" 或 "text" -httpDo__params__data = 物件|布尔值：与请求一起传送的参数资料 -httpDo__params__callback = 函数：在 httpDo() 完成后该执行的函数，返回的资料物件将会是函数第一个参数 -httpDo__params__errorCallback = 函数：在发生错误时该执行的函数，回复将会是函数第一个参数 -httpDo__params__options = 物件：Request 物件，请参考 “fetch” API 文献以了解可使用设置 -createWriter__returns = p5.PrintWriter: -createWriter__params__name = 字符串：该创造的文件的名 -createWriter__params__extension = 字符串： -save__description__0 = 储存一个图像、文字、JSON、csv、wav 或 html 文件。将提示客户电脑下载文件。注意 save() 函数不建议在正在循环执行的 draw 函数内使用，因为每一次被调用 save() 函数将会弹出一个储存对话框。

    默认上此函数将储存画布成一个图像。您也可以选择定义一个文件名。例如：
    CODE BLOCK PENDING
    除此之外，第一个参数也能是个画布 p5.Element 的对象、字符串数组、JSON 数组、JSON 物件、p5.Table、p5.Image 或 p5.SoundFile（需要 p5.sound）。第二个参数为文件名（包括扩展名）。第三个参数适用于特别给这一类物件的设定。这函数将会储存一个符合给予的参数的文件。例如：
    CODE BLOCK PENDING
    -save__params__objectOrFilename = Object|String: (Optional) If filename is provided, will save canvas as an image with either png or jpg extension depending on the filename. If object is provided, will save depending on the object and filename (see examples above). -save__params__filename = 物件|字符串：如果所提供的是文件名，此函数将会使用该文件名加上 png 或 jpg 文件扩展名来储存画布为一个图像。如果所提供的是物件，此函数则会一物件所定义的方式储存文件（请参考以上范例）。 -save__params__options = 布尔值|字符串：依文件类型而定的设定。比如说，在储存 JSON 时，true 表示输出文件将会针对文件大小进行优化，而同时牺牲可读性。 -saveJSON__description__0 = 将一个数组或 JSON 物件的内容写进一个 .json 文件内。文件的储存方式及地点在不同浏览器之间有所不同。 -saveJSON__params__json = 数组|物件： -saveJSON__params__filename = String -saveJSON__params__optimize = 布尔值：如果为 true，将移除输出文件内的换行符及空格以优化文件大小（但牺牲可读性） -saveStrings__description__0 = 将一个字符串数组写进一个文字文件内，每一行为每一组字符串。文件的储存方式及地点在不同浏览器之间有所不同。 -saveStrings__params__list = 字符串[]：该输出的字符串数组 -saveStrings__params__filename = 字符串：输出文件的名字 -saveStrings__params__extension = 字符串：文件扩展名 -saveStrings__params__isCRLF = Boolean: (Optional) if true, change line-break to CRLF -saveTable__description__0 = 将一个表格（Table）物件的内容写进一个文件内。默认将储存为逗号分隔值（'csv'）的文字文件但也可以使用制表符分隔（'tsv'）或生成一个 HTML 表格（'html'）。文件的储存方式及地点在不同浏览器之间有所不同。 -saveTable__params__Table = p5.Table: the Table object to save to a file -saveTable__params__filename = 字符串：储存表格文件的名字 -saveTable__params__options = 字符串：可以是 "tsv"、"csv" 或 "html" -abs__description__0 = 计算一个数字的绝对值（大小值）。映射到 Math.abs()。一个数字的绝对值一定是个正数。 -abs__returns = 数字：被给予数字的绝对值 -abs__params__n = 数字：用于计算的数字 -ceil__description__0 = 计算最靠近并大于或等于参数值的整数。映射到 Math.ceil()。比如说，ceil(9.03) 将返回 10。 -ceil__returns = 整数：取整后的数字 -ceil__params__n = 数字：该取整的数字 -constrain__description__0 = 限制一个数字于最低值与最高值之间。 -constrain__returns = 数字：被限制后的数字 -constrain__params__n = 数字：该限制的数字 -constrain__params__low = 数字：最低值 -constrain__params__high = 数字：最高值 -dist__description__0 = 计算两点之间的距离。 -dist__returns = 数字：两点之间的距离 -dist__params__x1 = 数字：第一个点的 x 坐标 -dist__params__y1 = 数字：第一个点的 y 坐标 -dist__params__x2 = 数字：第二个点的 y 坐标 -dist__params__y2 = 数字：第一个点的 z 坐标 -dist__params__z1 = 数字：第二个点的 x 坐标 -dist__params__z2 = 数字：第二个点的 z 坐标 -exp__description__0 = 返回欧拉数 e （2.71828...）提升到由参数 n 定义的指数。映射到 Math.exp()。 -exp__returns = 数字：e^n -exp__params__n = 数字：该提升的指数 -floor__description__0 = 计算最靠近并小于或等于参数值的整数。映射到 Math.floor()。 -floor__returns = 整数：取整后的数字 -floor__params__n = 数字：该取整的数字 -lerp__description__0 = 计算一个介于两个数字之间所定义的插值量位置的数字。amt 参数为两个值之间的插值量，0.0 为第一个值，0.1 为非常接近第一个值，0.5 为两者之间等等。lerp 函数可用来沿着直线制作动画及绘制虚线。 -lerp__returns = 数字：插值 -lerp__params__start = 数字：第一个值 -lerp__params__stop = 数字：第二个值 -lerp__params__amt = 数字：介于 0.0 与 1.0 之间的数字 -log__description__0 = 计算一个数字的自然对数（e 为底数的对数）。这函数需要 n 参数大于 0.0。映射到 Math.log()。 -log__returns = 数字：n 的自然对数 -log__params__n = Number: number greater than 0 -mag__description__0 = 计算一个向量的大小（或长度）。向量为一个空间内的方向，通常用于电脑图形及线性代数。因为它没有“开始”位置，一个向量的大小可以被想成是 0,0 坐标与向量 x,y 坐标之间的距离。因此，mag() 是 dist(0, 0, x, y) 的缩写。 -mag__returns = 数字：从 (0, 0) 至 (a, b) 的向量的大小 -mag__params__a = 数字：第一个值 -mag__params__b = 数字：第二个值 -map__description__0 = 从一个范围内映射一个数字去另一个范围。

    在以上第一个范例，25 被从 0 至 100 之间的范围映射去窗口最左方 (0) 至最右方 (width) 的范围内。 -map__returns = 数字：映射后的数字 -map__params__value = 数字：该转换的值 -map__params__start1 = 数字：现在值的最低值 -map__params__stop1 = 数字：现在值的最高值 -map__params__start2 = 数字：目标值的最低值 -map__params__stop2 = 数字：目标值的最高值 -map__params__withinBounds = 布尔值：限制目标值在最高及最低值之间 -max__description__0 = 找出一系列数字中最大的值，并返回该值。max() 能接受任何数量的数字参数，或是一个任何大小的数组。 -max__returns = 数字：最高值的数字 -max__params__n0 = 数字：用于比较的数字 -max__params__n1 = 数字：用于比较的数字 -min__description__0 = 找出一系列数字中最小的值，并返回该值。min() 能接受任何数量的数字参数，或是一个任何大小的数组。 -min__returns = 数字：最低值的数字 -min__params__n0 = 数字：用于比较的数字 -min__params__n1 = 数字：用于比较的数字 -min__params__nums = Number[]: Numbers to compare -norm__description__0 = 将一个数字由一个范围标准化成介于 0 及 1 之间的值。与 map(value, low, high, 0, 1) 的效果相同。在范围外的数字将不会被限制在 0 与 1 之间，因为范围外的值通常是有意及有用的。（参考以上第二个范例） -norm__returns = 数字：标准化后的数字 -norm__params__value = 数字：该标准化的值 -norm__params__start = 数字：现在值的最低值 -norm__params__stop = 数字：现在值的最高值 -pow__description__0 = 执行幂运算。pow() 函数是个能有效率地将数字大量乘于自己（或其倒数）的方式。比如说，pow(3, 5) 等同于 3*3*3*3*3 而 pow(3, -5) 等同于 1 / (3*3*3*3*3)。映射到 Math.pow()。 -pow__returns = 数字：n^e -pow__params__n = 数字：幂运算的底数 -pow__params__e = 数字：幂运算的指数 -round__description__0 = 计算最靠近 n 参数的整数。比如说，round(133.8) 将返回 134。映射到 Math.round()。 -round__returns = 整数：取整后的数字 -round__params__n = 数字：该取整的数字 -round__params__decimals = Number: (Optional) number of decimal places to round to, default is 0 -sq__description__0 = 平方一个数字（将数字乘于自己）。结果一定是个正数，因为将两个负数相乘一定会有一个正数结果。比如说 -1 * -1 = 1。 -sq__returns = 数字：平方后的数字 -sq__params__n = 数字：该平方的数字 -sqrt__description__0 = 计算一个数字的平方根。一个数字的平方根一定是个正数，虽然也可能有正确的负数平方根。一个数字 a 的平方根 s 有以下属性 s*s = a。此函数为取平方的相反。映射到 Math.sqrt()。 -sqrt__returns = 数字：取平方根后的数字 -sqrt__params__n = 数字：该取平方根的非负数 -createVector__description__0 = 创造一个新的 p5.Vector 向量（用以储存向量的数据类型）。此函数将提供一个二维或三维的向量，准确来说一个欧几里得（也称为几何）向量。向量为一个有大小及方向的量。 -createVector__returns = p5.Vector -createVector__params__x = 数字：该向量的 x 分量 -createVector__params__y = 数字：该向量的 y 分量 -createVector__params__z = 数字：该向量的 z 分量 -noise__description__0 = 返回所定义坐标的柏林噪声值。柏林噪声是个用来生成比 random() 所能生成更自然及更谐波的随机数字系列。在 1980 年代有 Ken Perlin 所发明，柏林噪声至今常被用在图形应用程序中生成程序纹理、自然运动、形状、地形等等。

    柏林噪声与 random() 函数最主要的不同点在于前者是在一个无限的 n 维空间内定义的，这空间内每一对坐标都相对于一个固定的半随机值（只有在程序进行时为固定的；请参考 noiseSeed() 函数）。p5.js 能计算 1 维、2 维及 3 维噪声，这取决于所给予的坐标数。返回的值一定会在 0.0 至 1.0 之间。噪音值可以通过在噪音空间内移动以制成动画，如以上范例所示。第二及第三个空间维度也能被解读成时间。

    所生成的噪音结构上和一般音频信号相似，尤其是此函数的频率。与物理学上谐波的概念相似，泊林噪音也是在计算几个八度后再将其结果加起来以得到最后的结果。

    另外一个控制返回随机数系列的特征的方法是控制输入坐标值的大小。因为此函数能在无限之的空内内应用，输入坐标的值并不重要，只有个别坐标之间的距离需要被注意（如在循环内使用 noise() 时）。一般来说坐标之间的距离越小，生成噪声随机数列将会越平滑。介于 0.005-0.03 之间的距离应该适合大多数应用场合，不过这可能因应用需求而变。 -noise__returns = 数字：柏林噪声在特定坐标的值（介于 0 与 1 之间） -noise__params__x = 数字：噪声空间的 x 坐标 -noise__params__y = 数字：噪声空间的 y 坐标 -noise__params__z = 数字：噪声空间的 z 坐标 -noiseDetail__description__0 = 调整柏林噪声函数所生成的噪声特征及细节度。与物理学上谐波的概念相似，泊林噪音也是在计算几个八度后才得到最后的结果。越低的八度将会影响输出信号值越多因此同时会定义噪音的整体强度，而较高的八度将会在噪音系列中制作更精细的细节。

    默认上，此噪音将使用四个八度计算而每个八度将有其前者一半的影响力，第一个八度的影响力为 50% 。这衰退值能通过加多一个参数而改变。比如说如果衰退因数为 0.75 那表示每个八度将会有其前者的 75% 的影响力（减少 25%）。任何介于 0.0 与 1.0 的值都能被接受，不过注意高于 0.5 的值可能会造成 noise() 函数会返回大于 1.0 的值。

    通过改变这些参数，noise() 函数所生成的信号可适应于非常特别的需求或特点。 -noiseDetail__params__lod = 数字：噪音该使用的八度数 -noiseDetail__params__falloff = 数字：每个八度的衰退因数 -noiseSeed__description__0 = 定义 noise() 使用的随机种子值。默认上，noise() 将在每一次改程序被执行时生成不同的结果。只需定义 value 参数至一个常量就能确保每一次软件执行时都会返回一样的随机数列。 -noiseSeed__params__seed = 数字：随机种子值 -randomSeed__description__0 = 定义 random() 使用的随机种子值。

    默认上，random() 将在每一次改程序被执行时生成不同的结果。只需定义 seed 参数至一个常量就能确保每一次软件执行时都会返回一样的伪随机数。 -randomSeed__description__1 = By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run. -randomSeed__params__seed = 数字：随机种子值 -random__description__0 = 返回一个随机的浮点数。

    可使用 0、1 或 2 个参数。

    如果并没有定义任何参数，将返回一个介于 0 与 1（但不包括 1）的随机数。

    如果只定义一个参数并且该参数为数字，将返回一个介于 0 与 该数字（但不包括该数字）的随机数。

    如果值定义一个参数并且该参数为数组，将返回该数组中随机一个元素。

    如果定义两个参数，将返回一个介于第一个参数与第二个参数（但不包括第二个参数）的随机数。 -random__returns = 数字：随机数 -random__params__min = 数字：最低值（包括此值） -random__params__max = 数字：最高值（不包括此值） -random__params__choices = 数组：供选择的数组 -randomGaussian__description__0 = 返回一个符合高斯，或正态，分布的随机数。理论上 randomGaussian() 没有最高或最低返回值。不过，差均值很多的值被返回的机率将会很低；而接近均质的值被返回的机率将会相对较高。

    可使用 0、1 或 2 个参数。
    如果并没有定义任何参数，将使用均值为 0 与 标准差为 1。
    如果只定义一个参数，该参数将为均值（标准差为 1）。
    如果定义两个参数，第一个参数为均值，第二个参数为标准差。 -randomGaussian__returns = 数字：随机数 -randomGaussian__params__mean = 数字：均值 -randomGaussian__params__sd = 数字：标准偏差 -acos__description__0 = cos() 的反值，将返回一个值的反余弦值。此函数接受介于 -1 与 1 之间的值并将返回介于 0 与 PI（3.1415927）之间的值。 -acos__returns = 数字：该值的反余弦值 -acos__params__value = 数字：该取反余弦值的值 -asin__description__0 = sin() 的反值，将返回一个值的反正弦值。此函数接受介于 -1 与 1 之间的值并将返回介于 -PI/2 与 PI/2 之间的值。 -asin__returns = 数字：该值的反正弦值 -asin__params__value = 数字：该取反正弦值的值 -atan__description__0 = tan() 的反值，将返回一个值的反正切值。此函数接受介于 -Infinity 与 Infinity（包括 Infinity）之间的值并将返回介于 -PI/2 与 PI/2 之间的值。 -atan__returns = 数字：该值的反正切值 -atan__params__value = 数字：该取反正切值的值 -atan2__description__0 = 计算从一个被定义的点到坐标原点的弧度，并由正 x 轴开始计算。将返回介于 PI 与 -PI 之间的浮点数。atan2() 函数通常用于定向几何图形至鼠标的位置。

    注意：第一个参数为 y 坐标，而第二个参数为 x 坐标，这是为了适应计算正切值的结构。 -atan2__returns = 数字：该点的反正切值 -atan2__params__y = 数字：该点的 y 坐标 -atan2__params__x = 数字：该点的 x 坐标 -cos__description__0 = 计算一个角度的余弦值。此函数将使用当时的角度模式。返回值将介于 -1 与 1 之间的值。 -cos__returns = 数字：该角度的余弦值 -cos__params__angle = 数字：角度 -sin__description__0 = 计算一个角度的正弦值。此函数将使用当时的角度模式。返回值将介于 -1 与 1 之间的值。 -sin__returns = 数字：该角度的正弦值 -sin__params__angle = 数字：角度 -tan__description__0 = 计算一个角度的正切值。此函数将使用当时的角度模式。返回值将介于 -1 与 1 之间的值。 -tan__returns = 数字：该角度的正切值 -tan__params__angle = 数字：角度 -degrees__description__0 = 将一个弧度值转换成其相对的角度值。弧度和角度为两个测量同样一个东西的方法。一个圆形里有 360 度而也有 2*PI 个弧度。比如说，90° = PI/2 = 1.5707964。此函数将不会使用当时的角度模式。 -degrees__returns = 数字：转换后的角度值 -degrees__params__radians = 数字：由弧度转换成角度的值 -radians__description__0 = 将一个角度值转换成其相对的弧度值。弧度和角度为两个测量同样一个东西的方法。一个圆形里有 360 度而也有 2*PI 个弧度。比如说，90° = PI/2 = 1.5707964。此函数将不会使用当时的角度模式。 -radians__returns = 数字：转换后的角度值 -radians__params__degrees = 数字：由角度转换成弧度的值 -angleMode__description__0 = 定义当时 p5 的角度模式。默认模式为 RADIANS（弧度）。 -angleMode__params__mode = 常量：RADIANS 或 DEGREES -textAlign__description__0 = 定义绘制问题的对齐方向。使用两个参数：horizAlign（LEFT、CENTER 或 RIGHT）及 vertAlign（TOP、BOTTOM、CENTER 或 BASELINE）。

    horizAlign 参数为 text() 函数的 x 值，而 vertAlign 参数为 y 值。

    因此如果您使用 textAlign(LEFT)，您将会使文字最左方对齐 text() 函数所使用的 x 参数。如果您使用 textAlign(RIGHT, TOP)，您将会使文字最右方对齐 x 值而文字最上方对齐 y 值。 -textAlign__params__horizAlign = 常量：水平对齐，LEFT、CENTER 或 RIGHT -textAlign__params__vertAlign = 常量：垂直对齐，TOP、BOTTOM、CENTER 或 BASELINE -textLeading__description__0 = 定义或获取行与行之间的像素距离。此设置将会在所有接下来的 text() 函数调用时生效。 -textLeading__params__leading = 数字：行与行之间的像素距离 -textSize__description__0 = 定义或获取当时的字体大小。这大小将会在所有接下来的 text() 函数调用时生效。字形大小是使用像素定义。 -textSize__params__theSize = 数字：字体的像素大小 -textStyle__description__0 = 定义或获取系统字体的风格，可以是 NORMAL、ITALIC 或 BOLD。注意：这可能被 CSS 风格所覆盖。至与非系统字体（opentype、truetype 等）请直接加载已风格化的字体。 -textStyle__params__theStyle = 常量：字体的风格，可以是 NORMAL、ITALIC 或 BOLD -textWidth__description__0 = 计算及返回任何字符或字符串的宽度。 -textWidth__returns = 数字 -textWidth__params__theText = 字符串：该测量的字符串 -textAscent__description__0 = 返回当时字体在当时所定的大小的整体高度。这高度代表从基准线算起至最高字体的顶点的距离。 -textAscent__returns = 数字 -textDescent__description__0 = 返回当时字体在当时所定的大小的下端线高度。 -textDescent__returns = 数字 -loadFont__description__0 = 从一个文件或网址加载一个 opentype 字形文件（.otf、.ttf），将返回一个 p5.Font 物件。这函数为异步进行，这表示它可能不会在您绘图的下一行代码执行前完成。

    字形的路径应该相对于链接您的绘图的 HTML 文件。从其他 URL 或远程位置加载字形可能会被浏览器的内建安全模式阻止。 -loadFont__returns = p5.Font：p5.Font 物件 -loadFont__params__path = 字符串：该加载的字形名字或网址 -loadFont__params__callback = 函数：在 loadFont() 完成后该调用的函数 -loadFont__params__onError = 函数：在发生错误时该调用的函数 -text__description__0 = 将文字绘制在荧幕上。显示第一个参数内的资料在荧幕上由其他参数所定义的位置。将会使用默认字形除非使用 textFont() 函数定义使用其他字形同时也将使用默认大小除非使用 textSize() 定义文字大小。文字的颜色可使用 fill() 函数定义。可使用 stroke() 及 strokeWeight() 函数添加文字外形线。

    文字显示将位于 textAlign() 函数所定义的位置，您可将文字绘制在坐标的左边、右边或中间。

    x2 及 y2 参数将定义一个方形文字显示区而且只适用于字符串资料类型。当这两个参数被定义时，它们将使用当时的 rectMode() 设置被解读。不符合方形大小的文字将不会被绘制在荧幕上。 -text__params__str = 字符串|物件|数组|数字|布尔值：该显示的字母数字符号 -text__params__x = 数字：文字的 x 坐标 -text__params__y = 数字：文字的 y 坐标 -text__params__x2 = 数字：默认上，文字格的宽度，请参考 rectMode() -text__params__y2 = 数字：默认上，文字格的高度，请参考 rectMode() -textFont__description__0 = 定义使用 text() 函数绘制文字时该使用的字形。 -textFont__params__font = 物件|字符串：一个使用 loadFont() 加载的字形，或一个代表 Web 安全字体（一个所有系统都通用的字形）的字符串 -textFont__params__size = 数字：字形大小 -append__description__0 = 弃用：append() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.push(value)。

    在数组的尾端增加一个值。将增加数组的一个大小。映射到 Array.push()。 -append__params__array = 数组：该附加到的数组 -append__params__value = 任何：该附加进数组的元素 -arrayCopy__description__0 = 弃用：arrayCopy() 已被弃用并将会在未来的 p5 版本中移除。

    复制一个数组（或该数组的一部分）去另外一个数组。src 数组将会被复制去 dst 数组，开端位置由 srcPosition 参数定义并复制进由 dstPosition 定义的位置。该复制的元素数量由 length 参数定义。注意在复制元素时该元素将覆盖终点数组原有的元素。如果想要添加元素，请使用 use concat()。

    简化版本将只使用两个参数：arrayCopy(src, dst) 将复制整个数组去另一个相同大小的数组。这等同于使用 arrayCopy(src, 0, dst, 0, src.length)。

    使用这函数将比使用 for 循环数组内每一个元素并一一复制来的更有效率。 -arrayCopy__params__src = 数组：原数组 -arrayCopy__params__srcPosition = 数字：在原数组内的开端指数 -arrayCopy__params__dst = 数组：终点数组 -arrayCopy__params__dstPosition = 数字：在终点数组内的开端指数 -arrayCopy__params__length = 数字：该复制的元素量 -concat__description__0 = 弃用：concat() 已被弃用并将会在未来的 p5 版本中移除。请改用 arr1.concat(arr2)。

    串接两个数组，映射到 Array.concat()。将不会修改原有数组。 -concat__returns = 数组：串接后的数组 -concat__params__a = 数组：串接的第一个数组 -concat__params__b = 数组：串接的第二个数组 -reverse__description__0 = 弃用：reverse() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.reverse()。

    倒转数组内元素的次序，映射到 Array.reverse()。 -reverse__returns = Array: the reversed list -reverse__params__list = 数组：该倒转的数组 -shorten__description__0 = 弃用：shorten() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.pop()。

    将数组减少一个元素并返回缩短后的数组，映射到 Array.pop()。 -shorten__returns = 数组：缩短后的数组 -shorten__params__list = 数组：该缩短的数组 -shuffle__description__0 = 弃用：shuffle() 已被弃用并将会在未来的 p5 版本中移除。请参考使用 Javascript 混洗数组（英文页面）。

    随机排列数组内的元素。使用 Fisher-Yates 混洗函数。 -shuffle__returns = 数组：混洗后的数组 -shuffle__params__array = 数组：该混洗的数组 -shuffle__params__bool = 布尔值：修改所给予的数组 -sort__description__0 = 弃用：sort() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.sort()。

    将一个含有数字的数组有最小到最大值重新排列，或将一个含有文字的数组依字母顺序排列。原数组将不会被修改，而将会返回重新排列后的数组。count 参数定义该排列的元素量。比如说，如果数组内有 12 个元素而 count 被设为 5，只有数组内前五个元素将会被排列。 -sort__returns = Array: the sorted list -sort__params__list = 数组：该排列的数组 -sort__params__count = 整数：该排列的元素数，由 0 开始 -splice__description__0 = 弃用：splice() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.splice()。

    在一个原有的数组内添加一个值或另一数组的值。第一个参数定义该修改的数组，而第二个参数定义该添加的资料。第三个参数为该添加元素的位置的数组指数。（记得数组指数从零开始，因此第一个位置为 0，而第二的位置为 1 等等。） -splice__params__list = 数组：拼接进的数组 -splice__params__value = 任何：欲拼接进数组的值 -splice__params__position = 整数：数组内该添加该元素的位置 -subset__description__0 = 弃用：subset() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.slice()。

    从一个现有的数组中提取一数组的元素。list 参数定义该复制提取元素的数组，而 start 及 count 参数定义该提取哪一些元素。如果没有提供 count 参数，那将会提取数组由开头到结尾的元素。在定义 start 参数时，记得数组第一个指数为 0。这函数将不会修改原数组。 -subset__returns = 数组：提取出来的元素数组 -subset__params__list = 数组：该提取元素的数组 -subset__params__start = 整数：开始位置 -subset__params__count = 整数：提取元素数 -float__description__0 = 将一个字符串转换成其浮点值。字符串内内容必须是数字，不然将返回 NaN（不是数字）。比如说，float("1234.56") 将返回 1234.56，但 float("giraffe") 将返回 NaN。

    当给予一数组的值时，将返回一个等同大小的浮点数组。 -float__returns = 数字：该字符串的浮点值 -float__params__str = 字符串：该解析的浮点字符串 -int__description__0 = 转换一个布尔值、字符串或浮点值成其整数值。当给予一数组的值时，将返回一个等同大小的整数数组。 -int__returns = 数字：该值的整数值 -int__params__n = 字符串|布尔值|数字：该解析的值 -int__params__radix = 整数：该转换成的基数 -int__params__ns = 数组：该解析的值 -str__description__0 = 转换一个布尔值、字符串或数字成其字符串值。当给予一数组的值时，将返回一个等同大小的字符串数组。 -str__returns = 字符串：该值的字符串值 -str__params__n = 字符串|布尔值|数字|数组：该解析的值 -byte__description__0 = 转换一个数字、代表数字的字符串或布尔值成其字节值.一个字节只能是一个介于 -128 与 127 之间的整数，因此如果在这范围外的值被转换时，它将会绕回相对的字节值。当给予一数组的数字、字符串或布尔值时，将返回一个等同大小的字节数组。 -byte__returns = 数字：该值的字节值 -byte__params__n = 字符串|布尔值|数字：该解析的值 -byte__params__ns = 数组：该解析的值 -char__description__0 = 转换一个数字或字符串成其单一字符的值。如果提供一个字符串参数，它将会先被解析成整数然后再被转换成单一字符。当给予一数组的数字或字符串时，将返回一个等同大小的单一字符数组。 -char__returns = 字符串：该值的字符串值 -char__params__n = 字符串|数字：该解析的值 -char__params__ns = 数组：该解析的值 -unchar__description__0 = 转换一个单一字符成其整数值。当给予一数组的单一字符值时，将返回一个等同大小的整数数组。 -unchar__returns = 数字：该值的整数值 -unchar__params__n = 字符串：该解析的值 -unchar__params__ns = 数组：该解析的值 -hex__description__0 = 转换一个数字成其十六进制值的字符串。如果提供第二个参数，它将被用来定义该生成的十六进制值的字符量。当给予一数组时，将返回一个等同大小的十六进制字符串数组。 -hex__returns = 字符串：该值的十六进制值 -hex__params__n = 数字：该解析的值 -hex__params__digits = 数字 -hex__params__ns = 数字[]：该解析的值 -unhex__description__0 = 转换一个十六进制字符串成其整数值。当给予一数组的十六进制字符串时，将返回一个等同大小的整数数组。 -unhex__returns = 数字：该十六进制值的整数值 -unhex__params__n = 数字：该解析的值 -unhex__params__ns = 数组：该解析的值 -join__description__0 = 将一数组的字符串合成一个字符串，每一个元素由 separator 参数定义的字符分隔开。如果要连接整数或浮点数数组，它们必须先使用 nf() 或 nfs() 转换成字符串。 -join__returns = 字符串：连接后的字符串 -join__params__list = 数组：该连接的字符串 -join__params__separator = 字符串：在个元素之间穿插的字符串 -match__description__0 = 这函数可被用来在一段文字上应用正则表达式，并将返回含有符合表达式的组合（在括号内的元素）的字符串数组。如果没找到任何匹配组合，将返回 null。如果正则表达式内没有定义任何组合，但有搜寻到匹配序列，将返回一个大小为 1 的数组（匹配的文字为数组的第一个元素）。

    使用此函数时，先查看结果是否为 null。如果结果为 null，那表示该段文字没有匹配序列。如果有找到匹配序列，将返回一个数组。

    如果正则表达式内有组合（由括号定义），那个别内容将会以数组的形式返回。正则表达式匹配返回的元素 [0] 将会是整个匹配的字符串，而匹配组合将从元素 [1] 开始（第一组为 [1]、第二组为 [2] 等）。 -match__returns = 数组：搜寻到的字符串数组 -match__params__str = 字符串：在此字符串内搜寻 -match__params__regexp = 字符串：用于搜寻的正则表达式 -matchAll__description__0 = 这函数可被用来在一段文字上应用正则表达式，并将返回含有符合表达式的组合（在括号内的元素）的二维字符串数组。如果没找到任何匹配组合，将返回 null。如果正则表达式内没有定义任何组合，但有搜寻到匹配序列，仍然将返回一个二维数组，但第二维度数组的大小将为一。

    使用此函数时，先查看结果是否为 null。如果结果为 null，那表示该段文字没有匹配序列。如果有找到匹配序列，将返回一个二维数组。

    如果正则表达式内有组合（由括号定义），那个别内容将会以数组的形式返回。假设有一个有计算其变量 i 的循环，正则表达式匹配返回的元素 [i][0] 将会是整个匹配的字符串，而匹配组合将从元素 [i][1] 开始（第一组为 [i][1]、第二组为 [i][2] 等）。 -matchAll__returns = 字符串[]：搜寻到的二维字符串数组 -matchAll__params__str = 字符串：在此字符串内搜寻 -matchAll__params__regexp = 字符串：用于搜寻的正则表达式 -nf__description__0 = 用于将数字格式化成字符串的辅助函数。此函数有两个版本：一个用于格式化浮点数，另一个用于格式化整数。参数 left 及 right 的值必须是正整数。 -nf__returns = 字符串：格式化后的字符串 -nf__params__num = 数字|字符串：该格式化的数字 -nf__params__left = 整数|字符串：小数点左边的位数 -nf__params__right = 整数|字符串：小数点右边的位数 -nf__params__nums = 数组：该格式化的数字 -nfc__description__0 = 用于将数字格式化成字符串并在适当的地方添加逗号以示意 1000 位的辅助函数。此函数有两个版本：一个用于格式化整数，另一个用于格式化一数组的整数。参数 right 的值必须是正整数。 -nfc__returns = 字符串：格式化后的字符串 -nfc__params__num = 数字|字符串：该格式化的数字 -nfc__params__right = 整数|字符串：小数点左边的位数 -nfc__params__nums = 数组：该格式化的数字 -nfp__description__0 = 用于将数字格式化成字符串的辅助函数。与 nf() 相似但会在正数前加个 "+" 号而在负数前加个 "-" 号。此函数有两个版本：一个用于格式化浮点数，另一个用于格式化整数。参数 left 及 right 的值必须是正整数。 -nfp__returns = 字符串：格式化后的字符串 -nfp__params__num = 数字|字符串：该格式化的数字 -nfp__params__left = 整数|字符串：小数点右边的位数 -nfp__params__right = 数组：该格式化的数字 -nfp__params__nums = Number[]: the Numbers to format -nfs__description__0 = 用于将数字格式化成字符串的辅助函数。与 nf() 相似但会在正数前加个 " "（空格）而在负数前加个 "-" 号。此函数有两个版本：一个用于格式化浮点数，另一个用于格式化整数。参数 left 及 right 的值必须是正整数。 -nfs__returns = 字符串：格式化后的字符串 -nfs__params__num = 数字：该格式化的数字 -nfs__params__left = 整数：小数点左边的位数 -nfs__params__right = 整数：小数点右边的位数 -nfs__params__nums = 数组：该格式化的数字 -split__description__0 = split() 函数映射到 String.split()，它使用一个字符或字符串为分隔号以将另一个字符串拆分成多个部分。delim 参数定义用于标示各个部分之间边界的字符或字符串。将返回一个含有各个部分的字符串数组。

    splitTokens() 函数也与此函数相似，不过它将使用一系列字符以拆分字符串而不是使用特别定义的单一字符或字符串。 -split__returns = 字符串[]：字符串数组 -split__params__value = 字符串：还拆分的字符串 -split__params__delim = 字符串：用于分隔资料的字符串 -splitTokens__description__0 = splitTokens() 函数将在一个或多个字符（或 “tokens”）所标示的地方拆分一个字符串。delim 参数将定义用于标示各个部分之间边界的字符或字符串。

    如果 delim 参数没有被定义，此函数将使用任何空白字符拆分。空白字符包括制表符（\t）、换行符（\n）、回车符（\r）、新页符（\f）及空格。 -splitTokens__returns = 字符串[]：字符串数组 -splitTokens__params__value = 字符串：还拆分的字符串 -splitTokens__params__delim = 字符串：用于分隔资料的字符串列 -trim__description__0 = 从一个字符串的前端及后端删除空白字符。除了一般的空白字符如空格、回车及制表符之外，这函数也将删除 Unicode “nbsp” 字符。 -trim__returns = 字符串：修剪后的字符串 -trim__params__str = 字符串：该修剪的字符串 -trim__params__strs = 数组：该修剪的字符串数组 -day__description__0 = p5.js 将与您的电脑的时钟沟通，day() 函数将返回当天的日期天数在 1 - 31 的范围内。 -day__returns = 整数：当天的日期天数 -hour__description__0 = p5.js 将与您的电脑的时钟沟通，hour() 函数将返回当时时间的小时数在 0 - 23 的范围内。 -hour__returns = 整数：当时时间的小时数 -minute__description__0 = p5.js 将与您的电脑的时钟沟通，minute() 函数将返回当时时间的分钟数在 0 - 59 的范围内。 -minute__returns = 整数：当时时间的分钟数 -millis__description__0 = 返回自程序开始以来的毫秒（一秒的一千分之一）数。这资料一般可用于定时事件及动画序列。 -millis__returns = 整数：自程序开始以来的毫秒数 -month__description__0 = p5.js 将与您的电脑的时钟沟通，month() 函数将返回当天的日期月数在 1 - 12 的范围内。 -month__returns = 整数：当时日期的月数 -second__description__0 = p5.js 将与您的电脑的时钟沟通，second() 函数将返回当时时间的秒数在 0 - 59 的范围内。 -second__returns = 整数：当时时间的秒数 -year__description__0 = p5.js 将与您的电脑的时钟沟通，year() 函数将返回当天的日期年数为一个整数（2014、2015、2016等等）。 -year__returns = 整数：当时日期的年数 -plane__description__0 = 用给予的宽度和高度画一个平面。 -plane__params__width = 数字：平面的宽度 -plane__params__height = 数字：平面的高度 -plane__params__detailX = 整数：（可选）在 x 轴的三角形细分数 -plane__params__detailY = 整数：（可选）在 y 轴的三角形细分数 -box__description__0 = 用给予的宽度、高度及深度画一个立方体。 -box__params__width = 数字：立方体的宽度 -box__params__Height = 数字：立方体的高度 -box__params__depth = 数字：立方体的深度 -box__params__detailX = 整数：（可选）在 x 轴的三角形细分数 -box__params__detailY = 整数：（可选）在 y 轴的三角形细分数 -sphere__description__0 = 用给予的半径画一个球形。 -sphere__params__radius = 数字：球形的半径 -sphere__params__detailX = 整数：分割的数量，越多分割几何形越平滑，默认值为 24 -sphere__params__detailY = 整数：分割的数量，越多分割几何形越平滑，默认值为 16 -cylinder__description__0 = 用给予的半径和高度画一个圆筒形。 -cylinder__params__radius = 数字：表面的半径 -cylinder__params__height = 数字：圆筒形的高度 -cylinder__params__detailX = 整数：分割的数量，越多分割几何形越平滑，默认值为 24 -cylinder__params__detailY = 整数：y 轴分割的数量，越多分割几何形越平滑，默认值为 1 -cylinder__params__bottomCap = 布尔值：是否该画圆筒形的底部 -cylinder__params__topCap = 布尔值：是否该画圆筒形的顶部 -cone__description__0 = 用给予的半径和高度画一个锥体形。 -cone__params__radius = 数字：底部表面的半径 -cone__params__height = 数字：锥体形的高度 -cone__params__detailX = 整数：分割的数量，越多分割几何形越平滑，默认值为 24 -cone__params__detailY = 整数：分割的数量，越多分割几何形越平滑，默认值为 1 -cone__params__cap = 布尔值：是否该画锥体形的底部 -ellipsoid__description__0 = 用给予的半径画一个椭球形。 -ellipsoid__params__radiusx = 数字：椭球形 x 轴的半径 -ellipsoid__params__radiusy = 数字：椭球形 y 轴的半径 -ellipsoid__params__radiusz = 数字：椭球形 z 轴的半径 -ellipsoid__params__detailX = 整数：分割的数量，越多分割几何形越平滑，默认值为 24。避免多于 150 的细节数量，因为它可能是浏览器停止运作。 -ellipsoid__params__detailY = 整数：分割的数量，越多分割几何形越平滑，默认值为 16。避免多于 150 的细节数量，因为它可能是浏览器停止运作。 -torus__description__0 = 用给予的半径和管半径画一个圆环形。 -torus__params__radius = 数字：整个圆环形的半径 -torus__params__tubeRadius = 数字：圆管的半径 -torus__params__detailX = 整数：x 轴分割的数量，越多分割几何形越平滑，默认值为 24。 -torus__params__detailY = 整数：y 轴分割的数量，越多分割几何形越平滑，默认值为 16。 -ambientLight__description__0 = 使用所定义的颜色创造一个环境光。 -ambientLight__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -ambientLight__params__v2 = 数字：绿彩值或饱和度值，需在被定义的范围内 -ambientLight__params__v3 = 数字：蓝彩值或亮度值，需在被定义的范围内 -ambientLight__params__alpha = 数字： -ambientLight__params__value = 字符串：颜色字符串 -ambientLight__params__gray = 数字：灰阶值 -ambientLight__params__values = 数字[]：一个有红、绿、蓝及透明度值的数组 -ambientLight__params__color = p5.Color：环境光色 -directionalLight__description__0 = 使用所定义的颜色及方向创造一个定向光。 -directionalLight__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -directionalLight__params__v2 = 数字：绿彩值或饱和度值 -directionalLight__params__v3 = 数字：蓝彩值或亮度值 -directionalLight__params__position = p5.Vector：光的方向 -directionalLight__params__color = 数字[]|字符串|p5.Color：颜色数组、CSS 颜色字符串或 p5.Color 颜色值 -directionalLight__params__x = 数字：x 轴方向 -directionalLight__params__y = 数字：y 轴方向 -directionalLight__params__z = 数字：z 轴方向 -pointLight__description__0 = 使用所定义的颜色及灯光位置创造一个点光源。 -pointLight__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -pointLight__params__v2 = 数字：绿彩值或饱和度值 -pointLight__params__v3 = 数字：蓝彩值或亮度值 -pointLight__params__x = 数字：x 轴方向 -pointLight__params__y = 数字：y 轴方向 -pointLight__params__z = 数字：z 轴方向 -pointLight__params__position = p5.Vector：光的方向 -pointLight__params__color = 数字[]|字符串|p5.Color：颜色数组、CSS 颜色字符串或 p5.Color 颜色值 -loadModel__description__0 = 从一个 OBJ 档案加载一个三维模型。

    OBJ 格式的其中一个限制是它没有内建的大小值。这表示不同程式输出的模型可能有非常不同的大小。如果您的模型没被展示的话，请试着调用 loadModel() 并给予 normalized 参数“真”（true）值。这会将模型缩放成适合 p5 的大小。您也可以使用 scale() 函数对您的模型最后大小做与更多的调整。 -loadModel__returns = p5.Geometry：p5.Geometry 物件 -loadModel__params__path = 字符串：要加载的模型的路径 -loadModel__params__normalize = 布尔值：如果为真，在加载时将模型缩放成标准大小。 -loadModel__params__successCallback = 函数(p5.Geometry)：此函数将在模型完成加载后被调用，将被给予该三维模型为参数。 -loadModel__params__failureCallback = 函数(Event)：如果模型加载失败，此函数将被调用并给予错误事件（event）为参数。 -model__description__0 = 将一个三维模型渲染在荧幕上。 -model__params__model = p5.Geometry：要渲染的已加载的模型 -loadShader__description__0 = 从所定义的顶点及片断着色器文件路径加载自定的着色器。着色器是在背景异步加载的，因此此函数应该在 preload() 内使用。

    现在为止有三种主要的着色器种类。只要相对的参数有在着色器内被定义，p5 将会自动提供相对的顶点、法线、颜色及灯光属性。 -loadShader__returns = p5.Shader：由所定义的顶点及片断着色器所创造的着色器物件 -loadShader__params__vertFilename = 字符串：存有顶点着色器源代码的文件的路径 -loadShader__params__fragFilename = 字符串：存有片断着色器源代码的文件的路径 -createShader__returns = p5.Shader：由所定义的顶点及片断着色器所创造的着色器物件 -createShader__params__vertSrc = 字符串：顶点着色器的源代码 -createShader__params__fragSrc = 字符串：片断着色器的源代码 -shader__description__0 = shader() 函数让其使用者提供自定的着色器以用于在 WEBGL 模式下渲染形状。使用这能使用 loadShader() 加载自定义的着色器。 -shader__params__s = p5.Shader：欲用于渲染形状用的 p5.Shader -texture__description__0 = 形状的纹理。您可在此范例查看所有可用的材料。 -texture__params__tex = p5.Image|p5.MediaElement|p5.Graphics：该渲染成纹理的二维图像 -normalMaterial__description__0 = 形状的法线材料。您可在此范例查看所有可用的材料。 -ambientMaterial__description__0 = 使用所给予颜色定义形状的环境材料。您可在此范例查看所有可用的材料。 -ambientMaterial__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -ambientMaterial__params__v2 = 数字：绿彩值或饱和度值 -ambientMaterial__params__v3 = 数字：蓝彩值或亮度值 -ambientMaterial__params__color = 数字[]|字符串|p5.Color：颜色数组、CSS 颜色字符串或 p5.Color 颜色值 -specularMaterial__description__0 = 使用所给予颜色定义形状的镜面材料。您可在此范例查看所有可用的材料。 -specularMaterial__params__alpha = 数字：透明度 -specularMaterial__params__v1 = 数字：红彩值或色调值，需在被定义的范围内 -specularMaterial__params__v2 = 数字：绿彩值或饱和度值 -specularMaterial__params__v3 = 数字：蓝彩值或亮度值 -specularMaterial__params__color = 数字[]|字符串|p5.Color：颜色数组、CSS 颜色字符串或 p5.Color 颜色值 -camera__description__0 = 定义在一个三维绘图内相机的位置。此函数的行为与 gluLookAt 相似，不过它会覆盖原有的模型视图矩阵而不会在原有的模型视图上添加任何变形。当没有给予任何参数时，此函数将定义默认相机为 camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0); -camera__params__x = 数字：相机在 x 轴的位置 -camera__params__y = 数字：相机在 y 轴的位置 -camera__params__z = 数字：相机在 z 轴的位置 -camera__params__centerX = 数字：代表绘图中心点的 x 坐标 -camera__params__centerY = 数字：代表绘图中心点的 y 坐标 -camera__params__centerZ = 数字：代表绘图中心点的 z 坐标 -camera__params__upX = 数字：相机向上方向量的 x 分量 -camera__params__upY = 数字：相机向上方向量的 y 分量 -camera__params__upZ = 数字：相机向上方向量的 z 分量 -perspective__description__0 = 定义透视相机。当没有给予任何参数时，此函数将定义默认相机为 perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0) 其中 cameraZ 为 ((height/2.0) / tan(PI60.0/360.0)); -perspective__params__fovy = 数字：相机视锥的垂直视野，使用角度模式单位定义视野底部到顶部的角度 -perspective__params__aspect = 数字：相机视锥的长宽比 -perspective__params__near = 数字：视锥近平面的长度 -perspective__params__far = 数字：视锥远平面的长度 -ortho__description__0 = 定义正射相机。 -ortho__params__left = 数字：相机视锥的左平面 -ortho__params__right = 数字：相机视锥的右平面 -ortho__params__bottom = 数字：相机视锥的底平面 -ortho__params__top = 数字：相机视锥的顶平面 -ortho__params__near = 数字：相机视锥的近平面 -ortho__params__far = 数字：相机视锥的远平面 -setAttributes__description__0 = 设置 WebGL 绘图环境的属性。这是调整 WebGL 渲染器的一个方法，可用于微调显示及性能。这函数应该在 setup() 内使用。可使用的属性为：
    alpha - 表示画布是否有透明度缓冲，默认为 true

    depth - 表示绘图缓冲是否有至少 16 bits 的深度缓冲 - 默认为 true

    stencil - 表示绘图缓冲是否有至少 8 bits 的模版缓冲

    antialias - 表示是否应该执行抗锯齿，默认为 false

    premultipliedAlpha - 表示页面合成器将假设绘图缓冲存在着预乘透明值的颜色，默认为 false

    preserveDrawingBuffer - 如果为真缓冲区将不会被清空并将会保留现有的值直到它们被清空或被作者覆盖（注意 p5 在绘图循环将自动清空），默认为 true

    perPixelLighting - 如果为真，照明着色器将使用个别像素照明。默认为 false -setAttributes__params__key = 字符串：属性名 -setAttributes__params__value = 布尔值：属性的新值 -setAttributes__params__obj = 物件：有键值对的物件 \ No newline at end of file diff --git a/src/data/localization/zh-CN/p5.sound.ftl b/src/data/localization/zh-CN/p5.sound.ftl deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/data/localization/zh-CN/root.ftl b/src/data/localization/zh-CN/root.ftl deleted file mode 100644 index f06f84986e..0000000000 --- a/src/data/localization/zh-CN/root.ftl +++ /dev/null @@ -1,63 +0,0 @@ -h1 = 参考文献 -reference-search = 搜寻 API -reference-description1 = 找不到您要的条目吗？您或许要查看 -reference-description3 = You can download an offline version of the reference. -reference-contribute2 = 请让我们知道 -reference-error1 = 发现错字或错误吗？ -reference-error3 = 非常欢迎您 -reference-error5 = 并开启一个 pull request。 -reference-example = 范例 -reference-description = 说明 -reference-extends = 继承 -reference-parameters = 参数 -reference-syntax = 语法 -reference-returns = 返回 -Environment = 环境 -Color = 颜色 -Color Conversion = Color Conversion -Creating & Reading = 创造及读取 -Setting = 设置 -Shape = 形状 -2D Primitives = 2D 形状 -Attributes = 属性 -Curves = 弧形 -Vertex = 顶点 -Constants = 常量 -Structure = 结构 -DOM = DOM -Rendering = 渲染 -Foundation = Foundation -Transform = 变形 -Data = 资料 -LocalStorage = LocalStorage -Dictionary = 字典 -Events = 事件 -Acceleration = 加速度 -Keyboard = 键盘 -Mouse = 滑鼠 -Touch = 触动 -Image = 图像 -Loading & Displaying = 加载和显示 -Pixels = 像素 -IO = 输入和输出 -Input = 输入 -Output = 输出 -Table = 表格 -Math = 数学 -Calculation = 计算 -Vector = Vector -Noise = 噪声 -Random = Random -Trigonometry = 三角学 -Typography = 字体 -Array Functions = 数组函数 -Conversion = 转换 -String Functions = 字符串函数 -Time & Date = 时间和日期 -3D Primitives = 3D 形状 -Lights, Camera = 灯光、相机 -Interaction = Interaction -Lights = 灯光 -3D Models = 3D 模型 -Material = 材料 -Camera = 相机 diff --git a/tasks/fluent.js b/tasks/fluent.js deleted file mode 100644 index 48455b14c3..0000000000 --- a/tasks/fluent.js +++ /dev/null @@ -1,93 +0,0 @@ -const path = require('path'); -const fs = require('fs').promises; -const _ = require('lodash'); -const util = require('util'); -const glob = util.promisify(require('glob')); -const fluentConverter = require('./scripts/fluentConverter.js'); -const pkg = require('../package.json'); - -module.exports = function(grunt) { - grunt.registerTask('json-to-fluent', async function() { - const done = this.async(); - const promises = []; - - try { - // Parse data in en.json into FTL strings - const fileData = await fs.readFile('./src/data/reference/en.json'); - const ftlStrs = fluentConverter.jsonToFtl(fileData); - - // Write each class of objects into its own FTL file - _.each(ftlStrs, (str, name) => { - promises.push( - fs.writeFile(`./src/data/localization/en/${name}.ftl`, str) - ); - }); - - await Promise.all(promises); - done(); - } catch (err) { - done(err); - } - }); - - grunt.registerTask('fluent-to-json', async function() { - const done = this.async(); - const languages = pkg.languages; - const promises = []; - - try { - for (let language of languages) { - // Skip creating en.json, this is handled by "generate_enJSON" - if (language === 'en') continue; - - // Copy existing data in the localization JSON file. - // This is done because the FTL files still cannot handle all the - // entries available in the JSON file. - const fileData = await fs.readFile( - `./src/data/reference/${language}.json` - ); - const data = JSON.parse(fileData); - const newData = _.cloneDeep(data); - - // Change language code of following langauges because of - // Pontoon's language code support - if (language === 'zh-Hans') language = 'zh-CN'; - else if (language === 'hi') language = 'hi-IN'; - - // Iterate over all ftl files and create JSON object out of them - const files = await glob(`./src/data/localization/${language}/*.ftl`); - for (const file of files) { - if (file !== `./src/data/localization/${language}/root.ftl`) { - const key = path.basename(file, '.ftl'); - const fileData = await fs.readFile(file, { - encoding: 'utf8' - }); - const jsonData = fluentConverter.ftlToObj(fileData); - - // The new data is assigned over the old data, keeping any old entry - // that doesn't exist in FTL - _.merge(newData[key], jsonData); - } - } - - // Change language code of following langauges because of - // Pontoon's language code support - if (language === 'zh-CN') language = 'zh-Hans'; - else if (language === 'hi-IN') language = 'hi'; - - // Write data out to JSON files - promises.push( - fs.writeFile( - `./src/data/reference/${language}.json`, - JSON.stringify(newData, null, 2) - ) - ); - } - - await Promise.all(promises); - done(); - } catch (err) { - done(err); - } - }); -}; diff --git a/tasks/scripts/fluentConverter.js b/tasks/scripts/fluentConverter.js deleted file mode 100644 index bbea2d7f28..0000000000 --- a/tasks/scripts/fluentConverter.js +++ /dev/null @@ -1,136 +0,0 @@ -const { - parse, - serialize, - Resource, - Message, - Identifier, - Pattern, - TextElement, - Placeable -} = require('@fluent/syntax'); -const _ = require('lodash'); - -function jsonToFtl(jsonStr) { - const data = JSON.parse(jsonStr); - - const resources = { - root: new Resource() - }; - _.each(data, (v1, k1) => { - if (_.isString(k1)) k1 = escapeIdentifier(k1); - if (typeof v1 === 'string') { - v1 = strToElements(v1); - resources.root.body.push( - new Message(new Identifier(k1), new Pattern([new TextElement(v1)])) - ); - } else { - const resource = new Resource(); - _.each(v1, (v2, k2) => { - if (_.isString(k2)) k2 = escapeIdentifier(k2); - if (typeof v2 === 'string') { - v2 = strToElements(v2); - const identifier = new Identifier(`${k2}`); - resource.body.push( - new Message(identifier, new Pattern([new TextElement(v2)])) - ); - } else { - _.each(v2, (v3, k3) => { - if (_.isString(k3)) k3 = escapeIdentifier(k3); - if (typeof v3 === 'string') { - v3 = strToElements(v3); - const identifier = new Identifier(`${k2}__${k3}`); - resource.body.push( - new Message(identifier, new Pattern([new TextElement(v3)])) - ); - } else { - _.each(v3, (v4, k4) => { - if (_.isString(k4)) k4 = escapeIdentifier(k4); - v4 = strToElements(v4); - const identifier = new Identifier(`${k2}__${k3}__${k4}`); - resource.body.push( - new Message(identifier, new Pattern([new TextElement(v4)])) - ); - }); - } - }); - } - }); - resources[k1] = resource; - } - }); - - const output = _.reduce( - resources, - (acc, resource, name) => { - acc[name] = serialize(resource); - return acc; - }, - {} - ); - - return output; - - function strToElements(str) { - let result = str; - const curlyRegex = /([{}])/gm; - result = result.replace(curlyRegex, '{"$1"}'); - - return result; - } - - function escapeIdentifier(identifier) { - const leftBracketRegex = /(\()/gm; - const rightBracketRegex = /(\))/gm; - - const result = identifier - .replace(leftBracketRegex, '-_leftBracket_-') - .replace(rightBracketRegex, '-_rightBracket_-'); - - return result; - } -} - -function ftlToObj(ftlStr) { - const resource = parse(ftlStr); - const jsonData = {}; - - for (const message of resource.body) { - if (message.type === 'Junk') continue; - - const path = message.id.name.split('__').map(subpath => { - return subpath - .replace(/-_leftBracket_-/g, '(') - .replace(/-_rightBracket_-/g, ')'); - }); - - const text = message.value.elements.reduce((acc, element) => { - if (element instanceof TextElement) { - acc += element.value; - } else if (element instanceof Placeable) { - acc += element.expression.value; - } - return acc; - }, ''); - - const toStringIndex = path.indexOf('toString'); - if ( - toStringIndex >= 0 && - _.isFunction(_.get(jsonData, path.slice(0, toStringIndex + 1))) - ) { - if (Number.isFinite(parseInt(path[toStringIndex + 1]))) { - _.set(jsonData, path.slice(0, toStringIndex + 1), []); - } else { - _.set(jsonData, path.slice(0, toStringIndex + 1), {}); - } - } - - _.set(jsonData, path, text); - } - - return jsonData; -} - -module.exports = { - jsonToFtl, - ftlToObj -};