Internally we store an array representing the ideal RGBA values in floating\\npoint form, normalized from 0 to 1. From this we calculate the closest\\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.
We also cache normalized, floating point components of the color in various\\nrepresentations as they are calculated. This is done to prevent repeating a\\nconversion that has already been performed.
Base class for all elements added to a sketch, including canvas,\\ngraphics buffers, and other HTML elements. Methods in blue are\\nincluded in the core functionality, methods in brown are added\\nwith the p5.dom\\nlibrary.\\nIt is not called directly, but p5.Element\\nobjects are created by calling createCanvas, createGraphics,\\nor in the p5.dom library, createDiv, createImg, createInput, etc.
Thin wrapper around a renderer, to be used for creating a\\ngraphics buffer object. Use this class if you need\\nto draw into an off-screen graphics buffer. The two parameters define the\\nwidth and height in pixels. The fields and methods for this class are\\nextensive, but mirror the normal drawing API for p5.
Base class for all p5.Dictionary types. Specifically\\n typed Dictionary classes inherit from this class.
Creates a new p5.Image. A p5.Image is a canvas backed representation of an\\nimage.\\n\\np5 can display .gif, .jpg and .png images. Images may be displayed\\nin 2D and 3D space. Before an image is used, it must be loaded with the\\nloadImage() function. The p5.Image class contains fields for the width and\\nheight of the image, as well as an array called pixels[] that contains the\\nvalues for every pixel in the image.\\n\\nThe methods described below allow easy access to the image's pixels and\\nalpha channel and simplify the process of compositing.\\n\\nBefore using the pixels[] array, be sure to use the loadPixels() method on\\nthe image to make sure that the pixel data is properly loaded.
This is the p5 instance constructor.
A p5 instance holds all the properties and methods related to\\na p5 sketch. It expects an incoming sketch closure and it can also\\ntake an optional node parameter for attaching the generated p5 canvas\\nto a node. The sketch closure takes the newly created p5 instance as\\nits sole argument and may optionally set preload(), setup(), and/or\\ndraw() properties on it for running a sketch.
A p5 sketch can run in "global" or "instance" mode:\\n"global" - all properties and methods are attached to the window\\n"instance" - all properties and methods are bound to this p5 object
Table objects store data with multiple rows and columns, much\\nlike in a traditional spreadsheet. Tables can be generated from\\nscratch, dynamically, or using data from an existing file.
XML is a representation of an XML object, able to parse XML code. Use\\nloadXML() to load external XML files and create XML objects.
A class to describe a two or three dimensional vector, specifically\\na Euclidean (also known as geometric) vector. A vector is an entity\\nthat has both magnitude and direction. The datatype, however, stores\\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\\nand direction can be accessed via the methods mag() and heading().\\n\\nIn many of the p5.js examples, you will see p5.Vector used to describe a\\nposition, velocity, or acceleration. For example, if you consider a rectangle\\nmoving across the screen, at any given instant it has a position (a vector\\nthat points from the origin to its location), a velocity (the rate at which\\nthe object's position changes per time unit, expressed as a vector), and\\nacceleration (the rate at which the object's velocity changes per time\\nunit, expressed as a vector).\\n\\nSince vectors represent groupings of values, we cannot simply use\\ntraditional addition/multiplication/etc. Instead, we'll need to do some\\n"vector" math, which is made easy by the methods inside the p5.Vector class.
This module defines the p5.Font class and functions for\\ndrawing text to the display canvas.
This module defines the p5.Texture class
This class describes a camera for use in p5's\\n\\nWebGL mode. It contains camera position, orientation, and projection\\ninformation necessary for rendering a 3D scene.
New p5.Camera objects can be made through the\\ncreateCamera() function and controlled through\\nthe methods described below. A camera created in this way will use a default\\nposition in the scene and a default perspective projection until these\\nproperties are changed through the various methods available. It is possible\\nto create multiple cameras, in which case the current camera\\ncan be set through the setCamera() method.
Note:\\nThe methods below operate in two coordinate systems: the 'world' coordinate\\nsystem describe positions in terms of their relationship to the origin along\\nthe X, Y and Z axes whereas the camera's 'local' coordinate system\\ndescribes positions from the camera's point of view: left-right, up-down,\\nand forward-backward. The move() method,\\nfor instance, moves the camera along its own axes, whereas the\\nsetPosition()\\nmethod sets the camera's position in world-space.
This module defines the p5.Shader class
The web is much more than just canvas and p5.dom makes it easy to interact\\nwith other HTML5 objects, including text, hyperlink, image, input, video,\\naudio, and webcam.
There is a set of creation methods, DOM manipulation methods, and\\nan extended p5.Element that supports a range of HTML elements. See the\\n\\nbeyond the canvas tutorial for a full overview of how this addon works.
Methods and properties shown in black are part of the p5.js core, items in\\nblue are part of the p5.dom library. You will need to include an extra file\\nin order to access the blue functions. See the\\nusing a library\\nsection for information on how to include this library. p5.dom comes with\\np5 complete or you can download the single file\\n\\nhere.
See tutorial: beyond the canvas\\nfor more info on how to use this library.
p5.sound extends p5 with Web Audio functionality including audio input,\\nplayback, analysis and synthesis.\\n\\np5.SoundFile: Load and play sound files.\\np5.Amplitude: Get the current volume of a sound.\\np5.AudioIn: Get sound from an input source, typically\\n a computer microphone.\\np5.FFT: Analyze the frequency of sound. Returns\\n results from the frequency spectrum or time domain (waveform).\\np5.Oscillator: Generate Sine,\\n Triangle, Square and Sawtooth waveforms. Base class of\\n p5.Noise and p5.Pulse.\\n \\np5.Envelope: An Envelope is a series\\n of fades over time. Often used to control an object's\\n output gain level as an "ADSR Envelope" (Attack, Decay,\\n Sustain, Release). Can also modulate other parameters.\\np5.Delay: A delay effect with\\n parameters for feedback, delayTime, and lowpass filter.\\np5.Filter: Filter the frequency range of a\\n sound.\\n\\np5.Reverb: Add reverb to a sound by specifying\\n duration and decay. \\np5.Convolver: Extends\\np5.Reverb to simulate the sound of real\\n physical spaces through convolution.\\np5.SoundRecorder: Record sound for playback\\n / save the .wav file.\\np5.Phrase, p5.Part and\\np5.Score: Compose musical sequences.\\n\\np5.sound is on GitHub.\\nDownload the latest version\\nhere.
a closure that can set optional preload(),\\n setup(), and/or draw() properties on the\\n given p5 instance
element to attach canvas to, if a\\n boolean is passed in use it as sync
start synchronously (optional)
Each color stores the color mode and level maxes that applied at the\\ntime of its construction. These are used to interpret the input arguments\\n(at construction and later for that instance of color) and to format the\\noutput e.g. when saturation() is requested.
DOM node that is wrapped
pointer to p5 instance
width
height
the renderer to use, either P2D or WEBGL
Main graphics and rendering context, as well as the base API\\nimplementation for p5.js "core". To be used as the superclass for\\nRenderer2D and Renderer3D classes, respecitvely.
whether we're using it as main canvas
A simple Dictionary class for Strings.
A simple Dictionary class for Numbers.
\\nfunction setup() {\\n let img = createImage(100, 100); // same as new p5.Image(100, 100);\\n img.loadPixels();\\n createCanvas(100, 100);\\n background(0);\\n\\n // helper for writing color to array\\n function writeColor(image, x, y, red, green, blue, alpha) {\\n let index = (x + y * width) * 4;\\n image.pixels[index] = red;\\n image.pixels[index + 1] = green;\\n image.pixels[index + 2] = blue;\\n image.pixels[index + 3] = alpha;\\n }\\n\\n let x, y;\\n // fill with random colors\\n for (y = 0; y < img.height; y++) {\\n for (x = 0; x < img.width; x++) {\\n let red = random(255);\\n let green = random(255);\\n let blue = random(255);\\n let alpha = 255;\\n writeColor(img, x, y, red, green, blue, alpha);\\n }\\n }\\n\\n // draw a red line\\n y = 0;\\n for (x = 0; x < img.width; x++) {\\n writeColor(img, x, y, 255, 0, 0, 255);\\n }\\n\\n // draw a green line\\n y = img.height - 1;\\n for (x = 0; x < img.width; x++) {\\n writeColor(img, x, y, 0, 255, 0, 255);\\n }\\n\\n img.updatePixels();\\n image(img, 0, 0);\\n}\\n
An array of p5.TableRow objects
A TableRow object represents a single row of data values,\\nstored in columns, from a table.
A Table Row contains both an ordered array, and an unordered\\nJSON object.
optional: populate the row with a\\n string of values, separated by the\\n separator
comma separated values (csv) by default
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let children = xml.getChildren('animal');\\n\\n for (let i = 0; i < children.length; i++) {\\n let id = children[i].getNum('id');\\n let coloring = children[i].getString('species');\\n let name = children[i].getContent();\\n print(id + ', ' + coloring + ', ' + name);\\n }\\n}\\n\\n// Sketch prints:\\n// 0, Capra hircus, Goat\\n// 1, Panthera pardus, Leopard\\n// 2, Equus zebra, Zebra\\n
x component of the vector
y component of the vector
z component of the vector
\\nlet v1 = createVector(40, 50);\\nlet v2 = createVector(40, 50);\\n\\nellipse(v1.x, v1.y, 50, 50);\\nellipse(v2.x, v2.y, 50, 50);\\nv1.add(v2);\\nellipse(v1.x, v1.y, 50, 50);\\n
Base class for font handling
instance of WebGL renderer
\\nlet cam;\\nlet delta = 0.01;\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n normalMaterial();\\n cam = createCamera();\\n // set initial pan angle\\n cam.pan(-0.8);\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n // pan camera according to angle 'delta'\\n cam.pan(delta);\\n\\n // every 160 frames, switch direction\\n if (frameCount % 160 === 0) {\\n delta *= -1;\\n }\\n\\n rotateX(frameCount * 0.01);\\n translate(-100, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n}\\n
p5 Geometry class
number of vertices on horizontal surface
function to call upon object instantiation.
Shader class for WEBGL Mode
an instance of p5.RendererGL that\\nwill provide the GL context for this new p5.Shader
source code for the vertex shader (as a string)
source code for the fragment shader (as a string)
Extends p5.Element to handle audio and video. In addition to the methods\\nof p5.Element, it also contains methods for controlling media. It is not\\ncalled directly, but p5.MediaElements are created by calling createVideo,\\ncreateAudio, and createCapture.
Base class for a file.\\nUsed for Element.drop and createFileInput.
File that is wrapped
SoundFile object with a path to a file.
The p5.SoundFile may not be available immediately because\\nit loads the file information asynchronously.
To do something with the sound as soon as it loads\\npass the name of a function as the second parameter.
Only one file path is required. However, audio file formats\\n(i.e. mp3, ogg, wav and m4a/aac) are not supported by all\\nweb browsers. If you want to ensure compatability, instead of a single\\nfile path, you may include an Array of filepaths, and the browser will\\nchoose a format that works.
path to a sound file (String). Optionally,\\n you may include multiple file formats in\\n an array. Alternately, accepts an object\\n from the HTML5 File API, or a p5.File.
Name of a function to call once file loads
Name of a function to call if file fails to\\n load. This function will receive an error or\\n XMLHttpRequest object with information\\n about what went wrong.
Name of a function to call while file\\n is loading. That function will\\n receive progress of the request to\\n load the sound file\\n (between 0 and 1) as its first\\n parameter. This progress\\n does not account for the additional\\n time needed to decode the audio data.
\\n\\nfunction preload() {\\n soundFormats('mp3', 'ogg');\\n mySound = loadSound('assets/doorbell.mp3');\\n}\\n\\nfunction setup() {\\n mySound.setVolume(0.1);\\n mySound.play();\\n}\\n\\n
Amplitude measures volume between 0.0 and 1.0.\\nListens to all p5sound by default, or use setInput()\\nto listen to a specific sound source. Accepts an optional\\nsmoothing value, which defaults to 0.
between 0.0 and .999 to smooth\\n amplitude readings (defaults to 0)
\\nvar sound, amplitude, cnv;\\n\\nfunction preload(){\\n sound = loadSound('assets/beat.mp3');\\n}\\nfunction setup() {\\n cnv = createCanvas(100,100);\\n amplitude = new p5.Amplitude();\\n\\n // start / stop the sound when canvas is clicked\\n cnv.mouseClicked(function() {\\n if (sound.isPlaying() ){\\n sound.stop();\\n } else {\\n sound.play();\\n }\\n });\\n}\\nfunction draw() {\\n background(0);\\n fill(255);\\n var level = amplitude.getLevel();\\n var size = map(level, 0, 1, 0, 200);\\n ellipse(width/2, height/2, size, size);\\n}\\n\\n
FFT (Fast Fourier Transform) is an analysis algorithm that\\nisolates individual\\n\\naudio frequencies within a waveform.
Once instantiated, a p5.FFT object can return an array based on\\ntwo types of analyses: • FFT.waveform() computes\\namplitude values along the time domain. The array indices correspond\\nto samples across a brief moment in time. Each value represents\\namplitude of the waveform at that sample of time.\\n• FFT.analyze() computes amplitude values along the\\nfrequency domain. The array indices correspond to frequencies (i.e.\\npitches), from the lowest to the highest that humans can hear. Each\\nvalue represents amplitude at that slice of the frequency spectrum.\\nUse with getEnergy() to measure amplitude at specific\\nfrequencies, or within a range of frequencies.
FFT.waveform()
FFT.analyze()
getEnergy()
FFT analyzes a very short snapshot of sound called a sample\\nbuffer. It returns an array of amplitude measurements, referred\\nto as bins. The array is 1024 bins long by default.\\nYou can change the bin array length, but it must be a power of 2\\nbetween 16 and 1024 in order for the FFT algorithm to function\\ncorrectly. The actual size of the FFT buffer is twice the\\nnumber of bins, so given a standard sample rate, the buffer is\\n2048/44100 seconds long.
bins
Smooth results of Freq Spectrum.\\n 0.0 < smoothing < 1.0.\\n Defaults to 0.8.
Length of resulting array.\\n Must be a power of two between\\n 16 and 1024. Defaults to 1024.
\\nfunction preload(){\\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\\n}\\n\\nfunction setup(){\\n var cnv = createCanvas(100,100);\\n cnv.mouseClicked(togglePlay);\\n fft = new p5.FFT();\\n sound.amp(0.2);\\n}\\n\\nfunction draw(){\\n background(0);\\n\\n var spectrum = fft.analyze();\\n noStroke();\\n fill(0,255,0); // spectrum is green\\n for (var i = 0; i< spectrum.length; i++){\\n var x = map(i, 0, spectrum.length, 0, width);\\n var h = -height + map(spectrum[i], 0, 255, height, 0);\\n rect(x, height, width / spectrum.length, h )\\n }\\n\\n var waveform = fft.waveform();\\n noFill();\\n beginShape();\\n stroke(255,0,0); // waveform is red\\n strokeWeight(1);\\n for (var i = 0; i< waveform.length; i++){\\n var x = map(i, 0, waveform.length, 0, width);\\n var y = map( waveform[i], -1, 1, 0, height);\\n vertex(x,y);\\n }\\n endShape();\\n\\n text('click to play/pause', 4, 10);\\n}\\n\\n// fade sound if mouse is over canvas\\nfunction togglePlay() {\\n if (sound.isPlaying()) {\\n sound.pause();\\n } else {\\n sound.loop();\\n }\\n}\\n
p5.Signal is a constant audio-rate signal used by p5.Oscillator\\nand p5.Envelope for modulation math.
This is necessary because Web Audio is processed on a seprate clock.\\nFor example, the p5 draw loop runs about 60 times per second. But\\nthe audio clock must process samples 44100 times per second. If we\\nwant to add a value to each of those samples, we can't do it in the\\ndraw loop, but we can do it by adding a constant-rate audio signal.</p.\\n\\n
This class mostly functions behind the scenes in p5.sound, and returns\\na Tone.Signal from the Tone.js library by Yotam Mann.\\nIf you want to work directly with audio signals for modular\\nsynthesis, check out\\ntone.js.
\\nfunction setup() {\\n carrier = new p5.Oscillator('sine');\\n carrier.amp(1); // set amplitude\\n carrier.freq(220); // set frequency\\n carrier.start(); // start oscillating\\n\\n modulator = new p5.Oscillator('sawtooth');\\n modulator.disconnect();\\n modulator.amp(1);\\n modulator.freq(4);\\n modulator.start();\\n\\n // Modulator's default amplitude range is -1 to 1.\\n // Multiply it by -200, so the range is -200 to 200\\n // then add 220 so the range is 20 to 420\\n carrier.freq( modulator.mult(-200).add(220) );\\n}\\n
Creates a signal that oscillates between -1.0 and 1.0.\\nBy default, the oscillation takes the form of a sinusoidal\\nshape ('sine'). Additional types include 'triangle',\\n'sawtooth' and 'square'. The frequency defaults to\\n440 oscillations per second (440Hz, equal to the pitch of an\\n'A' note).
Set the type of oscillation with setType(), or by instantiating a\\nspecific oscillator: p5.SinOsc, p5.TriOsc, p5.SqrOsc, or p5.SawOsc.\\n
frequency defaults to 440Hz
type of oscillator. Options:\\n 'sine' (default), 'triangle',\\n 'sawtooth', 'square'
\\nvar osc;\\nvar playing = false;\\n\\nfunction setup() {\\n backgroundColor = color(255,0,255);\\n textAlign(CENTER);\\n\\n osc = new p5.Oscillator();\\n osc.setType('sine');\\n osc.freq(240);\\n osc.amp(0);\\n osc.start();\\n}\\n\\nfunction draw() {\\n background(backgroundColor)\\n text('click to play', width/2, height/2);\\n}\\n\\nfunction mouseClicked() {\\n if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {\\n if (!playing) {\\n // ramp amplitude to 0.5 over 0.05 seconds\\n osc.amp(0.5, 0.05);\\n playing = true;\\n backgroundColor = color(0,255,255);\\n } else {\\n // ramp amplitude to 0 over 0.5 seconds\\n osc.amp(0, 0.5);\\n playing = false;\\n backgroundColor = color(255,0,255);\\n }\\n }\\n}\\n
Constructor: new p5.SinOsc().\\nThis creates a Sine Wave Oscillator and is\\nequivalent to new p5.Oscillator('sine')\\n or creating a p5.Oscillator and then calling\\nits method setType('sine').\\nSee p5.Oscillator for methods.
new p5.SinOsc()
new p5.Oscillator('sine')\\n
setType('sine')
Set the frequency
Constructor: new p5.TriOsc().\\nThis creates a Triangle Wave Oscillator and is\\nequivalent to new p5.Oscillator('triangle')\\n or creating a p5.Oscillator and then calling\\nits method setType('triangle').\\nSee p5.Oscillator for methods.
new p5.TriOsc()
new p5.Oscillator('triangle')\\n
setType('triangle')
Constructor: new p5.SawOsc().\\nThis creates a SawTooth Wave Oscillator and is\\nequivalent to new p5.Oscillator('sawtooth')\\n or creating a p5.Oscillator and then calling\\nits method setType('sawtooth').\\nSee p5.Oscillator for methods.
new p5.SawOsc()
new p5.Oscillator('sawtooth')\\n
setType('sawtooth')
Constructor: new p5.SqrOsc().\\nThis creates a Square Wave Oscillator and is\\nequivalent to new p5.Oscillator('square')\\n or creating a p5.Oscillator and then calling\\nits method setType('square').\\nSee p5.Oscillator for methods.
new p5.SqrOsc()
new p5.Oscillator('square')\\n
setType('square')
Envelopes are pre-defined amplitude distribution over time.\\nTypically, envelopes are used to control the output volume\\nof an object, a series of fades referred to as Attack, Decay,\\nSustain and Release (\\nADSR\\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\\ncontrol an Oscillator's frequency like this: osc.freq(env).
osc.freq(env)
Use setRange to change the attack/release level.\\nUse setADSR to change attackTime, decayTime, sustainPercent and releaseTime.
setRange
setADSR
Use the play method to play the entire envelope,\\nthe ramp method for a pingable trigger,\\nor triggerAttack/\\ntriggerRelease to trigger noteOn/noteOff.
play
ramp
triggerAttack
triggerRelease
\\nvar attackLevel = 1.0;\\nvar releaseLevel = 0;\\n\\nvar attackTime = 0.001;\\nvar decayTime = 0.2;\\nvar susPercent = 0.2;\\nvar releaseTime = 0.5;\\n\\nvar env, triOsc;\\n\\nfunction setup() {\\n var cnv = createCanvas(100, 100);\\n\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n\\n env = new p5.Envelope();\\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\\n env.setRange(attackLevel, releaseLevel);\\n\\n triOsc = new p5.Oscillator('triangle');\\n triOsc.amp(env);\\n triOsc.start();\\n triOsc.freq(220);\\n\\n cnv.mousePressed(playEnv);\\n}\\n\\nfunction playEnv() {\\n env.play();\\n}\\n
Creates a Pulse object, an oscillator that implements\\nPulse Width Modulation.\\nThe pulse is created with two oscillators.\\nAccepts a parameter for frequency, and to set the\\nwidth between the pulses. See \\np5.Oscillator for a full list of methods.
p5.Oscillator
Frequency in oscillations per second (Hz)
Width between the pulses (0 to 1.0,\\n defaults to 0)
\\nvar pulse;\\nfunction setup() {\\n background(0);\\n\\n // Create and start the pulse wave oscillator\\n pulse = new p5.Pulse();\\n pulse.amp(0.5);\\n pulse.freq(220);\\n pulse.start();\\n}\\n\\nfunction draw() {\\n var w = map(mouseX, 0, width, 0, 1);\\n w = constrain(w, 0, 1);\\n pulse.width(w)\\n}\\n
Noise is a type of oscillator that generates a buffer with random values.
Type of noise can be 'white' (default),\\n 'brown' or 'pink'.
Get audio from an input, i.e. your computer's microphone.
Turn the mic on/off with the start() and stop() methods. When the mic\\nis on, its volume can be measured with getLevel or by connecting an\\nFFT object.
If you want to hear the AudioIn, use the .connect() method.\\nAudioIn does not connect to p5.sound output by default to prevent\\nfeedback.
Note: This uses the getUserMedia/\\nStream API, which is not supported by certain browsers. Access in Chrome browser\\nis limited to localhost and https, but access over http may be limited.
A function to call if there is an error\\n accessing the AudioIn. For example,\\n Safari and iOS devices do not\\n currently allow microphone access.
\\nvar mic;\\nfunction setup(){\\n mic = new p5.AudioIn()\\n mic.start();\\n}\\nfunction draw(){\\n background(0);\\n micLevel = mic.getLevel();\\n ellipse(width/2, constrain(height-micLevel*height*5, 0, height), 10, 10);\\n}\\n
Effect is a base class for audio effects in p5. \\nThis module handles the nodes and methods that are \\ncommon and useful for current and future effects.
This class is extended by p5.Distortion, \\np5.Compressor,\\np5.Delay, \\np5.Filter, \\np5.Reverb.
Reference to the audio context of the p5 object
Gain Node effect wrapper
Tone.JS CrossFade node (defaults to value: 1)
Effects that extend this class should connect\\n to the wet signal to this gain node, so that dry and wet \\n signals are mixed properly.
A p5.Filter uses a Web Audio Biquad Filter to filter\\nthe frequency response of an input source. Subclasses\\ninclude:
p5.LowPass
p5.HighPass
p5.BandPass
The .res() method controls either width of the\\nbandpass, or resonance of the low/highpass cutoff frequency.
.res()
This class extends p5.Effect.Methods amp(), chain(), \\ndrywet(), connect(), and \\ndisconnect() are available.
'lowpass' (default), 'highpass', 'bandpass'
\\nvar fft, noise, filter;\\n\\nfunction setup() {\\n fill(255, 40, 255);\\n\\n filter = new p5.BandPass();\\n\\n noise = new p5.Noise();\\n // disconnect unfiltered noise,\\n // and connect to filter\\n noise.disconnect();\\n noise.connect(filter);\\n noise.start();\\n\\n fft = new p5.FFT();\\n}\\n\\nfunction draw() {\\n background(30);\\n\\n // set the BandPass frequency based on mouseX\\n var freq = map(mouseX, 0, width, 20, 10000);\\n filter.freq(freq);\\n // give the filter a narrow band (lower res = wider bandpass)\\n filter.res(50);\\n\\n // draw filtered spectrum\\n var spectrum = fft.analyze();\\n noStroke();\\n for (var i = 0; i < spectrum.length; i++) {\\n var x = map(i, 0, spectrum.length, 0, width);\\n var h = -height + map(spectrum[i], 0, 255, height, 0);\\n rect(x, height, width/spectrum.length, h);\\n }\\n\\n isMouseOverCanvas();\\n}\\n\\nfunction isMouseOverCanvas() {\\n var mX = mouseX, mY = mouseY;\\n if (mX > 0 && mX < width && mY < height && mY > 0) {\\n noise.amp(0.5, 0.2);\\n } else {\\n noise.amp(0, 0.2);\\n }\\n}\\n
Constructor: new p5.LowPass() Filter.\\nThis is the same as creating a p5.Filter and then calling\\nits method setType('lowpass').\\nSee p5.Filter for methods.
new p5.LowPass()
setType('lowpass')
Constructor: new p5.HighPass() Filter.\\nThis is the same as creating a p5.Filter and then calling\\nits method setType('highpass').\\nSee p5.Filter for methods.
new p5.HighPass()
setType('highpass')
Constructor: new p5.BandPass() Filter.\\nThis is the same as creating a p5.Filter and then calling\\nits method setType('bandpass').\\nSee p5.Filter for methods.
new p5.BandPass()
setType('bandpass')
p5.EQ is an audio effect that performs the function of a multiband\\naudio equalizer. Equalization is used to adjust the balance of\\nfrequency compoenents of an audio signal. This process is commonly used\\nin sound production and recording to change the waveform before it reaches\\na sound output device. EQ can also be used as an audio effect to create\\ninteresting distortions by filtering out parts of the spectrum. p5.EQ is\\nbuilt using a chain of Web Audio Biquad Filter Nodes and can be\\ninstantiated with 3 or 8 bands. Bands can be added or removed from\\nthe EQ by directly modifying p5.EQ.bands (the array that stores filters).
This class extends p5.Effect.\\nMethods amp(), chain(),\\ndrywet(), connect(), and\\ndisconnect() are available.
Constructor will accept 3 or 8, defaults to 3
\\nvar eq;\\nvar band_names;\\nvar band_index;\\n\\nvar soundFile, play;\\n\\nfunction preload() {\\n soundFormats('mp3', 'ogg');\\n soundFile = loadSound('assets/beat');\\n}\\n\\nfunction setup() {\\n eq = new p5.EQ(3);\\n soundFile.disconnect();\\n eq.process(soundFile);\\n\\n band_names = ['lows','mids','highs'];\\n band_index = 0;\\n play = false;\\n textAlign(CENTER);\\n}\\n\\nfunction draw() {\\n background(30);\\n noStroke();\\n fill(255);\\n text('click to kill',50,25);\\n\\n fill(255, 40, 255);\\n textSize(26);\\n text(band_names[band_index],50,55);\\n\\n fill(255);\\n textSize(9);\\n text('space = play/pause',50,80);\\n}\\n\\n//If mouse is over canvas, cycle to the next band and kill the frequency\\nfunction mouseClicked() {\\n for (var i = 0; i < eq.bands.length; i++) {\\n eq.bands[i].gain(0);\\n }\\n eq.bands[band_index].gain(-40);\\n if (mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0) {\\n band_index === 2 ? band_index = 0 : band_index++;\\n }\\n}\\n\\n//use space bar to trigger play / pause\\nfunction keyPressed() {\\n if (key===' ') {\\n play = !play\\n play ? soundFile.loop() : soundFile.pause();\\n }\\n}\\n
Panner3D is based on the \\nWeb Audio Spatial Panner Node.\\nThis panner is a spatial processing node that allows audio to be positioned\\nand oriented in 3D space.
The position is relative to an \\nAudio Context Listener, which can be accessed\\nby p5.soundOut.audiocontext.listener
p5.soundOut.audiocontext.listener
Delay is an echo effect. It processes an existing sound source,\\nand outputs a delayed version of that sound. The p5.Delay can\\nproduce different effects depending on the delayTime, feedback,\\nfilter, and type. In the example below, a feedback of 0.5 (the\\ndefaul value) will produce a looping delay that decreases in\\nvolume by 50% each repeat. A filter will cut out the high\\nfrequencies so that the delay does not sound as piercing as the\\noriginal source.
\\nvar noise, env, delay;\\n\\nfunction setup() {\\n background(0);\\n noStroke();\\n fill(255);\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n\\n noise = new p5.Noise('brown');\\n noise.amp(0);\\n noise.start();\\n\\n delay = new p5.Delay();\\n\\n // delay.process() accepts 4 parameters:\\n // source, delayTime, feedback, filter frequency\\n // play with these numbers!!\\n delay.process(noise, .12, .7, 2300);\\n\\n // play the noise with an envelope,\\n // a series of fades ( time / value pairs )\\n env = new p5.Envelope(.01, 0.2, .2, .1);\\n}\\n\\n// mouseClick triggers envelope\\nfunction mouseClicked() {\\n // is mouse over canvas?\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n env.play(noise);\\n }\\n}\\n
Reverb adds depth to a sound through a large number of decaying\\nechoes. It creates the perception that sound is occurring in a\\nphysical space. The p5.Reverb has paramters for Time (how long does the\\nreverb last) and decayRate (how much the sound decays with each echo)\\nthat can be set with the .set() or .process() methods. The p5.Convolver\\nextends p5.Reverb allowing you to recreate the sound of actual physical\\nspaces through convolution.
\\nvar soundFile, reverb;\\nfunction preload() {\\n soundFile = loadSound('assets/Damscray_DancingTiger.mp3');\\n}\\n\\nfunction setup() {\\n reverb = new p5.Reverb();\\n soundFile.disconnect(); // so we'll only hear reverb...\\n\\n // connect soundFile to reverb, process w/\\n // 3 second reverbTime, decayRate of 2%\\n reverb.process(soundFile, 3, 2);\\n soundFile.play();\\n}\\n
p5.Convolver extends p5.Reverb. It can emulate the sound of real\\nphysical spaces through a process called \\nconvolution.
Convolution multiplies any audio input by an "impulse response"\\nto simulate the dispersion of sound over time. The impulse response is\\ngenerated from an audio file that you provide. One way to\\ngenerate an impulse response is to pop a balloon in a reverberant space\\nand record the echo. Convolution can also be used to experiment with\\nsound.
Use the method createConvolution(path) to instantiate a\\np5.Convolver with a path to your impulse response audio file.
createConvolution(path)
path to a sound file
function to call when loading succeeds
function to call if loading fails.\\n This function will receive an error or\\n XMLHttpRequest object with information\\n about what went wrong.
\\nvar cVerb, sound;\\nfunction preload() {\\n // We have both MP3 and OGG versions of all sound assets\\n soundFormats('ogg', 'mp3');\\n\\n // Try replacing 'bx-spring' with other soundfiles like\\n // 'concrete-tunnel' 'small-plate' 'drum' 'beatbox'\\n cVerb = createConvolver('assets/bx-spring.mp3');\\n\\n // Try replacing 'Damscray_DancingTiger' with\\n // 'beat', 'doorbell', lucky_dragons_-_power_melody'\\n sound = loadSound('assets/Damscray_DancingTiger.mp3');\\n}\\n\\nfunction setup() {\\n // disconnect from master output...\\n sound.disconnect();\\n\\n // ...and process with cVerb\\n // so that we only hear the convolution\\n cVerb.process(sound);\\n\\n sound.play();\\n}\\n
A phrase is a pattern of musical events over time, i.e.\\na series of notes and rests.
Phrases must be added to a p5.Part for playback, and\\neach part can play multiple phrases at the same time.\\nFor example, one Phrase might be a kick drum, another\\ncould be a snare, and another could be the bassline.
The first parameter is a name so that the phrase can be\\nmodified or deleted later. The callback is a a function that\\nthis phrase will call at every step—for example it might be\\ncalled playNote(value){}. The array determines\\nwhich value is passed into the callback at each step of the\\nphrase. It can be numbers, an object with multiple numbers,\\nor a zero (0) indicates a rest so the callback won't be called).
playNote(value){}
Name so that you can access the Phrase.
The name of a function that this phrase\\n will call. Typically it will play a sound,\\n and accept two parameters: a time at which\\n to play the sound (in seconds from now),\\n and a value from the sequence array. The\\n time should be passed into the play() or\\n start() method to ensure precision.
Array of values to pass into the callback\\n at each step of the phrase.
\\nvar mySound, myPhrase, myPart;\\nvar pattern = [1,0,0,2,0,2,0,0];\\nvar msg = 'click to play';\\n\\nfunction preload() {\\n mySound = loadSound('assets/beatbox.mp3');\\n}\\n\\nfunction setup() {\\n noStroke();\\n fill(255);\\n textAlign(CENTER);\\n masterVolume(0.1);\\n\\n myPhrase = new p5.Phrase('bbox', makeSound, pattern);\\n myPart = new p5.Part();\\n myPart.addPhrase(myPhrase);\\n myPart.setBPM(60);\\n}\\n\\nfunction draw() {\\n background(0);\\n text(msg, width/2, height/2);\\n}\\n\\nfunction makeSound(time, playbackRate) {\\n mySound.rate(playbackRate);\\n mySound.play(time);\\n}\\n\\nfunction mouseClicked() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n myPart.start();\\n msg = 'playing pattern';\\n }\\n}\\n\\n
A p5.Part plays back one or more p5.Phrases. Instantiate a part\\nwith steps and tatums. By default, each step represents a 1/16th note.
See p5.Phrase for more about musical timing.
Steps in the part
Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)
\\nvar box, drum, myPart;\\nvar boxPat = [1,0,0,2,0,2,0,0];\\nvar drumPat = [0,1,1,0,2,0,1,0];\\nvar msg = 'click to play';\\n\\nfunction preload() {\\n box = loadSound('assets/beatbox.mp3');\\n drum = loadSound('assets/drum.mp3');\\n}\\n\\nfunction setup() {\\n noStroke();\\n fill(255);\\n textAlign(CENTER);\\n masterVolume(0.1);\\n\\n var boxPhrase = new p5.Phrase('box', playBox, boxPat);\\n var drumPhrase = new p5.Phrase('drum', playDrum, drumPat);\\n myPart = new p5.Part();\\n myPart.addPhrase(boxPhrase);\\n myPart.addPhrase(drumPhrase);\\n myPart.setBPM(60);\\n masterVolume(0.1);\\n}\\n\\nfunction draw() {\\n background(0);\\n text(msg, width/2, height/2);\\n}\\n\\nfunction playBox(time, playbackRate) {\\n box.rate(playbackRate);\\n box.play(time);\\n}\\n\\nfunction playDrum(time, playbackRate) {\\n drum.rate(playbackRate);\\n drum.play(time);\\n}\\n\\nfunction mouseClicked() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n myPart.start();\\n msg = 'playing part';\\n }\\n}\\n
A Score consists of a series of Parts. The parts will\\nbe played back in order. For example, you could have an\\nA part, a B part, and a C part, and play them back in this order\\nnew p5.Score(a, a, b, a, c)
new p5.Score(a, a, b, a, c)
One or multiple parts, to be played in sequence.
SoundLoop
this function will be called on each iteration of theloop
amount of time or beats for each iteration of the loop\\n defaults to 1
\\nvar click;\\nvar looper1;\\n\\nfunction preload() {\\n click = loadSound('assets/drum.mp3');\\n}\\n\\nfunction setup() {\\n //the looper's callback is passed the timeFromNow\\n //this value should be used as a reference point from \\n //which to schedule sounds \\n looper1 = new p5.SoundLoop(function(timeFromNow){\\n click.play(timeFromNow);\\n background(255 * (looper1.iterations % 2));\\n }, 2);\\n\\n //stop after 10 iteratios;\\n looper1.maxIterations = 10;\\n //start the loop\\n looper1.start();\\n}\\n
Compressor is an audio effect class that performs dynamics compression\\non an audio input source. This is a very commonly used technique in music\\nand sound production. Compression creates an overall louder, richer, \\nand fuller sound by lowering the volume of louds and raising that of softs.\\nCompression can be used to avoid clipping (sound distortion due to \\npeaks in volume) and is especially useful when many sounds are played \\nat once. Compression can be used on indivudal sound sources in addition\\nto the master output.
Record sounds for playback and/or to save as a .wav file.\\nThe p5.SoundRecorder records all sound output from your sketch,\\nor can be assigned a specific source with setInput().
The record() method accepts a p5.SoundFile as a parameter.\\nWhen playback is stopped (either after the given amount of time,\\nor with the stop() method), the p5.SoundRecorder will send its\\nrecording to that p5.SoundFile for playback.
\\nvar mic, recorder, soundFile;\\nvar state = 0;\\n\\nfunction setup() {\\n background(200);\\n // create an audio in\\n mic = new p5.AudioIn();\\n\\n // prompts user to enable their browser mic\\n mic.start();\\n\\n // create a sound recorder\\n recorder = new p5.SoundRecorder();\\n\\n // connect the mic to the recorder\\n recorder.setInput(mic);\\n\\n // this sound file will be used to\\n // playback & save the recording\\n soundFile = new p5.SoundFile();\\n\\n text('keyPress to record', 20, 20);\\n}\\n\\nfunction keyPressed() {\\n // make sure user enabled the mic\\n if (state === 0 && mic.enabled) {\\n\\n // record to our p5.SoundFile\\n recorder.record(soundFile);\\n\\n background(255,0,0);\\n text('Recording!', 20, 20);\\n state++;\\n }\\n else if (state === 1) {\\n background(0,255,0);\\n\\n // stop recorder and\\n // send result to soundFile\\n recorder.stop();\\n\\n text('Stopped', 20, 20);\\n state++;\\n }\\n\\n else if (state === 2) {\\n soundFile.play(); // play the result!\\n save(soundFile, 'mySound.wav');\\n state++;\\n }\\n}\\n
PeakDetect works in conjunction with p5.FFT to\\nlook for onsets in some or all of the frequency spectrum.\\n
\\nTo use p5.PeakDetect, call update in the draw loop\\nand pass in a p5.FFT object.\\n
update
\\nYou can listen for a specific part of the frequency spectrum by\\nsetting the range between freq1 and freq2.\\n
freq1
freq2
threshold is the threshold for detecting a peak,\\nscaled between 0 and 1. It is logarithmic, so 0.1 is half as loud\\nas 1.0.
threshold
\\nThe update method is meant to be run in the draw loop, and\\nframes determines how many loops must pass before\\nanother peak can be detected.\\nFor example, if the frameRate() = 60, you could detect the beat of a\\n120 beat-per-minute song with this equation:\\n framesPerPeak = 60 / (estimatedBPM / 60 );\\n
framesPerPeak = 60 / (estimatedBPM / 60 );
\\nBased on example contribtued by @b2renger, and a simple beat detection\\nexplanation by Felix Turner.\\n
lowFrequency - defaults to 20Hz
highFrequency - defaults to 20000 Hz
Threshold for detecting a beat between 0 and 1\\n scaled logarithmically where 0.1 is 1/2 the loudness\\n of 1.0. Defaults to 0.35.
Defaults to 20.
\\n\\nvar cnv, soundFile, fft, peakDetect;\\nvar ellipseWidth = 10;\\n\\nfunction preload() {\\n soundFile = loadSound('assets/beat.mp3');\\n}\\n\\nfunction setup() {\\n background(0);\\n noStroke();\\n fill(255);\\n textAlign(CENTER);\\n\\n // p5.PeakDetect requires a p5.FFT\\n fft = new p5.FFT();\\n peakDetect = new p5.PeakDetect();\\n}\\n\\nfunction draw() {\\n background(0);\\n text('click to play/pause', width/2, height/2);\\n\\n // peakDetect accepts an fft post-analysis\\n fft.analyze();\\n peakDetect.update(fft);\\n\\n if ( peakDetect.isDetected ) {\\n ellipseWidth = 50;\\n } else {\\n ellipseWidth *= 0.95;\\n }\\n\\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\\n}\\n\\n// toggle play/stop when canvas is clicked\\nfunction mouseClicked() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n if (soundFile.isPlaying() ) {\\n soundFile.stop();\\n } else {\\n soundFile.play();\\n }\\n }\\n}\\n
A gain node is usefull to set the relative volume of sound.\\nIt's typically used to build mixers.
\\n\\n // load two soundfile and crossfade beetween them\\n var sound1,sound2;\\n var gain1, gain2, gain3;\\n\\n function preload(){\\n soundFormats('ogg', 'mp3');\\n sound1 = loadSound('assets/Damscray_-_Dancing_Tiger_01');\\n sound2 = loadSound('assets/beat.mp3');\\n }\\n\\n function setup() {\\n createCanvas(400,200);\\n\\n // create a 'master' gain to which we will connect both soundfiles\\n gain3 = new p5.Gain();\\n gain3.connect();\\n\\n // setup first sound for playing\\n sound1.rate(1);\\n sound1.loop();\\n sound1.disconnect(); // diconnect from p5 output\\n\\n gain1 = new p5.Gain(); // setup a gain node\\n gain1.setInput(sound1); // connect the first sound to its input\\n gain1.connect(gain3); // connect its output to the 'master'\\n\\n sound2.rate(1);\\n sound2.disconnect();\\n sound2.loop();\\n\\n gain2 = new p5.Gain();\\n gain2.setInput(sound2);\\n gain2.connect(gain3);\\n\\n }\\n\\n function draw(){\\n background(180);\\n\\n // calculate the horizontal distance beetween the mouse and the right of the screen\\n var d = dist(mouseX,0,width,0);\\n\\n // map the horizontal position of the mouse to values useable for volume control of sound1\\n var vol1 = map(mouseX,0,width,0,1);\\n var vol2 = 1-vol1; // when sound1 is loud, sound2 is quiet and vice versa\\n\\n gain1.amp(vol1,0.5,0);\\n gain2.amp(vol2,0.5,0);\\n\\n // map the vertical position of the mouse to values useable for 'master volume control'\\n var vol3 = map(mouseY,0,height,0,1);\\n gain3.amp(vol3,0.5,0);\\n }\\n
Base class for monophonic synthesizers. Any extensions of this class\\nshould follow the API and implement the methods below in order to \\nremain compatible with p5.PolySynth();
A MonoSynth is used as a single voice for sound synthesis.\\nThis is a class to be used in conjunction with the PolySynth\\nclass. Custom synthetisers should be built inheriting from\\nthis class.
\\nvar monoSynth;\\n\\nfunction setup() {\\n var cnv = createCanvas(100, 100);\\n cnv.mousePressed(playSynth);\\n\\n monoSynth = new p5.MonoSynth();\\n\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n}\\n\\nfunction playSynth() {\\n // time from now (in seconds)\\n var time = 0;\\n // note duration (in seconds)\\n var dur = 0.25;\\n // velocity (volume, from 0 to 1)\\n var v = 0.2;\\n\\n monoSynth.play(\\\"G3\\\", v, time, dur);\\n monoSynth.play(\\\"C4\\\", v, time += dur, dur);\\n\\n background(random(255), random(255), 255);\\n text('click to play', width/2, height/2);\\n}\\n
An AudioVoice is used as a single voice for sound synthesis.\\nThe PolySynth class holds an array of AudioVoice, and deals\\nwith voices allocations, with setting notes to be played, and\\nparameters to be set.
A monophonic synth voice inheriting\\n the AudioVoice class. Defaults to p5.MonoSynth
Number of voices, defaults to 8;
\\nvar polySynth;\\n\\nfunction setup() {\\n var cnv = createCanvas(100, 100);\\n cnv.mousePressed(playSynth);\\n\\n polySynth = new p5.PolySynth();\\n\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n}\\n\\nfunction playSynth() {\\n // note duration (in seconds)\\n var dur = 1.5;\\n\\n // time from now (in seconds)\\n var time = 0;\\n\\n // velocity (volume, from 0 to 1)\\n var vel = 0.1;\\n\\n // notes can overlap with each other\\n polySynth.play(\\\"G2\\\", vel, 0, dur);\\n polySynth.play(\\\"C3\\\", vel, time += 1/3, dur);\\n polySynth.play(\\\"G3\\\", vel, time += 1/3, dur);\\n\\n background(random(255), random(255), 255);\\n text('click to play', width/2, height/2);\\n}\\n
A Distortion effect created with a Waveshaper Node,\\nwith an approach adapted from\\nKevin Ennis
Unbounded distortion amount.\\n Normal values range from 0-1.
'none', '2x', or '4x'.
Conversions adapted from http://www.easyrgb.com/en/math.php.
In these functions, hue is always in the range [0, 1], just like all other\\ncomponents are in the range [0, 1]. 'Brightness' and 'value' are used\\ninterchangeably.
Convert an HSBA array to HSLA.
Convert an HSBA array to RGBA.
Convert an HSLA array to HSBA.
Convert an HSLA array to RGBA.
We need to change basis from HSLA to something that can be more easily be\\nprojected onto RGBA. We will choose hue and brightness as our first two\\ncomponents, and pick a convenient third one ('zest') so that we don't need\\nto calculate formal HSBA saturation.
Convert an RGBA array to HSBA.
Convert an RGBA array to HSLA.
Extracts the alpha value from a color or pixel array.
p5.Color object, color components,\\n or CSS color
\\nnoStroke();\\nlet c = color(0, 126, 255, 102);\\nfill(c);\\nrect(15, 15, 35, 70);\\nlet value = alpha(c); // Sets 'value' to 102\\nfill(value);\\nrect(50, 15, 35, 70);\\n
Extracts the blue value from a color or pixel array.
\\nlet c = color(175, 100, 220); // Define color 'c'\\nfill(c); // Use color variable 'c' as fill color\\nrect(15, 20, 35, 60); // Draw left rectangle\\n\\nlet blueValue = blue(c); // Get blue in 'c'\\nprint(blueValue); // Prints \\\"220.0\\\"\\nfill(0, 0, blueValue); // Use 'blueValue' in new fill\\nrect(50, 20, 35, 60); // Draw right rectangle\\n
Extracts the HSB brightness value from a color or pixel array.
\\nnoStroke();\\ncolorMode(HSB, 255);\\nlet c = color(0, 126, 255);\\nfill(c);\\nrect(15, 20, 35, 60);\\nlet value = brightness(c); // Sets 'value' to 255\\nfill(value);\\nrect(50, 20, 35, 60);\\n
\\nnoStroke();\\ncolorMode(HSB, 255);\\nlet c = color('hsb(60, 100%, 50%)');\\nfill(c);\\nrect(15, 20, 35, 60);\\nlet value = brightness(c); // A 'value' of 50% is 127.5\\nfill(value);\\nrect(50, 20, 35, 60);\\n
Creates colors for storing in variables of the color datatype. The\\nparameters are interpreted as RGB or HSB values depending on the\\ncurrent colorMode(). The default mode is RGB values from 0 to 255\\nand, therefore, the function call color(255, 204, 0) will return a\\nbright yellow color.\\n\\nNote that if only one value is provided to color(), it will be interpreted\\nas a grayscale value. Add a second value, and it will be used for alpha\\ntransparency. When three values are specified, they are interpreted as\\neither RGB or HSB values. Adding a fourth value applies alpha\\ntransparency.\\n\\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\\nstrings and all named color strings are supported. In this case, an alpha\\nnumber value as a second argument is not supported, the RGBA form should be\\nused.
\\nlet c = color(255, 204, 0); // Define color 'c'\\nfill(c); // Use color variable 'c' as fill color\\nnoStroke(); // Don't draw a stroke around shapes\\nrect(30, 20, 55, 55); // Draw rectangle\\n
\\nlet c = color(255, 204, 0); // Define color 'c'\\nfill(c); // Use color variable 'c' as fill color\\nnoStroke(); // Don't draw a stroke around shapes\\nellipse(25, 25, 80, 80); // Draw left circle\\n\\n// Using only one value with color()\\n// generates a grayscale value.\\nc = color(65); // Update 'c' with grayscale value\\nfill(c); // Use updated 'c' as fill color\\nellipse(75, 75, 80, 80); // Draw right circle\\n
\\n// Named SVG & CSS colors may be used,\\nlet c = color('magenta');\\nfill(c); // Use 'c' as fill color\\nnoStroke(); // Don't draw a stroke around shapes\\nrect(20, 20, 60, 60); // Draw rectangle\\n
\\n// as can hex color codes:\\nnoStroke(); // Don't draw a stroke around shapes\\nlet c = color('#0f0');\\nfill(c); // Use 'c' as fill color\\nrect(0, 10, 45, 80); // Draw rectangle\\n\\nc = color('#00ff00');\\nfill(c); // Use updated 'c' as fill color\\nrect(55, 10, 45, 80); // Draw rectangle\\n
\\n// RGB and RGBA color strings are also supported:\\n// these all set to the same color (solid blue)\\nlet c;\\nnoStroke(); // Don't draw a stroke around shapes\\nc = color('rgb(0,0,255)');\\nfill(c); // Use 'c' as fill color\\nrect(10, 10, 35, 35); // Draw rectangle\\n\\nc = color('rgb(0%, 0%, 100%)');\\nfill(c); // Use updated 'c' as fill color\\nrect(55, 10, 35, 35); // Draw rectangle\\n\\nc = color('rgba(0, 0, 255, 1)');\\nfill(c); // Use updated 'c' as fill color\\nrect(10, 55, 35, 35); // Draw rectangle\\n\\nc = color('rgba(0%, 0%, 100%, 1)');\\nfill(c); // Use updated 'c' as fill color\\nrect(55, 55, 35, 35); // Draw rectangle\\n
\\n// HSL color is also supported and can be specified\\n// by value\\nlet c;\\nnoStroke(); // Don't draw a stroke around shapes\\nc = color('hsl(160, 100%, 50%)');\\nfill(c); // Use 'c' as fill color\\nrect(0, 10, 45, 80); // Draw rectangle\\n\\nc = color('hsla(160, 100%, 50%, 0.5)');\\nfill(c); // Use updated 'c' as fill color\\nrect(55, 10, 45, 80); // Draw rectangle\\n
\\n// HSB color is also supported and can be specified\\n// by value\\nlet c;\\nnoStroke(); // Don't draw a stroke around shapes\\nc = color('hsb(160, 100%, 50%)');\\nfill(c); // Use 'c' as fill color\\nrect(0, 10, 45, 80); // Draw rectangle\\n\\nc = color('hsba(160, 100%, 50%, 0.5)');\\nfill(c); // Use updated 'c' as fill color\\nrect(55, 10, 45, 80); // Draw rectangle\\n
\\nlet c; // Declare color 'c'\\nnoStroke(); // Don't draw a stroke around shapes\\n\\n// If no colorMode is specified, then the\\n// default of RGB with scale of 0-255 is used.\\nc = color(50, 55, 100); // Create a color for 'c'\\nfill(c); // Use color variable 'c' as fill color\\nrect(0, 10, 45, 80); // Draw left rect\\n\\ncolorMode(HSB, 100); // Use HSB with scale of 0-100\\nc = color(50, 55, 100); // Update 'c' with new color\\nfill(c); // Use updated 'c' as fill color\\nrect(55, 10, 45, 80); // Draw right rect\\n
number specifying value between white\\n and black.
alpha value relative to current color range\\n (default is 0-255)
red or hue value relative to\\n the current color range
green or saturation value\\n relative to the current color range
blue or brightness value\\n relative to the current color range
a color string
an array containing the red,green,blue &\\n and alpha components of the color
Extracts the green value from a color or pixel array.
\\nlet c = color(20, 75, 200); // Define color 'c'\\nfill(c); // Use color variable 'c' as fill color\\nrect(15, 20, 35, 60); // Draw left rectangle\\n\\nlet greenValue = green(c); // Get green in 'c'\\nprint(greenValue); // Print \\\"75.0\\\"\\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\\nrect(50, 20, 35, 60); // Draw right rectangle\\n
Extracts the hue value from a color or pixel array.
Hue exists in both HSB and HSL. This function will return the\\nHSB-normalized hue when supplied with an HSB color object (or when supplied\\nwith a pixel array while the color mode is HSB), but will default to the\\nHSL-normalized hue otherwise. (The values will only be different if the\\nmaximum hue setting for each system is different.)
\\nnoStroke();\\ncolorMode(HSB, 255);\\nlet c = color(0, 126, 255);\\nfill(c);\\nrect(15, 20, 35, 60);\\nlet value = hue(c); // Sets 'value' to \\\"0\\\"\\nfill(value);\\nrect(50, 20, 35, 60);\\n
Blends two colors to find a third color somewhere between them. The amt\\nparameter is the amount to interpolate between the two values where 0.0\\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\\nabove 1 will be capped at 1. This is different from the behavior of lerp(),\\nbut necessary because otherwise numbers outside the range will produce\\nstrange and unexpected colors.\\n\\nThe way that colours are interpolated depends on the current color mode.
interpolate from this color
interpolate to this color
number between 0 and 1
\\ncolorMode(RGB);\\nstroke(255);\\nbackground(51);\\nlet from = color(218, 165, 32);\\nlet to = color(72, 61, 139);\\ncolorMode(RGB); // Try changing to HSB.\\nlet interA = lerpColor(from, to, 0.33);\\nlet interB = lerpColor(from, to, 0.66);\\nfill(from);\\nrect(10, 20, 20, 60);\\nfill(interA);\\nrect(30, 20, 20, 60);\\nfill(interB);\\nrect(50, 20, 20, 60);\\nfill(to);\\nrect(70, 20, 20, 60);\\n
Extracts the HSL lightness value from a color or pixel array.
\\nnoStroke();\\ncolorMode(HSL);\\nlet c = color(156, 100, 50, 1);\\nfill(c);\\nrect(15, 20, 35, 60);\\nlet value = lightness(c); // Sets 'value' to 50\\nfill(value);\\nrect(50, 20, 35, 60);\\n
Extracts the red value from a color or pixel array.
\\nlet c = color(255, 204, 0); // Define color 'c'\\nfill(c); // Use color variable 'c' as fill color\\nrect(15, 20, 35, 60); // Draw left rectangle\\n\\nlet redValue = red(c); // Get red in 'c'\\nprint(redValue); // Print \\\"255.0\\\"\\nfill(redValue, 0, 0); // Use 'redValue' in new fill\\nrect(50, 20, 35, 60); // Draw right rectangle\\n
\\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\\nlet c = color(127, 255, 0);\\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\\nlet myColor = red(c);\\nprint(myColor); // 0.4980392156862745\\n
Extracts the saturation value from a color or pixel array.
Saturation is scaled differently in HSB and HSL. This function will return\\nthe HSB saturation when supplied with an HSB color object (or when supplied\\nwith a pixel array while the color mode is HSB), but will default to the\\nHSL saturation otherwise.
\\nnoStroke();\\ncolorMode(HSB, 255);\\nlet c = color(0, 126, 255);\\nfill(c);\\nrect(15, 20, 35, 60);\\nlet value = saturation(c); // Sets 'value' to 126\\nfill(value);\\nrect(50, 20, 35, 60);\\n
This function returns the color formatted as a string. This can be useful\\nfor debugging, or for using p5.js with other libraries.
How the color string will be formatted.\\nLeaving this empty formats the string as rgba(r, g, b, a).\\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
\\nlet myColor;\\nfunction setup() {\\n createCanvas(200, 200);\\n stroke(255);\\n myColor = color(100, 100, 250);\\n fill(myColor);\\n}\\n\\nfunction draw() {\\n rotate(HALF_PI);\\n text(myColor.toString(), 0, -5);\\n text(myColor.toString('#rrggbb'), 0, -30);\\n text(myColor.toString('rgba%'), 0, -55);\\n}\\n
the new red value
\\nlet backgroundColor;\\n\\nfunction setup() {\\n backgroundColor = color(100, 50, 150);\\n}\\n\\nfunction draw() {\\n backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\\n background(backgroundColor);\\n}\\n
the new green value
\\nlet backgroundColor;\\n\\nfunction setup() {\\n backgroundColor = color(100, 50, 150);\\n}\\n\\nfunction draw() {\\n backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\\n background(backgroundColor);\\n}\\n
the new blue value
\\nlet backgroundColor;\\n\\nfunction setup() {\\n backgroundColor = color(100, 50, 150);\\n}\\n\\nfunction draw() {\\n backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\\n background(backgroundColor);\\n}\\n
the new alpha value
\\nlet squareColor;\\n\\nfunction setup() {\\n ellipseMode(CORNERS);\\n strokeWeight(4);\\n squareColor = color(100, 50, 150);\\n}\\n\\nfunction draw() {\\n background(255);\\n\\n noFill();\\n stroke(0);\\n ellipse(10, 10, width - 10, height - 10);\\n\\n squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\\n fill(squareColor);\\n noStroke();\\n rect(13, 13, width - 26, height - 26);\\n}\\n
Hue is the same in HSB and HSL, but the maximum value may be different.\\nThis function will return the HSB-normalized saturation when supplied with\\nan HSB color object, but will default to the HSL-normalized saturation\\notherwise.
Saturation is scaled differently in HSB and HSL. This function will return\\nthe HSB saturation when supplied with an HSB color object, but will default\\nto the HSL saturation otherwise.
CSS named colors.
These regular expressions are used to build up the patterns for matching\\nviable CSS color strings: fragmenting the regexes in this way increases the\\nlegibility and comprehensibility of the code.
Note that RGB values of .9 are not parsed by IE, but are supported here for\\ncolor string consistency.
Full color string patterns. The capture groups are necessary.
For HSB and HSL, interpret the gray level as a brightness/lightness\\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\\ngray level according to the blue maximum.
The background() function sets the color used for the background of the\\np5.js canvas. The default background is transparent. This function is\\ntypically used within draw() to clear the display window at the beginning\\nof each frame, but it can be used inside setup() to set the background on\\nthe first frame of animation or if the background need only be set once.\\n\\nThe color is either specified in terms of the RGB, HSB, or HSL color\\ndepending on the current colorMode. (The default color space is RGB, with\\neach value in the range from 0 to 255). The alpha range by default is also 0 to 255.\\n\\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\\nand all named color strings are supported. In this case, an alpha number\\nvalue as a second argument is not supported, the RGBA form should be used.\\n\\nA p5.Color object can also be provided to set the background color.\\n\\nA p5.Image can also be provided to set the background image.
\\n// Grayscale integer value\\nbackground(51);\\n
\\n// R, G & B integer values\\nbackground(255, 204, 0);\\n
\\n// H, S & B integer values\\ncolorMode(HSB);\\nbackground(255, 204, 100);\\n
\\n// Named SVG/CSS color string\\nbackground('red');\\n
\\n// three-digit hexadecimal RGB notation\\nbackground('#fae');\\n
\\n// six-digit hexadecimal RGB notation\\nbackground('#222222');\\n
\\n// integer RGB notation\\nbackground('rgb(0,255,0)');\\n
\\n// integer RGBA notation\\nbackground('rgba(0,255,0, 0.25)');\\n
\\n// percentage RGB notation\\nbackground('rgb(100%,0%,10%)');\\n
\\n// percentage RGBA notation\\nbackground('rgba(100%,0%,100%,0.5)');\\n
\\n// p5 Color object\\nbackground(color(0, 0, 255));\\n
any value created by the color() function
color string, possible formats include: integer\\n rgb() or rgba(), percentage rgb() or rgba(),\\n 3-digit hex, 6-digit hex
opacity of the background relative to current\\n color range (default is 0-255)
specifies a value between white and black
red or hue value (depending on the current color\\n mode)
green or saturation value (depending on the current\\n color mode)
blue or brightness value (depending on the current\\n color mode)
an array containing the red, green, blue\\n and alpha components of the color
image created with loadImage() or createImage(),\\n to set as background\\n (must be same size as the sketch window)
Clears the pixels within a buffer. This function only clears the canvas.\\nIt will not clear objects created by createX() methods such as\\ncreateVideo() or createDiv().\\nUnlike the main graphics context, pixels in additional graphics areas created\\nwith createGraphics() can be entirely\\nor partially transparent. This function clears everything to make all of\\nthe pixels 100% transparent.
\\n// Clear the screen on mouse press.\\nfunction setup() {\\n createCanvas(100, 100);\\n}\\n\\nfunction draw() {\\n ellipse(mouseX, mouseY, 20, 20);\\n}\\n\\nfunction mousePressed() {\\n clear();\\n}\\n
colorMode() changes the way p5.js interprets color data. By default, the\\nparameters for fill(), stroke(), background(), and color() are defined by\\nvalues between 0 and 255 using the RGB color model. This is equivalent to\\nsetting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB\\nsystem instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You\\ncan also use HSL.\\n\\nNote: existing color objects remember the mode that they were created in,\\nso you can change modes as you like without affecting their appearance.
\\nnoStroke();\\ncolorMode(RGB, 100);\\nfor (let i = 0; i < 100; i++) {\\n for (let j = 0; j < 100; j++) {\\n stroke(i, j, 0);\\n point(i, j);\\n }\\n}\\n
\\nnoStroke();\\ncolorMode(HSB, 100);\\nfor (let i = 0; i < 100; i++) {\\n for (let j = 0; j < 100; j++) {\\n stroke(i, j, 100);\\n point(i, j);\\n }\\n}\\n
\\ncolorMode(RGB, 255);\\nlet c = color(127, 255, 0);\\n\\ncolorMode(RGB, 1);\\nlet myColor = c._getRed();\\ntext(myColor, 10, 10, 80, 80);\\n
\\nnoFill();\\ncolorMode(RGB, 255, 255, 255, 1);\\nbackground(255);\\n\\nstrokeWeight(4);\\nstroke(255, 0, 10, 0.3);\\nellipse(40, 40, 50, 50);\\nellipse(50, 50, 40, 40);\\n
either RGB, HSB or HSL, corresponding to\\n Red/Green/Blue and Hue/Saturation/Brightness\\n (or Lightness)
range for all values
range for the red or hue depending on the\\n current color mode
range for the green or saturation depending\\n on the current color mode
range for the blue or brightness/lightness\\n depending on the current color mode
range for the alpha
Sets the color used to fill shapes. For example, if you run\\nfill(204, 102, 0), all subsequent shapes will be filled with orange. This\\ncolor is either specified in terms of the RGB or HSB color depending on\\nthe current colorMode(). (The default color space is RGB, with each value\\nin the range from 0 to 255). The alpha range by default is also 0 to 255.\\n\\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\\nand all named color strings are supported. In this case, an alpha number\\nvalue as a second argument is not supported, the RGBA form should be used.\\n\\nA p5 Color object can also be provided to set the fill color.
\\n// Grayscale integer value\\nfill(51);\\nrect(20, 20, 60, 60);\\n
\\n// R, G & B integer values\\nfill(255, 204, 0);\\nrect(20, 20, 60, 60);\\n
\\n// H, S & B integer values\\ncolorMode(HSB);\\nfill(255, 204, 100);\\nrect(20, 20, 60, 60);\\n
\\n// Named SVG/CSS color string\\nfill('red');\\nrect(20, 20, 60, 60);\\n
\\n// three-digit hexadecimal RGB notation\\nfill('#fae');\\nrect(20, 20, 60, 60);\\n
\\n// six-digit hexadecimal RGB notation\\nfill('#222222');\\nrect(20, 20, 60, 60);\\n
\\n// integer RGB notation\\nfill('rgb(0,255,0)');\\nrect(20, 20, 60, 60);\\n
\\n// integer RGBA notation\\nfill('rgba(0,255,0, 0.25)');\\nrect(20, 20, 60, 60);\\n
\\n// percentage RGB notation\\nfill('rgb(100%,0%,10%)');\\nrect(20, 20, 60, 60);\\n
\\n// percentage RGBA notation\\nfill('rgba(100%,0%,100%,0.5)');\\nrect(20, 20, 60, 60);\\n
\\n// p5 Color object\\nfill(color(0, 0, 255));\\nrect(20, 20, 60, 60);\\n
a gray value
the fill color
Disables filling geometry. If both noStroke() and noFill() are called,\\nnothing will be drawn to the screen.
\\nrect(15, 10, 55, 55);\\nnoFill();\\nrect(20, 20, 60, 60);\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(0);\\n noFill();\\n stroke(100, 100, 240);\\n rotateX(frameCount * 0.01);\\n rotateY(frameCount * 0.01);\\n box(45, 45, 45);\\n}\\n
Disables drawing the stroke (outline). If both noStroke() and noFill()\\nare called, nothing will be drawn to the screen.
\\nnoStroke();\\nrect(20, 20, 60, 60);\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(0);\\n noStroke();\\n fill(240, 150, 150);\\n rotateX(frameCount * 0.01);\\n rotateY(frameCount * 0.01);\\n box(45, 45, 45);\\n}\\n
Sets the color used to draw lines and borders around shapes. This color\\nis either specified in terms of the RGB or HSB color depending on the\\ncurrent colorMode() (the default color space is RGB, with each value in\\nthe range from 0 to 255). The alpha range by default is also 0 to 255.\\n\\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\\nstrings and all named color strings are supported. In this case, an alpha\\nnumber value as a second argument is not supported, the RGBA form should be\\nused.\\n\\nA p5 Color object can also be provided to set the stroke color.
\\n// Grayscale integer value\\nstrokeWeight(4);\\nstroke(51);\\nrect(20, 20, 60, 60);\\n
\\n// R, G & B integer values\\nstroke(255, 204, 0);\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// H, S & B integer values\\ncolorMode(HSB);\\nstrokeWeight(4);\\nstroke(255, 204, 100);\\nrect(20, 20, 60, 60);\\n
\\n// Named SVG/CSS color string\\nstroke('red');\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// three-digit hexadecimal RGB notation\\nstroke('#fae');\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// six-digit hexadecimal RGB notation\\nstroke('#222222');\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// integer RGB notation\\nstroke('rgb(0,255,0)');\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// integer RGBA notation\\nstroke('rgba(0,255,0,0.25)');\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// percentage RGB notation\\nstroke('rgb(100%,0%,10%)');\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// percentage RGBA notation\\nstroke('rgba(100%,0%,100%,0.5)');\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
\\n// p5 Color object\\nstroke(color(0, 0, 255));\\nstrokeWeight(4);\\nrect(20, 20, 60, 60);\\n
the stroke color
This function does 3 things:
Bounds the desired start/stop angles for an arc (in radians) so that:
0 <= start < TWO_PI ; start <= stop < start + TWO_PI\\n
This means that the arc rendering functions don't have to be concerned\\nwith what happens if stop is smaller than start, or if the arc 'goes\\nround more than once', etc.: they can just start at start and increase\\nuntil stop and the correct arc will be drawn.
Optionally adjusts the angles within each quadrant to counter the naive\\nscaling of the underlying ellipse up from the unit circle. Without\\nthis, the angles become arbitrary when width != height: 45 degrees\\nmight be drawn at 5 degrees on a 'wide' ellipse, or at 85 degrees on\\na 'tall' ellipse.
Flags up when start and stop correspond to the same place on the\\nunderlying ellipse. This is useful if you want to do something special\\nthere (like rendering a whole ellipse instead).
Draw an arc to the screen. If called with only x, y, w, h, start, and\\nstop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc\\nwill be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The\\norigin may be changed with the ellipseMode() function.\\nThe arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse.\\nAdding or subtracting TWO_PI to either angle does not change where they fall.\\nIf both start and stop fall at the same place, a full ellipse will be drawn.
x-coordinate of the arc's ellipse
y-coordinate of the arc's ellipse
width of the arc's ellipse by default
height of the arc's ellipse by default
angle to start the arc, specified in radians
angle to stop the arc, specified in radians
optional parameter to determine the way of drawing\\n the arc. either CHORD, PIE or OPEN
optional parameter for WebGL mode only. This is to\\n specify the number of vertices that makes up the\\n perimeter of the arc. Default value is 25.
\\narc(50, 55, 50, 50, 0, HALF_PI);\\nnoFill();\\narc(50, 55, 60, 60, HALF_PI, PI);\\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\\n
\\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\\n
\\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\\n
\\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\\n
\\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\\n
Draws an ellipse (oval) to the screen. An ellipse with equal width and\\nheight is a circle. By default, the first two parameters set the location,\\nand the third and fourth parameters set the shape's width and height. If\\nno height is specified, the value of width is used for both the width and\\nheight. If a negative height or width is specified, the absolute value is taken.\\nThe origin may be changed with the ellipseMode() function.
\\nellipse(56, 46, 55, 55);\\n
x-coordinate of the ellipse.
y-coordinate of the ellipse.
width of the ellipse.
height of the ellipse.
number of radial sectors to draw (for WebGL mode)
Draws a circle to the screen. A circle is a simple closed shape.\\nIt is the set of all points in a plane that are at a given distance from a given point, the centre.\\nThis function is a special case of the ellipse() function, where the width and height of the ellipse are the same.\\nHeight and width of the ellipse correspond to the diameter of the circle.\\nBy default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle.
x-coordinate of the centre of the circle.
y-coordinate of the centre of the circle.
diameter of the circle.
\\n// Draw a circle at location (30, 30) with a diameter of 20.\\ncircle(30, 30, 20);\\n
Draws a line (a direct path between two points) to the screen. The version\\nof line() with four parameters draws the line in 2D. To color a line, use\\nthe stroke() function. A line cannot be filled, therefore the fill()\\nfunction will not affect the color of a line. 2D lines are drawn with a\\nwidth of one pixel by default, but this can be changed with the\\nstrokeWeight() function.
\\nline(30, 20, 85, 75);\\n
\\nline(30, 20, 85, 20);\\nstroke(126);\\nline(85, 20, 85, 75);\\nstroke(255);\\nline(85, 75, 30, 75);\\n
the x-coordinate of the first point
the y-coordinate of the first point
the x-coordinate of the second point
the y-coordinate of the second point
the z-coordinate of the first point
the z-coordinate of the second point
Draws a point, a coordinate in space at the dimension of one pixel.\\nThe first parameter is the horizontal value for the point, the second\\nvalue is the vertical value for the point. The color of the point is\\ndetermined by the current stroke.
the x-coordinate
the y-coordinate
the z-coordinate (for WebGL mode)
\\npoint(30, 20);\\npoint(85, 20);\\npoint(85, 75);\\npoint(30, 75);\\n
Draw a quad. A quad is a quadrilateral, a four sided polygon. It is\\nsimilar to a rectangle, but the angles between its edges are not\\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\\nsets the first vertex and the subsequent pairs should proceed\\nclockwise or counter-clockwise around the defined shape.\\nz-arguments only work when quad() is used in WEBGL mode.
\\nquad(38, 31, 86, 20, 69, 63, 30, 76);\\n
the x-coordinate of the third point
the y-coordinate of the third point
the x-coordinate of the fourth point
the y-coordinate of the fourth point
the z-coordinate of the third point
the z-coordinate of the fourth point
Draws a rectangle to the screen. A rectangle is a four-sided shape with\\nevery angle at ninety degrees. By default, the first two parameters set\\nthe location of the upper-left corner, the third sets the width, and the\\nfourth sets the height. The way these parameters are interpreted, however,\\nmay be changed with the rectMode() function.\\n\\nThe fifth, sixth, seventh and eighth parameters, if specified,\\ndetermine corner radius for the top-left, top-right, lower-right and\\nlower-left corners, respectively. An omitted corner radius parameter is set\\nto the value of the previously specified radius value in the parameter list.
\\n// Draw a rectangle at location (30, 20) with a width and height of 55.\\nrect(30, 20, 55, 55);\\n
\\n// Draw a rectangle with rounded corners, each having a radius of 20.\\nrect(30, 20, 55, 55, 20);\\n
\\n// Draw a rectangle with rounded corners having the following radii:\\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\\nrect(30, 20, 55, 55, 20, 15, 10, 5);\\n
x-coordinate of the rectangle.
y-coordinate of the rectangle.
width of the rectangle.
height of the rectangle.
optional radius of top-left corner.
optional radius of top-right corner.
optional radius of bottom-right corner.
optional radius of bottom-left corner.
number of segments in the x-direction (for WebGL mode)
number of segments in the y-direction (for WebGL mode)
Draws a square to the screen. A square is a four-sided shape with\\nevery angle at ninety degrees, and equal side size.\\nThis 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.\\nBy default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square.\\nThe way these parameters are interpreted, however,\\nmay be changed with the rectMode() function.\\n\\nThe fourth, fifth, sixth and seventh parameters, if specified,\\ndetermine corner radius for the top-left, top-right, lower-right and\\nlower-left corners, respectively. An omitted corner radius parameter is set\\nto the value of the previously specified radius value in the parameter list.
x-coordinate of the square.
y-coordinate of the square.
side size of the square.
\\n// Draw a square at location (30, 20) with a side size of 55.\\nsquare(30, 20, 55);\\n
\\n// Draw a square with rounded corners, each having a radius of 20.\\nsquare(30, 20, 55, 20);\\n
\\n// Draw a square with rounded corners having the following radii:\\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\\nsquare(30, 20, 55, 20, 15, 10, 5);\\n
A triangle is a plane created by connecting three points. The first two\\narguments specify the first point, the middle two arguments specify the\\nsecond point, and the last two arguments specify the third point.
x-coordinate of the first point
y-coordinate of the first point
x-coordinate of the second point
y-coordinate of the second point
x-coordinate of the third point
y-coordinate of the third point
\\ntriangle(30, 75, 58, 20, 86, 75);\\n
Modifies the location from which ellipses are drawn by changing the way\\nin which parameters given to ellipse() are interpreted.\\n\\nThe default mode is ellipseMode(CENTER), which interprets the first two\\nparameters of ellipse() as the shape's center point, while the third and\\nfourth parameters are its width and height.\\n\\nellipseMode(RADIUS) also uses the first two parameters of ellipse() as\\nthe shape's center point, but uses the third and fourth parameters to\\nspecify half of the shapes's width and height.\\n\\nellipseMode(CORNER) interprets the first two parameters of ellipse() as\\nthe upper-left corner of the shape, while the third and fourth parameters\\nare its width and height.\\n\\nellipseMode(CORNERS) interprets the first two parameters of ellipse() as\\nthe location of one corner of the ellipse's bounding box, and the third\\nand fourth parameters as the location of the opposite corner.\\n\\nThe parameter must be written in ALL CAPS because Javascript is a\\ncase-sensitive language.
either CENTER, RADIUS, CORNER, or CORNERS
\\nellipseMode(RADIUS); // Set ellipseMode to RADIUS\\nfill(255); // Set fill to white\\nellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode\\n\\nellipseMode(CENTER); // Set ellipseMode to CENTER\\nfill(100); // Set fill to gray\\nellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode\\n
\\nellipseMode(CORNER); // Set ellipseMode is CORNER\\nfill(255); // Set fill to white\\nellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode\\n\\nellipseMode(CORNERS); // Set ellipseMode to CORNERS\\nfill(100); // Set fill to gray\\nellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode\\n
Draws all geometry with jagged (aliased) edges. Note that smooth() is\\nactive by default in 2D mode, so it is necessary to call noSmooth() to disable\\nsmoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled\\nby default, so it is necessary to call smooth() if you would like\\nsmooth (antialiased) edges on your geometry.
\\nbackground(0);\\nnoStroke();\\nsmooth();\\nellipse(30, 48, 36, 36);\\nnoSmooth();\\nellipse(70, 48, 36, 36);\\n
Modifies the location from which rectangles are drawn by changing the way\\nin which parameters given to rect() are interpreted.\\n\\nThe default mode is rectMode(CORNER), which interprets the first two\\nparameters of rect() as the upper-left corner of the shape, while the\\nthird and fourth parameters are its width and height.\\n\\nrectMode(CORNERS) interprets the first two parameters of rect() as the\\nlocation of one corner, and the third and fourth parameters as the\\nlocation of the opposite corner.\\n\\nrectMode(CENTER) interprets the first two parameters of rect() as the\\nshape's center point, while the third and fourth parameters are its\\nwidth and height.\\n\\nrectMode(RADIUS) also uses the first two parameters of rect() as the\\nshape's center point, but uses the third and fourth parameters to specify\\nhalf of the shapes's width and height.\\n\\nThe parameter must be written in ALL CAPS because Javascript is a\\ncase-sensitive language.
either CORNER, CORNERS, CENTER, or RADIUS
\\nrectMode(CORNER); // Default rectMode is CORNER\\nfill(255); // Set fill to white\\nrect(25, 25, 50, 50); // Draw white rect using CORNER mode\\n\\nrectMode(CORNERS); // Set rectMode to CORNERS\\nfill(100); // Set fill to gray\\nrect(25, 25, 50, 50); // Draw gray rect using CORNERS mode\\n
\\nrectMode(RADIUS); // Set rectMode to RADIUS\\nfill(255); // Set fill to white\\nrect(50, 50, 30, 30); // Draw white rect using RADIUS mode\\n\\nrectMode(CENTER); // Set rectMode to CENTER\\nfill(100); // Set fill to gray\\nrect(50, 50, 30, 30); // Draw gray rect using CENTER mode\\n
Draws all geometry with smooth (anti-aliased) edges. smooth() will also\\nimprove image quality of resized images. Note that smooth() is active by\\ndefault in 2D mode; noSmooth() can be used to disable smoothing of geometry,\\nimages, and fonts. In 3D mode, noSmooth() is enabled\\nby default, so it is necessary to call smooth() if you would like\\nsmooth (antialiased) edges on your geometry.
Sets the style for rendering line endings. These ends are either squared,\\nextended, or rounded, each of which specified with the corresponding\\nparameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.
either SQUARE, PROJECT, or ROUND
\\nstrokeWeight(12.0);\\nstrokeCap(ROUND);\\nline(20, 30, 80, 30);\\nstrokeCap(SQUARE);\\nline(20, 50, 80, 50);\\nstrokeCap(PROJECT);\\nline(20, 70, 80, 70);\\n
Sets the style of the joints which connect line segments. These joints\\nare either mitered, beveled, or rounded and specified with the\\ncorresponding parameters MITER, BEVEL, and ROUND. The default joint is\\nMITER.
either MITER, BEVEL, ROUND
\\nnoFill();\\nstrokeWeight(10.0);\\nstrokeJoin(MITER);\\nbeginShape();\\nvertex(35, 20);\\nvertex(65, 50);\\nvertex(35, 80);\\nendShape();\\n
\\nnoFill();\\nstrokeWeight(10.0);\\nstrokeJoin(BEVEL);\\nbeginShape();\\nvertex(35, 20);\\nvertex(65, 50);\\nvertex(35, 80);\\nendShape();\\n
\\nnoFill();\\nstrokeWeight(10.0);\\nstrokeJoin(ROUND);\\nbeginShape();\\nvertex(35, 20);\\nvertex(65, 50);\\nvertex(35, 80);\\nendShape();\\n
Sets the width of the stroke used for lines, points, and the border\\naround shapes. All widths are set in units of pixels.
the weight (in pixels) of the stroke
\\nstrokeWeight(1); // Default\\nline(20, 20, 80, 20);\\nstrokeWeight(4); // Thicker\\nline(20, 40, 80, 40);\\nstrokeWeight(10); // Beastly\\nline(20, 70, 80, 70);\\n
Draws a cubic Bezier curve on the screen. These curves are defined by a\\nseries of anchor and control points. The first two parameters specify\\nthe first anchor point and the last two parameters specify the other\\nanchor point, which become the first and last points on the curve. The\\nmiddle parameters specify the two control points which define the shape\\nof the curve. Approximately speaking, control points "pull" the curve\\ntowards them.Bezier curves were developed by French\\nautomotive engineer Pierre Bezier, and are commonly used in computer\\ngraphics to define gently sloping curves. See also curve().
\\nnoFill();\\nstroke(255, 102, 0);\\nline(85, 20, 10, 10);\\nline(90, 90, 15, 80);\\nstroke(0, 0, 0);\\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\\n
\\nbackground(0, 0, 0);\\nnoFill();\\nstroke(255);\\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\\n
x-coordinate for the first anchor point
y-coordinate for the first anchor point
x-coordinate for the first control point
y-coordinate for the first control point
x-coordinate for the second control point
y-coordinate for the second control point
x-coordinate for the second anchor point
y-coordinate for the second anchor point
z-coordinate for the first anchor point
z-coordinate for the first control point
z-coordinate for the second control point
z-coordinate for the second anchor point
Sets the resolution at which Beziers display.
The default value is 20.
This function is only useful when using the WEBGL renderer\\nas the default canvas renderer does not use this information.
resolution of the curves
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n noFill();\\n\\n bezierDetail(5);\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n bezier(-40, -40, 0,\\n 90, -40, 0,\\n -90, 40, 0,\\n 40, 40, 0);\\n}\\n
Evaluates the Bezier at position t for points a, b, c, d.\\nThe parameters a and d are the first and last points\\non the curve, and b and c are the control points.\\nThe final parameter t varies between 0 and 1.\\nThis can be done once with the x coordinates and a second time\\nwith the y coordinates to get the location of a bezier curve at t.
coordinate of first point on the curve
coordinate of first control point
coordinate of second control point
coordinate of second point on the curve
value between 0 and 1
\\nnoFill();\\nlet x1 = 85,\\n x2 = 10,\\n x3 = 90,\\n x4 = 15;\\nlet y1 = 20,\\n y2 = 10,\\n y3 = 90,\\n y4 = 80;\\nbezier(x1, y1, x2, y2, x3, y3, x4, y4);\\nfill(255);\\nlet steps = 10;\\nfor (let i = 0; i <= steps; i++) {\\n let t = i / steps;\\n let x = bezierPoint(x1, x2, x3, x4, t);\\n let y = bezierPoint(y1, y2, y3, y4, t);\\n ellipse(x, y, 5, 5);\\n}\\n
Evaluates the tangent to the Bezier at position t for points a, b, c, d.\\nThe parameters a and d are the first and last points\\non the curve, and b and c are the control points.\\nThe final parameter t varies between 0 and 1.
\\nnoFill();\\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\\nlet steps = 6;\\nfill(255);\\nfor (let i = 0; i <= steps; i++) {\\n let t = i / steps;\\n // Get the location of the point\\n let x = bezierPoint(85, 10, 90, 15, t);\\n let y = bezierPoint(20, 10, 90, 80, t);\\n // Get the tangent points\\n let tx = bezierTangent(85, 10, 90, 15, t);\\n let ty = bezierTangent(20, 10, 90, 80, t);\\n // Calculate an angle from the tangent points\\n let a = atan2(ty, tx);\\n a += PI;\\n stroke(255, 102, 0);\\n line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);\\n // The following line of code makes a line\\n // inverse of the above line\\n //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);\\n stroke(0);\\n ellipse(x, y, 5, 5);\\n}\\n
\\nnoFill();\\nbezier(85, 20, 10, 10, 90, 90, 15, 80);\\nstroke(255, 102, 0);\\nlet steps = 16;\\nfor (let i = 0; i <= steps; i++) {\\n let t = i / steps;\\n let x = bezierPoint(85, 10, 90, 15, t);\\n let y = bezierPoint(20, 10, 90, 80, t);\\n let tx = bezierTangent(85, 10, 90, 15, t);\\n let ty = bezierTangent(20, 10, 90, 80, t);\\n let a = atan2(ty, tx);\\n a -= HALF_PI;\\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\\n}\\n
Draws a curved line on the screen between two points, given as the\\nmiddle four parameters. The first two parameters are a control point, as\\nif the curve came from this point even though it's not drawn. The last\\ntwo parameters similarly describe the other control point. \\nLonger curves can be created by putting a series of curve() functions\\ntogether or using curveVertex(). An additional function called\\ncurveTightness() provides control for the visual quality of the curve.\\nThe curve() function is an implementation of Catmull-Rom splines.
\\nnoFill();\\nstroke(255, 102, 0);\\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\\nstroke(0);\\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\\nstroke(255, 102, 0);\\ncurve(73, 24, 73, 61, 15, 65, 15, 65);\\n
\\n// Define the curve points as JavaScript objects\\nlet p1 = { x: 5, y: 26 },\\n p2 = { x: 73, y: 24 };\\nlet p3 = { x: 73, y: 61 },\\n p4 = { x: 15, y: 65 };\\nnoFill();\\nstroke(255, 102, 0);\\ncurve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);\\nstroke(0);\\ncurve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);\\nstroke(255, 102, 0);\\ncurve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);\\n
\\nnoFill();\\nstroke(255, 102, 0);\\ncurve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);\\nstroke(0);\\ncurve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);\\nstroke(255, 102, 0);\\ncurve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);\\n
x-coordinate for the beginning control point
y-coordinate for the beginning control point
x-coordinate for the first point
y-coordinate for the first point
x-coordinate for the second point
y-coordinate for the second point
x-coordinate for the ending control point
y-coordinate for the ending control point
z-coordinate for the beginning control point
z-coordinate for the first point
z-coordinate for the second point
z-coordinate for the ending control point
Sets the resolution at which curves display.
The default value is 20 while the minimum value is 3.
This function is only useful when using the WEBGL renderer\\nas the default canvas renderer does not use this\\ninformation.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n\\n curveDetail(5);\\n}\\nfunction draw() {\\n background(200);\\n\\n curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);\\n}\\n
Modifies the quality of forms created with curve() and curveVertex().\\nThe parameter tightness determines how the curve fits to the vertex\\npoints. The value 0.0 is the default value for tightness (this value\\ndefines the curves to be Catmull-Rom splines) and the value 1.0 connects\\nall the points with straight lines. Values within the range -5.0 and 5.0\\nwill deform the curves but will leave them recognizable and as values\\nincrease in magnitude, they will continue to deform.
amount of deformation from the original vertices
\\n// Move the mouse left and right to see the curve change\\n\\nfunction setup() {\\n createCanvas(100, 100);\\n noFill();\\n}\\n\\nfunction draw() {\\n background(204);\\n let t = map(mouseX, 0, width, -5, 5);\\n curveTightness(t);\\n beginShape();\\n curveVertex(10, 26);\\n curveVertex(10, 26);\\n curveVertex(83, 24);\\n curveVertex(83, 61);\\n curveVertex(25, 65);\\n curveVertex(25, 65);\\n endShape();\\n}\\n
Evaluates the curve at position t for points a, b, c, d.\\nThe parameter t varies between 0 and 1, a and d are control points\\nof the curve, and b and c are the start and end points of the curve.\\nThis can be done once with the x coordinates and a second time\\nwith the y coordinates to get the location of a curve at t.
coordinate of first control point of the curve
coordinate of first point
coordinate of second point
\\nnoFill();\\ncurve(5, 26, 5, 26, 73, 24, 73, 61);\\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\\nfill(255);\\nellipseMode(CENTER);\\nlet steps = 6;\\nfor (let i = 0; i <= steps; i++) {\\n let t = i / steps;\\n let x = curvePoint(5, 5, 73, 73, t);\\n let y = curvePoint(26, 26, 24, 61, t);\\n ellipse(x, y, 5, 5);\\n x = curvePoint(5, 73, 73, 15, t);\\n y = curvePoint(26, 24, 61, 65, t);\\n ellipse(x, y, 5, 5);\\n}\\n
Evaluates the tangent to the curve at position t for points a, b, c, d.\\nThe parameter t varies between 0 and 1, a and d are points on the curve,\\nand b and c are the control points.
\\nnoFill();\\ncurve(5, 26, 73, 24, 73, 61, 15, 65);\\nlet steps = 6;\\nfor (let i = 0; i <= steps; i++) {\\n let t = i / steps;\\n let x = curvePoint(5, 73, 73, 15, t);\\n let y = curvePoint(26, 24, 61, 65, t);\\n //ellipse(x, y, 5, 5);\\n let tx = curveTangent(5, 73, 73, 15, t);\\n let ty = curveTangent(26, 24, 61, 65, t);\\n let a = atan2(ty, tx);\\n a -= PI / 2.0;\\n line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\\n}\\n
Use the beginContour() and endContour() functions to create negative\\nshapes within shapes such as the center of the letter 'O'. beginContour()\\nbegins recording vertices for the shape and endContour() stops recording.\\nThe vertices that define a negative shape must "wind" in the opposite\\ndirection from the exterior shape. First draw vertices for the exterior\\nclockwise order, then for internal shapes, draw vertices\\nshape in counter-clockwise.\\n\\nThese functions can only be used within a beginShape()/endShape() pair and\\ntransformations such as translate(), rotate(), and scale() do not work\\nwithin a beginContour()/endContour() pair. It is also not possible to use\\nother shapes, such as ellipse() or rect() within.
\\ntranslate(50, 50);\\nstroke(255, 0, 0);\\nbeginShape();\\n// Exterior part of shape, clockwise winding\\nvertex(-40, -40);\\nvertex(40, -40);\\nvertex(40, 40);\\nvertex(-40, 40);\\n// Interior part of shape, counter-clockwise winding\\nbeginContour();\\nvertex(-20, -20);\\nvertex(-20, 20);\\nvertex(20, 20);\\nvertex(20, -20);\\nendContour();\\nendShape(CLOSE);\\n
Using the beginShape() and endShape() functions allow creating more\\ncomplex forms. beginShape() begins recording vertices for a shape and\\nendShape() stops recording. The value of the kind parameter tells it which\\ntypes of shapes to create from the provided vertices. With no mode\\nspecified, the shape can be any irregular polygon.\\n\\nThe parameters available for beginShape() are POINTS, LINES, TRIANGLES,\\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the\\nbeginShape() function, a series of vertex() commands must follow. To stop\\ndrawing the shape, call endShape(). Each shape will be outlined with the\\ncurrent stroke color and filled with the fill color.\\n\\nTransformations such as translate(), rotate(), and scale() do not work\\nwithin beginShape(). It is also not possible to use other shapes, such as\\nellipse() or rect() within beginShape().
either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\\n TRIANGLE_STRIP, QUADS, or QUAD_STRIP
\\nbeginShape();\\nvertex(30, 20);\\nvertex(85, 20);\\nvertex(85, 75);\\nvertex(30, 75);\\nendShape(CLOSE);\\n
\\nbeginShape(POINTS);\\nvertex(30, 20);\\nvertex(85, 20);\\nvertex(85, 75);\\nvertex(30, 75);\\nendShape();\\n
\\nbeginShape(LINES);\\nvertex(30, 20);\\nvertex(85, 20);\\nvertex(85, 75);\\nvertex(30, 75);\\nendShape();\\n
\\nnoFill();\\nbeginShape();\\nvertex(30, 20);\\nvertex(85, 20);\\nvertex(85, 75);\\nvertex(30, 75);\\nendShape();\\n
\\nnoFill();\\nbeginShape();\\nvertex(30, 20);\\nvertex(85, 20);\\nvertex(85, 75);\\nvertex(30, 75);\\nendShape(CLOSE);\\n
\\nbeginShape(TRIANGLES);\\nvertex(30, 75);\\nvertex(40, 20);\\nvertex(50, 75);\\nvertex(60, 20);\\nvertex(70, 75);\\nvertex(80, 20);\\nendShape();\\n
\\nbeginShape(TRIANGLE_STRIP);\\nvertex(30, 75);\\nvertex(40, 20);\\nvertex(50, 75);\\nvertex(60, 20);\\nvertex(70, 75);\\nvertex(80, 20);\\nvertex(90, 75);\\nendShape();\\n
\\nbeginShape(TRIANGLE_FAN);\\nvertex(57.5, 50);\\nvertex(57.5, 15);\\nvertex(92, 50);\\nvertex(57.5, 85);\\nvertex(22, 50);\\nvertex(57.5, 15);\\nendShape();\\n
\\nbeginShape(QUADS);\\nvertex(30, 20);\\nvertex(30, 75);\\nvertex(50, 75);\\nvertex(50, 20);\\nvertex(65, 20);\\nvertex(65, 75);\\nvertex(85, 75);\\nvertex(85, 20);\\nendShape();\\n
\\nbeginShape(QUAD_STRIP);\\nvertex(30, 20);\\nvertex(30, 75);\\nvertex(50, 20);\\nvertex(50, 75);\\nvertex(65, 20);\\nvertex(65, 75);\\nvertex(85, 20);\\nvertex(85, 75);\\nendShape();\\n
\\nbeginShape();\\nvertex(20, 20);\\nvertex(40, 20);\\nvertex(40, 40);\\nvertex(60, 40);\\nvertex(60, 60);\\nvertex(20, 60);\\nendShape(CLOSE);\\n
Specifies vertex coordinates for Bezier curves. Each call to\\nbezierVertex() defines the position of two control points and\\none anchor point of a Bezier curve, adding a new segment to a\\nline or shape. For WebGL mode bezierVertex() can be used in 2D\\nas well as 3D mode. 2D mode expects 6 parameters, while 3D mode\\nexpects 9 parameters (including z coordinates).\\n\\nThe first time bezierVertex() is used within a beginShape()\\ncall, it must be prefaced with a call to vertex() to set the first anchor\\npoint. This function must be used between beginShape() and endShape()\\nand only when there is no MODE or POINTS parameter specified to\\nbeginShape().
\\nnoFill();\\nbeginShape();\\nvertex(30, 20);\\nbezierVertex(80, 0, 80, 75, 30, 75);\\nendShape();\\n
\\nbeginShape();\\nvertex(30, 20);\\nbezierVertex(80, 0, 80, 75, 30, 75);\\nbezierVertex(50, 80, 60, 25, 30, 20);\\nendShape();\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n setAttributes('antialias', true);\\n}\\nfunction draw() {\\n orbitControl();\\n background(50);\\n strokeWeight(4);\\n stroke(255);\\n point(-25, 30);\\n point(25, 30);\\n point(25, -30);\\n point(-25, -30);\\n\\n strokeWeight(1);\\n noFill();\\n\\n beginShape();\\n vertex(-25, 30);\\n bezierVertex(25, 30, 25, -30, -25, -30);\\n endShape();\\n\\n beginShape();\\n vertex(-25, 30, 20);\\n bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);\\n endShape();\\n}\\n
x-coordinate for the anchor point
y-coordinate for the anchor point
z-coordinate for the first control point (for WebGL mode)
z-coordinate for the second control point (for WebGL mode)
z-coordinate for the anchor point (for WebGL mode)
Specifies vertex coordinates for curves. This function may only\\nbe used between beginShape() and endShape() and only when there\\nis no MODE parameter specified to beginShape().\\nFor WebGL mode curveVertex() can be used in 2D as well as 3D mode.\\n2D mode expects 2 parameters, while 3D mode expects 3 parameters.\\n\\nThe first and last points in a series of curveVertex() lines will be used to\\nguide the beginning and end of a the curve. A minimum of four\\npoints is required to draw a tiny curve between the second and\\nthird points. Adding a fifth point with curveVertex() will draw\\nthe curve between the second, third, and fourth points. The\\ncurveVertex() function is an implementation of Catmull-Rom\\nsplines.
\\nstrokeWeight(5);\\npoint(84, 91);\\npoint(68, 19);\\npoint(21, 17);\\npoint(32, 91);\\nstrokeWeight(1);\\n\\nnoFill();\\nbeginShape();\\ncurveVertex(84, 91);\\ncurveVertex(84, 91);\\ncurveVertex(68, 19);\\ncurveVertex(21, 17);\\ncurveVertex(32, 91);\\ncurveVertex(32, 91);\\nendShape();\\n
x-coordinate of the vertex
y-coordinate of the vertex
z-coordinate of the vertex (for WebGL mode)
The endShape() function is the companion to beginShape() and may only be\\ncalled after beginShape(). When endshape() is called, all of image data\\ndefined since the previous call to beginShape() is written into the image\\nbuffer. The constant CLOSE as the value for the MODE parameter to close\\nthe shape (to connect the beginning and the end).
use CLOSE to close the shape
\\nnoFill();\\n\\nbeginShape();\\nvertex(20, 20);\\nvertex(45, 20);\\nvertex(45, 80);\\nendShape(CLOSE);\\n\\nbeginShape();\\nvertex(50, 20);\\nvertex(75, 20);\\nvertex(75, 80);\\nendShape();\\n
Specifies vertex coordinates for quadratic Bezier curves. Each call to\\nquadraticVertex() defines the position of one control points and one\\nanchor point of a Bezier curve, adding a new segment to a line or shape.\\nThe first time quadraticVertex() is used within a beginShape() call, it\\nmust be prefaced with a call to vertex() to set the first anchor point.\\nFor WebGL mode quadraticVertex() can be used in 2D as well as 3D mode.\\n2D mode expects 4 parameters, while 3D mode expects 6 parameters\\n(including z coordinates).\\n\\nThis function must be used between beginShape() and endShape()\\nand only when there is no MODE or POINTS parameter specified to\\nbeginShape().
\\nstrokeWeight(5);\\npoint(20, 20);\\npoint(80, 20);\\npoint(50, 50);\\n\\nnoFill();\\nstrokeWeight(1);\\nbeginShape();\\nvertex(20, 20);\\nquadraticVertex(80, 20, 50, 50);\\nendShape();\\n
\\nstrokeWeight(5);\\npoint(20, 20);\\npoint(80, 20);\\npoint(50, 50);\\n\\npoint(20, 80);\\npoint(80, 80);\\npoint(80, 60);\\n\\nnoFill();\\nstrokeWeight(1);\\nbeginShape();\\nvertex(20, 20);\\nquadraticVertex(80, 20, 50, 50);\\nquadraticVertex(20, 80, 80, 80);\\nvertex(80, 60);\\nendShape();\\n
x-coordinate for the control point
y-coordinate for the control point
z-coordinate for the control point (for WebGL mode)
All shapes are constructed by connecting a series of vertices. vertex()\\nis used to specify the vertex coordinates for points, lines, triangles,\\nquads, and polygons. It is used exclusively within the beginShape() and\\nendShape() functions.
\\nstrokeWeight(3);\\nbeginShape(POINTS);\\nvertex(30, 20);\\nvertex(85, 20);\\nvertex(85, 75);\\nvertex(30, 75);\\nendShape();\\n
z-coordinate of the vertex
the vertex's texture u-coordinate
the vertex's texture v-coordinate
HALF_PI is a mathematical constant with the value\\n1.57079632679489661923. It is half the ratio of the\\ncircumference of a circle to its diameter. It is useful in\\ncombination with the trigonometric functions sin() and cos().
\\narc(50, 50, 80, 80, 0, HALF_PI);\\n
PI is a mathematical constant with the value\\n3.14159265358979323846. It is the ratio of the circumference\\nof a circle to its diameter. It is useful in combination with\\nthe trigonometric functions sin() and cos().
\\narc(50, 50, 80, 80, 0, PI);\\n
QUARTER_PI is a mathematical constant with the value 0.7853982.\\nIt is one quarter the ratio of the circumference of a circle to\\nits diameter. It is useful in combination with the trigonometric\\nfunctions sin() and cos().
\\narc(50, 50, 80, 80, 0, QUARTER_PI);\\n
TAU is an alias for TWO_PI, a mathematical constant with the\\nvalue 6.28318530717958647693. It is twice the ratio of the\\ncircumference of a circle to its diameter. It is useful in\\ncombination with the trigonometric functions sin() and cos().
\\narc(50, 50, 80, 80, 0, TAU);\\n
TWO_PI is a mathematical constant with the value\\n6.28318530717958647693. It is twice the ratio of the\\ncircumference of a circle to its diameter. It is useful in\\ncombination with the trigonometric functions sin() and cos().
\\narc(50, 50, 80, 80, 0, TWO_PI);\\n
Constant to be used with angleMode() function, to set the mode which\\np5.js interprates and calculates angles (either DEGREES or RADIANS).
\\nfunction setup() {\\n angleMode(DEGREES);\\n}\\n
Constant to be used with angleMode() function, to set the mode which\\np5.js interprates and calculates angles (either RADIANS or DEGREES).
\\nfunction setup() {\\n angleMode(RADIANS);\\n}\\n
AUTO allows us to automatically set the width or height of an element (but not both),\\nbased on the current height and width of the element. Only one parameter can\\nbe passed to the size function as AUTO, at a time.
The print() function writes to the console area of your browser.\\nThis function is often helpful for looking at the data a program is\\nproducing. This function creates a new line of text for each call to\\nthe function. Individual elements can be\\nseparated with quotes ("") and joined with the addition operator (+).
Note that calling print() without any arguments invokes the window.print()\\nfunction which opens the browser's print dialog. To print a blank line\\nto console you can write print('\\\\n').
any combination of Number, String, Object, Boolean,\\n Array to print
\\nlet x = 10;\\nprint('The value of x is ' + x);\\n// prints \\\"The value of x is 10\\\"\\n
The system variable frameCount contains the number of frames that have\\nbeen displayed since the program started. Inside setup() the value is 0,\\nafter the first iteration of draw it is 1, etc.
\\nfunction setup() {\\n frameRate(30);\\n textSize(30);\\n textAlign(CENTER);\\n}\\n\\nfunction draw() {\\n background(200);\\n text(frameCount, width / 2, height / 2);\\n}\\n
Confirms if the window a p5.js program is in is "focused," meaning that\\nthe sketch will accept mouse or keyboard input. This variable is\\n"true" if the window is focused and "false" if not.
\\n// To demonstrate, put two windows side by side.\\n// Click on the window that the p5 sketch isn't in!\\nfunction draw() {\\n background(200);\\n noStroke();\\n fill(0, 200, 0);\\n ellipse(25, 25, 50, 50);\\n\\n if (!focused) {\\n // or \\\"if (focused === false)\\\"\\n stroke(200, 0, 0);\\n line(0, 0, 100, 100);\\n line(100, 0, 0, 100);\\n }\\n}\\n
Sets the cursor to a predefined symbol or an image, or makes it visible\\nif already hidden. If you are trying to set an image as the cursor, the\\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\\nmust be less than the dimensions of the image.
Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\\n Native CSS properties: 'grab', 'progress', 'cell' etc.\\n External: path for cursor's images\\n (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\\n For more information on Native CSS cursors and url visit:\\n https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
the horizontal active spot of the cursor (must be less than 32)
the vertical active spot of the cursor (must be less than 32)
\\n// Move the mouse across the quadrants\\n// to see the cursor change\\nfunction draw() {\\n line(width / 2, 0, width / 2, height);\\n line(0, height / 2, width, height / 2);\\n if (mouseX < 50 && mouseY < 50) {\\n cursor(CROSS);\\n } else if (mouseX > 50 && mouseY < 50) {\\n cursor('progress');\\n } else if (mouseX > 50 && mouseY > 50) {\\n cursor('https://s3.amazonaws.com/mupublicdata/cursor.cur');\\n } else {\\n cursor('grab');\\n }\\n}\\n
Specifies the number of frames to be displayed every second. For example,\\nthe function call frameRate(30) will attempt to refresh 30 times a second.\\nIf the processor is not fast enough to maintain the specified rate, the\\nframe rate will not be achieved. Setting the frame rate within setup() is\\nrecommended. The default frame rate is based on the frame rate of the display\\n(here also called "refresh rate"), which is set to 60 frames per second on most\\ncomputers. A frame rate of 24 frames per second (usual for movies) or above\\nwill be enough for smooth animations\\nThis is the same as setFrameRate(val).\\n\\nCalling frameRate() with no arguments returns the current framerate. The\\ndraw function must run at least once before it will return a value. This\\nis the same as getFrameRate().\\n\\nCalling frameRate() with arguments that are not of the type numbers\\nor are non positive also returns current framerate.
\\nlet rectX = 0;\\nlet fr = 30; //starting FPS\\nlet clr;\\n\\nfunction setup() {\\n background(200);\\n frameRate(fr); // Attempt to refresh at starting FPS\\n clr = color(255, 0, 0);\\n}\\n\\nfunction draw() {\\n background(200);\\n rectX = rectX += 1; // Move Rectangle\\n\\n if (rectX >= width) {\\n // If you go off screen.\\n if (fr === 30) {\\n clr = color(0, 0, 255);\\n fr = 10;\\n frameRate(fr); // make frameRate 10 FPS\\n } else {\\n clr = color(255, 0, 0);\\n fr = 30;\\n frameRate(fr); // make frameRate 30 FPS\\n }\\n rectX = 0;\\n }\\n fill(clr);\\n rect(rectX, 40, 20, 20);\\n}\\n
number of frames to be displayed every second
Hides the cursor from view.
\\nfunction setup() {\\n noCursor();\\n}\\n\\nfunction draw() {\\n background(200);\\n ellipse(mouseX, mouseY, 10, 10);\\n}\\n
System variable that stores the width of the screen display according to The\\ndefault pixelDensity. This is used to run a\\nfull-screen program on any display size. To return actual screen size,\\nmultiply this by pixelDensity.
\\ncreateCanvas(displayWidth, displayHeight);\\n
System variable that stores the height of the screen display according to The\\ndefault pixelDensity. This is used to run a\\nfull-screen program on any display size. To return actual screen size,\\nmultiply this by pixelDensity.
System variable that stores the width of the inner window, it maps to\\nwindow.innerWidth.
\\ncreateCanvas(windowWidth, windowHeight);\\n
System variable that stores the height of the inner window, it maps to\\nwindow.innerHeight.
The windowResized() function is called once every time the browser window\\nis resized. This is a good place to resize the canvas or do any other\\nadjustments to accommodate the new window size.
\\nfunction setup() {\\n createCanvas(windowWidth, windowHeight);\\n}\\n\\nfunction draw() {\\n background(0, 100, 200);\\n}\\n\\nfunction windowResized() {\\n resizeCanvas(windowWidth, windowHeight);\\n}\\n
System variable that stores the width of the drawing canvas. This value\\nis set by the first parameter of the createCanvas() function.\\nFor example, the function call createCanvas(320, 240) sets the width\\nvariable to the value 320. The value of width defaults to 100 if\\ncreateCanvas() is not used in a program.
System variable that stores the height of the drawing canvas. This value\\nis set by the second parameter of the createCanvas() function. For\\nexample, the function call createCanvas(320, 240) sets the height\\nvariable to the value 240. The value of height defaults to 100 if\\ncreateCanvas() is not used in a program.
If argument is given, sets the sketch to fullscreen or not based on the\\nvalue of the argument. If no argument is given, returns the current\\nfullscreen state. Note that due to browser restrictions this can only\\nbe called on user input, for example, on mouse press like the example\\nbelow.
whether the sketch should be in fullscreen mode\\nor not
\\n// Clicking in the box toggles fullscreen on and off.\\nfunction setup() {\\n background(200);\\n}\\nfunction mousePressed() {\\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\\n let fs = fullscreen();\\n fullscreen(!fs);\\n }\\n}\\n
Sets the pixel scaling for high pixel density displays. By default\\npixel density is set to match display density, call pixelDensity(1)\\nto turn this off. Calling pixelDensity() with no arguments returns\\nthe current pixel density of the sketch.
\\nfunction setup() {\\n pixelDensity(1);\\n createCanvas(100, 100);\\n background(200);\\n ellipse(width / 2, height / 2, 50, 50);\\n}\\n
\\nfunction setup() {\\n pixelDensity(3.0);\\n createCanvas(100, 100);\\n background(200);\\n ellipse(width / 2, height / 2, 50, 50);\\n}\\n
whether or how much the sketch should scale
Returns the pixel density of the current display the sketch is running on.
\\nfunction setup() {\\n let density = displayDensity();\\n pixelDensity(density);\\n createCanvas(100, 100);\\n background(200);\\n ellipse(width / 2, height / 2, 50, 50);\\n}\\n
Gets the current URL.
\\nlet url;\\nlet x = 100;\\n\\nfunction setup() {\\n fill(0);\\n noStroke();\\n url = getURL();\\n}\\n\\nfunction draw() {\\n background(200);\\n text(url, x, height / 2);\\n x--;\\n}\\n
Gets the current URL path as an array.
\\nfunction setup() {\\n let urlPath = getURLPath();\\n for (let i = 0; i < urlPath.length; i++) {\\n text(urlPath[i], 10, i * 20 + 20);\\n }\\n}\\n
Gets the current URL params as an Object.
\\n// Example: http://p5js.org?year=2014&month=May&day=15\\n\\nfunction setup() {\\n let params = getURLParams();\\n text(params.day, 10, 20);\\n text(params.month, 10, 40);\\n text(params.year, 10, 60);\\n}\\n
Validates parameters\\nparam {String} func the name of the function\\nparam {Array} args user input arguments
example:\\n var a;\\n ellipse(10,10,a,5);\\nconsole ouput:\\n "It looks like ellipse received an empty variable in spot #2."
example:\\n ellipse(10,"foo",5,5);\\nconsole output:\\n "ellipse was expecting a number for parameter #1,\\n received "foo" instead."
Prints out all the colors in the color pallete with white text.\\nFor color blindness testing.
Called directly before setup(), the preload() function is used to handle\\nasynchronous loading of external files in a blocking way. If a preload\\nfunction is defined, setup() will wait until any load calls within have\\nfinished. Nothing besides load calls (loadImage, loadJSON, loadFont,\\nloadStrings, etc.) should be inside the preload function. If asynchronous\\nloading is preferred, the load methods can instead be called in setup()\\nor anywhere else with the use of a callback parameter.\\n\\nBy default the text "loading..." will be displayed. To make your own\\nloading page, include an HTML element with id "p5_loading" in your\\npage. More information here.
\\nlet img;\\nlet c;\\nfunction preload() {\\n // preload() runs once\\n img = loadImage('assets/laDefense.jpg');\\n}\\n\\nfunction setup() {\\n // setup() waits until preload() is done\\n img.loadPixels();\\n // get color of middle pixel\\n c = img.get(img.width / 2, img.height / 2);\\n}\\n\\nfunction draw() {\\n background(c);\\n image(img, 25, 25, 50, 50);\\n}\\n
The setup() function is called once when the program starts. It's used to\\ndefine initial environment properties such as screen size and background\\ncolor and to load media such as images and fonts as the program starts.\\nThere can only be one setup() function for each program and it shouldn't\\nbe called again after its initial execution.\\n\\nNote: Variables declared within setup() are not accessible within other\\nfunctions, including draw().
\\nlet a = 0;\\n\\nfunction setup() {\\n background(0);\\n noStroke();\\n fill(102);\\n}\\n\\nfunction draw() {\\n rect(a++ % width, 10, 2, 80);\\n}\\n
Called directly after setup(), the draw() function continuously executes\\nthe lines of code contained inside its block until the program is stopped\\nor noLoop() is called. Note if noLoop() is called in setup(), draw() will\\nstill be executed once before stopping. draw() is called automatically and\\nshould never be called explicitly.\\n\\nIt should always be controlled with noLoop(), redraw() and loop(). After\\nnoLoop() stops the code in draw() from executing, redraw() causes the\\ncode inside draw() to execute once, and loop() will cause the code\\ninside draw() to resume executing continuously.\\n\\nThe number of times draw() executes in each second may be controlled with\\nthe frameRate() function.\\n\\nThere can only be one draw() function for each sketch, and draw() must\\nexist if you want the code to run continuously, or to process events such\\nas mousePressed(). Sometimes, you might have an empty call to draw() in\\nyour program, as shown in the above example.\\n\\nIt is important to note that the drawing coordinate system will be reset\\nat the beginning of each draw() call. If any transformations are performed\\nwithin draw() (ex: scale, rotate, translate), their effects will be\\nundone at the beginning of draw(), so transformations will not accumulate\\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\\nremain in effect.
\\nlet yPos = 0;\\nfunction setup() {\\n // setup() runs once\\n frameRate(30);\\n}\\nfunction draw() {\\n // draw() loops forever, until stopped\\n background(204);\\n yPos = yPos - 1;\\n if (yPos < 0) {\\n yPos = height;\\n }\\n line(0, yPos, width, yPos);\\n}\\n
Removes the entire p5 sketch. This will remove the canvas and any\\nelements created by p5.js. It will also stop the draw loop and unbind\\nany properties or methods from the window global scope. It will\\nleave a variable p5 in case you wanted to create a new p5 sketch.\\nIf you like, you can set p5 = null to erase it. While all functions and\\nvariables and objects created by the p5 library will be removed, any\\nother global variables created by your code will remain.
\\nfunction draw() {\\n ellipse(50, 50, 10, 10);\\n}\\n\\nfunction mousePressed() {\\n remove(); // remove whole sketch on mouse press\\n}\\n
Allows for the friendly error system (FES) to be turned off when creating a sketch,\\nwhich can give a significant boost to performance when needed.\\nSee \\ndisabling the friendly error system.
\\np5.disableFriendlyErrors = true;\\n\\nfunction setup() {\\n createCanvas(100, 50);\\n}\\n
Underlying HTML element. All normal HTML methods can be called on this.
\\nfunction setup() {\\n let c = createCanvas(50, 50);\\n c.elt.style.border = '5px solid red';\\n}\\n\\nfunction draw() {\\n background(220);\\n}\\n
Attaches the element to the parent specified. A way of setting\\n the container for the element. Accepts either a string ID, DOM\\n node, or p5.Element. If no arguments given, parent node is returned.\\n For more ways to position the canvas, see the\\n \\n positioning the canvas wiki page.\\nAll above examples except for the first one require the inclusion of\\n the p5.dom library in your index.html. See the\\n using a library\\n section for information on how to include this library.
\\n // in the html file:\\n // <div id=\\\"myContainer\\\"></div>\\n// in the js file:\\n let cnv = createCanvas(100, 100);\\n cnv.parent('myContainer');\\n
\\n let div0 = createDiv('this is the parent');\\n let div1 = createDiv('this is the child');\\n div1.parent(div0); // use p5.Element\\n
\\n let div0 = createDiv('this is the parent');\\n div0.id('apples');\\n let div1 = createDiv('this is the child');\\n div1.parent('apples'); // use id\\n
\\n let elt = document.getElementById('myParentDiv');\\n let div1 = createDiv('this is the child');\\n div1.parent(elt); // use element from page\\n
the ID, DOM node, or p5.Element\\n of desired parent element
Sets the ID of the element. If no ID argument is passed in, it instead\\n returns the current ID of the element.\\n Note that only one element can have a particular id in a page.\\n The .class() function can be used\\n to identify multiple elements with the same class name.
\\n function setup() {\\n let cnv = createCanvas(100, 100);\\n // Assigns a CSS selector ID to\\n // the canvas element.\\n cnv.id('mycanvas');\\n }\\n
ID of the element
Adds given class to the element. If no class argument is passed in, it\\n instead returns a string containing the current class(es) of the element.
\\n function setup() {\\n let cnv = createCanvas(100, 100);\\n // Assigns a CSS selector class 'small'\\n // to the canvas element.\\n cnv.class('small');\\n }\\n
class to add
The .mousePressed() function is called once after every time a\\nmouse button is pressed over the element.\\nSome mobile browsers may also trigger this event on a touch screen,\\nif the user performs a quick tap.\\nThis can be used to attach element specific event listeners.
function to be fired when mouse is\\n pressed over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
false
\\nlet cnv;\\nlet d;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.mousePressed(changeGray); // attach listener for\\n // canvas click only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires with any click anywhere\\nfunction mousePressed() {\\n d = d + 10;\\n}\\n\\n// this function fires only when cnv is clicked\\nfunction changeGray() {\\n g = random(0, 255);\\n}\\n
The .doubleClicked() function is called once after every time a\\nmouse button is pressed twice over the element. This can be used to\\nattach element and action specific event listeners.
function to be fired when mouse is\\n double clicked over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.doubleClicked(changeGray); // attach listener for\\n // canvas double click only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires with any double click anywhere\\nfunction doubleClicked() {\\n d = d + 10;\\n}\\n\\n// this function fires only when cnv is double clicked\\nfunction changeGray() {\\n g = random(0, 255);\\n}\\n
The .mouseWheel() function is called once after every time a\\nmouse wheel is scrolled over the element. This can be used to\\nattach element specific event listeners.\\n\\nThe function accepts a callback function as argument which will be executed\\nwhen the wheel event is triggered on the element, the callback function is\\npassed one argument event. The event.deltaY property returns negative\\nvalues if the mouse wheel is rotated up or away from the user and positive\\nin the other direction. The event.deltaX does the same as event.deltaY\\nexcept it reads the horizontal wheel scroll of the mouse wheel.\\n\\nOn OS X with "natural" scrolling enabled, the event.deltaY values are\\nreversed.
wheel
event
event.deltaY
event.deltaX
function to be fired when mouse is\\n scrolled over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.mouseWheel(changeSize); // attach listener for\\n // activity on canvas only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires with mousewheel movement\\n// anywhere on screen\\nfunction mouseWheel() {\\n g = g + 10;\\n}\\n\\n// this function fires with mousewheel movement\\n// over canvas only\\nfunction changeSize(event) {\\n if (event.deltaY > 0) {\\n d = d + 10;\\n } else {\\n d = d - 10;\\n }\\n}\\n
The .mouseReleased() function is called once after every time a\\nmouse button is released over the element.\\nSome mobile browsers may also trigger this event on a touch screen,\\nif the user performs a quick tap.\\nThis can be used to attach element specific event listeners.
function to be fired when mouse is\\n released over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.mouseReleased(changeGray); // attach listener for\\n // activity on canvas only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires after the mouse has been\\n// released\\nfunction mouseReleased() {\\n d = d + 10;\\n}\\n\\n// this function fires after the mouse has been\\n// released while on canvas\\nfunction changeGray() {\\n g = random(0, 255);\\n}\\n
The .mouseClicked() function is called once after a mouse button is\\npressed and released over the element.\\nSome mobile browsers may also trigger this event on a touch screen,\\nif the user performs a quick tap.\\nThis can be used to attach element specific event listeners.
function to be fired when mouse is\\n clicked over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nlet g;\\n\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.mouseClicked(changeGray); // attach listener for\\n // activity on canvas only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires after the mouse has been\\n// clicked anywhere\\nfunction mouseClicked() {\\n d = d + 10;\\n}\\n\\n// this function fires after the mouse has been\\n// clicked on canvas\\nfunction changeGray() {\\n g = random(0, 255);\\n}\\n
The .mouseMoved() function is called once every time a\\nmouse moves over the element. This can be used to attach an\\nelement specific event listener.
function to be fired when a mouse moves\\n over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d = 30;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.mouseMoved(changeSize); // attach listener for\\n // activity on canvas only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n fill(200);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires when mouse moves anywhere on\\n// page\\nfunction mouseMoved() {\\n g = g + 5;\\n if (g > 255) {\\n g = 0;\\n }\\n}\\n\\n// this function fires when mouse moves over canvas\\nfunction changeSize() {\\n d = d + 2;\\n if (d > 100) {\\n d = 0;\\n }\\n}\\n
The .mouseOver() function is called once after every time a\\nmouse moves onto the element. This can be used to attach an\\nelement specific event listener.
function to be fired when a mouse moves\\n onto the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.mouseOver(changeGray);\\n d = 10;\\n}\\n\\nfunction draw() {\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\nfunction changeGray() {\\n d = d + 10;\\n if (d > 100) {\\n d = 0;\\n }\\n}\\n
The .mouseOut() function is called once after every time a\\nmouse moves off the element. This can be used to attach an\\nelement specific event listener.
function to be fired when a mouse\\n moves off of an element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.mouseOut(changeGray);\\n d = 10;\\n}\\n\\nfunction draw() {\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\nfunction changeGray() {\\n d = d + 10;\\n if (d > 100) {\\n d = 0;\\n }\\n}\\n
The .touchStarted() function is called once after every time a touch is\\nregistered. This can be used to attach element specific event listeners.
function to be fired when a touch\\n starts over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.touchStarted(changeGray); // attach listener for\\n // canvas click only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires with any touch anywhere\\nfunction touchStarted() {\\n d = d + 10;\\n}\\n\\n// this function fires only when cnv is clicked\\nfunction changeGray() {\\n g = random(0, 255);\\n}\\n
The .touchMoved() function is called once after every time a touch move is\\nregistered. This can be used to attach element specific event listeners.
function to be fired when a touch moves over\\n the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.touchMoved(changeGray); // attach listener for\\n // canvas click only\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n}\\n\\n// this function fires only when cnv is clicked\\nfunction changeGray() {\\n g = random(0, 255);\\n}\\n
The .touchEnded() function is called once after every time a touch is\\nregistered. This can be used to attach element specific event listeners.
function to be fired when a touch ends\\n over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nlet cnv;\\nlet d;\\nlet g;\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n cnv.touchEnded(changeGray); // attach listener for\\n // canvas click only\\n d = 10;\\n g = 100;\\n}\\n\\nfunction draw() {\\n background(g);\\n ellipse(width / 2, height / 2, d, d);\\n}\\n\\n// this function fires with any touch anywhere\\nfunction touchEnded() {\\n d = d + 10;\\n}\\n\\n// this function fires only when cnv is clicked\\nfunction changeGray() {\\n g = random(0, 255);\\n}\\n
The .dragOver() function is called once after every time a\\nfile is dragged over the element. This can be used to attach an\\nelement specific event listener.
function to be fired when a file is\\n dragged over the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\n// To test this sketch, simply drag a\\n// file over the canvas\\nfunction setup() {\\n let c = createCanvas(100, 100);\\n background(200);\\n textAlign(CENTER);\\n text('Drag file', width / 2, height / 2);\\n c.dragOver(dragOverCallback);\\n}\\n\\n// This function will be called whenever\\n// a file is dragged over the canvas\\nfunction dragOverCallback() {\\n background(240);\\n text('Dragged over', width / 2, height / 2);\\n}\\n
The .dragLeave() function is called once after every time a\\ndragged file leaves the element area. This can be used to attach an\\nelement specific event listener.
function to be fired when a file is\\n dragged off the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\n// To test this sketch, simply drag a file\\n// over and then out of the canvas area\\nfunction setup() {\\n let c = createCanvas(100, 100);\\n background(200);\\n textAlign(CENTER);\\n text('Drag file', width / 2, height / 2);\\n c.dragLeave(dragLeaveCallback);\\n}\\n\\n// This function will be called whenever\\n// a file is dragged out of the canvas\\nfunction dragLeaveCallback() {\\n background(240);\\n text('Dragged off', width / 2, height / 2);\\n}\\n
Helper fxn for sharing pixel methods
Resets certain values such as those modified by functions in the Transform category\\nand in the Lights category that are not automatically reset\\nwith graphics buffer objects. Calling this in draw() will copy the behavior\\nof the standard canvas.
\\nlet pg;\\nfunction setup() {\\n createCanvas(100, 100);\\n background(0);\\n pg = createGraphics(50, 100);\\n pg.fill(0);\\n frameRate(5);\\n}\\nfunction draw() {\\n image(pg, width / 2, 0);\\n pg.background(255);\\n // p5.Graphics object behave a bit differently in some cases\\n // The normal canvas on the left resets the translate\\n // with every loop through draw()\\n // the graphics object on the right doesn't automatically reset\\n // so translate() is additive and it moves down the screen\\n rect(0, 0, width / 2, 5);\\n pg.rect(0, 0, width / 2, 5);\\n translate(0, 5, 0);\\n pg.translate(0, 5, 0);\\n}\\nfunction mouseClicked() {\\n // if you click you will see that\\n // reset() resets the translate back to the initial state\\n // of the Graphics object\\n pg.reset();\\n}\\n
Removes a Graphics object from the page and frees any resources\\nassociated with it.
\\nlet bg;\\nfunction setup() {\\n bg = createCanvas(100, 100);\\n bg.background(0);\\n image(bg, 0, 0);\\n bg.remove();\\n}\\n
\\nlet bg;\\nfunction setup() {\\n pixelDensity(1);\\n createCanvas(100, 100);\\n stroke(255);\\n fill(0);\\n\\n // create and draw the background image\\n bg = createGraphics(100, 100);\\n bg.background(200);\\n bg.ellipse(50, 50, 80, 80);\\n}\\nfunction draw() {\\n let t = millis() / 1000;\\n // draw the background\\n if (bg) {\\n image(bg, frameCount % 100, 0);\\n image(bg, frameCount % 100 - 100, 0);\\n }\\n // draw the foreground\\n let p = p5.Vector.fromAngle(t, 35).add(50, 50);\\n ellipse(p.x, p.y, 30);\\n}\\nfunction mouseClicked() {\\n // remove the background\\n if (bg) {\\n bg.remove();\\n bg = null;\\n }\\n}\\n
Resize our canvas element.
Helper fxn to check font type (system or otf)
Helper fxn to measure ascent and descent.\\nAdapted from http://stackoverflow.com/a/25355178
p5.Renderer2D\\nThe 2D graphics canvas renderer class.\\nextends p5.Renderer
Generate a cubic Bezier representing an arc on the unit circle of total\\nangle size radians, beginning start radians above the x-axis. Up to\\nfour of these curves are combined to make a full arc.
size
start
See www.joecridge.me/bezier.pdf for an explanation of the method.
Creates a canvas element in the document, and sets the dimensions of it\\nin pixels. This method should be called only once at the start of setup.\\nCalling createCanvas more than once in a sketch will result in very\\nunpredictable behavior. If you want more than one drawing canvas\\nyou could use createGraphics (hidden by default but it can be shown).\\n\\nThe system variables width and height are set by the parameters passed\\nto this function. If createCanvas() is not used, the window will be\\ngiven a default size of 100x100 pixels.\\n\\nFor more ways to position the canvas, see the\\n\\npositioning the canvas wiki page.
width of the canvas
height of the canvas
either P2D or WEBGL
\\nfunction setup() {\\n createCanvas(100, 50);\\n background(153);\\n line(0, 0, width, height);\\n}\\n
Resizes the canvas to given width and height. The canvas will be cleared\\nand draw will be called immediately, allowing the sketch to re-render itself\\nin the resized canvas.
don't redraw the canvas immediately
Removes the default canvas for a p5 sketch that doesn't\\nrequire a canvas
\\nfunction setup() {\\n noCanvas();\\n}\\n
Creates and returns a new p5.Renderer object. Use this class if you need\\nto draw into an off-screen graphics buffer. The two parameters define the\\nwidth and height in pixels.
width of the offscreen graphics buffer
height of the offscreen graphics buffer
either P2D or WEBGL\\nundefined defaults to p2d
\\nlet pg;\\nfunction setup() {\\n createCanvas(100, 100);\\n pg = createGraphics(100, 100);\\n}\\nfunction draw() {\\n background(200);\\n pg.background(100);\\n pg.noStroke();\\n pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);\\n image(pg, 50, 50);\\n image(pg, 0, 0, 50, 50);\\n}\\n
Blends the pixels in the display window according to the defined mode.\\nThere is a choice of the following modes to blend the source pixels (A)\\nwith the ones of pixels already in the display window (B):
BLEND
ADD
DARKEST
LIGHTEST
DIFFERENCE
EXCLUSION
MULTIPLY
SCREEN
REPLACE
OVERLAY
SCREEN\\n
HARD_LIGHT
SOFT_LIGHT
DODGE
BURN
SUBTRACT
blend mode to set for canvas.\\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\\n SOFT_LIGHT, DODGE, BURN, ADD, or SUBTRACT
\\nblendMode(LIGHTEST);\\nstrokeWeight(30);\\nstroke(80, 150, 255);\\nline(25, 25, 75, 75);\\nstroke(255, 50, 50);\\nline(75, 25, 25, 75);\\n
\\nblendMode(MULTIPLY);\\nstrokeWeight(30);\\nstroke(80, 150, 255);\\nline(25, 25, 75, 75);\\nstroke(255, 50, 50);\\nline(75, 25, 25, 75);\\n
shim for Uint8ClampedArray.slice\\n(allows arrayCopy to work with pixels[])\\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\\nEnumerable set to false to protect for...in from\\nUint8ClampedArray.prototype pollution.
this is implementation of Object.assign() which is unavailable in\\nIE11 and (non-Chrome) Android browsers.\\nThe assign() method is used to copy the values of all enumerable\\nown properties from one or more source objects to a target object.\\nIt will return the target object.\\nModified from https://github.com/ljharb/object.assign
Stops p5.js from continuously executing the code within draw().\\nIf loop() is called, the code in draw() begins to run continuously again.\\nIf using noLoop() in setup(), it should be the last line inside the block.\\n\\nWhen noLoop() is used, it's not possible to manipulate or access the\\nscreen inside event handling functions such as mousePressed() or\\nkeyPressed(). Instead, use those functions to call redraw() or loop(),\\nwhich will run draw(), which can update the screen properly. This means\\nthat when noLoop() has been called, no drawing can happen, and functions\\nlike saveFrame() or loadPixels() may not be used.\\n\\nNote that if the sketch is resized, redraw() will be called to update\\nthe sketch, even after noLoop() has been specified. Otherwise, the sketch\\nwould enter an odd state until loop() was called.
\\nfunction setup() {\\n createCanvas(100, 100);\\n background(200);\\n noLoop();\\n}\\n\\nfunction draw() {\\n line(10, 10, 90, 90);\\n}\\n
\\nlet x = 0;\\nfunction setup() {\\n createCanvas(100, 100);\\n}\\n\\nfunction draw() {\\n background(204);\\n x = x + 0.1;\\n if (x > width) {\\n x = 0;\\n }\\n line(x, 0, x, height);\\n}\\n\\nfunction mousePressed() {\\n noLoop();\\n}\\n\\nfunction mouseReleased() {\\n loop();\\n}\\n
By default, p5.js loops through draw() continuously, executing the code\\nwithin it. However, the draw() loop may be stopped by calling noLoop().\\nIn that case, the draw() loop can be resumed with loop().
Avoid calling loop() from inside setup().
\\nlet x = 0;\\nfunction setup() {\\n createCanvas(100, 100);\\n noLoop();\\n}\\n\\nfunction draw() {\\n background(204);\\n x = x + 0.1;\\n if (x > width) {\\n x = 0;\\n }\\n line(x, 0, x, height);\\n}\\n\\nfunction mousePressed() {\\n loop();\\n}\\n\\nfunction mouseReleased() {\\n noLoop();\\n}\\n
The push() function saves the current drawing style settings and\\ntransformations, while pop() restores these settings. Note that these\\nfunctions are always used together. They allow you to change the style\\nand transformation settings and later return to what you had. When a new\\nstate is started with push(), it builds on the current style and transform\\ninformation. The push() and pop() functions can be embedded to provide\\nmore control. (See the second example for a demonstration.)\\n\\npush() stores information related to the current transformation state\\nand style settings controlled by the following functions: fill(),\\nstroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),\\nimageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),\\ntextFont(), textSize(), textLeading().\\n\\nIn WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(),\\npointLight(), texture(), specularMaterial(), shininess(), normalMaterial()\\nand shader().
\\nellipse(0, 50, 33, 33); // Left circle\\n\\npush(); // Start a new drawing state\\nstrokeWeight(10);\\nfill(204, 153, 0);\\ntranslate(50, 0);\\nellipse(0, 50, 33, 33); // Middle circle\\npop(); // Restore original state\\n\\nellipse(100, 50, 33, 33); // Right circle\\n
\\nellipse(0, 50, 33, 33); // Left circle\\n\\npush(); // Start a new drawing state\\nstrokeWeight(10);\\nfill(204, 153, 0);\\nellipse(33, 50, 33, 33); // Left-middle circle\\n\\npush(); // Start another new drawing state\\nstroke(0, 102, 153);\\nellipse(66, 50, 33, 33); // Right-middle circle\\npop(); // Restore previous state\\n\\npop(); // Restore original state\\n\\nellipse(100, 50, 33, 33); // Right circle\\n
\\nellipse(0, 50, 33, 33); // Left circle\\n\\npush(); // Start a new drawing state\\ntranslate(50, 0);\\nstrokeWeight(10);\\nfill(204, 153, 0);\\nellipse(0, 50, 33, 33); // Middle circle\\npop(); // Restore original state\\n\\nellipse(100, 50, 33, 33); // Right circle\\n
Executes the code within draw() one time. This functions allows the\\n program to update the display window only when necessary, for example\\n when an event registered by mousePressed() or keyPressed() occurs.\\n \\n In structuring a program, it only makes sense to call redraw() within\\n events such as mousePressed(). This is because redraw() does not run\\n draw() immediately (it only sets a flag that indicates an update is\\n needed).\\n \\n The redraw() function does not work properly when called inside draw().\\n To enable/disable animations, use loop() and noLoop().\\n \\n In addition you can set the number of redraws per method call. Just\\n add an integer as single parameter for the number of redraws.
Redraw for n-times. The default value is 1.
\\n let x = 0;\\nfunction setup() {\\n createCanvas(100, 100);\\n noLoop();\\n }\\nfunction draw() {\\n background(204);\\n line(x, 0, x, height);\\n }\\nfunction mousePressed() {\\n x += 1;\\n redraw();\\n }\\n
\\n let x = 0;\\nfunction setup() {\\n createCanvas(100, 100);\\n noLoop();\\n }\\nfunction draw() {\\n background(204);\\n x += 1;\\n line(x, 0, x, height);\\n }\\nfunction mousePressed() {\\n redraw(5);\\n }\\n
Multiplies the current matrix by the one specified through the parameters.\\nThis is a powerful operation that can perform the equivalent of translate,\\nscale, shear and rotate all at once. You can learn more about transformation\\nmatrices on \\nWikipedia.
The naming of the arguments here follows the naming of the \\nWHATWG specification and corresponds to a\\ntransformation matrix of the\\nform:
\\n\\n
numbers which define the 2x3 matrix to be multiplied
\\nfunction setup() {\\n frameRate(10);\\n rectMode(CENTER);\\n}\\n\\nfunction draw() {\\n var step = frameCount % 20;\\n background(200);\\n // Equivalent to translate(x, y);\\n applyMatrix(1, 0, 0, 1, 40 + step, 50);\\n rect(0, 0, 50, 50);\\n}\\n
\\nfunction setup() {\\n frameRate(10);\\n rectMode(CENTER);\\n}\\n\\nfunction draw() {\\n var step = frameCount % 20;\\n background(200);\\n translate(50, 50);\\n // Equivalent to scale(x, y);\\n applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);\\n rect(0, 0, 50, 50);\\n}\\n
\\nfunction setup() {\\n frameRate(10);\\n rectMode(CENTER);\\n}\\n\\nfunction draw() {\\n var step = frameCount % 20;\\n var angle = map(step, 0, 20, 0, TWO_PI);\\n var cos_a = cos(angle);\\n var sin_a = sin(angle);\\n background(200);\\n translate(50, 50);\\n // Equivalent to rotate(angle);\\n applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);\\n rect(0, 0, 50, 50);\\n}\\n
\\nfunction setup() {\\n frameRate(10);\\n rectMode(CENTER);\\n}\\n\\nfunction draw() {\\n var step = frameCount % 20;\\n var angle = map(step, 0, 20, -PI / 4, PI / 4);\\n background(200);\\n translate(50, 50);\\n // equivalent to shearX(angle);\\n var shear_factor = 1 / tan(PI / 2 - angle);\\n applyMatrix(1, 0, shear_factor, 1, 0, 0);\\n rect(0, 0, 50, 50);\\n}\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n noFill();\\n}\\n\\nfunction draw() {\\n background(200);\\n rotateY(PI / 6);\\n stroke(153);\\n box(35);\\n var rad = millis() / 1000;\\n // Set rotation angles\\n var ct = cos(rad);\\n var st = sin(rad);\\n // Matrix for rotation around the Y axis\\n applyMatrix( ct, 0.0, st, 0.0,\\n 0.0, 1.0, 0.0, 0.0,\\n -st, 0.0, ct, 0.0,\\n 0.0, 0.0, 0.0, 1.0);\\n stroke(255);\\n box(50);\\n}\\n
Replaces the current matrix with the identity matrix.
\\ntranslate(50, 50);\\napplyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);\\nrect(0, 0, 20, 20);\\n// Note that the translate is also reset.\\nresetMatrix();\\nrect(0, 0, 20, 20);\\n
Rotates a shape the amount specified by the angle parameter. This\\nfunction accounts for angleMode, so angles can be entered in either\\nRADIANS or DEGREES.\\n\\nObjects are always rotated around their relative position to the\\norigin and positive numbers rotate objects in a clockwise direction.\\nTransformations apply to everything that happens after and subsequent\\ncalls to the function accumulates the effect. For example, calling\\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\\nAll tranformations are reset when draw() begins again.\\n\\nTechnically, rotate() multiplies the current transformation matrix\\nby a rotation matrix. This function can be further controlled by\\nthe push() and pop().
the angle of rotation, specified in radians\\n or degrees, depending on current angleMode
(in 3d) the axis to rotate around
\\ntranslate(width / 2, height / 2);\\nrotate(PI / 3.0);\\nrect(-26, -26, 52, 52);\\n
Rotates around X axis.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(255);\\n rotateX(millis() / 1000);\\n box();\\n}\\n
Rotates around Y axis.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(255);\\n rotateY(millis() / 1000);\\n box();\\n}\\n
Rotates around Z axis. Webgl mode only.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(255);\\n rotateZ(millis() / 1000);\\n box();\\n}\\n
Increases or decreases the size of a shape by expanding and contracting\\nvertices. Objects always scale from their relative origin to the\\ncoordinate system. Scale values are specified as decimal percentages.\\nFor example, the function call scale(2.0) increases the dimension of a\\nshape by 200%.\\n\\nTransformations apply to everything that happens after and subsequent\\ncalls to the function multiply the effect. For example, calling scale(2.0)\\nand then scale(1.5) is the same as scale(3.0). If scale() is called\\nwithin draw(), the transformation is reset when the loop begins again.\\n\\nUsing this function with the z parameter is only available in WEBGL mode.\\nThis function can be further controlled with push() and pop().
\\nrect(30, 20, 50, 50);\\nscale(0.5);\\nrect(30, 20, 50, 50);\\n
\\nrect(30, 20, 50, 50);\\nscale(0.5, 1.3);\\nrect(30, 20, 50, 50);\\n
percent to scale the object, or percentage to\\n scale the object in the x-axis if multiple arguments\\n are given
percent to scale the object in the y-axis
percent to scale the object in the z-axis (webgl only)
per-axis percents to scale the object
Shears a shape around the x-axis the amount specified by the angle\\nparameter. Angles should be specified in the current angleMode.\\nObjects are always sheared around their relative position to the origin\\nand positive numbers shear objects in a clockwise direction.\\n\\nTransformations apply to everything that happens after and subsequent\\ncalls to the function accumulates the effect. For example, calling\\nshearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).\\nIf shearX() is called within the draw(), the transformation is reset when\\nthe loop begins again.\\n\\nTechnically, shearX() multiplies the current transformation matrix by a\\nrotation matrix. This function can be further controlled by the\\npush() and pop() functions.
angle of shear specified in radians or degrees,\\n depending on current angleMode
\\ntranslate(width / 4, height / 4);\\nshearX(PI / 4.0);\\nrect(0, 0, 30, 30);\\n
Shears a shape around the y-axis the amount specified by the angle\\nparameter. Angles should be specified in the current angleMode. Objects\\nare always sheared around their relative position to the origin and\\npositive numbers shear objects in a clockwise direction.\\n\\nTransformations apply to everything that happens after and subsequent\\ncalls to the function accumulates the effect. For example, calling\\nshearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If\\nshearY() is called within the draw(), the transformation is reset when\\nthe loop begins again.\\n\\nTechnically, shearY() multiplies the current transformation matrix by a\\nrotation matrix. This function can be further controlled by the\\npush() and pop() functions.
\\ntranslate(width / 4, height / 4);\\nshearY(PI / 4.0);\\nrect(0, 0, 30, 30);\\n
Specifies an amount to displace objects within the display window.\\nThe x parameter specifies left/right translation, the y parameter\\nspecifies up/down translation.\\n\\nTransformations are cumulative and apply to everything that happens after\\nand subsequent calls to the function accumulates the effect. For example,\\ncalling translate(50, 0) and then translate(20, 0) is the same as\\ntranslate(70, 0). If translate() is called within draw(), the\\ntransformation is reset when the loop begins again. This function can be\\nfurther controlled by using push() and pop().
\\ntranslate(30, 20);\\nrect(0, 0, 55, 55);\\n
\\nrect(0, 0, 55, 55); // Draw rect at original 0,0\\ntranslate(30, 20);\\nrect(0, 0, 55, 55); // Draw rect at new 0,0\\ntranslate(14, 14);\\nrect(0, 0, 55, 55); // Draw rect at new 0,0\\n
\\nfunction draw() {\\n background(200);\\n rectMode(CENTER);\\n translate(width / 2, height / 2);\\n translate(p5.Vector.fromAngle(millis() / 1000, 40));\\n rect(0, 0, 20, 20);\\n}\\n
left/right translation
up/down translation
forward/backward translation (webgl only)
the vector to translate by
Creates a new instance of p5.StringDict using the key-value pair\\n or the object you provide.
\\n function setup() {\\n let myDictionary = createStringDict('p5', 'js');\\n print(myDictionary.hasKey('p5')); // logs true to console\\n let anotherDictionary = createStringDict({ happy: 'coding' });\\n print(anotherDictionary.hasKey('happy')); // logs true to console\\n }\\n
object
Creates a new instance of p5.NumberDict using the key-value pair\\n or object you provide.
\\n function setup() {\\n let myDictionary = createNumberDict(100, 42);\\n print(myDictionary.hasKey(100)); // logs true to console\\n let anotherDictionary = createNumberDict({ 200: 84 });\\n print(anotherDictionary.hasKey(200)); // logs true to console\\n }\\n
Returns the number of key-value pairs currently stored in the Dictionary.
\\nfunction setup() {\\n let myDictionary = createNumberDict(1, 10);\\n myDictionary.create(2, 20);\\n myDictionary.create(3, 30);\\n print(myDictionary.size()); // logs 3 to the console\\n}\\n
Returns true if the given key exists in the Dictionary,\\notherwise returns false.
that you want to look up
\\nfunction setup() {\\n let myDictionary = createStringDict('p5', 'js');\\n print(myDictionary.hasKey('p5')); // logs true to console\\n}\\n
Returns the value stored at the given key.
key you want to access
\\nfunction setup() {\\n let myDictionary = createStringDict('p5', 'js');\\n let myValue = myDictionary.get('p5');\\n print(myValue === 'js'); // logs true to console\\n}\\n
Updates the value associated with the given key in case it already exists\\nin the Dictionary. Otherwise a new key-value pair is added.
\\nfunction setup() {\\n let myDictionary = createStringDict('p5', 'js');\\n myDictionary.set('p5', 'JS');\\n myDictionary.print(); // logs \\\"key: p5 - value: JS\\\" to console\\n}\\n
private helper function to handle the user passing in objects\\nduring construction or calls to create()
Creates a new key-value pair in the Dictionary.
\\nfunction setup() {\\n let myDictionary = createStringDict('p5', 'js');\\n myDictionary.create('happy', 'coding');\\n myDictionary.print();\\n // above logs \\\"key: p5 - value: js, key: happy - value: coding\\\" to console\\n}\\n
key/value pair
Removes all previously stored key-value pairs from the Dictionary.
\\nfunction setup() {\\n let myDictionary = createStringDict('p5', 'js');\\n print(myDictionary.hasKey('p5')); // prints 'true'\\n myDictionary.clear();\\n print(myDictionary.hasKey('p5')); // prints 'false'\\n}\\n
Removes the key-value pair stored at the given key from the Dictionary.
for the pair to remove
\\nfunction setup() {\\n let myDictionary = createStringDict('p5', 'js');\\n myDictionary.create('happy', 'coding');\\n myDictionary.print();\\n // above logs \\\"key: p5 - value: js, key: happy - value: coding\\\" to console\\n myDictionary.remove('p5');\\n myDictionary.print();\\n // above logs \\\"key: happy value: coding\\\" to console\\n}\\n
Logs the set of items currently stored in the Dictionary to the console.
Converts the Dictionary into a CSV file for local download.
\\nfunction setup() {\\n createCanvas(100, 100);\\n background(200);\\n text('click here to save', 10, 10, 70, 80);\\n}\\n\\nfunction mousePressed() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n createStringDict({\\n john: 1940,\\n paul: 1942,\\n george: 1943,\\n ringo: 1940\\n }).saveTable('beatles');\\n }\\n}\\n
Converts the Dictionary into a JSON file for local download.
\\nfunction setup() {\\n createCanvas(100, 100);\\n background(200);\\n text('click here to save', 10, 10, 70, 80);\\n}\\n\\nfunction mousePressed() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n createStringDict({\\n john: 1940,\\n paul: 1942,\\n george: 1943,\\n ringo: 1940\\n }).saveJSON('beatles');\\n }\\n}\\n
private helper function to ensure that the user passed in valid\\nvalues for the Dictionary type
Add the given number to the value currently stored at the given key.\\nThe sum then replaces the value previously stored in the Dictionary.
for the value you wish to add to
to add to the value
\\nfunction setup() {\\n let myDictionary = createNumberDict(2, 5);\\n myDictionary.add(2, 2);\\n print(myDictionary.get(2)); // logs 7 to console.\\n}\\n
Subtract the given number from the value currently stored at the given key.\\nThe difference then replaces the value previously stored in the Dictionary.
for the value you wish to subtract from
to subtract from the value
\\nfunction setup() {\\n let myDictionary = createNumberDict(2, 5);\\n myDictionary.sub(2, 2);\\n print(myDictionary.get(2)); // logs 3 to console.\\n}\\n
Multiply the given number with the value currently stored at the given key.\\nThe product then replaces the value previously stored in the Dictionary.
for value you wish to multiply
to multiply the value by
\\nfunction setup() {\\n let myDictionary = createNumberDict(2, 4);\\n myDictionary.mult(2, 2);\\n print(myDictionary.get(2)); // logs 8 to console.\\n}\\n
Divide the given number with the value currently stored at the given key.\\nThe quotient then replaces the value previously stored in the Dictionary.
for value you wish to divide
to divide the value by
\\nfunction setup() {\\n let myDictionary = createNumberDict(2, 8);\\n myDictionary.div(2, 2);\\n print(myDictionary.get(2)); // logs 4 to console.\\n}\\n
private helper function for finding lowest or highest value\\nthe argument 'flip' is used to flip the comparison arrow\\nfrom 'less than' to 'greater than'
Return the lowest number currently stored in the Dictionary.
\\nfunction setup() {\\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\\n let lowestValue = myDictionary.minValue(); // value is -10\\n print(lowestValue);\\n}\\n
Return the highest number currently stored in the Dictionary.
\\nfunction setup() {\\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\\n let highestValue = myDictionary.maxValue(); // value is 3\\n print(highestValue);\\n}\\n
private helper function for finding lowest or highest key\\nthe argument 'flip' is used to flip the comparison arrow\\nfrom 'less than' to 'greater than'
Return the lowest key currently used in the Dictionary.
\\nfunction setup() {\\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\\n let lowestKey = myDictionary.minKey(); // value is 1.2\\n print(lowestKey);\\n}\\n
Return the highest key currently used in the Dictionary.
\\nfunction setup() {\\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\\n let highestKey = myDictionary.maxKey(); // value is 4\\n print(highestKey);\\n}\\n
The system variable deviceOrientation always contains the orientation of\\nthe device. The value of this variable will either be set 'landscape'\\nor 'portrait'. If no data is available it will be set to 'undefined'.\\neither LANDSCAPE or PORTRAIT.
The system variable accelerationX always contains the acceleration of the\\ndevice along the x axis. Value is represented as meters per second squared.
\\n// Move a touchscreen device to register\\n// acceleration changes.\\nfunction draw() {\\n background(220, 50);\\n fill('magenta');\\n ellipse(width / 2, height / 2, accelerationX);\\n}\\n
The system variable accelerationY always contains the acceleration of the\\ndevice along the y axis. Value is represented as meters per second squared.
\\n// Move a touchscreen device to register\\n// acceleration changes.\\nfunction draw() {\\n background(220, 50);\\n fill('magenta');\\n ellipse(width / 2, height / 2, accelerationY);\\n}\\n
The system variable accelerationZ always contains the acceleration of the\\ndevice along the z axis. Value is represented as meters per second squared.
\\n// Move a touchscreen device to register\\n// acceleration changes.\\nfunction draw() {\\n background(220, 50);\\n fill('magenta');\\n ellipse(width / 2, height / 2, accelerationZ);\\n}\\n
The system variable pAccelerationX always contains the acceleration of the\\ndevice along the x axis in the frame previous to the current frame. Value\\nis represented as meters per second squared.
The system variable pAccelerationY always contains the acceleration of the\\ndevice along the y axis in the frame previous to the current frame. Value\\nis represented as meters per second squared.
The system variable pAccelerationZ always contains the acceleration of the\\ndevice along the z axis in the frame previous to the current frame. Value\\nis represented as meters per second squared.
The system variable rotationX always contains the rotation of the\\ndevice along the x axis. Value is represented as 0 to +/-180 degrees.\\n\\nNote: The order the rotations are called is important, ie. if used\\ntogether, it must be called in the order Z-X-Y or there might be\\nunexpected behaviour.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n //rotateZ(radians(rotationZ));\\n rotateX(radians(rotationX));\\n //rotateY(radians(rotationY));\\n box(200, 200, 200);\\n}\\n
The system variable rotationY always contains the rotation of the\\ndevice along the y axis. Value is represented as 0 to +/-90 degrees.\\n\\nNote: The order the rotations are called is important, ie. if used\\ntogether, it must be called in the order Z-X-Y or there might be\\nunexpected behaviour.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n //rotateZ(radians(rotationZ));\\n //rotateX(radians(rotationX));\\n rotateY(radians(rotationY));\\n box(200, 200, 200);\\n}\\n
The system variable rotationZ always contains the rotation of the\\ndevice along the z axis. Value is represented as 0 to 359 degrees.\\n\\nUnlike rotationX and rotationY, this variable is available for devices\\nwith a built-in compass only.\\n\\nNote: The order the rotations are called is important, ie. if used\\ntogether, it must be called in the order Z-X-Y or there might be\\nunexpected behaviour.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n rotateZ(radians(rotationZ));\\n //rotateX(radians(rotationX));\\n //rotateY(radians(rotationY));\\n box(200, 200, 200);\\n}\\n
The system variable pRotationX always contains the rotation of the\\ndevice along the x axis in the frame previous to the current frame. Value\\nis represented as 0 to +/-180 degrees.\\n\\npRotationX can also be used with rotationX to determine the rotate\\ndirection of the device along the X-axis.
\\n// A simple if statement looking at whether\\n// rotationX - pRotationX < 0 is true or not will be\\n// sufficient for determining the rotate direction\\n// in most cases.\\n\\n// Some extra logic is needed to account for cases where\\n// the angles wrap around.\\nlet rotateDirection = 'clockwise';\\n\\n// Simple range conversion to make things simpler.\\n// This is not absolutely necessary but the logic\\n// will be different in that case.\\n\\nlet rX = rotationX + 180;\\nlet pRX = pRotationX + 180;\\n\\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\\n rotateDirection = 'clockwise';\\n} else if (rX - pRX < 0 || rX - pRX > 270) {\\n rotateDirection = 'counter-clockwise';\\n}\\n\\nprint(rotateDirection);\\n
The system variable pRotationY always contains the rotation of the\\ndevice along the y axis in the frame previous to the current frame. Value\\nis represented as 0 to +/-90 degrees.\\n\\npRotationY can also be used with rotationY to determine the rotate\\ndirection of the device along the Y-axis.
\\n// A simple if statement looking at whether\\n// rotationY - pRotationY < 0 is true or not will be\\n// sufficient for determining the rotate direction\\n// in most cases.\\n\\n// Some extra logic is needed to account for cases where\\n// the angles wrap around.\\nlet rotateDirection = 'clockwise';\\n\\n// Simple range conversion to make things simpler.\\n// This is not absolutely necessary but the logic\\n// will be different in that case.\\n\\nlet rY = rotationY + 180;\\nlet pRY = pRotationY + 180;\\n\\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\\n rotateDirection = 'clockwise';\\n} else if (rY - pRY < 0 || rY - pRY > 270) {\\n rotateDirection = 'counter-clockwise';\\n}\\nprint(rotateDirection);\\n
The system variable pRotationZ always contains the rotation of the\\ndevice along the z axis in the frame previous to the current frame. Value\\nis represented as 0 to 359 degrees.\\n\\npRotationZ can also be used with rotationZ to determine the rotate\\ndirection of the device along the Z-axis.
\\n// A simple if statement looking at whether\\n// rotationZ - pRotationZ < 0 is true or not will be\\n// sufficient for determining the rotate direction\\n// in most cases.\\n\\n// Some extra logic is needed to account for cases where\\n// the angles wrap around.\\nlet rotateDirection = 'clockwise';\\n\\nif (\\n (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\\n rotationZ - pRotationZ < -270\\n) {\\n rotateDirection = 'clockwise';\\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\\n rotateDirection = 'counter-clockwise';\\n}\\nprint(rotateDirection);\\n
When a device is rotated, the axis that triggers the deviceTurned()\\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\\nthe scope of deviceTurned().
\\n// Run this example on a mobile device\\n// Rotate the device by 90 degrees in the\\n// X-axis to change the value.\\n\\nvar value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction deviceTurned() {\\n if (turnAxis === 'X') {\\n if (value === 0) {\\n value = 255;\\n } else if (value === 255) {\\n value = 0;\\n }\\n }\\n}\\n
The setMoveThreshold() function is used to set the movement threshold for\\nthe deviceMoved() function. The default threshold is set to 0.5.
The threshold value
\\n// Run this example on a mobile device\\n// You will need to move the device incrementally further\\n// the closer the square's color gets to white in order to change the value.\\n\\nlet value = 0;\\nlet threshold = 0.5;\\nfunction setup() {\\n setMoveThreshold(threshold);\\n}\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction deviceMoved() {\\n value = value + 5;\\n threshold = threshold + 0.1;\\n if (value > 255) {\\n value = 0;\\n threshold = 30;\\n }\\n setMoveThreshold(threshold);\\n}\\n
The setShakeThreshold() function is used to set the movement threshold for\\nthe deviceShaken() function. The default threshold is set to 30.
\\n// Run this example on a mobile device\\n// You will need to shake the device more firmly\\n// the closer the box's fill gets to white in order to change the value.\\n\\nlet value = 0;\\nlet threshold = 30;\\nfunction setup() {\\n setShakeThreshold(threshold);\\n}\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction deviceMoved() {\\n value = value + 5;\\n threshold = threshold + 5;\\n if (value > 255) {\\n value = 0;\\n threshold = 30;\\n }\\n setShakeThreshold(threshold);\\n}\\n
The deviceMoved() function is called when the device is moved by more than\\nthe threshold value along X, Y or Z axis. The default threshold is set to 0.5.\\nThe threshold value can be changed using setMoveThreshold().
\\n// Run this example on a mobile device\\n// Move the device around\\n// to change the value.\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction deviceMoved() {\\n value = value + 5;\\n if (value > 255) {\\n value = 0;\\n }\\n}\\n
The deviceTurned() function is called when the device rotates by\\nmore than 90 degrees continuously.\\n\\nThe axis that triggers the deviceTurned() method is stored in the turnAxis\\nvariable. The deviceTurned() method can be locked to trigger on any axis:\\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
\\n// Run this example on a mobile device\\n// Rotate the device by 90 degrees\\n// to change the value.\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction deviceTurned() {\\n if (value === 0) {\\n value = 255;\\n } else if (value === 255) {\\n value = 0;\\n }\\n}\\n
\\n// Run this example on a mobile device\\n// Rotate the device by 90 degrees in the\\n// X-axis to change the value.\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction deviceTurned() {\\n if (turnAxis === 'X') {\\n if (value === 0) {\\n value = 255;\\n } else if (value === 255) {\\n value = 0;\\n }\\n }\\n}\\n
The deviceShaken() function is called when the device total acceleration\\nchanges of accelerationX and accelerationY values is more than\\nthe threshold value. The default threshold is set to 30.\\nThe threshold value can be changed using setShakeThreshold().
\\n// Run this example on a mobile device\\n// Shake the device to change the value.\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction deviceShaken() {\\n value = value + 5;\\n if (value > 255) {\\n value = 0;\\n }\\n}\\n
The boolean system variable keyIsPressed is true if any key is pressed\\nand false if no keys are pressed.
\\nfunction draw() {\\n if (keyIsPressed === true) {\\n fill(0);\\n } else {\\n fill(255);\\n }\\n rect(25, 25, 50, 50);\\n}\\n
The system variable key always contains the value of the most recent\\nkey on the keyboard that was typed. To get the proper capitalization, it\\nis best to use it within keyTyped(). For non-ASCII keys, use the keyCode\\nvariable.
\\n// Click any key to display it!\\n// (Not Guaranteed to be Case Sensitive)\\nfunction setup() {\\n fill(245, 123, 158);\\n textSize(50);\\n}\\n\\nfunction draw() {\\n background(200);\\n text(key, 33, 65); // Display last key pressed.\\n}\\n
The variable keyCode is used to detect special keys such as BACKSPACE,\\nDELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,\\nDOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\\nYou can also check for custom keys by looking up the keyCode of any key\\non a site like this: keycode.info.
\\nlet fillVal = 126;\\nfunction draw() {\\n fill(fillVal);\\n rect(25, 25, 50, 50);\\n}\\n\\nfunction keyPressed() {\\n if (keyCode === UP_ARROW) {\\n fillVal = 255;\\n } else if (keyCode === DOWN_ARROW) {\\n fillVal = 0;\\n }\\n return false; // prevent default\\n}\\n
\\nfunction draw() {}\\nfunction keyPressed() {\\n background('yellow');\\n text(`${key} ${keyCode}`, 10, 40);\\n print(key, ' ', keyCode);\\n return false; // prevent default\\n}\\n
The keyPressed() function is called once every time a key is pressed. The\\nkeyCode for the key that was pressed is stored in the keyCode variable.\\n\\nFor non-ASCII keys, use the keyCode variable. You can check if the keyCode\\nequals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,\\nOPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\\n\\nFor ASCII keys, the key that was pressed is stored in the key variable. However, it\\ndoes not distinguish between uppercase and lowercase. For this reason, it\\nis recommended to use keyTyped() to read the key variable, in which the\\ncase of the variable will be distinguished.\\n\\nBecause of how operating systems handle key repeats, holding down a key\\nmay cause multiple calls to keyTyped() (and keyReleased() as well). The\\nrate of repeat is set by the operating system and how each computer is\\nconfigured.\\nBrowsers may have different default\\nbehaviors attached to various key events. To prevent any default\\nbehavior for this event, add "return false" to the end of the method.
\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction keyPressed() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n}\\n
\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction keyPressed() {\\n if (keyCode === LEFT_ARROW) {\\n value = 255;\\n } else if (keyCode === RIGHT_ARROW) {\\n value = 0;\\n }\\n}\\n
\\nfunction keyPressed() {\\n // Do something\\n return false; // prevent any default behaviour\\n}\\n
The keyReleased() function is called once every time a key is released.\\nSee key and keyCode for more information.\\nBrowsers may have different default\\nbehaviors attached to various key events. To prevent any default\\nbehavior for this event, add "return false" to the end of the method.
\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction keyReleased() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n return false; // prevent any default behavior\\n}\\n
The keyTyped() function is called once every time a key is pressed, but\\naction keys such as Ctrl, Shift, and Alt are ignored. The most recent\\nkey pressed will be stored in the key variable.\\n\\nBecause of how operating systems handle key repeats, holding down a key\\nwill cause multiple calls to keyTyped() (and keyReleased() as well). The\\nrate of repeat is set by the operating system and how each computer is\\nconfigured.\\nBrowsers may have different default behaviors attached to various key\\nevents. To prevent any default behavior for this event, add "return false"\\nto the end of the method.
\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction keyTyped() {\\n if (key === 'a') {\\n value = 255;\\n } else if (key === 'b') {\\n value = 0;\\n }\\n // uncomment to prevent any default behavior\\n // return false;\\n}\\n
The onblur function is called when the user is no longer focused\\non the p5 element. Because the keyup events will not fire if the user is\\nnot focused on the element we must assume all keys currently down have\\nbeen released.
The keyIsDown() function checks if the key is currently down, i.e. pressed.\\nIt can be used if you have an object that moves, and you want several keys\\nto be able to affect its behaviour simultaneously, such as moving a\\nsprite diagonally. You can put in any number representing the keyCode of\\nthe key, or use any of the variable keyCode names listed\\nhere.
The key to check for.
\\nlet x = 100;\\nlet y = 100;\\n\\nfunction setup() {\\n createCanvas(512, 512);\\n fill(255, 0, 0);\\n}\\n\\nfunction draw() {\\n if (keyIsDown(LEFT_ARROW)) {\\n x -= 5;\\n }\\n\\n if (keyIsDown(RIGHT_ARROW)) {\\n x += 5;\\n }\\n\\n if (keyIsDown(UP_ARROW)) {\\n y -= 5;\\n }\\n\\n if (keyIsDown(DOWN_ARROW)) {\\n y += 5;\\n }\\n\\n clear();\\n ellipse(x, y, 50, 50);\\n}\\n
\\nlet diameter = 50;\\n\\nfunction setup() {\\n createCanvas(512, 512);\\n}\\n\\nfunction draw() {\\n // 107 and 187 are keyCodes for \\\"+\\\"\\n if (keyIsDown(107) || keyIsDown(187)) {\\n diameter += 1;\\n }\\n\\n // 109 and 189 are keyCodes for \\\"-\\\"\\n if (keyIsDown(109) || keyIsDown(189)) {\\n diameter -= 1;\\n }\\n\\n clear();\\n fill(255, 0, 0);\\n ellipse(50, 50, diameter, diameter);\\n}\\n
The system variable mouseX always contains the current horizontal\\nposition of the mouse, relative to (0, 0) of the canvas. If touch is\\nused instead of mouse input, mouseX will hold the x value of the most\\nrecent touch point.
\\n// Move the mouse across the canvas\\nfunction draw() {\\n background(244, 248, 252);\\n line(mouseX, 0, mouseX, 100);\\n}\\n
The system variable mouseY always contains the current vertical position\\nof the mouse, relative to (0, 0) of the canvas. If touch is\\nused instead of mouse input, mouseY will hold the y value of the most\\nrecent touch point.
\\n// Move the mouse across the canvas\\nfunction draw() {\\n background(244, 248, 252);\\n line(0, mouseY, 100, mouseY);\\n}\\n
The system variable pmouseX always contains the horizontal position of\\nthe mouse or finger in the frame previous to the current frame, relative to\\n(0, 0) of the canvas. Note: pmouseX will be reset to the current mouseX\\nvalue at the start of each touch event.
\\n// Move the mouse across the canvas to leave a trail\\nfunction setup() {\\n //slow down the frameRate to make it more visible\\n frameRate(10);\\n}\\n\\nfunction draw() {\\n background(244, 248, 252);\\n line(mouseX, mouseY, pmouseX, pmouseY);\\n print(pmouseX + ' -> ' + mouseX);\\n}\\n
The system variable pmouseY always contains the vertical position of the\\nmouse or finger in the frame previous to the current frame, relative to\\n(0, 0) of the canvas. Note: pmouseY will be reset to the current mouseY\\nvalue at the start of each touch event.
\\nfunction draw() {\\n background(237, 34, 93);\\n fill(0);\\n //draw a square only if the mouse is not moving\\n if (mouseY === pmouseY && mouseX === pmouseX) {\\n rect(20, 20, 60, 60);\\n }\\n\\n print(pmouseY + ' -> ' + mouseY);\\n}\\n
The system variable winMouseX always contains the current horizontal\\nposition of the mouse, relative to (0, 0) of the window.
\\nlet myCanvas;\\n\\nfunction setup() {\\n //use a variable to store a pointer to the canvas\\n myCanvas = createCanvas(100, 100);\\n const body = document.getElementsByTagName('body')[0];\\n myCanvas.parent(body);\\n}\\n\\nfunction draw() {\\n background(237, 34, 93);\\n fill(0);\\n\\n //move the canvas to the horizontal mouse position\\n //relative to the window\\n myCanvas.position(winMouseX + 1, windowHeight / 2);\\n\\n //the y of the square is relative to the canvas\\n rect(20, mouseY, 60, 60);\\n}\\n
The system variable winMouseY always contains the current vertical\\nposition of the mouse, relative to (0, 0) of the window.
\\nlet myCanvas;\\n\\nfunction setup() {\\n //use a variable to store a pointer to the canvas\\n myCanvas = createCanvas(100, 100);\\n const body = document.getElementsByTagName('body')[0];\\n myCanvas.parent(body);\\n}\\n\\nfunction draw() {\\n background(237, 34, 93);\\n fill(0);\\n\\n //move the canvas to the vertical mouse position\\n //relative to the window\\n myCanvas.position(windowWidth / 2, winMouseY + 1);\\n\\n //the x of the square is relative to the canvas\\n rect(mouseX, 20, 60, 60);\\n}\\n
The system variable pwinMouseX always contains the horizontal position\\nof the mouse in the frame previous to the current frame, relative to\\n(0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX\\nvalue at the start of each touch event.
\\nlet myCanvas;\\n\\nfunction setup() {\\n //use a variable to store a pointer to the canvas\\n myCanvas = createCanvas(100, 100);\\n noStroke();\\n fill(237, 34, 93);\\n}\\n\\nfunction draw() {\\n clear();\\n //the difference between previous and\\n //current x position is the horizontal mouse speed\\n let speed = abs(winMouseX - pwinMouseX);\\n //change the size of the circle\\n //according to the horizontal speed\\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\\n //move the canvas to the mouse position\\n myCanvas.position(winMouseX + 1, winMouseY + 1);\\n}\\n
The system variable pwinMouseY always contains the vertical position of\\nthe mouse in the frame previous to the current frame, relative to (0, 0)\\nof the window. Note: pwinMouseY will be reset to the current winMouseY\\nvalue at the start of each touch event.
\\nlet myCanvas;\\n\\nfunction setup() {\\n //use a variable to store a pointer to the canvas\\n myCanvas = createCanvas(100, 100);\\n noStroke();\\n fill(237, 34, 93);\\n}\\n\\nfunction draw() {\\n clear();\\n //the difference between previous and\\n //current y position is the vertical mouse speed\\n let speed = abs(winMouseY - pwinMouseY);\\n //change the size of the circle\\n //according to the vertical speed\\n ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\\n //move the canvas to the mouse position\\n myCanvas.position(winMouseX + 1, winMouseY + 1);\\n}\\n
Processing automatically tracks if the mouse button is pressed and which\\nbutton is pressed. The value of the system variable mouseButton is either\\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\\nWarning: different browsers may track mouseButton differently.
\\nfunction draw() {\\n background(237, 34, 93);\\n fill(0);\\n\\n if (mouseIsPressed) {\\n if (mouseButton === LEFT) {\\n ellipse(50, 50, 50, 50);\\n }\\n if (mouseButton === RIGHT) {\\n rect(25, 25, 50, 50);\\n }\\n if (mouseButton === CENTER) {\\n triangle(23, 75, 50, 20, 78, 75);\\n }\\n }\\n\\n print(mouseButton);\\n}\\n
The boolean system variable mouseIsPressed is true if the mouse is pressed\\nand false if not.
\\nfunction draw() {\\n background(237, 34, 93);\\n fill(0);\\n\\n if (mouseIsPressed) {\\n ellipse(50, 50, 50, 50);\\n } else {\\n rect(25, 25, 50, 50);\\n }\\n\\n print(mouseIsPressed);\\n}\\n
The mouseMoved() function is called every time the mouse moves and a mouse\\nbutton is not pressed.\\nBrowsers may have different default\\nbehaviors attached to various mouse events. To prevent any default\\nbehavior for this event, add "return false" to the end of the method.
optional MouseEvent callback argument.
\\n// Move the mouse across the page\\n// to change its value\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction mouseMoved() {\\n value = value + 5;\\n if (value > 255) {\\n value = 0;\\n }\\n}\\n
\\nfunction mouseMoved() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a MouseEvent object\\n// as a callback argument\\nfunction mouseMoved(event) {\\n console.log(event);\\n}\\n
The mouseDragged() function is called once every time the mouse moves and\\na mouse button is pressed. If no mouseDragged() function is defined, the\\ntouchMoved() function will be called instead if it is defined.\\nBrowsers may have different default\\nbehaviors attached to various mouse events. To prevent any default\\nbehavior for this event, add "return false" to the end of the method.
\\n// Drag the mouse across the page\\n// to change its value\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction mouseDragged() {\\n value = value + 5;\\n if (value > 255) {\\n value = 0;\\n }\\n}\\n
\\nfunction mouseDragged() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a MouseEvent object\\n// as a callback argument\\nfunction mouseDragged(event) {\\n console.log(event);\\n}\\n
The mousePressed() function is called once after every time a mouse button\\nis pressed. The mouseButton variable (see the related reference entry)\\ncan be used to determine which button has been pressed. If no\\nmousePressed() function is defined, the touchStarted() function will be\\ncalled instead if it is defined.\\nBrowsers may have different default\\nbehaviors attached to various mouse events. To prevent any default\\nbehavior for this event, add "return false" to the end of the method.
\\n// Click within the image to change\\n// the value of the rectangle\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction mousePressed() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n}\\n
\\nfunction mousePressed() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a MouseEvent object\\n// as a callback argument\\nfunction mousePressed(event) {\\n console.log(event);\\n}\\n
The mouseReleased() function is called every time a mouse button is\\nreleased. If no mouseReleased() function is defined, the touchEnded()\\nfunction will be called instead if it is defined.\\nBrowsers may have different default\\nbehaviors attached to various mouse events. To prevent any default\\nbehavior for this event, add "return false" to the end of the method.
\\n// Click within the image to change\\n// the value of the rectangle\\n// after the mouse has been clicked\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction mouseReleased() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n}\\n
\\nfunction mouseReleased() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a MouseEvent object\\n// as a callback argument\\nfunction mouseReleased(event) {\\n console.log(event);\\n}\\n
The mouseClicked() function is called once after a mouse button has been\\npressed and then released.\\nBrowsers handle clicks differently, so this function is only guaranteed to be\\nrun when the left mouse button is clicked. To handle other mouse buttons\\nbeing pressed or released, see mousePressed() or mouseReleased().\\nBrowsers may have different default\\nbehaviors attached to various mouse events. To prevent any default\\nbehavior for this event, add "return false" to the end of the method.
\\n// Click within the image to change\\n// the value of the rectangle\\n// after the mouse has been clicked\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\n\\nfunction mouseClicked() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n}\\n
\\nfunction mouseClicked() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a MouseEvent object\\n// as a callback argument\\nfunction mouseClicked(event) {\\n console.log(event);\\n}\\n
The doubleClicked() function is executed every time a event\\nlistener has detected a dblclick event which is a part of the\\nDOM L3 specification. The doubleClicked event is fired when a\\npointing device button (usually a mouse's primary button)\\nis clicked twice on a single element. For more info on the\\ndblclick event refer to mozilla's documentation here:\\nhttps://developer.mozilla.org/en-US/docs/Web/Events/dblclick
\\n// Click within the image to change\\n// the value of the rectangle\\n// after the mouse has been double clicked\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\n\\nfunction doubleClicked() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n}\\n
\\nfunction doubleClicked() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a MouseEvent object\\n// as a callback argument\\nfunction doubleClicked(event) {\\n console.log(event);\\n}\\n
The function mouseWheel() is executed every time a vertical mouse wheel\\nevent is detected either triggered by an actual mouse wheel or by a\\ntouchpad.\\nThe event.delta property returns the amount the mouse wheel\\nhave scrolled. The values can be positive or negative depending on the\\nscroll direction (on OS X with "natural" scrolling enabled, the signs\\nare inverted).\\nBrowsers may have different default behaviors attached to various\\nmouse events. To prevent any default behavior for this event, add\\n"return false" to the end of the method.\\nDue to the current support of the "wheel" event on Safari, the function\\nmay only work as expected if "return false" is included while using Safari.
optional WheelEvent callback argument.
\\nlet pos = 25;\\n\\nfunction draw() {\\n background(237, 34, 93);\\n fill(0);\\n rect(25, pos, 50, 50);\\n}\\n\\nfunction mouseWheel(event) {\\n print(event.delta);\\n //move the square according to the vertical scroll amount\\n pos += event.delta;\\n //uncomment to block page scrolling\\n //return false;\\n}\\n
The system variable touches[] contains an array of the positions of all\\ncurrent touch points, relative to (0, 0) of the canvas, and IDs identifying a\\nunique touch as it moves. Each element in the array is an object with x, y,\\nand id properties.
The touches[] array is not supported on Safari and IE on touch-based\\ndesktops (laptops).
\\n// On a touchscreen device, touch\\n// the canvas using one or more fingers\\n// at the same time\\nfunction draw() {\\n clear();\\n let display = touches.length + ' touches';\\n text(display, 5, 10);\\n}\\n
The touchStarted() function is called once after every time a touch is\\nregistered. If no touchStarted() function is defined, the mousePressed()\\nfunction will be called instead if it is defined.\\nBrowsers may have different default behaviors attached to various touch\\nevents. To prevent any default behavior for this event, add "return false"\\nto the end of the method.
optional TouchEvent callback argument.
\\n// Touch within the image to change\\n// the value of the rectangle\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction touchStarted() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n}\\n
\\nfunction touchStarted() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a TouchEvent object\\n// as a callback argument\\nfunction touchStarted(event) {\\n console.log(event);\\n}\\n
The touchMoved() function is called every time a touch move is registered.\\nIf no touchMoved() function is defined, the mouseDragged() function will\\nbe called instead if it is defined.\\nBrowsers may have different default behaviors attached to various touch\\nevents. To prevent any default behavior for this event, add "return false"\\nto the end of the method.
\\n// Move your finger across the page\\n// to change its value\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction touchMoved() {\\n value = value + 5;\\n if (value > 255) {\\n value = 0;\\n }\\n}\\n
\\nfunction touchMoved() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a TouchEvent object\\n// as a callback argument\\nfunction touchMoved(event) {\\n console.log(event);\\n}\\n
The touchEnded() function is called every time a touch ends. If no\\ntouchEnded() function is defined, the mouseReleased() function will be\\ncalled instead if it is defined.\\nBrowsers may have different default behaviors attached to various touch\\nevents. To prevent any default behavior for this event, add "return false"\\nto the end of the method.
\\n// Release touch within the image to\\n// change the value of the rectangle\\n\\nlet value = 0;\\nfunction draw() {\\n fill(value);\\n rect(25, 25, 50, 50);\\n}\\nfunction touchEnded() {\\n if (value === 0) {\\n value = 255;\\n } else {\\n value = 0;\\n }\\n}\\n
\\nfunction touchEnded() {\\n ellipse(mouseX, mouseY, 5, 5);\\n // prevent default\\n return false;\\n}\\n
\\n// returns a TouchEvent object\\n// as a callback argument\\nfunction touchEnded(event) {\\n console.log(event);\\n}\\n
This module defines the filters for use with image buffers.
This module is basically a collection of functions stored in an object\\nas opposed to modules. The functions are destructive, modifying\\nthe passed in canvas rather than creating a copy.
Generally speaking users of this module will use the Filters.apply method\\non a canvas to create an effect.
A number of functions are borrowed/adapted from\\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\\nor the java processing implementation.
This module defines the p5 methods for the p5.Image class\\nfor drawing images to the main display canvas.
Creates a new p5.Image (the datatype for storing images). This provides a\\nfresh buffer of pixels to play with. Set the size of the buffer with the\\nwidth and height parameters.\\n\\n.pixels gives access to an array containing the values for all the pixels\\nin the display window.\\nThese values are numbers. This array is the size (including an appropriate\\nfactor for the pixelDensity) of the display window x4,\\nrepresenting the R, G, B, A values in order for each pixel, moving from\\nleft to right across each row, then down each column. See .pixels for\\nmore info. It may also be simpler to use set() or get().\\n\\nBefore accessing the pixels of an image, the data must loaded with the\\nloadPixels() function. After the array data has been modified, the\\nupdatePixels() function must be run to update the changes.
width in pixels
height in pixels
\\nlet img = createImage(66, 66);\\nimg.loadPixels();\\nfor (let i = 0; i < img.width; i++) {\\n for (let j = 0; j < img.height; j++) {\\n img.set(i, j, color(0, 90, 102));\\n }\\n}\\nimg.updatePixels();\\nimage(img, 17, 17);\\n
\\nlet img = createImage(66, 66);\\nimg.loadPixels();\\nfor (let i = 0; i < img.width; i++) {\\n for (let j = 0; j < img.height; j++) {\\n img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\\n }\\n}\\nimg.updatePixels();\\nimage(img, 17, 17);\\nimage(img, 34, 34);\\n
\\nlet pink = color(255, 102, 204);\\nlet img = createImage(66, 66);\\nimg.loadPixels();\\nlet d = pixelDensity();\\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\\nfor (let i = 0; i < halfImage; i += 4) {\\n img.pixels[i] = red(pink);\\n img.pixels[i + 1] = green(pink);\\n img.pixels[i + 2] = blue(pink);\\n img.pixels[i + 3] = alpha(pink);\\n}\\nimg.updatePixels();\\nimage(img, 17, 17);\\n
Save the current canvas as an image. The browser will either save the\\nfile immediately, or prompt the user with a dialogue window.
\\n function setup() {\\n let c = createCanvas(100, 100);\\n background(255, 0, 0);\\n saveCanvas(c, 'myCanvas', 'jpg');\\n }\\n
\\n // note that this example has the same result as above\\n // if no canvas is specified, defaults to main canvas\\n function setup() {\\n let c = createCanvas(100, 100);\\n background(255, 0, 0);\\n saveCanvas('myCanvas', 'jpg');\\n\\n // all of the following are valid\\n saveCanvas(c, 'myCanvas', 'jpg');\\n saveCanvas(c, 'myCanvas.jpg');\\n saveCanvas(c, 'myCanvas');\\n saveCanvas(c);\\n saveCanvas('myCanvas', 'png');\\n saveCanvas('myCanvas');\\n saveCanvas();\\n }\\n
a variable\\n representing a specific html5 canvas (optional)
'jpg' or 'png'
Capture a sequence of frames that can be used to create a movie.\\nAccepts a callback. For example, you may wish to send the frames\\nto a server where they can be stored or converted into a movie.\\nIf no callback is provided, the browser will pop up save dialogues in an\\nattempt to download all of the images that have just been created. With the\\ncallback provided the image data isn't saved by default but instead passed\\nas an argument to the callback function as an array of objects, with the\\nsize of array equal to the total number of frames.
Note that saveFrames() will only save the first 15 frames of an animation.\\nTo export longer animations, you might look into a library like\\nccapture.js.
Duration in seconds to save the frames for.
Framerate to save the frames in.
A callback function that will be executed\\n to handle the image data. This function\\n should accept an array as argument. The\\n array will contain the specified number of\\n frames of objects. Each object has three\\n properties: imageData - an\\n image/octet-stream, filename and extension.
\\n function draw() {\\n background(mouseX);\\n }\\n\\n function mousePressed() {\\n saveFrames('out', 'png', 1, 25, data => {\\n print(data);\\n });\\n }\\n
Loads an image from a path and creates a p5.Image from it.\\n\\nThe image may not be immediately available for rendering\\nIf you want to ensure that the image is ready before doing\\nanything with it, place the loadImage() call in preload().\\nYou may also supply a callback function to handle the image when it's ready.\\n\\nThe path to the image should be relative to the HTML file\\nthat links in your sketch. Loading an image from a URL or other\\nremote location may be blocked due to your browser's built-in\\nsecurity.
Path of the image to be loaded
Function to be called once\\n the image is loaded. Will be passed the\\n p5.Image.
called with event error if\\n the image fails to load.
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n}\\n
\\nfunction setup() {\\n // here we use a callback to display the image after loading\\n loadImage('assets/laDefense.jpg', img => {\\n image(img, 0, 0);\\n });\\n}\\n
Draw an image to the p5.js canvas.
This function can be used with different numbers of parameters. The\\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\\nthe position of the image. Two more parameters can optionally be added to\\nspecify the width and height of the image.
This function can also be used with all eight Number parameters. To\\ndifferentiate between all these parameters, p5.js uses the language of\\n"destination rectangle" (which corresponds to "dx", "dy", etc.) and "source\\nimage" (which corresponds to "sx", "sy", etc.) below. Specifying the\\n"source image" dimensions can be useful when you want to display a\\nsubsection of the source image instead of the whole thing. Here's a diagram\\nto explain further:\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\nfunction setup() {\\n // Top-left corner of the img is at (0, 0)\\n // Width and height are the img's original width and height\\n image(img, 0, 0);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\nfunction setup() {\\n background(50);\\n // Top-left corner of the img is at (10, 10)\\n // Width and height are 50 x 50\\n image(img, 10, 10, 50, 50);\\n}\\n
\\nfunction setup() {\\n // Here, we use a callback to display the image after loading\\n loadImage('assets/laDefense.jpg', img => {\\n image(img, 0, 0);\\n });\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/gradient.png');\\n}\\nfunction setup() {\\n // 1. Background image\\n // Top-left corner of the img is at (0, 0)\\n // Width and height are the img's original width and height, 100 x 100\\n image(img, 0, 0);\\n // 2. Top right image\\n // Top-left corner of destination rectangle is at (50, 0)\\n // Destination rectangle width and height are 40 x 20\\n // The next parameters are relative to the source image:\\n // - Starting at position (50, 50) on the source image, capture a 50 x 50\\n // subsection\\n // - Draw this subsection to fill the dimensions of the destination rectangle\\n image(img, 50, 0, 40, 20, 50, 50, 50, 50);\\n}\\n
the image to display
the x-coordinate of the top-left corner of the image
the y-coordinate of the top-left corner of the image
the width to draw the image
the height to draw the image
the x-coordinate of the destination\\n rectangle in which to draw the source image
the y-coordinate of the destination\\n rectangle in which to draw the source image
the width of the destination rectangle
the height of the destination rectangle
the x-coordinate of the subsection of the source\\nimage to draw into the destination rectangle
the y-coordinate of the subsection of the source\\nimage to draw into the destination rectangle
the width of the subsection of the\\n source image to draw into the destination\\n rectangle
the height of the subsection of the\\n source image to draw into the destination rectangle
Sets the fill value for displaying images. Images can be tinted to\\nspecified colors or made transparent by including an alpha value.\\n\\nTo apply transparency to an image without affecting its color, use\\nwhite as the tint color and specify an alpha value. For instance,\\ntint(255, 128) will make an image 50% transparent (assuming the default\\nalpha range of 0-255, which can be changed with colorMode()).\\n\\nThe value for the gray parameter must be less than or equal to the current\\nmaximum value as specified by colorMode(). The default maximum value is\\n255.
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n tint(0, 153, 204); // Tint blue\\n image(img, 50, 0);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n tint(0, 153, 204, 126); // Tint blue and set transparency\\n image(img, 50, 0);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n tint(255, 126); // Apply transparency without changing color\\n image(img, 50, 0);\\n}\\n
the tint color
Removes the current fill value for displaying images and reverts to\\ndisplaying images with their original hues.
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n tint(0, 153, 204); // Tint blue\\n image(img, 0, 0);\\n noTint(); // Disable tint\\n image(img, 50, 0);\\n}\\n
Set image mode. Modifies the location from which images are drawn by\\nchanging the way in which parameters given to image() are interpreted.\\nThe default mode is imageMode(CORNER), which interprets the second and\\nthird parameters of image() as the upper-left corner of the image. If\\ntwo additional parameters are specified, they are used to set the image's\\nwidth and height.\\n\\nimageMode(CORNERS) interprets the second and third parameters of image()\\nas the location of one corner, and the fourth and fifth parameters as the\\nopposite corner.\\n\\nimageMode(CENTER) interprets the second and third parameters of image()\\nas the image's center point. If two additional parameters are specified,\\nthey are used to set the image's width and height.
either CORNER, CORNERS, or CENTER
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n imageMode(CORNER);\\n image(img, 10, 10, 50, 50);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n imageMode(CORNERS);\\n image(img, 10, 10, 90, 40);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n imageMode(CENTER);\\n image(img, 50, 50, 80, 80);\\n}\\n
This module defines the p5.Image class and P5 methods for\\ndrawing images to the main display canvas.
Image width.
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100);\\n image(img, 0, 0);\\n for (let i = 0; i < img.width; i++) {\\n let c = img.get(i, img.height / 2);\\n stroke(c);\\n line(i, height / 2, i, height);\\n }\\n}\\n
Image height.
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100);\\n image(img, 0, 0);\\n for (let i = 0; i < img.height; i++) {\\n let c = img.get(img.width / 2, i);\\n stroke(c);\\n line(0, i, width / 2, i);\\n }\\n}\\n
Array containing the values for all the pixels in the display window.\\nThese values are numbers. This array is the size (include an appropriate\\nfactor for pixelDensity) of the display window x4,\\nrepresenting the R, G, B, A values in order for each pixel, moving from\\nleft to right across each row, then down each column. Retina and other\\nhigh denisty displays may have more pixels (by a factor of\\npixelDensity^2).\\nFor example, if the image is 100x100 pixels, there will be 40,000. With\\npixelDensity = 2, there will be 160,000. The first four values\\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\\nat (x, y):
let d = pixelDensity();\\nfor (let i = 0; i < d; i++) {\\n for (let j = 0; j < d; j++) {\\n // loop over\\n index = 4 * ((y * d + j) * width * d + (x * d + i));\\n pixels[index] = r;\\n pixels[index+1] = g;\\n pixels[index+2] = b;\\n pixels[index+3] = a;\\n }\\n}\\n
\\nBefore accessing this array, the data must loaded with the loadPixels()\\nfunction. After the array data has been modified, the updatePixels()\\nfunction must be run to update the changes.
\\nlet pink = color(255, 102, 204);\\nlet img = createImage(66, 66);\\nimg.loadPixels();\\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\\n img.pixels[i] = red(pink);\\n img.pixels[i + 1] = green(pink);\\n img.pixels[i + 2] = blue(pink);\\n img.pixels[i + 3] = alpha(pink);\\n}\\nimg.updatePixels();\\nimage(img, 17, 17);\\n
Loads the pixels data for this image into the [pixels] attribute.
\\nlet myImage;\\nlet halfImage;\\n\\nfunction preload() {\\n myImage = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n myImage.loadPixels();\\n halfImage = 4 * myImage.width * myImage.height / 2;\\n for (let i = 0; i < halfImage; i++) {\\n myImage.pixels[i + halfImage] = myImage.pixels[i];\\n }\\n myImage.updatePixels();\\n}\\n\\nfunction draw() {\\n image(myImage, 0, 0, width, height);\\n}\\n
Updates the backing canvas for this image with the contents of\\nthe [pixels] array.
x-offset of the target update area for the\\n underlying canvas
y-offset of the target update area for the\\n underlying canvas
height of the target update area for the\\n underlying canvas
Get a region of pixels from an image.
If no params are passed, the whole image is returned.\\nIf x and y are the only params passed a single pixel is extracted.\\nIf all params are passed a rectangle region is extracted and a p5.Image\\nis returned.
\\nlet myImage;\\nlet c;\\n\\nfunction preload() {\\n myImage = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n background(myImage);\\n noStroke();\\n c = myImage.get(60, 90);\\n fill(c);\\n rect(25, 25, 50, 50);\\n}\\n\\n//get() returns color here\\n
x-coordinate of the pixel
y-coordinate of the pixel
Set the color of a single pixel or write an image into\\nthis p5.Image.
Note that for a large number of pixels this will\\nbe slower than directly manipulating the pixels array\\nand then calling updatePixels().
grayscale value | pixel array |\\n a p5.Color | image to copy
Resize the image to a new width and height. To make the image scale\\nproportionally, use 0 as the value for the wide or high parameter.\\nFor instance, to make the width of an image 150 pixels, and change\\nthe height using the same proportion, use resize(150, 0).
the resized image width
the resized image height
\\nlet img;\\n\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction draw() {\\n image(img, 0, 0);\\n}\\n\\nfunction mousePressed() {\\n img.resize(50, 100);\\n}\\n
Copies a region of pixels from one image to another. If no\\nsrcImage is specified this is used as the source. If the source\\nand destination regions aren't the same size, it will\\nautomatically resize source pixels to fit the specified\\ntarget region.
\\nlet photo;\\nlet bricks;\\nlet x;\\nlet y;\\n\\nfunction preload() {\\n photo = loadImage('assets/rockies.jpg');\\n bricks = loadImage('assets/bricks.jpg');\\n}\\n\\nfunction setup() {\\n x = bricks.width / 2;\\n y = bricks.height / 2;\\n photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\\n image(photo, 0, 0);\\n}\\n
source image
X coordinate of the source's upper left corner
Y coordinate of the source's upper left corner
source image width
source image height
X coordinate of the destination's upper left corner
Y coordinate of the destination's upper left corner
destination image width
destination image height
Masks part of an image from displaying by loading another\\nimage and using it's alpha channel as an alpha channel for\\nthis image.
\\nlet photo, maskImage;\\nfunction preload() {\\n photo = loadImage('assets/rockies.jpg');\\n maskImage = loadImage('assets/mask2.png');\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100);\\n photo.mask(maskImage);\\n image(photo, 0, 0);\\n}\\n
Applies an image filter to a p5.Image
either THRESHOLD, GRAY, OPAQUE, INVERT,\\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\\n See Filters.js for docs on\\n each available filter
an optional parameter unique\\n to each filter, see above
\\nlet photo1;\\nlet photo2;\\n\\nfunction preload() {\\n photo1 = loadImage('assets/rockies.jpg');\\n photo2 = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n photo2.filter(GRAY);\\n image(photo1, 0, 0);\\n image(photo2, width / 2, 0);\\n}\\n
Copies a region of pixels from one image to another, using a specified\\nblend mode to do the operation.
\\nlet mountains;\\nlet bricks;\\n\\nfunction preload() {\\n mountains = loadImage('assets/rockies.jpg');\\n bricks = loadImage('assets/bricks_third.jpg');\\n}\\n\\nfunction setup() {\\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\\n image(mountains, 0, 0);\\n image(bricks, 0, 0);\\n}\\n
\\nlet mountains;\\nlet bricks;\\n\\nfunction preload() {\\n mountains = loadImage('assets/rockies.jpg');\\n bricks = loadImage('assets/bricks_third.jpg');\\n}\\n\\nfunction setup() {\\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\\n image(mountains, 0, 0);\\n image(bricks, 0, 0);\\n}\\n
\\nlet mountains;\\nlet bricks;\\n\\nfunction preload() {\\n mountains = loadImage('assets/rockies.jpg');\\n bricks = loadImage('assets/bricks_third.jpg');\\n}\\n\\nfunction setup() {\\n mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\\n image(mountains, 0, 0);\\n image(bricks, 0, 0);\\n}\\n
the blend mode. either\\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
Available blend modes are: normal | multiply | screen | overlay |\\n darken | lighten | color-dodge | color-burn | hard-light |\\n soft-light | difference | exclusion | hue | saturation |\\n color | luminosity
http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
Saves the image to a file and force the browser to download it.\\nAccepts two strings for filename and file extension\\nSupports png (default) and jpg.
give your file a name
'png' or 'jpg'
\\nlet photo;\\n\\nfunction preload() {\\n photo = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction draw() {\\n image(photo, 0, 0);\\n}\\n\\nfunction keyTyped() {\\n if (key === 's') {\\n photo.save('photo', 'png');\\n }\\n}\\n
Uint8ClampedArray\\ncontaining the values for all the pixels in the display window.\\nThese values are numbers. This array is the size (include an appropriate\\nfactor for pixelDensity) of the display window x4,\\nrepresenting the R, G, B, A values in order for each pixel, moving from\\nleft to right across each row, then down each column. Retina and other\\nhigh density displays will have more pixels[] (by a factor of\\npixelDensity^2).\\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\\nretina display, there will be 160,000.\\n\\nThe first four values (indices 0-3) in the array will be the R, G, B, A\\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\\nset values for a pixel at (x, y):
While the above method is complex, it is flexible enough to work with\\nany pixelDensity. Note that set() will automatically take care of\\nsetting all the appropriate values in pixels[] for a given (x, y) at\\nany pixelDensity, but the performance may not be as fast when lots of\\nmodifications are made to the pixel array.\\n\\nBefore accessing this array, the data must loaded with the loadPixels()\\nfunction. After the array data has been modified, the updatePixels()\\nfunction must be run to update the changes.\\n\\nNote that this is not a standard javascript array. This means that\\nstandard javascript functions such as slice() or\\narrayCopy() do not\\nwork.
\\nlet pink = color(255, 102, 204);\\nloadPixels();\\nlet d = pixelDensity();\\nlet halfImage = 4 * (width * d) * (height / 2 * d);\\nfor (let i = 0; i < halfImage; i += 4) {\\n pixels[i] = red(pink);\\n pixels[i + 1] = green(pink);\\n pixels[i + 2] = blue(pink);\\n pixels[i + 3] = alpha(pink);\\n}\\nupdatePixels();\\n
\\nlet img0;\\nlet img1;\\n\\nfunction preload() {\\n img0 = loadImage('assets/rockies.jpg');\\n img1 = loadImage('assets/bricks_third.jpg');\\n}\\n\\nfunction setup() {\\n background(img0);\\n image(img1, 0, 0);\\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\\n}\\n
\\nlet img0;\\nlet img1;\\n\\nfunction preload() {\\n img0 = loadImage('assets/rockies.jpg');\\n img1 = loadImage('assets/bricks_third.jpg');\\n}\\n\\nfunction setup() {\\n background(img0);\\n image(img1, 0, 0);\\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\\n}\\n
\\nlet img0;\\nlet img1;\\n\\nfunction preload() {\\n img0 = loadImage('assets/rockies.jpg');\\n img1 = loadImage('assets/bricks_third.jpg');\\n}\\n\\nfunction setup() {\\n background(img0);\\n image(img1, 0, 0);\\n blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\\n}\\n
Copies a region of the canvas to another region of the canvas\\nand copies a region of pixels from an image used as the srcImg parameter\\ninto the canvas srcImage is specified this is used as the source. If\\nthe source and destination regions aren't the same size, it will\\nautomatically resize source pixels to fit the specified\\ntarget region.
\\nlet img;\\n\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n background(img);\\n copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\\n stroke(255);\\n noFill();\\n // Rectangle shows area being copied\\n rect(7, 22, 10, 10);\\n}\\n
Applies a filter to the canvas.\\n
The presets options are:\\n
THRESHOLD\\nConverts the image to black and white pixels depending if they are above or\\nbelow the threshold defined by the level parameter. The parameter must be\\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\\n
GRAY\\nConverts any colors in the image to grayscale equivalents. No parameter\\nis used.\\n
OPAQUE\\nSets the alpha channel to entirely opaque. No parameter is used.\\n
INVERT\\nSets each pixel to its inverse value. No parameter is used.\\n
POSTERIZE\\nLimits each channel of the image to the number of colors specified as the\\nparameter. The parameter can be set to values between 2 and 255, but\\nresults are most noticeable in the lower ranges.\\n
BLUR\\nExecutes a Gaussian blur with the level parameter specifying the extent\\nof the blurring. If no parameter is used, the blur is equivalent to\\nGaussian blur of radius 1. Larger values increase the blur.\\n
ERODE\\nReduces the light areas. No parameter is used.\\n
DILATE\\nIncreases the light areas. No parameter is used.
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(THRESHOLD);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(GRAY);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(OPAQUE);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(INVERT);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(POSTERIZE, 3);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(DILATE);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(BLUR, 3);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/bricks.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n filter(ERODE);\\n}\\n
Get a region of pixels, or a single pixel, from the canvas.
Returns an array of [R,G,B,A] values for any pixel or grabs a section of\\nan image. If no parameters are specified, the entire image is returned.\\nUse the x and y parameters to get the value of one pixel. Get a section of\\nthe display window by specifying additional w and h parameters. When\\ngetting an image, the x and y parameters define the coordinates for the\\nupper-left corner of the image, regardless of the current imageMode().\\n\\nTo get the color components scaled according to the current color ranges\\nand taking into account colorMode, use getColor instead of get.\\n\\nGetting the color of a single pixel with get(x, y) is easy, but not as fast\\nas grabbing the data directly from pixels[]. The equivalent statement to\\nget(x, y) using pixels[] with pixel density d is
let x, y, d; // set these to the coordinates\\nlet off = (y * width + x) * d * 4;\\nlet components = [\\n pixels[off],\\n pixels[off + 1],\\n pixels[off + 2],\\n pixels[off + 3]\\n];\\nprint(components);\\n
See the reference for pixels[] for more information.
If you want to extract an array of colors or a subimage from an p5.Image object,\\ntake a look at p5.Image.get()
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n let c = get();\\n image(c, width / 2, 0);\\n}\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\nfunction setup() {\\n image(img, 0, 0);\\n let c = get(50, 90);\\n fill(c);\\n noStroke();\\n rect(25, 25, 50, 50);\\n}\\n
Loads the pixel data for the display window into the pixels[] array. This\\nfunction must always be called before reading from or writing to pixels[].\\nNote that only changes made with set() or direct manipulation of pixels[]\\nwill occur.
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n image(img, 0, 0, width, height);\\n let d = pixelDensity();\\n let halfImage = 4 * (width * d) * (height * d / 2);\\n loadPixels();\\n for (let i = 0; i < halfImage; i++) {\\n pixels[i + halfImage] = pixels[i];\\n }\\n updatePixels();\\n}\\n
Changes the color of any pixel, or writes an image directly to the\\ndisplay window.
The x and y parameters specify the pixel to change and the c parameter\\nspecifies the color value. This can be a p5.Color object, or [R, G, B, A]\\npixel array. It can also be a single grayscale value.\\nWhen setting an image, the x and y parameters define the coordinates for\\nthe upper-left corner of the image, regardless of the current imageMode().\\n
\\nAfter using set(), you must call updatePixels() for your changes to appear.\\nThis should be called once all pixels have been set, and must be called before\\ncalling .get() or drawing the image.\\n
Setting the color of a single pixel with set(x, y) is easy, but not as\\nfast as putting the data directly into pixels[]. Setting the pixels[]\\nvalues directly may be complicated when working with a retina display,\\nbut will perform better when lots of pixels need to be set directly on\\nevery loop.
insert a grayscale value | a pixel array |\\n a p5.Color object | a p5.Image to copy
\\nlet black = color(0);\\nset(30, 20, black);\\nset(85, 20, black);\\nset(85, 75, black);\\nset(30, 75, black);\\nupdatePixels();\\n
\\nfor (let i = 30; i < width - 15; i++) {\\n for (let j = 20; j < height - 25; j++) {\\n let c = color(204 - j, 153 - i, 0);\\n set(i, j, c);\\n }\\n}\\nupdatePixels();\\n
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/rockies.jpg');\\n}\\n\\nfunction setup() {\\n set(0, 0, img);\\n updatePixels();\\n line(0, 0, width, height);\\n line(0, height, width, 0);\\n}\\n
Updates the display window with the data in the pixels[] array.\\nUse in conjunction with loadPixels(). If you're only reading pixels from\\nthe array, there's no need to call updatePixels() — updating is only\\nnecessary to apply changes. updatePixels() should be called anytime the\\npixels array is manipulated or set() is called, and only changes made with\\nset() or direct changes to pixels[] will occur.
x-coordinate of the upper-left corner of region\\n to update
y-coordinate of the upper-left corner of region\\n to update
width of region to update
height of region to update
Loads a JSON file from a file or a URL, and returns an Object.\\nNote that even if the JSON file contains an Array, an Object will be\\nreturned with index numbers as keys.
This method is asynchronous, meaning it may not finish before the next\\nline in your sketch is executed. JSONP is supported via a polyfill and you\\ncan pass in as the second argument an object with definitions of the json\\ncallback following the syntax specified here.
This method is suitable for fetching files up to size of 64MB.
Calling loadJSON() inside preload() guarantees to complete the\\noperation before setup() and draw() are called.
\\n// Examples use USGS Earthquake API:\\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\\nlet earthquakes;\\nfunction preload() {\\n // Get the most recent earthquake in the database\\n let url =\\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\\n 'summary/all_day.geojson';\\n earthquakes = loadJSON(url);\\n}\\n\\nfunction setup() {\\n noLoop();\\n}\\n\\nfunction draw() {\\n background(200);\\n // Get the magnitude and name of the earthquake out of the loaded JSON\\n let earthquakeMag = earthquakes.features[0].properties.mag;\\n let earthquakeName = earthquakes.features[0].properties.place;\\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\\n textAlign(CENTER);\\n text(earthquakeName, 0, height - 30, width, 30);\\n}\\n
Outside of preload(), you may supply a callback function to handle the\\nobject:
\\nfunction setup() {\\n noLoop();\\n let url =\\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\\n 'summary/all_day.geojson';\\n loadJSON(url, drawEarthquake);\\n}\\n\\nfunction draw() {\\n background(200);\\n}\\n\\nfunction drawEarthquake(earthquakes) {\\n // Get the magnitude and name of the earthquake out of the loaded JSON\\n let earthquakeMag = earthquakes.features[0].properties.mag;\\n let earthquakeName = earthquakes.features[0].properties.place;\\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\\n textAlign(CENTER);\\n text(earthquakeName, 0, height - 30, width, 30);\\n}\\n
name of the file or url to load
options object for jsonp related settings
"json" or "jsonp"
function to be executed after\\n loadJSON() completes, data is passed\\n in as first argument
function to be executed if\\n there is an error, response is passed\\n in as first argument
Reads the contents of a file and creates a String array of its individual\\nlines. If the name of the file is used as the parameter, as in the above\\nexample, the file must be located in the sketch directory/folder.\\n\\nAlternatively, the file maybe be loaded from anywhere on the local\\ncomputer using an absolute path (something that starts with / on Unix and\\nLinux, or a drive letter on Windows), or the filename parameter can be a\\nURL for a file found on a network.\\n\\nThis method is asynchronous, meaning it may not finish before the next\\nline in your sketch is executed.
function to be executed after loadStrings()\\n completes, Array is passed in as first\\n argument
Calling loadStrings() inside preload() guarantees to complete the\\noperation before setup() and draw() are called.
\\nlet result;\\nfunction preload() {\\n result = loadStrings('assets/test.txt');\\n}\\n\\nfunction setup() {\\n background(200);\\n let ind = floor(random(result.length));\\n text(result[ind], 10, 10, 80, 80);\\n}\\n
\\nfunction setup() {\\n loadStrings('assets/test.txt', pickString);\\n}\\n\\nfunction pickString(result) {\\n background(200);\\n let ind = floor(random(result.length));\\n text(result[ind], 10, 10, 80, 80);\\n}\\n
Reads the contents of a file or URL and creates a p5.Table object with\\nits values. If a file is specified, it must be located in the sketch's\\n"data" folder. The filename parameter can also be a URL to a file found\\nonline. By default, the file is assumed to be comma-separated (in CSV\\nformat). Table only looks for a header row if the 'header' option is\\nincluded.
Possible options include:\\n
When passing in multiple options, pass them in as separate parameters,\\nseperated by commas. For example:\\n\\n\\nloadTable('my_csv_file.csv', 'csv', 'header');\\n\\n
\\nloadTable('my_csv_file.csv', 'csv', 'header');\\n
All files loaded and saved use UTF-8 encoding.
This method is asynchronous, meaning it may not finish before the next\\nline in your sketch is executed. Calling loadTable() inside preload()\\nguarantees to complete the operation before setup() and draw() are called.\\n
\\n// Given the following CSV file called \\\"mammals.csv\\\"\\n// located in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n //the file can be remote\\n //table = loadTable(\\\"http://p5js.org/reference/assets/mammals.csv\\\",\\n // \\\"csv\\\", \\\"header\\\");\\n}\\n\\nfunction setup() {\\n //count the columns\\n print(table.getRowCount() + ' total rows in table');\\n print(table.getColumnCount() + ' total columns in table');\\n\\n print(table.getColumn('name'));\\n //[\\\"Goat\\\", \\\"Leopard\\\", \\\"Zebra\\\"]\\n\\n //cycle through the table\\n for (let r = 0; r < table.getRowCount(); r++)\\n for (let c = 0; c < table.getColumnCount(); c++) {\\n print(table.getString(r, c));\\n }\\n}\\n
name of the file or URL to load
"header" "csv" "tsv"
function to be executed after\\n loadTable() completes. On success, the\\n Table object is passed in as the\\n first argument.
Reads the contents of a file and creates an XML object with its values.\\nIf the name of the file is used as the parameter, as in the above example,\\nthe file must be located in the sketch directory/folder.
Alternatively, the file maybe be loaded from anywhere on the local\\ncomputer using an absolute path (something that starts with / on Unix and\\nLinux, or a drive letter on Windows), or the filename parameter can be a\\nURL for a file found on a network.
This method is asynchronous, meaning it may not finish before the next\\nline in your sketch is executed. Calling loadXML() inside preload()\\nguarantees to complete the operation before setup() and draw() are called.
Outside of preload(), you may supply a callback function to handle the\\nobject.
function to be executed after loadXML()\\n completes, XML object is passed in as\\n first argument
function to be executed after loadBytes()\\n completes
function to be executed if there\\n is an error
\\nlet data;\\n\\nfunction preload() {\\n data = loadBytes('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n for (let i = 0; i < 5; i++) {\\n console.log(data.bytes[i].toString(16));\\n }\\n}\\n
Method for executing an HTTP GET request. If data type is not specified,\\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\\ncalling httpDo(path, 'GET'). The 'binary' datatype will return\\na Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer\\nwhich can be used to initialize typed arrays (such as Uint8Array).
httpDo(path, 'GET')
\\n// Examples use USGS Earthquake API:\\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\\nlet earthquakes;\\nfunction preload() {\\n // Get the most recent earthquake in the database\\n let url =\\n 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\\n 'format=geojson&limit=1&orderby=time';\\n httpGet(url, 'jsonp', false, function(response) {\\n // when the HTTP request completes, populate the variable that holds the\\n // earthquake data used in the visualization.\\n earthquakes = response;\\n });\\n}\\n\\nfunction draw() {\\n if (!earthquakes) {\\n // Wait until the earthquake data has loaded before drawing.\\n return;\\n }\\n background(200);\\n // Get the magnitude and name of the earthquake out of the loaded JSON\\n let earthquakeMag = earthquakes.features[0].properties.mag;\\n let earthquakeName = earthquakes.features[0].properties.place;\\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\\n textAlign(CENTER);\\n text(earthquakeName, 0, height - 30, width, 30);\\n noLoop();\\n}\\n
"json", "jsonp", "binary", "arrayBuffer",\\n "xml", or "text"
param data passed sent with request
function to be executed after\\n httpGet() completes, data is passed in\\n as first argument
Method for executing an HTTP POST request. If data type is not specified,\\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\\ncalling httpDo(path, 'POST').
httpDo(path, 'POST')
\\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\\n\\nlet url = 'https://jsonplaceholder.typicode.com/posts';\\nlet postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };\\n\\nfunction setup() {\\n createCanvas(800, 800);\\n}\\n\\nfunction mousePressed() {\\n // Pick new random color values\\n let r = random(255);\\n let g = random(255);\\n let b = random(255);\\n\\n httpPost(url, 'json', postData, function(result) {\\n strokeWeight(2);\\n stroke(r, g, b);\\n fill(r, g, b, 127);\\n ellipse(mouseX, mouseY, 200, 200);\\n text(result.body, mouseX, mouseY);\\n });\\n}\\n
\\nlet url = 'https://invalidURL'; // A bad URL that will cause errors\\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };\\n\\nfunction setup() {\\n createCanvas(800, 800);\\n}\\n\\nfunction mousePressed() {\\n // Pick new random color values\\n let r = random(255);\\n let g = random(255);\\n let b = random(255);\\n\\n httpPost(\\n url,\\n 'json',\\n postData,\\n function(result) {\\n // ... won't be called\\n },\\n function(error) {\\n strokeWeight(2);\\n stroke(r, g, b);\\n fill(r, g, b, 127);\\n text(error.toString(), mouseX, mouseY);\\n }\\n );\\n}\\n
"json", "jsonp", "xml", or "text".\\n If omitted, httpPost() will guess.
function to be executed after\\n httpPost() completes, data is passed in\\n as first argument
Method for executing an HTTP request. If data type is not specified,\\np5 will try to guess based on the URL, defaulting to text.\\nFor more advanced use, you may also pass in the path as the first argument\\nand a object as the second argument, the signature follows the one specified\\nin the Fetch API specification.\\nThis method is suitable for fetching files up to size of 64MB when "GET" is used.
\\n// Examples use USGS Earthquake API:\\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\\n\\n// displays an animation of all USGS earthquakes\\nlet earthquakes;\\nlet eqFeatureIndex = 0;\\n\\nfunction preload() {\\n let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\\n httpDo(\\n url,\\n {\\n method: 'GET',\\n // Other Request options, like special headers for apis\\n headers: { authorization: 'Bearer secretKey' }\\n },\\n function(res) {\\n earthquakes = res;\\n }\\n );\\n}\\n\\nfunction draw() {\\n // wait until the data is loaded\\n if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\\n return;\\n }\\n clear();\\n\\n let feature = earthquakes.features[eqFeatureIndex];\\n let mag = feature.properties.mag;\\n let rad = mag / 11 * ((width + height) / 2);\\n fill(255, 0, 0, 100);\\n ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\\n\\n if (eqFeatureIndex >= earthquakes.features.length) {\\n eqFeatureIndex = 0;\\n } else {\\n eqFeatureIndex += 1;\\n }\\n}\\n
either "GET", "POST", or "PUT",\\n defaults to "GET"
"json", "jsonp", "xml", or "text"
Request object options as documented in the\\n "fetch" API\\nreference
name of the file to be created
\\nfunction setup() {\\n createCanvas(100, 100);\\n background(200);\\n text('click here to save', 10, 10, 70, 80);\\n}\\n\\nfunction mousePressed() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n var writer = createWriter('squares.txt');\\n for (let i = 0; i < 10; i++) {\\n writer.print(i * i);\\n }\\n writer.close();\\n writer.clear();\\n }\\n}\\n
Writes data to the PrintWriter stream
all data to be written by the PrintWriter
\\n// creates a file called 'newFile.txt'\\nlet writer = createWriter('newFile.txt');\\n// write 'Hello world!'' to the file\\nwriter.write(['Hello world!']);\\n// close the PrintWriter and save the file\\nwriter.close();\\n
\\n// creates a file called 'newFile2.txt'\\nlet writer = createWriter('newFile2.txt');\\n// write 'apples,bananas,123' to the file\\nwriter.write(['apples', 'bananas', 123]);\\n// close the PrintWriter and save the file\\nwriter.close();\\n
\\n// creates a file called 'newFile3.txt'\\nlet writer = createWriter('newFile3.txt');\\n// write 'My name is: Teddy' to the file\\nwriter.write('My name is:');\\nwriter.write(' Teddy');\\n// close the PrintWriter and save the file\\nwriter.close();\\n
Writes data to the PrintWriter stream, and adds a new line at the end
all data to be printed by the PrintWriter
\\n// creates a file called 'newFile.txt'\\nlet writer = createWriter('newFile.txt');\\n// creates a file containing\\n// My name is:\\n// Teddy\\nwriter.print('My name is:');\\nwriter.print('Teddy');\\n// close the PrintWriter and save the file\\nwriter.close();\\n
\\nlet writer;\\n\\nfunction setup() {\\n createCanvas(400, 400);\\n // create a PrintWriter\\n writer = createWriter('newFile.txt');\\n}\\n\\nfunction draw() {\\n // print all mouseX and mouseY coordinates to the stream\\n writer.print([mouseX, mouseY]);\\n}\\n\\nfunction mouseClicked() {\\n // close the PrintWriter and save the file\\n writer.close();\\n}\\n
Clears the data already written to the PrintWriter object
\\n// create writer object\\nlet writer = createWriter('newFile.txt');\\nwriter.write(['clear me']);\\n// clear writer object here\\nwriter.clear();\\n// close writer\\nwriter.close();\\n
Closes the PrintWriter
\\n// create a file called 'newFile.txt'\\nlet writer = createWriter('newFile.txt');\\n// close the PrintWriter and save the file\\nwriter.close();\\n
\\n// create a file called 'newFile2.txt'\\nlet writer = createWriter('newFile2.txt');\\n// write some data to the file\\nwriter.write([100, 101, 102]);\\n// close the PrintWriter and save the file\\nwriter.close();\\n
Save an image, text, json, csv, wav, or html. Prompts download to\\nthe client's computer. Note that it is not recommended to call save()\\nwithin draw if it's looping, as the save() function will open a new save\\ndialog every frame.
The default behavior is to save the canvas as an image. You can\\noptionally specify a filename.\\nFor example:
\\n save();\\n save('myCanvas.jpg'); // save a specific canvas with a filename\\n
Alternately, the first parameter can be a pointer to a canvas\\np5.Element, an Array of Strings,\\nan Array of JSON, a JSON object, a p5.Table, a p5.Image, or a\\np5.SoundFile (requires p5.sound). The second parameter is a filename\\n(including extension). The third parameter is for options specific\\nto this type of object. This method will save a file that fits the\\ngiven parameters. For example:
\\n // Saves canvas as an image\\n save('myCanvas.jpg');\\n\\n // Saves pImage as a png image\\n let img = createImage(10, 10);\\n save(img, 'my.png');\\n\\n // Saves canvas as an image\\n let cnv = createCanvas(100, 100);\\n save(cnv, 'myCanvas.jpg');\\n\\n // Saves p5.Renderer object as an image\\n let gb = createGraphics(100, 100);\\n save(gb, 'myGraphics.jpg');\\n\\n let myTable = new p5.Table();\\n\\n // Saves table as html file\\n save(myTable, 'myTable.html');\\n\\n // Comma Separated Values\\n save(myTable, 'myTable.csv');\\n\\n // Tab Separated Values\\n save(myTable, 'myTable.tsv');\\n\\n let myJSON = { a: 1, b: true };\\n\\n // Saves pretty JSON\\n save(myJSON, 'my.json');\\n\\n // Optimizes JSON filesize\\n save(myJSON, 'my.json', true);\\n\\n // Saves array of strings to a text file with line breaks after each item\\n let arrayOfStrings = ['a', 'b'];\\n save(arrayOfStrings, 'my.txt');\\n
If filename is provided, will\\n save canvas as an image with\\n either png or jpg extension\\n depending on the filename.\\n If object is provided, will\\n save depending on the object\\n and filename (see examples\\n above).
If an object is provided as the first\\n parameter, then the second parameter\\n indicates the filename,\\n and should include an appropriate\\n file extension (see examples above).
Additional options depend on\\n filetype. For example, when saving JSON,\\n true indicates that the\\n output will be optimized for filesize,\\n rather than readability.
true
Writes the contents of an Array or a JSON object to a .json file.\\nThe file saving process and location of the saved file will\\nvary between web browsers.
If true, removes line breaks\\n and spaces from the output\\n file to optimize filesize\\n (but not readability).
\\n let json = {}; // new JSON Object\\n\\n json.id = 0;\\n json.species = 'Panthera leo';\\n json.name = 'Lion';\\n\\n function setup() {\\n createCanvas(100, 100);\\n background(200);\\n text('click here to save', 10, 10, 70, 80);\\n }\\n\\n function mousePressed() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n saveJSON(json, 'lion.json');\\n }\\n }\\n\\n // saves the following to a file called \\\"lion.json\\\":\\n // {\\n // \\\"id\\\": 0,\\n // \\\"species\\\": \\\"Panthera leo\\\",\\n // \\\"name\\\": \\\"Lion\\\"\\n // }\\n
Writes an array of Strings to a text file, one line per String.\\nThe file saving process and location of the saved file will\\nvary between web browsers.
string array to be written
filename for output
the filename's extension
\\n let words = 'apple bear cat dog';\\n\\n // .split() outputs an Array\\n let list = split(words, ' ');\\n\\n function setup() {\\n createCanvas(100, 100);\\n background(200);\\n text('click here to save', 10, 10, 70, 80);\\n }\\n\\n function mousePressed() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n saveStrings(list, 'nouns.txt');\\n }\\n }\\n\\n // Saves the following to a file called 'nouns.txt':\\n //\\n // apple\\n // bear\\n // cat\\n // dog\\n
Writes the contents of a Table object to a file. Defaults to a\\ntext file with comma-separated-values ('csv') but can also\\nuse tab separation ('tsv'), or generate an HTML table ('html').\\nThe file saving process and location of the saved file will\\nvary between web browsers.
the Table object to save to a file
the filename to which the Table should be saved
can be one of "tsv", "csv", or "html"
\\n let table;\\n\\n function setup() {\\n table = new p5.Table();\\n\\n table.addColumn('id');\\n table.addColumn('species');\\n table.addColumn('name');\\n\\n let newRow = table.addRow();\\n newRow.setNum('id', table.getRowCount() - 1);\\n newRow.setString('species', 'Panthera leo');\\n newRow.setString('name', 'Lion');\\n\\n // To save, un-comment next line then click 'run'\\n // saveTable(table, 'new.csv');\\n }\\n\\n // Saves the following to a file called 'new.csv':\\n // id,species,name\\n // 0,Panthera leo,Lion\\n
Table Options
Generic class for handling tabular data, typically from a\\nCSV, TSV, or other sort of spreadsheet file.
CSV files are\\n\\ncomma separated values, often with the data in quotes. TSV\\nfiles use tabs as separators, and usually don't bother with the\\nquotes.
File names should end with .csv if they're comma separated.
A rough "spec" for CSV can be found\\nhere.
To load files, use the loadTable method.
To save tables to your computer, use the save method\\n or the saveTable method.
Possible options include:
Use addRow() to add a new row of data to a p5.Table object. By default,\\nan empty row is created. Typically, you would store a reference to\\nthe new row in a TableRow object (see newRow in the example above),\\nand then set individual values using set().
If a p5.TableRow object is included as a parameter, then that row is\\nduplicated and added to the table.
row to be added to the table
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n //add a row\\n let newRow = table.addRow();\\n newRow.setString('id', table.getRowCount() - 1);\\n newRow.setString('species', 'Canis Lupus');\\n newRow.setString('name', 'Wolf');\\n\\n //print the results\\n for (let r = 0; r < table.getRowCount(); r++)\\n for (let c = 0; c < table.getColumnCount(); c++)\\n print(table.getString(r, c));\\n }\\n
Removes a row from the table object.
ID number of the row to remove
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n //remove the first row\\n table.removeRow(0);\\n\\n //print the results\\n for (let r = 0; r < table.getRowCount(); r++)\\n for (let c = 0; c < table.getColumnCount(); c++)\\n print(table.getString(r, c));\\n}\\n
Returns a reference to the specified p5.TableRow. The reference\\ncan then be used to get and set values of the selected row.
ID number of the row to get
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n let row = table.getRow(1);\\n //print it column by column\\n //note: a row is an object, not an array\\n for (let c = 0; c < table.getColumnCount(); c++) {\\n print(row.getString(c));\\n }\\n}\\n
Gets all rows from the table. Returns an array of p5.TableRows.
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n let rows = table.getRows();\\n\\n //warning: rows is an array of objects\\n for (let r = 0; r < rows.length; r++) {\\n rows[r].set('name', 'Unicorn');\\n }\\n\\n //print the results\\n for (let r = 0; r < table.getRowCount(); r++)\\n for (let c = 0; c < table.getColumnCount(); c++)\\n print(table.getString(r, c));\\n }\\n
Finds the first row in the Table that contains the value\\nprovided, and returns a reference to that row. Even if\\nmultiple rows are possible matches, only the first matching\\nrow is returned. The column to search may be specified by\\neither its ID or title.
The value to match
ID number or title of the\\n column to search
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n //find the animal named zebra\\n let row = table.findRow('Zebra', 'name');\\n //find the corresponding species\\n print(row.getString('species'));\\n }\\n
Finds the rows in the Table that contain the value\\nprovided, and returns references to those rows. Returns an\\nArray, so for must be used to iterate through all the rows,\\nas shown in the example above. The column to search may be\\nspecified by either its ID or title.
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n //add another goat\\n let newRow = table.addRow();\\n newRow.setString('id', table.getRowCount() - 1);\\n newRow.setString('species', 'Scape Goat');\\n newRow.setString('name', 'Goat');\\n\\n //find the rows containing animals named Goat\\n let rows = table.findRows('Goat', 'name');\\n print(rows.length + ' Goats found');\\n }\\n
Finds the first row in the Table that matches the regular\\nexpression provided, and returns a reference to that row.\\nEven if multiple rows are possible matches, only the first\\nmatching row is returned. The column to search may be\\nspecified by either its ID or title.
The regular expression to match
The column ID (number) or\\n title (string)
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n //Search using specified regex on a given column, return TableRow object\\n let mammal = table.matchRow(new RegExp('ant'), 1);\\n print(mammal.getString(1));\\n //Output \\\"Panthera pardus\\\"\\n}\\n
Finds the rows in the Table that match the regular expression provided,\\nand returns references to those rows. Returns an array, so for must be\\nused to iterate through all the rows, as shown in the example. The\\ncolumn to search may be specified by either its ID or title.
\\nlet table;\\n\\nfunction setup() {\\n table = new p5.Table();\\n\\n table.addColumn('name');\\n table.addColumn('type');\\n\\n let newRow = table.addRow();\\n newRow.setString('name', 'Lion');\\n newRow.setString('type', 'Mammal');\\n\\n newRow = table.addRow();\\n newRow.setString('name', 'Snake');\\n newRow.setString('type', 'Reptile');\\n\\n newRow = table.addRow();\\n newRow.setString('name', 'Mosquito');\\n newRow.setString('type', 'Insect');\\n\\n newRow = table.addRow();\\n newRow.setString('name', 'Lizard');\\n newRow.setString('type', 'Reptile');\\n\\n let rows = table.matchRows('R.*', 'type');\\n for (let i = 0; i < rows.length; i++) {\\n print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\\n }\\n}\\n// Sketch prints:\\n// Snake: Reptile\\n// Lizard: Reptile\\n
Retrieves all values in the specified column, and returns them\\nas an array. The column may be specified by either its ID or title.
String or Number of the column to return
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n //getColumn returns an array that can be printed directly\\n print(table.getColumn('species'));\\n //outputs [\\\"Capra hircus\\\", \\\"Panthera pardus\\\", \\\"Equus zebra\\\"]\\n }\\n
Removes all rows from a Table. While all rows are removed,\\ncolumns and column titles are maintained.
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n table.clearRows();\\n print(table.getRowCount() + ' total rows in table');\\n print(table.getColumnCount() + ' total columns in table');\\n }\\n
Use addColumn() to add a new column to a Table object.\\nTypically, you will want to specify a title, so the column\\nmay be easily referenced later by name. (If no title is\\nspecified, the new column's title will be null.)
title of the given column
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n table.addColumn('carnivore');\\n table.set(0, 'carnivore', 'no');\\n table.set(1, 'carnivore', 'yes');\\n table.set(2, 'carnivore', 'no');\\n\\n //print the results\\n for (let r = 0; r < table.getRowCount(); r++)\\n for (let c = 0; c < table.getColumnCount(); c++)\\n print(table.getString(r, c));\\n }\\n
Returns the total number of columns in a Table.
\\n // given the cvs file \\\"blobs.csv\\\" in /assets directory\\n // ID, Name, Flavor, Shape, Color\\n // Blob1, Blobby, Sweet, Blob, Pink\\n // Blob2, Saddy, Savory, Blob, Blue\\n\\n let table;\\n\\n function preload() {\\n table = loadTable('assets/blobs.csv');\\n }\\n\\n function setup() {\\n createCanvas(200, 100);\\n textAlign(CENTER);\\n background(255);\\n }\\n\\n function draw() {\\n let numOfColumn = table.getColumnCount();\\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\\n }\\n
Returns the total number of rows in a Table.
\\n // given the cvs file \\\"blobs.csv\\\" in /assets directory\\n //\\n // ID, Name, Flavor, Shape, Color\\n // Blob1, Blobby, Sweet, Blob, Pink\\n // Blob2, Saddy, Savory, Blob, Blue\\n\\n let table;\\n\\n function preload() {\\n table = loadTable('assets/blobs.csv');\\n }\\n\\n function setup() {\\n createCanvas(200, 100);\\n textAlign(CENTER);\\n background(255);\\n }\\n\\n function draw() {\\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\\n }\\n
Removes any of the specified characters (or "tokens").
If no column is specified, then the values in all columns and\\nrows are processed. A specific column may be referenced by\\neither its ID or title.
String listing characters to be removed
Column ID (number)\\n or name (string)
\\n function setup() {\\n let table = new p5.Table();\\n\\n table.addColumn('name');\\n table.addColumn('type');\\n\\n let newRow = table.addRow();\\n newRow.setString('name', ' $Lion ,');\\n newRow.setString('type', ',,,Mammal');\\n\\n newRow = table.addRow();\\n newRow.setString('name', '$Snake ');\\n newRow.setString('type', ',,,Reptile');\\n\\n table.removeTokens(',$ ');\\n print(table.getArray());\\n }\\n\\n // prints:\\n // 0 \\\"Lion\\\" \\\"Mamal\\\"\\n // 1 \\\"Snake\\\" \\\"Reptile\\\"\\n
Trims leading and trailing whitespace, such as spaces and tabs,\\nfrom String table values. If no column is specified, then the\\nvalues in all columns and rows are trimmed. A specific column\\nmay be referenced by either its ID or title.
\\n function setup() {\\n let table = new p5.Table();\\n\\n table.addColumn('name');\\n table.addColumn('type');\\n\\n let newRow = table.addRow();\\n newRow.setString('name', ' Lion ,');\\n newRow.setString('type', ' Mammal ');\\n\\n newRow = table.addRow();\\n newRow.setString('name', ' Snake ');\\n newRow.setString('type', ' Reptile ');\\n\\n table.trim();\\n print(table.getArray());\\n }\\n\\n // prints:\\n // 0 \\\"Lion\\\" \\\"Mamal\\\"\\n // 1 \\\"Snake\\\" \\\"Reptile\\\"\\n
Use removeColumn() to remove an existing column from a Table\\nobject. The column to be removed may be identified by either\\nits title (a String) or its index value (an int).\\nremoveColumn(0) would remove the first column, removeColumn(1)\\nwould remove the second column, and so on.
columnName (string) or ID (number)
\\n // Given the CSV file \\\"mammals.csv\\\"\\n // in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n table.removeColumn('id');\\n print(table.getColumnCount());\\n }\\n
Stores a value in the Table's specified row and column.\\nThe row is specified by its ID, while the column may be specified\\nby either its ID or title.
row ID
column ID (Number)\\n or title (String)
value to assign
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n table.set(0, 'species', 'Canis Lupus');\\n table.set(0, 'name', 'Wolf');\\n\\n //print the results\\n for (let r = 0; r < table.getRowCount(); r++)\\n for (let c = 0; c < table.getColumnCount(); c++)\\n print(table.getString(r, c));\\n}\\n
Stores a Float value in the Table's specified row and column.\\nThe row is specified by its ID, while the column may be specified\\nby either its ID or title.
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n table.setNum(1, 'id', 1);\\n\\n print(table.getColumn(0));\\n //[\\\"0\\\", 1, \\\"2\\\"]\\n}\\n
Stores a String value in the Table's specified row and column.\\nThe row is specified by its ID, while the column may be specified\\nby either its ID or title.
\\n// Given the CSV file \\\"mammals.csv\\\" in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n //add a row\\n let newRow = table.addRow();\\n newRow.setString('id', table.getRowCount() - 1);\\n newRow.setString('species', 'Canis Lupus');\\n newRow.setString('name', 'Wolf');\\n\\n print(table.getArray());\\n}\\n
Retrieves a value from the Table's specified row and column.\\nThe row is specified by its ID, while the column may be specified by\\neither its ID or title.
columnName (string) or\\n ID (number)
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n print(table.get(0, 1));\\n //Capra hircus\\n print(table.get(0, 'species'));\\n //Capra hircus\\n}\\n
Retrieves a Float value from the Table's specified row and column.\\nThe row is specified by its ID, while the column may be specified by\\neither its ID or title.
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n print(table.getNum(1, 0) + 100);\\n //id 1 + 100 = 101\\n}\\n
Retrieves a String value from the Table's specified row and column.\\nThe row is specified by its ID, while the column may be specified by\\neither its ID or title.
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n // table is comma separated value \\\"CSV\\\"\\n // and has specifiying header for column labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n print(table.getString(0, 0)); // 0\\n print(table.getString(0, 1)); // Capra hircus\\n print(table.getString(0, 2)); // Goat\\n print(table.getString(1, 0)); // 1\\n print(table.getString(1, 1)); // Panthera pardus\\n print(table.getString(1, 2)); // Leopard\\n print(table.getString(2, 0)); // 2\\n print(table.getString(2, 1)); // Equus zebra\\n print(table.getString(2, 2)); // Zebra\\n}\\n
Retrieves all table data and returns as an object. If a column name is\\npassed in, each row object will be stored with that attribute as its\\ntitle.
Name of the column which should be used to\\n title each row object (optional)
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder:\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leopard\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n let tableObject = table.getObject();\\n\\n print(tableObject);\\n //outputs an object\\n}\\n
Retrieves all table data and returns it as a multidimensional array.
\\n// Given the CSV file \\\"mammals.csv\\\"\\n// in the project's \\\"assets\\\" folder\\n//\\n// id,species,name\\n// 0,Capra hircus,Goat\\n// 1,Panthera pardus,Leoperd\\n// 2,Equus zebra,Zebra\\n\\nlet table;\\n\\nfunction preload() {\\n // table is comma separated value \\\"CSV\\\"\\n // and has specifiying header for column labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n}\\n\\nfunction setup() {\\n let tableArray = table.getArray();\\n for (let i = 0; i < tableArray.length; i++) {\\n print(tableArray[i]);\\n }\\n}\\n
Stores a value in the TableRow's specified column.\\nThe column may be specified by either its ID or title.
Column ID (Number)\\n or Title (String)
The value to be stored
\\n // Given the CSV file \\\"mammals.csv\\\" in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n let rows = table.getRows();\\n for (let r = 0; r < rows.length; r++) {\\n rows[r].set('name', 'Unicorn');\\n }\\n\\n //print the results\\n print(table.getArray());\\n }\\n
Stores a Float value in the TableRow's specified column.\\nThe column may be specified by either its ID or title.
The value to be stored\\n as a Float
\\n // Given the CSV file \\\"mammals.csv\\\" in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n let rows = table.getRows();\\n for (let r = 0; r < rows.length; r++) {\\n rows[r].setNum('id', r + 10);\\n }\\n\\n print(table.getArray());\\n }\\n
Stores a String value in the TableRow's specified column.\\nThe column may be specified by either its ID or title.
The value to be stored\\n as a String
\\n // Given the CSV file \\\"mammals.csv\\\" in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n let rows = table.getRows();\\n for (let r = 0; r < rows.length; r++) {\\n let name = rows[r].getString('name');\\n rows[r].setString('name', 'A ' + name + ' named George');\\n }\\n\\n print(table.getArray());\\n }\\n
Retrieves a value from the TableRow's specified column.\\nThe column may be specified by either its ID or title.
\\n // Given the CSV file \\\"mammals.csv\\\" in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n let names = [];\\n let rows = table.getRows();\\n for (let r = 0; r < rows.length; r++) {\\n names.push(rows[r].get('name'));\\n }\\n\\n print(names);\\n }\\n
Retrieves a Float value from the TableRow's specified\\ncolumn. The column may be specified by either its ID or\\ntitle.
\\n // Given the CSV file \\\"mammals.csv\\\" in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n let rows = table.getRows();\\n let minId = Infinity;\\n let maxId = -Infinity;\\n for (let r = 0; r < rows.length; r++) {\\n let id = rows[r].getNum('id');\\n minId = min(minId, id);\\n maxId = min(maxId, id);\\n }\\n print('minimum id = ' + minId + ', maximum id = ' + maxId);\\n }\\n
Retrieves an String value from the TableRow's specified\\ncolumn. The column may be specified by either its ID or\\ntitle.
\\n // Given the CSV file \\\"mammals.csv\\\" in the project's \\\"assets\\\" folder:\\n //\\n // id,species,name\\n // 0,Capra hircus,Goat\\n // 1,Panthera pardus,Leopard\\n // 2,Equus zebra,Zebra\\n\\n let table;\\n\\n function preload() {\\n //my table is comma separated value \\\"csv\\\"\\n //and has a header specifying the columns labels\\n table = loadTable('assets/mammals.csv', 'csv', 'header');\\n }\\n\\n function setup() {\\n let rows = table.getRows();\\n let longest = '';\\n for (let r = 0; r < rows.length; r++) {\\n let species = rows[r].getString('species');\\n if (longest.length < species.length) {\\n longest = species;\\n }\\n }\\n\\n print('longest: ' + longest);\\n }\\n
Gets a copy of the element's parent. Returns the parent as another\\np5.XML object.
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let children = xml.getChildren('animal');\\n let parent = children[1].getParent();\\n print(parent.getName());\\n}\\n\\n// Sketch prints:\\n// mammals\\n
Gets the element's full name, which is returned as a String.
\\n // The following short XML file called \\\"mammals.xml\\\" is parsed\\n // in the code below.\\n //\\n // \\n // <mammals>\\n // <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n // <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n // <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n // </mammals>\\n\\n let xml;\\n\\n function preload() {\\n xml = loadXML('assets/mammals.xml');\\n }\\n\\n function setup() {\\n print(xml.getName());\\n }\\n\\n // Sketch prints:\\n // mammals\\n
Sets the element's name, which is specified as a String.
new name of the node
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n print(xml.getName());\\n xml.setName('fish');\\n print(xml.getName());\\n}\\n\\n// Sketch prints:\\n// mammals\\n// fish\\n
Checks whether or not the element has any children, and returns the result\\nas a boolean.
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n print(xml.hasChildren());\\n}\\n\\n// Sketch prints:\\n// true\\n
Get the names of all of the element's children, and returns the names as an\\narray of Strings. This is the same as looping through and calling getName()\\non each child element individually.
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n print(xml.listChildren());\\n}\\n\\n// Sketch prints:\\n// [\\\"animal\\\", \\\"animal\\\", \\\"animal\\\"]\\n
Returns all of the element's children as an array of p5.XML objects. When\\nthe name parameter is specified, then it will return all children that match\\nthat name.
element name
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let animals = xml.getChildren('animal');\\n\\n for (let i = 0; i < animals.length; i++) {\\n print(animals[i].getContent());\\n }\\n}\\n\\n// Sketch prints:\\n// \\\"Goat\\\"\\n// \\\"Leopard\\\"\\n// \\\"Zebra\\\"\\n
Returns the first of the element's children that matches the name parameter\\nor the child of the given index.It returns undefined if no matching\\nchild is found.
element name or index
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.getContent());\\n}\\n\\n// Sketch prints:\\n// \\\"Goat\\\"\\n
\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let secondChild = xml.getChild(1);\\n print(secondChild.getContent());\\n}\\n\\n// Sketch prints:\\n// \\\"Leopard\\\"\\n
Appends a new child to the element. The child can be specified with\\neither a String, which will be used as the new tag's name, or as a\\nreference to an existing p5.XML object.\\nA reference to the newly created child is returned as an p5.XML object.
a p5.XML Object which will be the child to be added
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let child = new p5.XML();\\n child.setName('animal');\\n child.setAttribute('id', '3');\\n child.setAttribute('species', 'Ornithorhynchus anatinus');\\n child.setContent('Platypus');\\n xml.addChild(child);\\n\\n let animals = xml.getChildren('animal');\\n print(animals[animals.length - 1].getContent());\\n}\\n\\n// Sketch prints:\\n// \\\"Goat\\\"\\n// \\\"Leopard\\\"\\n// \\\"Zebra\\\"\\n
Removes the element specified by name or index.
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n xml.removeChild('animal');\\n let children = xml.getChildren();\\n for (let i = 0; i < children.length; i++) {\\n print(children[i].getContent());\\n }\\n}\\n\\n// Sketch prints:\\n// \\\"Leopard\\\"\\n// \\\"Zebra\\\"\\n
\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n xml.removeChild(1);\\n let children = xml.getChildren();\\n for (let i = 0; i < children.length; i++) {\\n print(children[i].getContent());\\n }\\n}\\n\\n// Sketch prints:\\n// \\\"Goat\\\"\\n// \\\"Zebra\\\"\\n
Counts the specified element's number of attributes, returned as an Number.
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.getAttributeCount());\\n}\\n\\n// Sketch prints:\\n// 2\\n
Gets all of the specified element's attributes, and returns them as an\\narray of Strings.
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.listAttributes());\\n}\\n\\n// Sketch prints:\\n// [\\\"id\\\", \\\"species\\\"]\\n
Checks whether or not an element has the specified attribute.
attribute to be checked
\\n // The following short XML file called \\\"mammals.xml\\\" is parsed\\n // in the code below.\\n //\\n // \\n // <mammals>\\n // <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n // <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n // <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n // </mammals>\\n\\n let xml;\\n\\n function preload() {\\n xml = loadXML('assets/mammals.xml');\\n }\\n\\n function setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.hasAttribute('species'));\\n print(firstChild.hasAttribute('color'));\\n }\\n\\n // Sketch prints:\\n // true\\n // false\\n
Returns an attribute value of the element as an Number. If the defaultValue\\nparameter is specified and the attribute doesn't exist, then defaultValue\\nis returned. If no defaultValue is specified and the attribute doesn't\\nexist, the value 0 is returned.
the non-null full name of the attribute
the default value of the attribute
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.getNum('id'));\\n}\\n\\n// Sketch prints:\\n// 0\\n
Returns an attribute value of the element as an String. If the defaultValue\\nparameter is specified and the attribute doesn't exist, then defaultValue\\nis returned. If no defaultValue is specified and the attribute doesn't\\nexist, null is returned.
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.getString('species'));\\n}\\n\\n// Sketch prints:\\n// \\\"Capra hircus\\\"\\n
Sets the content of an element's attribute. The first parameter specifies\\nthe attribute name, while the second specifies the new content.
the full name of the attribute
the value of the attribute
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.getString('species'));\\n firstChild.setAttribute('species', 'Jamides zebra');\\n print(firstChild.getString('species'));\\n}\\n\\n// Sketch prints:\\n// \\\"Capra hircus\\\"\\n// \\\"Jamides zebra\\\"\\n
Returns the content of an element. If there is no such content,\\ndefaultValue is returned if specified, otherwise null is returned.
value returned if no content is found
Sets the element's content.
the new content
\\n// The following short XML file called \\\"mammals.xml\\\" is parsed\\n// in the code below.\\n//\\n// \\n// <mammals>\\n// <animal id=\\\"0\\\" species=\\\"Capra hircus\\\">Goat</animal>\\n// <animal id=\\\"1\\\" species=\\\"Panthera pardus\\\">Leopard</animal>\\n// <animal id=\\\"2\\\" species=\\\"Equus zebra\\\">Zebra</animal>\\n// </mammals>\\n\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n let firstChild = xml.getChild('animal');\\n print(firstChild.getContent());\\n firstChild.setContent('Mountain Goat');\\n print(firstChild.getContent());\\n}\\n\\n// Sketch prints:\\n// \\\"Goat\\\"\\n// \\\"Mountain Goat\\\"\\n
Serializes the element into a string. This function is useful for preparing\\nthe content to be sent over a http request or saved to file.
\\nlet xml;\\n\\nfunction preload() {\\n xml = loadXML('assets/mammals.xml');\\n}\\n\\nfunction setup() {\\n print(xml.serialize());\\n}\\n\\n// Sketch prints:\\n// \\n// Goat\\n// Leopard\\n// Zebra\\n// \\n
Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\\nThe absolute value of a number is always positive.
number to compute
\\nfunction setup() {\\n let x = -3;\\n let y = abs(x);\\n\\n print(x); // -3\\n print(y); // 3\\n}\\n
Calculates the closest int value that is greater than or equal to the\\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\\nreturns the value 10.
number to round up
\\nfunction draw() {\\n background(200);\\n // map, mouseX between 0 and 5.\\n let ax = map(mouseX, 0, 100, 0, 5);\\n let ay = 66;\\n\\n //Get the ceiling of the mapped number.\\n let bx = ceil(map(mouseX, 0, 100, 0, 5));\\n let by = 33;\\n\\n // Multiply the mapped numbers by 20 to more easily\\n // see the changes.\\n stroke(0);\\n fill(0);\\n line(0, ay, ax * 20, ay);\\n line(0, by, bx * 20, by);\\n\\n // Reformat the float returned by map and draw it.\\n noStroke();\\n text(nfc(ax, 2), ax, ay - 5);\\n text(nfc(bx, 1), bx, by - 5);\\n}\\n
Constrains a value between a minimum and maximum value.
number to constrain
minimum limit
maximum limit
\\nfunction draw() {\\n background(200);\\n\\n let leftWall = 25;\\n let rightWall = 75;\\n\\n // xm is just the mouseX, while\\n // xc is the mouseX, but constrained\\n // between the leftWall and rightWall!\\n let xm = mouseX;\\n let xc = constrain(mouseX, leftWall, rightWall);\\n\\n // Draw the walls.\\n stroke(150);\\n line(leftWall, 0, leftWall, height);\\n line(rightWall, 0, rightWall, height);\\n\\n // Draw xm and xc as circles.\\n noStroke();\\n fill(150);\\n ellipse(xm, 33, 9, 9); // Not Constrained\\n fill(0);\\n ellipse(xc, 66, 9, 9); // Constrained\\n}\\n
Calculates the distance between two points.
\\n// Move your mouse inside the canvas to see the\\n// change in distance between two points!\\nfunction draw() {\\n background(200);\\n fill(0);\\n\\n let x1 = 10;\\n let y1 = 90;\\n let x2 = mouseX;\\n let y2 = mouseY;\\n\\n line(x1, y1, x2, y2);\\n ellipse(x1, y1, 7, 7);\\n ellipse(x2, y2, 7, 7);\\n\\n // d is the length of the line\\n // the distance from point 1 to point 2.\\n let d = int(dist(x1, y1, x2, y2));\\n\\n // Let's write d along the line we are drawing!\\n push();\\n translate((x1 + x2) / 2, (y1 + y2) / 2);\\n rotate(atan2(y2 - y1, x2 - x1));\\n text(nfc(d, 1), 0, -5);\\n pop();\\n // Fancy!\\n}\\n
z-coordinate of the first point
z-coordinate of the second point
Returns Euler's number e (2.71828...) raised to the power of the n\\nparameter. Maps to Math.exp().
exponent to raise
\\nfunction draw() {\\n background(200);\\n\\n // Compute the exp() function with a value between 0 and 2\\n let xValue = map(mouseX, 0, width, 0, 2);\\n let yValue = exp(xValue);\\n\\n let y = map(yValue, 0, 8, height, 0);\\n\\n let legend = 'exp (' + nfc(xValue, 3) + ')\\\\n= ' + nf(yValue, 1, 4);\\n stroke(150);\\n line(mouseX, y, mouseX, height);\\n fill(0);\\n text(legend, 5, 15);\\n noStroke();\\n ellipse(mouseX, y, 7, 7);\\n\\n // Draw the exp(x) curve,\\n // over the domain of x from 0 to 2\\n noFill();\\n stroke(0);\\n beginShape();\\n for (let x = 0; x < width; x++) {\\n xValue = map(x, 0, width, 0, 2);\\n yValue = exp(xValue);\\n y = map(yValue, 0, 8, height, 0);\\n vertex(x, y);\\n }\\n\\n endShape();\\n line(0, 0, 0, height);\\n line(0, height - 1, width, height - 1);\\n}\\n
Calculates the closest int value that is less than or equal to the\\nvalue of the parameter. Maps to Math.floor().
number to round down
\\nfunction draw() {\\n background(200);\\n //map, mouseX between 0 and 5.\\n let ax = map(mouseX, 0, 100, 0, 5);\\n let ay = 66;\\n\\n //Get the floor of the mapped number.\\n let bx = floor(map(mouseX, 0, 100, 0, 5));\\n let by = 33;\\n\\n // Multiply the mapped numbers by 20 to more easily\\n // see the changes.\\n stroke(0);\\n fill(0);\\n line(0, ay, ax * 20, ay);\\n line(0, by, bx * 20, by);\\n\\n // Reformat the float returned by map and draw it.\\n noStroke();\\n text(nfc(ax, 2), ax, ay - 5);\\n text(nfc(bx, 1), bx, by - 5);\\n}\\n
Calculates a number between two numbers at a specific increment. The amt\\nparameter is the amount to interpolate between the two values where 0.0\\nequal to the first point, 0.1 is very near the first point, 0.5 is\\nhalf-way in between, and 1.0 is equal to the second point. If the\\nvalue of amt is more than 1.0 or less than 0.0, the number will be\\ncalculated accordingly in the ratio of the two given numbers. The lerp\\nfunction is convenient for creating motion along a straight\\npath and for drawing dotted lines.
first value
second value
number
\\nfunction setup() {\\n background(200);\\n let a = 20;\\n let b = 80;\\n let c = lerp(a, b, 0.2);\\n let d = lerp(a, b, 0.5);\\n let e = lerp(a, b, 0.8);\\n\\n let y = 50;\\n\\n strokeWeight(5);\\n stroke(0); // Draw the original points in black\\n point(a, y);\\n point(b, y);\\n\\n stroke(100); // Draw the lerp points in gray\\n point(c, y);\\n point(d, y);\\n point(e, y);\\n}\\n
Calculates the natural logarithm (the base-e logarithm) of a number. This\\nfunction expects the n parameter to be a value greater than 0.0. Maps to\\nMath.log().
number greater than 0
\\nfunction draw() {\\n background(200);\\n let maxX = 2.8;\\n let maxY = 1.5;\\n\\n // Compute the natural log of a value between 0 and maxX\\n let xValue = map(mouseX, 0, width, 0, maxX);\\n let yValue, y;\\n if (xValue > 0) {\\n // Cannot take the log of a negative number.\\n yValue = log(xValue);\\n y = map(yValue, -maxY, maxY, height, 0);\\n\\n // Display the calculation occurring.\\n let legend = 'log(' + nf(xValue, 1, 2) + ')\\\\n= ' + nf(yValue, 1, 3);\\n stroke(150);\\n line(mouseX, y, mouseX, height);\\n fill(0);\\n text(legend, 5, 15);\\n noStroke();\\n ellipse(mouseX, y, 7, 7);\\n }\\n\\n // Draw the log(x) curve,\\n // over the domain of x from 0 to maxX\\n noFill();\\n stroke(0);\\n beginShape();\\n for (let x = 0; x < width; x++) {\\n xValue = map(x, 0, width, 0, maxX);\\n yValue = log(xValue);\\n y = map(yValue, -maxY, maxY, height, 0);\\n vertex(x, y);\\n }\\n endShape();\\n line(0, 0, 0, height);\\n line(0, height / 2, width, height / 2);\\n}\\n
Calculates the magnitude (or length) of a vector. A vector is a direction\\nin space commonly used in computer graphics and linear algebra. Because it\\nhas no "start" position, the magnitude of a vector can be thought of as\\nthe distance from the coordinate 0,0 to its x,y value. Therefore, mag() is\\na shortcut for writing dist(0, 0, x, y).
\\nfunction setup() {\\n let x1 = 20;\\n let x2 = 80;\\n let y1 = 30;\\n let y2 = 70;\\n\\n line(0, 0, x1, y1);\\n print(mag(x1, y1)); // Prints \\\"36.05551275463989\\\"\\n line(0, 0, x2, y1);\\n print(mag(x2, y1)); // Prints \\\"85.44003745317531\\\"\\n line(0, 0, x1, y2);\\n print(mag(x1, y2)); // Prints \\\"72.80109889280519\\\"\\n line(0, 0, x2, y2);\\n print(mag(x2, y2)); // Prints \\\"106.3014581273465\\\"\\n}\\n
Re-maps a number from one range to another.\\n\\nIn the first example above, the number 25 is converted from a value in the\\nrange of 0 to 100 into a value that ranges from the left edge of the\\nwindow (0) to the right edge (width).
the incoming value to be converted
lower bound of the value's current range
upper bound of the value's current range
lower bound of the value's target range
upper bound of the value's target range
constrain the value to the newly mapped range
\\nlet value = 25;\\nlet m = map(value, 0, 100, 0, width);\\nellipse(m, 50, 10, 10);\\n
\\nfunction setup() {\\n noStroke();\\n}\\n\\nfunction draw() {\\n background(204);\\n let x1 = map(mouseX, 0, width, 25, 75);\\n ellipse(x1, 25, 25, 25);\\n //This ellipse is constrained to the 0-100 range\\n //after setting withinBounds to true\\n let x2 = map(mouseX, 0, width, 0, 100, true);\\n ellipse(x2, 75, 25, 25);\\n}\\n
Determines the largest value in a sequence of numbers, and then returns\\nthat value. max() accepts any number of Number parameters, or an Array\\nof any length.
\\nfunction setup() {\\n // Change the elements in the array and run the sketch\\n // to show how max() works!\\n let numArray = [2, 1, 5, 4, 8, 9];\\n fill(0);\\n noStroke();\\n text('Array Elements', 0, 10);\\n // Draw all numbers in the array\\n let spacing = 15;\\n let elemsY = 25;\\n for (let i = 0; i < numArray.length; i++) {\\n text(numArray[i], i * spacing, elemsY);\\n }\\n let maxX = 33;\\n let maxY = 80;\\n // Draw the Maximum value in the array.\\n textSize(32);\\n text(max(numArray), maxX, maxY);\\n}\\n
Number to compare
Numbers to compare
Determines the smallest value in a sequence of numbers, and then returns\\nthat value. min() accepts any number of Number parameters, or an Array\\nof any length.
\\nfunction setup() {\\n // Change the elements in the array and run the sketch\\n // to show how min() works!\\n let numArray = [2, 1, 5, 4, 8, 9];\\n fill(0);\\n noStroke();\\n text('Array Elements', 0, 10);\\n // Draw all numbers in the array\\n let spacing = 15;\\n let elemsY = 25;\\n for (let i = 0; i < numArray.length; i++) {\\n text(numArray[i], i * spacing, elemsY);\\n }\\n let maxX = 33;\\n let maxY = 80;\\n // Draw the Minimum value in the array.\\n textSize(32);\\n text(min(numArray), maxX, maxY);\\n}\\n
Normalizes a number from another range into a value between 0 and 1.\\nIdentical to map(value, low, high, 0, 1).\\nNumbers outside of the range are not clamped to 0 and 1, because\\nout-of-range values are often intentional and useful. (See the example above.)
incoming value to be normalized
\\nfunction draw() {\\n background(200);\\n let currentNum = mouseX;\\n let lowerBound = 0;\\n let upperBound = width; //100;\\n let normalized = norm(currentNum, lowerBound, upperBound);\\n let lineY = 70;\\n stroke(3);\\n line(0, lineY, width, lineY);\\n //Draw an ellipse mapped to the non-normalized value.\\n noStroke();\\n fill(50);\\n let s = 7; // ellipse size\\n ellipse(currentNum, lineY, s, s);\\n\\n // Draw the guide\\n let guideY = lineY + 15;\\n text('0', 0, guideY);\\n textAlign(RIGHT);\\n text('100', width, guideY);\\n\\n // Draw the normalized value\\n textAlign(LEFT);\\n fill(0);\\n textSize(32);\\n let normalY = 40;\\n let normalX = 20;\\n text(normalized, normalX, normalY);\\n}\\n
Facilitates exponential expressions. The pow() function is an efficient\\nway of multiplying numbers by themselves (or their reciprocals) in large\\nquantities. For example, pow(3, 5) is equivalent to the expression\\n33333 and pow(3, -5) is equivalent to 1 / 33333. Maps to\\nMath.pow().
base of the exponential expression
power by which to raise the base
\\nfunction setup() {\\n //Exponentially increase the size of an ellipse.\\n let eSize = 3; // Original Size\\n let eLoc = 10; // Original Location\\n\\n ellipse(eLoc, eLoc, eSize, eSize);\\n\\n ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\\n\\n ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\\n\\n ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\\n}\\n
Calculates the integer closest to the n parameter. For example,\\nround(133.8) returns the value 134. Maps to Math.round().
number to round
\\nfunction draw() {\\n background(200);\\n //map, mouseX between 0 and 5.\\n let ax = map(mouseX, 0, 100, 0, 5);\\n let ay = 66;\\n\\n // Round the mapped number.\\n let bx = round(map(mouseX, 0, 100, 0, 5));\\n let by = 33;\\n\\n // Multiply the mapped numbers by 20 to more easily\\n // see the changes.\\n stroke(0);\\n fill(0);\\n line(0, ay, ax * 20, ay);\\n line(0, by, bx * 20, by);\\n\\n // Reformat the float returned by map and draw it.\\n noStroke();\\n text(nfc(ax, 2), ax, ay - 5);\\n text(nfc(bx, 1), bx, by - 5);\\n}\\n
Squares a number (multiplies a number by itself). The result is always a\\npositive number, as multiplying two negative numbers always yields a\\npositive result. For example, -1 * -1 = 1.
number to square
\\nfunction draw() {\\n background(200);\\n let eSize = 7;\\n let x1 = map(mouseX, 0, width, 0, 10);\\n let y1 = 80;\\n let x2 = sq(x1);\\n let y2 = 20;\\n\\n // Draw the non-squared.\\n line(0, y1, width, y1);\\n ellipse(x1, y1, eSize, eSize);\\n\\n // Draw the squared.\\n line(0, y2, width, y2);\\n ellipse(x2, y2, eSize, eSize);\\n\\n // Draw dividing line.\\n stroke(100);\\n line(0, height / 2, width, height / 2);\\n\\n // Draw text.\\n let spacing = 15;\\n noStroke();\\n fill(0);\\n text('x = ' + x1, 0, y1 + spacing);\\n text('sq(x) = ' + x2, 0, y2 + spacing);\\n}\\n
Calculates the square root of a number. The square root of a number is\\nalways positive, even though there may be a valid negative root. The\\nsquare root s of number a is such that s*s = a. It is the opposite of\\nsquaring. Maps to Math.sqrt().
non-negative number to square root
\\nfunction draw() {\\n background(200);\\n let eSize = 7;\\n let x1 = mouseX;\\n let y1 = 80;\\n let x2 = sqrt(x1);\\n let y2 = 20;\\n\\n // Draw the non-squared.\\n line(0, y1, width, y1);\\n ellipse(x1, y1, eSize, eSize);\\n\\n // Draw the squared.\\n line(0, y2, width, y2);\\n ellipse(x2, y2, eSize, eSize);\\n\\n // Draw dividing line.\\n stroke(100);\\n line(0, height / 2, width, height / 2);\\n\\n // Draw text.\\n noStroke();\\n fill(0);\\n let spacing = 15;\\n text('x = ' + x1, 0, y1 + spacing);\\n text('sqrt(x) = ' + x2, 0, y2 + spacing);\\n}\\n
Creates a new p5.Vector (the datatype for storing vectors). This provides a\\ntwo or three dimensional vector, specifically a Euclidean (also known as\\ngeometric) vector. A vector is an entity that has both magnitude and\\ndirection.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n noStroke();\\n fill(255, 102, 204);\\n}\\n\\nfunction draw() {\\n background(255);\\n pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));\\n scale(0.75);\\n sphere();\\n}\\n
Returns the Perlin noise value at specified coordinates. Perlin noise is\\na random sequence generator producing a more natural ordered, harmonic\\nsuccession of numbers compared to the standard random() function.\\nIt was invented by Ken Perlin in the 1980s and been used since in\\ngraphical applications to produce procedural textures, natural motion,\\nshapes, terrains etc. The main difference to the\\nrandom() function is that Perlin noise is defined in an infinite\\nn-dimensional space where each pair of coordinates corresponds to a\\nfixed semi-random value (fixed only for the lifespan of the program; see\\nthe noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,\\ndepending on the number of coordinates given. The resulting value will\\nalways be between 0.0 and 1.0. The noise value can be animated by moving\\nthrough the noise space as demonstrated in the example above. The 2nd\\nand 3rd dimension can also be interpreted as time.The actual\\nnoise is structured similar to an audio signal, in respect to the\\nfunction's use of frequencies. Similar to the concept of harmonics in\\nphysics, perlin noise is computed over several octaves which are added\\ntogether for the final result. Another way to adjust the\\ncharacter of the resulting sequence is the scale of the input\\ncoordinates. As the function works within an infinite space the value of\\nthe coordinates doesn't matter as such, only the distance between\\nsuccessive coordinates does (eg. when using noise() within a\\nloop). As a general rule the smaller the difference between coordinates,\\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\\nwork best for most applications, but this will differ depending on use.
x-coordinate in noise space
y-coordinate in noise space
z-coordinate in noise space
\\nlet xoff = 0.0;\\n\\nfunction draw() {\\n background(204);\\n xoff = xoff + 0.01;\\n let n = noise(xoff) * width;\\n line(n, 0, n, height);\\n}\\n
let noiseScale=0.02;\\n\\nfunction draw() {\\n background(0);\\n for (let x=0; x < width; x++) {\\n let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\\n stroke(noiseVal*255);\\n line(x, mouseY+noiseVal*80, x, height);\\n }\\n}\\n
Adjusts the character and level of detail produced by the Perlin noise\\n function. Similar to harmonics in physics, noise is computed over\\n several octaves. Lower octaves contribute more to the output signal and\\n as such define the overall intensity of the noise, whereas higher octaves\\n create finer grained details in the noise sequence.\\n \\n By default, noise is computed over 4 octaves with each octave contributing\\n exactly half than its predecessor, starting at 50% strength for the 1st\\n octave. This falloff amount can be changed by adding an additional function\\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\\n 75% impact (25% less) of the previous lower octave. Any value between\\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\\n result in greater than 1.0 values returned by noise().\\n \\n By changing these parameters, the signal created by the noise()\\n function can be adapted to fit very specific needs and characteristics.
number of octaves to be used by the noise
falloff factor for each octave
\\n let noiseVal;\\n let noiseScale = 0.02;\\nfunction setup() {\\n createCanvas(100, 100);\\n }\\nfunction draw() {\\n background(0);\\n for (let y = 0; y < height; y++) {\\n for (let x = 0; x < width / 2; x++) {\\n noiseDetail(2, 0.2);\\n noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\\n stroke(noiseVal * 255);\\n point(x, y);\\n noiseDetail(8, 0.65);\\n noiseVal = noise(\\n (mouseX + x + width / 2) * noiseScale,\\n (mouseY + y) * noiseScale\\n );\\n stroke(noiseVal * 255);\\n point(x + width / 2, y);\\n }\\n }\\n }\\n
Sets the seed value for noise(). By default, noise()\\nproduces different results each time the program is run. Set the\\nvalue parameter to a constant to return the same pseudo-random\\nnumbers each time the software is run.
the seed value
let xoff = 0.0;\\n\\nfunction setup() {\\n noiseSeed(99);\\n stroke(0, 10);\\n}\\n\\nfunction draw() {\\n xoff = xoff + .01;\\n let n = noise(xoff) * width;\\n line(n, 0, n, height);\\n}\\n
The x component of the vector
The y component of the vector
The z component of the vector
Returns a string representation of a vector v by calling String(v)\\nor v.toString(). This method is useful for logging vectors in the\\nconsole.
\\nfunction setup() {\\n let v = createVector(20, 30);\\n print(String(v)); // prints \\\"p5.Vector Object : [20, 30, 0]\\\"\\n}\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 0);\\n let v1 = createVector(mouseX, mouseY);\\n drawArrow(v0, v1, 'black');\\n\\n noStroke();\\n text(v1.toString(), 10, 25, 90, 75);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Sets the x, y, and z component of the vector using two or three separate\\nvariables, the data from a p5.Vector, or the values from a float array.
\\nfunction setup() {\\n let v = createVector(1, 2, 3);\\n v.set(4, 5, 6); // Sets vector to [4, 5, 6]\\n\\n let v1 = createVector(0, 0, 0);\\n let arr = [1, 2, 3];\\n v1.set(arr); // Sets vector to [1, 2, 3]\\n}\\n
\\nlet v0, v1;\\nfunction setup() {\\n createCanvas(100, 100);\\n\\n v0 = createVector(0, 0);\\n v1 = createVector(50, 50);\\n}\\n\\nfunction draw() {\\n background(240);\\n\\n drawArrow(v0, v1, 'black');\\n v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\\n\\n noStroke();\\n text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
the x component of the vector
the y component of the vector
the z component of the vector
the vector to set
Gets a copy of the vector, returns a p5.Vector object.
\\nlet v1 = createVector(1, 2, 3);\\nlet v2 = v1.copy();\\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\\n// Prints \\\"true\\\"\\n
Adds x, y, and z components to a vector, adds one vector to another, or\\nadds two independent vectors together. The version of the method that adds\\ntwo vectors together is a static method and returns a p5.Vector, the others\\nacts directly on the vector. See the examples for more context.
\\nlet v = createVector(1, 2, 3);\\nv.add(4, 5, 6);\\n// v's components are set to [5, 7, 9]\\n
\\n// Static method\\nlet v1 = createVector(1, 2, 3);\\nlet v2 = createVector(2, 3, 4);\\n\\nlet v3 = p5.Vector.add(v1, v2);\\n// v3 has components [3, 5, 7]\\nprint(v3);\\n
\\n// red vector + blue vector = purple vector\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 0);\\n let v1 = createVector(mouseX, mouseY);\\n drawArrow(v0, v1, 'red');\\n\\n let v2 = createVector(-30, 20);\\n drawArrow(v1, v2, 'blue');\\n\\n let v3 = p5.Vector.add(v1, v2);\\n drawArrow(v0, v3, 'purple');\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
the x component of the vector to be added
the y component of the vector to be added
the z component of the vector to be added
the vector to add
a p5.Vector to add
the vector to receive the result
Subtracts x, y, and z components from a vector, subtracts one vector from\\nanother, or subtracts two independent vectors. The version of the method\\nthat subtracts two vectors is a static method and returns a p5.Vector, the\\nother acts directly on the vector. See the examples for more context.
\\nlet v = createVector(4, 5, 6);\\nv.sub(1, 1, 1);\\n// v's components are set to [3, 4, 5]\\n
\\n// Static method\\nlet v1 = createVector(2, 3, 4);\\nlet v2 = createVector(1, 2, 3);\\n\\nlet v3 = p5.Vector.sub(v1, v2);\\n// v3 has components [1, 1, 1]\\nprint(v3);\\n
\\n// red vector - blue vector = purple vector\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 0);\\n let v1 = createVector(70, 50);\\n drawArrow(v0, v1, 'red');\\n\\n let v2 = createVector(mouseX, mouseY);\\n drawArrow(v0, v2, 'blue');\\n\\n let v3 = p5.Vector.sub(v1, v2);\\n drawArrow(v2, v3, 'purple');\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
the x component of the vector to subtract
the y component of the vector to subtract
the z component of the vector to subtract
the vector to subtract
a p5.Vector to subtract from
a p5.Vector to subtract
if undefined a new vector will be created
Multiply the vector by a scalar. The static version of this method\\ncreates a new p5.Vector while the non static version acts on the vector\\ndirectly. See the examples for more context.
\\nlet v = createVector(1, 2, 3);\\nv.mult(2);\\n// v's components are set to [2, 4, 6]\\n
\\n// Static method\\nlet v1 = createVector(1, 2, 3);\\nlet v2 = p5.Vector.mult(v1, 2);\\n// v2 has components [2, 4, 6]\\nprint(v2);\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(50, 50);\\n let v1 = createVector(25, -25);\\n drawArrow(v0, v1, 'red');\\n\\n let num = map(mouseX, 0, width, -2, 2, true);\\n let v2 = p5.Vector.mult(v1, num);\\n drawArrow(v0, v2, 'blue');\\n\\n noStroke();\\n text('multiplied by ' + num.toFixed(2), 5, 90);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
the number to multiply with the vector
the vector to multiply
Divide the vector by a scalar. The static version of this method creates a\\nnew p5.Vector while the non static version acts on the vector directly.\\nSee the examples for more context.
\\nlet v = createVector(6, 4, 2);\\nv.div(2); //v's components are set to [3, 2, 1]\\n
\\n// Static method\\nlet v1 = createVector(6, 4, 2);\\nlet v2 = p5.Vector.div(v1, 2);\\n// v2 has components [3, 2, 1]\\nprint(v2);\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 100);\\n let v1 = createVector(50, -50);\\n drawArrow(v0, v1, 'red');\\n\\n let num = map(mouseX, 0, width, 10, 0.5, true);\\n let v2 = p5.Vector.div(v1, num);\\n drawArrow(v0, v2, 'blue');\\n\\n noStroke();\\n text('divided by ' + num.toFixed(2), 10, 90);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
the number to divide the vector by
the vector to divide
Calculates the magnitude (length) of the vector and returns the result as\\na float (this is simply the equation sqrt(xx + yy + z*z).)
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 0);\\n let v1 = createVector(mouseX, mouseY);\\n drawArrow(v0, v1, 'black');\\n\\n noStroke();\\n text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
\\nlet v = createVector(20.0, 30.0, 40.0);\\nlet m = v.mag();\\nprint(m); // Prints \\\"53.85164807134504\\\"\\n
the vector to return the magnitude of
Calculates the squared magnitude of the vector and returns the result\\nas a float (this is simply the equation (xx + yy + z*z).)\\nFaster if the real length is not required in the\\ncase of comparing vectors, etc.
\\n// Static method\\nlet v1 = createVector(6, 4, 2);\\nprint(v1.magSq()); // Prints \\\"56\\\"\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 0);\\n let v1 = createVector(mouseX, mouseY);\\n drawArrow(v0, v1, 'black');\\n\\n noStroke();\\n text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Calculates the dot product of two vectors. The version of the method\\nthat computes the dot product of two independent vectors is a static\\nmethod. See the examples for more context.
\\nlet v1 = createVector(1, 2, 3);\\nlet v2 = createVector(2, 3, 4);\\n\\nprint(v1.dot(v2)); // Prints \\\"20\\\"\\n
\\n//Static method\\nlet v1 = createVector(1, 2, 3);\\nlet v2 = createVector(3, 2, 1);\\nprint(p5.Vector.dot(v1, v2)); // Prints \\\"10\\\"\\n
value component of the vector or a p5.Vector
the first p5.Vector
the second p5.Vector
Calculates and returns a vector composed of the cross product between\\ntwo vectors. Both the static and non static methods return a new p5.Vector.\\nSee the examples for more context.
\\nlet v1 = createVector(1, 2, 3);\\nlet v2 = createVector(1, 2, 3);\\n\\nv1.cross(v2); // v's components are [0, 0, 0]\\n
\\n// Static method\\nlet v1 = createVector(1, 0, 0);\\nlet v2 = createVector(0, 1, 0);\\n\\nlet crossProduct = p5.Vector.cross(v1, v2);\\n// crossProduct has components [0, 0, 1]\\nprint(crossProduct);\\n
p5.Vector to be crossed
Calculates the Euclidean distance between two points (considering a\\npoint as a vector object).
\\nlet v1 = createVector(1, 0, 0);\\nlet v2 = createVector(0, 1, 0);\\n\\nlet distance = v1.dist(v2); // distance is 1.4142...\\nprint(distance);\\n
\\n// Static method\\nlet v1 = createVector(1, 0, 0);\\nlet v2 = createVector(0, 1, 0);\\n\\nlet distance = p5.Vector.dist(v1, v2);\\n// distance is 1.4142...\\nprint(distance);\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 0);\\n\\n let v1 = createVector(70, 50);\\n drawArrow(v0, v1, 'red');\\n\\n let v2 = createVector(mouseX, mouseY);\\n drawArrow(v0, v2, 'blue');\\n\\n noStroke();\\n text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
the x, y, and z coordinates of a p5.Vector
Normalize the vector to length 1 (make it a unit vector).
\\nlet v = createVector(10, 20, 2);\\n// v has components [10.0, 20.0, 2.0]\\nv.normalize();\\n// v's components are set to\\n// [0.4454354, 0.8908708, 0.089087084]\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(50, 50);\\n let v1 = createVector(mouseX - 50, mouseY - 50);\\n\\n drawArrow(v0, v1, 'red');\\n v1.normalize();\\n drawArrow(v0, v1.mult(35), 'blue');\\n\\n noFill();\\n ellipse(50, 50, 35 * 2);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Limit the magnitude of this vector to the value used for the max\\nparameter.
the maximum magnitude for the vector
\\nlet v = createVector(10, 20, 2);\\n// v has components [10.0, 20.0, 2.0]\\nv.limit(5);\\n// v's components are set to\\n// [2.2271771, 4.4543543, 0.4454354]\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(50, 50);\\n let v1 = createVector(mouseX - 50, mouseY - 50);\\n\\n drawArrow(v0, v1, 'red');\\n drawArrow(v0, v1.limit(35), 'blue');\\n\\n noFill();\\n ellipse(50, 50, 35 * 2);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Set the magnitude of this vector to the value used for the len\\nparameter.
the new length for this vector
\\nlet v = createVector(10, 20, 2);\\n// v has components [10.0, 20.0, 2.0]\\nv.setMag(10);\\n// v's components are set to [6.0, 8.0, 0.0]\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(0, 0);\\n let v1 = createVector(50, 50);\\n\\n drawArrow(v0, v1, 'red');\\n\\n let length = map(mouseX, 0, width, 0, 141, true);\\n v1.setMag(length);\\n drawArrow(v0, v1, 'blue');\\n\\n noStroke();\\n text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Calculate the angle of rotation for this vector (only 2D vectors)
\\nfunction setup() {\\n let v1 = createVector(30, 50);\\n print(v1.heading()); // 1.0303768265243125\\n\\n v1 = createVector(40, 50);\\n print(v1.heading()); // 0.8960553845713439\\n\\n v1 = createVector(30, 70);\\n print(v1.heading()); // 1.1659045405098132\\n}\\n
\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(50, 50);\\n let v1 = createVector(mouseX - 50, mouseY - 50);\\n\\n drawArrow(v0, v1, 'black');\\n\\n let myHeading = v1.heading();\\n noStroke();\\n text(\\n 'vector heading: ' +\\n myHeading.toFixed(2) +\\n ' radians or ' +\\n degrees(myHeading).toFixed(2) +\\n ' degrees',\\n 10,\\n 50,\\n 90,\\n 50\\n );\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Rotate the vector by an angle (only 2D vectors), magnitude remains the\\nsame
the angle of rotation
\\nlet v = createVector(10.0, 20.0);\\n// v has components [10.0, 20.0, 0.0]\\nv.rotate(HALF_PI);\\n// v's components are set to [-20.0, 9.999999, 0.0]\\n
\\nlet angle = 0;\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(50, 50);\\n let v1 = createVector(50, 0);\\n\\n drawArrow(v0, v1.rotate(angle), 'black');\\n angle += 0.01;\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Calculates and returns the angle (in radians) between two vectors.
x, y, and z components of a p5.Vector
\\nlet v1 = createVector(1, 0, 0);\\nlet v2 = createVector(0, 1, 0);\\n\\nlet angle = v1.angleBetween(v2);\\n// angle is PI/2\\nprint(angle);\\n
\\nfunction draw() {\\n background(240);\\n let v0 = createVector(50, 50);\\n\\n let v1 = createVector(50, 0);\\n drawArrow(v0, v1, 'red');\\n\\n let v2 = createVector(mouseX - 50, mouseY - 50);\\n drawArrow(v0, v2, 'blue');\\n\\n let angleBetween = v1.angleBetween(v2);\\n noStroke();\\n text(\\n 'angle between: ' +\\n angleBetween.toFixed(2) +\\n ' radians or ' +\\n degrees(angleBetween).toFixed(2) +\\n ' degrees',\\n 10,\\n 50,\\n 90,\\n 50\\n );\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Linear interpolate the vector to another vector
\\nlet v = createVector(1, 1, 0);\\n\\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\\n
\\nlet v1 = createVector(0, 0, 0);\\nlet v2 = createVector(100, 100, 0);\\n\\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\\n// v3 has components [50,50,0]\\nprint(v3);\\n
\\nlet step = 0.01;\\nlet amount = 0;\\n\\nfunction draw() {\\n background(240);\\n let v0 = createVector(0, 0);\\n\\n let v1 = createVector(mouseX, mouseY);\\n drawArrow(v0, v1, 'red');\\n\\n let v2 = createVector(90, 90);\\n drawArrow(v0, v2, 'blue');\\n\\n if (amount > 1 || amount < 0) {\\n step *= -1;\\n }\\n amount += step;\\n let v3 = p5.Vector.lerp(v1, v2, amount);\\n\\n drawArrow(v0, v3, 'purple');\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
the x component
the y component
the z component
the amount of interpolation; some value between 0.0\\n (old vector) and 1.0 (new vector). 0.9 is very near\\n the new vector. 0.5 is halfway in between.
the p5.Vector to lerp to
Return a representation of this vector as a float array. This is only\\nfor temporary use. If used in any other fashion, the contents should be\\ncopied by using the p5.Vector.copy() method to copy into your own\\narray.
\\nfunction setup() {\\n let v = createVector(20, 30);\\n print(v.array()); // Prints : Array [20, 30, 0]\\n}\\n
\\nlet v = createVector(10.0, 20.0, 30.0);\\nlet f = v.array();\\nprint(f[0]); // Prints \\\"10.0\\\"\\nprint(f[1]); // Prints \\\"20.0\\\"\\nprint(f[2]); // Prints \\\"30.0\\\"\\n
Equality check against a p5.Vector
\\nlet v1 = createVector(5, 10, 20);\\nlet v2 = createVector(5, 10, 20);\\nlet v3 = createVector(13, 10, 19);\\n\\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\\n
\\nlet v1 = createVector(10.0, 20.0, 30.0);\\nlet v2 = createVector(10.0, 20.0, 30.0);\\nlet v3 = createVector(0.0, 0.0, 0.0);\\nprint(v1.equals(v2)); // true\\nprint(v1.equals(v3)); // false\\n
the vector to compare
Make a new 2D vector from an angle
the desired angle, in radians
the length of the new vector (defaults to 1)
\\nfunction draw() {\\n background(200);\\n\\n // Create a variable, proportional to the mouseX,\\n // varying from 0-360, to represent an angle in degrees.\\n angleMode(DEGREES);\\n let myDegrees = map(mouseX, 0, width, 0, 360);\\n\\n // Display that variable in an onscreen text.\\n // (Note the nfc() function to truncate additional decimal places,\\n // and the \\\"\\\\xB0\\\" character for the degree symbol.)\\n let readout = 'angle = ' + nfc(myDegrees, 1) + '\\\\xB0';\\n noStroke();\\n fill(0);\\n text(readout, 5, 15);\\n\\n // Create a p5.Vector using the fromAngle function,\\n // and extract its x and y components.\\n let v = p5.Vector.fromAngle(radians(myDegrees), 30);\\n let vx = v.x;\\n let vy = v.y;\\n\\n push();\\n translate(width / 2, height / 2);\\n noFill();\\n stroke(150);\\n line(0, 0, 30, 0);\\n stroke(0);\\n line(0, 0, vx, vy);\\n pop();\\n}\\n
Make a new 3D vector from a pair of ISO spherical angles
the polar angle, in radians (zero is up)
the azimuthal angle, in radians\\n (zero is out of the screen)
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n fill(255);\\n noStroke();\\n}\\nfunction draw() {\\n background(255);\\n\\n let t = millis() / 1000;\\n\\n // add three point lights\\n pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\\n pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\\n pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\\n\\n sphere(35);\\n}\\n
Make a new 2D unit vector from a random angle
\\nlet v = p5.Vector.random2D();\\n// May make v's attributes something like:\\n// [0.61554617, -0.51195765, 0.0] or\\n// [-0.4695841, -0.14366731, 0.0] or\\n// [0.6091097, -0.22805278, 0.0]\\nprint(v);\\n
\\nfunction setup() {\\n frameRate(1);\\n}\\n\\nfunction draw() {\\n background(240);\\n\\n let v0 = createVector(50, 50);\\n let v1 = p5.Vector.random2D();\\n drawArrow(v0, v1.mult(50), 'black');\\n}\\n\\n// draw an arrow for a vector at a given base position\\nfunction drawArrow(base, vec, myColor) {\\n push();\\n stroke(myColor);\\n strokeWeight(3);\\n fill(myColor);\\n translate(base.x, base.y);\\n line(0, 0, vec.x, vec.y);\\n rotate(vec.heading());\\n let arrowSize = 7;\\n translate(vec.mag() - arrowSize, 0);\\n triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\\n pop();\\n}\\n
Make a new random 3D unit vector.
\\nlet v = p5.Vector.random3D();\\n// May make v's attributes something like:\\n// [0.61554617, -0.51195765, 0.599168] or\\n// [-0.4695841, -0.14366731, -0.8711202] or\\n// [0.6091097, -0.22805278, -0.7595902]\\nprint(v);\\n
Multiplies a vector by a scalar and returns a new vector.
Divides a vector by a scalar and returns a new vector.
Calculates the dot product of two vectors.
Calculates the cross product of two vectors.
Linear interpolate a vector to another vector and return the result as a\\nnew vector.
Sets the seed value for random().
By default, random() produces different results each time the program\\nis run. Set the seed parameter to a constant to return the same\\npseudo-random numbers each time the software is run.
\\nrandomSeed(99);\\nfor (let i = 0; i < 100; i++) {\\n let r = random(0, 255);\\n stroke(r);\\n line(i, 0, i, 100);\\n}\\n
Return a random floating-point number.
Takes either 0, 1 or 2 arguments.
If no argument is given, returns a random number from 0\\nup to (but not including) 1.
If one argument is given and it is a number, returns a random number from 0\\nup to (but not including) the number.
If one argument is given and it is an array, returns a random element from\\nthat array.
If two arguments are given, returns a random number from the\\nfirst argument up to (but not including) the second argument.
\\nfor (let i = 0; i < 100; i++) {\\n let r = random(50);\\n stroke(r * 5);\\n line(50, i, 50 + r, i);\\n}\\n
\\nfor (let i = 0; i < 100; i++) {\\n let r = random(-50, 50);\\n line(50, i, 50 + r, i);\\n}\\n
\\n// Get a random element from an array using the random(Array) syntax\\nlet words = ['apple', 'bear', 'cat', 'dog'];\\nlet word = random(words); // select random word\\ntext(word, 10, 50); // draw the word\\n
the lower bound (inclusive)
the upper bound (exclusive)
the array to choose from
Returns a random number fitting a Gaussian, or\\n normal, distribution. There is theoretically no minimum or maximum\\n value that randomGaussian() might return. Rather, there is\\n just a very low probability that values far from the mean will be\\n returned; and a higher probability that numbers near the mean will\\n be returned.\\n \\n Takes either 0, 1 or 2 arguments.\\n If no args, returns a mean of 0 and standard deviation of 1.\\n If one arg, that arg is the mean (standard deviation is 1).\\n If two args, first is mean, second is standard deviation.
the mean
the standard deviation
\\n for (let y = 0; y < 100; y++) {\\n let x = randomGaussian(50, 15);\\n line(50, y, x, y);\\n }\\n
\\n let distribution = new Array(360);\\nfunction setup() {\\n createCanvas(100, 100);\\n for (let i = 0; i < distribution.length; i++) {\\n distribution[i] = floor(randomGaussian(0, 15));\\n }\\n }\\nfunction draw() {\\n background(204);\\n translate(width / 2, width / 2);\\n for (let i = 0; i < distribution.length; i++) {\\n rotate(TWO_PI / distribution.length);\\n stroke(0);\\n let dist = abs(distribution[i]);\\n line(0, 0, dist, 0);\\n }\\n }\\n
The inverse of cos(), returns the arc cosine of a value. This function\\nexpects the values in the range of -1 to 1 and values are returned in\\nthe range 0 to PI (3.1415927).
the value whose arc cosine is to be returned
\\nlet a = PI;\\nlet c = cos(a);\\nlet ac = acos(c);\\n// Prints: \\\"3.1415927 : -1.0 : 3.1415927\\\"\\nprint(a + ' : ' + c + ' : ' + ac);\\n
\\nlet a = PI + PI / 4.0;\\nlet c = cos(a);\\nlet ac = acos(c);\\n// Prints: \\\"3.926991 : -0.70710665 : 2.3561943\\\"\\nprint(a + ' : ' + c + ' : ' + ac);\\n
The inverse of sin(), returns the arc sine of a value. This function\\nexpects the values in the range of -1 to 1 and values are returned\\nin the range -PI/2 to PI/2.
the value whose arc sine is to be returned
\\nlet a = PI + PI / 3;\\nlet s = sin(a);\\nlet as = asin(s);\\n// Prints: \\\"1.0471976 : 0.86602545 : 1.0471976\\\"\\nprint(a + ' : ' + s + ' : ' + as);\\n
\\nlet a = PI + PI / 3.0;\\nlet s = sin(a);\\nlet as = asin(s);\\n// Prints: \\\"4.1887903 : -0.86602545 : -1.0471976\\\"\\nprint(a + ' : ' + s + ' : ' + as);\\n
The inverse of tan(), returns the arc tangent of a value. This function\\nexpects the values in the range of -Infinity to Infinity (exclusive) and\\nvalues are returned in the range -PI/2 to PI/2.
the value whose arc tangent is to be returned
\\nlet a = PI + PI / 3;\\nlet t = tan(a);\\nlet at = atan(t);\\n// Prints: \\\"1.0471976 : 1.7320509 : 1.0471976\\\"\\nprint(a + ' : ' + t + ' : ' + at);\\n
\\nlet a = PI + PI / 3.0;\\nlet t = tan(a);\\nlet at = atan(t);\\n// Prints: \\\"4.1887903 : 1.7320513 : 1.0471977\\\"\\nprint(a + ' : ' + t + ' : ' + at);\\n
Calculates the angle (in radians) from a specified point to the coordinate\\norigin as measured from the positive x-axis. Values are returned as a\\nfloat in the range from PI to -PI. The atan2() function is most often used\\nfor orienting geometry to the position of the cursor.\\n\\nNote: The y-coordinate of the point is the first parameter, and the\\nx-coordinate is the second parameter, due the the structure of calculating\\nthe tangent.
y-coordinate of the point
x-coordinate of the point
\\nfunction draw() {\\n background(204);\\n translate(width / 2, height / 2);\\n let a = atan2(mouseY - height / 2, mouseX - width / 2);\\n rotate(a);\\n rect(-30, -5, 60, 10);\\n}\\n
Calculates the cosine of an angle. This function takes into account the\\ncurrent angleMode. Values are returned in the range -1 to 1.
the angle
\\nlet a = 0.0;\\nlet inc = TWO_PI / 25.0;\\nfor (let i = 0; i < 25; i++) {\\n line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\\n a = a + inc;\\n}\\n
Calculates the sine of an angle. This function takes into account the\\ncurrent angleMode. Values are returned in the range -1 to 1.
\\nlet a = 0.0;\\nlet inc = TWO_PI / 25.0;\\nfor (let i = 0; i < 25; i++) {\\n line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\\n a = a + inc;\\n}\\n
Calculates the tangent of an angle. This function takes into account\\nthe current angleMode. Values are returned in the range -1 to 1.
\\nlet a = 0.0;\\nlet inc = TWO_PI / 50.0;\\nfor (let i = 0; i < 100; i = i + 2) {\\n line(i, 50, i, 50 + tan(a) * 2.0);\\n a = a + inc;\\n}\\n
Converts a radian measurement to its corresponding value in degrees.\\nRadians and degrees are two ways of measuring the same thing. There are\\n360 degrees in a circle and 2*PI radians in a circle. For example,\\n90° = PI/2 = 1.5707964. This function does not take into account the\\ncurrent angleMode.
the radians value to convert to degrees
\\nlet rad = PI / 4;\\nlet deg = degrees(rad);\\nprint(rad + ' radians is ' + deg + ' degrees');\\n// Prints: 0.7853981633974483 radians is 45 degrees\\n
Converts a degree measurement to its corresponding value in radians.\\nRadians and degrees are two ways of measuring the same thing. There are\\n360 degrees in a circle and 2*PI radians in a circle. For example,\\n90° = PI/2 = 1.5707964. This function does not take into account the\\ncurrent angleMode.
the degree value to convert to radians
\\nlet deg = 45.0;\\nlet rad = radians(deg);\\nprint(deg + ' degrees is ' + rad + ' radians');\\n// Prints: 45 degrees is 0.7853981633974483 radians\\n
Sets the current mode of p5 to given mode. Default mode is RADIANS.
either RADIANS or DEGREES
\\nfunction draw() {\\n background(204);\\n angleMode(DEGREES); // Change the mode to DEGREES\\n let a = atan2(mouseY - height / 2, mouseX - width / 2);\\n translate(width / 2, height / 2);\\n push();\\n rotate(a);\\n rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\\n pop();\\n angleMode(RADIANS); // Change the mode to RADIANS\\n rotate(a); // variable a stays the same\\n rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\\n}\\n
Sets the current alignment for drawing text. Accepts two\\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).
The horizAlign parameter is in reference to the x value\\nof the text() function, while the vertAlign parameter is\\nin reference to the y value.
So if you write textAlign(LEFT), you are aligning the left\\nedge of your text to the x value you give in text(). If you\\nwrite textAlign(RIGHT, TOP), you are aligning the right edge\\nof your text to the x value and the top of edge of the text\\nto the y value.
\\ntextSize(16);\\ntextAlign(RIGHT);\\ntext('ABCD', 50, 30);\\ntextAlign(CENTER);\\ntext('EFGH', 50, 50);\\ntextAlign(LEFT);\\ntext('IJKL', 50, 70);\\n
\\ntextSize(16);\\nstrokeWeight(0.5);\\n\\nline(0, 12, width, 12);\\ntextAlign(CENTER, TOP);\\ntext('TOP', 0, 12, width);\\n\\nline(0, 37, width, 37);\\ntextAlign(CENTER, CENTER);\\ntext('CENTER', 0, 37, width);\\n\\nline(0, 62, width, 62);\\ntextAlign(CENTER, BASELINE);\\ntext('BASELINE', 0, 62, width);\\n\\nline(0, 87, width, 87);\\ntextAlign(CENTER, BOTTOM);\\ntext('BOTTOM', 0, 87, width);\\n
horizontal alignment, either LEFT,\\n CENTER, or RIGHT
vertical alignment, either TOP,\\n BOTTOM, CENTER, or BASELINE
Sets/gets the spacing, in pixels, between lines of text. This\\nsetting will be used in all subsequent calls to the text() function.
\\n// Text to display. The \\\"\\\\n\\\" is a \\\"new line\\\" character\\nlet lines = 'L1\\\\nL2\\\\nL3';\\ntextSize(12);\\n\\ntextLeading(10); // Set leading to 10\\ntext(lines, 10, 25);\\n\\ntextLeading(20); // Set leading to 20\\ntext(lines, 40, 25);\\n\\ntextLeading(30); // Set leading to 30\\ntext(lines, 70, 25);\\n
the size in pixels for spacing between lines
Sets/gets the current font size. This size will be used in all subsequent\\ncalls to the text() function. Font size is measured in pixels.
\\ntextSize(12);\\ntext('Font Size 12', 10, 30);\\ntextSize(14);\\ntext('Font Size 14', 10, 60);\\ntextSize(16);\\ntext('Font Size 16', 10, 90);\\n
the size of the letters in units of pixels
Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\\nNote: this may be is overridden by CSS styling. For non-system fonts\\n(opentype, truetype, etc.) please load styled fonts instead.
\\nstrokeWeight(0);\\ntextSize(12);\\ntextStyle(NORMAL);\\ntext('Font Style Normal', 10, 15);\\ntextStyle(ITALIC);\\ntext('Font Style Italic', 10, 40);\\ntextStyle(BOLD);\\ntext('Font Style Bold', 10, 65);\\ntextStyle(BOLDITALIC);\\ntext('Font Style Bold Italic', 10, 90);\\n
styling for text, either NORMAL,\\n ITALIC, BOLD or BOLDITALIC
Calculates and returns the width of any character or text string.
the String of characters to measure
\\ntextSize(28);\\n\\nlet aChar = 'P';\\nlet cWidth = textWidth(aChar);\\ntext(aChar, 0, 40);\\nline(cWidth, 0, cWidth, 50);\\n\\nlet aString = 'p5.js';\\nlet sWidth = textWidth(aString);\\ntext(aString, 0, 85);\\nline(sWidth, 50, sWidth, 100);\\n
Returns the ascent of the current font at its current size. The ascent\\nrepresents the distance, in pixels, of the tallest character above\\nthe baseline.
\\nlet base = height * 0.75;\\nlet scalar = 0.8; // Different for each font\\n\\ntextSize(32); // Set initial text size\\nlet asc = textAscent() * scalar; // Calc ascent\\nline(0, base - asc, width, base - asc);\\ntext('dp', 0, base); // Draw text on baseline\\n\\ntextSize(64); // Increase text size\\nasc = textAscent() * scalar; // Recalc ascent\\nline(40, base - asc, width, base - asc);\\ntext('dp', 40, base); // Draw text on baseline\\n
Returns the descent of the current font at its current size. The descent\\nrepresents the distance, in pixels, of the character with the longest\\ndescender below the baseline.
\\nlet base = height * 0.75;\\nlet scalar = 0.8; // Different for each font\\n\\ntextSize(32); // Set initial text size\\nlet desc = textDescent() * scalar; // Calc ascent\\nline(0, base + desc, width, base + desc);\\ntext('dp', 0, base); // Draw text on baseline\\n\\ntextSize(64); // Increase text size\\ndesc = textDescent() * scalar; // Recalc ascent\\nline(40, base + desc, width, base + desc);\\ntext('dp', 40, base); // Draw text on baseline\\n
Helper function to measure ascent and descent.
Loads an opentype font file (.otf, .ttf) from a file or a URL,\\nand returns a PFont Object. This method is asynchronous,\\nmeaning it may not finish before the next line in your sketch\\nis executed.\\n\\nThe path to the font should be relative to the HTML file\\nthat links in your sketch. Loading fonts from a URL or other\\nremote location may be blocked due to your browser's built-in\\nsecurity.
function to be executed after\\n loadFont() completes
function to be executed if\\n an error occurs
Calling loadFont() inside preload() guarantees that the load\\noperation will have completed before setup() and draw() are called.
\\nlet myFont;\\nfunction preload() {\\n myFont = loadFont('assets/inconsolata.otf');\\n}\\n\\nfunction setup() {\\n fill('#ED225D');\\n textFont(myFont);\\n textSize(36);\\n text('p5*js', 10, 50);\\n}\\n
\\nfunction setup() {\\n loadFont('assets/inconsolata.otf', drawText);\\n}\\n\\nfunction drawText(font) {\\n fill('#ED225D');\\n textFont(font, 36);\\n text('p5*js', 10, 50);\\n}\\n
You can also use the font filename string (without the file extension) to style other HTML\\nelements.
\\nfunction preload() {\\n loadFont('assets/inconsolata.otf');\\n}\\n\\nfunction setup() {\\n let myDiv = createDiv('hello there');\\n myDiv.style('font-family', 'Inconsolata');\\n}\\n
Draws text to the screen. Displays the information specified in the first\\nparameter on the screen in the position specified by the additional\\nparameters. A default font will be used unless a font is set with the\\ntextFont() function and a default size will be used unless a font is set\\nwith textSize(). Change the color of the text with the fill() function.\\nChange the outline of the text with the stroke() and strokeWeight()\\nfunctions.\\n\\nThe text displays in relation to the textAlign() function, which gives the\\noption to draw to the left, right, and center of the coordinates.\\n\\nThe x2 and y2 parameters define a rectangular area to display within and\\nmay only be used with string data. When these parameters are specified,\\nthey are interpreted based on the current rectMode() setting. Text that\\ndoes not fit completely within the rectangle specified will not be drawn\\nto the screen. If x2 and y2 are not specified, the baseline alignment is the\\ndefault, which means that the text will be drawn upwards from x and y.\\n\\nWEBGL: Only opentype/truetype fonts are supported. You must load a font using the\\nloadFont() method (see the example above).\\nstroke() currently has no effect in webgl mode.
the alphanumeric\\n symbols to be displayed
x-coordinate of text
y-coordinate of text
by default, the width of the text box,\\n see rectMode() for more info
by default, the height of the text box,\\n see rectMode() for more info
\\ntextSize(32);\\ntext('word', 10, 30);\\nfill(0, 102, 153);\\ntext('word', 10, 60);\\nfill(0, 102, 153, 51);\\ntext('word', 10, 90);\\n
\\nlet s = 'The quick brown fox jumped over the lazy dog.';\\nfill(50);\\ntext(s, 10, 10, 70, 80); // Text wraps within text box\\n
\\nlet inconsolata;\\nfunction preload() {\\n inconsolata = loadFont('assets/inconsolata.otf');\\n}\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n textFont(inconsolata);\\n textSize(width / 3);\\n textAlign(CENTER, CENTER);\\n}\\nfunction draw() {\\n background(0);\\n let time = millis();\\n rotateX(time / 1000);\\n rotateZ(time / 1234);\\n text('p5.js', 0, 0);\\n}\\n
Sets the current font that will be drawn with the text() function.\\n\\nWEBGL: Only fonts loaded via loadFont() are supported.
\\nfill(0);\\ntextSize(12);\\ntextFont('Georgia');\\ntext('Georgia', 12, 30);\\ntextFont('Helvetica');\\ntext('Helvetica', 12, 60);\\n
\\nlet fontRegular, fontItalic, fontBold;\\nfunction preload() {\\n fontRegular = loadFont('assets/Regular.otf');\\n fontItalic = loadFont('assets/Italic.ttf');\\n fontBold = loadFont('assets/Bold.ttf');\\n}\\nfunction setup() {\\n background(210);\\n fill(0)\\n .strokeWeight(0)\\n .textSize(10);\\n textFont(fontRegular);\\n text('Font Style Normal', 10, 30);\\n textFont(fontItalic);\\n text('Font Style Italic', 10, 50);\\n textFont(fontBold);\\n text('Font Style Bold', 10, 70);\\n}\\n
a font loaded via loadFont(), or a String\\nrepresenting a web safe font (a font\\nthat is generally available across all systems)
the font size to use
Underlying opentype font implementation
Returns a tight bounding box for the given text string using this\\nfont (currently only supports single lines)
a line of text
x-position
y-position
font size to use (optional) Default is 12.
opentype options (optional)\\n opentype fonts contains alignment and baseline options.\\n Default is 'LEFT' and 'alphabetic'
\\nlet font;\\nlet textString = 'Lorem ipsum dolor sit amet.';\\nfunction preload() {\\n font = loadFont('./assets/Regular.otf');\\n}\\nfunction setup() {\\n background(210);\\n\\n let bbox = font.textBounds(textString, 10, 30, 12);\\n fill(255);\\n stroke(0);\\n rect(bbox.x, bbox.y, bbox.w, bbox.h);\\n fill(0);\\n noStroke();\\n\\n textFont(font);\\n textSize(12);\\n text(textString, 10, 30);\\n}\\n
Computes an array of points following the path for specified text
font size to use (optional)
an (optional) object that can contain:
sampleFactor - the ratio of path-length to number of samples\\n(default=.1); higher values yield more points and are therefore\\nmore precise
simplifyThreshold - if set to a non-zero value, collinear points will be\\nbe removed from the polygon; the value represents the threshold angle to use\\nwhen determining whether two edges are collinear
\\nlet font;\\nfunction preload() {\\n font = loadFont('assets/inconsolata.otf');\\n}\\n\\nlet points;\\nlet bounds;\\nfunction setup() {\\n createCanvas(100, 100);\\n stroke(0);\\n fill(255, 104, 204);\\n\\n points = font.textToPoints('p5', 0, 0, 10, {\\n sampleFactor: 5,\\n simplifyThreshold: 0\\n });\\n bounds = font.textBounds(' p5 ', 0, 0, 10);\\n}\\n\\nfunction draw() {\\n background(255);\\n beginShape();\\n translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\\n for (let i = 0; i < points.length; i++) {\\n let p = points[i];\\n vertex(\\n p.x * width / bounds.w +\\n sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\\n p.y * height / bounds.h\\n );\\n }\\n endShape(CLOSE);\\n}\\n
Adds a value to the end of an array. Extends the length of\\nthe array by one. Maps to Array.push().
Array to append
to be added to the Array
\\nfunction setup() {\\n var myArray = ['Mango', 'Apple', 'Papaya'];\\n print(myArray); // ['Mango', 'Apple', 'Papaya']\\n\\n append(myArray, 'Peach');\\n print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\\n}\\n
Copies an array (or part of an array) to another array. The src array is\\ncopied to the dst array, beginning at the position specified by\\nsrcPosition and into the position specified by dstPosition. The number of\\nelements to copy is determined by length. Note that copying values\\noverwrites existing values in the destination array. To append values\\ninstead of overwriting them, use concat().\\n\\nThe simplified version with only two arguments, arrayCopy(src, dst),\\ncopies an entire array to another of the same size. It is equivalent to\\narrayCopy(src, 0, dst, 0, src.length).\\n\\nUsing this function is far more efficient for copying array data than\\niterating through a for() loop and copying each element individually.
\\nvar src = ['A', 'B', 'C'];\\nvar dst = [1, 2, 3];\\nvar srcPosition = 1;\\nvar dstPosition = 0;\\nvar length = 2;\\n\\nprint(src); // ['A', 'B', 'C']\\nprint(dst); // [ 1 , 2 , 3 ]\\n\\narrayCopy(src, srcPosition, dst, dstPosition, length);\\nprint(dst); // ['B', 'C', 3]\\n
the source Array
starting position in the source Array
the destination Array
starting position in the destination Array
number of Array elements to be copied
Concatenates two arrays, maps to Array.concat(). Does not modify the\\ninput arrays.
first Array to concatenate
second Array to concatenate
\\nfunction setup() {\\n var arr1 = ['A', 'B', 'C'];\\n var arr2 = [1, 2, 3];\\n\\n print(arr1); // ['A','B','C']\\n print(arr2); // [1,2,3]\\n\\n var arr3 = concat(arr1, arr2);\\n\\n print(arr1); // ['A','B','C']\\n print(arr2); // [1, 2, 3]\\n print(arr3); // ['A','B','C', 1, 2, 3]\\n}\\n
Reverses the order of an array, maps to Array.reverse()
Array to reverse
\\nfunction setup() {\\n var myArray = ['A', 'B', 'C'];\\n print(myArray); // ['A','B','C']\\n\\n reverse(myArray);\\n print(myArray); // ['C','B','A']\\n}\\n
Decreases an array by one element and returns the shortened array,\\nmaps to Array.pop().
Array to shorten
\\nfunction setup() {\\n var myArray = ['A', 'B', 'C'];\\n print(myArray); // ['A', 'B', 'C']\\n var newArray = shorten(myArray);\\n print(myArray); // ['A','B','C']\\n print(newArray); // ['A','B']\\n}\\n
Randomizes the order of the elements of an array. Implements\\n\\nFisher-Yates Shuffle Algorithm.
Array to shuffle
modify passed array
\\nfunction setup() {\\n var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];\\n print(regularArr);\\n shuffle(regularArr, true); // force modifications to passed array\\n print(regularArr);\\n\\n // By default shuffle() returns a shuffled cloned array:\\n var newArr = shuffle(regularArr);\\n print(regularArr);\\n print(newArr);\\n}\\n
Sorts an array of numbers from smallest to largest, or puts an array of\\nwords in alphabetical order. The original array is not modified; a\\nre-ordered array is returned. The count parameter states the number of\\nelements to sort. For example, if there are 12 elements in an array and\\ncount is set to 5, only the first 5 elements in the array will be sorted.
Array to sort
number of elements to sort, starting from 0
\\nfunction setup() {\\n var words = ['banana', 'apple', 'pear', 'lime'];\\n print(words); // ['banana', 'apple', 'pear', 'lime']\\n var count = 4; // length of array\\n\\n words = sort(words, count);\\n print(words); // ['apple', 'banana', 'lime', 'pear']\\n}\\n
\\nfunction setup() {\\n var numbers = [2, 6, 1, 5, 14, 9, 8, 12];\\n print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\\n var count = 5; // Less than the length of the array\\n\\n numbers = sort(numbers, count);\\n print(numbers); // [1,2,5,6,14,9,8,12]\\n}\\n
Inserts a value or an array of values into an existing array. The first\\nparameter specifies the initial array to be modified, and the second\\nparameter defines the data to be inserted. The third parameter is an index\\nvalue which specifies the array position from which to insert data.\\n(Remember that array index numbering starts at zero, so the first position\\nis 0, the second position is 1, and so on.)
Array to splice into
value to be spliced in
in the array from which to insert data
\\nfunction setup() {\\n var myArray = [0, 1, 2, 3, 4];\\n var insArray = ['A', 'B', 'C'];\\n print(myArray); // [0, 1, 2, 3, 4]\\n print(insArray); // ['A','B','C']\\n\\n splice(myArray, insArray, 3);\\n print(myArray); // [0,1,2,'A','B','C',3,4]\\n}\\n
Extracts an array of elements from an existing array. The list parameter\\ndefines the array from which the elements will be copied, and the start\\nand count parameters specify which elements to extract. If no count is\\ngiven, elements will be extracted from the start to the end of the array.\\nWhen specifying the start, remember that the first array element is 0.\\nThis function does not change the source array.
Array to extract from
position to begin
number of values to extract
\\nfunction setup() {\\n var myArray = [1, 2, 3, 4, 5];\\n print(myArray); // [1, 2, 3, 4, 5]\\n\\n var sub1 = subset(myArray, 0, 3);\\n var sub2 = subset(myArray, 2, 2);\\n print(sub1); // [1,2,3]\\n print(sub2); // [3,4]\\n}\\n
Converts a string to its floating point representation. The contents of a\\nstring must resemble a number, or NaN (not a number) will be returned.\\nFor example, float("1234.56") evaluates to 1234.56, but float("giraffe")\\nwill return NaN.
When an array of values is passed in, then an array of floats of the same\\nlength is returned.
float string to parse
\\nvar str = '20';\\nvar diameter = float(str);\\nellipse(width / 2, height / 2, diameter, diameter);\\n
\\nprint(float('10.31')); // 10.31\\nprint(float('Infinity')); // Infinity\\nprint(float('-Infinity')); // -Infinity\\n
Converts a boolean, string, or float to its integer representation.\\nWhen an array of values is passed in, then an int array of the same length\\nis returned.
\\nprint(int('10')); // 10\\nprint(int(10.31)); // 10\\nprint(int(-10)); // -10\\nprint(int(true)); // 1\\nprint(int(false)); // 0\\nprint(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]\\nprint(int(Infinity)); // Infinity\\nprint(int('-Infinity')); // -Infinity\\n
value to parse
the radix to convert to (default: 10)
values to parse
Converts a boolean, string or number to its string representation.\\nWhen an array of values is passed in, then an array of strings of the same\\nlength is returned.
\\nprint(str('10')); // \\\"10\\\"\\nprint(str(10.31)); // \\\"10.31\\\"\\nprint(str(-10)); // \\\"-10\\\"\\nprint(str(true)); // \\\"true\\\"\\nprint(str(false)); // \\\"false\\\"\\nprint(str([true, '10.3', 9.8])); // [ \\\"true\\\", \\\"10.3\\\", \\\"9.8\\\" ]\\n
Converts a number or string to its boolean representation.\\nFor a number, any non-zero value (positive or negative) evaluates to true,\\nwhile zero evaluates to false. For a string, the value "true" evaluates to\\ntrue, while any other value evaluates to false. When an array of number or\\nstring values is passed in, then a array of booleans of the same length is\\nreturned.
\\nprint(boolean(0)); // false\\nprint(boolean(1)); // true\\nprint(boolean('true')); // true\\nprint(boolean('abcd')); // false\\nprint(boolean([0, 12, 'true'])); // [false, true, true]\\n
Converts a number, string representation of a number, or boolean to its byte\\nrepresentation. A byte can be only a whole number between -128 and 127, so\\nwhen a value outside of this range is converted, it wraps around to the\\ncorresponding byte representation. When an array of number, string or boolean\\nvalues is passed in, then an array of bytes the same length is returned.
\\nprint(byte(127)); // 127\\nprint(byte(128)); // -128\\nprint(byte(23.4)); // 23\\nprint(byte('23.4')); // 23\\nprint(byte('hello')); // NaN\\nprint(byte(true)); // 1\\nprint(byte([0, 255, '100'])); // [0, -1, 100]\\n
Converts a number or string to its corresponding single-character\\nstring representation. If a string parameter is provided, it is first\\nparsed as an integer and then translated into a single-character string.\\nWhen an array of number or string values is passed in, then an array of\\nsingle-character strings of the same length is returned.
\\nprint(char(65)); // \\\"A\\\"\\nprint(char('65')); // \\\"A\\\"\\nprint(char([65, 66, 67])); // [ \\\"A\\\", \\\"B\\\", \\\"C\\\" ]\\nprint(join(char([65, 66, 67]), '')); // \\\"ABC\\\"\\n
Converts a single-character string to its corresponding integer\\nrepresentation. When an array of single-character string values is passed\\nin, then an array of integers of the same length is returned.
\\nprint(unchar('A')); // 65\\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\\n
Converts a number to a string in its equivalent hexadecimal notation. If a\\nsecond parameter is passed, it is used to set the number of characters to\\ngenerate in the hexadecimal notation. When an array is passed in, an\\narray of strings in hexadecimal notation of the same length is returned.
\\nprint(hex(255)); // \\\"000000FF\\\"\\nprint(hex(255, 6)); // \\\"0000FF\\\"\\nprint(hex([0, 127, 255], 6)); // [ \\\"000000\\\", \\\"00007F\\\", \\\"0000FF\\\" ]\\nprint(Infinity); // \\\"FFFFFFFF\\\"\\nprint(-Infinity); // \\\"00000000\\\"\\n
array of values to parse
Converts a string representation of a hexadecimal number to its equivalent\\ninteger value. When an array of strings in hexadecimal notation is passed\\nin, an array of integers of the same length is returned.
\\nprint(unhex('A')); // 10\\nprint(unhex('FF')); // 255\\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\\n
Combines an array of Strings into one String, each separated by the\\ncharacter(s) used for the separator parameter. To join arrays of ints or\\nfloats, it's necessary to first convert them to Strings using nf() or\\nnfs().
array of Strings to be joined
String to be placed between each item
\\nvar array = ['Hello', 'world!'];\\nvar separator = ' ';\\nvar message = join(array, separator);\\ntext(message, 5, 50);\\n
This function is used to apply a regular expression to a piece of text,\\nand return matching groups (elements found inside parentheses) as a\\nString array. If there are no matches, a null value will be returned.\\nIf no groups are specified in the regular expression, but the sequence\\nmatches, an array of length 1 (with the matched text as the first element\\nof the array) will be returned.\\n\\nTo use the function, first check to see if the result is null. If the\\nresult is null, then the sequence did not match at all. If the sequence\\ndid match, an array is returned.\\n\\nIf there are groups (specified by sets of parentheses) in the regular\\nexpression, then the contents of each will be returned in the array.\\nElement [0] of a regular expression match returns the entire matching\\nstring, and the match groups start at element [1] (the first group is [1],\\nthe second [2], and so on).
the String to be searched
the regexp to be used for matching
\\nvar string = 'Hello p5js*!';\\nvar regexp = 'p5js\\\\\\\\*';\\nvar m = match(string, regexp);\\ntext(m, 5, 50);\\n
This function is used to apply a regular expression to a piece of text,\\nand return a list of matching groups (elements found inside parentheses)\\nas a two-dimensional String array. If there are no matches, a null value\\nwill be returned. If no groups are specified in the regular expression,\\nbut the sequence matches, a two dimensional array is still returned, but\\nthe second dimension is only of length one.\\n\\nTo use the function, first check to see if the result is null. If the\\nresult is null, then the sequence did not match at all. If the sequence\\ndid match, a 2D array is returned.\\n\\nIf there are groups (specified by sets of parentheses) in the regular\\nexpression, then the contents of each will be returned in the array.\\nAssuming a loop with counter variable i, element [i][0] of a regular\\nexpression match returns the entire matching string, and the match groups\\nstart at element [i][1] (the first group is [i][1], the second [i][2],\\nand so on).
\\nvar string = 'Hello p5js*! Hello world!';\\nvar regexp = 'Hello';\\nmatchAll(string, regexp);\\n
Utility function for formatting numbers into strings. There are two\\nversions: one for formatting floats, and one for formatting ints.\\nThe values for the digits, left, and right parameters should always\\nbe positive integers.\\n(NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\\nif greater than the current length of the number.\\nFor example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\\nthe result will be 123.200.
\\nvar myFont;\\nfunction preload() {\\n myFont = loadFont('assets/fonts/inconsolata.ttf');\\n}\\nfunction setup() {\\n background(200);\\n var num1 = 321;\\n var num2 = -1321;\\n\\n noStroke();\\n fill(0);\\n textFont(myFont);\\n textSize(22);\\n\\n text(nf(num1, 4, 2), 10, 30);\\n text(nf(num2, 4, 2), 10, 80);\\n // Draw dividing line\\n stroke(120);\\n line(0, 50, width, 50);\\n}\\n
the Number to format
number of digits to the left of the\\n decimal point
number of digits to the right of the\\n decimal point
the Numbers to format
Utility function for formatting numbers into strings and placing\\nappropriate commas to mark units of 1000. There are two versions: one\\nfor formatting ints, and one for formatting an array of ints. The value\\nfor the right parameter should always be a positive integer.
\\nfunction setup() {\\n background(200);\\n var num = 11253106.115;\\n var numArr = [1, 1, 2];\\n\\n noStroke();\\n fill(0);\\n textSize(12);\\n\\n // Draw formatted numbers\\n text(nfc(num, 4), 10, 30);\\n text(nfc(numArr, 2), 10, 80);\\n\\n // Draw dividing line\\n stroke(120);\\n line(0, 50, width, 50);\\n}\\n
Utility function for formatting numbers into strings. Similar to nf() but\\nputs a "+" in front of positive numbers and a "-" in front of negative\\nnumbers. There are two versions: one for formatting floats, and one for\\nformatting ints. The values for left, and right parameters\\nshould always be positive integers.
\\nfunction setup() {\\n background(200);\\n var num1 = 11253106.115;\\n var num2 = -11253106.115;\\n\\n noStroke();\\n fill(0);\\n textSize(12);\\n\\n // Draw formatted numbers\\n text(nfp(num1, 4, 2), 10, 30);\\n text(nfp(num2, 4, 2), 10, 80);\\n\\n // Draw dividing line\\n stroke(120);\\n line(0, 50, width, 50);\\n}\\n
number of digits to the left of the decimal\\n point
Utility function for formatting numbers into strings. Similar to nf() but\\nputs an additional "_" (space) in front of positive numbers just in case to align it with negative\\nnumbers which includes "-" (minus) sign.\\nThe main usecase of nfs() can be seen when one wants to align the digits (place values) of a positive\\nnumber with some negative number (See the example to get a clear picture).\\nThere are two versions: one for formatting float, and one for formatting int.\\nThe values for the digits, left, and right parameters should always be positive integers.\\n(IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using.\\n(NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter\\nif greater than the current length of the number.\\nFor example if number is 123.2 and left parameter passed is 4 which is greater than length of 123\\n(integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than\\nthe result will be 123.200.
\\nvar myFont;\\nfunction preload() {\\n myFont = loadFont('assets/fonts/inconsolata.ttf');\\n}\\nfunction setup() {\\n background(200);\\n var num1 = 321;\\n var num2 = -1321;\\n\\n noStroke();\\n fill(0);\\n textFont(myFont);\\n textSize(22);\\n\\n // nfs() aligns num1 (positive number) with num2 (negative number) by\\n // adding a blank space in front of the num1 (positive number)\\n // [left = 4] in num1 add one 0 in front, to align the digits with num2\\n // [right = 2] in num1 and num2 adds two 0's after both numbers\\n // To see the differences check the example of nf() too.\\n text(nfs(num1, 4, 2), 10, 30);\\n text(nfs(num2, 4, 2), 10, 80);\\n // Draw dividing line\\n stroke(120);\\n line(0, 50, width, 50);\\n}\\n
The split() function maps to String.split(), it breaks a String into\\npieces using a character or string as the delimiter. The delim parameter\\nspecifies the character or characters that mark the boundaries between\\neach piece. A String[] array is returned that contains each of the pieces.
The splitTokens() function works in a similar fashion, except that it\\nsplits using a range of characters instead of a specific character or\\nsequence.
the String to be split
the String used to separate the data
\\nvar names = 'Pat,Xio,Alex';\\nvar splitString = split(names, ',');\\ntext(splitString[0], 5, 30);\\ntext(splitString[1], 5, 50);\\ntext(splitString[2], 5, 70);\\n
The splitTokens() function splits a String at one or many character\\ndelimiters or "tokens." The delim parameter specifies the character or\\ncharacters to be used as a boundary.\\n\\nIf no delim characters are specified, any whitespace character is used to\\nsplit. Whitespace characters include tab (\\\\t), line feed (\\\\n), carriage\\nreturn (\\\\r), form feed (\\\\f), and space.
list of individual Strings that will be used as\\n separators
\\nfunction setup() {\\n var myStr = 'Mango, Banana, Lime';\\n var myStrArr = splitTokens(myStr, ',');\\n\\n print(myStrArr); // prints : [\\\"Mango\\\",\\\" Banana\\\",\\\" Lime\\\"]\\n}\\n
Removes whitespace characters from the beginning and end of a String. In\\naddition to standard whitespace characters such as space, carriage return,\\nand tab, this function also removes the Unicode "nbsp" character.
\\nvar string = trim(' No new lines\\\\n ');\\ntext(string + ' here', 2, 50);\\n
a String to be trimmed
an Array of Strings to be trimmed
p5.js communicates with the clock on your computer. The day() function\\nreturns the current day as a value from 1 - 31.
\\nvar d = day();\\ntext('Current day: \\\\n' + d, 5, 50);\\n
p5.js communicates with the clock on your computer. The hour() function\\nreturns the current hour as a value from 0 - 23.
\\nvar h = hour();\\ntext('Current hour:\\\\n' + h, 5, 50);\\n
p5.js communicates with the clock on your computer. The minute() function\\nreturns the current minute as a value from 0 - 59.
\\nvar m = minute();\\ntext('Current minute: \\\\n' + m, 5, 50);\\n
Returns the number of milliseconds (thousandths of a second) since\\nstarting the program. This information is often used for timing events and\\nanimation sequences.
\\nvar millisecond = millis();\\ntext('Milliseconds \\\\nrunning: \\\\n' + millisecond, 5, 40);\\n
p5.js communicates with the clock on your computer. The month() function\\nreturns the current month as a value from 1 - 12.
\\nvar m = month();\\ntext('Current month: \\\\n' + m, 5, 50);\\n
p5.js communicates with the clock on your computer. The second() function\\nreturns the current second as a value from 0 - 59.
\\nvar s = second();\\ntext('Current second: \\\\n' + s, 5, 50);\\n
p5.js communicates with the clock on your computer. The year() function\\nreturns the current year as an integer (2014, 2015, 2016, etc).
\\nvar y = year();\\ntext('Current year: \\\\n' + y, 5, 50);\\n
Draw a plane with given a width and height
width of the plane
height of the plane
Optional number of triangle\\n subdivisions in x-dimension
Optional number of triangle\\n subdivisions in y-dimension
\\n// draw a plane\\n// with width 50 and height 50\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n plane(50, 50);\\n}\\n
Draw a box with given width, height and depth
width of the box
height of the box
depth of the box
\\n// draw a spinning box\\n// with width, height and depth of 50\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n rotateX(frameCount * 0.01);\\n rotateY(frameCount * 0.01);\\n box(50);\\n}\\n
Draw a sphere with given radius
radius of circle
number of segments,\\n the more segments the smoother geometry\\n default is 24
number of segments,\\n the more segments the smoother geometry\\n default is 16
\\n// draw a sphere with radius 40\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n sphere(40);\\n}\\n
Draw a cylinder with given radius and height
radius of the surface
height of the cylinder
number of segments in y-dimension,\\n the more segments the smoother geometry\\n default is 1
whether to draw the bottom of the cylinder
whether to draw the top of the cylinder
\\n// draw a spinning cylinder\\n// with radius 20 and height 50\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n rotateX(frameCount * 0.01);\\n rotateZ(frameCount * 0.01);\\n cylinder(20, 50);\\n}\\n
Draw a cone with given radius and height
radius of the bottom surface
height of the cone
number of segments,\\n the more segments the smoother geometry\\n default is 1
whether to draw the base of the cone
\\n// draw a spinning cone\\n// with radius 40 and height 70\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n rotateX(frameCount * 0.01);\\n rotateZ(frameCount * 0.01);\\n cone(40, 70);\\n}\\n
Draw an ellipsoid with given radius
x-radius of ellipsoid
y-radius of ellipsoid
z-radius of ellipsoid
number of segments,\\n the more segments the smoother geometry\\n default is 24. Avoid detail number above\\n 150, it may crash the browser.
number of segments,\\n the more segments the smoother geometry\\n default is 16. Avoid detail number above\\n 150, it may crash the browser.
\\n// draw an ellipsoid\\n// with radius 30, 40 and 40.\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n ellipsoid(30, 40, 40);\\n}\\n
Draw a torus with given radius and tube radius
radius of the whole ring
radius of the tube
number of segments in x-dimension,\\n the more segments the smoother geometry\\n default is 24
number of segments in y-dimension,\\n the more segments the smoother geometry\\n default is 16
\\n// draw a spinning torus\\n// with ring radius 30 and tube radius 15\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n rotateX(frameCount * 0.01);\\n rotateY(frameCount * 0.01);\\n torus(30, 15);\\n}\\n
Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking\\nand dragging will rotate the camera position about the center of the sketch,\\nright-clicking and dragging will pan the camera position without rotation,\\nand using the mouse wheel (scrolling) will move the camera closer or further\\nfrom the center of the sketch. This function can be called with parameters\\ndictating sensitivity to mouse movement along the X and Y axes. Calling\\nthis function without parameters is equivalent to calling orbitControl(1,1).\\nTo reverse direction of movement in either axis, enter a negative number\\nfor sensitivity.
sensitivity to mouse movement along X axis
sensitivity to mouse movement along Y axis
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n normalMaterial();\\n}\\nfunction draw() {\\n background(200);\\n orbitControl();\\n rotateY(0.5);\\n box(30, 50);\\n}\\n
debugMode() helps visualize 3D space by adding a grid to indicate where the\\n‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z\\ndirections. This function can be called without parameters to create a\\ndefault grid and axes icon, or it can be called according to the examples\\nabove to customize the size and position of the grid and/or axes icon. The\\ngrid is drawn using the most recently set stroke color and weight. To\\nspecify these parameters, add a call to stroke() and strokeWeight()\\njust before the end of the draw() loop.
By default, the grid will run through the origin (0,0,0) of the sketch\\nalong the XZ plane\\nand the axes icon will be offset from the origin. Both the grid and axes\\nicon will be sized according to the current canvas size. Note that because the\\ngrid runs parallel to the default camera view, it is often helpful to use\\ndebugMode along with orbitControl to allow full view of the grid.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\\n normalMaterial();\\n debugMode();\\n}\\n\\nfunction draw() {\\n background(200);\\n orbitControl();\\n box(15, 30);\\n // Press the spacebar to turn debugMode off!\\n if (keyIsDown(32)) {\\n noDebugMode();\\n }\\n}\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\\n normalMaterial();\\n debugMode(GRID);\\n}\\n\\nfunction draw() {\\n background(200);\\n orbitControl();\\n box(15, 30);\\n}\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\\n normalMaterial();\\n debugMode(AXES);\\n}\\n\\nfunction draw() {\\n background(200);\\n orbitControl();\\n box(15, 30);\\n}\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\\n normalMaterial();\\n debugMode(GRID, 100, 10, 0, 0, 0);\\n}\\n\\nfunction draw() {\\n background(200);\\n orbitControl();\\n box(15, 30);\\n}\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\\n normalMaterial();\\n debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\\n}\\n\\nfunction draw() {\\n noStroke();\\n background(200);\\n orbitControl();\\n box(15, 30);\\n // set the stroke color and weight for the grid!\\n stroke(255, 0, 150);\\n strokeWeight(0.8);\\n}\\n
either GRID or AXES
size of one side of the grid
number of divisions in the grid
X axis offset from origin (0,0,0)
Y axis offset from origin (0,0,0)
Z axis offset from origin (0,0,0)
size of axes icon
Turns off debugMode() in a 3D sketch.
Creates an ambient light with a color
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(0);\\n ambientLight(150);\\n ambientMaterial(250);\\n noStroke();\\n sphere(40);\\n}\\n
the alpha value
the ambient light color
Creates a directional light with a color and a direction
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(0);\\n //move your mouse to change light direction\\n let dirX = (mouseX / width - 0.5) * 2;\\n let dirY = (mouseY / height - 0.5) * 2;\\n directionalLight(250, 250, 250, -dirX, -dirY, -1);\\n noStroke();\\n sphere(40);\\n}\\n
red or hue value (depending on the current\\ncolor mode),
green or saturation value
blue or brightness value
the direction of the light
color Array, CSS color string,\\n or p5.Color value
x axis direction
y axis direction
z axis direction
Creates a point light with a color and a light position
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(0);\\n //move your mouse to change light position\\n let locX = mouseX - width / 2;\\n let locY = mouseY - height / 2;\\n // to set the light position,\\n // think of the world's coordinate as:\\n // -width/2,-height/2 -------- width/2,-height/2\\n // | |\\n // | 0,0 |\\n // | |\\n // -width/2,height/2--------width/2,height/2\\n pointLight(250, 250, 250, locX, locY, 50);\\n noStroke();\\n sphere(40);\\n}\\n
x axis position
y axis position
z axis position
the position of the light
color Array, CSS color string,\\nor p5.Color value
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.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(0);\\n lights();\\n rotateX(millis() / 1000);\\n rotateY(millis() / 1000);\\n rotateZ(millis() / 1000);\\n box();\\n}\\n
Load a 3d model from an OBJ file.\\n\\nOne of the limitations of the OBJ format is that it doesn't have a built-in\\nsense of scale. This means that models exported from different programs might\\nbe very different sizes. If your model isn't displaying, try calling\\nloadModel() with the normalized parameter set to true. This will resize the\\nmodel to a scale appropriate for p5. You can also make additional changes to\\nthe final size of your model with the scale() function.
\\n//draw a spinning octahedron\\nlet octahedron;\\n\\nfunction preload() {\\n octahedron = loadModel('assets/octahedron.obj');\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n rotateX(frameCount * 0.01);\\n rotateY(frameCount * 0.01);\\n model(octahedron);\\n}\\n
\\n//draw a spinning teapot\\nlet teapot;\\n\\nfunction preload() {\\n // Load model with normalise parameter set to true\\n teapot = loadModel('assets/teapot.obj', true);\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n scale(0.4); // Scaled to make model fit into canvas\\n rotateX(frameCount * 0.01);\\n rotateY(frameCount * 0.01);\\n normalMaterial(); // For effect\\n model(teapot);\\n}\\n
Path of the model to be loaded
If true, scale the model to a\\n standardized size when loading
Function to be called\\n once the model is loaded. Will be passed\\n the 3D model object.
Parse OBJ lines into model. For reference, this is what a simple model of a\\nsquare might look like:
v -0.5 -0.5 0.5\\nv -0.5 -0.5 -0.5\\nv -0.5 0.5 -0.5\\nv -0.5 0.5 0.5
f 4 3 2 1
Render a 3d model to the screen.
Loaded 3d model to be rendered
Loads a custom shader from the provided vertex and fragment\\nshader paths. The shader files are loaded asynchronously in the\\nbackground, so this method should be used in preload().
For now, there are three main types of shaders. p5 will automatically\\nsupply appropriate vertices, normals, colors, and lighting attributes\\nif the parameters defined in the shader match the names.
path to file containing vertex shader\\nsource code
path to file containing fragment shader\\nsource code
callback to be executed after loadShader\\ncompletes. On success, the Shader object is passed as the first argument.
callback to be executed when an error\\noccurs inside loadShader. On error, the error is passed as the first\\nargument.
\\nlet mandel;\\nfunction preload() {\\n // load the shader definitions from files\\n mandel = loadShader('assets/shader.vert', 'assets/shader.frag');\\n}\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n // use the shader\\n shader(mandel);\\n noStroke();\\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\\n}\\n\\nfunction draw() {\\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\\n}\\n
source code for the vertex shader
source code for the fragment shader
\\n// the 'varying's are shared between both vertex & fragment shaders\\nlet varying = 'precision highp float; varying vec2 vPos;';\\n\\n// the vertex shader is called for each vertex\\nlet vs =\\n varying +\\n 'attribute vec3 aPosition;' +\\n 'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\\n\\n// the fragment shader is called for each pixel\\nlet fs =\\n varying +\\n 'uniform vec2 p;' +\\n 'uniform float r;' +\\n 'const int I = 500;' +\\n 'void main() {' +\\n ' vec2 c = p + vPos * r, z = c;' +\\n ' float n = 0.0;' +\\n ' for (int i = I; i > 0; i --) {' +\\n ' if(z.x*z.x+z.y*z.y > 4.0) {' +\\n ' n = float(i)/float(I);' +\\n ' break;' +\\n ' }' +\\n ' z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\\n ' }' +\\n ' gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\\n '}';\\n\\nlet mandel;\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n\\n // create and initialize the shader\\n mandel = createShader(vs, fs);\\n shader(mandel);\\n noStroke();\\n\\n // 'p' is the center point of the Mandelbrot image\\n mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\\n}\\n\\nfunction draw() {\\n // 'r' is the size of the image in Mandelbrot-space\\n mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\\n}\\n
The shader() function lets the user provide a custom shader\\nto fill in shapes in WEBGL mode. Users can create their\\nown shaders by loading vertex and fragment shaders with\\nloadShader().
the desired p5.Shader to use for rendering\\nshapes.
This function restores the default shaders in WEBGL mode. Code that runs\\nafter resetShader() will not be affected by previously defined\\nshaders. Should be run after shader().
Normal material for geometry. You can view all\\npossible materials in this\\nexample.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(200);\\n normalMaterial();\\n sphere(40);\\n}\\n
Texture for geometry. You can view other possible materials in this\\nexample.
2-dimensional graphics\\n to render as texture
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(0);\\n rotateZ(frameCount * 0.01);\\n rotateX(frameCount * 0.01);\\n rotateY(frameCount * 0.01);\\n //pass image as texture\\n texture(img);\\n box(200, 200, 200);\\n}\\n
\\nlet pg;\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n pg = createGraphics(200, 200);\\n pg.textSize(75);\\n}\\n\\nfunction draw() {\\n background(0);\\n pg.background(255);\\n pg.text('hello!', 0, 100);\\n //pass image as texture\\n texture(pg);\\n rotateX(0.5);\\n noStroke();\\n plane(50);\\n}\\n
\\nlet vid;\\nfunction preload() {\\n vid = createVideo('assets/fingers.mov');\\n vid.hide();\\n}\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(0);\\n //pass video frame as texture\\n texture(vid);\\n rect(-40, -40, 80, 80);\\n}\\n\\nfunction mousePressed() {\\n vid.loop();\\n}\\n
Sets the coordinate space for texture mapping. The default mode is IMAGE\\nwhich refers to the actual coordinates of the image.\\nNORMAL refers to a normalized space of values ranging from 0 to 1.\\nThis function only works in WEBGL mode.
With IMAGE, if an image is 100 x 200 pixels, mapping the image onto the entire\\nsize of a quad would require the points (0,0) (100, 0) (100,200) (0,200).\\nThe same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1).
either IMAGE or NORMAL
\\nlet img;\\n\\nfunction preload() {\\n img = loadImage('assets/laDefense.jpg');\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n texture(img);\\n textureMode(NORMAL);\\n beginShape();\\n vertex(-50, -50, 0, 0);\\n vertex(50, -50, 1, 0);\\n vertex(50, 50, 1, 1);\\n vertex(-50, 50, 0, 1);\\n endShape();\\n}\\n
Sets the global texture wrapping mode. This controls how textures behave\\nwhen their uv's go outside of the 0 - 1 range. There are three options:\\nCLAMP, REPEAT, and MIRROR.
CLAMP causes the pixels at the edge of the texture to extend to the bounds\\nREPEAT causes the texture to tile repeatedly until reaching the bounds\\nMIRROR works similarly to REPEAT but it flips the texture with every new tile
REPEAT & MIRROR are only available if the texture\\nis a power of two size (128, 256, 512, 1024, etc.).
This method will affect all textures in your sketch until a subsequent\\ntextureWrap call is made.
If only one argument is provided, it will be applied to both the\\nhorizontal and vertical axes.
either CLAMP, REPEAT, or MIRROR
\\nlet img;\\nfunction preload() {\\n img = loadImage('assets/rockies128.jpg');\\n}\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n textureWrap(MIRROR);\\n}\\n\\nfunction draw() {\\n background(0);\\n\\n let dX = mouseX;\\n let dY = mouseY;\\n\\n let u = lerp(1.0, 2.0, dX);\\n let v = lerp(1.0, 2.0, dY);\\n\\n scale(width / 2);\\n\\n texture(img);\\n\\n beginShape(TRIANGLES);\\n vertex(-1, -1, 0, 0, 0);\\n vertex(1, -1, 0, u, 0);\\n vertex(1, 1, 0, u, v);\\n\\n vertex(1, 1, 0, u, v);\\n vertex(-1, 1, 0, 0, v);\\n vertex(-1, -1, 0, 0, 0);\\n endShape();\\n}\\n
Ambient material for geometry with a given color. You can view all\\npossible materials in this\\nexample.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(0);\\n noStroke();\\n ambientLight(200);\\n ambientMaterial(70, 130, 230);\\n sphere(40);\\n}\\n
gray value, red or hue value\\n (depending on the current color mode),
opacity
color, color Array, or CSS color string
Specular material for geometry with a given color. You can view all\\npossible materials in this\\nexample.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(0);\\n noStroke();\\n ambientLight(50);\\n pointLight(250, 250, 250, 100, 100, 30);\\n specularMaterial(250);\\n sphere(40);\\n}\\n
color Array, or CSS color string
Sets the amount of gloss in the surface of shapes.\\nUsed in combination with specularMaterial() in setting\\nthe material properties of shapes. The default and minimum value is 1.
Degree of Shininess.\\n Defaults to 1.
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(0);\\n noStroke();\\n let locX = mouseX - width / 2;\\n let locY = mouseY - height / 2;\\n ambientLight(60, 60, 60);\\n pointLight(255, 255, 255, locX, locY, 50);\\n specularMaterial(250);\\n translate(-25, 0, 0);\\n shininess(1);\\n sphere(20);\\n translate(50, 0, 0);\\n shininess(20);\\n sphere(20);\\n}\\n
Sets the camera position for a 3D sketch. Parameters for this function define\\nthe position for the camera, the center of the sketch (where the camera is\\npointing), and an up direction (the orientation of the camera).
When called with no arguments, this function creates a default camera\\nequivalent to\\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
camera position value on x axis
camera position value on y axis
camera position value on z axis
x coordinate representing center of the sketch
y coordinate representing center of the sketch
z coordinate representing center of the sketch
x component of direction 'up' from camera
y component of direction 'up' from camera
z component of direction 'up' from camera
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\nfunction draw() {\\n background(204);\\n //move the camera away from the plane by a sin wave\\n camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);\\n plane(10, 10);\\n}\\n
Sets a perspective projection for the camera in a 3D sketch. This projection\\nrepresents depth through foreshortening: objects that are close to the camera\\nappear their actual size while those that are further away from the camera\\nappear smaller. The parameters to this function define the viewing frustum\\n(the truncated pyramid within which objects are seen by the camera) through\\nvertical field of view, aspect ratio (usually width/height), and near and far\\nclipping planes.
When called with no arguments, the defaults\\nprovided are equivalent to\\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ10.0), where eyeZ\\nis equal to ((height/2.0) / tan(PI60.0/360.0));
camera frustum vertical field of view,\\n from bottom to top of view, in angleMode units
camera frustum aspect ratio
frustum near plane length
frustum far plane length
\\n//drag the mouse to look around!\\n//you will see there's a vanishing point\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n perspective(PI / 3.0, width / height, 0.1, 500);\\n}\\nfunction draw() {\\n background(200);\\n orbitControl();\\n normalMaterial();\\n\\n rotateX(-0.3);\\n rotateY(-0.2);\\n translate(0, 0, -50);\\n\\n push();\\n translate(-15, 0, sin(frameCount / 30) * 95);\\n box(30);\\n pop();\\n push();\\n translate(15, 0, sin(frameCount / 30 + PI) * 95);\\n box(30);\\n pop();\\n}\\n
Sets an orthographic projection for the camera in a 3D sketch and defines a\\nbox-shaped viewing frustum within which objects are seen. In this projection,\\nall objects with the same dimension appear the same size, regardless of\\nwhether they are near or far from the camera. The parameters to this\\nfunction specify the viewing frustum where left and right are the minimum and\\nmaximum x values, top and bottom are the minimum and maximum y values, and near\\nand far are the minimum and maximum z values. If no parameters are given, the\\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).
camera frustum left plane
camera frustum right plane
camera frustum bottom plane
camera frustum top plane
camera frustum near plane
camera frustum far plane
\\n//drag the mouse to look around!\\n//there's no vanishing point\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\\n}\\nfunction draw() {\\n background(200);\\n orbitControl();\\n normalMaterial();\\n\\n rotateX(0.2);\\n rotateY(-0.2);\\n push();\\n translate(-15, 0, sin(frameCount / 30) * 65);\\n box(30);\\n pop();\\n push();\\n translate(15, 0, sin(frameCount / 30 + PI) * 65);\\n box(30);\\n pop();\\n}\\n
Creates a new p5.Camera object and tells the\\nrenderer to use that camera.\\nReturns the p5.Camera object.
Sets a perspective projection for a p5.Camera object and sets parameters\\nfor that projection according to perspective()\\nsyntax.
Sets an orthographic projection for a p5.Camera object and sets parameters\\nfor that projection according to ortho() syntax.
Panning rotates the camera view to the left and right.
amount to rotate camera in current\\nangleMode units.\\nGreater than 0 values rotate counterclockwise (to the left).
Tilting rotates the camera view up and down.
\\nlet cam;\\nlet delta = 0.01;\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n normalMaterial();\\n cam = createCamera();\\n // set initial tilt\\n cam.tilt(-0.8);\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n // pan camera according to angle 'delta'\\n cam.tilt(delta);\\n\\n // every 160 frames, switch direction\\n if (frameCount % 160 === 0) {\\n delta *= -1;\\n }\\n\\n rotateY(frameCount * 0.01);\\n translate(0, -100, 0);\\n box(20);\\n translate(0, 35, 0);\\n box(20);\\n translate(0, 35, 0);\\n box(20);\\n translate(0, 35, 0);\\n box(20);\\n translate(0, 35, 0);\\n box(20);\\n translate(0, 35, 0);\\n box(20);\\n translate(0, 35, 0);\\n box(20);\\n}\\n
Reorients the camera to look at a position in world space.
x position of a point in world space
y position of a point in world space
z position of a point in world space
\\nlet cam;\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n normalMaterial();\\n cam = createCamera();\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n // look at a new random point every 60 frames\\n if (frameCount % 60 === 0) {\\n cam.lookAt(random(-100, 100), random(-50, 50), 0);\\n }\\n\\n rotateX(frameCount * 0.01);\\n translate(-100, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n}\\n
Sets a camera's position and orientation. This is equivalent to calling\\ncamera() on a p5.Camera object.
Move camera along its local axes while maintaining current camera orientation.
amount to move along camera's left-right axis
amount to move along camera's up-down axis
amount to move along camera's forward-backward axis
\\n// see the camera move along its own axes while maintaining its orientation\\nlet cam;\\nlet delta = 0.5;\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n normalMaterial();\\n cam = createCamera();\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n // move the camera along its local axes\\n cam.move(delta, delta, 0);\\n\\n // every 100 frames, switch direction\\n if (frameCount % 150 === 0) {\\n delta *= -1;\\n }\\n\\n translate(-10, -10, 0);\\n box(50, 8, 50);\\n translate(15, 15, 0);\\n box(50, 8, 50);\\n translate(15, 15, 0);\\n box(50, 8, 50);\\n translate(15, 15, 0);\\n box(50, 8, 50);\\n translate(15, 15, 0);\\n box(50, 8, 50);\\n translate(15, 15, 0);\\n box(50, 8, 50);\\n}\\n
Set camera position in world-space while maintaining current camera\\norientation.
\\n// press '1' '2' or '3' keys to set camera position\\n\\nlet cam;\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n normalMaterial();\\n cam = createCamera();\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n // '1' key\\n if (keyIsDown(49)) {\\n cam.setPosition(30, 0, 80);\\n }\\n // '2' key\\n if (keyIsDown(50)) {\\n cam.setPosition(0, 0, 80);\\n }\\n // '3' key\\n if (keyIsDown(51)) {\\n cam.setPosition(-30, 0, 80);\\n }\\n\\n box(20);\\n}\\n
Sets rendererGL's current camera to a p5.Camera object. Allows switching\\nbetween multiple cameras.
p5.Camera object
\\nlet cam1, cam2;\\nlet currentCamera;\\n\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n normalMaterial();\\n\\n cam1 = createCamera();\\n cam2 = createCamera();\\n cam2.setPosition(30, 0, 50);\\n cam2.lookAt(0, 0, 0);\\n cam2.ortho();\\n\\n // set variable for previously active camera:\\n currentCamera = 1;\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n // camera 1:\\n cam1.lookAt(0, 0, 0);\\n cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\\n\\n // every 100 frames, switch between the two cameras\\n if (frameCount % 100 === 0) {\\n if (currentCamera === 1) {\\n setCamera(cam1);\\n currentCamera = 0;\\n } else {\\n setCamera(cam2);\\n currentCamera = 1;\\n }\\n }\\n\\n drawBoxes();\\n}\\n\\nfunction drawBoxes() {\\n rotateX(frameCount * 0.01);\\n translate(-100, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n translate(35, 0, 0);\\n box(20);\\n}\\n
computes smooth normals per vertex as an average of each\\nface.
Averages the vertex normals. Used in curved\\nsurfaces
Averages pole normals. Used in spherical primitives
Modifies all vertices to be centered within the range -100 to 100.
Set attributes for the WebGL Drawing context.\\nThis is a way of adjusting how the WebGL\\nrenderer works to fine-tune the display and performance.\\n\\nNote that this will reinitialize the drawing context\\nif called after the WebGL canvas is made.\\n\\nIf an object is passed as the parameter, all attributes\\nnot declared in the object will be set to defaults.\\n\\nThe available attributes are:\\n\\nalpha - indicates if the canvas contains an alpha buffer\\ndefault is false\\n\\ndepth - indicates whether the drawing buffer has a depth buffer\\nof at least 16 bits - default is true\\n\\nstencil - indicates whether the drawing buffer has a stencil buffer\\nof at least 8 bits\\n\\nantialias - indicates whether or not to perform anti-aliasing\\ndefault is false\\n\\npremultipliedAlpha - indicates that the page compositor will assume\\nthe drawing buffer contains colors with pre-multiplied alpha\\ndefault is false\\n\\npreserveDrawingBuffer - if true the buffers will not be cleared and\\nand will preserve their values until cleared or overwritten by author\\n(note that p5 clears automatically on draw loop)\\ndefault is true\\n\\nperPixelLighting - if true, per-pixel lighting will be used in the\\nlighting shader.\\ndefault is false\\n
\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(255);\\n push();\\n rotateZ(frameCount * 0.02);\\n rotateX(frameCount * 0.02);\\n rotateY(frameCount * 0.02);\\n fill(0, 0, 0);\\n box(50);\\n pop();\\n}\\n
\\nfunction setup() {\\n setAttributes('antialias', true);\\n createCanvas(100, 100, WEBGL);\\n}\\n\\nfunction draw() {\\n background(255);\\n push();\\n rotateZ(frameCount * 0.02);\\n rotateX(frameCount * 0.02);\\n rotateY(frameCount * 0.02);\\n fill(0, 0, 0);\\n box(50);\\n pop();\\n}\\n
\\n// press the mouse button to enable perPixelLighting\\nfunction setup() {\\n createCanvas(100, 100, WEBGL);\\n noStroke();\\n fill(255);\\n}\\n\\nvar lights = [\\n { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\\n { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\\n { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\\n { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\\n { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\\n { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\\n];\\n\\nfunction draw() {\\n var t = millis() / 1000 + 1000;\\n background(0);\\n directionalLight(color('#222'), 1, 1, 1);\\n\\n for (var i = 0; i < lights.length; i++) {\\n var light = lights[i];\\n pointLight(\\n color(light.c),\\n p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\\n );\\n }\\n\\n specularMaterial(255);\\n sphere(width * 0.1);\\n\\n rotateX(t * 0.77);\\n rotateY(t * 0.83);\\n rotateZ(t * 0.91);\\n torus(width * 0.3, width * 0.07, 24, 10);\\n}\\n\\nfunction mousePressed() {\\n setAttributes('perPixelLighting', true);\\n noStroke();\\n fill(255);\\n}\\nfunction mouseReleased() {\\n setAttributes('perPixelLighting', false);\\n noStroke();\\n fill(255);\\n}\\n
Name of attribute
New value of named attribute
object with key-value pairs
Wrapper around gl.uniform functions.\\nAs we store uniform info in the shader we can use that\\nto do type checking on the supplied data and call\\nthe appropriate function.
the name of the uniform in the\\nshader program
the data to be associated\\nwith that uniform; type varies (could be a single numerical value, array,\\nmatrix, or texture / sampler reference)
Searches the page for an element with the given ID, class, or tag name (using the '#' or '.'\\nprefixes to specify an ID or class respectively, and none for a tag) and returns it as\\na p5.Element. If a class or tag name is given with more than 1 element,\\nonly the first element will be returned.\\nThe DOM node itself can be accessed with .elt.\\nReturns null if none found. You can also specify a container to search within.
id, class, or tag name of element to search for
id, p5.Element, or\\n HTML element to search within
\\nfunction setup() {\\n createCanvas(100, 100);\\n //translates canvas 50px down\\n select('canvas').position(100, 100);\\n}\\n
\\n// these are all valid calls to select()\\nvar a = select('#moo');\\nvar b = select('#blah', '#myContainer');\\nvar c, e;\\nif (b) {\\n c = select('#foo', b);\\n}\\nvar d = document.getElementById('beep');\\nif (d) {\\n e = select('p', d);\\n}\\n[a, b, c, d, e]; // unused\\n
Searches the page for elements with the given class or tag name (using the '.' prefix\\nto specify a class and no prefix for a tag) and returns them as p5.Elements\\nin an array.\\nThe DOM node itself can be accessed with .elt.\\nReturns an empty array if none found.\\nYou can also specify a container to search within.
class or tag name of elements to search for
id, p5.Element, or HTML element to search within
\\nfunction setup() {\\n createButton('btn');\\n createButton('2nd btn');\\n createButton('3rd btn');\\n var buttons = selectAll('button');\\n\\n for (var i = 0; i < buttons.length; i++) {\\n buttons[i].size(100, 100);\\n }\\n}\\n
\\n// these are all valid calls to selectAll()\\nvar a = selectAll('.moo');\\na = selectAll('div');\\na = selectAll('button', '#myContainer');\\n\\nvar d = select('#container');\\na = selectAll('p', d);\\n\\nvar f = document.getElementById('beep');\\na = select('.blah', f);\\n\\na; // unused\\n
Helper function for select and selectAll
Helper function for getElement and getElements.
Removes all elements created by p5, except any canvas / graphics\\nelements created by createCanvas or createGraphics.\\nEvent handlers are removed, and element is removed from the DOM.
\\nfunction setup() {\\n createCanvas(100, 100);\\n createDiv('this is some text');\\n createP('this is a paragraph');\\n}\\nfunction mousePressed() {\\n removeElements(); // this will remove the div and p, not canvas\\n}\\n
The .changed() function is called when the value of an\\nelement changes.\\nThis can be used to attach an element specific event listener.
function to be fired when the value of\\n an element changes.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\nvar sel;\\n\\nfunction setup() {\\n textAlign(CENTER);\\n background(200);\\n sel = createSelect();\\n sel.position(10, 10);\\n sel.option('pear');\\n sel.option('kiwi');\\n sel.option('grape');\\n sel.changed(mySelectEvent);\\n}\\n\\nfunction mySelectEvent() {\\n var item = sel.value();\\n background(200);\\n text(\\\"it's a \\\" + item + '!', 50, 50);\\n}\\n
\\nvar checkbox;\\nvar cnv;\\n\\nfunction setup() {\\n checkbox = createCheckbox(' fill');\\n checkbox.changed(changeFill);\\n cnv = createCanvas(100, 100);\\n cnv.position(0, 30);\\n noFill();\\n}\\n\\nfunction draw() {\\n background(200);\\n ellipse(50, 50, 50, 50);\\n}\\n\\nfunction changeFill() {\\n if (checkbox.checked()) {\\n fill(0);\\n } else {\\n noFill();\\n }\\n}\\n
The .input() function is called when any user input is\\ndetected with an element. The input event is often used\\nto detect keystrokes in a input element, or changes on a\\nslider element. This can be used to attach an element specific\\nevent listener.
function to be fired when any user input is\\n detected within the element.\\n if false is passed instead, the previously\\n firing function will no longer fire.
\\n// Open your console to see the output\\nfunction setup() {\\n var inp = createInput('');\\n inp.input(myInputEvent);\\n}\\n\\nfunction myInputEvent() {\\n console.log('you are typing: ', this.value());\\n}\\n
Helpers for create methods.
Creates a <div></div> element in the DOM with given inner HTML.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
inner HTML for element created
\\ncreateDiv('this is some text');\\n
Creates a <p></p> element in the DOM with given inner HTML. Used\\nfor paragraph length text.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
\\ncreateP('this is some text');\\n
Creates a <span></span> element in the DOM with given inner HTML.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
\\ncreateSpan('this is some text');\\n
Creates an <img> element in the DOM with given src and\\nalternate text.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
\\ncreateImg('http://p5js.org/img/asterisk-01.png');\\n
src path or url for image
alternate text to be used if image does not load
callback to be called once image data is loaded
Creates an <a></a> element in the DOM for including a hyperlink.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
url of page to link to
inner html of link element to display
target where new link should open,\\n could be _blank, _self, _parent, _top.
\\ncreateA('http://p5js.org/', 'this is a link');\\n
Creates a slider <input></input> element in the DOM.\\nUse .size() to set the display length of the slider.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
minimum value of the slider
maximum value of the slider
default value of the slider
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)
\\nvar slider;\\nfunction setup() {\\n slider = createSlider(0, 255, 100);\\n slider.position(10, 10);\\n slider.style('width', '80px');\\n}\\n\\nfunction draw() {\\n var val = slider.value();\\n background(val);\\n}\\n
\\nvar slider;\\nfunction setup() {\\n colorMode(HSB);\\n slider = createSlider(0, 360, 60, 40);\\n slider.position(10, 10);\\n slider.style('width', '80px');\\n}\\n\\nfunction draw() {\\n var val = slider.value();\\n background(val, 100, 100, 1);\\n}\\n
Creates a <button></button> element in the DOM.\\nUse .size() to set the display size of the button.\\nUse .mousePressed() to specify behavior on press.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
label displayed on the button
value of the button
\\nvar button;\\nfunction setup() {\\n createCanvas(100, 100);\\n background(0);\\n button = createButton('click me');\\n button.position(19, 19);\\n button.mousePressed(changeBG);\\n}\\n\\nfunction changeBG() {\\n var val = random(255);\\n background(val);\\n}\\n
Creates a checkbox <input></input> element in the DOM.\\nCalling .checked() on a checkbox returns if it is checked or not
label displayed after checkbox
value of the checkbox; checked is true, unchecked is false
\\nvar checkbox;\\n\\nfunction setup() {\\n checkbox = createCheckbox('label', false);\\n checkbox.changed(myCheckedEvent);\\n}\\n\\nfunction myCheckedEvent() {\\n if (this.checked()) {\\n console.log('Checking!');\\n } else {\\n console.log('Unchecking!');\\n }\\n}\\n
Creates a dropdown menu <select></select> element in the DOM.\\nIt also helps to assign select-box methods to p5.Element when selecting existing select box
\\nvar sel;\\n\\nfunction setup() {\\n textAlign(CENTER);\\n background(200);\\n sel = createSelect();\\n sel.position(10, 10);\\n sel.option('pear');\\n sel.option('kiwi');\\n sel.option('grape');\\n sel.changed(mySelectEvent);\\n}\\n\\nfunction mySelectEvent() {\\n var item = sel.value();\\n background(200);\\n text('It is a ' + item + '!', 50, 50);\\n}\\n
true if dropdown should support multiple selections
DOM select element
Creates a radio button <input></input> element in the DOM.\\nThe .option() method can be used to set options for the radio after it is\\ncreated. The .value() method will return the currently selected option.
the id and name of the created div and input field respectively
\\nvar radio;\\n\\nfunction setup() {\\n radio = createRadio();\\n radio.option('black');\\n radio.option('white');\\n radio.option('gray');\\n radio.style('width', '60px');\\n textAlign(CENTER);\\n fill(255, 0, 0);\\n}\\n\\nfunction draw() {\\n var val = radio.value();\\n background(val);\\n text(val, width / 2, height / 2);\\n}\\n
\\nvar radio;\\n\\nfunction setup() {\\n radio = createRadio();\\n radio.option('apple', 1);\\n radio.option('bread', 2);\\n radio.option('juice', 3);\\n radio.style('width', '60px');\\n textAlign(CENTER);\\n}\\n\\nfunction draw() {\\n background(200);\\n var val = radio.value();\\n if (val) {\\n text('item cost is $' + val, width / 2, height / 2);\\n }\\n}\\n
Creates a colorPicker element in the DOM for color input.\\nThe .value() method will return a hex string (#rrggbb) of the color.\\nThe .color() method will return a p5.Color object with the current chosen color.
default color of element
\\nvar inp1, inp2;\\nfunction setup() {\\n createCanvas(100, 100);\\n background('grey');\\n inp1 = createColorPicker('#ff0000');\\n inp2 = createColorPicker(color('yellow'));\\n inp1.input(setShade1);\\n inp2.input(setShade2);\\n setMidShade();\\n}\\n\\nfunction setMidShade() {\\n // Finding a shade between the two\\n var commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\\n fill(commonShade);\\n rect(20, 20, 60, 60);\\n}\\n\\nfunction setShade1() {\\n setMidShade();\\n console.log('You are choosing shade 1 to be : ', this.value());\\n}\\nfunction setShade2() {\\n setMidShade();\\n console.log('You are choosing shade 2 to be : ', this.value());\\n}\\n
Creates an <input></input> element in the DOM for text input.\\nUse .size() to set the display length of the box.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
default value of the input box
type of text, ie text, password etc. Defaults to text
\\nfunction setup() {\\n var inp = createInput('');\\n inp.input(myInputEvent);\\n}\\n\\nfunction myInputEvent() {\\n console.log('you are typing: ', this.value());\\n}\\n
Creates an <input></input> element in the DOM of type 'file'.\\nThis allows users to select local files for use in a sketch.
callback function for when a file loaded
optional to allow multiple files selected
\\nlet input;\\nlet img;\\n\\nfunction setup() {\\n input = createFileInput(handleFile);\\n input.position(0, 0);\\n}\\n\\nfunction draw() {\\n background(255);\\n if (img) {\\n image(img, 0, 0, width, height);\\n }\\n}\\n\\nfunction handleFile(file) {\\n print(file);\\n if (file.type === 'image') {\\n img = createImg(file.data);\\n img.hide();\\n } else {\\n img = null;\\n }\\n}\\n
Creates an HTML5 <video> element in the DOM for simple playback\\nof audio/video. Shown by default, can be hidden with .hide()\\nand drawn into canvas using video(). Appends to the container\\nnode if one is specified, otherwise appends to body. The first parameter\\ncan be either a single string path to a video file, or an array of string\\npaths to different formats of the same video. This is useful for ensuring\\nthat your video can play across different browsers, as each supports\\ndifferent formats. See this\\npage for further information about supported formats.
path to a video file, or array of paths for\\n supporting different browsers
callback function to be called upon\\n 'canplaythrough' event fire, that is, when the\\n browser can play the media, and estimates that\\n enough data has been loaded to play the media\\n up to its end without having to stop for\\n further buffering of content
\\nvar vid;\\nfunction setup() {\\n noCanvas();\\n\\n vid = createVideo(\\n ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\\n vidLoad\\n );\\n\\n vid.size(100, 100);\\n}\\n\\n// This function is called when the video loads\\nfunction vidLoad() {\\n vid.loop();\\n vid.volume(0);\\n}\\n
Creates a hidden HTML5 <audio> element in the DOM for simple audio\\nplayback. Appends to the container node if one is specified,\\notherwise appends to body. The first parameter\\ncan be either a single string path to a audio file, or an array of string\\npaths to different formats of the same audio. This is useful for ensuring\\nthat your audio can play across different browsers, as each supports\\ndifferent formats. See this\\npage for further information about supported formats.
path to an audio file, or array of paths\\n for supporting different browsers
\\nvar ele;\\nfunction setup() {\\n ele = createAudio('assets/beat.mp3');\\n\\n // here we set the element to autoplay\\n // The element will play as soon\\n // as it is able to do so.\\n ele.autoplay(true);\\n}\\n
Creates a new HTML5 <video> element that contains the audio/video\\nfeed from a webcam. The element is separate from the canvas and is\\ndisplayed by default. The element can be hidden using .hide(). The feed\\ncan be drawn onto the canvas using image(). The loadedmetadata property can\\nbe used to detect when the element has fully loaded (see second example).
More specific properties of the feed can be passing in a Constraints object.\\nSee the\\n W3C\\nspec for possible properties. Note that not all of these are supported\\nby all browsers.
Security note: A new browser security specification requires that getUserMedia,\\nwhich is behind createCapture(), only works when you're running the code locally,\\nor on HTTPS. Learn more here\\nand here.
type of capture, either VIDEO or\\n AUDIO if none specified, default both,\\n or a Constraints object
function to be called once\\n stream has loaded
\\nvar capture;\\n\\nfunction setup() {\\n createCanvas(480, 480);\\n capture = createCapture(VIDEO);\\n capture.hide();\\n}\\n\\nfunction draw() {\\n image(capture, 0, 0, width, width * capture.height / capture.width);\\n filter(INVERT);\\n}\\n
\\nfunction setup() {\\n createCanvas(480, 120);\\n var constraints = {\\n video: {\\n mandatory: {\\n minWidth: 1280,\\n minHeight: 720\\n },\\n optional: [{ maxFrameRate: 10 }]\\n },\\n audio: true\\n };\\n createCapture(constraints, function(stream) {\\n console.log(stream);\\n });\\n}\\n
\\nvar capture;\\n\\nfunction setup() {\\n createCanvas(640, 480);\\n capture = createCapture(VIDEO);\\n}\\nfunction draw() {\\n background(0);\\n if (capture.loadedmetadata) {\\n var c = capture.get(0, 0, 100, 100);\\n image(c, 0, 0);\\n }\\n}\\n\"\n ],\n \"class\": \"p5\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1381,\n \"description\": \"Creates element with given tag in the DOM with given content.\\nAppends to the container node if one is specified, otherwise\\nappends to body.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"createElement\",\n \"params\": [\n {\n \"name\": \"tag\",\n \"description\": \"tag for the new element\\n\",\n \"type\": \"String\"\n },\n {\n \"name\": \"content\",\n \"description\": \"html content to be inserted into the element\\n\",\n \"type\": \"String\",\n \"optional\": true\n }\n ],\n \"return\": {\n \"description\": \"pointer to p5.Element holding created node\",\n \"type\": \"p5.Element\"\n },\n \"example\": [\n \"\\n\\ncreateElement('h2', 'im an h2 p5.element!');\\n\"\n ],\n \"class\": \"p5\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1407,\n \"description\": \"Adds specified class to the element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"addClass\",\n \"params\": [\n {\n \"name\": \"class\",\n \"description\": \"name of class to add\\n\",\n \"type\": \"String\"\n }\n ],\n \"chainable\": 1,\n \"example\": [\n \"\\n \\n var div = createDiv('div');\\n div.addClass('myClass');\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1432,\n \"description\": \"Removes specified class from the element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"removeClass\",\n \"params\": [\n {\n \"name\": \"class\",\n \"description\": \"name of class to remove\\n\",\n \"type\": \"String\"\n }\n ],\n \"chainable\": 1,\n \"example\": [\n \"\\n \\n // In this example, a class is set when the div is created\\n // and removed when mouse is pressed. This could link up\\n // with a CSS style rule to toggle style properties.\\nvar div;\\nfunction setup() {\\n div = createDiv('div');\\n div.addClass('myClass');\\n }\\nfunction mousePressed() {\\n div.removeClass('myClass');\\n }\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1463,\n \"description\": \"Checks if specified class already set to element\\n\",\n \"itemtype\": \"method\",\n \"name\": \"hasClass\",\n \"return\": {\n \"description\": \"a boolean value if element has specified class\",\n \"type\": \"Boolean\"\n },\n \"params\": [\n {\n \"name\": \"c\",\n \"description\": \"class name of class to check\\n\",\n \"type\": \"String\"\n }\n ],\n \"example\": [\n \"\\n \\n var div;\\nfunction setup() {\\n div = createDiv('div');\\n div.addClass('show');\\n }\\nfunction mousePressed() {\\n if (div.hasClass('show')) {\\n div.addClass('show');\\n } else {\\n div.removeClass('show');\\n }\\n }\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1492,\n \"description\": \"Toggles element class\\n\",\n \"itemtype\": \"method\",\n \"name\": \"toggleClass\",\n \"params\": [\n {\n \"name\": \"c\",\n \"description\": \"class name to toggle\\n\",\n \"type\": \"String\"\n }\n ],\n \"chainable\": 1,\n \"example\": [\n \"\\n \\n var div;\\nfunction setup() {\\n div = createDiv('div');\\n div.addClass('show');\\n }\\nfunction mousePressed() {\\n div.toggleClass('show');\\n }\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1525,\n \"description\": \"Attaches the element as a child to the parent specified.\\n Accepts either a string ID, DOM node, or p5.Element.\\n If no argument is specified, an array of children DOM nodes is returned.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"child\",\n \"return\": {\n \"description\": \"an array of child nodes\",\n \"type\": \"Node[]\"\n },\n \"example\": [\n \"\\n \\n var div0 = createDiv('this is the parent');\\n var div1 = createDiv('this is the child');\\n div0.child(div1); // use p5.Element\\n \\n \\n var div0 = createDiv('this is the parent');\\n var div1 = createDiv('this is the child');\\n div1.id('apples');\\n div0.child('apples'); // use id\\n \\n \\n // this example assumes there is a div already on the page\\n // with id \\\"myChildDiv\\\"\\n var div0 = createDiv('this is the parent');\\n var elt = document.getElementById('myChildDiv');\\n div0.child(elt); // use element from page\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 1525,\n \"params\": [],\n \"return\": {\n \"description\": \"an array of child nodes\",\n \"type\": \"Node[]\"\n }\n },\n {\n \"line\": 1553,\n \"params\": [\n {\n \"name\": \"child\",\n \"description\": \"the ID, DOM node, or p5.Element\\n to add to the current element\\n\",\n \"type\": \"String|p5.Element\",\n \"optional\": true\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1575,\n \"description\": \"Centers a p5 Element either vertically, horizontally,\\nor both, relative to its parent or according to\\nthe body if the Element has no parent. If no argument is passed\\nthe Element is aligned both vertically and horizontally.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"center\",\n \"params\": [\n {\n \"name\": \"align\",\n \"description\": \"passing 'vertical', 'horizontal' aligns element accordingly\\n\",\n \"type\": \"String\",\n \"optional\": true\n }\n ],\n \"chainable\": 1,\n \"example\": [\n \"\\n\\nfunction setup() {\\n var div = createDiv('').size(10, 10);\\n div.style('background-color', 'orange');\\n div.center();\\n}\\n\"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1629,\n \"description\": \"If an argument is given, sets the inner HTML of the element,\\n replacing any existing html. If true is included as a second\\n argument, html is appended instead of replacing existing html.\\n If no arguments are given, returns\\n the inner HTML of the element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"html\",\n \"return\": {\n \"description\": \"the inner HTML of the element\",\n \"type\": \"String\"\n },\n \"example\": [\n \"\\n \\n var div = createDiv('').size(100, 100);\\n div.html('hi');\\n \\n \\n var div = createDiv('Hello ').size(100, 100);\\n div.html('World', true);\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 1629,\n \"params\": [],\n \"return\": {\n \"description\": \"the inner HTML of the element\",\n \"type\": \"String\"\n }\n },\n {\n \"line\": 1650,\n \"params\": [\n {\n \"name\": \"html\",\n \"description\": \"the HTML to be placed inside the element\\n\",\n \"type\": \"String\",\n \"optional\": true\n },\n {\n \"name\": \"append\",\n \"description\": \"whether to append HTML to existing\\n\",\n \"type\": \"Boolean\",\n \"optional\": true\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1668,\n \"description\": \"Sets the position of the element relative to (0, 0) of the\\n window. Essentially, sets position:absolute and left and top\\n properties of style. If no arguments given returns the x and y position\\n of the element in an object.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"position\",\n \"return\": {\n \"description\": \"the x and y position of the element in an object\",\n \"type\": \"Object\"\n },\n \"example\": [\n \"\\n \\n function setup() {\\n var cnv = createCanvas(100, 100);\\n // positions canvas 50px to the right and 100px\\n // below upper left corner of the window\\n cnv.position(50, 100);\\n }\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 1668,\n \"params\": [],\n \"return\": {\n \"description\": \"the x and y position of the element in an object\",\n \"type\": \"Object\"\n }\n },\n {\n \"line\": 1687,\n \"params\": [\n {\n \"name\": \"x\",\n \"description\": \"x-position relative to upper left of window\\n\",\n \"type\": \"Number\",\n \"optional\": true\n },\n {\n \"name\": \"y\",\n \"description\": \"y-position relative to upper left of window\\n\",\n \"type\": \"Number\",\n \"optional\": true\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1762,\n \"description\": \"Sets the given style (css) property (1st arg) of the element with the\\ngiven value (2nd arg). If a single argument is given, .style()\\nreturns the value of the given property; however, if the single argument\\nis given in css syntax ('text-align:center'), .style() sets the css\\nappropriately.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"style\",\n \"return\": {\n \"description\": \"value of property\",\n \"type\": \"String\"\n },\n \"example\": [\n \"\\n\\nvar myDiv = createDiv('I like pandas.');\\nmyDiv.style('font-size', '18px');\\nmyDiv.style('color', '#ff0000');\\n\\n\\nvar col = color(25, 23, 200, 50);\\nvar button = createButton('button');\\nbutton.style('background-color', col);\\nbutton.position(10, 10);\\n\\n\\nvar myDiv;\\nfunction setup() {\\n background(200);\\n myDiv = createDiv('I like gray.');\\n myDiv.position(20, 20);\\n}\\n\\nfunction draw() {\\n myDiv.style('font-size', mouseX + 'px');\\n}\\n\"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 1762,\n \"params\": [\n {\n \"name\": \"property\",\n \"description\": \"property to be set\\n\",\n \"type\": \"String\"\n }\n ],\n \"return\": {\n \"description\": \"value of property\",\n \"type\": \"String\"\n }\n },\n {\n \"line\": 1797,\n \"params\": [\n {\n \"name\": \"property\",\n \"description\": \"\",\n \"type\": \"String\"\n },\n {\n \"name\": \"value\",\n \"description\": \"value to assign to property\\n\",\n \"type\": \"String|Number|p5.Color\"\n }\n ],\n \"chainable\": 1,\n \"return\": {\n \"description\": \"current value of property, if no value is given as second argument\",\n \"type\": \"String\"\n }\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1851,\n \"description\": \"Adds a new attribute or changes the value of an existing attribute\\n on the specified element. If no value is specified, returns the\\n value of the given attribute, or null if attribute is not set.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"attribute\",\n \"return\": {\n \"description\": \"value of attribute\",\n \"type\": \"String\"\n },\n \"example\": [\n \"\\n \\n var myDiv = createDiv('I like pandas.');\\n myDiv.attribute('align', 'center');\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 1851,\n \"params\": [],\n \"return\": {\n \"description\": \"value of attribute\",\n \"type\": \"String\"\n }\n },\n {\n \"line\": 1866,\n \"params\": [\n {\n \"name\": \"attr\",\n \"description\": \"attribute to set\\n\",\n \"type\": \"String\"\n },\n {\n \"name\": \"value\",\n \"description\": \"value to assign to attribute\\n\",\n \"type\": \"String\"\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1895,\n \"description\": \"Removes an attribute on the specified element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"removeAttribute\",\n \"params\": [\n {\n \"name\": \"attr\",\n \"description\": \"attribute to remove\\n\",\n \"type\": \"String\"\n }\n ],\n \"chainable\": 1,\n \"example\": [\n \"\\n \\n var button;\\n var checkbox;\\nfunction setup() {\\n checkbox = createCheckbox('enable', true);\\n checkbox.changed(enableButton);\\n button = createButton('button');\\n button.position(10, 10);\\n }\\nfunction enableButton() {\\n if (this.checked()) {\\n // Re-enable the button\\n button.removeAttribute('disabled');\\n } else {\\n // Disable the button\\n button.attribute('disabled', '');\\n }\\n }\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1940,\n \"description\": \"Either returns the value of the element if no arguments\\ngiven, or sets the value of the element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"value\",\n \"return\": {\n \"description\": \"value of the element\",\n \"type\": \"String|Number\"\n },\n \"example\": [\n \"\\n\\n// gets the value\\nvar inp;\\nfunction setup() {\\n inp = createInput('');\\n}\\n\\nfunction mousePressed() {\\n print(inp.value());\\n}\\n\\n\\n// sets the value\\nvar inp;\\nfunction setup() {\\n inp = createInput('myValue');\\n}\\n\\nfunction mousePressed() {\\n inp.value('myValue');\\n}\\n\"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 1940,\n \"params\": [],\n \"return\": {\n \"description\": \"value of the element\",\n \"type\": \"String|Number\"\n }\n },\n {\n \"line\": 1970,\n \"params\": [\n {\n \"name\": \"value\",\n \"description\": \"\",\n \"type\": \"String|Number\"\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 1986,\n \"description\": \"Shows the current element. Essentially, setting display:block for the style.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"show\",\n \"chainable\": 1,\n \"example\": [\n \"\\n \\n var div = createDiv('div');\\n div.style('display', 'none');\\n div.show(); // turns display to block\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2004,\n \"description\": \"Hides the current element. Essentially, setting display:none for the style.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"hide\",\n \"chainable\": 1,\n \"example\": [\n \"\\n\\nvar div = createDiv('this is a div');\\ndiv.hide();\\n\"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2020,\n \"description\": \"Sets the width and height of the element. AUTO can be used to\\n only adjust one dimension at a time. If no arguments are given, it\\n returns the width and height of the element in an object. In case of\\n elements which need to be loaded, such as images, it is recommended\\n to call the function after the element has finished loading.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"size\",\n \"return\": {\n \"description\": \"the width and height of the element in an object\",\n \"type\": \"Object\"\n },\n \"example\": [\n \"\\n \\n let div = createDiv('this is a div');\\n div.size(100, 100);\\n let img = createImg('assets/laDefense.jpg', () => {\\n img.size(10, AUTO);\\n });\\n \"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 2020,\n \"params\": [],\n \"return\": {\n \"description\": \"the width and height of the element in an object\",\n \"type\": \"Object\"\n }\n },\n {\n \"line\": 2039,\n \"params\": [\n {\n \"name\": \"w\",\n \"description\": \"width of the element, either AUTO, or a number\\n\",\n \"type\": \"Number|Constant\"\n },\n {\n \"name\": \"h\",\n \"description\": \"height of the element, either AUTO, or a number\\n\",\n \"type\": \"Number|Constant\",\n \"optional\": true\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2099,\n \"description\": \"Removes the element and deregisters all listeners.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"remove\",\n \"example\": [\n \"\\n\\nvar myDiv = createDiv('this is some text');\\nmyDiv.remove();\\n\"\n ],\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2119,\n \"description\": \"Registers a callback that gets called every time a file that is\\ndropped on the element has been loaded.\\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\\nMultiple files dropped at the same time will result in multiple calls to the callback.\\nYou can optionally pass a second callback which will be registered to the raw\\ndrop event.\\nThe callback will thus be provided the original\\nDragEvent.\\nDropping multiple files at the same time will trigger the second callback once per drop,\\nwhereas the first callback will trigger for each loaded file.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"drop\",\n \"params\": [\n {\n \"name\": \"callback\",\n \"description\": \"callback to receive loaded file, called for each file dropped.\\n\",\n \"type\": \"Function\"\n },\n {\n \"name\": \"fxn\",\n \"description\": \"callback triggered once when files are dropped with the drop event.\\n\",\n \"type\": \"Function\",\n \"optional\": true\n }\n ],\n \"chainable\": 1,\n \"example\": [\n \"\\n\\nfunction setup() {\\n var c = createCanvas(100, 100);\\n background(200);\\n textAlign(CENTER);\\n text('drop file', width / 2, height / 2);\\n c.drop(gotFile);\\n}\\n\\nfunction gotFile(file) {\\n background(200);\\n text('received file:', width / 2, height / 2);\\n text(file.name, width / 2, height / 2 + 50);\\n}\\n\\n\\n\\nvar img;\\n\\nfunction setup() {\\n var c = createCanvas(100, 100);\\n background(200);\\n textAlign(CENTER);\\n text('drop image', width / 2, height / 2);\\n c.drop(gotFile);\\n}\\n\\nfunction draw() {\\n if (img) {\\n image(img, 0, 0, width, height);\\n }\\n}\\n\\nfunction gotFile(file) {\\n img = createImg(file.data).hide();\\n}\\n\"\n ],\n \"alt\": \"Canvas turns into whatever image is dragged/dropped onto it.\",\n \"class\": \"p5.Element\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2253,\n \"description\": \"Path to the media element source.\\n\",\n \"itemtype\": \"property\",\n \"name\": \"src\",\n \"return\": {\n \"description\": \"src\",\n \"type\": \"String\"\n },\n \"example\": [\n \"\\n\\nvar ele;\\n\\nfunction setup() {\\n background(250);\\n\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/beat.mp3');\\n\\n //We'll set up our example so that\\n //when you click on the text,\\n //an alert box displays the MediaElement's\\n //src field.\\n textAlign(CENTER);\\n text('Click Me!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n //Show our p5.MediaElement's src field\\n alert(ele.src);\\n }\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2319,\n \"description\": \"Play an HTML5 media element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"play\",\n \"chainable\": 1,\n \"example\": [\n \"\\n\\nvar ele;\\n\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/beat.mp3');\\n\\n background(250);\\n textAlign(CENTER);\\n text('Click to Play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n //Here we call the play() function on\\n //the p5.MediaElement we created above.\\n //This will start the audio sample.\\n ele.play();\\n\\n background(200);\\n text('You clicked Play!', width / 2, height / 2);\\n }\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2380,\n \"description\": \"Stops an HTML5 media element (sets current time to zero).\\n\",\n \"itemtype\": \"method\",\n \"name\": \"stop\",\n \"chainable\": 1,\n \"example\": [\n \"\\n\\n//This example both starts\\n//and stops a sound sample\\n//when the user clicks the canvas\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsPlaying = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/beat.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (sampleIsPlaying) {\\n //if the sample is currently playing\\n //calling the stop() function on\\n //our p5.MediaElement will stop\\n //it and reset its current\\n //time to 0 (i.e. it will start\\n //at the beginning the next time\\n //you play it)\\n ele.stop();\\n\\n sampleIsPlaying = false;\\n text('Click to play!', width / 2, height / 2);\\n } else {\\n //loop our sound element until we\\n //call ele.stop() on it.\\n ele.loop();\\n\\n sampleIsPlaying = true;\\n text('Click to stop!', width / 2, height / 2);\\n }\\n }\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2444,\n \"description\": \"Pauses an HTML5 media element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"pause\",\n \"chainable\": 1,\n \"example\": [\n \"\\n\\n//This example both starts\\n//and pauses a sound sample\\n//when the user clicks the canvas\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsPlaying = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (sampleIsPlaying) {\\n //Calling pause() on our\\n //p5.MediaElement will stop it\\n //playing, but when we call the\\n //loop() or play() functions\\n //the sample will start from\\n //where we paused it.\\n ele.pause();\\n\\n sampleIsPlaying = false;\\n text('Click to resume!', width / 2, height / 2);\\n } else {\\n //loop our sound element until we\\n //call ele.pause() on it.\\n ele.loop();\\n\\n sampleIsPlaying = true;\\n text('Click to pause!', width / 2, height / 2);\\n }\\n }\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2506,\n \"description\": \"Set 'loop' to true for an HTML5 media element, and starts playing.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"loop\",\n \"chainable\": 1,\n \"example\": [\n \"\\n\\n//Clicking the canvas will loop\\n//the audio sample until the user\\n//clicks again to stop it\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsLooping = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to loop!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (!sampleIsLooping) {\\n //loop our sound element until we\\n //call ele.stop() on it.\\n ele.loop();\\n\\n sampleIsLooping = true;\\n text('Click to stop!', width / 2, height / 2);\\n } else {\\n ele.stop();\\n\\n sampleIsLooping = false;\\n text('Click to loop!', width / 2, height / 2);\\n }\\n }\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2562,\n \"description\": \"Set 'loop' to false for an HTML5 media element. Element will stop\\nwhen it reaches the end.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"noLoop\",\n \"chainable\": 1,\n \"example\": [\n \"\\n\\n//This example both starts\\n//and stops loop of sound sample\\n//when the user clicks the canvas\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsPlaying = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/beat.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (sampleIsPlaying) {\\n ele.noLoop();\\n text('No more Loops!', width / 2, height / 2);\\n } else {\\n ele.loop();\\n sampleIsPlaying = true;\\n text('Click to stop looping!', width / 2, height / 2);\\n }\\n }\\n}\\n\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2614,\n \"description\": \"Set HTML5 media element to autoplay or not.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"autoplay\",\n \"params\": [\n {\n \"name\": \"autoplay\",\n \"description\": \"whether the element should autoplay\\n\",\n \"type\": \"Boolean\"\n }\n ],\n \"chainable\": 1,\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2626,\n \"description\": \"Sets volume for this HTML5 media element. If no argument is given,\\nreturns the current volume.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"volume\",\n \"return\": {\n \"description\": \"current volume\",\n \"type\": \"Number\"\n },\n \"example\": [\n \"\\n\\nvar ele;\\nfunction setup() {\\n // p5.MediaElement objects are usually created\\n // by calling the createAudio(), createVideo(),\\n // and createCapture() functions.\\n // In this example we create\\n // a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(250);\\n textAlign(CENTER);\\n text('Click to Play!', width / 2, height / 2);\\n}\\nfunction mouseClicked() {\\n // Here we call the volume() function\\n // on the sound element to set its volume\\n // Volume must be between 0.0 and 1.0\\n ele.volume(0.2);\\n ele.play();\\n background(200);\\n text('You clicked Play!', width / 2, height / 2);\\n}\\n\\n\\nvar audio;\\nvar counter = 0;\\n\\nfunction loaded() {\\n audio.play();\\n}\\n\\nfunction setup() {\\n audio = createAudio('assets/lucky_dragons.mp3', loaded);\\n textAlign(CENTER);\\n}\\n\\nfunction draw() {\\n if (counter === 0) {\\n background(0, 255, 0);\\n text('volume(0.9)', width / 2, height / 2);\\n } else if (counter === 1) {\\n background(255, 255, 0);\\n text('volume(0.5)', width / 2, height / 2);\\n } else if (counter === 2) {\\n background(255, 0, 0);\\n text('volume(0.1)', width / 2, height / 2);\\n }\\n}\\n\\nfunction mousePressed() {\\n counter++;\\n if (counter === 0) {\\n audio.volume(0.9);\\n } else if (counter === 1) {\\n audio.volume(0.5);\\n } else if (counter === 2) {\\n audio.volume(0.1);\\n } else {\\n counter = 0;\\n audio.volume(0.9);\\n }\\n}\\n\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 2626,\n \"params\": [],\n \"return\": {\n \"description\": \"current volume\",\n \"type\": \"Number\"\n }\n },\n {\n \"line\": 2699,\n \"params\": [\n {\n \"name\": \"val\",\n \"description\": \"volume between 0.0 and 1.0\\n\",\n \"type\": \"Number\"\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2712,\n \"description\": \"If no arguments are given, returns the current playback speed of the\\nelement. The speed parameter sets the speed where 2.0 will play the\\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\\nthe element in normal speed in reverse.(Note that not all browsers support\\nbackward playback and even if they do, playback might not be smooth.)\\n\",\n \"itemtype\": \"method\",\n \"name\": \"speed\",\n \"return\": {\n \"description\": \"current playback speed of the element\",\n \"type\": \"Number\"\n },\n \"example\": [\n \"\\n\\n//Clicking the canvas will loop\\n//the audio sample until the user\\n//clicks again to stop it\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\nvar button;\\n\\nfunction setup() {\\n createCanvas(710, 400);\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/beat.mp3');\\n ele.loop();\\n background(200);\\n\\n button = createButton('2x speed');\\n button.position(100, 68);\\n button.mousePressed(twice_speed);\\n\\n button = createButton('half speed');\\n button.position(200, 68);\\n button.mousePressed(half_speed);\\n\\n button = createButton('reverse play');\\n button.position(300, 68);\\n button.mousePressed(reverse_speed);\\n\\n button = createButton('STOP');\\n button.position(400, 68);\\n button.mousePressed(stop_song);\\n\\n button = createButton('PLAY!');\\n button.position(500, 68);\\n button.mousePressed(play_speed);\\n}\\n\\nfunction twice_speed() {\\n ele.speed(2);\\n}\\n\\nfunction half_speed() {\\n ele.speed(0.5);\\n}\\n\\nfunction reverse_speed() {\\n ele.speed(-1);\\n}\\n\\nfunction stop_song() {\\n ele.stop();\\n}\\n\\nfunction play_speed() {\\n ele.play();\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 2712,\n \"params\": [],\n \"return\": {\n \"description\": \"current playback speed of the element\",\n \"type\": \"Number\"\n }\n },\n {\n \"line\": 2783,\n \"params\": [\n {\n \"name\": \"speed\",\n \"description\": \"speed multiplier for element playback\\n\",\n \"type\": \"Number\"\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2800,\n \"description\": \"If no arguments are given, returns the current time of the element.\\nIf an argument is given the current time of the element is set to it.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"time\",\n \"return\": {\n \"description\": \"current time (in seconds)\",\n \"type\": \"Number\"\n },\n \"example\": [\n \"\\n\\nvar ele;\\nvar beginning = true;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(250);\\n textAlign(CENTER);\\n text('start at beginning', width / 2, height / 2);\\n}\\n\\n// this function fires with click anywhere\\nfunction mousePressed() {\\n if (beginning === true) {\\n // here we start the sound at the beginning\\n // time(0) is not necessary here\\n // as this produces the same result as\\n // play()\\n ele.play().time(0);\\n background(200);\\n text('jump 2 sec in', width / 2, height / 2);\\n beginning = false;\\n } else {\\n // here we jump 2 seconds into the sound\\n ele.play().time(2);\\n background(250);\\n text('start at beginning', width / 2, height / 2);\\n beginning = true;\\n }\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\",\n \"overloads\": [\n {\n \"line\": 2800,\n \"params\": [],\n \"return\": {\n \"description\": \"current time (in seconds)\",\n \"type\": \"Number\"\n }\n },\n {\n \"line\": 2845,\n \"params\": [\n {\n \"name\": \"time\",\n \"description\": \"time to jump to (in seconds)\\n\",\n \"type\": \"Number\"\n }\n ],\n \"chainable\": 1\n }\n ]\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2859,\n \"description\": \"Returns the duration of the HTML5 media element.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"duration\",\n \"return\": {\n \"description\": \"duration\",\n \"type\": \"Number\"\n },\n \"example\": [\n \"\\n\\nvar ele;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/doorbell.mp3');\\n background(250);\\n textAlign(CENTER);\\n text('Click to know the duration!', 10, 25, 70, 80);\\n}\\nfunction mouseClicked() {\\n ele.play();\\n background(200);\\n //ele.duration dislpays the duration\\n text(ele.duration() + ' seconds', width / 2, height / 2);\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 2998,\n \"description\": \"Schedule an event to be called when the audio or video\\nelement reaches the end. If the element is looping,\\nthis will not be called. The element is passed in\\nas the argument to the onended callback.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"onended\",\n \"params\": [\n {\n \"name\": \"callback\",\n \"description\": \"function to call when the\\n soundfile has ended. The\\n media element will be passed\\n in as the argument to the\\n callback.\\n\",\n \"type\": \"Function\"\n }\n ],\n \"chainable\": 1,\n \"example\": [\n \"\\n\\nfunction setup() {\\n var audioEl = createAudio('assets/beat.mp3');\\n audioEl.showControls();\\n audioEl.onended(sayDone);\\n}\\n\\nfunction sayDone(elt) {\\n alert('done playing ' + elt.src);\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3029,\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3031,\n \"description\": \"Send the audio output of this element to a specified audioNode or\\np5.sound object. If no element is provided, connects to p5's master\\noutput. That connection is established when this method is first called.\\nAll connections are removed by the .disconnect() method.\\nThis method is meant to be used with the p5.sound.js addon library.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"connect\",\n \"params\": [\n {\n \"name\": \"audioNode\",\n \"description\": \"AudioNode from the Web Audio API,\\nor an object from the p5.sound library\\n\",\n \"type\": \"AudioNode|Object\"\n }\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3080,\n \"description\": \"Disconnect all Web Audio routing, including to master output.\\nThis is useful if you want to re-route the output through\\naudio effects, for example.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"disconnect\",\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3095,\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3097,\n \"description\": \"Show the default MediaElement controls, as determined by the web browser.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"showControls\",\n \"example\": [\n \"\\n\\nvar ele;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n //In this example we create\\n //a new p5.MediaElement via createAudio()\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to Show Controls!', 10, 25, 70, 80);\\n}\\nfunction mousePressed() {\\n ele.showControls();\\n background(200);\\n text('Controls Shown', width / 2, height / 2);\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3128,\n \"description\": \"Hide the default mediaElement controls.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"hideControls\",\n \"example\": [\n \"\\n\\nvar ele;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n //In this example we create\\n //a new p5.MediaElement via createAudio()\\n ele = createAudio('assets/lucky_dragons.mp3');\\n ele.showControls();\\n background(200);\\n textAlign(CENTER);\\n text('Click to hide Controls!', 10, 25, 70, 80);\\n}\\nfunction mousePressed() {\\n ele.hideControls();\\n background(200);\\n text('Controls hidden', width / 2, height / 2);\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3157,\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3168,\n \"description\": \"Schedule events to trigger every time a MediaElement\\n(audio/video) reaches a playback cue point.\\nAccepts a callback function, a time (in seconds) at which to trigger\\nthe callback, and an optional parameter for the callback.\\nTime will be passed as the first parameter to the callback function,\\nand param will be the second parameter.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"addCue\",\n \"params\": [\n {\n \"name\": \"time\",\n \"description\": \"Time in seconds, relative to this media\\n element's playback. For example, to trigger\\n an event every time playback reaches two\\n seconds, pass in the number 2. This will be\\n passed as the first parameter to\\n the callback function.\\n\",\n \"type\": \"Number\"\n },\n {\n \"name\": \"callback\",\n \"description\": \"Name of a function that will be\\n called at the given time. The callback will\\n receive time and (optionally) param as its\\n two parameters.\\n\",\n \"type\": \"Function\"\n },\n {\n \"name\": \"value\",\n \"description\": \"An object to be passed as the\\n second parameter to the\\n callback function.\\n\",\n \"type\": \"Object\",\n \"optional\": true\n }\n ],\n \"return\": {\n \"description\": \"id ID of this cue,\\n useful for removeCue(id)\",\n \"type\": \"Number\"\n },\n \"example\": [\n \"\\n\\n//\\n//\\nfunction setup() {\\n noCanvas();\\n\\n var audioEl = createAudio('assets/beat.mp3');\\n audioEl.showControls();\\n\\n // schedule three calls to changeBackground\\n audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\\n audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\\n audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\\n}\\n\\nfunction changeBackground(val) {\\n background(val);\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3232,\n \"description\": \"Remove a callback based on its ID. The ID is returned by the\\naddCue method.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"removeCue\",\n \"params\": [\n {\n \"name\": \"id\",\n \"description\": \"ID of the cue, as returned by addCue\\n\",\n \"type\": \"Number\"\n }\n ],\n \"example\": [\n \"\\n\\nvar audioEl, id1, id2;\\nfunction setup() {\\n background(255, 255, 255);\\n audioEl = createAudio('assets/beat.mp3');\\n audioEl.showControls();\\n // schedule five calls to changeBackground\\n id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\\n id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\\n text('Click to remove first and last Cue!', 10, 25, 70, 80);\\n}\\nfunction mousePressed() {\\n audioEl.removeCue(id1);\\n audioEl.removeCue(id2);\\n}\\nfunction changeBackground(val) {\\n background(val);\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3274,\n \"description\": \"Remove all of the callbacks that had originally been scheduled\\nvia the addCue method.\\n\",\n \"itemtype\": \"method\",\n \"name\": \"clearCues\",\n \"params\": [\n {\n \"name\": \"id\",\n \"description\": \"ID of the cue, as returned by addCue\\n\",\n \"type\": \"Number\"\n }\n ],\n \"example\": [\n \"\\n\\nvar audioEl;\\nfunction setup() {\\n background(255, 255, 255);\\n audioEl = createAudio('assets/beat.mp3');\\n //Show the default MediaElement controls, as determined by the web browser\\n audioEl.showControls();\\n // schedule calls to changeBackground\\n background(200);\\n text('Click to change Cue!', 10, 25, 70, 80);\\n audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\\n audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\\n}\\nfunction mousePressed() {\\n // here we clear the scheduled callbacks\\n audioEl.clearCues();\\n // then we add some more callbacks\\n audioEl.addCue(1, changeBackground, color(2, 2, 2));\\n audioEl.addCue(3, changeBackground, color(255, 255, 0));\\n}\\nfunction changeBackground(val) {\\n background(val);\\n}\\n\"\n ],\n \"class\": \"p5.MediaElement\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3340,\n \"description\": \"Underlying File object. All normal File methods can be called on this.\\n\",\n \"itemtype\": \"property\",\n \"name\": \"file\",\n \"class\": \"p5.File\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3352,\n \"description\": \"File type (image, text, etc.)\\n\",\n \"itemtype\": \"property\",\n \"name\": \"type\",\n \"class\": \"p5.File\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3358,\n \"description\": \"File subtype (usually the file extension jpg, png, xml, etc.)\\n\",\n \"itemtype\": \"property\",\n \"name\": \"subtype\",\n \"class\": \"p5.File\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3364,\n \"description\": \"File name\\n\",\n \"itemtype\": \"property\",\n \"name\": \"name\",\n \"class\": \"p5.File\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3370,\n \"description\": \"File size\\n\",\n \"itemtype\": \"property\",\n \"name\": \"size\",\n \"class\": \"p5.File\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.dom.js\",\n \"line\": 3377,\n \"description\": \"URL string containing image data.\\n\",\n \"itemtype\": \"property\",\n \"name\": \"data\",\n \"class\": \"p5.File\",\n \"module\": \"p5.dom\",\n \"submodule\": \"p5.dom\"\n },\n {\n \"file\": \"lib/addons/p5.sound.js\",\n \"line\": 46,\n \"description\": \"p5.sound \\nhttps://p5js.org/reference/#/libraries/p5.sound\\nFrom the Processing Foundation and contributors\\nhttps://github.com/processing/p5.js-sound/graphs/contributors\\nMIT License (MIT)\\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE\\nSome of the many audio libraries & resources that inspire p5.sound:\\n\\nTONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). https://github.com/TONEnoTONE/Tone.js\\nbuzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). http://buzz.jaysalvat.com/\\nBoris Smus Web Audio API book, 2013. Licensed under the Apache License http://www.apache.org/licenses/LICENSE-2.0\\nwavesurfer.js https://github.com/katspaugh/wavesurfer.js\\nWeb Audio Components by Jordan Santell https://github.com/web-audio-components\\nWilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound\\nWeb Audio API: http://w3.org/TR/webaudio/\\n\\n\\n\",\n \"class\": \"p5.sound\",\n \"module\": \"p5.sound\",\n \"submodule\": \"p5.sound\"\n },\n {\n \"file\": \"lib/addons/p5.sound.js\",\n \"line\": 214,\n \"description\": \"Determine which filetypes are supported (inspired by buzz.js)\\nThe audio element (el) will only be used to test browser support for various audio formats\\n\",\n \"class\": \"p5.sound\",\n \"module\": \"p5.sound\",\n \"submodule\": \"p5.sound\"\n },\n {\n \"file\": \"lib/addons/p5.sound.js\",\n \"line\": 363,\n \"class\": \"p5.sound\",\n \"module\": \"p5.sound\",\n \"submodule\": \"p5.sound\"\n },\n {\n \"file\": \"lib/addons/p5.sound.js\",\n \"line\": 740,\n \"class\": \"p5.sound\",\n \"module\": \"p5.sound\",\n \"submodule\": \"p5.sound\"\n },\n {\n \"file\": \"lib/addons/p5.sound.js\",\n \"line\": 810,\n \"class\": \"p5.sound\",\n \"module\": \"p5.sound\",\n \"submodule\": \"p5.sound\"\n },\n {\n \"file\": \"lib/addons/p5.sound.js\",\n \"line\": 1005,\n \"description\": \"Returns the Audio Context for this sketch. Useful for users\\nwho would like to dig deeper into the Web Audio API\\n.\\n\\nSome browsers require users to startAudioContext\\nwith a user gesture, such as touchStarted in the example below.\",\n \"itemtype\": \"method\",\n \"name\": \"getAudioContext\",\n \"return\": {\n \"description\": \"AudioContext for this sketch\",\n \"type\": \"Object\"\n },\n \"example\": [\n \"\\n\\n function draw() {\\n background(255);\\n textAlign(CENTER);\\n\\n if (getAudioContext().state !== 'running') {\\n text('click to start audio', width/2, height/2);\\n } else {\\n text('audio is enabled', width/2, height/2);\\n }\\n }\\n\\n function touchStarted() {\\n if (getAudioContext().state !== 'running') {\\n getAudioContext().resume();\\n }\\n var synth = new p5.MonoSynth();\\n synth.play('A4', 0.5, 0, 0.2);\\n }\\n\\n
Creates element with given tag in the DOM with given content.\\nAppends to the container node if one is specified, otherwise\\nappends to body.
tag for the new element
html content to be inserted into the element
\\ncreateElement('h2', 'im an h2 p5.element!');\\n
Adds specified class to the element.
name of class to add
\\n var div = createDiv('div');\\n div.addClass('myClass');\\n
Removes specified class from the element.
name of class to remove
\\n // In this example, a class is set when the div is created\\n // and removed when mouse is pressed. This could link up\\n // with a CSS style rule to toggle style properties.\\nvar div;\\nfunction setup() {\\n div = createDiv('div');\\n div.addClass('myClass');\\n }\\nfunction mousePressed() {\\n div.removeClass('myClass');\\n }\\n
Checks if specified class already set to element
class name of class to check
\\n var div;\\nfunction setup() {\\n div = createDiv('div');\\n div.addClass('show');\\n }\\nfunction mousePressed() {\\n if (div.hasClass('show')) {\\n div.addClass('show');\\n } else {\\n div.removeClass('show');\\n }\\n }\\n
Toggles element class
class name to toggle
\\n var div;\\nfunction setup() {\\n div = createDiv('div');\\n div.addClass('show');\\n }\\nfunction mousePressed() {\\n div.toggleClass('show');\\n }\\n
Attaches the element as a child to the parent specified.\\n Accepts either a string ID, DOM node, or p5.Element.\\n If no argument is specified, an array of children DOM nodes is returned.
\\n var div0 = createDiv('this is the parent');\\n var div1 = createDiv('this is the child');\\n div0.child(div1); // use p5.Element\\n
\\n var div0 = createDiv('this is the parent');\\n var div1 = createDiv('this is the child');\\n div1.id('apples');\\n div0.child('apples'); // use id\\n
\\n // this example assumes there is a div already on the page\\n // with id \\\"myChildDiv\\\"\\n var div0 = createDiv('this is the parent');\\n var elt = document.getElementById('myChildDiv');\\n div0.child(elt); // use element from page\\n
the ID, DOM node, or p5.Element\\n to add to the current element
Centers a p5 Element either vertically, horizontally,\\nor both, relative to its parent or according to\\nthe body if the Element has no parent. If no argument is passed\\nthe Element is aligned both vertically and horizontally.
passing 'vertical', 'horizontal' aligns element accordingly
\\nfunction setup() {\\n var div = createDiv('').size(10, 10);\\n div.style('background-color', 'orange');\\n div.center();\\n}\\n
If an argument is given, sets the inner HTML of the element,\\n replacing any existing html. If true is included as a second\\n argument, html is appended instead of replacing existing html.\\n If no arguments are given, returns\\n the inner HTML of the element.
\\n var div = createDiv('').size(100, 100);\\n div.html('hi');\\n
\\n var div = createDiv('Hello ').size(100, 100);\\n div.html('World', true);\\n
the HTML to be placed inside the element
whether to append HTML to existing
Sets the position of the element relative to (0, 0) of the\\n window. Essentially, sets position:absolute and left and top\\n properties of style. If no arguments given returns the x and y position\\n of the element in an object.
\\n function setup() {\\n var cnv = createCanvas(100, 100);\\n // positions canvas 50px to the right and 100px\\n // below upper left corner of the window\\n cnv.position(50, 100);\\n }\\n
x-position relative to upper left of window
y-position relative to upper left of window
Sets the given style (css) property (1st arg) of the element with the\\ngiven value (2nd arg). If a single argument is given, .style()\\nreturns the value of the given property; however, if the single argument\\nis given in css syntax ('text-align:center'), .style() sets the css\\nappropriately.
\\nvar myDiv = createDiv('I like pandas.');\\nmyDiv.style('font-size', '18px');\\nmyDiv.style('color', '#ff0000');\\n
\\nvar col = color(25, 23, 200, 50);\\nvar button = createButton('button');\\nbutton.style('background-color', col);\\nbutton.position(10, 10);\\n
\\nvar myDiv;\\nfunction setup() {\\n background(200);\\n myDiv = createDiv('I like gray.');\\n myDiv.position(20, 20);\\n}\\n\\nfunction draw() {\\n myDiv.style('font-size', mouseX + 'px');\\n}\\n
property to be set
value to assign to property
Adds a new attribute or changes the value of an existing attribute\\n on the specified element. If no value is specified, returns the\\n value of the given attribute, or null if attribute is not set.
\\n var myDiv = createDiv('I like pandas.');\\n myDiv.attribute('align', 'center');\\n
attribute to set
value to assign to attribute
Removes an attribute on the specified element.
attribute to remove
\\n var button;\\n var checkbox;\\nfunction setup() {\\n checkbox = createCheckbox('enable', true);\\n checkbox.changed(enableButton);\\n button = createButton('button');\\n button.position(10, 10);\\n }\\nfunction enableButton() {\\n if (this.checked()) {\\n // Re-enable the button\\n button.removeAttribute('disabled');\\n } else {\\n // Disable the button\\n button.attribute('disabled', '');\\n }\\n }\\n
Either returns the value of the element if no arguments\\ngiven, or sets the value of the element.
\\n// gets the value\\nvar inp;\\nfunction setup() {\\n inp = createInput('');\\n}\\n\\nfunction mousePressed() {\\n print(inp.value());\\n}\\n
\\n// sets the value\\nvar inp;\\nfunction setup() {\\n inp = createInput('myValue');\\n}\\n\\nfunction mousePressed() {\\n inp.value('myValue');\\n}\\n
Shows the current element. Essentially, setting display:block for the style.
\\n var div = createDiv('div');\\n div.style('display', 'none');\\n div.show(); // turns display to block\\n
Hides the current element. Essentially, setting display:none for the style.
\\nvar div = createDiv('this is a div');\\ndiv.hide();\\n
Sets the width and height of the element. AUTO can be used to\\n only adjust one dimension at a time. If no arguments are given, it\\n returns the width and height of the element in an object. In case of\\n elements which need to be loaded, such as images, it is recommended\\n to call the function after the element has finished loading.
\\n let div = createDiv('this is a div');\\n div.size(100, 100);\\n let img = createImg('assets/laDefense.jpg', () => {\\n img.size(10, AUTO);\\n });\\n
width of the element, either AUTO, or a number
height of the element, either AUTO, or a number
Removes the element and deregisters all listeners.
\\nvar myDiv = createDiv('this is some text');\\nmyDiv.remove();\\n
Registers a callback that gets called every time a file that is\\ndropped on the element has been loaded.\\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\\nMultiple files dropped at the same time will result in multiple calls to the callback.
You can optionally pass a second callback which will be registered to the raw\\ndrop event.\\nThe callback will thus be provided the original\\nDragEvent.\\nDropping multiple files at the same time will trigger the second callback once per drop,\\nwhereas the first callback will trigger for each loaded file.
callback to receive loaded file, called for each file dropped.
callback triggered once when files are dropped with the drop event.
\\nfunction setup() {\\n var c = createCanvas(100, 100);\\n background(200);\\n textAlign(CENTER);\\n text('drop file', width / 2, height / 2);\\n c.drop(gotFile);\\n}\\n\\nfunction gotFile(file) {\\n background(200);\\n text('received file:', width / 2, height / 2);\\n text(file.name, width / 2, height / 2 + 50);\\n}\\n
\\nvar img;\\n\\nfunction setup() {\\n var c = createCanvas(100, 100);\\n background(200);\\n textAlign(CENTER);\\n text('drop image', width / 2, height / 2);\\n c.drop(gotFile);\\n}\\n\\nfunction draw() {\\n if (img) {\\n image(img, 0, 0, width, height);\\n }\\n}\\n\\nfunction gotFile(file) {\\n img = createImg(file.data).hide();\\n}\\n
Path to the media element source.
\\nvar ele;\\n\\nfunction setup() {\\n background(250);\\n\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/beat.mp3');\\n\\n //We'll set up our example so that\\n //when you click on the text,\\n //an alert box displays the MediaElement's\\n //src field.\\n textAlign(CENTER);\\n text('Click Me!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n //Show our p5.MediaElement's src field\\n alert(ele.src);\\n }\\n}\\n
Play an HTML5 media element.
\\nvar ele;\\n\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/beat.mp3');\\n\\n background(250);\\n textAlign(CENTER);\\n text('Click to Play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n //Here we call the play() function on\\n //the p5.MediaElement we created above.\\n //This will start the audio sample.\\n ele.play();\\n\\n background(200);\\n text('You clicked Play!', width / 2, height / 2);\\n }\\n}\\n
Stops an HTML5 media element (sets current time to zero).
\\n//This example both starts\\n//and stops a sound sample\\n//when the user clicks the canvas\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsPlaying = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/beat.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (sampleIsPlaying) {\\n //if the sample is currently playing\\n //calling the stop() function on\\n //our p5.MediaElement will stop\\n //it and reset its current\\n //time to 0 (i.e. it will start\\n //at the beginning the next time\\n //you play it)\\n ele.stop();\\n\\n sampleIsPlaying = false;\\n text('Click to play!', width / 2, height / 2);\\n } else {\\n //loop our sound element until we\\n //call ele.stop() on it.\\n ele.loop();\\n\\n sampleIsPlaying = true;\\n text('Click to stop!', width / 2, height / 2);\\n }\\n }\\n}\\n
Pauses an HTML5 media element.
\\n//This example both starts\\n//and pauses a sound sample\\n//when the user clicks the canvas\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsPlaying = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (sampleIsPlaying) {\\n //Calling pause() on our\\n //p5.MediaElement will stop it\\n //playing, but when we call the\\n //loop() or play() functions\\n //the sample will start from\\n //where we paused it.\\n ele.pause();\\n\\n sampleIsPlaying = false;\\n text('Click to resume!', width / 2, height / 2);\\n } else {\\n //loop our sound element until we\\n //call ele.pause() on it.\\n ele.loop();\\n\\n sampleIsPlaying = true;\\n text('Click to pause!', width / 2, height / 2);\\n }\\n }\\n}\\n
Set 'loop' to true for an HTML5 media element, and starts playing.
\\n//Clicking the canvas will loop\\n//the audio sample until the user\\n//clicks again to stop it\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsLooping = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to loop!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (!sampleIsLooping) {\\n //loop our sound element until we\\n //call ele.stop() on it.\\n ele.loop();\\n\\n sampleIsLooping = true;\\n text('Click to stop!', width / 2, height / 2);\\n } else {\\n ele.stop();\\n\\n sampleIsLooping = false;\\n text('Click to loop!', width / 2, height / 2);\\n }\\n }\\n}\\n
Set 'loop' to false for an HTML5 media element. Element will stop\\nwhen it reaches the end.
\\n//This example both starts\\n//and stops loop of sound sample\\n//when the user clicks the canvas\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\n//while our audio is playing,\\n//this will be set to true\\nvar sampleIsPlaying = false;\\n\\nfunction setup() {\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/beat.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to play!', width / 2, height / 2);\\n}\\n\\nfunction mouseClicked() {\\n //here we test if the mouse is over the\\n //canvas element when it's clicked\\n if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\\n background(200);\\n\\n if (sampleIsPlaying) {\\n ele.noLoop();\\n text('No more Loops!', width / 2, height / 2);\\n } else {\\n ele.loop();\\n sampleIsPlaying = true;\\n text('Click to stop looping!', width / 2, height / 2);\\n }\\n }\\n}\\n
Set HTML5 media element to autoplay or not.
whether the element should autoplay
Sets volume for this HTML5 media element. If no argument is given,\\nreturns the current volume.
\\nvar ele;\\nfunction setup() {\\n // p5.MediaElement objects are usually created\\n // by calling the createAudio(), createVideo(),\\n // and createCapture() functions.\\n // In this example we create\\n // a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(250);\\n textAlign(CENTER);\\n text('Click to Play!', width / 2, height / 2);\\n}\\nfunction mouseClicked() {\\n // Here we call the volume() function\\n // on the sound element to set its volume\\n // Volume must be between 0.0 and 1.0\\n ele.volume(0.2);\\n ele.play();\\n background(200);\\n text('You clicked Play!', width / 2, height / 2);\\n}\\n
\\nvar audio;\\nvar counter = 0;\\n\\nfunction loaded() {\\n audio.play();\\n}\\n\\nfunction setup() {\\n audio = createAudio('assets/lucky_dragons.mp3', loaded);\\n textAlign(CENTER);\\n}\\n\\nfunction draw() {\\n if (counter === 0) {\\n background(0, 255, 0);\\n text('volume(0.9)', width / 2, height / 2);\\n } else if (counter === 1) {\\n background(255, 255, 0);\\n text('volume(0.5)', width / 2, height / 2);\\n } else if (counter === 2) {\\n background(255, 0, 0);\\n text('volume(0.1)', width / 2, height / 2);\\n }\\n}\\n\\nfunction mousePressed() {\\n counter++;\\n if (counter === 0) {\\n audio.volume(0.9);\\n } else if (counter === 1) {\\n audio.volume(0.5);\\n } else if (counter === 2) {\\n audio.volume(0.1);\\n } else {\\n counter = 0;\\n audio.volume(0.9);\\n }\\n}\\n
volume between 0.0 and 1.0
If no arguments are given, returns the current playback speed of the\\nelement. The speed parameter sets the speed where 2.0 will play the\\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\\nthe element in normal speed in reverse.(Note that not all browsers support\\nbackward playback and even if they do, playback might not be smooth.)
\\n//Clicking the canvas will loop\\n//the audio sample until the user\\n//clicks again to stop it\\n\\n//We will store the p5.MediaElement\\n//object in here\\nvar ele;\\nvar button;\\n\\nfunction setup() {\\n createCanvas(710, 400);\\n //Here we create a p5.MediaElement object\\n //using the createAudio() function.\\n ele = createAudio('assets/beat.mp3');\\n ele.loop();\\n background(200);\\n\\n button = createButton('2x speed');\\n button.position(100, 68);\\n button.mousePressed(twice_speed);\\n\\n button = createButton('half speed');\\n button.position(200, 68);\\n button.mousePressed(half_speed);\\n\\n button = createButton('reverse play');\\n button.position(300, 68);\\n button.mousePressed(reverse_speed);\\n\\n button = createButton('STOP');\\n button.position(400, 68);\\n button.mousePressed(stop_song);\\n\\n button = createButton('PLAY!');\\n button.position(500, 68);\\n button.mousePressed(play_speed);\\n}\\n\\nfunction twice_speed() {\\n ele.speed(2);\\n}\\n\\nfunction half_speed() {\\n ele.speed(0.5);\\n}\\n\\nfunction reverse_speed() {\\n ele.speed(-1);\\n}\\n\\nfunction stop_song() {\\n ele.stop();\\n}\\n\\nfunction play_speed() {\\n ele.play();\\n}\\n
speed multiplier for element playback
If no arguments are given, returns the current time of the element.\\nIf an argument is given the current time of the element is set to it.
\\nvar ele;\\nvar beginning = true;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(250);\\n textAlign(CENTER);\\n text('start at beginning', width / 2, height / 2);\\n}\\n\\n// this function fires with click anywhere\\nfunction mousePressed() {\\n if (beginning === true) {\\n // here we start the sound at the beginning\\n // time(0) is not necessary here\\n // as this produces the same result as\\n // play()\\n ele.play().time(0);\\n background(200);\\n text('jump 2 sec in', width / 2, height / 2);\\n beginning = false;\\n } else {\\n // here we jump 2 seconds into the sound\\n ele.play().time(2);\\n background(250);\\n text('start at beginning', width / 2, height / 2);\\n beginning = true;\\n }\\n}\\n
time to jump to (in seconds)
Returns the duration of the HTML5 media element.
\\nvar ele;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n //In this example we create\\n //a new p5.MediaElement via createAudio().\\n ele = createAudio('assets/doorbell.mp3');\\n background(250);\\n textAlign(CENTER);\\n text('Click to know the duration!', 10, 25, 70, 80);\\n}\\nfunction mouseClicked() {\\n ele.play();\\n background(200);\\n //ele.duration dislpays the duration\\n text(ele.duration() + ' seconds', width / 2, height / 2);\\n}\\n
Schedule an event to be called when the audio or video\\nelement reaches the end. If the element is looping,\\nthis will not be called. The element is passed in\\nas the argument to the onended callback.
function to call when the\\n soundfile has ended. The\\n media element will be passed\\n in as the argument to the\\n callback.
\\nfunction setup() {\\n var audioEl = createAudio('assets/beat.mp3');\\n audioEl.showControls();\\n audioEl.onended(sayDone);\\n}\\n\\nfunction sayDone(elt) {\\n alert('done playing ' + elt.src);\\n}\\n
Send the audio output of this element to a specified audioNode or\\np5.sound object. If no element is provided, connects to p5's master\\noutput. That connection is established when this method is first called.\\nAll connections are removed by the .disconnect() method.
This method is meant to be used with the p5.sound.js addon library.
AudioNode from the Web Audio API,\\nor an object from the p5.sound library
Disconnect all Web Audio routing, including to master output.\\nThis is useful if you want to re-route the output through\\naudio effects, for example.
Show the default MediaElement controls, as determined by the web browser.
\\nvar ele;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n //In this example we create\\n //a new p5.MediaElement via createAudio()\\n ele = createAudio('assets/lucky_dragons.mp3');\\n background(200);\\n textAlign(CENTER);\\n text('Click to Show Controls!', 10, 25, 70, 80);\\n}\\nfunction mousePressed() {\\n ele.showControls();\\n background(200);\\n text('Controls Shown', width / 2, height / 2);\\n}\\n
Hide the default mediaElement controls.
\\nvar ele;\\nfunction setup() {\\n //p5.MediaElement objects are usually created\\n //by calling the createAudio(), createVideo(),\\n //and createCapture() functions.\\n //In this example we create\\n //a new p5.MediaElement via createAudio()\\n ele = createAudio('assets/lucky_dragons.mp3');\\n ele.showControls();\\n background(200);\\n textAlign(CENTER);\\n text('Click to hide Controls!', 10, 25, 70, 80);\\n}\\nfunction mousePressed() {\\n ele.hideControls();\\n background(200);\\n text('Controls hidden', width / 2, height / 2);\\n}\\n
Schedule events to trigger every time a MediaElement\\n(audio/video) reaches a playback cue point.
Accepts a callback function, a time (in seconds) at which to trigger\\nthe callback, and an optional parameter for the callback.
Time will be passed as the first parameter to the callback function,\\nand param will be the second parameter.
Time in seconds, relative to this media\\n element's playback. For example, to trigger\\n an event every time playback reaches two\\n seconds, pass in the number 2. This will be\\n passed as the first parameter to\\n the callback function.
Name of a function that will be\\n called at the given time. The callback will\\n receive time and (optionally) param as its\\n two parameters.
An object to be passed as the\\n second parameter to the\\n callback function.
\\n//\\n//\\nfunction setup() {\\n noCanvas();\\n\\n var audioEl = createAudio('assets/beat.mp3');\\n audioEl.showControls();\\n\\n // schedule three calls to changeBackground\\n audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\\n audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\\n audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\\n}\\n\\nfunction changeBackground(val) {\\n background(val);\\n}\\n
Remove a callback based on its ID. The ID is returned by the\\naddCue method.
ID of the cue, as returned by addCue
\\nvar audioEl, id1, id2;\\nfunction setup() {\\n background(255, 255, 255);\\n audioEl = createAudio('assets/beat.mp3');\\n audioEl.showControls();\\n // schedule five calls to changeBackground\\n id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\\n id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\\n text('Click to remove first and last Cue!', 10, 25, 70, 80);\\n}\\nfunction mousePressed() {\\n audioEl.removeCue(id1);\\n audioEl.removeCue(id2);\\n}\\nfunction changeBackground(val) {\\n background(val);\\n}\\n
Remove all of the callbacks that had originally been scheduled\\nvia the addCue method.
\\nvar audioEl;\\nfunction setup() {\\n background(255, 255, 255);\\n audioEl = createAudio('assets/beat.mp3');\\n //Show the default MediaElement controls, as determined by the web browser\\n audioEl.showControls();\\n // schedule calls to changeBackground\\n background(200);\\n text('Click to change Cue!', 10, 25, 70, 80);\\n audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\\n audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\\n audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\\n audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\\n audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\\n}\\nfunction mousePressed() {\\n // here we clear the scheduled callbacks\\n audioEl.clearCues();\\n // then we add some more callbacks\\n audioEl.addCue(1, changeBackground, color(2, 2, 2));\\n audioEl.addCue(3, changeBackground, color(255, 255, 0));\\n}\\nfunction changeBackground(val) {\\n background(val);\\n}\\n
Underlying File object. All normal File methods can be called on this.
File type (image, text, etc.)
File subtype (usually the file extension jpg, png, xml, etc.)
File name
File size
URL string containing image data.
p5.sound \\nhttps://p5js.org/reference/#/libraries/p5.sound
From the Processing Foundation and contributors\\nhttps://github.com/processing/p5.js-sound/graphs/contributors
MIT License (MIT)\\nhttps://github.com/processing/p5.js-sound/blob/master/LICENSE
Some of the many audio libraries & resources that inspire p5.sound:
Wilm Thoben's Sound library for Processing https://github.com/processing/processing/tree/master/java/libraries/sound
Web Audio API: http://w3.org/TR/webaudio/
Determine which filetypes are supported (inspired by buzz.js)\\nThe audio element (el) will only be used to test browser support for various audio formats
Returns the Audio Context for this sketch. Useful for users\\nwho would like to dig deeper into the Web Audio API\\n.
Some browsers require users to startAudioContext\\nwith a user gesture, such as touchStarted in the example below.
\\n function draw() {\\n background(255);\\n textAlign(CENTER);\\n\\n if (getAudioContext().state !== 'running') {\\n text('click to start audio', width/2, height/2);\\n } else {\\n text('audio is enabled', width/2, height/2);\\n }\\n }\\n\\n function touchStarted() {\\n if (getAudioContext().state !== 'running') {\\n getAudioContext().resume();\\n }\\n var synth = new p5.MonoSynth();\\n synth.play('A4', 0.5, 0, 0.2);\\n }\\n\\n
It is a good practice to give users control over starting audio playback.\\nThis practice is enforced by Google Chrome's autoplay policy as of r70\\n(info), iOS Safari, and other browsers.\\n
\\nuserStartAudio() starts the Audio Context on a user gesture. It utilizes\\nthe StartAudioContext library by\\nYotam Mann (MIT Licence, 2016). Read more at https://github.com/tambien/StartAudioContext.\\n
Starting the audio context on a user gesture can be as simple as userStartAudio().\\nOptional parameters let you decide on a specific element that will start the audio context,\\nand/or call a function once the audio context is started.
userStartAudio()
This argument can be an Element,\\n Selector String, NodeList, p5.Element,\\n jQuery Element, or an Array of any of those.
Callback to invoke when the AudioContext has started
\\nfunction setup() {\\n var myDiv = createDiv('click to start audio');\\n myDiv.position(0, 0);\\n\\n var mySynth = new p5.MonoSynth();\\n\\n // This won't play until the context has started\\n mySynth.play('A6');\\n\\n // Start the audio context on a click/touch event\\n userStartAudio().then(function() {\\n myDiv.remove();\\n });\\n}\\n
Master contains AudioContext and the master sound output.
Returns a number representing the master amplitude (volume) for sound\\nin this sketch.
Scale the output of all sound in this sketch
rampTime
How This Works: When you load the p5.sound module, it\\ncreates a single instance of p5sound. All sound objects in this\\nmodule output to p5sound before reaching your computer's output.\\nSo if you change the amplitude of p5sound, it impacts all of the\\nsound in this module.
If no value is provided, returns a Web Audio API Gain Node
Volume (amplitude) between 0.0\\n and 1.0 or modulating signal/oscillator
Fade for t seconds
Schedule this event to happen at\\n t seconds in the future
p5.soundOut is the p5.sound master output. It sends output to\\nthe destination of this window's web audio context. It contains\\nWeb Audio API nodes including a dyanmicsCompressor (.limiter),\\nand Gain Nodes for .input and .output.
p5.soundOut
.limiter
.input
.output
Returns a number representing the sample rate, in samples per second,\\nof all sound objects in this audio context. It is determined by the\\nsampling rate of your operating system's sound card, and it is not\\ncurrently possile to change.\\nIt is often 44100, or twice the range of human hearing.
Returns the closest MIDI note value for\\na given frequency.
A freqeuncy, for example, the "A"\\n above Middle C is 440Hz
Returns the frequency value of a MIDI note value.\\nGeneral MIDI treats notes as integers where middle C\\nis 60, C# is 61, D is 62 etc. Useful for generating\\nmusical frequencies with oscillators.
The number of a MIDI note
\\nvar notes = [60, 64, 67, 72];\\nvar i = 0;\\n\\nfunction setup() {\\n osc = new p5.Oscillator('Triangle');\\n osc.start();\\n frameRate(1);\\n}\\n\\nfunction draw() {\\n var freq = midiToFreq(notes[i]);\\n osc.freq(freq);\\n i++;\\n if (i >= notes.length){\\n i = 0;\\n }\\n}\\n
List the SoundFile formats that you will include. LoadSound\\nwill search your directory for these extensions, and will pick\\na format that is compatable with the client's web browser.\\nHere is a free online file\\nconverter.
i.e. 'mp3', 'wav', 'ogg'
\\nfunction preload() {\\n // set the global sound formats\\n soundFormats('mp3', 'ogg');\\n\\n // load either beatbox.mp3, or .ogg, depending on browser\\n mySound = loadSound('assets/beatbox.mp3');\\n}\\n\\nfunction setup() {\\n mySound.play();\\n}\\n
Used by Osc and Envelope to chain signal math
loadSound() returns a new p5.SoundFile from a specified\\npath. If called during preload(), the p5.SoundFile will be ready\\nto play in time for setup() and draw(). If called outside of\\npreload, the p5.SoundFile will not be ready immediately, so\\nloadSound accepts a callback as the second parameter. Using a\\n\\nlocal server is recommended when loading external files.
Path to the sound file, or an array with\\n paths to soundfiles in multiple formats\\n i.e. ['sound.ogg', 'sound.mp3'].\\n Alternately, accepts an object: either\\n from the HTML5 File API, or a p5.File.
Name of a function to call if there is\\n an error loading the file.
Name of a function to call while file is loading.\\n This function will receive the percentage loaded\\n so far, from 0.0 to 1.0.
\\nfunction preload() {\\n mySound = loadSound('assets/doorbell.mp3');\\n}\\n\\nfunction setup() {\\n mySound.setVolume(0.1);\\n mySound.play();\\n}\\n
Returns true if the sound file finished loading successfully.
Play the p5.SoundFile
(optional) schedule playback to start (in seconds from now).
(optional) playback rate
(optional) amplitude (volume)\\n of playback
(optional) cue start time in seconds
(optional) duration of playback in seconds
p5.SoundFile has two play modes: restart and\\nsustain. Play Mode determines what happens to a\\np5.SoundFile if it is triggered while in the middle of playback.\\nIn sustain mode, playback will continue simultaneous to the\\nnew playback. In restart mode, play() will stop playback\\nand start over. With untilDone, a sound will play only if it's\\nnot already playing. Sustain is the default mode.
restart
sustain
'restart' or 'sustain' or 'untilDone'
\\nvar mySound;\\nfunction preload(){\\n mySound = loadSound('assets/Damscray_DancingTiger.mp3');\\n}\\nfunction mouseClicked() {\\n mySound.playMode('sustain');\\n mySound.play();\\n}\\nfunction keyPressed() {\\n mySound.playMode('restart');\\n mySound.play();\\n}\\n\\n
Pauses a file that is currently playing. If the file is not\\nplaying, then nothing will happen.
After pausing, .play() will resume from the paused\\nposition.\\nIf p5.SoundFile had been set to loop before it was paused,\\nit will continue to loop after it is unpaused with .play().
(optional) schedule event to occur\\n seconds from now
\\nvar soundFile;\\n\\nfunction preload() {\\n soundFormats('ogg', 'mp3');\\n soundFile = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3');\\n}\\nfunction setup() {\\n background(0, 255, 0);\\n soundFile.setVolume(0.1);\\n soundFile.loop();\\n}\\nfunction keyTyped() {\\n if (key == 'p') {\\n soundFile.pause();\\n background(255, 0, 0);\\n }\\n}\\n\\nfunction keyReleased() {\\n if (key == 'p') {\\n soundFile.play();\\n background(0, 255, 0);\\n }\\n}\\n
Loop the p5.SoundFile. Accepts optional parameters to set the\\nplayback rate, playback volume, loopStart, loopEnd.
(optional) playback volume
(optional) startTime in seconds
(optional) loop duration in seconds
Set a p5.SoundFile's looping flag to true or false. If the sound\\nis currently playing, this change will take effect when it\\nreaches the end of the current playback.
set looping to true or false
Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.
Returns true if a p5.SoundFile is playing, false if not (i.e.\\npaused or stopped).
Returns true if a p5.SoundFile is paused, false if not (i.e.\\nplaying or stopped).
Stop soundfile playback.
(optional) schedule event to occur\\n in seconds from now
Multiply the output volume (amplitude) of a sound file\\nbetween 0.0 (silence) and 1.0 (full volume).\\n1.0 is the maximum amplitude of a digital sound, so multiplying\\nby greater than 1.0 may cause digital distortion. To\\nfade, provide a rampTime parameter. For more\\ncomplex fades, see the Envelope class.
Alternately, you can pass in a signal source such as an\\noscillator to modulate the amplitude with an audio signal.
Set the stereo panning of a p5.sound object to\\na floating point number between -1.0 (left) and 1.0 (right).\\nDefault is 0.0 (center).
Set the stereo panner
schedule this event to happen\\n seconds from now
\\n\\n var ball = {};\\n var soundFile;\\n\\n function preload() {\\n soundFormats('ogg', 'mp3');\\n soundFile = loadSound('assets/beatbox.mp3');\\n }\\n\\n function draw() {\\n background(0);\\n ball.x = constrain(mouseX, 0, width);\\n ellipse(ball.x, height/2, 20, 20)\\n }\\n\\n function mousePressed(){\\n // map the ball's x location to a panning degree\\n // between -1.0 (left) and 1.0 (right)\\n var panning = map(ball.x, 0., width,-1.0, 1.0);\\n soundFile.pan(panning);\\n soundFile.play();\\n }\\n
Returns the current stereo pan position (-1.0 to 1.0)
Set the playback rate of a sound file. Will change the speed and the pitch.\\nValues less than zero will reverse the audio buffer.
Set the playback rate. 1.0 is normal,\\n .5 is half-speed, 2.0 is twice as fast.\\n Values less than zero play backwards.
\\nvar song;\\n\\nfunction preload() {\\n song = loadSound('assets/Damscray_DancingTiger.mp3');\\n}\\n\\nfunction setup() {\\n song.loop();\\n}\\n\\nfunction draw() {\\n background(200);\\n\\n // Set the rate to a range between 0.1 and 4\\n // Changing the rate also alters the pitch\\n var speed = map(mouseY, 0.1, height, 0, 2);\\n speed = constrain(speed, 0.01, 4);\\n song.rate(speed);\\n\\n // Draw a circle to show what is going on\\n stroke(0);\\n fill(51, 100);\\n ellipse(mouseX, 100, 48, 48);\\n}\\n\\n
Returns the duration of a sound file in seconds.
Return the current position of the p5.SoundFile playhead, in seconds.\\nTime is relative to the normal buffer direction, so if reverseBuffer\\nhas been called, currentTime will count backwards.
reverseBuffer
Move the playhead of the song to a position, in seconds. Start timing\\nand playback duration. If none are given, will reset the file to play\\nentire duration from start to finish.
cueTime of the soundFile in seconds.
duration in seconds.
Return the number of channels in a sound file.\\nFor example, Mono = 1, Stereo = 2.
Return the sample rate of the sound file.
Return the number of samples in a sound file.\\nEqual to sampleRate * duration.
Returns an array of amplitude peaks in a p5.SoundFile that can be\\nused to draw a static waveform. Scans through the p5.SoundFile's\\naudio buffer to find the greatest amplitudes. Accepts one\\nparameter, 'length', which determines size of the array.\\nLarger arrays result in more precise waveform visualizations.
Inspired by Wavesurfer.js.
length is the size of the returned array.\\n Larger length results in more precision.\\n Defaults to 5*width of the browser window.
Reverses the p5.SoundFile's buffer source.\\nPlayback must be handled separately (see example).
\\nvar drum;\\n\\nfunction preload() {\\n drum = loadSound('assets/drum.mp3');\\n}\\n\\nfunction setup() {\\n drum.reverseBuffer();\\n drum.play();\\n}\\n\\n
Schedule an event to be called when the soundfile\\nreaches the end of a buffer. If the soundfile is\\nplaying through once, this will be called when it\\nends. If it is looping, it will be called when\\nstop is called.
function to call when the\\n soundfile has ended.
Connects the output of a p5sound object to input of another\\np5.sound object. For example, you may connect a p5.SoundFile to an\\nFFT or an Effect. If no parameter is given, it will connect to\\nthe master output. Most p5sound objects connect to the master\\noutput when they are created.
Audio object that accepts an input
Disconnects the output of this p5sound object.
Reset the source for this SoundFile to a\\nnew path (URL).
path to audio file
Callback
Replace the current Audio Buffer with a new Buffer.
Array of Float32 Array(s). 2 Float32 Arrays\\n will create a stereo source. 1 will create\\n a mono source.
processPeaks returns an array of timestamps where it thinks there is a beat.
This is an asynchronous function that processes the soundfile in an offline audio context,\\nand sends the results to your callback function.
The process involves running the soundfile through a lowpass filter, and finding all of the\\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.
a function to call once this data is returned
initial threshold defaults to 0.9
minimum threshold defaults to 0.22
minimum number of peaks defaults to 200
\\nvar mySound;\\nfunction preload() {\\n mySound = loadSound('assets/beat.mp3');\\n}\\n\\nfunction setup() {\\n background(0);\\n noStroke();\\n fill(255);\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n\\n // schedule calls to changeText\\n mySound.addCue(0.50, changeText, \\\"hello\\\" );\\n mySound.addCue(1.00, changeText, \\\"p5\\\" );\\n mySound.addCue(1.50, changeText, \\\"what\\\" );\\n mySound.addCue(2.00, changeText, \\\"do\\\" );\\n mySound.addCue(2.50, changeText, \\\"you\\\" );\\n mySound.addCue(3.00, changeText, \\\"want\\\" );\\n mySound.addCue(4.00, changeText, \\\"to\\\" );\\n mySound.addCue(5.00, changeText, \\\"make\\\" );\\n mySound.addCue(6.00, changeText, \\\"?\\\" );\\n}\\n\\nfunction changeText(val) {\\n background(0);\\n text(val, width/2, height/2);\\n}\\n\\nfunction mouseClicked() {\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n if (mySound.isPlaying() ) {\\n mySound.stop();\\n } else {\\n mySound.play();\\n }\\n }\\n}\\n
Save a p5.SoundFile as a .wav file. The browser will prompt the user\\nto download the file to their device. To upload a file to a server, see\\ngetBlob
name of the resulting .wav file.
\\n var inp, button, mySound;\\n var fileName = 'cool';\\n function preload() {\\n mySound = loadSound('assets/doorbell.mp3');\\n }\\n function setup() {\\n btn = createButton('click to save file');\\n btn.position(0, 0);\\n btn.mouseClicked(handleMouseClick);\\n }\\n\\n function handleMouseClick() {\\n mySound.save(fileName);\\n }\\n
This method is useful for sending a SoundFile to a server. It returns the\\n.wav-encoded audio data as a "Blob".\\nA Blob is a file-like data object that can be uploaded to a server\\nwith an http request. We'll\\nuse the httpDo options object to send a POST request with some\\nspecific options: we encode the request as multipart/form-data,\\nand attach the blob as one of the form values using FormData.
httpDo
multipart/form-data
FormData
\\n\\n function preload() {\\n mySound = loadSound('assets/doorbell.mp3');\\n }\\n\\n function setup() {\\n noCanvas();\\n var soundBlob = mySound.getBlob();\\n\\n // Now we can send the blob to a server...\\n var serverUrl = 'https://jsonplaceholder.typicode.com/posts';\\n var httpRequestOptions = {\\n method: 'POST',\\n body: new FormData().append('soundBlob', soundBlob),\\n headers: new Headers({\\n 'Content-Type': 'multipart/form-data'\\n })\\n };\\n httpDo(serverUrl, httpRequestOptions);\\n\\n // We can also create an `ObjectURL` pointing to the Blob\\n var blobUrl = URL.createObjectURL(soundBlob);\\n\\n // The `` Element accepts Object URL's\\n var htmlAudioElt = createAudio(blobUrl).showControls();\\n\\n createDiv();\\n\\n // The ObjectURL exists as long as this tab is open\\n var input = createInput(blobUrl);\\n input.attribute('readonly', true);\\n input.mouseClicked(function() { input.elt.select() });\\n }\\n\\n
Connects to the p5sound instance (master output) by default.\\nOptionally, you can pass in a specific source (i.e. a soundfile).
set the sound source\\n (optional, defaults to\\n master output)
a range between 0.0 and 1.0\\n to smooth amplitude readings
\\nfunction preload(){\\n sound1 = loadSound('assets/beat.mp3');\\n sound2 = loadSound('assets/drum.mp3');\\n}\\nfunction setup(){\\n amplitude = new p5.Amplitude();\\n sound1.play();\\n sound2.play();\\n amplitude.setInput(sound2);\\n}\\nfunction draw() {\\n background(0);\\n fill(255);\\n var level = amplitude.getLevel();\\n var size = map(level, 0, 1, 0, 200);\\n ellipse(width/2, height/2, size, size);\\n}\\nfunction mouseClicked(){\\n sound1.stop();\\n sound2.stop();\\n}\\n
Returns a single Amplitude reading at the moment it is called.\\nFor continuous readings, run in the draw loop.
Optionally return only channel 0 (left) or 1 (right)
\\nfunction preload(){\\n sound = loadSound('assets/beat.mp3');\\n}\\nfunction setup() {\\n amplitude = new p5.Amplitude();\\n sound.play();\\n}\\nfunction draw() {\\n background(0);\\n fill(255);\\n var level = amplitude.getLevel();\\n var size = map(level, 0, 1, 0, 200);\\n ellipse(width/2, height/2, size, size);\\n}\\nfunction mouseClicked(){\\n sound.stop();\\n}\\n
Determines whether the results of Amplitude.process() will be\\nNormalized. To normalize, Amplitude finds the difference the\\nloudest reading it has processed and the maximum amplitude of\\n1.0. Amplitude adds this difference to all values to produce\\nresults that will reliably map between 0.0 and 1.0. However,\\nif a louder moment occurs, the amount that Normalize adds to\\nall the values will change. Accepts an optional boolean parameter\\n(true or false). Normalizing is off by default.
set normalize to true (1) or false (0)
Smooth Amplitude analysis by averaging with the last analysis\\nframe. Off by default.
smoothing from 0.0 <= 1
Set the input source for the FFT analysis. If no source is\\nprovided, FFT will analyze all sound in the sketch.
p5.sound object (or web audio API source node)
Returns an array of amplitude values (between -1.0 and +1.0) that represent\\na snapshot of amplitude readings in a single buffer. Length will be\\nequal to bins (defaults to 1024). Can be used to draw the waveform\\nof a sound.
Must be a power of two between\\n 16 and 1024. Defaults to 1024.
If any value is provided, will return results\\n in a Float32 Array which is more precise\\n than a regular array.
Returns an array of amplitude values (between 0 and 255)\\nacross the frequency spectrum. Length is equal to FFT bins\\n(1024 by default). The array indices correspond to frequencies\\n(i.e. pitches), from the lowest to the highest that humans can\\nhear. Each value represents amplitude at that slice of the\\nfrequency spectrum. Must be called prior to using\\ngetEnergy().
If "dB," returns decibel\\n float measurements between\\n -140 and 0 (max).\\n Otherwise returns integers from 0-255.
\\nvar osc;\\nvar fft;\\n\\nfunction setup(){\\n createCanvas(100,100);\\n osc = new p5.Oscillator();\\n osc.amp(0);\\n osc.start();\\n fft = new p5.FFT();\\n}\\n\\nfunction draw(){\\n background(0);\\n\\n var freq = map(mouseX, 0, 800, 20, 15000);\\n freq = constrain(freq, 1, 20000);\\n osc.freq(freq);\\n\\n var spectrum = fft.analyze();\\n noStroke();\\n fill(0,255,0); // spectrum is green\\n for (var i = 0; i< spectrum.length; i++){\\n var x = map(i, 0, spectrum.length, 0, width);\\n var h = -height + map(spectrum[i], 0, 255, height, 0);\\n rect(x, height, width / spectrum.length, h );\\n }\\n\\n stroke(255);\\n text('Freq: ' + round(freq)+'Hz', 10, 10);\\n\\n isMouseOverCanvas();\\n}\\n\\n// only play sound when mouse is over canvas\\nfunction isMouseOverCanvas() {\\n var mX = mouseX, mY = mouseY;\\n if (mX > 0 && mX < width && mY < height && mY > 0) {\\n osc.amp(0.5, 0.2);\\n } else {\\n osc.amp(0, 0.2);\\n }\\n}\\n
Returns the amount of energy (volume) at a specific\\n\\nfrequency, or the average amount of energy between two\\nfrequencies. Accepts Number(s) corresponding\\nto frequency (in Hz), or a String corresponding to predefined\\nfrequency ranges ("bass", "lowMid", "mid", "highMid", "treble").\\nReturns a range between 0 (no energy/volume at that frequency) and\\n255 (maximum energy).\\nNOTE: analyze() must be called prior to getEnergy(). Analyze()\\ntells the FFT to analyze frequency data, and getEnergy() uses\\nthe results determine the value at a specific frequency or\\nrange of frequencies.
Will return a value representing\\n energy at this frequency. Alternately,\\n the strings "bass", "lowMid" "mid",\\n "highMid", and "treble" will return\\n predefined frequency ranges.
If a second frequency is given,\\n will return average amount of\\n energy that exists between the\\n two frequencies.
Returns the\\n\\nspectral centroid of the input signal.\\nNOTE: analyze() must be called prior to getCentroid(). Analyze()\\ntells the FFT to analyze frequency data, and getCentroid() uses\\nthe results determine the spectral centroid.
\\n\\n\\nfunction setup(){\\ncnv = createCanvas(100,100);\\nsound = new p5.AudioIn();\\nsound.start();\\nfft = new p5.FFT();\\nsound.connect(fft);\\n}\\n\\n\\nfunction draw(){\\n\\nvar centroidplot = 0.0;\\nvar spectralCentroid = 0;\\n\\n\\nbackground(0);\\nstroke(0,255,0);\\nvar spectrum = fft.analyze();\\nfill(0,255,0); // spectrum is green\\n\\n//draw the spectrum\\nfor (var i = 0; i< spectrum.length; i++){\\n var x = map(log(i), 0, log(spectrum.length), 0, width);\\n var h = map(spectrum[i], 0, 255, 0, height);\\n var rectangle_width = (log(i+1)-log(i))*(width/log(spectrum.length));\\n rect(x, height, rectangle_width, -h )\\n}\\n\\nvar nyquist = 22050;\\n\\n// get the centroid\\nspectralCentroid = fft.getCentroid();\\n\\n// the mean_freq_index calculation is for the display.\\nvar mean_freq_index = spectralCentroid/(nyquist/spectrum.length);\\n\\ncentroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, width);\\n\\n\\nstroke(255,0,0); // the line showing where the centroid is will be red\\n\\nrect(centroidplot, 0, width / spectrum.length, height)\\nnoStroke();\\nfill(255,255,255); // text is white\\ntext(\\\"centroid: \\\", 10, 20);\\ntext(round(spectralCentroid)+\\\" Hz\\\", 10, 40);\\n}\\n
Smooth FFT analysis by averaging with the last analysis frame.
0.0 < smoothing < 1.0.\\n Defaults to 0.8.
Returns an array of average amplitude values for a given number\\nof frequency bands split equally. N defaults to 16.\\nNOTE: analyze() must be called prior to linAverages(). Analyze()\\ntells the FFT to analyze frequency data, and linAverages() uses\\nthe results to group them into a smaller set of averages.
Number of returned frequency groups
Returns an array of average amplitude values of the spectrum, for a given\\nset of \\nOctave Bands\\nNOTE: analyze() must be called prior to logAverages(). Analyze()\\ntells the FFT to analyze frequency data, and logAverages() uses\\nthe results to group them into a smaller set of averages.
Array of Octave Bands objects for grouping
Calculates and Returns the 1/N\\nOctave Bands\\nN defaults to 3 and minimum central frequency to 15.625Hz.\\n(1/3 Octave Bands ~= 31 Frequency Bands)\\nSetting fCtr0 to a central value of a higher octave will ignore the lower bands\\nand produce less frequency groups.
Specifies the 1/N type of generated octave bands
Minimum central frequency for the lowest band
Fade to value, for smooth transitions
Value to set this signal
Length of fade, in seconds from now
Connect a p5.sound object or Web Audio node to this\\np5.Signal so that its amplitude values can be scaled.
Add a constant value to this audio signal,\\nand return the resulting audio signal. Does\\nnot change the value of the original signal,\\ninstead it returns a new p5.SignalAdd.
Multiply this signal by a constant value,\\nand return the resulting audio signal. Does\\nnot change the value of the original signal,\\ninstead it returns a new p5.SignalMult.
to multiply
Scale this signal value to a given range,\\nand return the result as an audio signal. Does\\nnot change the value of the original signal,\\ninstead it returns a new p5.SignalScale.
input range minumum
input range maximum
Start an oscillator. Accepts an optional parameter to\\ndetermine how long (in seconds from now) until the\\noscillator starts.
startTime in seconds from now.
frequency in Hz.
Stop an oscillator. Accepts an optional parameter\\nto determine how long (in seconds from now) until the\\noscillator stops.
Time, in seconds from now.
Set the amplitude between 0 and 1.0. Or, pass in an object\\nsuch as an oscillator to modulate amplitude with an audio signal.
between 0 and 1.0\\n or a modulating signal/oscillator
create a fade that lasts rampTime
Set frequency of an oscillator to a value. Or, pass in an object\\nsuch as an oscillator to modulate the frequency with an audio signal.
Frequency in Hz\\n or modulating signal/oscillator
Ramp time (in seconds)
Schedule this event to happen\\n at x seconds from now
\\nvar osc = new p5.Oscillator(300);\\nosc.start();\\nosc.freq(40, 10);\\n
Set type to 'sine', 'triangle', 'sawtooth' or 'square'.
'sine', 'triangle', 'sawtooth' or 'square'.
Connect to a p5.sound / Web Audio object.
A p5.sound or Web Audio object
Disconnect all outputs
Pan between Left (-1) and Right (1)
Number between -1 and 1
Set the phase of an oscillator between 0.0 and 1.0.\\nIn this implementation, phase is a delay time\\nbased on the oscillator's current frequency.
float between 0.0 and 1.0
Add a value to the p5.Oscillator's output amplitude,\\nand return the oscillator. Calling this method again\\nwill override the initial add() with a new value.
Constant number to add
Multiply the p5.Oscillator's output amplitude\\nby a fixed value (i.e. turn it up!). Calling this method\\nagain will override the initial mult() with a new value.
Constant number to multiply
Scale this oscillator's amplitude values to a given\\nrange, and return the oscillator. Calling this method\\nagain will override the initial scale() with new values.
Time until envelope reaches attackLevel
Level once attack is complete.
Time until envelope reaches decayLevel.
Level after decay. The envelope will sustain here until it is released.
Duration of the release portion of the envelope.
Level at the end of the release.
Reset the envelope with a series of time/value pairs.
Time (in seconds) before level\\n reaches attackLevel
Typically an amplitude between\\n 0.0 and 1.0
Time
Amplitude (In a standard ADSR envelope,\\n decayLevel = sustainLevel)
Release Time (in seconds)
Amplitude
\\nvar t1 = 0.1; // attack time in seconds\\nvar l1 = 0.7; // attack level 0.0 to 1.0\\nvar t2 = 0.3; // decay time in seconds\\nvar l2 = 0.1; // decay level 0.0 to 1.0\\nvar t3 = 0.2; // sustain time in seconds\\nvar l3 = 0.5; // sustain level 0.0 to 1.0\\n// release level defaults to zero\\n\\nvar env;\\nvar triOsc;\\n\\nfunction setup() {\\n background(0);\\n noStroke();\\n fill(255);\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n\\n env = new p5.Envelope(t1, l1, t2, l2, t3, l3);\\n triOsc = new p5.Oscillator('triangle');\\n triOsc.amp(env); // give the env control of the triOsc's amp\\n triOsc.start();\\n}\\n\\n// mouseClick triggers envelope if over canvas\\nfunction mouseClicked() {\\n // is mouse over canvas?\\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\\n env.play(triOsc);\\n }\\n}\\n
Set values like a traditional\\n\\nADSR envelope\\n.
Time (in seconds before envelope\\n reaches Attack Level
Time (in seconds) before envelope\\n reaches Decay/Sustain Level
Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\\n where 1.0 = attackLevel, 0.0 = releaseLevel.\\n The susRatio determines the decayLevel and the level at which the\\n sustain portion of the envelope will sustain.\\n For example, if attackLevel is 0.4, releaseLevel is 0,\\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\\n increased to 1.0 (using setRange),\\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
Set max (attackLevel) and min (releaseLevel) of envelope.
attack level (defaults to 1)
release level (defaults to 0)
Assign a parameter to be controlled by this envelope.\\nIf a p5.Sound object is given, then the p5.Envelope will control its\\noutput gain. If multiple inputs are provided, the env will\\ncontrol all of them.
A p5.sound object or\\n Web Audio Param.
Set whether the envelope ramp is linear (default) or exponential.\\nExponential ramps can be useful because we perceive amplitude\\nand frequency logarithmically.
true is exponential, false is linear
Play tells the envelope to start acting on a given input.\\nIf the input is a p5.sound object (i.e. AudioIn, Oscillator,\\nSoundFile), then Envelope will control its output volume.\\nEnvelopes can also be used to control any \\nWeb Audio Audio Param.
time from now (in seconds) at which to play
time to sustain before releasing the envelope
\\nvar attackLevel = 1.0;\\nvar releaseLevel = 0;\\n\\nvar attackTime = 0.001;\\nvar decayTime = 0.2;\\nvar susPercent = 0.2;\\nvar releaseTime = 0.5;\\n\\nvar env, triOsc;\\n\\nfunction setup() {\\n var cnv = createCanvas(100, 100);\\n\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n\\n env = new p5.Envelope();\\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\\n env.setRange(attackLevel, releaseLevel);\\n\\n triOsc = new p5.Oscillator('triangle');\\n triOsc.amp(env);\\n triOsc.start();\\n triOsc.freq(220);\\n\\n cnv.mousePressed(playEnv);\\n}\\n\\nfunction playEnv() {\\n // trigger env on triOsc, 0 seconds from now\\n // After decay, sustain for 0.2 seconds before release\\n env.play(triOsc, 0, 0.2);\\n}\\n
Trigger the Attack, and Decay portion of the Envelope.\\nSimilar to holding down a key on a piano, but it will\\nhold the sustain level until you let go. Input can be\\nany p5.sound object, or a \\nWeb Audio Param.
p5.sound Object or Web Audio Param
time from now (in seconds)
\\n\\nvar attackLevel = 1.0;\\nvar releaseLevel = 0;\\n\\nvar attackTime = 0.001;\\nvar decayTime = 0.3;\\nvar susPercent = 0.4;\\nvar releaseTime = 0.5;\\n\\nvar env, triOsc;\\n\\nfunction setup() {\\n var cnv = createCanvas(100, 100);\\n background(200);\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n\\n env = new p5.Envelope();\\n env.setADSR(attackTime, decayTime, susPercent, releaseTime);\\n env.setRange(attackLevel, releaseLevel);\\n\\n triOsc = new p5.Oscillator('triangle');\\n triOsc.amp(env);\\n triOsc.start();\\n triOsc.freq(220);\\n\\n cnv.mousePressed(envAttack);\\n}\\n\\nfunction envAttack() {\\n console.log('trigger attack');\\n env.triggerAttack();\\n\\n background(0,255,0);\\n text('attack!', width/2, height/2);\\n}\\n\\nfunction mouseReleased() {\\n env.triggerRelease();\\n\\n background(200);\\n text('click to play', width/2, height/2);\\n}\\n
Trigger the Release of the Envelope. This is similar to releasing\\nthe key on a piano and letting the sound fade according to the\\nrelease level and release time.
time to trigger the release
Exponentially ramp to a value using the first two\\nvalues from setADSR(attackTime, decayTime)\\nas \\ntime constants for simple exponential ramps.\\nIf the value is higher than current value, it uses attackTime,\\nwhile a decrease uses decayTime.
setADSR(attackTime, decayTime)
When to trigger the ramp
Target value
Second target value (optional)
\\nvar env, osc, amp, cnv;\\n\\nvar attackTime = 0.001;\\nvar decayTime = 0.2;\\nvar attackLevel = 1;\\nvar decayLevel = 0;\\n\\nfunction setup() {\\n cnv = createCanvas(100, 100);\\n fill(0,255,0);\\n noStroke();\\n\\n env = new p5.Envelope();\\n env.setADSR(attackTime, decayTime);\\n\\n osc = new p5.Oscillator();\\n osc.amp(env);\\n osc.start();\\n\\n amp = new p5.Amplitude();\\n\\n cnv.mousePressed(triggerRamp);\\n}\\n\\nfunction triggerRamp() {\\n env.ramp(osc, 0, attackLevel, decayLevel);\\n}\\n\\nfunction draw() {\\n background(20,20,20);\\n text('click me', 10, 20);\\n var h = map(amp.getLevel(), 0, 0.4, 0, height);;\\n\\n rect(0, height, width, -h);\\n}\\n
Add a value to the p5.Oscillator's output amplitude,\\nand return the oscillator. Calling this method\\nagain will override the initial add() with new values.
Multiply the p5.Envelope's output amplitude\\nby a fixed value. Calling this method\\nagain will override the initial mult() with new values.
Scale this envelope's amplitude values to a given\\nrange, and return the envelope. Calling this method\\nagain will override the initial scale() with new values.
Set the width of a Pulse object (an oscillator that implements\\nPulse Width Modulation).
Set type of noise to 'white', 'pink' or 'brown'.\\nWhite is the default.
'white', 'pink' or 'brown'
Client must allow browser to access their microphone / audioin source.\\nDefault: false. Will become true when the client enables acces.
Input amplitude, connect to it by default but not to master out
Start processing audio input. This enables the use of other\\nAudioIn methods like getLevel(). Note that by default, AudioIn\\nis not connected to p5.sound's output. So you won't hear\\nanything unless you use the connect() method.
Certain browsers limit access to the user's microphone. For example,\\nChrome only allows access from localhost and over https. For this reason,\\nyou may want to include an errorCallback—a function that is called in case\\nthe browser won't provide mic access.
Name of a function to call on\\n success.
Name of a function to call if\\n there was an error. For example,\\n some browsers do not support\\n getUserMedia.
Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\\nIf re-starting, the user may be prompted for permission access.
Connect to an audio unit. If no parameter is provided, will\\nconnect to the master output (i.e. your speakers).
An object that accepts audio input,\\n such as an FFT
Disconnect the AudioIn from all audio units. For example, if\\nconnect() had been called, disconnect() will stop sending\\nsignal to your speakers.
Read the Amplitude (volume level) of an AudioIn. The AudioIn\\nclass contains its own instance of the Amplitude class to help\\nmake it easy to get a microphone's volume level. Accepts an\\noptional smoothing value (0.0 < 1.0). NOTE: AudioIn must\\n.start() before using .getLevel().
Smoothing is 0.0 by default.\\n Smooths values based on previous values.
Set amplitude (volume) of a mic input between 0 and 1.0.
between 0 and 1.0
ramp time (optional)
Returns a list of available input sources. This is a wrapper\\nfor <a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=\\n "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
\\nand it returns a Promise.\\n
and it returns a Promise.
This callback function handles the sources when they\\n have been enumerated. The callback function\\n receives the deviceList array as its only argument
This optional callback receives the error\\n message as its argument.
\\n var audiograb;\\n\\n function setup(){\\n //new audioIn\\n audioGrab = new p5.AudioIn();\\n\\n audioGrab.getSources(function(deviceList) {\\n //print out the array of available sources\\n console.log(deviceList);\\n //set the source to the first item in the deviceList array\\n audioGrab.setSource(0);\\n });\\n }\\n
Set the input source. Accepts a number representing a\\nposition in the array returned by getSources().\\nThis is only available in browsers that support\\n<a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=\\n"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
\\nnavigator.mediaDevices.enumerateDevices().\\n
navigator.mediaDevices.enumerateDevices().
position of input source in the array
In classes that extend\\np5.Effect, connect effect nodes\\nto the wet parameter
Set the output volume of the filter.
amplitude between 0 and 1.0
create a fade that lasts until rampTime
schedule this event to happen in tFromNow seconds
Link effects together in a chainExample usage: filter.chain(reverb, delay, panner);\\nMay be used with an open-ended number of arguments
Chain together multiple sound objects
Adjust the dry/wet value.
The desired drywet value (0 - 1.0)
Send output to a p5.js-sound, Web Audio Node, or use signal to\\ncontrol an AudioParam
Disconnect all output.
The p5.Filter is built with a\\n\\nWeb Audio BiquadFilter Node.
Filter an audio signal according to a set\\nof filter parameters.
An object that outputs audio
Frequency in Hz, from 10 to 22050
Resonance/Width of the filter frequency\\n from 0.001 to 1000
Set the frequency and the resonance of the filter.
Resonance (Q) from 0.001 to 1000
Set the filter frequency, in Hz, from 10 to 22050 (the range of\\nhuman hearing, although in reality most people hear in a narrower\\nrange).
Filter Frequency
Controls either width of a bandpass frequency,\\nor the resonance of a low/highpass cutoff frequency.
Resonance/Width of filter freq\\n from 0.001 to 1000
Controls the gain attribute of a Biquad Filter.\\nThis is distinctly different from .amp() which is inherited from p5.Effect\\n.amp() controls the volume via the output gain node\\np5.Filter.gain() controls the gain parameter of a Biquad Filter node.
Toggle function. Switches between the specified type and allpass
Set the type of a p5.Filter. Possible types include:\\n"lowpass" (default), "highpass", "bandpass",\\n"lowshelf", "highshelf", "peaking", "notch",\\n"allpass".
The p5.EQ is built with abstracted p5.Filter objects.\\nTo modify any bands, use methods of the \\np5.Filter API, especially gain and freq.\\nBands are stored in an array, with indices 0 - 3, or 0 - 7
gain
freq
Process an input by connecting it to the EQ
Audio source
\\nWeb Audio Spatial Panner Node
Properties include
\\npanningModel: "equal power" or "HRTF"\\n
panningModel: "equal power" or "HRTF"
\\ndistanceModel: "linear", "inverse", or "exponential"\\n
distanceModel: "linear", "inverse", or "exponential"
Connect an audio sorce
Input source
Set the X,Y,Z position of the Panner
Getter and setter methods for position coordinates
Getter and setter methods for orient coordinates
Set the rolloff factor and max distance
Maxium distance between the source and the listener
How quickly the volume is reduced as the source moves away from the listener
The p5.Delay is built with two\\n\\nWeb Audio Delay Nodes, one for each stereo channel.
Add delay to an audio signal according to a set\\nof delay parameters.
Time (in seconds) of the delay/echo.\\n Some browsers limit delayTime to\\n 1 second.
sends the delay back through itself\\n in a loop that decreases in volume\\n each time.
Cutoff frequency. Only frequencies\\n below the lowPass will be part of the\\n delay.
Set the delay (echo) time, in seconds. Usually this value will be\\na floating point number between 0.0 and 1.0.
Time (in seconds) of the delay
Feedback occurs when Delay sends its signal back through its input\\nin a loop. The feedback amount determines how much signal to send each\\ntime through the loop. A feedback greater than 1.0 is not desirable because\\nit will increase the overall output each time through the loop,\\ncreating an infinite feedback loop. The default value is 0.5
0.0 to 1.0, or an object such as an\\n Oscillator that can be used to\\n modulate this param
Set a lowpass filter frequency for the delay. A lowpass filter\\nwill cut off any frequencies higher than the filter frequency.
A lowpass filter will cut off any\\n frequencies higher than the filter frequency.
Resonance of the filter frequency\\n cutoff, or an object (i.e. a p5.Oscillator)\\n that can be used to modulate this parameter.\\n High numbers (i.e. 15) will produce a resonance,\\n low numbers (i.e. .2) will produce a slope.
Choose a preset type of delay. 'pingPong' bounces the signal\\nfrom the left to the right channel to produce a stereo effect.\\nAny other parameter will revert to the default delay setting.
'pingPong' (1) or 'default' (0)
Set the output level of the delay effect.
Send output to a p5.sound or web audio object
Connect a source to the reverb, and assign reverb parameters.
p5.sound / Web Audio object with a sound\\n output.
Duration of the reverb, in seconds.\\n Min: 0, Max: 10. Defaults to 3.
Percentage of decay with each echo.\\n Min: 0, Max: 100. Defaults to 2.
Play the reverb backwards or forwards.
Set the reverb settings. Similar to .process(), but without\\nassigning a new input.
Set the output level of the reverb effect.
Internally, the p5.Convolver uses the a\\n\\nWeb Audio Convolver Node.
Create a p5.Convolver. Accepts a path to a soundfile\\nthat will be used to generate an impulse response.
function to call if loading is successful.\\n The object will be passed in as the argument\\n to the callback function.
function to call if loading is not successful.\\n A custom error will be passed in as the argument\\n to the callback function.
\\nvar cVerb, sound;\\nfunction preload() {\\n soundFormats('ogg', 'mp3');\\n\\n cVerb = createConvolver('assets/concrete-tunnel.mp3');\\n\\n sound = loadSound('assets/beat.mp3');\\n}\\n\\nfunction setup() {\\n // disconnect from master output...\\n sound.disconnect();\\n\\n // ...and process with (i.e. connect to) cVerb\\n // so that we only hear the convolution\\n cVerb.process(sound);\\n\\n sound.play();\\n}\\n
If you load multiple impulse files using the .addImpulse method,\\nthey will be stored as Objects in this Array. Toggle between them\\nwith the toggleImpulse(id) method.
toggleImpulse(id)
Load and assign a new Impulse Response to the p5.Convolver.\\nThe impulse is added to the .impulses array. Previous\\nimpulses can be accessed with the .toggleImpulse(id)\\nmethod.
.impulses
.toggleImpulse(id)
function (optional)
Similar to .addImpulse, except that the .impulses\\nArray is reset to save memory. A new .impulses\\narray is created with this impulse as the only item.
If you have used .addImpulse() to add multiple impulses\\nto a p5.Convolver, then you can use this method to toggle between\\nthe items in the .impulses Array. Accepts a parameter\\nto identify which impulse you wish to use, identified either by its\\noriginal filename (String) or by its position in the .impulses\\n Array (Number).\\nYou can access the objects in the .impulses Array directly. Each\\nObject has two attributes: an .audioBuffer (type:\\nWeb Audio \\nAudioBuffer) and a .name, a String that corresponds\\nwith the original filename.
.addImpulse()
.impulses\\n
.audioBuffer
.name
Identify the impulse by its original filename\\n (String), or by its position in the\\n .impulses Array (Number).
Set the global tempo, in beats per minute, for all\\np5.Parts. This method will impact all active p5.Parts.
Beats Per Minute
Seconds from now
Array of values to pass into the callback\\nat each step of the phrase. Depending on the callback\\nfunction's requirements, these values may be numbers,\\nstrings, or an object with multiple parameters.\\nZero (0) indicates a rest.
Set the tempo of this part, in Beats Per Minute.
Returns the tempo, in Beats Per Minute, of this part.
Start playback of this part. It will play\\nthrough all of its phrases at a speed\\ndetermined by setBPM.
seconds from now
Loop playback of this part. It will begin\\nlooping through all of its phrases at a speed\\ndetermined by setBPM.
Tell the part to stop looping.
Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.
Pause the part. Playback will resume\\nfrom the current step.
Add a p5.Phrase to this Part.
reference to a p5.Phrase
Remove a phrase from this part, based on the name it was\\ngiven when it was created.
Get a phrase from this part, based on the name it was\\ngiven when it was created. Now you can modify its array.
Find all sequences with the specified name, and replace their patterns with the specified array.
Set the function that will be called at every step. This will clear the previous function.
The name of the callback\\n you want to fire\\n on every beat/tatum.
Start playback of the score.
Stop playback of the score.
Pause playback of the score.
Loop playback of the score.
Stop looping playback of the score. If it\\nis currently playing, this will go into effect\\nafter the current round of playback completes.
Set the tempo for all parts in the score
musicalTimeMode uses Tone.Time convention\\ntrue if string, false if number
musicalTimeMode variables\\nmodify these only when the interval is specified in musicalTime format as a string
Set a limit to the number of loops to play. defaults to Infinity
Do not initiate the callback if timeFromNow is < 0\\nThis ususually occurs for a few milliseconds when the page\\nis not fully loaded
The callback should only be called until maxIterations is reached
Start the loop
schedule a starting time
Stop the loop
schedule a stopping time
Pause the loop
schedule a pausing time
Synchronize loops. Use this method to start two more more loops in synchronization\\nor to start a loop in synchronization with a loop that is already playing\\nThis method will schedule the implicit loop in sync with the explicit master loop\\ni.e. loopToStart.syncedStart(loopToSyncWith)
a p5.SoundLoop to sync with
Start the loops in sync after timeFromNow seconds
Getters and Setters, setting any paramter will result in a change in the clock's\\nfrequency, that will be reflected after the next callback\\nbeats per minute (defaults to 60)
number of quarter notes in a measure (defaults to 4)
length of the loops interval
how many times the callback has been called so far
The p5.Compressor is built with a Web Audio Dynamics Compressor Node\\n
Performs the same function as .connect, but also accepts\\noptional parameters to set compressor's audioParams
Sound source to be connected
The amount of time (in seconds) to reduce the gain by 10dB,\\n default = .003, range 0 - 1
A decibel value representing the range above the \\n threshold where the curve smoothly transitions to the "ratio" portion.\\n default = 30, range 0 - 40
The amount of dB change in input for a 1 dB change in output\\n default = 12, range 1 - 20
The decibel value above which the compression will start taking effect\\n default = -24, range -100 - 0
The amount of time (in seconds) to increase the gain by 10dB\\n default = .25, range 0 - 1
Set the paramters of a compressor.
Get current attack or set value w/ time ramp
Attack is the amount of time (in seconds) to reduce the gain by 10dB,\\n default = .003, range 0 - 1
Assign time value to schedule the change in value
Get current knee or set value w/ time ramp
Get current ratio or set value w/ time ramp
Get current threshold or set value w/ time ramp
Get current release or set value w/ time ramp
Return the current reduction value
Connect a specific device to the p5.SoundRecorder.\\nIf no parameter is given, p5.SoundRecorer will record\\nall audible p5.sound from your sketch.
p5.sound object or a web audio unit\\n that outputs sound
Start recording. To access the recording, provide\\na p5.SoundFile as the first parameter. The p5.SoundRecorder\\nwill send its recording to that p5.SoundFile for playback once\\nrecording is complete. Optional parameters include duration\\n(in seconds) of the recording, and a callback function that\\nwill be called once the complete recording has been\\ntransfered to the p5.SoundFile.
p5.SoundFile
Time (in seconds)
The name of a function that will be\\n called once the recording completes
Stop the recording. Once the recording is stopped,\\nthe results will be sent to the p5.SoundFile that\\nwas given on .record(), and if a callback function\\nwas provided on record, that function will be called.
Save a p5.SoundFile as a .wav file. The browser will prompt the user\\nto download the file to their device.\\nFor uploading audio to a server, use\\np5.SoundFile.saveBlob.
p5.SoundFile.saveBlob
p5.SoundFile that you wish to save
isDetected is set to true when a peak is detected.
The update method is run in the draw loop.
Accepts an FFT object. You must call .analyze()\\non the FFT object prior to updating the peakDetect\\nbecause it relies on a completed FFT analysis.
A p5.FFT object
onPeak accepts two arguments: a function to call when\\na peak is detected. The value of the peak,\\nbetween 0.0 and 1.0, is passed to the callback.
Name of a function that will\\n be called when a peak is\\n detected.
Optional value to pass\\n into the function when\\n a peak is detected.
\\nvar cnv, soundFile, fft, peakDetect;\\nvar ellipseWidth = 0;\\n\\nfunction preload() {\\n soundFile = loadSound('assets/beat.mp3');\\n}\\n\\nfunction setup() {\\n cnv = createCanvas(100,100);\\n textAlign(CENTER);\\n\\n fft = new p5.FFT();\\n peakDetect = new p5.PeakDetect();\\n\\n setupSound();\\n\\n // when a beat is detected, call triggerBeat()\\n peakDetect.onPeak(triggerBeat);\\n}\\n\\nfunction draw() {\\n background(0);\\n fill(255);\\n text('click to play', width/2, height/2);\\n\\n fft.analyze();\\n peakDetect.update(fft);\\n\\n ellipseWidth *= 0.95;\\n ellipse(width/2, height/2, ellipseWidth, ellipseWidth);\\n}\\n\\n// this function is called by peakDetect.onPeak\\nfunction triggerBeat() {\\n ellipseWidth = 50;\\n}\\n\\n// mouseclick starts/stops sound\\nfunction setupSound() {\\n cnv.mouseClicked( function() {\\n if (soundFile.isPlaying() ) {\\n soundFile.stop();\\n } else {\\n soundFile.play();\\n }\\n });\\n}\\n
Connect a source to the gain node.
Set the output level of the gain node.
Connect to p5 objects or Web Audio Nodes
Disconnect from soundOut
Play tells the MonoSynth to start playing a note. This method schedules\\nthe calling of .triggerAttack and .triggerRelease.
the note you want to play, specified as a\\n frequency in Hertz (Number) or as a midi\\n value in Note/Octave format ("C4", "Eb3"...etc")\\n See \\n Tone. Defaults to 440 hz.
velocity of the note to play (ranging from 0 to 1)
\\nvar monoSynth;\\n\\nfunction setup() {\\n var cnv = createCanvas(100, 100);\\n cnv.mousePressed(playSynth);\\n\\n monoSynth = new p5.MonoSynth();\\n\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n}\\n\\nfunction playSynth() {\\n // time from now (in seconds)\\n var time = 0;\\n // note duration (in seconds)\\n var dur = 1/6;\\n // note velocity (volume, from 0 to 1)\\n var v = random();\\n\\n monoSynth.play(\\\"Fb3\\\", v, 0, dur);\\n monoSynth.play(\\\"Gb3\\\", v, time += dur, dur);\\n\\n background(random(255), random(255), 255);\\n text('click to play', width/2, height/2);\\n}\\n
Trigger the Attack, and Decay portion of the Envelope.\\nSimilar to holding down a key on a piano, but it will\\nhold the sustain level until you let go.
the note you want to play, specified as a\\n frequency in Hertz (Number) or as a midi\\n value in Note/Octave format ("C4", "Eb3"...etc")\\n See \\n Tone. Defaults to 440 hz
\\nvar monoSynth = new p5.MonoSynth();\\n\\nfunction mousePressed() {\\n monoSynth.triggerAttack(\\\"E3\\\");\\n}\\n\\nfunction mouseReleased() {\\n monoSynth.triggerRelease();\\n}\\n
Trigger the release of the Envelope. This is similar to releasing\\nthe key on a piano and letting the sound fade according to the\\nrelease level and release time.
Getters and Setters
MonoSynth amp
desired volume
Time to reach new volume
Get rid of the MonoSynth and free up its resources / memory.
An object that holds information about which notes have been played and\\nwhich notes are currently being played. New notes are added as keys\\non the fly. While a note has been attacked, but not released, the value of the\\nkey is the audiovoice which is generating that note. When notes are released,\\nthe value of the key becomes undefined.
A PolySynth must have at least 1 voice, defaults to 8
Monosynth that generates the sound for each note that is triggered. The\\np5.PolySynth defaults to using the p5.MonoSynth as its voice.
Play a note by triggering noteAttack and noteRelease with sustain time
midi note to play (ranging from 0 to 127 - 60 being a middle C)
\\nvar polySynth;\\n\\nfunction setup() {\\n var cnv = createCanvas(100, 100);\\n cnv.mousePressed(playSynth);\\n\\n polySynth = new p5.PolySynth();\\n\\n textAlign(CENTER);\\n text('click to play', width/2, height/2);\\n}\\n\\nfunction playSynth() {\\n // note duration (in seconds)\\n var dur = 0.1;\\n\\n // time from now (in seconds)\\n var time = 0;\\n\\n // velocity (volume, from 0 to 1)\\n var vel = 0.1;\\n\\n polySynth.play(\\\"G2\\\", vel, 0, dur);\\n polySynth.play(\\\"C3\\\", vel, 0, dur);\\n polySynth.play(\\\"G3\\\", vel, 0, dur);\\n\\n background(random(255), random(255), 255);\\n text('click to play', width/2, height/2);\\n}\\n
noteADSR sets the envelope for a specific note that has just been triggered.\\nUsing this method modifies the envelope of whichever audiovoice is being used\\nto play the desired note. The envelope should be reset before noteRelease is called\\nin order to prevent the modified envelope from being used on other notes.
Midi note on which ADSR should be set.
Set the PolySynths global envelope. This method modifies the envelopes of each\\nmonosynth so that all notes are played with this envelope.
Trigger the Attack, and Decay portion of a MonoSynth.\\nSimilar to holding down a key on a piano, but it will\\nhold the sustain level until you let go.
midi note on which attack should be triggered.
velocity of the note to play (ranging from 0 to 1)/
\\nvar polySynth = new p5.PolySynth();\\nvar pitches = [\\\"G\\\", \\\"D\\\", \\\"G\\\", \\\"C\\\"];\\nvar octaves = [2, 3, 4];\\n\\nfunction mousePressed() {\\n // play a chord: multiple notes at the same time\\n for (var i = 0; i < 4; i++) {\\n var note = random(pitches) + random(octaves);\\n polySynth.noteAttack(note, 0.1);\\n }\\n}\\n\\nfunction mouseReleased() {\\n // release all voices\\n polySynth.noteRelease();\\n}\\n
Trigger the Release of an AudioVoice note. This is similar to releasing\\nthe key on a piano and letting the sound fade according to the\\nrelease level and release time.
midi note on which attack should be triggered.\\n If no value is provided, all notes will be released.
\\nvar pitches = [\\\"G\\\", \\\"D\\\", \\\"G\\\", \\\"C\\\"];\\nvar octaves = [2, 3, 4];\\nvar polySynth = new p5.PolySynth();\\n\\nfunction mousePressed() {\\n // play a chord: multiple notes at the same time\\n for (var i = 0; i < 4; i++) {\\n var note = random(pitches) + random(octaves);\\n polySynth.noteAttack(note, 0.1);\\n }\\n}\\n\\nfunction mouseReleased() {\\n // release all voices\\n polySynth.noteRelease();\\n}\\n
The p5.Distortion is built with a\\n\\nWeb Audio WaveShaper Node.
Process a sound source, optionally specify amount and oversample values.
Set the amount and oversample of the waveshaper distortion.
Return the distortion amount, typically between 0-1.
Return the oversampling.
A rough \\\"spec\\\" for CSV can be found\\nhere.
\n * noStroke();\n * let c = color(0, 126, 255, 102);\n * fill(c);\n * rect(15, 15, 35, 70);\n * let value = alpha(c); // Sets 'value' to 102\n * fill(value);\n * rect(50, 15, 35, 70);\n *
\n * let c = color(175, 100, 220); // Define color 'c'\n * fill(c); // Use color variable 'c' as fill color\n * rect(15, 20, 35, 60); // Draw left rectangle\n *\n * let blueValue = blue(c); // Get blue in 'c'\n * print(blueValue); // Prints \"220.0\"\n * fill(0, 0, blueValue); // Use 'blueValue' in new fill\n * rect(50, 20, 35, 60); // Draw right rectangle\n *
\n * noStroke();\n * colorMode(HSB, 255);\n * let c = color(0, 126, 255);\n * fill(c);\n * rect(15, 20, 35, 60);\n * let value = brightness(c); // Sets 'value' to 255\n * fill(value);\n * rect(50, 20, 35, 60);\n *
\n * noStroke();\n * colorMode(HSB, 255);\n * let c = color('hsb(60, 100%, 50%)');\n * fill(c);\n * rect(15, 20, 35, 60);\n * let value = brightness(c); // A 'value' of 50% is 127.5\n * fill(value);\n * rect(50, 20, 35, 60);\n *
\n * let c = color(255, 204, 0); // Define color 'c'\n * fill(c); // Use color variable 'c' as fill color\n * noStroke(); // Don't draw a stroke around shapes\n * rect(30, 20, 55, 55); // Draw rectangle\n *
\n * let c = color(255, 204, 0); // Define color 'c'\n * fill(c); // Use color variable 'c' as fill color\n * noStroke(); // Don't draw a stroke around shapes\n * ellipse(25, 25, 80, 80); // Draw left circle\n *\n * // Using only one value with color()\n * // generates a grayscale value.\n * c = color(65); // Update 'c' with grayscale value\n * fill(c); // Use updated 'c' as fill color\n * ellipse(75, 75, 80, 80); // Draw right circle\n *
\n * // Named SVG & CSS colors may be used,\n * let c = color('magenta');\n * fill(c); // Use 'c' as fill color\n * noStroke(); // Don't draw a stroke around shapes\n * rect(20, 20, 60, 60); // Draw rectangle\n *
\n * // as can hex color codes:\n * noStroke(); // Don't draw a stroke around shapes\n * let c = color('#0f0');\n * fill(c); // Use 'c' as fill color\n * rect(0, 10, 45, 80); // Draw rectangle\n *\n * c = color('#00ff00');\n * fill(c); // Use updated 'c' as fill color\n * rect(55, 10, 45, 80); // Draw rectangle\n *
\n * // RGB and RGBA color strings are also supported:\n * // these all set to the same color (solid blue)\n * let c;\n * noStroke(); // Don't draw a stroke around shapes\n * c = color('rgb(0,0,255)');\n * fill(c); // Use 'c' as fill color\n * rect(10, 10, 35, 35); // Draw rectangle\n *\n * c = color('rgb(0%, 0%, 100%)');\n * fill(c); // Use updated 'c' as fill color\n * rect(55, 10, 35, 35); // Draw rectangle\n *\n * c = color('rgba(0, 0, 255, 1)');\n * fill(c); // Use updated 'c' as fill color\n * rect(10, 55, 35, 35); // Draw rectangle\n *\n * c = color('rgba(0%, 0%, 100%, 1)');\n * fill(c); // Use updated 'c' as fill color\n * rect(55, 55, 35, 35); // Draw rectangle\n *
\n * // HSL color is also supported and can be specified\n * // by value\n * let c;\n * noStroke(); // Don't draw a stroke around shapes\n * c = color('hsl(160, 100%, 50%)');\n * fill(c); // Use 'c' as fill color\n * rect(0, 10, 45, 80); // Draw rectangle\n *\n * c = color('hsla(160, 100%, 50%, 0.5)');\n * fill(c); // Use updated 'c' as fill color\n * rect(55, 10, 45, 80); // Draw rectangle\n *
\n * // HSB color is also supported and can be specified\n * // by value\n * let c;\n * noStroke(); // Don't draw a stroke around shapes\n * c = color('hsb(160, 100%, 50%)');\n * fill(c); // Use 'c' as fill color\n * rect(0, 10, 45, 80); // Draw rectangle\n *\n * c = color('hsba(160, 100%, 50%, 0.5)');\n * fill(c); // Use updated 'c' as fill color\n * rect(55, 10, 45, 80); // Draw rectangle\n *
\n * let c; // Declare color 'c'\n * noStroke(); // Don't draw a stroke around shapes\n *\n * // If no colorMode is specified, then the\n * // default of RGB with scale of 0-255 is used.\n * c = color(50, 55, 100); // Create a color for 'c'\n * fill(c); // Use color variable 'c' as fill color\n * rect(0, 10, 45, 80); // Draw left rect\n *\n * colorMode(HSB, 100); // Use HSB with scale of 0-100\n * c = color(50, 55, 100); // Update 'c' with new color\n * fill(c); // Use updated 'c' as fill color\n * rect(55, 10, 45, 80); // Draw right rect\n *
\n * let c = color(20, 75, 200); // Define color 'c'\n * fill(c); // Use color variable 'c' as fill color\n * rect(15, 20, 35, 60); // Draw left rectangle\n *\n * let greenValue = green(c); // Get green in 'c'\n * print(greenValue); // Print \"75.0\"\n * fill(0, greenValue, 0); // Use 'greenValue' in new fill\n * rect(50, 20, 35, 60); // Draw right rectangle\n *
\n * noStroke();\n * colorMode(HSB, 255);\n * let c = color(0, 126, 255);\n * fill(c);\n * rect(15, 20, 35, 60);\n * let value = hue(c); // Sets 'value' to \"0\"\n * fill(value);\n * rect(50, 20, 35, 60);\n *
\n * colorMode(RGB);\n * stroke(255);\n * background(51);\n * let from = color(218, 165, 32);\n * let to = color(72, 61, 139);\n * colorMode(RGB); // Try changing to HSB.\n * let interA = lerpColor(from, to, 0.33);\n * let interB = lerpColor(from, to, 0.66);\n * fill(from);\n * rect(10, 20, 20, 60);\n * fill(interA);\n * rect(30, 20, 20, 60);\n * fill(interB);\n * rect(50, 20, 20, 60);\n * fill(to);\n * rect(70, 20, 20, 60);\n *
\n * noStroke();\n * colorMode(HSL);\n * let c = color(156, 100, 50, 1);\n * fill(c);\n * rect(15, 20, 35, 60);\n * let value = lightness(c); // Sets 'value' to 50\n * fill(value);\n * rect(50, 20, 35, 60);\n *
\n * let c = color(255, 204, 0); // Define color 'c'\n * fill(c); // Use color variable 'c' as fill color\n * rect(15, 20, 35, 60); // Draw left rectangle\n *\n * let redValue = red(c); // Get red in 'c'\n * print(redValue); // Print \"255.0\"\n * fill(redValue, 0, 0); // Use 'redValue' in new fill\n * rect(50, 20, 35, 60); // Draw right rectangle\n *
\n * colorMode(RGB, 255); // Sets the range for red, green, and blue to 255\n * let c = color(127, 255, 0);\n * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1\n * let myColor = red(c);\n * print(myColor); // 0.4980392156862745\n *
\n * noStroke();\n * colorMode(HSB, 255);\n * let c = color(0, 126, 255);\n * fill(c);\n * rect(15, 20, 35, 60);\n * let value = saturation(c); // Sets 'value' to 126\n * fill(value);\n * rect(50, 20, 35, 60);\n *
\n * let myColor;\n * function setup() {\n * createCanvas(200, 200);\n * stroke(255);\n * myColor = color(100, 100, 250);\n * fill(myColor);\n * }\n *\n * function draw() {\n * rotate(HALF_PI);\n * text(myColor.toString(), 0, -5);\n * text(myColor.toString('#rrggbb'), 0, -30);\n * text(myColor.toString('rgba%'), 0, -55);\n * }\n *
\n * let backgroundColor;\n *\n * function setup() {\n * backgroundColor = color(100, 50, 150);\n * }\n *\n * function draw() {\n * backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n * background(backgroundColor);\n * }\n *
\n * let backgroundColor;\n *\n * function setup() {\n * backgroundColor = color(100, 50, 150);\n * }\n *\n * function draw() {\n * backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n * background(backgroundColor);\n * }\n *
\n * let backgroundColor;\n *\n * function setup() {\n * backgroundColor = color(100, 50, 150);\n * }\n *\n * function draw() {\n * backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n * background(backgroundColor);\n * }\n *
\n * let squareColor;\n *\n * function setup() {\n * ellipseMode(CORNERS);\n * strokeWeight(4);\n * squareColor = color(100, 50, 150);\n * }\n *\n * function draw() {\n * background(255);\n *\n * noFill();\n * stroke(0);\n * ellipse(10, 10, width - 10, height - 10);\n *\n * squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n * fill(squareColor);\n * noStroke();\n * rect(13, 13, width - 26, height - 26);\n * }\n *
\n * // todo\n *
\n * // Grayscale integer value\n * background(51);\n *
\n * // R, G & B integer values\n * background(255, 204, 0);\n *
\n * // H, S & B integer values\n * colorMode(HSB);\n * background(255, 204, 100);\n *
\n * // Named SVG/CSS color string\n * background('red');\n *
\n * // three-digit hexadecimal RGB notation\n * background('#fae');\n *
\n * // six-digit hexadecimal RGB notation\n * background('#222222');\n *
\n * // integer RGB notation\n * background('rgb(0,255,0)');\n *
\n * // integer RGBA notation\n * background('rgba(0,255,0, 0.25)');\n *
\n * // percentage RGB notation\n * background('rgb(100%,0%,10%)');\n *
\n * // percentage RGBA notation\n * background('rgba(100%,0%,100%,0.5)');\n *
\n * // p5 Color object\n * background(color(0, 0, 255));\n *
\n * // Clear the screen on mouse press.\n * function setup() {\n * createCanvas(100, 100);\n * }\n *\n * function draw() {\n * ellipse(mouseX, mouseY, 20, 20);\n * }\n *\n * function mousePressed() {\n * clear();\n * }\n *
\n * noStroke();\n * colorMode(RGB, 100);\n * for (let i = 0; i < 100; i++) {\n * for (let j = 0; j < 100; j++) {\n * stroke(i, j, 0);\n * point(i, j);\n * }\n * }\n *
\n * noStroke();\n * colorMode(HSB, 100);\n * for (let i = 0; i < 100; i++) {\n * for (let j = 0; j < 100; j++) {\n * stroke(i, j, 100);\n * point(i, j);\n * }\n * }\n *
\n * colorMode(RGB, 255);\n * let c = color(127, 255, 0);\n *\n * colorMode(RGB, 1);\n * let myColor = c._getRed();\n * text(myColor, 10, 10, 80, 80);\n *
\n * noFill();\n * colorMode(RGB, 255, 255, 255, 1);\n * background(255);\n *\n * strokeWeight(4);\n * stroke(255, 0, 10, 0.3);\n * ellipse(40, 40, 50, 50);\n * ellipse(50, 50, 40, 40);\n *
\n * // Grayscale integer value\n * fill(51);\n * rect(20, 20, 60, 60);\n *
\n * // R, G & B integer values\n * fill(255, 204, 0);\n * rect(20, 20, 60, 60);\n *
\n * // H, S & B integer values\n * colorMode(HSB);\n * fill(255, 204, 100);\n * rect(20, 20, 60, 60);\n *
\n * // Named SVG/CSS color string\n * fill('red');\n * rect(20, 20, 60, 60);\n *
\n * // three-digit hexadecimal RGB notation\n * fill('#fae');\n * rect(20, 20, 60, 60);\n *
\n * // six-digit hexadecimal RGB notation\n * fill('#222222');\n * rect(20, 20, 60, 60);\n *
\n * // integer RGB notation\n * fill('rgb(0,255,0)');\n * rect(20, 20, 60, 60);\n *
\n * // integer RGBA notation\n * fill('rgba(0,255,0, 0.25)');\n * rect(20, 20, 60, 60);\n *
\n * // percentage RGB notation\n * fill('rgb(100%,0%,10%)');\n * rect(20, 20, 60, 60);\n *
\n * // percentage RGBA notation\n * fill('rgba(100%,0%,100%,0.5)');\n * rect(20, 20, 60, 60);\n *
\n * // p5 Color object\n * fill(color(0, 0, 255));\n * rect(20, 20, 60, 60);\n *
\n * rect(15, 10, 55, 55);\n * noFill();\n * rect(20, 20, 60, 60);\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(0);\n * noFill();\n * stroke(100, 100, 240);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * box(45, 45, 45);\n * }\n *
\n * noStroke();\n * rect(20, 20, 60, 60);\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(0);\n * noStroke();\n * fill(240, 150, 150);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * box(45, 45, 45);\n * }\n *
\n * // Grayscale integer value\n * strokeWeight(4);\n * stroke(51);\n * rect(20, 20, 60, 60);\n *
\n * // R, G & B integer values\n * stroke(255, 204, 0);\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // H, S & B integer values\n * colorMode(HSB);\n * strokeWeight(4);\n * stroke(255, 204, 100);\n * rect(20, 20, 60, 60);\n *
\n * // Named SVG/CSS color string\n * stroke('red');\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // three-digit hexadecimal RGB notation\n * stroke('#fae');\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // six-digit hexadecimal RGB notation\n * stroke('#222222');\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // integer RGB notation\n * stroke('rgb(0,255,0)');\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // integer RGBA notation\n * stroke('rgba(0,255,0,0.25)');\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // percentage RGB notation\n * stroke('rgb(100%,0%,10%)');\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // percentage RGBA notation\n * stroke('rgba(100%,0%,100%,0.5)');\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * // p5 Color object\n * stroke(color(0, 0, 255));\n * strokeWeight(4);\n * rect(20, 20, 60, 60);\n *
\n * arc(50, 50, 80, 80, 0, HALF_PI);\n *
\n * arc(50, 50, 80, 80, 0, PI);\n *
\n * arc(50, 50, 80, 80, 0, QUARTER_PI);\n *
\n * arc(50, 50, 80, 80, 0, TAU);\n *
\n * arc(50, 50, 80, 80, 0, TWO_PI);\n *
\n * function setup() {\n * angleMode(DEGREES);\n * }\n *
\n * function setup() {\n * angleMode(RADIANS);\n * }\n *
\n * let x = 10;\n * print('The value of x is ' + x);\n * // prints \"The value of x is 10\"\n *
\n * function setup() {\n * frameRate(30);\n * textSize(30);\n * textAlign(CENTER);\n * }\n *\n * function draw() {\n * background(200);\n * text(frameCount, width / 2, height / 2);\n * }\n
\n * // To demonstrate, put two windows side by side.\n * // Click on the window that the p5 sketch isn't in!\n * function draw() {\n * background(200);\n * noStroke();\n * fill(0, 200, 0);\n * ellipse(25, 25, 50, 50);\n *\n * if (!focused) {\n // or \"if (focused === false)\"\n * stroke(200, 0, 0);\n * line(0, 0, 100, 100);\n * line(100, 0, 0, 100);\n * }\n * }\n *
\n * // Move the mouse across the quadrants\n * // to see the cursor change\n * function draw() {\n * line(width / 2, 0, width / 2, height);\n * line(0, height / 2, width, height / 2);\n * if (mouseX < 50 && mouseY < 50) {\n * cursor(CROSS);\n * } else if (mouseX > 50 && mouseY < 50) {\n * cursor('progress');\n * } else if (mouseX > 50 && mouseY > 50) {\n * cursor('https://s3.amazonaws.com/mupublicdata/cursor.cur');\n * } else {\n * cursor('grab');\n * }\n * }\n *
\n * let rectX = 0;\n * let fr = 30; //starting FPS\n * let clr;\n *\n * function setup() {\n * background(200);\n * frameRate(fr); // Attempt to refresh at starting FPS\n * clr = color(255, 0, 0);\n * }\n *\n * function draw() {\n * background(200);\n * rectX = rectX += 1; // Move Rectangle\n *\n * if (rectX >= width) {\n // If you go off screen.\n * if (fr === 30) {\n * clr = color(0, 0, 255);\n * fr = 10;\n * frameRate(fr); // make frameRate 10 FPS\n * } else {\n * clr = color(255, 0, 0);\n * fr = 30;\n * frameRate(fr); // make frameRate 30 FPS\n * }\n * rectX = 0;\n * }\n * fill(clr);\n * rect(rectX, 40, 20, 20);\n * }\n *
\n * function setup() {\n * noCursor();\n * }\n *\n * function draw() {\n * background(200);\n * ellipse(mouseX, mouseY, 10, 10);\n * }\n *
\n * createCanvas(displayWidth, displayHeight);\n *
\n * createCanvas(windowWidth, windowHeight);\n *
\n * function setup() {\n * createCanvas(windowWidth, windowHeight);\n * }\n *\n * function draw() {\n * background(0, 100, 200);\n * }\n *\n * function windowResized() {\n * resizeCanvas(windowWidth, windowHeight);\n * }\n *
\n * // Clicking in the box toggles fullscreen on and off.\n * function setup() {\n * background(200);\n * }\n * function mousePressed() {\n * if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n * let fs = fullscreen();\n * fullscreen(!fs);\n * }\n * }\n *
\n * function setup() {\n * pixelDensity(1);\n * createCanvas(100, 100);\n * background(200);\n * ellipse(width / 2, height / 2, 50, 50);\n * }\n *
\n * function setup() {\n * pixelDensity(3.0);\n * createCanvas(100, 100);\n * background(200);\n * ellipse(width / 2, height / 2, 50, 50);\n * }\n *
\n * function setup() {\n * let density = displayDensity();\n * pixelDensity(density);\n * createCanvas(100, 100);\n * background(200);\n * ellipse(width / 2, height / 2, 50, 50);\n * }\n *
\n * let url;\n * let x = 100;\n *\n * function setup() {\n * fill(0);\n * noStroke();\n * url = getURL();\n * }\n *\n * function draw() {\n * background(200);\n * text(url, x, height / 2);\n * x--;\n * }\n *
\n * function setup() {\n * let urlPath = getURLPath();\n * for (let i = 0; i < urlPath.length; i++) {\n * text(urlPath[i], 10, i * 20 + 20);\n * }\n * }\n *
\n * // Example: http://p5js.org?year=2014&month=May&day=15\n *\n * function setup() {\n * let params = getURLParams();\n * text(params.day, 10, 20);\n * text(params.month, 10, 40);\n * text(params.year, 10, 60);\n * }\n *
\n * let img;\n * let c;\n * function preload() {\n * // preload() runs once\n * img = loadImage('assets/laDefense.jpg');\n * }\n *\n * function setup() {\n * // setup() waits until preload() is done\n * img.loadPixels();\n * // get color of middle pixel\n * c = img.get(img.width / 2, img.height / 2);\n * }\n *\n * function draw() {\n * background(c);\n * image(img, 25, 25, 50, 50);\n * }\n *
\n * let a = 0;\n *\n * function setup() {\n * background(0);\n * noStroke();\n * fill(102);\n * }\n *\n * function draw() {\n * rect(a++ % width, 10, 2, 80);\n * }\n *
\n * let yPos = 0;\n * function setup() {\n * // setup() runs once\n * frameRate(30);\n * }\n * function draw() {\n * // draw() loops forever, until stopped\n * background(204);\n * yPos = yPos - 1;\n * if (yPos < 0) {\n * yPos = height;\n * }\n * line(0, yPos, width, yPos);\n * }\n *
\n * function draw() {\n * ellipse(50, 50, 10, 10);\n * }\n *\n * function mousePressed() {\n * remove(); // remove whole sketch on mouse press\n * }\n *
\n * p5.disableFriendlyErrors = true;\n *\n * function setup() {\n * createCanvas(100, 50);\n * }\n *
\n * function setup() {\n * let c = createCanvas(50, 50);\n * c.elt.style.border = '5px solid red';\n * }\n *\n * function draw() {\n * background(220);\n * }\n *
\n * // in the html file:\n * // <div id=\"myContainer\"></div>\n *\n * // in the js file:\n * let cnv = createCanvas(100, 100);\n * cnv.parent('myContainer');\n *
\n * let div0 = createDiv('this is the parent');\n * let div1 = createDiv('this is the child');\n * div1.parent(div0); // use p5.Element\n *
\n * let div0 = createDiv('this is the parent');\n * div0.id('apples');\n * let div1 = createDiv('this is the child');\n * div1.parent('apples'); // use id\n *
\n * let elt = document.getElementById('myParentDiv');\n * let div1 = createDiv('this is the child');\n * div1.parent(elt); // use element from page\n *
\n * function setup() {\n * let cnv = createCanvas(100, 100);\n * // Assigns a CSS selector ID to\n * // the canvas element.\n * cnv.id('mycanvas');\n * }\n *
\n * function setup() {\n * let cnv = createCanvas(100, 100);\n * // Assigns a CSS selector class 'small'\n * // to the canvas element.\n * cnv.class('small');\n * }\n *
\n * let cnv;\n * let d;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.mousePressed(changeGray); // attach listener for\n * // canvas click only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires with any click anywhere\n * function mousePressed() {\n * d = d + 10;\n * }\n *\n * // this function fires only when cnv is clicked\n * function changeGray() {\n * g = random(0, 255);\n * }\n *
\n * let cnv;\n * let d;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.doubleClicked(changeGray); // attach listener for\n * // canvas double click only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires with any double click anywhere\n * function doubleClicked() {\n * d = d + 10;\n * }\n *\n * // this function fires only when cnv is double clicked\n * function changeGray() {\n * g = random(0, 255);\n * }\n *
\n * let cnv;\n * let d;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.mouseWheel(changeSize); // attach listener for\n * // activity on canvas only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires with mousewheel movement\n * // anywhere on screen\n * function mouseWheel() {\n * g = g + 10;\n * }\n *\n * // this function fires with mousewheel movement\n * // over canvas only\n * function changeSize(event) {\n * if (event.deltaY > 0) {\n * d = d + 10;\n * } else {\n * d = d - 10;\n * }\n * }\n *
\n * let cnv;\n * let d;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.mouseReleased(changeGray); // attach listener for\n * // activity on canvas only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires after the mouse has been\n * // released\n * function mouseReleased() {\n * d = d + 10;\n * }\n *\n * // this function fires after the mouse has been\n * // released while on canvas\n * function changeGray() {\n * g = random(0, 255);\n * }\n *
\n * let cnv;\n * let d;\n * let g;\n *\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.mouseClicked(changeGray); // attach listener for\n * // activity on canvas only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires after the mouse has been\n * // clicked anywhere\n * function mouseClicked() {\n * d = d + 10;\n * }\n *\n * // this function fires after the mouse has been\n * // clicked on canvas\n * function changeGray() {\n * g = random(0, 255);\n * }\n *
\n * let cnv;\n * let d = 30;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.mouseMoved(changeSize); // attach listener for\n * // activity on canvas only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * fill(200);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires when mouse moves anywhere on\n * // page\n * function mouseMoved() {\n * g = g + 5;\n * if (g > 255) {\n * g = 0;\n * }\n * }\n *\n * // this function fires when mouse moves over canvas\n * function changeSize() {\n * d = d + 2;\n * if (d > 100) {\n * d = 0;\n * }\n * }\n *
\n * let cnv;\n * let d;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.mouseOver(changeGray);\n * d = 10;\n * }\n *\n * function draw() {\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * function changeGray() {\n * d = d + 10;\n * if (d > 100) {\n * d = 0;\n * }\n * }\n *
\n * let cnv;\n * let d;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.mouseOut(changeGray);\n * d = 10;\n * }\n *\n * function draw() {\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * function changeGray() {\n * d = d + 10;\n * if (d > 100) {\n * d = 0;\n * }\n * }\n *
\n * let cnv;\n * let d;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.touchStarted(changeGray); // attach listener for\n * // canvas click only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires with any touch anywhere\n * function touchStarted() {\n * d = d + 10;\n * }\n *\n * // this function fires only when cnv is clicked\n * function changeGray() {\n * g = random(0, 255);\n * }\n *
\n * let cnv;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.touchMoved(changeGray); // attach listener for\n * // canvas click only\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * }\n *\n * // this function fires only when cnv is clicked\n * function changeGray() {\n * g = random(0, 255);\n * }\n *
\n * let cnv;\n * let d;\n * let g;\n * function setup() {\n * cnv = createCanvas(100, 100);\n * cnv.touchEnded(changeGray); // attach listener for\n * // canvas click only\n * d = 10;\n * g = 100;\n * }\n *\n * function draw() {\n * background(g);\n * ellipse(width / 2, height / 2, d, d);\n * }\n *\n * // this function fires with any touch anywhere\n * function touchEnded() {\n * d = d + 10;\n * }\n *\n * // this function fires only when cnv is clicked\n * function changeGray() {\n * g = random(0, 255);\n * }\n *
\n * // To test this sketch, simply drag a\n * // file over the canvas\n * function setup() {\n * let c = createCanvas(100, 100);\n * background(200);\n * textAlign(CENTER);\n * text('Drag file', width / 2, height / 2);\n * c.dragOver(dragOverCallback);\n * }\n *\n * // This function will be called whenever\n * // a file is dragged over the canvas\n * function dragOverCallback() {\n * background(240);\n * text('Dragged over', width / 2, height / 2);\n * }\n *
\n * // To test this sketch, simply drag a file\n * // over and then out of the canvas area\n * function setup() {\n * let c = createCanvas(100, 100);\n * background(200);\n * textAlign(CENTER);\n * text('Drag file', width / 2, height / 2);\n * c.dragLeave(dragLeaveCallback);\n * }\n *\n * // This function will be called whenever\n * // a file is dragged out of the canvas\n * function dragLeaveCallback() {\n * background(240);\n * text('Dragged off', width / 2, height / 2);\n * }\n *
\n * let pg;\n * function setup() {\n * createCanvas(100, 100);\n * background(0);\n * pg = createGraphics(50, 100);\n * pg.fill(0);\n * frameRate(5);\n * }\n * function draw() {\n * image(pg, width / 2, 0);\n * pg.background(255);\n * // p5.Graphics object behave a bit differently in some cases\n * // The normal canvas on the left resets the translate\n * // with every loop through draw()\n * // the graphics object on the right doesn't automatically reset\n * // so translate() is additive and it moves down the screen\n * rect(0, 0, width / 2, 5);\n * pg.rect(0, 0, width / 2, 5);\n * translate(0, 5, 0);\n * pg.translate(0, 5, 0);\n * }\n * function mouseClicked() {\n * // if you click you will see that\n * // reset() resets the translate back to the initial state\n * // of the Graphics object\n * pg.reset();\n * }\n *
\n * let bg;\n * function setup() {\n * bg = createCanvas(100, 100);\n * bg.background(0);\n * image(bg, 0, 0);\n * bg.remove();\n * }\n *
\n * let bg;\n * function setup() {\n * pixelDensity(1);\n * createCanvas(100, 100);\n * stroke(255);\n * fill(0);\n *\n * // create and draw the background image\n * bg = createGraphics(100, 100);\n * bg.background(200);\n * bg.ellipse(50, 50, 80, 80);\n * }\n * function draw() {\n * let t = millis() / 1000;\n * // draw the background\n * if (bg) {\n * image(bg, frameCount % 100, 0);\n * image(bg, frameCount % 100 - 100, 0);\n * }\n * // draw the foreground\n * let p = p5.Vector.fromAngle(t, 35).add(50, 50);\n * ellipse(p.x, p.y, 30);\n * }\n * function mouseClicked() {\n * // remove the background\n * if (bg) {\n * bg.remove();\n * bg = null;\n * }\n * }\n *
\n * function setup() {\n * createCanvas(100, 50);\n * background(153);\n * line(0, 0, width, height);\n * }\n *
\n * function setup() {\n * noCanvas();\n * }\n *
\n * let pg;\n * function setup() {\n * createCanvas(100, 100);\n * pg = createGraphics(100, 100);\n * }\n * function draw() {\n * background(200);\n * pg.background(100);\n * pg.noStroke();\n * pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);\n * image(pg, 50, 50);\n * image(pg, 0, 0, 50, 50);\n * }\n *
SCREEN\n *
\n * blendMode(LIGHTEST);\n * strokeWeight(30);\n * stroke(80, 150, 255);\n * line(25, 25, 75, 75);\n * stroke(255, 50, 50);\n * line(75, 25, 25, 75);\n *
\n * blendMode(MULTIPLY);\n * strokeWeight(30);\n * stroke(80, 150, 255);\n * line(25, 25, 75, 75);\n * stroke(255, 50, 50);\n * line(75, 25, 25, 75);\n *
\n * arc(50, 55, 50, 50, 0, HALF_PI);\n * noFill();\n * arc(50, 55, 60, 60, HALF_PI, PI);\n * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);\n * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n *
\n * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n *
\n * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n *
\n * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n *
\n * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n *
\n * ellipse(56, 46, 55, 55);\n *
\n * // Draw a circle at location (30, 30) with a diameter of 20.\n * circle(30, 30, 20);\n *
\n * line(30, 20, 85, 75);\n *
\n * line(30, 20, 85, 20);\n * stroke(126);\n * line(85, 20, 85, 75);\n * stroke(255);\n * line(85, 75, 30, 75);\n *
\n * point(30, 20);\n * point(85, 20);\n * point(85, 75);\n * point(30, 75);\n *
\n * quad(38, 31, 86, 20, 69, 63, 30, 76);\n *
\n * // Draw a rectangle at location (30, 20) with a width and height of 55.\n * rect(30, 20, 55, 55);\n *
\n * // Draw a rectangle with rounded corners, each having a radius of 20.\n * rect(30, 20, 55, 55, 20);\n *
\n * // Draw a rectangle with rounded corners having the following radii:\n * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\n * rect(30, 20, 55, 55, 20, 15, 10, 5);\n *
\n * // Draw a square at location (30, 20) with a side size of 55.\n * square(30, 20, 55);\n *
\n * // Draw a square with rounded corners, each having a radius of 20.\n * square(30, 20, 55, 20);\n *
\n * // Draw a square with rounded corners having the following radii:\n * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\n * square(30, 20, 55, 20, 15, 10, 5);\n *
\n * triangle(30, 75, 58, 20, 86, 75);\n *
\n * ellipseMode(RADIUS); // Set ellipseMode to RADIUS\n * fill(255); // Set fill to white\n * ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode\n *\n * ellipseMode(CENTER); // Set ellipseMode to CENTER\n * fill(100); // Set fill to gray\n * ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode\n *
\n * ellipseMode(CORNER); // Set ellipseMode is CORNER\n * fill(255); // Set fill to white\n * ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode\n *\n * ellipseMode(CORNERS); // Set ellipseMode to CORNERS\n * fill(100); // Set fill to gray\n * ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode\n *
\n * background(0);\n * noStroke();\n * smooth();\n * ellipse(30, 48, 36, 36);\n * noSmooth();\n * ellipse(70, 48, 36, 36);\n *
\n * rectMode(CORNER); // Default rectMode is CORNER\n * fill(255); // Set fill to white\n * rect(25, 25, 50, 50); // Draw white rect using CORNER mode\n *\n * rectMode(CORNERS); // Set rectMode to CORNERS\n * fill(100); // Set fill to gray\n * rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode\n *
\n * rectMode(RADIUS); // Set rectMode to RADIUS\n * fill(255); // Set fill to white\n * rect(50, 50, 30, 30); // Draw white rect using RADIUS mode\n *\n * rectMode(CENTER); // Set rectMode to CENTER\n * fill(100); // Set fill to gray\n * rect(50, 50, 30, 30); // Draw gray rect using CENTER mode\n *
\n * strokeWeight(12.0);\n * strokeCap(ROUND);\n * line(20, 30, 80, 30);\n * strokeCap(SQUARE);\n * line(20, 50, 80, 50);\n * strokeCap(PROJECT);\n * line(20, 70, 80, 70);\n *
\n * noFill();\n * strokeWeight(10.0);\n * strokeJoin(MITER);\n * beginShape();\n * vertex(35, 20);\n * vertex(65, 50);\n * vertex(35, 80);\n * endShape();\n *
\n * noFill();\n * strokeWeight(10.0);\n * strokeJoin(BEVEL);\n * beginShape();\n * vertex(35, 20);\n * vertex(65, 50);\n * vertex(35, 80);\n * endShape();\n *
\n * noFill();\n * strokeWeight(10.0);\n * strokeJoin(ROUND);\n * beginShape();\n * vertex(35, 20);\n * vertex(65, 50);\n * vertex(35, 80);\n * endShape();\n *
\n * strokeWeight(1); // Default\n * line(20, 20, 80, 20);\n * strokeWeight(4); // Thicker\n * line(20, 40, 80, 40);\n * strokeWeight(10); // Beastly\n * line(20, 70, 80, 70);\n *
\n * noFill();\n * stroke(255, 102, 0);\n * line(85, 20, 10, 10);\n * line(90, 90, 15, 80);\n * stroke(0, 0, 0);\n * bezier(85, 20, 10, 10, 90, 90, 15, 80);\n *
\n * background(0, 0, 0);\n * noFill();\n * stroke(255);\n * bezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * noFill();\n *\n * bezierDetail(5);\n * }\n *\n * function draw() {\n * background(200);\n *\n * // prettier-ignore\n * bezier(-40, -40, 0,\n * 90, -40, 0,\n * -90, 40, 0,\n * 40, 40, 0);\n * }\n *
\n * noFill();\n * let x1 = 85,\n x2 = 10,\n x3 = 90,\n x4 = 15;\n * let y1 = 20,\n y2 = 10,\n y3 = 90,\n y4 = 80;\n * bezier(x1, y1, x2, y2, x3, y3, x4, y4);\n * fill(255);\n * let steps = 10;\n * for (let i = 0; i <= steps; i++) {\n * let t = i / steps;\n * let x = bezierPoint(x1, x2, x3, x4, t);\n * let y = bezierPoint(y1, y2, y3, y4, t);\n * ellipse(x, y, 5, 5);\n * }\n *
\n * noFill();\n * bezier(85, 20, 10, 10, 90, 90, 15, 80);\n * let steps = 6;\n * fill(255);\n * for (let i = 0; i <= steps; i++) {\n * let t = i / steps;\n * // Get the location of the point\n * let x = bezierPoint(85, 10, 90, 15, t);\n * let y = bezierPoint(20, 10, 90, 80, t);\n * // Get the tangent points\n * let tx = bezierTangent(85, 10, 90, 15, t);\n * let ty = bezierTangent(20, 10, 90, 80, t);\n * // Calculate an angle from the tangent points\n * let a = atan2(ty, tx);\n * a += PI;\n * stroke(255, 102, 0);\n * line(x, y, cos(a) * 30 + x, sin(a) * 30 + y);\n * // The following line of code makes a line\n * // inverse of the above line\n * //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);\n * stroke(0);\n * ellipse(x, y, 5, 5);\n * }\n *
\n * noFill();\n * bezier(85, 20, 10, 10, 90, 90, 15, 80);\n * stroke(255, 102, 0);\n * let steps = 16;\n * for (let i = 0; i <= steps; i++) {\n * let t = i / steps;\n * let x = bezierPoint(85, 10, 90, 15, t);\n * let y = bezierPoint(20, 10, 90, 80, t);\n * let tx = bezierTangent(85, 10, 90, 15, t);\n * let ty = bezierTangent(20, 10, 90, 80, t);\n * let a = atan2(ty, tx);\n * a -= HALF_PI;\n * line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n * }\n *
\n * noFill();\n * stroke(255, 102, 0);\n * curve(5, 26, 5, 26, 73, 24, 73, 61);\n * stroke(0);\n * curve(5, 26, 73, 24, 73, 61, 15, 65);\n * stroke(255, 102, 0);\n * curve(73, 24, 73, 61, 15, 65, 15, 65);\n *
\n * // Define the curve points as JavaScript objects\n * let p1 = { x: 5, y: 26 },\n p2 = { x: 73, y: 24 };\n * let p3 = { x: 73, y: 61 },\n p4 = { x: 15, y: 65 };\n * noFill();\n * stroke(255, 102, 0);\n * curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);\n * stroke(0);\n * curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);\n * stroke(255, 102, 0);\n * curve(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y, p4.x, p4.y);\n *
\n * noFill();\n * stroke(255, 102, 0);\n * curve(5, 26, 0, 5, 26, 0, 73, 24, 0, 73, 61, 0);\n * stroke(0);\n * curve(5, 26, 0, 73, 24, 0, 73, 61, 0, 15, 65, 0);\n * stroke(255, 102, 0);\n * curve(73, 24, 0, 73, 61, 0, 15, 65, 0, 15, 65, 0);\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n *\n * curveDetail(5);\n * }\n * function draw() {\n * background(200);\n *\n * curve(250, 600, 0, -30, 40, 0, 30, 30, 0, -250, 600, 0);\n * }\n *
\n * // Move the mouse left and right to see the curve change\n *\n * function setup() {\n * createCanvas(100, 100);\n * noFill();\n * }\n *\n * function draw() {\n * background(204);\n * let t = map(mouseX, 0, width, -5, 5);\n * curveTightness(t);\n * beginShape();\n * curveVertex(10, 26);\n * curveVertex(10, 26);\n * curveVertex(83, 24);\n * curveVertex(83, 61);\n * curveVertex(25, 65);\n * curveVertex(25, 65);\n * endShape();\n * }\n *
\n * noFill();\n * curve(5, 26, 5, 26, 73, 24, 73, 61);\n * curve(5, 26, 73, 24, 73, 61, 15, 65);\n * fill(255);\n * ellipseMode(CENTER);\n * let steps = 6;\n * for (let i = 0; i <= steps; i++) {\n * let t = i / steps;\n * let x = curvePoint(5, 5, 73, 73, t);\n * let y = curvePoint(26, 26, 24, 61, t);\n * ellipse(x, y, 5, 5);\n * x = curvePoint(5, 73, 73, 15, t);\n * y = curvePoint(26, 24, 61, 65, t);\n * ellipse(x, y, 5, 5);\n * }\n *
\n * noFill();\n * curve(5, 26, 73, 24, 73, 61, 15, 65);\n * let steps = 6;\n * for (let i = 0; i <= steps; i++) {\n * let t = i / steps;\n * let x = curvePoint(5, 73, 73, 15, t);\n * let y = curvePoint(26, 24, 61, 65, t);\n * //ellipse(x, y, 5, 5);\n * let tx = curveTangent(5, 73, 73, 15, t);\n * let ty = curveTangent(26, 24, 61, 65, t);\n * let a = atan2(ty, tx);\n * a -= PI / 2.0;\n * line(x, y, cos(a) * 8 + x, sin(a) * 8 + y);\n * }\n *
\n * translate(50, 50);\n * stroke(255, 0, 0);\n * beginShape();\n * // Exterior part of shape, clockwise winding\n * vertex(-40, -40);\n * vertex(40, -40);\n * vertex(40, 40);\n * vertex(-40, 40);\n * // Interior part of shape, counter-clockwise winding\n * beginContour();\n * vertex(-20, -20);\n * vertex(-20, 20);\n * vertex(20, 20);\n * vertex(20, -20);\n * endContour();\n * endShape(CLOSE);\n *
\n * beginShape();\n * vertex(30, 20);\n * vertex(85, 20);\n * vertex(85, 75);\n * vertex(30, 75);\n * endShape(CLOSE);\n *
\n * beginShape(POINTS);\n * vertex(30, 20);\n * vertex(85, 20);\n * vertex(85, 75);\n * vertex(30, 75);\n * endShape();\n *
\n * beginShape(LINES);\n * vertex(30, 20);\n * vertex(85, 20);\n * vertex(85, 75);\n * vertex(30, 75);\n * endShape();\n *
\n * noFill();\n * beginShape();\n * vertex(30, 20);\n * vertex(85, 20);\n * vertex(85, 75);\n * vertex(30, 75);\n * endShape();\n *
\n * noFill();\n * beginShape();\n * vertex(30, 20);\n * vertex(85, 20);\n * vertex(85, 75);\n * vertex(30, 75);\n * endShape(CLOSE);\n *
\n * beginShape(TRIANGLES);\n * vertex(30, 75);\n * vertex(40, 20);\n * vertex(50, 75);\n * vertex(60, 20);\n * vertex(70, 75);\n * vertex(80, 20);\n * endShape();\n *
\n * beginShape(TRIANGLE_STRIP);\n * vertex(30, 75);\n * vertex(40, 20);\n * vertex(50, 75);\n * vertex(60, 20);\n * vertex(70, 75);\n * vertex(80, 20);\n * vertex(90, 75);\n * endShape();\n *
\n * beginShape(TRIANGLE_FAN);\n * vertex(57.5, 50);\n * vertex(57.5, 15);\n * vertex(92, 50);\n * vertex(57.5, 85);\n * vertex(22, 50);\n * vertex(57.5, 15);\n * endShape();\n *
\n * beginShape(QUADS);\n * vertex(30, 20);\n * vertex(30, 75);\n * vertex(50, 75);\n * vertex(50, 20);\n * vertex(65, 20);\n * vertex(65, 75);\n * vertex(85, 75);\n * vertex(85, 20);\n * endShape();\n *
\n * beginShape(QUAD_STRIP);\n * vertex(30, 20);\n * vertex(30, 75);\n * vertex(50, 20);\n * vertex(50, 75);\n * vertex(65, 20);\n * vertex(65, 75);\n * vertex(85, 20);\n * vertex(85, 75);\n * endShape();\n *
\n * beginShape();\n * vertex(20, 20);\n * vertex(40, 20);\n * vertex(40, 40);\n * vertex(60, 40);\n * vertex(60, 60);\n * vertex(20, 60);\n * endShape(CLOSE);\n *
\n * noFill();\n * beginShape();\n * vertex(30, 20);\n * bezierVertex(80, 0, 80, 75, 30, 75);\n * endShape();\n *
\n * beginShape();\n * vertex(30, 20);\n * bezierVertex(80, 0, 80, 75, 30, 75);\n * bezierVertex(50, 80, 60, 25, 30, 20);\n * endShape();\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * setAttributes('antialias', true);\n * }\n * function draw() {\n * orbitControl();\n * background(50);\n * strokeWeight(4);\n * stroke(255);\n * point(-25, 30);\n * point(25, 30);\n * point(25, -30);\n * point(-25, -30);\n *\n * strokeWeight(1);\n * noFill();\n *\n * beginShape();\n * vertex(-25, 30);\n * bezierVertex(25, 30, 25, -30, -25, -30);\n * endShape();\n *\n * beginShape();\n * vertex(-25, 30, 20);\n * bezierVertex(25, 30, 20, 25, -30, 20, -25, -30, 20);\n * endShape();\n * }\n *
\n * strokeWeight(5);\n * point(84, 91);\n * point(68, 19);\n * point(21, 17);\n * point(32, 91);\n * strokeWeight(1);\n *\n * noFill();\n * beginShape();\n * curveVertex(84, 91);\n * curveVertex(84, 91);\n * curveVertex(68, 19);\n * curveVertex(21, 17);\n * curveVertex(32, 91);\n * curveVertex(32, 91);\n * endShape();\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * setAttributes('antialias', true);\n * }\n * function draw() {\n * orbitControl();\n * background(50);\n * strokeWeight(4);\n * stroke(255);\n *\n * point(-25, 25);\n * point(-25, 25);\n * point(-25, -25);\n * point(25, -25);\n * point(25, 25);\n * point(25, 25);\n *\n * strokeWeight(1);\n * noFill();\n *\n * beginShape();\n * curveVertex(-25, 25);\n * curveVertex(-25, 25);\n * curveVertex(-25, -25);\n * curveVertex(25, -25);\n * curveVertex(25, 25);\n * curveVertex(25, 25);\n * endShape();\n *\n * beginShape();\n * curveVertex(-25, 25, 20);\n * curveVertex(-25, 25, 20);\n * curveVertex(-25, -25, 20);\n * curveVertex(25, -25, 20);\n * curveVertex(25, 25, 20);\n * curveVertex(25, 25, 20);\n * endShape();\n * }\n *
\n * noFill();\n *\n * beginShape();\n * vertex(20, 20);\n * vertex(45, 20);\n * vertex(45, 80);\n * endShape(CLOSE);\n *\n * beginShape();\n * vertex(50, 20);\n * vertex(75, 20);\n * vertex(75, 80);\n * endShape();\n *
\n * strokeWeight(5);\n * point(20, 20);\n * point(80, 20);\n * point(50, 50);\n *\n * noFill();\n * strokeWeight(1);\n * beginShape();\n * vertex(20, 20);\n * quadraticVertex(80, 20, 50, 50);\n * endShape();\n *
\n * strokeWeight(5);\n * point(20, 20);\n * point(80, 20);\n * point(50, 50);\n *\n * point(20, 80);\n * point(80, 80);\n * point(80, 60);\n *\n * noFill();\n * strokeWeight(1);\n * beginShape();\n * vertex(20, 20);\n * quadraticVertex(80, 20, 50, 50);\n * quadraticVertex(20, 80, 80, 80);\n * vertex(80, 60);\n * endShape();\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * setAttributes('antialias', true);\n * }\n * function draw() {\n * orbitControl();\n * background(50);\n * strokeWeight(4);\n * stroke(255);\n *\n * point(-35, -35);\n * point(35, -35);\n * point(0, 0);\n * point(-35, 35);\n * point(35, 35);\n * point(35, 10);\n *\n * strokeWeight(1);\n * noFill();\n *\n * beginShape();\n * vertex(-35, -35);\n * quadraticVertex(35, -35, 0, 0);\n * quadraticVertex(-35, 35, 35, 35);\n * vertex(35, 10);\n * endShape();\n *\n * beginShape();\n * vertex(-35, -35, 20);\n * quadraticVertex(35, -35, 20, 0, 0, 20);\n * quadraticVertex(-35, 35, 20, 35, 35, 20);\n * vertex(35, 10, 20);\n * endShape();\n * }\n *
\n * strokeWeight(3);\n * beginShape(POINTS);\n * vertex(30, 20);\n * vertex(85, 20);\n * vertex(85, 75);\n * vertex(30, 75);\n * endShape();\n *
\n * createCanvas(100, 100, WEBGL);\n * background(240, 240, 240);\n * fill(237, 34, 93);\n * noStroke();\n * beginShape();\n * vertex(0, 35);\n * vertex(35, 0);\n * vertex(0, -35);\n * vertex(-35, 0);\n * endShape();\n *
\n * createCanvas(100, 100, WEBGL);\n * background(240, 240, 240);\n * fill(237, 34, 93);\n * noStroke();\n * beginShape();\n * vertex(-10, 10);\n * vertex(0, 35);\n * vertex(10, 10);\n * vertex(35, 0);\n * vertex(10, -8);\n * vertex(0, -35);\n * vertex(-10, -8);\n * vertex(-35, 0);\n * endShape();\n *
\n * strokeWeight(3);\n * stroke(237, 34, 93);\n * beginShape(LINES);\n * vertex(10, 35);\n * vertex(90, 35);\n * vertex(10, 65);\n * vertex(90, 65);\n * vertex(35, 10);\n * vertex(35, 90);\n * vertex(65, 10);\n * vertex(65, 90);\n * endShape();\n *
\n * function setup() {\n * createCanvas(100, 100);\n * background(200);\n * noLoop();\n * }\n\n * function draw() {\n * line(10, 10, 90, 90);\n * }\n *
\n * let x = 0;\n * function setup() {\n * createCanvas(100, 100);\n * }\n *\n * function draw() {\n * background(204);\n * x = x + 0.1;\n * if (x > width) {\n * x = 0;\n * }\n * line(x, 0, x, height);\n * }\n *\n * function mousePressed() {\n * noLoop();\n * }\n *\n * function mouseReleased() {\n * loop();\n * }\n *
\n * let x = 0;\n * function setup() {\n * createCanvas(100, 100);\n * noLoop();\n * }\n *\n * function draw() {\n * background(204);\n * x = x + 0.1;\n * if (x > width) {\n * x = 0;\n * }\n * line(x, 0, x, height);\n * }\n *\n * function mousePressed() {\n * loop();\n * }\n *\n * function mouseReleased() {\n * noLoop();\n * }\n *
\n * ellipse(0, 50, 33, 33); // Left circle\n *\n * push(); // Start a new drawing state\n * strokeWeight(10);\n * fill(204, 153, 0);\n * translate(50, 0);\n * ellipse(0, 50, 33, 33); // Middle circle\n * pop(); // Restore original state\n *\n * ellipse(100, 50, 33, 33); // Right circle\n *
\n * ellipse(0, 50, 33, 33); // Left circle\n *\n * push(); // Start a new drawing state\n * strokeWeight(10);\n * fill(204, 153, 0);\n * ellipse(33, 50, 33, 33); // Left-middle circle\n *\n * push(); // Start another new drawing state\n * stroke(0, 102, 153);\n * ellipse(66, 50, 33, 33); // Right-middle circle\n * pop(); // Restore previous state\n *\n * pop(); // Restore original state\n *\n * ellipse(100, 50, 33, 33); // Right circle\n *
\n * ellipse(0, 50, 33, 33); // Left circle\n *\n * push(); // Start a new drawing state\n * translate(50, 0);\n * strokeWeight(10);\n * fill(204, 153, 0);\n * ellipse(0, 50, 33, 33); // Middle circle\n * pop(); // Restore original state\n *\n * ellipse(100, 50, 33, 33); // Right circle\n *
\n * let x = 0;\n *\n * function setup() {\n * createCanvas(100, 100);\n * noLoop();\n * }\n *\n * function draw() {\n * background(204);\n * line(x, 0, x, height);\n * }\n *\n * function mousePressed() {\n * x += 1;\n * redraw();\n * }\n *
\n * let x = 0;\n *\n * function setup() {\n * createCanvas(100, 100);\n * noLoop();\n * }\n *\n * function draw() {\n * background(204);\n * x += 1;\n * line(x, 0, x, height);\n * }\n *\n * function mousePressed() {\n * redraw(5);\n * }\n *
\n * function setup() {\n * frameRate(10);\n * rectMode(CENTER);\n * }\n *\n * function draw() {\n * var step = frameCount % 20;\n * background(200);\n * // Equivalent to translate(x, y);\n * applyMatrix(1, 0, 0, 1, 40 + step, 50);\n * rect(0, 0, 50, 50);\n * }\n *
\n * function setup() {\n * frameRate(10);\n * rectMode(CENTER);\n * }\n *\n * function draw() {\n * var step = frameCount % 20;\n * background(200);\n * translate(50, 50);\n * // Equivalent to scale(x, y);\n * applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);\n * rect(0, 0, 50, 50);\n * }\n *
\n * function setup() {\n * frameRate(10);\n * rectMode(CENTER);\n * }\n *\n * function draw() {\n * var step = frameCount % 20;\n * var angle = map(step, 0, 20, 0, TWO_PI);\n * var cos_a = cos(angle);\n * var sin_a = sin(angle);\n * background(200);\n * translate(50, 50);\n * // Equivalent to rotate(angle);\n * applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);\n * rect(0, 0, 50, 50);\n * }\n *
\n * function setup() {\n * frameRate(10);\n * rectMode(CENTER);\n * }\n *\n * function draw() {\n * var step = frameCount % 20;\n * var angle = map(step, 0, 20, -PI / 4, PI / 4);\n * background(200);\n * translate(50, 50);\n * // equivalent to shearX(angle);\n * var shear_factor = 1 / tan(PI / 2 - angle);\n * applyMatrix(1, 0, shear_factor, 1, 0, 0);\n * rect(0, 0, 50, 50);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * noFill();\n * }\n *\n * function draw() {\n * background(200);\n * rotateY(PI / 6);\n * stroke(153);\n * box(35);\n * var rad = millis() / 1000;\n * // Set rotation angles\n * var ct = cos(rad);\n * var st = sin(rad);\n * // Matrix for rotation around the Y axis\n * // prettier-ignore\n * applyMatrix( ct, 0.0, st, 0.0,\n * 0.0, 1.0, 0.0, 0.0,\n * -st, 0.0, ct, 0.0,\n * 0.0, 0.0, 0.0, 1.0);\n * stroke(255);\n * box(50);\n * }\n *
\n * translate(50, 50);\n * applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);\n * rect(0, 0, 20, 20);\n * // Note that the translate is also reset.\n * resetMatrix();\n * rect(0, 0, 20, 20);\n *
\n * translate(width / 2, height / 2);\n * rotate(PI / 3.0);\n * rect(-26, -26, 52, 52);\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(255);\n * rotateX(millis() / 1000);\n * box();\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(255);\n * rotateY(millis() / 1000);\n * box();\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(255);\n * rotateZ(millis() / 1000);\n * box();\n * }\n *
\n * rect(30, 20, 50, 50);\n * scale(0.5);\n * rect(30, 20, 50, 50);\n *
\n * rect(30, 20, 50, 50);\n * scale(0.5, 1.3);\n * rect(30, 20, 50, 50);\n *
\n * translate(width / 4, height / 4);\n * shearX(PI / 4.0);\n * rect(0, 0, 30, 30);\n *
\n * translate(width / 4, height / 4);\n * shearY(PI / 4.0);\n * rect(0, 0, 30, 30);\n *
\n * translate(30, 20);\n * rect(0, 0, 55, 55);\n *
\n * rect(0, 0, 55, 55); // Draw rect at original 0,0\n * translate(30, 20);\n * rect(0, 0, 55, 55); // Draw rect at new 0,0\n * translate(14, 14);\n * rect(0, 0, 55, 55); // Draw rect at new 0,0\n *
\n * function draw() {\n * background(200);\n * rectMode(CENTER);\n * translate(width / 2, height / 2);\n * translate(p5.Vector.fromAngle(millis() / 1000, 40));\n * rect(0, 0, 20, 20);\n * }\n *
\n * function setup() {\n * let myDictionary = createStringDict('p5', 'js');\n * print(myDictionary.hasKey('p5')); // logs true to console\n *\n * let anotherDictionary = createStringDict({ happy: 'coding' });\n * print(anotherDictionary.hasKey('happy')); // logs true to console\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict(100, 42);\n * print(myDictionary.hasKey(100)); // logs true to console\n *\n * let anotherDictionary = createNumberDict({ 200: 84 });\n * print(anotherDictionary.hasKey(200)); // logs true to console\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict(1, 10);\n * myDictionary.create(2, 20);\n * myDictionary.create(3, 30);\n * print(myDictionary.size()); // logs 3 to the console\n * }\n *
\n * function setup() {\n * let myDictionary = createStringDict('p5', 'js');\n * print(myDictionary.hasKey('p5')); // logs true to console\n * }\n *
\n * function setup() {\n * let myDictionary = createStringDict('p5', 'js');\n * let myValue = myDictionary.get('p5');\n * print(myValue === 'js'); // logs true to console\n * }\n *
\n * function setup() {\n * let myDictionary = createStringDict('p5', 'js');\n * myDictionary.set('p5', 'JS');\n * myDictionary.print(); // logs \"key: p5 - value: JS\" to console\n * }\n *
\n * function setup() {\n * let myDictionary = createStringDict('p5', 'js');\n * myDictionary.create('happy', 'coding');\n * myDictionary.print();\n * // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n * }\n *
\n * function setup() {\n * let myDictionary = createStringDict('p5', 'js');\n * print(myDictionary.hasKey('p5')); // prints 'true'\n * myDictionary.clear();\n * print(myDictionary.hasKey('p5')); // prints 'false'\n * }\n *
\n * function setup() {\n * let myDictionary = createStringDict('p5', 'js');\n * myDictionary.create('happy', 'coding');\n * myDictionary.print();\n * // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n * myDictionary.remove('p5');\n * myDictionary.print();\n * // above logs \"key: happy value: coding\" to console\n * }\n *
\n * function setup() {\n * createCanvas(100, 100);\n * background(200);\n * text('click here to save', 10, 10, 70, 80);\n * }\n *\n * function mousePressed() {\n * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n * createStringDict({\n * john: 1940,\n * paul: 1942,\n * george: 1943,\n * ringo: 1940\n * }).saveTable('beatles');\n * }\n * }\n *
\n * function setup() {\n * createCanvas(100, 100);\n * background(200);\n * text('click here to save', 10, 10, 70, 80);\n * }\n *\n * function mousePressed() {\n * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n * createStringDict({\n * john: 1940,\n * paul: 1942,\n * george: 1943,\n * ringo: 1940\n * }).saveJSON('beatles');\n * }\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict(2, 5);\n * myDictionary.add(2, 2);\n * print(myDictionary.get(2)); // logs 7 to console.\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict(2, 5);\n * myDictionary.sub(2, 2);\n * print(myDictionary.get(2)); // logs 3 to console.\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict(2, 4);\n * myDictionary.mult(2, 2);\n * print(myDictionary.get(2)); // logs 8 to console.\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict(2, 8);\n * myDictionary.div(2, 2);\n * print(myDictionary.get(2)); // logs 4 to console.\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n * let lowestValue = myDictionary.minValue(); // value is -10\n * print(lowestValue);\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n * let highestValue = myDictionary.maxValue(); // value is 3\n * print(highestValue);\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n * let lowestKey = myDictionary.minKey(); // value is 1.2\n * print(lowestKey);\n * }\n *
\n * function setup() {\n * let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n * let highestKey = myDictionary.maxKey(); // value is 4\n * print(highestKey);\n * }\n *
\n * // Move a touchscreen device to register\n * // acceleration changes.\n * function draw() {\n * background(220, 50);\n * fill('magenta');\n * ellipse(width / 2, height / 2, accelerationX);\n * }\n *
\n * // Move a touchscreen device to register\n * // acceleration changes.\n * function draw() {\n * background(220, 50);\n * fill('magenta');\n * ellipse(width / 2, height / 2, accelerationY);\n * }\n *
\n * // Move a touchscreen device to register\n * // acceleration changes.\n * function draw() {\n * background(220, 50);\n * fill('magenta');\n * ellipse(width / 2, height / 2, accelerationZ);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * //rotateZ(radians(rotationZ));\n * rotateX(radians(rotationX));\n * //rotateY(radians(rotationY));\n * box(200, 200, 200);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * //rotateZ(radians(rotationZ));\n * //rotateX(radians(rotationX));\n * rotateY(radians(rotationY));\n * box(200, 200, 200);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * rotateZ(radians(rotationZ));\n * //rotateX(radians(rotationX));\n * //rotateY(radians(rotationY));\n * box(200, 200, 200);\n * }\n *
\n * // A simple if statement looking at whether\n * // rotationX - pRotationX < 0 is true or not will be\n * // sufficient for determining the rotate direction\n * // in most cases.\n *\n * // Some extra logic is needed to account for cases where\n * // the angles wrap around.\n * let rotateDirection = 'clockwise';\n *\n * // Simple range conversion to make things simpler.\n * // This is not absolutely necessary but the logic\n * // will be different in that case.\n *\n * let rX = rotationX + 180;\n * let pRX = pRotationX + 180;\n *\n * if ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n * rotateDirection = 'clockwise';\n * } else if (rX - pRX < 0 || rX - pRX > 270) {\n * rotateDirection = 'counter-clockwise';\n * }\n *\n * print(rotateDirection);\n *
\n * // A simple if statement looking at whether\n * // rotationY - pRotationY < 0 is true or not will be\n * // sufficient for determining the rotate direction\n * // in most cases.\n *\n * // Some extra logic is needed to account for cases where\n * // the angles wrap around.\n * let rotateDirection = 'clockwise';\n *\n * // Simple range conversion to make things simpler.\n * // This is not absolutely necessary but the logic\n * // will be different in that case.\n *\n * let rY = rotationY + 180;\n * let pRY = pRotationY + 180;\n *\n * if ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n * rotateDirection = 'clockwise';\n * } else if (rY - pRY < 0 || rY - pRY > 270) {\n * rotateDirection = 'counter-clockwise';\n * }\n * print(rotateDirection);\n *
\n * // A simple if statement looking at whether\n * // rotationZ - pRotationZ < 0 is true or not will be\n * // sufficient for determining the rotate direction\n * // in most cases.\n *\n * // Some extra logic is needed to account for cases where\n * // the angles wrap around.\n * let rotateDirection = 'clockwise';\n *\n * if (\n * (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n * rotationZ - pRotationZ < -270\n * ) {\n * rotateDirection = 'clockwise';\n * } else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n * rotateDirection = 'counter-clockwise';\n * }\n * print(rotateDirection);\n *
\n * // Run this example on a mobile device\n * // Rotate the device by 90 degrees in the\n * // X-axis to change the value.\n *\n * var value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function deviceTurned() {\n * if (turnAxis === 'X') {\n * if (value === 0) {\n * value = 255;\n * } else if (value === 255) {\n * value = 0;\n * }\n * }\n * }\n *
\n * // Run this example on a mobile device\n * // You will need to move the device incrementally further\n * // the closer the square's color gets to white in order to change the value.\n *\n * let value = 0;\n * let threshold = 0.5;\n * function setup() {\n * setMoveThreshold(threshold);\n * }\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function deviceMoved() {\n * value = value + 5;\n * threshold = threshold + 0.1;\n * if (value > 255) {\n * value = 0;\n * threshold = 30;\n * }\n * setMoveThreshold(threshold);\n * }\n *
\n * // Run this example on a mobile device\n * // You will need to shake the device more firmly\n * // the closer the box's fill gets to white in order to change the value.\n *\n * let value = 0;\n * let threshold = 30;\n * function setup() {\n * setShakeThreshold(threshold);\n * }\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function deviceMoved() {\n * value = value + 5;\n * threshold = threshold + 5;\n * if (value > 255) {\n * value = 0;\n * threshold = 30;\n * }\n * setShakeThreshold(threshold);\n * }\n *
\n * // Run this example on a mobile device\n * // Move the device around\n * // to change the value.\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function deviceMoved() {\n * value = value + 5;\n * if (value > 255) {\n * value = 0;\n * }\n * }\n *
\n * // Run this example on a mobile device\n * // Rotate the device by 90 degrees\n * // to change the value.\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function deviceTurned() {\n * if (value === 0) {\n * value = 255;\n * } else if (value === 255) {\n * value = 0;\n * }\n * }\n *
\n * // Run this example on a mobile device\n * // Rotate the device by 90 degrees in the\n * // X-axis to change the value.\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function deviceTurned() {\n * if (turnAxis === 'X') {\n * if (value === 0) {\n * value = 255;\n * } else if (value === 255) {\n * value = 0;\n * }\n * }\n * }\n *
\n * // Run this example on a mobile device\n * // Shake the device to change the value.\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function deviceShaken() {\n * value = value + 5;\n * if (value > 255) {\n * value = 0;\n * }\n * }\n *
\n * function draw() {\n * if (keyIsPressed === true) {\n * fill(0);\n * } else {\n * fill(255);\n * }\n * rect(25, 25, 50, 50);\n * }\n *
\n * // Click any key to display it!\n * // (Not Guaranteed to be Case Sensitive)\n * function setup() {\n * fill(245, 123, 158);\n * textSize(50);\n * }\n *\n * function draw() {\n * background(200);\n * text(key, 33, 65); // Display last key pressed.\n * }\n *
\n * let fillVal = 126;\n * function draw() {\n * fill(fillVal);\n * rect(25, 25, 50, 50);\n * }\n *\n * function keyPressed() {\n * if (keyCode === UP_ARROW) {\n * fillVal = 255;\n * } else if (keyCode === DOWN_ARROW) {\n * fillVal = 0;\n * }\n * return false; // prevent default\n * }\n *
\n * function draw() {}\n * function keyPressed() {\n * background('yellow');\n * text(`${key} ${keyCode}`, 10, 40);\n * print(key, ' ', keyCode);\n * return false; // prevent default\n * }\n *
\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function keyPressed() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * }\n *
\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function keyPressed() {\n * if (keyCode === LEFT_ARROW) {\n * value = 255;\n * } else if (keyCode === RIGHT_ARROW) {\n * value = 0;\n * }\n * }\n *
\n * function keyPressed() {\n * // Do something\n * return false; // prevent any default behaviour\n * }\n *
\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function keyReleased() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * return false; // prevent any default behavior\n * }\n *
\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function keyTyped() {\n * if (key === 'a') {\n * value = 255;\n * } else if (key === 'b') {\n * value = 0;\n * }\n * // uncomment to prevent any default behavior\n * // return false;\n * }\n *
\n * let x = 100;\n * let y = 100;\n *\n * function setup() {\n * createCanvas(512, 512);\n * fill(255, 0, 0);\n * }\n *\n * function draw() {\n * if (keyIsDown(LEFT_ARROW)) {\n * x -= 5;\n * }\n *\n * if (keyIsDown(RIGHT_ARROW)) {\n * x += 5;\n * }\n *\n * if (keyIsDown(UP_ARROW)) {\n * y -= 5;\n * }\n *\n * if (keyIsDown(DOWN_ARROW)) {\n * y += 5;\n * }\n *\n * clear();\n * ellipse(x, y, 50, 50);\n * }\n *
\n * let diameter = 50;\n *\n * function setup() {\n * createCanvas(512, 512);\n * }\n *\n * function draw() {\n * // 107 and 187 are keyCodes for \"+\"\n * if (keyIsDown(107) || keyIsDown(187)) {\n * diameter += 1;\n * }\n *\n * // 109 and 189 are keyCodes for \"-\"\n * if (keyIsDown(109) || keyIsDown(189)) {\n * diameter -= 1;\n * }\n *\n * clear();\n * fill(255, 0, 0);\n * ellipse(50, 50, diameter, diameter);\n * }\n *
\n * // Move the mouse across the canvas\n * function draw() {\n * background(244, 248, 252);\n * line(mouseX, 0, mouseX, 100);\n * }\n *
\n * // Move the mouse across the canvas\n * function draw() {\n * background(244, 248, 252);\n * line(0, mouseY, 100, mouseY);\n * }\n *
\n * // Move the mouse across the canvas to leave a trail\n * function setup() {\n * //slow down the frameRate to make it more visible\n * frameRate(10);\n * }\n *\n * function draw() {\n * background(244, 248, 252);\n * line(mouseX, mouseY, pmouseX, pmouseY);\n * print(pmouseX + ' -> ' + mouseX);\n * }\n *
\n * function draw() {\n * background(237, 34, 93);\n * fill(0);\n * //draw a square only if the mouse is not moving\n * if (mouseY === pmouseY && mouseX === pmouseX) {\n * rect(20, 20, 60, 60);\n * }\n *\n * print(pmouseY + ' -> ' + mouseY);\n * }\n *
\n * let myCanvas;\n *\n * function setup() {\n * //use a variable to store a pointer to the canvas\n * myCanvas = createCanvas(100, 100);\n * const body = document.getElementsByTagName('body')[0];\n * myCanvas.parent(body);\n * }\n *\n * function draw() {\n * background(237, 34, 93);\n * fill(0);\n *\n * //move the canvas to the horizontal mouse position\n * //relative to the window\n * myCanvas.position(winMouseX + 1, windowHeight / 2);\n *\n * //the y of the square is relative to the canvas\n * rect(20, mouseY, 60, 60);\n * }\n *
\n * let myCanvas;\n *\n * function setup() {\n * //use a variable to store a pointer to the canvas\n * myCanvas = createCanvas(100, 100);\n * const body = document.getElementsByTagName('body')[0];\n * myCanvas.parent(body);\n * }\n *\n * function draw() {\n * background(237, 34, 93);\n * fill(0);\n *\n * //move the canvas to the vertical mouse position\n * //relative to the window\n * myCanvas.position(windowWidth / 2, winMouseY + 1);\n *\n * //the x of the square is relative to the canvas\n * rect(mouseX, 20, 60, 60);\n * }\n *
\n * let myCanvas;\n *\n * function setup() {\n * //use a variable to store a pointer to the canvas\n * myCanvas = createCanvas(100, 100);\n * noStroke();\n * fill(237, 34, 93);\n * }\n *\n * function draw() {\n * clear();\n * //the difference between previous and\n * //current x position is the horizontal mouse speed\n * let speed = abs(winMouseX - pwinMouseX);\n * //change the size of the circle\n * //according to the horizontal speed\n * ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n * //move the canvas to the mouse position\n * myCanvas.position(winMouseX + 1, winMouseY + 1);\n * }\n *
\n * let myCanvas;\n *\n * function setup() {\n * //use a variable to store a pointer to the canvas\n * myCanvas = createCanvas(100, 100);\n * noStroke();\n * fill(237, 34, 93);\n * }\n *\n * function draw() {\n * clear();\n * //the difference between previous and\n * //current y position is the vertical mouse speed\n * let speed = abs(winMouseY - pwinMouseY);\n * //change the size of the circle\n * //according to the vertical speed\n * ellipse(50, 50, 10 + speed * 5, 10 + speed * 5);\n * //move the canvas to the mouse position\n * myCanvas.position(winMouseX + 1, winMouseY + 1);\n * }\n *
\n * function draw() {\n * background(237, 34, 93);\n * fill(0);\n *\n * if (mouseIsPressed) {\n * if (mouseButton === LEFT) {\n * ellipse(50, 50, 50, 50);\n * }\n * if (mouseButton === RIGHT) {\n * rect(25, 25, 50, 50);\n * }\n * if (mouseButton === CENTER) {\n * triangle(23, 75, 50, 20, 78, 75);\n * }\n * }\n *\n * print(mouseButton);\n * }\n *
\n * function draw() {\n * background(237, 34, 93);\n * fill(0);\n *\n * if (mouseIsPressed) {\n * ellipse(50, 50, 50, 50);\n * } else {\n * rect(25, 25, 50, 50);\n * }\n *\n * print(mouseIsPressed);\n * }\n *
\n * // Move the mouse across the page\n * // to change its value\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function mouseMoved() {\n * value = value + 5;\n * if (value > 255) {\n * value = 0;\n * }\n * }\n *
\n * function mouseMoved() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a MouseEvent object\n * // as a callback argument\n * function mouseMoved(event) {\n * console.log(event);\n * }\n *
\n * // Drag the mouse across the page\n * // to change its value\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function mouseDragged() {\n * value = value + 5;\n * if (value > 255) {\n * value = 0;\n * }\n * }\n *
\n * function mouseDragged() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a MouseEvent object\n * // as a callback argument\n * function mouseDragged(event) {\n * console.log(event);\n * }\n *
\n * // Click within the image to change\n * // the value of the rectangle\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function mousePressed() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * }\n *
\n * function mousePressed() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a MouseEvent object\n * // as a callback argument\n * function mousePressed(event) {\n * console.log(event);\n * }\n *
\n * // Click within the image to change\n * // the value of the rectangle\n * // after the mouse has been clicked\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function mouseReleased() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * }\n *
\n * function mouseReleased() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a MouseEvent object\n * // as a callback argument\n * function mouseReleased(event) {\n * console.log(event);\n * }\n *
\n * // Click within the image to change\n * // the value of the rectangle\n * // after the mouse has been clicked\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n *\n * function mouseClicked() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * }\n *
\n * function mouseClicked() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a MouseEvent object\n * // as a callback argument\n * function mouseClicked(event) {\n * console.log(event);\n * }\n *
\n * // Click within the image to change\n * // the value of the rectangle\n * // after the mouse has been double clicked\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n *\n * function doubleClicked() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * }\n *
\n * function doubleClicked() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a MouseEvent object\n * // as a callback argument\n * function doubleClicked(event) {\n * console.log(event);\n * }\n *
\n * let pos = 25;\n *\n * function draw() {\n * background(237, 34, 93);\n * fill(0);\n * rect(25, pos, 50, 50);\n * }\n *\n * function mouseWheel(event) {\n * print(event.delta);\n * //move the square according to the vertical scroll amount\n * pos += event.delta;\n * //uncomment to block page scrolling\n * //return false;\n * }\n *
\n * // On a touchscreen device, touch\n * // the canvas using one or more fingers\n * // at the same time\n * function draw() {\n * clear();\n * let display = touches.length + ' touches';\n * text(display, 5, 10);\n * }\n *
\n * // Touch within the image to change\n * // the value of the rectangle\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function touchStarted() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * }\n *
\n * function touchStarted() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a TouchEvent object\n * // as a callback argument\n * function touchStarted(event) {\n * console.log(event);\n * }\n *
\n * // Move your finger across the page\n * // to change its value\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function touchMoved() {\n * value = value + 5;\n * if (value > 255) {\n * value = 0;\n * }\n * }\n *
\n * function touchMoved() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a TouchEvent object\n * // as a callback argument\n * function touchMoved(event) {\n * console.log(event);\n * }\n *
\n * // Release touch within the image to\n * // change the value of the rectangle\n *\n * let value = 0;\n * function draw() {\n * fill(value);\n * rect(25, 25, 50, 50);\n * }\n * function touchEnded() {\n * if (value === 0) {\n * value = 255;\n * } else {\n * value = 0;\n * }\n * }\n *
\n * function touchEnded() {\n * ellipse(mouseX, mouseY, 5, 5);\n * // prevent default\n * return false;\n * }\n *
\n * // returns a TouchEvent object\n * // as a callback argument\n * function touchEnded(event) {\n * console.log(event);\n * }\n *
\n * let img = createImage(66, 66);\n * img.loadPixels();\n * for (let i = 0; i < img.width; i++) {\n * for (let j = 0; j < img.height; j++) {\n * img.set(i, j, color(0, 90, 102));\n * }\n * }\n * img.updatePixels();\n * image(img, 17, 17);\n *
\n * let img = createImage(66, 66);\n * img.loadPixels();\n * for (let i = 0; i < img.width; i++) {\n * for (let j = 0; j < img.height; j++) {\n * img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n * }\n * }\n * img.updatePixels();\n * image(img, 17, 17);\n * image(img, 34, 34);\n *
\n * let pink = color(255, 102, 204);\n * let img = createImage(66, 66);\n * img.loadPixels();\n * let d = pixelDensity();\n * let halfImage = 4 * (img.width * d) * (img.height / 2 * d);\n * for (let i = 0; i < halfImage; i += 4) {\n * img.pixels[i] = red(pink);\n * img.pixels[i + 1] = green(pink);\n * img.pixels[i + 2] = blue(pink);\n * img.pixels[i + 3] = alpha(pink);\n * }\n * img.updatePixels();\n * image(img, 17, 17);\n *
\n * function setup() {\n * let c = createCanvas(100, 100);\n * background(255, 0, 0);\n * saveCanvas(c, 'myCanvas', 'jpg');\n * }\n *
\n * // note that this example has the same result as above\n * // if no canvas is specified, defaults to main canvas\n * function setup() {\n * let c = createCanvas(100, 100);\n * background(255, 0, 0);\n * saveCanvas('myCanvas', 'jpg');\n *\n * // all of the following are valid\n * saveCanvas(c, 'myCanvas', 'jpg');\n * saveCanvas(c, 'myCanvas.jpg');\n * saveCanvas(c, 'myCanvas');\n * saveCanvas(c);\n * saveCanvas('myCanvas', 'png');\n * saveCanvas('myCanvas');\n * saveCanvas();\n * }\n *
\n * function draw() {\n * background(mouseX);\n * }\n *\n * function mousePressed() {\n * saveFrames('out', 'png', 1, 25, data => {\n * print(data);\n * });\n * }\n
\n * let img;\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * }\n *
\n * function setup() {\n * // here we use a callback to display the image after loading\n * loadImage('assets/laDefense.jpg', img => {\n * image(img, 0, 0);\n * });\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n * function setup() {\n * // Top-left corner of the img is at (0, 0)\n * // Width and height are the img's original width and height\n * image(img, 0, 0);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n * function setup() {\n * background(50);\n * // Top-left corner of the img is at (10, 10)\n * // Width and height are 50 x 50\n * image(img, 10, 10, 50, 50);\n * }\n *
\n * function setup() {\n * // Here, we use a callback to display the image after loading\n * loadImage('assets/laDefense.jpg', img => {\n * image(img, 0, 0);\n * });\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/gradient.png');\n * }\n * function setup() {\n * // 1. Background image\n * // Top-left corner of the img is at (0, 0)\n * // Width and height are the img's original width and height, 100 x 100\n * image(img, 0, 0);\n * // 2. Top right image\n * // Top-left corner of destination rectangle is at (50, 0)\n * // Destination rectangle width and height are 40 x 20\n * // The next parameters are relative to the source image:\n * // - Starting at position (50, 50) on the source image, capture a 50 x 50\n * // subsection\n * // - Draw this subsection to fill the dimensions of the destination rectangle\n * image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * tint(0, 153, 204); // Tint blue\n * image(img, 50, 0);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * tint(0, 153, 204, 126); // Tint blue and set transparency\n * image(img, 50, 0);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * tint(255, 126); // Apply transparency without changing color\n * image(img, 50, 0);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * tint(0, 153, 204); // Tint blue\n * image(img, 0, 0);\n * noTint(); // Disable tint\n * image(img, 50, 0);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * imageMode(CORNER);\n * image(img, 10, 10, 50, 50);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * imageMode(CORNERS);\n * image(img, 10, 10, 90, 40);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * imageMode(CENTER);\n * image(img, 50, 50, 80, 80);\n * }\n *
\n * function setup() {\n * let img = createImage(100, 100); // same as new p5.Image(100, 100);\n * img.loadPixels();\n * createCanvas(100, 100);\n * background(0);\n *\n * // helper for writing color to array\n * function writeColor(image, x, y, red, green, blue, alpha) {\n * let index = (x + y * width) * 4;\n * image.pixels[index] = red;\n * image.pixels[index + 1] = green;\n * image.pixels[index + 2] = blue;\n * image.pixels[index + 3] = alpha;\n * }\n *\n * let x, y;\n * // fill with random colors\n * for (y = 0; y < img.height; y++) {\n * for (x = 0; x < img.width; x++) {\n * let red = random(255);\n * let green = random(255);\n * let blue = random(255);\n * let alpha = 255;\n * writeColor(img, x, y, red, green, blue, alpha);\n * }\n * }\n *\n * // draw a red line\n * y = 0;\n * for (x = 0; x < img.width; x++) {\n * writeColor(img, x, y, 255, 0, 0, 255);\n * }\n *\n * // draw a green line\n * y = img.height - 1;\n * for (x = 0; x < img.width; x++) {\n * writeColor(img, x, y, 0, 255, 0, 255);\n * }\n *\n * img.updatePixels();\n * image(img, 0, 0);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * createCanvas(100, 100);\n * image(img, 0, 0);\n * for (let i = 0; i < img.width; i++) {\n * let c = img.get(i, img.height / 2);\n * stroke(c);\n * line(i, height / 2, i, height);\n * }\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * createCanvas(100, 100);\n * image(img, 0, 0);\n * for (let i = 0; i < img.height; i++) {\n * let c = img.get(img.width / 2, i);\n * stroke(c);\n * line(0, i, width / 2, i);\n * }\n * }\n *
\n * let pink = color(255, 102, 204);\n * let img = createImage(66, 66);\n * img.loadPixels();\n * for (let i = 0; i < 4 * (width * height / 2); i += 4) {\n * img.pixels[i] = red(pink);\n * img.pixels[i + 1] = green(pink);\n * img.pixels[i + 2] = blue(pink);\n * img.pixels[i + 3] = alpha(pink);\n * }\n * img.updatePixels();\n * image(img, 17, 17);\n *
\n * let myImage;\n * let halfImage;\n *\n * function preload() {\n * myImage = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * myImage.loadPixels();\n * halfImage = 4 * myImage.width * myImage.height / 2;\n * for (let i = 0; i < halfImage; i++) {\n * myImage.pixels[i + halfImage] = myImage.pixels[i];\n * }\n * myImage.updatePixels();\n * }\n *\n * function draw() {\n * image(myImage, 0, 0, width, height);\n * }\n *
\n * let myImage;\n * let c;\n *\n * function preload() {\n * myImage = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * background(myImage);\n * noStroke();\n * c = myImage.get(60, 90);\n * fill(c);\n * rect(25, 25, 50, 50);\n * }\n *\n * //get() returns color here\n *
\n * let img;\n *\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n\n * function draw() {\n * image(img, 0, 0);\n * }\n *\n * function mousePressed() {\n * img.resize(50, 100);\n * }\n *
\n * let photo;\n * let bricks;\n * let x;\n * let y;\n *\n * function preload() {\n * photo = loadImage('assets/rockies.jpg');\n * bricks = loadImage('assets/bricks.jpg');\n * }\n *\n * function setup() {\n * x = bricks.width / 2;\n * y = bricks.height / 2;\n * photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n * image(photo, 0, 0);\n * }\n *
\n * let photo, maskImage;\n * function preload() {\n * photo = loadImage('assets/rockies.jpg');\n * maskImage = loadImage('assets/mask2.png');\n * }\n *\n * function setup() {\n * createCanvas(100, 100);\n * photo.mask(maskImage);\n * image(photo, 0, 0);\n * }\n *
\n * let photo1;\n * let photo2;\n *\n * function preload() {\n * photo1 = loadImage('assets/rockies.jpg');\n * photo2 = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * photo2.filter(GRAY);\n * image(photo1, 0, 0);\n * image(photo2, width / 2, 0);\n * }\n *
\n * let mountains;\n * let bricks;\n *\n * function preload() {\n * mountains = loadImage('assets/rockies.jpg');\n * bricks = loadImage('assets/bricks_third.jpg');\n * }\n *\n * function setup() {\n * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n * image(mountains, 0, 0);\n * image(bricks, 0, 0);\n * }\n *
\n * let mountains;\n * let bricks;\n *\n * function preload() {\n * mountains = loadImage('assets/rockies.jpg');\n * bricks = loadImage('assets/bricks_third.jpg');\n * }\n *\n * function setup() {\n * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n * image(mountains, 0, 0);\n * image(bricks, 0, 0);\n * }\n *
\n * let mountains;\n * let bricks;\n *\n * function preload() {\n * mountains = loadImage('assets/rockies.jpg');\n * bricks = loadImage('assets/bricks_third.jpg');\n * }\n *\n * function setup() {\n * mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n * image(mountains, 0, 0);\n * image(bricks, 0, 0);\n * }\n *
\n * let photo;\n *\n * function preload() {\n * photo = loadImage('assets/rockies.jpg');\n * }\n *\n * function draw() {\n * image(photo, 0, 0);\n * }\n *\n * function keyTyped() {\n * if (key === 's') {\n * photo.save('photo', 'png');\n * }\n * }\n *
While the above method is complex, it is flexible enough to work with\n * any pixelDensity. Note that set() will automatically take care of\n * setting all the appropriate values in pixels[] for a given (x, y) at\n * any pixelDensity, but the performance may not be as fast when lots of\n * modifications are made to the pixel array.\n * \n * Before accessing this array, the data must loaded with the loadPixels()\n * function. After the array data has been modified, the updatePixels()\n * function must be run to update the changes.\n * \n * Note that this is not a standard javascript array. This means that\n * standard javascript functions such as slice() or\n * arrayCopy() do not\n * work.
\n * let pink = color(255, 102, 204);\n * loadPixels();\n * let d = pixelDensity();\n * let halfImage = 4 * (width * d) * (height / 2 * d);\n * for (let i = 0; i < halfImage; i += 4) {\n * pixels[i] = red(pink);\n * pixels[i + 1] = green(pink);\n * pixels[i + 2] = blue(pink);\n * pixels[i + 3] = alpha(pink);\n * }\n * updatePixels();\n *
\n * let img0;\n * let img1;\n *\n * function preload() {\n * img0 = loadImage('assets/rockies.jpg');\n * img1 = loadImage('assets/bricks_third.jpg');\n * }\n *\n * function setup() {\n * background(img0);\n * image(img1, 0, 0);\n * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n * }\n *
\n * let img0;\n * let img1;\n *\n * function preload() {\n * img0 = loadImage('assets/rockies.jpg');\n * img1 = loadImage('assets/bricks_third.jpg');\n * }\n *\n * function setup() {\n * background(img0);\n * image(img1, 0, 0);\n * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n * }\n *
\n * let img0;\n * let img1;\n *\n * function preload() {\n * img0 = loadImage('assets/rockies.jpg');\n * img1 = loadImage('assets/bricks_third.jpg');\n * }\n *\n * function setup() {\n * background(img0);\n * image(img1, 0, 0);\n * blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n * }\n *
\n * let img;\n *\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * background(img);\n * copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n * stroke(255);\n * noFill();\n * // Rectangle shows area being copied\n * rect(7, 22, 10, 10);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(THRESHOLD);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(GRAY);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(OPAQUE);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(INVERT);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(POSTERIZE, 3);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(DILATE);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(BLUR, 3);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/bricks.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * filter(ERODE);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * let c = get();\n * image(c, width / 2, 0);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n * function setup() {\n * image(img, 0, 0);\n * let c = get(50, 90);\n * fill(c);\n * noStroke();\n * rect(25, 25, 50, 50);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * image(img, 0, 0, width, height);\n * let d = pixelDensity();\n * let halfImage = 4 * (width * d) * (height * d / 2);\n * loadPixels();\n * for (let i = 0; i < halfImage; i++) {\n * pixels[i + halfImage] = pixels[i];\n * }\n * updatePixels();\n * }\n *
Changes the color of any pixel, or writes an image directly to the\n * display window.
The x and y parameters specify the pixel to change and the c parameter\n * specifies the color value. This can be a p5.Color object, or [R, G, B, A]\n * pixel array. It can also be a single grayscale value.\n * When setting an image, the x and y parameters define the coordinates for\n * the upper-left corner of the image, regardless of the current imageMode().\n *
\n * After using set(), you must call updatePixels() for your changes to appear.\n * This should be called once all pixels have been set, and must be called before\n * calling .get() or drawing the image.\n *
Setting the color of a single pixel with set(x, y) is easy, but not as\n * fast as putting the data directly into pixels[]. Setting the pixels[]\n * values directly may be complicated when working with a retina display,\n * but will perform better when lots of pixels need to be set directly on\n * every loop.
\n * let black = color(0);\n * set(30, 20, black);\n * set(85, 20, black);\n * set(85, 75, black);\n * set(30, 75, black);\n * updatePixels();\n *
\n * for (let i = 30; i < width - 15; i++) {\n * for (let j = 20; j < height - 25; j++) {\n * let c = color(204 - j, 153 - i, 0);\n * set(i, j, c);\n * }\n * }\n * updatePixels();\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/rockies.jpg');\n * }\n *\n * function setup() {\n * set(0, 0, img);\n * updatePixels();\n * line(0, 0, width, height);\n * line(0, height, width, 0);\n * }\n *
Calling loadJSON() inside preload() guarantees to complete the\n * operation before setup() and draw() are called.
\n * // Examples use USGS Earthquake API:\n * // https://earthquake.usgs.gov/fdsnws/event/1/#methods\n * let earthquakes;\n * function preload() {\n * // Get the most recent earthquake in the database\n * let url =\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n * 'summary/all_day.geojson';\n * earthquakes = loadJSON(url);\n * }\n *\n * function setup() {\n * noLoop();\n * }\n *\n * function draw() {\n * background(200);\n * // Get the magnitude and name of the earthquake out of the loaded JSON\n * let earthquakeMag = earthquakes.features[0].properties.mag;\n * let earthquakeName = earthquakes.features[0].properties.place;\n * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n * textAlign(CENTER);\n * text(earthquakeName, 0, height - 30, width, 30);\n * }\n *
Outside of preload(), you may supply a callback function to handle the\n * object:
\n * function setup() {\n * noLoop();\n * let url =\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/' +\n * 'summary/all_day.geojson';\n * loadJSON(url, drawEarthquake);\n * }\n *\n * function draw() {\n * background(200);\n * }\n *\n * function drawEarthquake(earthquakes) {\n * // Get the magnitude and name of the earthquake out of the loaded JSON\n * let earthquakeMag = earthquakes.features[0].properties.mag;\n * let earthquakeName = earthquakes.features[0].properties.place;\n * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n * textAlign(CENTER);\n * text(earthquakeName, 0, height - 30, width, 30);\n * }\n *
Calling loadStrings() inside preload() guarantees to complete the\n * operation before setup() and draw() are called.
\n * let result;\n * function preload() {\n * result = loadStrings('assets/test.txt');\n * }\n\n * function setup() {\n * background(200);\n * let ind = floor(random(result.length));\n * text(result[ind], 10, 10, 80, 80);\n * }\n *
\n * function setup() {\n * loadStrings('assets/test.txt', pickString);\n * }\n *\n * function pickString(result) {\n * background(200);\n * let ind = floor(random(result.length));\n * text(result[ind], 10, 10, 80, 80);\n * }\n *
Reads the contents of a file or URL and creates a p5.Table object with\n * its values. If a file is specified, it must be located in the sketch's\n * \"data\" folder. The filename parameter can also be a URL to a file found\n * online. By default, the file is assumed to be comma-separated (in CSV\n * format). Table only looks for a header row if the 'header' option is\n * included.
Possible options include:\n *
When passing in multiple options, pass them in as separate parameters,\n * seperated by commas. For example:\n * \n * \n * loadTable('my_csv_file.csv', 'csv', 'header');\n * \n *
\n * loadTable('my_csv_file.csv', 'csv', 'header');\n *
This method is asynchronous, meaning it may not finish before the next\n * line in your sketch is executed. Calling loadTable() inside preload()\n * guarantees to complete the operation before setup() and draw() are called.\n *
\n * // Given the following CSV file called \"mammals.csv\"\n * // located in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * //the file can be remote\n * //table = loadTable(\"http://p5js.org/reference/assets/mammals.csv\",\n * // \"csv\", \"header\");\n * }\n *\n * function setup() {\n * //count the columns\n * print(table.getRowCount() + ' total rows in table');\n * print(table.getColumnCount() + ' total columns in table');\n *\n * print(table.getColumn('name'));\n * //[\"Goat\", \"Leopard\", \"Zebra\"]\n *\n * //cycle through the table\n * for (let r = 0; r < table.getRowCount(); r++)\n * for (let c = 0; c < table.getColumnCount(); c++) {\n * print(table.getString(r, c));\n * }\n * }\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let children = xml.getChildren('animal');\n *\n * for (let i = 0; i < children.length; i++) {\n * let id = children[i].getNum('id');\n * let coloring = children[i].getString('species');\n * let name = children[i].getContent();\n * print(id + ', ' + coloring + ', ' + name);\n * }\n * }\n *\n * // Sketch prints:\n * // 0, Capra hircus, Goat\n * // 1, Panthera pardus, Leopard\n * // 2, Equus zebra, Zebra\n *
\n * let data;\n *\n * function preload() {\n * data = loadBytes('assets/mammals.xml');\n * }\n *\n * function setup() {\n * for (let i = 0; i < 5; i++) {\n * console.log(data.bytes[i].toString(16));\n * }\n * }\n *
\n * // Examples use USGS Earthquake API:\n * // https://earthquake.usgs.gov/fdsnws/event/1/#methods\n * let earthquakes;\n * function preload() {\n * // Get the most recent earthquake in the database\n * let url =\n 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n * 'format=geojson&limit=1&orderby=time';\n * httpGet(url, 'jsonp', false, function(response) {\n * // when the HTTP request completes, populate the variable that holds the\n * // earthquake data used in the visualization.\n * earthquakes = response;\n * });\n * }\n *\n * function draw() {\n * if (!earthquakes) {\n * // Wait until the earthquake data has loaded before drawing.\n * return;\n * }\n * background(200);\n * // Get the magnitude and name of the earthquake out of the loaded JSON\n * let earthquakeMag = earthquakes.features[0].properties.mag;\n * let earthquakeName = earthquakes.features[0].properties.place;\n * ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n * textAlign(CENTER);\n * text(earthquakeName, 0, height - 30, width, 30);\n * noLoop();\n * }\n *
\n * // Examples use jsonplaceholder.typicode.com for a Mock Data API\n *\n * let url = 'https://jsonplaceholder.typicode.com/posts';\n * let postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n *\n * function setup() {\n * createCanvas(800, 800);\n * }\n *\n * function mousePressed() {\n * // Pick new random color values\n * let r = random(255);\n * let g = random(255);\n * let b = random(255);\n *\n * httpPost(url, 'json', postData, function(result) {\n * strokeWeight(2);\n * stroke(r, g, b);\n * fill(r, g, b, 127);\n * ellipse(mouseX, mouseY, 200, 200);\n * text(result.body, mouseX, mouseY);\n * });\n * }\n *
\n * let url = 'https://invalidURL'; // A bad URL that will cause errors\n * let postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n *\n * function setup() {\n * createCanvas(800, 800);\n * }\n *\n * function mousePressed() {\n * // Pick new random color values\n * let r = random(255);\n * let g = random(255);\n * let b = random(255);\n *\n * httpPost(\n * url,\n * 'json',\n * postData,\n * function(result) {\n * // ... won't be called\n * },\n * function(error) {\n * strokeWeight(2);\n * stroke(r, g, b);\n * fill(r, g, b, 127);\n * text(error.toString(), mouseX, mouseY);\n * }\n * );\n * }\n *
\n * // Examples use USGS Earthquake API:\n * // https://earthquake.usgs.gov/fdsnws/event/1/#methods\n *\n * // displays an animation of all USGS earthquakes\n * let earthquakes;\n * let eqFeatureIndex = 0;\n *\n * function preload() {\n * let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n * httpDo(\n * url,\n * {\n * method: 'GET',\n * // Other Request options, like special headers for apis\n * headers: { authorization: 'Bearer secretKey' }\n * },\n * function(res) {\n * earthquakes = res;\n * }\n * );\n * }\n *\n * function draw() {\n * // wait until the data is loaded\n * if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n * return;\n * }\n * clear();\n *\n * let feature = earthquakes.features[eqFeatureIndex];\n * let mag = feature.properties.mag;\n * let rad = mag / 11 * ((width + height) / 2);\n * fill(255, 0, 0, 100);\n * ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n *\n * if (eqFeatureIndex >= earthquakes.features.length) {\n * eqFeatureIndex = 0;\n * } else {\n * eqFeatureIndex += 1;\n * }\n * }\n *
\n * function setup() {\n * createCanvas(100, 100);\n * background(200);\n * text('click here to save', 10, 10, 70, 80);\n * }\n *\n * function mousePressed() {\n * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n * var writer = createWriter('squares.txt');\n * for (let i = 0; i < 10; i++) {\n * writer.print(i * i);\n * }\n * writer.close();\n * writer.clear();\n * }\n * }\n *
\n * // creates a file called 'newFile.txt'\n * let writer = createWriter('newFile.txt');\n * // write 'Hello world!'' to the file\n * writer.write(['Hello world!']);\n * // close the PrintWriter and save the file\n * writer.close();\n *
\n * // creates a file called 'newFile2.txt'\n * let writer = createWriter('newFile2.txt');\n * // write 'apples,bananas,123' to the file\n * writer.write(['apples', 'bananas', 123]);\n * // close the PrintWriter and save the file\n * writer.close();\n *
\n * // creates a file called 'newFile3.txt'\n * let writer = createWriter('newFile3.txt');\n * // write 'My name is: Teddy' to the file\n * writer.write('My name is:');\n * writer.write(' Teddy');\n * // close the PrintWriter and save the file\n * writer.close();\n *
\n * // creates a file called 'newFile.txt'\n * let writer = createWriter('newFile.txt');\n * // creates a file containing\n * // My name is:\n * // Teddy\n * writer.print('My name is:');\n * writer.print('Teddy');\n * // close the PrintWriter and save the file\n * writer.close();\n *
\n * let writer;\n *\n * function setup() {\n * createCanvas(400, 400);\n * // create a PrintWriter\n * writer = createWriter('newFile.txt');\n * }\n *\n * function draw() {\n * // print all mouseX and mouseY coordinates to the stream\n * writer.print([mouseX, mouseY]);\n * }\n *\n * function mouseClicked() {\n * // close the PrintWriter and save the file\n * writer.close();\n * }\n *
\n * // create writer object\n * let writer = createWriter('newFile.txt');\n * writer.write(['clear me']);\n * // clear writer object here\n * writer.clear();\n * // close writer\n * writer.close();\n *
\n * // create a file called 'newFile.txt'\n * let writer = createWriter('newFile.txt');\n * // close the PrintWriter and save the file\n * writer.close();\n *
\n * // create a file called 'newFile2.txt'\n * let writer = createWriter('newFile2.txt');\n * // write some data to the file\n * writer.write([100, 101, 102]);\n * // close the PrintWriter and save the file\n * writer.close();\n *
Save an image, text, json, csv, wav, or html. Prompts download to\n * the client's computer. Note that it is not recommended to call save()\n * within draw if it's looping, as the save() function will open a new save\n * dialog every frame.
The default behavior is to save the canvas as an image. You can\n * optionally specify a filename.\n * For example:
\n * save();\n * save('myCanvas.jpg'); // save a specific canvas with a filename\n *
Alternately, the first parameter can be a pointer to a canvas\n * p5.Element, an Array of Strings,\n * an Array of JSON, a JSON object, a p5.Table, a p5.Image, or a\n * p5.SoundFile (requires p5.sound). The second parameter is a filename\n * (including extension). The third parameter is for options specific\n * to this type of object. This method will save a file that fits the\n * given parameters. For example:
\n * // Saves canvas as an image\n * save('myCanvas.jpg');\n *\n * // Saves pImage as a png image\n * let img = createImage(10, 10);\n * save(img, 'my.png');\n *\n * // Saves canvas as an image\n * let cnv = createCanvas(100, 100);\n * save(cnv, 'myCanvas.jpg');\n *\n * // Saves p5.Renderer object as an image\n * let gb = createGraphics(100, 100);\n * save(gb, 'myGraphics.jpg');\n *\n * let myTable = new p5.Table();\n *\n * // Saves table as html file\n * save(myTable, 'myTable.html');\n *\n * // Comma Separated Values\n * save(myTable, 'myTable.csv');\n *\n * // Tab Separated Values\n * save(myTable, 'myTable.tsv');\n *\n * let myJSON = { a: 1, b: true };\n *\n * // Saves pretty JSON\n * save(myJSON, 'my.json');\n *\n * // Optimizes JSON filesize\n * save(myJSON, 'my.json', true);\n *\n * // Saves array of strings to a text file with line breaks after each item\n * let arrayOfStrings = ['a', 'b'];\n * save(arrayOfStrings, 'my.txt');\n *
\n * let json = {}; // new JSON Object\n *\n * json.id = 0;\n * json.species = 'Panthera leo';\n * json.name = 'Lion';\n *\n * function setup() {\n * createCanvas(100, 100);\n * background(200);\n * text('click here to save', 10, 10, 70, 80);\n * }\n *\n * function mousePressed() {\n * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n * saveJSON(json, 'lion.json');\n * }\n * }\n *\n * // saves the following to a file called \"lion.json\":\n * // {\n * // \"id\": 0,\n * // \"species\": \"Panthera leo\",\n * // \"name\": \"Lion\"\n * // }\n *
\n * let words = 'apple bear cat dog';\n *\n * // .split() outputs an Array\n * let list = split(words, ' ');\n *\n * function setup() {\n * createCanvas(100, 100);\n * background(200);\n * text('click here to save', 10, 10, 70, 80);\n * }\n *\n * function mousePressed() {\n * if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n * saveStrings(list, 'nouns.txt');\n * }\n * }\n *\n * // Saves the following to a file called 'nouns.txt':\n * //\n * // apple\n * // bear\n * // cat\n * // dog\n *
\n * let table;\n *\n * function setup() {\n * table = new p5.Table();\n *\n * table.addColumn('id');\n * table.addColumn('species');\n * table.addColumn('name');\n *\n * let newRow = table.addRow();\n * newRow.setNum('id', table.getRowCount() - 1);\n * newRow.setString('species', 'Panthera leo');\n * newRow.setString('name', 'Lion');\n *\n * // To save, un-comment next line then click 'run'\n * // saveTable(table, 'new.csv');\n * }\n *\n * // Saves the following to a file called 'new.csv':\n * // id,species,name\n * // 0,Panthera leo,Lion\n *
Generic class for handling tabular data, typically from a\n * CSV, TSV, or other sort of spreadsheet file.
CSV files are\n * \n * comma separated values, often with the data in quotes. TSV\n * files use tabs as separators, and usually don't bother with the\n * quotes.
A rough \"spec\" for CSV can be found\n * here.
To save tables to your computer, use the save method\n * or the saveTable method.
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * //add a row\n * let newRow = table.addRow();\n * newRow.setString('id', table.getRowCount() - 1);\n * newRow.setString('species', 'Canis Lupus');\n * newRow.setString('name', 'Wolf');\n *\n * //print the results\n * for (let r = 0; r < table.getRowCount(); r++)\n * for (let c = 0; c < table.getColumnCount(); c++)\n * print(table.getString(r, c));\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * //remove the first row\n * table.removeRow(0);\n *\n * //print the results\n * for (let r = 0; r < table.getRowCount(); r++)\n * for (let c = 0; c < table.getColumnCount(); c++)\n * print(table.getString(r, c));\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let row = table.getRow(1);\n * //print it column by column\n * //note: a row is an object, not an array\n * for (let c = 0; c < table.getColumnCount(); c++) {\n * print(row.getString(c));\n * }\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let rows = table.getRows();\n *\n * //warning: rows is an array of objects\n * for (let r = 0; r < rows.length; r++) {\n * rows[r].set('name', 'Unicorn');\n * }\n *\n * //print the results\n * for (let r = 0; r < table.getRowCount(); r++)\n * for (let c = 0; c < table.getColumnCount(); c++)\n * print(table.getString(r, c));\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * //find the animal named zebra\n * let row = table.findRow('Zebra', 'name');\n * //find the corresponding species\n * print(row.getString('species'));\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * //add another goat\n * let newRow = table.addRow();\n * newRow.setString('id', table.getRowCount() - 1);\n * newRow.setString('species', 'Scape Goat');\n * newRow.setString('name', 'Goat');\n *\n * //find the rows containing animals named Goat\n * let rows = table.findRows('Goat', 'name');\n * print(rows.length + ' Goats found');\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * //Search using specified regex on a given column, return TableRow object\n * let mammal = table.matchRow(new RegExp('ant'), 1);\n * print(mammal.getString(1));\n * //Output \"Panthera pardus\"\n * }\n *
\n * let table;\n *\n * function setup() {\n * table = new p5.Table();\n *\n * table.addColumn('name');\n * table.addColumn('type');\n *\n * let newRow = table.addRow();\n * newRow.setString('name', 'Lion');\n * newRow.setString('type', 'Mammal');\n *\n * newRow = table.addRow();\n * newRow.setString('name', 'Snake');\n * newRow.setString('type', 'Reptile');\n *\n * newRow = table.addRow();\n * newRow.setString('name', 'Mosquito');\n * newRow.setString('type', 'Insect');\n *\n * newRow = table.addRow();\n * newRow.setString('name', 'Lizard');\n * newRow.setString('type', 'Reptile');\n *\n * let rows = table.matchRows('R.*', 'type');\n * for (let i = 0; i < rows.length; i++) {\n * print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\n * }\n * }\n * // Sketch prints:\n * // Snake: Reptile\n * // Lizard: Reptile\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * //getColumn returns an array that can be printed directly\n * print(table.getColumn('species'));\n * //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * table.clearRows();\n * print(table.getRowCount() + ' total rows in table');\n * print(table.getColumnCount() + ' total columns in table');\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * table.addColumn('carnivore');\n * table.set(0, 'carnivore', 'no');\n * table.set(1, 'carnivore', 'yes');\n * table.set(2, 'carnivore', 'no');\n *\n * //print the results\n * for (let r = 0; r < table.getRowCount(); r++)\n * for (let c = 0; c < table.getColumnCount(); c++)\n * print(table.getString(r, c));\n * }\n *
\n * // given the cvs file \"blobs.csv\" in /assets directory\n * // ID, Name, Flavor, Shape, Color\n * // Blob1, Blobby, Sweet, Blob, Pink\n * // Blob2, Saddy, Savory, Blob, Blue\n *\n * let table;\n *\n * function preload() {\n * table = loadTable('assets/blobs.csv');\n * }\n *\n * function setup() {\n * createCanvas(200, 100);\n * textAlign(CENTER);\n * background(255);\n * }\n *\n * function draw() {\n * let numOfColumn = table.getColumnCount();\n * text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n * }\n *
\n * // given the cvs file \"blobs.csv\" in /assets directory\n * //\n * // ID, Name, Flavor, Shape, Color\n * // Blob1, Blobby, Sweet, Blob, Pink\n * // Blob2, Saddy, Savory, Blob, Blue\n *\n * let table;\n *\n * function preload() {\n * table = loadTable('assets/blobs.csv');\n * }\n *\n * function setup() {\n * createCanvas(200, 100);\n * textAlign(CENTER);\n * background(255);\n * }\n *\n * function draw() {\n * text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n * }\n *
Removes any of the specified characters (or \"tokens\").
If no column is specified, then the values in all columns and\n * rows are processed. A specific column may be referenced by\n * either its ID or title.
\n * function setup() {\n * let table = new p5.Table();\n *\n * table.addColumn('name');\n * table.addColumn('type');\n *\n * let newRow = table.addRow();\n * newRow.setString('name', ' $Lion ,');\n * newRow.setString('type', ',,,Mammal');\n *\n * newRow = table.addRow();\n * newRow.setString('name', '$Snake ');\n * newRow.setString('type', ',,,Reptile');\n *\n * table.removeTokens(',$ ');\n * print(table.getArray());\n * }\n *\n * // prints:\n * // 0 \"Lion\" \"Mamal\"\n * // 1 \"Snake\" \"Reptile\"\n *
\n * function setup() {\n * let table = new p5.Table();\n *\n * table.addColumn('name');\n * table.addColumn('type');\n *\n * let newRow = table.addRow();\n * newRow.setString('name', ' Lion ,');\n * newRow.setString('type', ' Mammal ');\n *\n * newRow = table.addRow();\n * newRow.setString('name', ' Snake ');\n * newRow.setString('type', ' Reptile ');\n *\n * table.trim();\n * print(table.getArray());\n * }\n *\n * // prints:\n * // 0 \"Lion\" \"Mamal\"\n * // 1 \"Snake\" \"Reptile\"\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * table.removeColumn('id');\n * print(table.getColumnCount());\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * table.set(0, 'species', 'Canis Lupus');\n * table.set(0, 'name', 'Wolf');\n *\n * //print the results\n * for (let r = 0; r < table.getRowCount(); r++)\n * for (let c = 0; c < table.getColumnCount(); c++)\n * print(table.getString(r, c));\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * table.setNum(1, 'id', 1);\n *\n * print(table.getColumn(0));\n * //[\"0\", 1, \"2\"]\n * }\n *
\n * // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * //add a row\n * let newRow = table.addRow();\n * newRow.setString('id', table.getRowCount() - 1);\n * newRow.setString('species', 'Canis Lupus');\n * newRow.setString('name', 'Wolf');\n *\n * print(table.getArray());\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * print(table.get(0, 1));\n * //Capra hircus\n * print(table.get(0, 'species'));\n * //Capra hircus\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * print(table.getNum(1, 0) + 100);\n * //id 1 + 100 = 101\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * // table is comma separated value \"CSV\"\n * // and has specifiying header for column labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * print(table.getString(0, 0)); // 0\n * print(table.getString(0, 1)); // Capra hircus\n * print(table.getString(0, 2)); // Goat\n * print(table.getString(1, 0)); // 1\n * print(table.getString(1, 1)); // Panthera pardus\n * print(table.getString(1, 2)); // Leopard\n * print(table.getString(2, 0)); // 2\n * print(table.getString(2, 1)); // Equus zebra\n * print(table.getString(2, 2)); // Zebra\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let tableObject = table.getObject();\n *\n * print(tableObject);\n * //outputs an object\n * }\n *
\n * // Given the CSV file \"mammals.csv\"\n * // in the project's \"assets\" folder\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leoperd\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * // table is comma separated value \"CSV\"\n * // and has specifiying header for column labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let tableArray = table.getArray();\n * for (let i = 0; i < tableArray.length; i++) {\n * print(tableArray[i]);\n * }\n * }\n *
\n * // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let rows = table.getRows();\n * for (let r = 0; r < rows.length; r++) {\n * rows[r].set('name', 'Unicorn');\n * }\n *\n * //print the results\n * print(table.getArray());\n * }\n *
\n * // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let rows = table.getRows();\n * for (let r = 0; r < rows.length; r++) {\n * rows[r].setNum('id', r + 10);\n * }\n *\n * print(table.getArray());\n * }\n *
\n * // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let rows = table.getRows();\n * for (let r = 0; r < rows.length; r++) {\n * let name = rows[r].getString('name');\n * rows[r].setString('name', 'A ' + name + ' named George');\n * }\n *\n * print(table.getArray());\n * }\n *
\n * // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let names = [];\n * let rows = table.getRows();\n * for (let r = 0; r < rows.length; r++) {\n * names.push(rows[r].get('name'));\n * }\n *\n * print(names);\n * }\n *
\n * // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let rows = table.getRows();\n * let minId = Infinity;\n * let maxId = -Infinity;\n * for (let r = 0; r < rows.length; r++) {\n * let id = rows[r].getNum('id');\n * minId = min(minId, id);\n * maxId = min(maxId, id);\n * }\n * print('minimum id = ' + minId + ', maximum id = ' + maxId);\n * }\n *
\n * // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n * //\n * // id,species,name\n * // 0,Capra hircus,Goat\n * // 1,Panthera pardus,Leopard\n * // 2,Equus zebra,Zebra\n *\n * let table;\n *\n * function preload() {\n * //my table is comma separated value \"csv\"\n * //and has a header specifying the columns labels\n * table = loadTable('assets/mammals.csv', 'csv', 'header');\n * }\n *\n * function setup() {\n * let rows = table.getRows();\n * let longest = '';\n * for (let r = 0; r < rows.length; r++) {\n * let species = rows[r].getString('species');\n * if (longest.length < species.length) {\n * longest = species;\n * }\n * }\n *\n * print('longest: ' + longest);\n * }\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let children = xml.getChildren('animal');\n * let parent = children[1].getParent();\n * print(parent.getName());\n * }\n *\n * // Sketch prints:\n * // mammals\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * print(xml.getName());\n * }\n *\n * // Sketch prints:\n * // mammals\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * print(xml.getName());\n * xml.setName('fish');\n * print(xml.getName());\n * }\n *\n * // Sketch prints:\n * // mammals\n * // fish\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * print(xml.hasChildren());\n * }\n *\n * // Sketch prints:\n * // true\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * print(xml.listChildren());\n * }\n *\n * // Sketch prints:\n * // [\"animal\", \"animal\", \"animal\"]\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let animals = xml.getChildren('animal');\n *\n * for (let i = 0; i < animals.length; i++) {\n * print(animals[i].getContent());\n * }\n * }\n *\n * // Sketch prints:\n * // \"Goat\"\n * // \"Leopard\"\n * // \"Zebra\"\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.getContent());\n * }\n *\n * // Sketch prints:\n * // \"Goat\"\n *
\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let secondChild = xml.getChild(1);\n * print(secondChild.getContent());\n * }\n *\n * // Sketch prints:\n * // \"Leopard\"\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let child = new p5.XML();\n * child.setName('animal');\n * child.setAttribute('id', '3');\n * child.setAttribute('species', 'Ornithorhynchus anatinus');\n * child.setContent('Platypus');\n * xml.addChild(child);\n *\n * let animals = xml.getChildren('animal');\n * print(animals[animals.length - 1].getContent());\n * }\n *\n * // Sketch prints:\n * // \"Goat\"\n * // \"Leopard\"\n * // \"Zebra\"\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * xml.removeChild('animal');\n * let children = xml.getChildren();\n * for (let i = 0; i < children.length; i++) {\n * print(children[i].getContent());\n * }\n * }\n *\n * // Sketch prints:\n * // \"Leopard\"\n * // \"Zebra\"\n *
\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * xml.removeChild(1);\n * let children = xml.getChildren();\n * for (let i = 0; i < children.length; i++) {\n * print(children[i].getContent());\n * }\n * }\n *\n * // Sketch prints:\n * // \"Goat\"\n * // \"Zebra\"\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.getAttributeCount());\n * }\n *\n * // Sketch prints:\n * // 2\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.listAttributes());\n * }\n *\n * // Sketch prints:\n * // [\"id\", \"species\"]\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.hasAttribute('species'));\n * print(firstChild.hasAttribute('color'));\n * }\n *\n * // Sketch prints:\n * // true\n * // false\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.getNum('id'));\n * }\n *\n * // Sketch prints:\n * // 0\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.getString('species'));\n * }\n *\n * // Sketch prints:\n * // \"Capra hircus\"\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.getString('species'));\n * firstChild.setAttribute('species', 'Jamides zebra');\n * print(firstChild.getString('species'));\n * }\n *\n * // Sketch prints:\n * // \"Capra hircus\"\n * // \"Jamides zebra\"\n *
\n * // The following short XML file called \"mammals.xml\" is parsed\n * // in the code below.\n * //\n * // \n * // <mammals>\n * // <animal id=\"0\" species=\"Capra hircus\">Goat</animal>\n * // <animal id=\"1\" species=\"Panthera pardus\">Leopard</animal>\n * // <animal id=\"2\" species=\"Equus zebra\">Zebra</animal>\n * // </mammals>\n *\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * let firstChild = xml.getChild('animal');\n * print(firstChild.getContent());\n * firstChild.setContent('Mountain Goat');\n * print(firstChild.getContent());\n * }\n *\n * // Sketch prints:\n * // \"Goat\"\n * // \"Mountain Goat\"\n *
\n * let xml;\n *\n * function preload() {\n * xml = loadXML('assets/mammals.xml');\n * }\n *\n * function setup() {\n * print(xml.serialize());\n * }\n *\n * // Sketch prints:\n * // \n * // Goat\n * // Leopard\n * // Zebra\n * // \n *
\n * function setup() {\n * let x = -3;\n * let y = abs(x);\n *\n * print(x); // -3\n * print(y); // 3\n * }\n *
\n * function draw() {\n * background(200);\n * // map, mouseX between 0 and 5.\n * let ax = map(mouseX, 0, 100, 0, 5);\n * let ay = 66;\n *\n * //Get the ceiling of the mapped number.\n * let bx = ceil(map(mouseX, 0, 100, 0, 5));\n * let by = 33;\n *\n * // Multiply the mapped numbers by 20 to more easily\n * // see the changes.\n * stroke(0);\n * fill(0);\n * line(0, ay, ax * 20, ay);\n * line(0, by, bx * 20, by);\n *\n * // Reformat the float returned by map and draw it.\n * noStroke();\n * text(nfc(ax, 2), ax, ay - 5);\n * text(nfc(bx, 1), bx, by - 5);\n * }\n *
\n * function draw() {\n * background(200);\n *\n * let leftWall = 25;\n * let rightWall = 75;\n *\n * // xm is just the mouseX, while\n * // xc is the mouseX, but constrained\n * // between the leftWall and rightWall!\n * let xm = mouseX;\n * let xc = constrain(mouseX, leftWall, rightWall);\n *\n * // Draw the walls.\n * stroke(150);\n * line(leftWall, 0, leftWall, height);\n * line(rightWall, 0, rightWall, height);\n *\n * // Draw xm and xc as circles.\n * noStroke();\n * fill(150);\n * ellipse(xm, 33, 9, 9); // Not Constrained\n * fill(0);\n * ellipse(xc, 66, 9, 9); // Constrained\n * }\n *
\n * // Move your mouse inside the canvas to see the\n * // change in distance between two points!\n * function draw() {\n * background(200);\n * fill(0);\n *\n * let x1 = 10;\n * let y1 = 90;\n * let x2 = mouseX;\n * let y2 = mouseY;\n *\n * line(x1, y1, x2, y2);\n * ellipse(x1, y1, 7, 7);\n * ellipse(x2, y2, 7, 7);\n *\n * // d is the length of the line\n * // the distance from point 1 to point 2.\n * let d = int(dist(x1, y1, x2, y2));\n *\n * // Let's write d along the line we are drawing!\n * push();\n * translate((x1 + x2) / 2, (y1 + y2) / 2);\n * rotate(atan2(y2 - y1, x2 - x1));\n * text(nfc(d, 1), 0, -5);\n * pop();\n * // Fancy!\n * }\n *
\n * function draw() {\n * background(200);\n *\n * // Compute the exp() function with a value between 0 and 2\n * let xValue = map(mouseX, 0, width, 0, 2);\n * let yValue = exp(xValue);\n *\n * let y = map(yValue, 0, 8, height, 0);\n *\n * let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n * stroke(150);\n * line(mouseX, y, mouseX, height);\n * fill(0);\n * text(legend, 5, 15);\n * noStroke();\n * ellipse(mouseX, y, 7, 7);\n *\n * // Draw the exp(x) curve,\n * // over the domain of x from 0 to 2\n * noFill();\n * stroke(0);\n * beginShape();\n * for (let x = 0; x < width; x++) {\n * xValue = map(x, 0, width, 0, 2);\n * yValue = exp(xValue);\n * y = map(yValue, 0, 8, height, 0);\n * vertex(x, y);\n * }\n *\n * endShape();\n * line(0, 0, 0, height);\n * line(0, height - 1, width, height - 1);\n * }\n *
\n * function draw() {\n * background(200);\n * //map, mouseX between 0 and 5.\n * let ax = map(mouseX, 0, 100, 0, 5);\n * let ay = 66;\n *\n * //Get the floor of the mapped number.\n * let bx = floor(map(mouseX, 0, 100, 0, 5));\n * let by = 33;\n *\n * // Multiply the mapped numbers by 20 to more easily\n * // see the changes.\n * stroke(0);\n * fill(0);\n * line(0, ay, ax * 20, ay);\n * line(0, by, bx * 20, by);\n *\n * // Reformat the float returned by map and draw it.\n * noStroke();\n * text(nfc(ax, 2), ax, ay - 5);\n * text(nfc(bx, 1), bx, by - 5);\n * }\n *
\n * function setup() {\n * background(200);\n * let a = 20;\n * let b = 80;\n * let c = lerp(a, b, 0.2);\n * let d = lerp(a, b, 0.5);\n * let e = lerp(a, b, 0.8);\n *\n * let y = 50;\n *\n * strokeWeight(5);\n * stroke(0); // Draw the original points in black\n * point(a, y);\n * point(b, y);\n *\n * stroke(100); // Draw the lerp points in gray\n * point(c, y);\n * point(d, y);\n * point(e, y);\n * }\n *
\n * function draw() {\n * background(200);\n * let maxX = 2.8;\n * let maxY = 1.5;\n *\n * // Compute the natural log of a value between 0 and maxX\n * let xValue = map(mouseX, 0, width, 0, maxX);\n * let yValue, y;\n * if (xValue > 0) {\n // Cannot take the log of a negative number.\n * yValue = log(xValue);\n * y = map(yValue, -maxY, maxY, height, 0);\n *\n * // Display the calculation occurring.\n * let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n * stroke(150);\n * line(mouseX, y, mouseX, height);\n * fill(0);\n * text(legend, 5, 15);\n * noStroke();\n * ellipse(mouseX, y, 7, 7);\n * }\n *\n * // Draw the log(x) curve,\n * // over the domain of x from 0 to maxX\n * noFill();\n * stroke(0);\n * beginShape();\n * for (let x = 0; x < width; x++) {\n * xValue = map(x, 0, width, 0, maxX);\n * yValue = log(xValue);\n * y = map(yValue, -maxY, maxY, height, 0);\n * vertex(x, y);\n * }\n * endShape();\n * line(0, 0, 0, height);\n * line(0, height / 2, width, height / 2);\n * }\n *
\n * function setup() {\n * let x1 = 20;\n * let x2 = 80;\n * let y1 = 30;\n * let y2 = 70;\n *\n * line(0, 0, x1, y1);\n * print(mag(x1, y1)); // Prints \"36.05551275463989\"\n * line(0, 0, x2, y1);\n * print(mag(x2, y1)); // Prints \"85.44003745317531\"\n * line(0, 0, x1, y2);\n * print(mag(x1, y2)); // Prints \"72.80109889280519\"\n * line(0, 0, x2, y2);\n * print(mag(x2, y2)); // Prints \"106.3014581273465\"\n * }\n *
\n * let value = 25;\n * let m = map(value, 0, 100, 0, width);\n * ellipse(m, 50, 10, 10);\n
\n * function setup() {\n * noStroke();\n * }\n *\n * function draw() {\n * background(204);\n * let x1 = map(mouseX, 0, width, 25, 75);\n * ellipse(x1, 25, 25, 25);\n * //This ellipse is constrained to the 0-100 range\n * //after setting withinBounds to true\n * let x2 = map(mouseX, 0, width, 0, 100, true);\n * ellipse(x2, 75, 25, 25);\n * }\n
\n * function setup() {\n * // Change the elements in the array and run the sketch\n * // to show how max() works!\n * let numArray = [2, 1, 5, 4, 8, 9];\n * fill(0);\n * noStroke();\n * text('Array Elements', 0, 10);\n * // Draw all numbers in the array\n * let spacing = 15;\n * let elemsY = 25;\n * for (let i = 0; i < numArray.length; i++) {\n * text(numArray[i], i * spacing, elemsY);\n * }\n * let maxX = 33;\n * let maxY = 80;\n * // Draw the Maximum value in the array.\n * textSize(32);\n * text(max(numArray), maxX, maxY);\n * }\n *
\n * function setup() {\n * // Change the elements in the array and run the sketch\n * // to show how min() works!\n * let numArray = [2, 1, 5, 4, 8, 9];\n * fill(0);\n * noStroke();\n * text('Array Elements', 0, 10);\n * // Draw all numbers in the array\n * let spacing = 15;\n * let elemsY = 25;\n * for (let i = 0; i < numArray.length; i++) {\n * text(numArray[i], i * spacing, elemsY);\n * }\n * let maxX = 33;\n * let maxY = 80;\n * // Draw the Minimum value in the array.\n * textSize(32);\n * text(min(numArray), maxX, maxY);\n * }\n *
\n * function draw() {\n * background(200);\n * let currentNum = mouseX;\n * let lowerBound = 0;\n * let upperBound = width; //100;\n * let normalized = norm(currentNum, lowerBound, upperBound);\n * let lineY = 70;\n * stroke(3);\n * line(0, lineY, width, lineY);\n * //Draw an ellipse mapped to the non-normalized value.\n * noStroke();\n * fill(50);\n * let s = 7; // ellipse size\n * ellipse(currentNum, lineY, s, s);\n *\n * // Draw the guide\n * let guideY = lineY + 15;\n * text('0', 0, guideY);\n * textAlign(RIGHT);\n * text('100', width, guideY);\n *\n * // Draw the normalized value\n * textAlign(LEFT);\n * fill(0);\n * textSize(32);\n * let normalY = 40;\n * let normalX = 20;\n * text(normalized, normalX, normalY);\n * }\n *
\n * function setup() {\n * //Exponentially increase the size of an ellipse.\n * let eSize = 3; // Original Size\n * let eLoc = 10; // Original Location\n *\n * ellipse(eLoc, eLoc, eSize, eSize);\n *\n * ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n *\n * ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n *\n * ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n * }\n *
\n * function draw() {\n * background(200);\n * //map, mouseX between 0 and 5.\n * let ax = map(mouseX, 0, 100, 0, 5);\n * let ay = 66;\n *\n * // Round the mapped number.\n * let bx = round(map(mouseX, 0, 100, 0, 5));\n * let by = 33;\n *\n * // Multiply the mapped numbers by 20 to more easily\n * // see the changes.\n * stroke(0);\n * fill(0);\n * line(0, ay, ax * 20, ay);\n * line(0, by, bx * 20, by);\n *\n * // Reformat the float returned by map and draw it.\n * noStroke();\n * text(nfc(ax, 2), ax, ay - 5);\n * text(nfc(bx, 1), bx, by - 5);\n * }\n *
\n * function draw() {\n * background(200);\n * let eSize = 7;\n * let x1 = map(mouseX, 0, width, 0, 10);\n * let y1 = 80;\n * let x2 = sq(x1);\n * let y2 = 20;\n *\n * // Draw the non-squared.\n * line(0, y1, width, y1);\n * ellipse(x1, y1, eSize, eSize);\n *\n * // Draw the squared.\n * line(0, y2, width, y2);\n * ellipse(x2, y2, eSize, eSize);\n *\n * // Draw dividing line.\n * stroke(100);\n * line(0, height / 2, width, height / 2);\n *\n * // Draw text.\n * let spacing = 15;\n * noStroke();\n * fill(0);\n * text('x = ' + x1, 0, y1 + spacing);\n * text('sq(x) = ' + x2, 0, y2 + spacing);\n * }\n *
\n * function draw() {\n * background(200);\n * let eSize = 7;\n * let x1 = mouseX;\n * let y1 = 80;\n * let x2 = sqrt(x1);\n * let y2 = 20;\n *\n * // Draw the non-squared.\n * line(0, y1, width, y1);\n * ellipse(x1, y1, eSize, eSize);\n *\n * // Draw the squared.\n * line(0, y2, width, y2);\n * ellipse(x2, y2, eSize, eSize);\n *\n * // Draw dividing line.\n * stroke(100);\n * line(0, height / 2, width, height / 2);\n *\n * // Draw text.\n * noStroke();\n * fill(0);\n * let spacing = 15;\n * text('x = ' + x1, 0, y1 + spacing);\n * text('sqrt(x) = ' + x2, 0, y2 + spacing);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * noStroke();\n * fill(255, 102, 204);\n * }\n *\n * function draw() {\n * background(255);\n * pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));\n * scale(0.75);\n * sphere();\n * }\n *
\n * let xoff = 0.0;\n *\n * function draw() {\n * background(204);\n * xoff = xoff + 0.01;\n * let n = noise(xoff) * width;\n * line(n, 0, n, height);\n * }\n *
let noiseScale=0.02;\n *\n * function draw() {\n * background(0);\n * for (let x=0; x < width; x++) {\n * let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n * stroke(noiseVal*255);\n * line(x, mouseY+noiseVal*80, x, height);\n * }\n * }\n *
\n * let noiseVal;\n * let noiseScale = 0.02;\n *\n * function setup() {\n * createCanvas(100, 100);\n * }\n *\n * function draw() {\n * background(0);\n * for (let y = 0; y < height; y++) {\n * for (let x = 0; x < width / 2; x++) {\n * noiseDetail(2, 0.2);\n * noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n * stroke(noiseVal * 255);\n * point(x, y);\n * noiseDetail(8, 0.65);\n * noiseVal = noise(\n * (mouseX + x + width / 2) * noiseScale,\n * (mouseY + y) * noiseScale\n * );\n * stroke(noiseVal * 255);\n * point(x + width / 2, y);\n * }\n * }\n * }\n *
let xoff = 0.0;\n *\n * function setup() {\n * noiseSeed(99);\n * stroke(0, 10);\n * }\n *\n * function draw() {\n * xoff = xoff + .01;\n * let n = noise(xoff) * width;\n * line(n, 0, n, height);\n * }\n *
\n * let v1 = createVector(40, 50);\n * let v2 = createVector(40, 50);\n *\n * ellipse(v1.x, v1.y, 50, 50);\n * ellipse(v2.x, v2.y, 50, 50);\n * v1.add(v2);\n * ellipse(v1.x, v1.y, 50, 50);\n *
\n * function setup() {\n * let v = createVector(20, 30);\n * print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n * }\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 0);\n * let v1 = createVector(mouseX, mouseY);\n * drawArrow(v0, v1, 'black');\n *\n * noStroke();\n * text(v1.toString(), 10, 25, 90, 75);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * function setup() {\n * let v = createVector(1, 2, 3);\n * v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n *\n * let v1 = createVector(0, 0, 0);\n * let arr = [1, 2, 3];\n * v1.set(arr); // Sets vector to [1, 2, 3]\n * }\n *
\n * let v0, v1;\n * function setup() {\n * createCanvas(100, 100);\n *\n * v0 = createVector(0, 0);\n * v1 = createVector(50, 50);\n * }\n *\n * function draw() {\n * background(240);\n *\n * drawArrow(v0, v1, 'black');\n * v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n *\n * noStroke();\n * text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v1 = createVector(1, 2, 3);\n * let v2 = v1.copy();\n * print(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n * // Prints \"true\"\n *
\n * let v = createVector(1, 2, 3);\n * v.add(4, 5, 6);\n * // v's components are set to [5, 7, 9]\n *
\n * // Static method\n * let v1 = createVector(1, 2, 3);\n * let v2 = createVector(2, 3, 4);\n *\n * let v3 = p5.Vector.add(v1, v2);\n * // v3 has components [3, 5, 7]\n * print(v3);\n *
\n * // red vector + blue vector = purple vector\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 0);\n * let v1 = createVector(mouseX, mouseY);\n * drawArrow(v0, v1, 'red');\n *\n * let v2 = createVector(-30, 20);\n * drawArrow(v1, v2, 'blue');\n *\n * let v3 = p5.Vector.add(v1, v2);\n * drawArrow(v0, v3, 'purple');\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(4, 5, 6);\n * v.sub(1, 1, 1);\n * // v's components are set to [3, 4, 5]\n *
\n * // Static method\n * let v1 = createVector(2, 3, 4);\n * let v2 = createVector(1, 2, 3);\n *\n * let v3 = p5.Vector.sub(v1, v2);\n * // v3 has components [1, 1, 1]\n * print(v3);\n *
\n * // red vector - blue vector = purple vector\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 0);\n * let v1 = createVector(70, 50);\n * drawArrow(v0, v1, 'red');\n *\n * let v2 = createVector(mouseX, mouseY);\n * drawArrow(v0, v2, 'blue');\n *\n * let v3 = p5.Vector.sub(v1, v2);\n * drawArrow(v2, v3, 'purple');\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(1, 2, 3);\n * v.mult(2);\n * // v's components are set to [2, 4, 6]\n *
\n * // Static method\n * let v1 = createVector(1, 2, 3);\n * let v2 = p5.Vector.mult(v1, 2);\n * // v2 has components [2, 4, 6]\n * print(v2);\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(50, 50);\n * let v1 = createVector(25, -25);\n * drawArrow(v0, v1, 'red');\n *\n * let num = map(mouseX, 0, width, -2, 2, true);\n * let v2 = p5.Vector.mult(v1, num);\n * drawArrow(v0, v2, 'blue');\n *\n * noStroke();\n * text('multiplied by ' + num.toFixed(2), 5, 90);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(6, 4, 2);\n * v.div(2); //v's components are set to [3, 2, 1]\n *
\n * // Static method\n * let v1 = createVector(6, 4, 2);\n * let v2 = p5.Vector.div(v1, 2);\n * // v2 has components [3, 2, 1]\n * print(v2);\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 100);\n * let v1 = createVector(50, -50);\n * drawArrow(v0, v1, 'red');\n *\n * let num = map(mouseX, 0, width, 10, 0.5, true);\n * let v2 = p5.Vector.div(v1, num);\n * drawArrow(v0, v2, 'blue');\n *\n * noStroke();\n * text('divided by ' + num.toFixed(2), 10, 90);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 0);\n * let v1 = createVector(mouseX, mouseY);\n * drawArrow(v0, v1, 'black');\n *\n * noStroke();\n * text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(20.0, 30.0, 40.0);\n * let m = v.mag();\n * print(m); // Prints \"53.85164807134504\"\n *
\n * // Static method\n * let v1 = createVector(6, 4, 2);\n * print(v1.magSq()); // Prints \"56\"\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 0);\n * let v1 = createVector(mouseX, mouseY);\n * drawArrow(v0, v1, 'black');\n *\n * noStroke();\n * text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v1 = createVector(1, 2, 3);\n * let v2 = createVector(2, 3, 4);\n *\n * print(v1.dot(v2)); // Prints \"20\"\n *
\n * //Static method\n * let v1 = createVector(1, 2, 3);\n * let v2 = createVector(3, 2, 1);\n * print(p5.Vector.dot(v1, v2)); // Prints \"10\"\n *
\n * let v1 = createVector(1, 2, 3);\n * let v2 = createVector(1, 2, 3);\n *\n * v1.cross(v2); // v's components are [0, 0, 0]\n *
\n * // Static method\n * let v1 = createVector(1, 0, 0);\n * let v2 = createVector(0, 1, 0);\n *\n * let crossProduct = p5.Vector.cross(v1, v2);\n * // crossProduct has components [0, 0, 1]\n * print(crossProduct);\n *
\n * let v1 = createVector(1, 0, 0);\n * let v2 = createVector(0, 1, 0);\n *\n * let distance = v1.dist(v2); // distance is 1.4142...\n * print(distance);\n *
\n * // Static method\n * let v1 = createVector(1, 0, 0);\n * let v2 = createVector(0, 1, 0);\n *\n * let distance = p5.Vector.dist(v1, v2);\n * // distance is 1.4142...\n * print(distance);\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 0);\n *\n * let v1 = createVector(70, 50);\n * drawArrow(v0, v1, 'red');\n *\n * let v2 = createVector(mouseX, mouseY);\n * drawArrow(v0, v2, 'blue');\n *\n * noStroke();\n * text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(10, 20, 2);\n * // v has components [10.0, 20.0, 2.0]\n * v.normalize();\n * // v's components are set to\n * // [0.4454354, 0.8908708, 0.089087084]\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(50, 50);\n * let v1 = createVector(mouseX - 50, mouseY - 50);\n *\n * drawArrow(v0, v1, 'red');\n * v1.normalize();\n * drawArrow(v0, v1.mult(35), 'blue');\n *\n * noFill();\n * ellipse(50, 50, 35 * 2);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(10, 20, 2);\n * // v has components [10.0, 20.0, 2.0]\n * v.limit(5);\n * // v's components are set to\n * // [2.2271771, 4.4543543, 0.4454354]\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(50, 50);\n * let v1 = createVector(mouseX - 50, mouseY - 50);\n *\n * drawArrow(v0, v1, 'red');\n * drawArrow(v0, v1.limit(35), 'blue');\n *\n * noFill();\n * ellipse(50, 50, 35 * 2);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(10, 20, 2);\n * // v has components [10.0, 20.0, 2.0]\n * v.setMag(10);\n * // v's components are set to [6.0, 8.0, 0.0]\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(0, 0);\n * let v1 = createVector(50, 50);\n *\n * drawArrow(v0, v1, 'red');\n *\n * let length = map(mouseX, 0, width, 0, 141, true);\n * v1.setMag(length);\n * drawArrow(v0, v1, 'blue');\n *\n * noStroke();\n * text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * function setup() {\n * let v1 = createVector(30, 50);\n * print(v1.heading()); // 1.0303768265243125\n *\n * v1 = createVector(40, 50);\n * print(v1.heading()); // 0.8960553845713439\n *\n * v1 = createVector(30, 70);\n * print(v1.heading()); // 1.1659045405098132\n * }\n *
\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(50, 50);\n * let v1 = createVector(mouseX - 50, mouseY - 50);\n *\n * drawArrow(v0, v1, 'black');\n *\n * let myHeading = v1.heading();\n * noStroke();\n * text(\n * 'vector heading: ' +\n * myHeading.toFixed(2) +\n * ' radians or ' +\n * degrees(myHeading).toFixed(2) +\n * ' degrees',\n * 10,\n * 50,\n * 90,\n * 50\n * );\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(10.0, 20.0);\n * // v has components [10.0, 20.0, 0.0]\n * v.rotate(HALF_PI);\n * // v's components are set to [-20.0, 9.999999, 0.0]\n *
\n * let angle = 0;\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(50, 50);\n * let v1 = createVector(50, 0);\n *\n * drawArrow(v0, v1.rotate(angle), 'black');\n * angle += 0.01;\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v1 = createVector(1, 0, 0);\n * let v2 = createVector(0, 1, 0);\n *\n * let angle = v1.angleBetween(v2);\n * // angle is PI/2\n * print(angle);\n *
\n * function draw() {\n * background(240);\n * let v0 = createVector(50, 50);\n *\n * let v1 = createVector(50, 0);\n * drawArrow(v0, v1, 'red');\n *\n * let v2 = createVector(mouseX - 50, mouseY - 50);\n * drawArrow(v0, v2, 'blue');\n *\n * let angleBetween = v1.angleBetween(v2);\n * noStroke();\n * text(\n * 'angle between: ' +\n * angleBetween.toFixed(2) +\n * ' radians or ' +\n * degrees(angleBetween).toFixed(2) +\n * ' degrees',\n * 10,\n * 50,\n * 90,\n * 50\n * );\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = createVector(1, 1, 0);\n *\n * v.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n *
\n * let v1 = createVector(0, 0, 0);\n * let v2 = createVector(100, 100, 0);\n *\n * let v3 = p5.Vector.lerp(v1, v2, 0.5);\n * // v3 has components [50,50,0]\n * print(v3);\n *
\n * let step = 0.01;\n * let amount = 0;\n *\n * function draw() {\n * background(240);\n * let v0 = createVector(0, 0);\n *\n * let v1 = createVector(mouseX, mouseY);\n * drawArrow(v0, v1, 'red');\n *\n * let v2 = createVector(90, 90);\n * drawArrow(v0, v2, 'blue');\n *\n * if (amount > 1 || amount < 0) {\n * step *= -1;\n * }\n * amount += step;\n * let v3 = p5.Vector.lerp(v1, v2, amount);\n *\n * drawArrow(v0, v3, 'purple');\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * function setup() {\n * let v = createVector(20, 30);\n * print(v.array()); // Prints : Array [20, 30, 0]\n * }\n *
\n * let v = createVector(10.0, 20.0, 30.0);\n * let f = v.array();\n * print(f[0]); // Prints \"10.0\"\n * print(f[1]); // Prints \"20.0\"\n * print(f[2]); // Prints \"30.0\"\n *
\n * let v1 = createVector(5, 10, 20);\n * let v2 = createVector(5, 10, 20);\n * let v3 = createVector(13, 10, 19);\n *\n * print(v1.equals(v2.x, v2.y, v2.z)); // true\n * print(v1.equals(v3.x, v3.y, v3.z)); // false\n *
\n * let v1 = createVector(10.0, 20.0, 30.0);\n * let v2 = createVector(10.0, 20.0, 30.0);\n * let v3 = createVector(0.0, 0.0, 0.0);\n * print(v1.equals(v2)); // true\n * print(v1.equals(v3)); // false\n *
\n * function draw() {\n * background(200);\n *\n * // Create a variable, proportional to the mouseX,\n * // varying from 0-360, to represent an angle in degrees.\n * angleMode(DEGREES);\n * let myDegrees = map(mouseX, 0, width, 0, 360);\n *\n * // Display that variable in an onscreen text.\n * // (Note the nfc() function to truncate additional decimal places,\n * // and the \"\\xB0\" character for the degree symbol.)\n * let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n * noStroke();\n * fill(0);\n * text(readout, 5, 15);\n *\n * // Create a p5.Vector using the fromAngle function,\n * // and extract its x and y components.\n * let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n * let vx = v.x;\n * let vy = v.y;\n *\n * push();\n * translate(width / 2, height / 2);\n * noFill();\n * stroke(150);\n * line(0, 0, 30, 0);\n * stroke(0);\n * line(0, 0, vx, vy);\n * pop();\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * fill(255);\n * noStroke();\n * }\n * function draw() {\n * background(255);\n *\n * let t = millis() / 1000;\n *\n * // add three point lights\n * pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n * pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n * pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n *\n * sphere(35);\n * }\n *
\n * let v = p5.Vector.random2D();\n * // May make v's attributes something like:\n * // [0.61554617, -0.51195765, 0.0] or\n * // [-0.4695841, -0.14366731, 0.0] or\n * // [0.6091097, -0.22805278, 0.0]\n * print(v);\n *
\n * function setup() {\n * frameRate(1);\n * }\n *\n * function draw() {\n * background(240);\n *\n * let v0 = createVector(50, 50);\n * let v1 = p5.Vector.random2D();\n * drawArrow(v0, v1.mult(50), 'black');\n * }\n *\n * // draw an arrow for a vector at a given base position\n * function drawArrow(base, vec, myColor) {\n * push();\n * stroke(myColor);\n * strokeWeight(3);\n * fill(myColor);\n * translate(base.x, base.y);\n * line(0, 0, vec.x, vec.y);\n * rotate(vec.heading());\n * let arrowSize = 7;\n * translate(vec.mag() - arrowSize, 0);\n * triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);\n * pop();\n * }\n *
\n * let v = p5.Vector.random3D();\n * // May make v's attributes something like:\n * // [0.61554617, -0.51195765, 0.599168] or\n * // [-0.4695841, -0.14366731, -0.8711202] or\n * // [0.6091097, -0.22805278, -0.7595902]\n * print(v);\n *
\n * randomSeed(99);\n * for (let i = 0; i < 100; i++) {\n * let r = random(0, 255);\n * stroke(r);\n * line(i, 0, i, 100);\n * }\n *
\n * for (let i = 0; i < 100; i++) {\n * let r = random(50);\n * stroke(r * 5);\n * line(50, i, 50 + r, i);\n * }\n *
\n * for (let i = 0; i < 100; i++) {\n * let r = random(-50, 50);\n * line(50, i, 50 + r, i);\n * }\n *
\n * // Get a random element from an array using the random(Array) syntax\n * let words = ['apple', 'bear', 'cat', 'dog'];\n * let word = random(words); // select random word\n * text(word, 10, 50); // draw the word\n *
\n * for (let y = 0; y < 100; y++) {\n * let x = randomGaussian(50, 15);\n * line(50, y, x, y);\n * }\n *
\n * let distribution = new Array(360);\n *\n * function setup() {\n * createCanvas(100, 100);\n * for (let i = 0; i < distribution.length; i++) {\n * distribution[i] = floor(randomGaussian(0, 15));\n * }\n * }\n *\n * function draw() {\n * background(204);\n *\n * translate(width / 2, width / 2);\n *\n * for (let i = 0; i < distribution.length; i++) {\n * rotate(TWO_PI / distribution.length);\n * stroke(0);\n * let dist = abs(distribution[i]);\n * line(0, 0, dist, 0);\n * }\n * }\n *
\n * let a = PI;\n * let c = cos(a);\n * let ac = acos(c);\n * // Prints: \"3.1415927 : -1.0 : 3.1415927\"\n * print(a + ' : ' + c + ' : ' + ac);\n *
\n * let a = PI + PI / 4.0;\n * let c = cos(a);\n * let ac = acos(c);\n * // Prints: \"3.926991 : -0.70710665 : 2.3561943\"\n * print(a + ' : ' + c + ' : ' + ac);\n *
\n * let a = PI + PI / 3;\n * let s = sin(a);\n * let as = asin(s);\n * // Prints: \"1.0471976 : 0.86602545 : 1.0471976\"\n * print(a + ' : ' + s + ' : ' + as);\n *
\n * let a = PI + PI / 3.0;\n * let s = sin(a);\n * let as = asin(s);\n * // Prints: \"4.1887903 : -0.86602545 : -1.0471976\"\n * print(a + ' : ' + s + ' : ' + as);\n *
\n * let a = PI + PI / 3;\n * let t = tan(a);\n * let at = atan(t);\n * // Prints: \"1.0471976 : 1.7320509 : 1.0471976\"\n * print(a + ' : ' + t + ' : ' + at);\n *
\n * let a = PI + PI / 3.0;\n * let t = tan(a);\n * let at = atan(t);\n * // Prints: \"4.1887903 : 1.7320513 : 1.0471977\"\n * print(a + ' : ' + t + ' : ' + at);\n *
\n * function draw() {\n * background(204);\n * translate(width / 2, height / 2);\n * let a = atan2(mouseY - height / 2, mouseX - width / 2);\n * rotate(a);\n * rect(-30, -5, 60, 10);\n * }\n *
\n * let a = 0.0;\n * let inc = TWO_PI / 25.0;\n * for (let i = 0; i < 25; i++) {\n * line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n * a = a + inc;\n * }\n *
\n * let a = 0.0;\n * let inc = TWO_PI / 25.0;\n * for (let i = 0; i < 25; i++) {\n * line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n * a = a + inc;\n * }\n *
\n * let a = 0.0;\n * let inc = TWO_PI / 50.0;\n * for (let i = 0; i < 100; i = i + 2) {\n * line(i, 50, i, 50 + tan(a) * 2.0);\n * a = a + inc;\n * }\n *
\n * let rad = PI / 4;\n * let deg = degrees(rad);\n * print(rad + ' radians is ' + deg + ' degrees');\n * // Prints: 0.7853981633974483 radians is 45 degrees\n *
\n * let deg = 45.0;\n * let rad = radians(deg);\n * print(deg + ' degrees is ' + rad + ' radians');\n * // Prints: 45 degrees is 0.7853981633974483 radians\n *
\n * function draw() {\n * background(204);\n * angleMode(DEGREES); // Change the mode to DEGREES\n * let a = atan2(mouseY - height / 2, mouseX - width / 2);\n * translate(width / 2, height / 2);\n * push();\n * rotate(a);\n * rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n * pop();\n * angleMode(RADIANS); // Change the mode to RADIANS\n * rotate(a); // variable a stays the same\n * rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n * }\n *
\n * textSize(16);\n * textAlign(RIGHT);\n * text('ABCD', 50, 30);\n * textAlign(CENTER);\n * text('EFGH', 50, 50);\n * textAlign(LEFT);\n * text('IJKL', 50, 70);\n *
\n * textSize(16);\n * strokeWeight(0.5);\n *\n * line(0, 12, width, 12);\n * textAlign(CENTER, TOP);\n * text('TOP', 0, 12, width);\n *\n * line(0, 37, width, 37);\n * textAlign(CENTER, CENTER);\n * text('CENTER', 0, 37, width);\n *\n * line(0, 62, width, 62);\n * textAlign(CENTER, BASELINE);\n * text('BASELINE', 0, 62, width);\n *\n * line(0, 87, width, 87);\n * textAlign(CENTER, BOTTOM);\n * text('BOTTOM', 0, 87, width);\n *
\n * // Text to display. The \"\\n\" is a \"new line\" character\n * let lines = 'L1\\nL2\\nL3';\n * textSize(12);\n *\n * textLeading(10); // Set leading to 10\n * text(lines, 10, 25);\n *\n * textLeading(20); // Set leading to 20\n * text(lines, 40, 25);\n *\n * textLeading(30); // Set leading to 30\n * text(lines, 70, 25);\n *
\n * textSize(12);\n * text('Font Size 12', 10, 30);\n * textSize(14);\n * text('Font Size 14', 10, 60);\n * textSize(16);\n * text('Font Size 16', 10, 90);\n *
\n * strokeWeight(0);\n * textSize(12);\n * textStyle(NORMAL);\n * text('Font Style Normal', 10, 15);\n * textStyle(ITALIC);\n * text('Font Style Italic', 10, 40);\n * textStyle(BOLD);\n * text('Font Style Bold', 10, 65);\n * textStyle(BOLDITALIC);\n * text('Font Style Bold Italic', 10, 90);\n *
\n * textSize(28);\n *\n * let aChar = 'P';\n * let cWidth = textWidth(aChar);\n * text(aChar, 0, 40);\n * line(cWidth, 0, cWidth, 50);\n *\n * let aString = 'p5.js';\n * let sWidth = textWidth(aString);\n * text(aString, 0, 85);\n * line(sWidth, 50, sWidth, 100);\n *
\n * let base = height * 0.75;\n * let scalar = 0.8; // Different for each font\n *\n * textSize(32); // Set initial text size\n * let asc = textAscent() * scalar; // Calc ascent\n * line(0, base - asc, width, base - asc);\n * text('dp', 0, base); // Draw text on baseline\n *\n * textSize(64); // Increase text size\n * asc = textAscent() * scalar; // Recalc ascent\n * line(40, base - asc, width, base - asc);\n * text('dp', 40, base); // Draw text on baseline\n *
\n * let base = height * 0.75;\n * let scalar = 0.8; // Different for each font\n *\n * textSize(32); // Set initial text size\n * let desc = textDescent() * scalar; // Calc ascent\n * line(0, base + desc, width, base + desc);\n * text('dp', 0, base); // Draw text on baseline\n *\n * textSize(64); // Increase text size\n * desc = textDescent() * scalar; // Recalc ascent\n * line(40, base + desc, width, base + desc);\n * text('dp', 40, base); // Draw text on baseline\n *
Calling loadFont() inside preload() guarantees that the load\n * operation will have completed before setup() and draw() are called.
\n * let myFont;\n * function preload() {\n * myFont = loadFont('assets/inconsolata.otf');\n * }\n *\n * function setup() {\n * fill('#ED225D');\n * textFont(myFont);\n * textSize(36);\n * text('p5*js', 10, 50);\n * }\n *
\n * function setup() {\n * loadFont('assets/inconsolata.otf', drawText);\n * }\n *\n * function drawText(font) {\n * fill('#ED225D');\n * textFont(font, 36);\n * text('p5*js', 10, 50);\n * }\n *
You can also use the font filename string (without the file extension) to style other HTML\n * elements.
\n * function preload() {\n * loadFont('assets/inconsolata.otf');\n * }\n *\n * function setup() {\n * let myDiv = createDiv('hello there');\n * myDiv.style('font-family', 'Inconsolata');\n * }\n *
\n * textSize(32);\n * text('word', 10, 30);\n * fill(0, 102, 153);\n * text('word', 10, 60);\n * fill(0, 102, 153, 51);\n * text('word', 10, 90);\n *
\n * let s = 'The quick brown fox jumped over the lazy dog.';\n * fill(50);\n * text(s, 10, 10, 70, 80); // Text wraps within text box\n *
\n * let inconsolata;\n * function preload() {\n * inconsolata = loadFont('assets/inconsolata.otf');\n * }\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * textFont(inconsolata);\n * textSize(width / 3);\n * textAlign(CENTER, CENTER);\n * }\n * function draw() {\n * background(0);\n * let time = millis();\n * rotateX(time / 1000);\n * rotateZ(time / 1234);\n * text('p5.js', 0, 0);\n * }\n *
\n * fill(0);\n * textSize(12);\n * textFont('Georgia');\n * text('Georgia', 12, 30);\n * textFont('Helvetica');\n * text('Helvetica', 12, 60);\n *
\n * let fontRegular, fontItalic, fontBold;\n * function preload() {\n * fontRegular = loadFont('assets/Regular.otf');\n * fontItalic = loadFont('assets/Italic.ttf');\n * fontBold = loadFont('assets/Bold.ttf');\n * }\n * function setup() {\n * background(210);\n * fill(0)\n .strokeWeight(0)\n .textSize(10);\n * textFont(fontRegular);\n * text('Font Style Normal', 10, 30);\n * textFont(fontItalic);\n * text('Font Style Italic', 10, 50);\n * textFont(fontBold);\n * text('Font Style Bold', 10, 70);\n * }\n *
\n * let font;\n * let textString = 'Lorem ipsum dolor sit amet.';\n * function preload() {\n * font = loadFont('./assets/Regular.otf');\n * }\n * function setup() {\n * background(210);\n *\n * let bbox = font.textBounds(textString, 10, 30, 12);\n * fill(255);\n * stroke(0);\n * rect(bbox.x, bbox.y, bbox.w, bbox.h);\n * fill(0);\n * noStroke();\n *\n * textFont(font);\n * textSize(12);\n * text(textString, 10, 30);\n * }\n *
\n * let font;\n * function preload() {\n * font = loadFont('assets/inconsolata.otf');\n * }\n *\n * let points;\n * let bounds;\n * function setup() {\n * createCanvas(100, 100);\n * stroke(0);\n * fill(255, 104, 204);\n *\n * points = font.textToPoints('p5', 0, 0, 10, {\n * sampleFactor: 5,\n * simplifyThreshold: 0\n * });\n * bounds = font.textBounds(' p5 ', 0, 0, 10);\n * }\n *\n * function draw() {\n * background(255);\n * beginShape();\n * translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n * for (let i = 0; i < points.length; i++) {\n * let p = points[i];\n * vertex(\n * p.x * width / bounds.w +\n * sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n * p.y * height / bounds.h\n * );\n * }\n * endShape(CLOSE);\n * }\n *
\n * function setup() {\n * var myArray = ['Mango', 'Apple', 'Papaya'];\n * print(myArray); // ['Mango', 'Apple', 'Papaya']\n *\n * append(myArray, 'Peach');\n * print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\n * }\n *
\n * var src = ['A', 'B', 'C'];\n * var dst = [1, 2, 3];\n * var srcPosition = 1;\n * var dstPosition = 0;\n * var length = 2;\n *\n * print(src); // ['A', 'B', 'C']\n * print(dst); // [ 1 , 2 , 3 ]\n *\n * arrayCopy(src, srcPosition, dst, dstPosition, length);\n * print(dst); // ['B', 'C', 3]\n *
\n * function setup() {\n * var arr1 = ['A', 'B', 'C'];\n * var arr2 = [1, 2, 3];\n *\n * print(arr1); // ['A','B','C']\n * print(arr2); // [1,2,3]\n *\n * var arr3 = concat(arr1, arr2);\n *\n * print(arr1); // ['A','B','C']\n * print(arr2); // [1, 2, 3]\n * print(arr3); // ['A','B','C', 1, 2, 3]\n * }\n *
\n * function setup() {\n * var myArray = ['A', 'B', 'C'];\n * print(myArray); // ['A','B','C']\n *\n * reverse(myArray);\n * print(myArray); // ['C','B','A']\n * }\n *
\n * function setup() {\n * var myArray = ['A', 'B', 'C'];\n * print(myArray); // ['A', 'B', 'C']\n * var newArray = shorten(myArray);\n * print(myArray); // ['A','B','C']\n * print(newArray); // ['A','B']\n * }\n *
\n * function setup() {\n * var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];\n * print(regularArr);\n * shuffle(regularArr, true); // force modifications to passed array\n * print(regularArr);\n *\n * // By default shuffle() returns a shuffled cloned array:\n * var newArr = shuffle(regularArr);\n * print(regularArr);\n * print(newArr);\n * }\n *
\n * function setup() {\n * var words = ['banana', 'apple', 'pear', 'lime'];\n * print(words); // ['banana', 'apple', 'pear', 'lime']\n * var count = 4; // length of array\n *\n * words = sort(words, count);\n * print(words); // ['apple', 'banana', 'lime', 'pear']\n * }\n *
\n * function setup() {\n * var numbers = [2, 6, 1, 5, 14, 9, 8, 12];\n * print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\n * var count = 5; // Less than the length of the array\n *\n * numbers = sort(numbers, count);\n * print(numbers); // [1,2,5,6,14,9,8,12]\n * }\n *
\n * function setup() {\n * var myArray = [0, 1, 2, 3, 4];\n * var insArray = ['A', 'B', 'C'];\n * print(myArray); // [0, 1, 2, 3, 4]\n * print(insArray); // ['A','B','C']\n *\n * splice(myArray, insArray, 3);\n * print(myArray); // [0,1,2,'A','B','C',3,4]\n * }\n *
\n * function setup() {\n * var myArray = [1, 2, 3, 4, 5];\n * print(myArray); // [1, 2, 3, 4, 5]\n *\n * var sub1 = subset(myArray, 0, 3);\n * var sub2 = subset(myArray, 2, 2);\n * print(sub1); // [1,2,3]\n * print(sub2); // [3,4]\n * }\n *
\n * var str = '20';\n * var diameter = float(str);\n * ellipse(width / 2, height / 2, diameter, diameter);\n *
\n * print(float('10.31')); // 10.31\n * print(float('Infinity')); // Infinity\n * print(float('-Infinity')); // -Infinity\n *
\n * print(int('10')); // 10\n * print(int(10.31)); // 10\n * print(int(-10)); // -10\n * print(int(true)); // 1\n * print(int(false)); // 0\n * print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]\n * print(int(Infinity)); // Infinity\n * print(int('-Infinity')); // -Infinity\n *
\n * print(str('10')); // \"10\"\n * print(str(10.31)); // \"10.31\"\n * print(str(-10)); // \"-10\"\n * print(str(true)); // \"true\"\n * print(str(false)); // \"false\"\n * print(str([true, '10.3', 9.8])); // [ \"true\", \"10.3\", \"9.8\" ]\n *
\n * print(boolean(0)); // false\n * print(boolean(1)); // true\n * print(boolean('true')); // true\n * print(boolean('abcd')); // false\n * print(boolean([0, 12, 'true'])); // [false, true, true]\n *
\n * print(byte(127)); // 127\n * print(byte(128)); // -128\n * print(byte(23.4)); // 23\n * print(byte('23.4')); // 23\n * print(byte('hello')); // NaN\n * print(byte(true)); // 1\n * print(byte([0, 255, '100'])); // [0, -1, 100]\n *
\n * print(char(65)); // \"A\"\n * print(char('65')); // \"A\"\n * print(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\n * print(join(char([65, 66, 67]), '')); // \"ABC\"\n *
\n * print(unchar('A')); // 65\n * print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\n * print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n *
\n * print(hex(255)); // \"000000FF\"\n * print(hex(255, 6)); // \"0000FF\"\n * print(hex([0, 127, 255], 6)); // [ \"000000\", \"00007F\", \"0000FF\" ]\n * print(Infinity); // \"FFFFFFFF\"\n * print(-Infinity); // \"00000000\"\n *
\n * print(unhex('A')); // 10\n * print(unhex('FF')); // 255\n * print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n *
\n * var array = ['Hello', 'world!'];\n * var separator = ' ';\n * var message = join(array, separator);\n * text(message, 5, 50);\n *
\n * var string = 'Hello p5js*!';\n * var regexp = 'p5js\\\\*';\n * var m = match(string, regexp);\n * text(m, 5, 50);\n *
\n * var string = 'Hello p5js*! Hello world!';\n * var regexp = 'Hello';\n * matchAll(string, regexp);\n *
\n * var myFont;\n * function preload() {\n * myFont = loadFont('assets/fonts/inconsolata.ttf');\n * }\n * function setup() {\n * background(200);\n * var num1 = 321;\n * var num2 = -1321;\n *\n * noStroke();\n * fill(0);\n * textFont(myFont);\n * textSize(22);\n *\n * text(nf(num1, 4, 2), 10, 30);\n * text(nf(num2, 4, 2), 10, 80);\n * // Draw dividing line\n * stroke(120);\n * line(0, 50, width, 50);\n * }\n *
\n * function setup() {\n * background(200);\n * var num = 11253106.115;\n * var numArr = [1, 1, 2];\n *\n * noStroke();\n * fill(0);\n * textSize(12);\n *\n * // Draw formatted numbers\n * text(nfc(num, 4), 10, 30);\n * text(nfc(numArr, 2), 10, 80);\n *\n * // Draw dividing line\n * stroke(120);\n * line(0, 50, width, 50);\n * }\n *
\n * function setup() {\n * background(200);\n * var num1 = 11253106.115;\n * var num2 = -11253106.115;\n *\n * noStroke();\n * fill(0);\n * textSize(12);\n *\n * // Draw formatted numbers\n * text(nfp(num1, 4, 2), 10, 30);\n * text(nfp(num2, 4, 2), 10, 80);\n *\n * // Draw dividing line\n * stroke(120);\n * line(0, 50, width, 50);\n * }\n *
\n * var myFont;\n * function preload() {\n * myFont = loadFont('assets/fonts/inconsolata.ttf');\n * }\n * function setup() {\n * background(200);\n * var num1 = 321;\n * var num2 = -1321;\n *\n * noStroke();\n * fill(0);\n * textFont(myFont);\n * textSize(22);\n *\n * // nfs() aligns num1 (positive number) with num2 (negative number) by\n * // adding a blank space in front of the num1 (positive number)\n * // [left = 4] in num1 add one 0 in front, to align the digits with num2\n * // [right = 2] in num1 and num2 adds two 0's after both numbers\n * // To see the differences check the example of nf() too.\n * text(nfs(num1, 4, 2), 10, 30);\n * text(nfs(num2, 4, 2), 10, 80);\n * // Draw dividing line\n * stroke(120);\n * line(0, 50, width, 50);\n * }\n *
\n * var names = 'Pat,Xio,Alex';\n * var splitString = split(names, ',');\n * text(splitString[0], 5, 30);\n * text(splitString[1], 5, 50);\n * text(splitString[2], 5, 70);\n *
\n * function setup() {\n * var myStr = 'Mango, Banana, Lime';\n * var myStrArr = splitTokens(myStr, ',');\n *\n * print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n * }\n *
\n * var string = trim(' No new lines\\n ');\n * text(string + ' here', 2, 50);\n *
\n * var d = day();\n * text('Current day: \\n' + d, 5, 50);\n *
\n * var h = hour();\n * text('Current hour:\\n' + h, 5, 50);\n *
\n * var m = minute();\n * text('Current minute: \\n' + m, 5, 50);\n *
\n * var millisecond = millis();\n * text('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n *
\n * var m = month();\n * text('Current month: \\n' + m, 5, 50);\n *
\n * var s = second();\n * text('Current second: \\n' + s, 5, 50);\n *
\n * var y = year();\n * text('Current year: \\n' + y, 5, 50);\n *
\n * // draw a plane\n * // with width 50 and height 50\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * plane(50, 50);\n * }\n *
\n * // draw a spinning box\n * // with width, height and depth of 50\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * box(50);\n * }\n *
\n * // draw a sphere with radius 40\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * sphere(40);\n * }\n *
\n * // draw a spinning cylinder\n * // with radius 20 and height 50\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * rotateX(frameCount * 0.01);\n * rotateZ(frameCount * 0.01);\n * cylinder(20, 50);\n * }\n *
\n * // draw a spinning cone\n * // with radius 40 and height 70\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * rotateX(frameCount * 0.01);\n * rotateZ(frameCount * 0.01);\n * cone(40, 70);\n * }\n *
\n * // draw an ellipsoid\n * // with radius 30, 40 and 40.\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * ellipsoid(30, 40, 40);\n * }\n *
\n * // draw a spinning torus\n * // with ring radius 30 and tube radius 15\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * torus(30, 15);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(50);\n * stroke(255);\n * strokeWeight(4);\n * point(25, 0);\n * strokeWeight(3);\n * point(-25, 0);\n * strokeWeight(2);\n * point(0, 25);\n * strokeWeight(1);\n * point(0, -25);\n * }\n *
\n * //draw a line\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * // Use fill instead of stroke to change the color of shape.\n * fill(255, 0, 0);\n * line(10, 10, 0, 60, 60, 20);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * normalMaterial();\n * }\n * function draw() {\n * background(200);\n * orbitControl();\n * rotateY(0.5);\n * box(30, 50);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n * normalMaterial();\n * debugMode();\n * }\n *\n * function draw() {\n * background(200);\n * orbitControl();\n * box(15, 30);\n * // Press the spacebar to turn debugMode off!\n * if (keyIsDown(32)) {\n * noDebugMode();\n * }\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n * normalMaterial();\n * debugMode(GRID);\n * }\n *\n * function draw() {\n * background(200);\n * orbitControl();\n * box(15, 30);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n * normalMaterial();\n * debugMode(AXES);\n * }\n *\n * function draw() {\n * background(200);\n * orbitControl();\n * box(15, 30);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n * normalMaterial();\n * debugMode(GRID, 100, 10, 0, 0, 0);\n * }\n *\n * function draw() {\n * background(200);\n * orbitControl();\n * box(15, 30);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n * normalMaterial();\n * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\n * }\n *\n * function draw() {\n * noStroke();\n * background(200);\n * orbitControl();\n * box(15, 30);\n * // set the stroke color and weight for the grid!\n * stroke(255, 0, 150);\n * strokeWeight(0.8);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(0);\n * ambientLight(150);\n * ambientMaterial(250);\n * noStroke();\n * sphere(40);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(0);\n * //move your mouse to change light direction\n * let dirX = (mouseX / width - 0.5) * 2;\n * let dirY = (mouseY / height - 0.5) * 2;\n * directionalLight(250, 250, 250, -dirX, -dirY, -1);\n * noStroke();\n * sphere(40);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(0);\n * //move your mouse to change light position\n * let locX = mouseX - width / 2;\n * let locY = mouseY - height / 2;\n * // to set the light position,\n * // think of the world's coordinate as:\n * // -width/2,-height/2 -------- width/2,-height/2\n * // | |\n * // | 0,0 |\n * // | |\n * // -width/2,height/2--------width/2,height/2\n * pointLight(250, 250, 250, locX, locY, 50);\n * noStroke();\n * sphere(40);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(0);\n * lights();\n * rotateX(millis() / 1000);\n * rotateY(millis() / 1000);\n * rotateZ(millis() / 1000);\n * box();\n * }\n *
\n * //draw a spinning octahedron\n * let octahedron;\n *\n * function preload() {\n * octahedron = loadModel('assets/octahedron.obj');\n * }\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * model(octahedron);\n * }\n *
\n * //draw a spinning teapot\n * let teapot;\n *\n * function preload() {\n * // Load model with normalise parameter set to true\n * teapot = loadModel('assets/teapot.obj', true);\n * }\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * scale(0.4); // Scaled to make model fit into canvas\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * normalMaterial(); // For effect\n * model(teapot);\n * }\n *
\n * let mandel;\n * function preload() {\n * // load the shader definitions from files\n * mandel = loadShader('assets/shader.vert', 'assets/shader.frag');\n * }\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * // use the shader\n * shader(mandel);\n * noStroke();\n * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n * }\n *\n * function draw() {\n * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n * quad(-1, -1, 1, -1, 1, 1, -1, 1);\n * }\n *
\n * // the 'varying's are shared between both vertex & fragment shaders\n * let varying = 'precision highp float; varying vec2 vPos;';\n *\n * // the vertex shader is called for each vertex\n * let vs =\n * varying +\n * 'attribute vec3 aPosition;' +\n * 'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n *\n * // the fragment shader is called for each pixel\n * let fs =\n * varying +\n * 'uniform vec2 p;' +\n * 'uniform float r;' +\n * 'const int I = 500;' +\n * 'void main() {' +\n * ' vec2 c = p + vPos * r, z = c;' +\n * ' float n = 0.0;' +\n * ' for (int i = I; i > 0; i --) {' +\n * ' if(z.x*z.x+z.y*z.y > 4.0) {' +\n * ' n = float(i)/float(I);' +\n * ' break;' +\n * ' }' +\n * ' z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n * ' }' +\n * ' gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n * '}';\n *\n * let mandel;\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n *\n * // create and initialize the shader\n * mandel = createShader(vs, fs);\n * shader(mandel);\n * noStroke();\n *\n * // 'p' is the center point of the Mandelbrot image\n * mandel.setUniform('p', [-0.74364388703, 0.13182590421]);\n * }\n *\n * function draw() {\n * // 'r' is the size of the image in Mandelbrot-space\n * mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n * quad(-1, -1, 1, -1, 1, 1, -1, 1);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(200);\n * normalMaterial();\n * sphere(40);\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(0);\n * rotateZ(frameCount * 0.01);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * //pass image as texture\n * texture(img);\n * box(200, 200, 200);\n * }\n *
\n * let pg;\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * pg = createGraphics(200, 200);\n * pg.textSize(75);\n * }\n *\n * function draw() {\n * background(0);\n * pg.background(255);\n * pg.text('hello!', 0, 100);\n * //pass image as texture\n * texture(pg);\n * rotateX(0.5);\n * noStroke();\n * plane(50);\n * }\n *
\n * let vid;\n * function preload() {\n * vid = createVideo('assets/fingers.mov');\n * vid.hide();\n * }\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(0);\n * //pass video frame as texture\n * texture(vid);\n * rect(-40, -40, 80, 80);\n * }\n *\n * function mousePressed() {\n * vid.loop();\n * }\n *
\n * let img;\n *\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * texture(img);\n * textureMode(NORMAL);\n * beginShape();\n * vertex(-50, -50, 0, 0);\n * vertex(50, -50, 1, 0);\n * vertex(50, 50, 1, 1);\n * vertex(-50, 50, 0, 1);\n * endShape();\n * }\n *
\n * let img;\n *\n * function preload() {\n * img = loadImage('assets/laDefense.jpg');\n * }\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * texture(img);\n * textureMode(NORMAL);\n * beginShape();\n * vertex(-50, -50, 0, 0);\n * vertex(50, -50, img.width, 0);\n * vertex(50, 50, img.width, img.height);\n * vertex(-50, 50, 0, img.height);\n * endShape();\n * }\n *
\n * let img;\n * function preload() {\n * img = loadImage('assets/rockies128.jpg');\n * }\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * textureWrap(MIRROR);\n * }\n *\n * function draw() {\n * background(0);\n *\n * let dX = mouseX;\n * let dY = mouseY;\n *\n * let u = lerp(1.0, 2.0, dX);\n * let v = lerp(1.0, 2.0, dY);\n *\n * scale(width / 2);\n *\n * texture(img);\n *\n * beginShape(TRIANGLES);\n * vertex(-1, -1, 0, 0, 0);\n * vertex(1, -1, 0, u, 0);\n * vertex(1, 1, 0, u, v);\n *\n * vertex(1, 1, 0, u, v);\n * vertex(-1, 1, 0, 0, v);\n * vertex(-1, -1, 0, 0, 0);\n * endShape();\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(0);\n * noStroke();\n * ambientLight(200);\n * ambientMaterial(70, 130, 230);\n * sphere(40);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(0);\n * noStroke();\n * ambientLight(50);\n * pointLight(250, 250, 250, 100, 100, 30);\n * specularMaterial(250);\n * sphere(40);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(0);\n * noStroke();\n * let locX = mouseX - width / 2;\n * let locY = mouseY - height / 2;\n * ambientLight(60, 60, 60);\n * pointLight(255, 255, 255, locX, locY, 50);\n * specularMaterial(250);\n * translate(-25, 0, 0);\n * shininess(1);\n * sphere(20);\n * translate(50, 0, 0);\n * shininess(20);\n * sphere(20);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n * function draw() {\n * background(204);\n * //move the camera away from the plane by a sin wave\n * camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);\n * plane(10, 10);\n * }\n *
\n * //drag the mouse to look around!\n * //you will see there's a vanishing point\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * perspective(PI / 3.0, width / height, 0.1, 500);\n * }\n * function draw() {\n * background(200);\n * orbitControl();\n * normalMaterial();\n *\n * rotateX(-0.3);\n * rotateY(-0.2);\n * translate(0, 0, -50);\n *\n * push();\n * translate(-15, 0, sin(frameCount / 30) * 95);\n * box(30);\n * pop();\n * push();\n * translate(15, 0, sin(frameCount / 30 + PI) * 95);\n * box(30);\n * pop();\n * }\n *
\n * //drag the mouse to look around!\n * //there's no vanishing point\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n * }\n * function draw() {\n * background(200);\n * orbitControl();\n * normalMaterial();\n *\n * rotateX(0.2);\n * rotateY(-0.2);\n * push();\n * translate(-15, 0, sin(frameCount / 30) * 65);\n * box(30);\n * pop();\n * push();\n * translate(15, 0, sin(frameCount / 30 + PI) * 65);\n * box(30);\n * pop();\n * }\n *
\n * let cam;\n * let delta = 0.01;\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * normalMaterial();\n * cam = createCamera();\n * // set initial pan angle\n * cam.pan(-0.8);\n * }\n *\n * function draw() {\n * background(200);\n *\n * // pan camera according to angle 'delta'\n * cam.pan(delta);\n *\n * // every 160 frames, switch direction\n * if (frameCount % 160 === 0) {\n * delta *= -1;\n * }\n *\n * rotateX(frameCount * 0.01);\n * translate(-100, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * }\n *
\n * let cam;\n * let delta = 0.01;\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * normalMaterial();\n * cam = createCamera();\n * // set initial tilt\n * cam.tilt(-0.8);\n * }\n *\n * function draw() {\n * background(200);\n *\n * // pan camera according to angle 'delta'\n * cam.tilt(delta);\n *\n * // every 160 frames, switch direction\n * if (frameCount % 160 === 0) {\n * delta *= -1;\n * }\n *\n * rotateY(frameCount * 0.01);\n * translate(0, -100, 0);\n * box(20);\n * translate(0, 35, 0);\n * box(20);\n * translate(0, 35, 0);\n * box(20);\n * translate(0, 35, 0);\n * box(20);\n * translate(0, 35, 0);\n * box(20);\n * translate(0, 35, 0);\n * box(20);\n * translate(0, 35, 0);\n * box(20);\n * }\n *
\n * let cam;\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * normalMaterial();\n * cam = createCamera();\n * }\n *\n * function draw() {\n * background(200);\n *\n * // look at a new random point every 60 frames\n * if (frameCount % 60 === 0) {\n * cam.lookAt(random(-100, 100), random(-50, 50), 0);\n * }\n *\n * rotateX(frameCount * 0.01);\n * translate(-100, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * }\n *
\n * // see the camera move along its own axes while maintaining its orientation\n * let cam;\n * let delta = 0.5;\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * normalMaterial();\n * cam = createCamera();\n * }\n *\n * function draw() {\n * background(200);\n *\n * // move the camera along its local axes\n * cam.move(delta, delta, 0);\n *\n * // every 100 frames, switch direction\n * if (frameCount % 150 === 0) {\n * delta *= -1;\n * }\n *\n * translate(-10, -10, 0);\n * box(50, 8, 50);\n * translate(15, 15, 0);\n * box(50, 8, 50);\n * translate(15, 15, 0);\n * box(50, 8, 50);\n * translate(15, 15, 0);\n * box(50, 8, 50);\n * translate(15, 15, 0);\n * box(50, 8, 50);\n * translate(15, 15, 0);\n * box(50, 8, 50);\n * }\n *
\n * // press '1' '2' or '3' keys to set camera position\n *\n * let cam;\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * normalMaterial();\n * cam = createCamera();\n * }\n *\n * function draw() {\n * background(200);\n *\n * // '1' key\n * if (keyIsDown(49)) {\n * cam.setPosition(30, 0, 80);\n * }\n * // '2' key\n * if (keyIsDown(50)) {\n * cam.setPosition(0, 0, 80);\n * }\n * // '3' key\n * if (keyIsDown(51)) {\n * cam.setPosition(-30, 0, 80);\n * }\n *\n * box(20);\n * }\n *
\n * let cam1, cam2;\n * let currentCamera;\n *\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * normalMaterial();\n *\n * cam1 = createCamera();\n * cam2 = createCamera();\n * cam2.setPosition(30, 0, 50);\n * cam2.lookAt(0, 0, 0);\n * cam2.ortho();\n *\n * // set variable for previously active camera:\n * currentCamera = 1;\n * }\n *\n * function draw() {\n * background(200);\n *\n * // camera 1:\n * cam1.lookAt(0, 0, 0);\n * cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\n *\n * // every 100 frames, switch between the two cameras\n * if (frameCount % 100 === 0) {\n * if (currentCamera === 1) {\n * setCamera(cam1);\n * currentCamera = 0;\n * } else {\n * setCamera(cam2);\n * currentCamera = 1;\n * }\n * }\n *\n * drawBoxes();\n * }\n *\n * function drawBoxes() {\n * rotateX(frameCount * 0.01);\n * translate(-100, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * translate(35, 0, 0);\n * box(20);\n * }\n *
\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(255);\n * push();\n * rotateZ(frameCount * 0.02);\n * rotateX(frameCount * 0.02);\n * rotateY(frameCount * 0.02);\n * fill(0, 0, 0);\n * box(50);\n * pop();\n * }\n *
\n * function setup() {\n * setAttributes('antialias', true);\n * createCanvas(100, 100, WEBGL);\n * }\n *\n * function draw() {\n * background(255);\n * push();\n * rotateZ(frameCount * 0.02);\n * rotateX(frameCount * 0.02);\n * rotateY(frameCount * 0.02);\n * fill(0, 0, 0);\n * box(50);\n * pop();\n * }\n *
\n * // press the mouse button to enable perPixelLighting\n * function setup() {\n * createCanvas(100, 100, WEBGL);\n * noStroke();\n * fill(255);\n * }\n *\n * var lights = [\n * { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n * { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n * { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n * { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n * { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n * { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n * ];\n *\n * function draw() {\n * var t = millis() / 1000 + 1000;\n * background(0);\n * directionalLight(color('#222'), 1, 1, 1);\n *\n * for (var i = 0; i < lights.length; i++) {\n * var light = lights[i];\n * pointLight(\n * color(light.c),\n * p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n * );\n * }\n *\n * specularMaterial(255);\n * sphere(width * 0.1);\n *\n * rotateX(t * 0.77);\n * rotateY(t * 0.83);\n * rotateZ(t * 0.91);\n * torus(width * 0.3, width * 0.07, 24, 10);\n * }\n *\n * function mousePressed() {\n * setAttributes('perPixelLighting', true);\n * noStroke();\n * fill(255);\n * }\n * function mouseReleased() {\n * setAttributes('perPixelLighting', false);\n * noStroke();\n * fill(255);\n * }\n *
\n * function setup() {\n * createCanvas(200, 200, WEBGL);\n * }\n *\n * function draw() {\n * background(0);\n * noStroke();\n * fill(100, 100, 240);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * box(75, 75, 75);\n * }\n *
\n * function setup() {\n * createCanvas(200, 200, WEBGL);\n * }\n *\n * function draw() {\n * background(0);\n * stroke(240, 150, 150);\n * fill(100, 100, 240);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * box(75, 75, 75);\n * }\n *
\n * function setup() {\n * createCanvas(200, 400, WEBGL);\n * setAttributes('antialias', true);\n * }\n *\n * function draw() {\n * background(0);\n * noStroke();\n * translate(0, -100, 0);\n * stroke(240, 150, 150);\n * fill(100, 100, 240);\n * push();\n * strokeWeight(8);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * sphere(75);\n * pop();\n * push();\n * translate(0, 200, 0);\n * strokeWeight(1);\n * rotateX(frameCount * 0.01);\n * rotateY(frameCount * 0.01);\n * sphere(75);\n * pop();\n * }\n *