Example

function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}

Example

let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);

Example

function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}

Example

function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}

Deprecated:

• Yes

Example

var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]

Example

let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);

Example

let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);

Example

function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}

Example

print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]

Example

print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]

Example

function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"

Example

function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}

Example

function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}

Example

let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}

Example

function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}

Example

function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}

Example

function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}

Example

var d = day();
text('Current day: \n' + d, 5, 50);

Example

let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees

Example

function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

Example

// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}

Example

function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}

Example

var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);

Example

function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]

Example

var h = hour();
text('Current hour:\n' + h, 5, 50);

Example

print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]

Example

var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);

Example

function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}

Example

function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}

Example

let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}

Example

function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}

Example

let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}

Example

var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);

Example

var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);

Example

function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}

Example

var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);

Example

function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}

Example

var m = minute();
text('Current minute: \n' + m, 5, 50);

Example

var m = month();
text('Current month: \n' + m, 5, 50);

Example

var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}

Example

let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}

Example

let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}

Example

function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

Example

function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}

Example

function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}

Example

let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians

Example

for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word

Example

for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}

Example

randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}

Example

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}

Example

function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}

Example

function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

var s = second();
text('Current second: \n' + s, 5, 50);

Example

function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}

Example

function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}

Example

let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}

Example

function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}

Example

function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}

Example

var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);

Example

function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}

Example

function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}

Example

function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}

Example

print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]

Example

function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}

Example

let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}

Example

text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}

Example

textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);

Example

fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}

Example

textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);

Example

var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);

Example

print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]

Example

print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]

Example

var y = year();
text('Current year: \n' + y, 5, 50);

Example

function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}

Example

let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);

Example

function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}

Example

function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}

Deprecated:

• Yes

Example

var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]

Example

let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);

Example

let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);

Example

function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}

Example

print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]

Example

print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]

Example

function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"

Example

function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}

Example

function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}

Example

let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}

Example

function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}

Example

function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}

Example

function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}

Example

var d = day();
text('Current day: \n' + d, 5, 50);

Example

let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees

Example

function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

Example

// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}

Example

function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}

Example

var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);

Example

function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]

Example

var h = hour();
text('Current hour:\n' + h, 5, 50);

Example

print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]

Example

var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);

Example

function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}

Example

function draw() {
  background(200);
  let maxX = 2.8;
  let maxY = 1.5;

  // Compute the natural log of a value between 0 and maxX
  let xValue = map(mouseX, 0, width, 0, maxX);
  let yValue, y;
  if (xValue > 0) {
  // Cannot take the log of a negative number.
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);

    // Display the calculation occurring.
    let legend = 'log(' + nf(xValue, 1, 2) + ')\n= ' + nf(yValue, 1, 3);
    stroke(150);
    line(mouseX, y, mouseX, height);
    fill(0);
    text(legend, 5, 15);
    noStroke();
    ellipse(mouseX, y, 7, 7);
  }

  // Draw the log(x) curve,
  // over the domain of x from 0 to maxX
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, maxX);
    yValue = log(xValue);
    y = map(yValue, -maxY, maxY, height, 0);
    vertex(x, y);
  }
  endShape();
  line(0, 0, 0, height);
  line(0, height / 2, width, height / 2);
}

Example

let x = 0;
function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}

Example

function setup() {
  let x1 = 20;
  let x2 = 80;
  let y1 = 30;
  let y2 = 70;

  line(0, 0, x1, y1);
  print(mag(x1, y1)); // Prints "36.05551275463989"
  line(0, 0, x2, y1);
  print(mag(x2, y1)); // Prints "85.44003745317531"
  line(0, 0, x1, y2);
  print(mag(x1, y2)); // Prints "72.80109889280519"
  line(0, 0, x2, y2);
  print(mag(x2, y2)); // Prints "106.3014581273465"
}

Example

let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

function setup() {
  noStroke();
}

function draw() {
  background(204);
  let x1 = map(mouseX, 0, width, 25, 75);
  ellipse(x1, 25, 25, 25);
  //This ellipse is constrained to the 0-100 range
  //after setting withinBounds to true
  let x2 = map(mouseX, 0, width, 0, 100, true);
  ellipse(x2, 75, 25, 25);
}

Example

var string = 'Hello p5js*!';
var regexp = 'p5js\\*';
var m = match(string, regexp);
text(m, 5, 50);

Example

var string = 'Hello p5js*! Hello world!';
var regexp = 'Hello';
matchAll(string, regexp);

Example

function setup() {
  // Change the elements in the array and run the sketch
  // to show how max() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Maximum value in the array.
  textSize(32);
  text(max(numArray), maxX, maxY);
}

Example

var millisecond = millis();
text('Milliseconds \nrunning: \n' + millisecond, 5, 40);

Example

function setup() {
  // Change the elements in the array and run the sketch
  // to show how min() works!
  let numArray = [2, 1, 5, 4, 8, 9];
  fill(0);
  noStroke();
  text('Array Elements', 0, 10);
  // Draw all numbers in the array
  let spacing = 15;
  let elemsY = 25;
  for (let i = 0; i < numArray.length; i++) {
    text(numArray[i], i * spacing, elemsY);
  }
  let maxX = 33;
  let maxY = 80;
  // Draw the Minimum value in the array.
  textSize(32);
  text(min(numArray), maxX, maxY);
}

Example

var m = minute();
text('Current minute: \n' + m, 5, 50);

Example

var m = month();
text('Current month: \n' + m, 5, 50);

Example

var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  text(nf(num1, 4, 2), 10, 30);
  text(nf(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

function setup() {
  background(200);
  var num = 11253106.115;
  var numArr = [1, 1, 2];

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfc(num, 4), 10, 30);
  text(nfc(numArr, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

function setup() {
  background(200);
  var num1 = 11253106.115;
  var num2 = -11253106.115;

  noStroke();
  fill(0);
  textSize(12);

  // Draw formatted numbers
  text(nfp(num1, 4, 2), 10, 30);
  text(nfp(num2, 4, 2), 10, 80);

  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

var myFont;
function preload() {
  myFont = loadFont('assets/fonts/inconsolata.ttf');
}
function setup() {
  background(200);
  var num1 = 321;
  var num2 = -1321;

  noStroke();
  fill(0);
  textFont(myFont);
  textSize(22);

  // nfs() aligns num1 (positive number) with num2 (negative number) by
  // adding a blank space in front of the num1 (positive number)
  // [left = 4] in num1 add one 0 in front, to align the digits with num2
  // [right = 2] in num1 and num2 adds two 0's after both numbers
  // To see the differences check the example of nf() too.
  text(nfs(num1, 4, 2), 10, 30);
  text(nfs(num2, 4, 2), 10, 80);
  // Draw dividing line
  stroke(120);
  line(0, 50, width, 50);
}

Example

function setup() {
  noCursor();
}

function draw() {
  background(200);
  ellipse(mouseX, mouseY, 10, 10);
}

Example

let xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + 0.01;
  let n = noise(xoff) * width;
  line(n, 0, n, height);
}

let noiseScale=0.02;

function draw() {
  background(0);
  for (let x=0; x < width; x++) {
    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
    stroke(noiseVal*255);
    line(x, mouseY+noiseVal*80, x, height);
  }
}

Example

let noiseVal;
let noiseScale = 0.02;

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(0);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width / 2; x++) {
      noiseDetail(2, 0.2);
      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
      noiseDetail(8, 0.65);
      noiseVal = noise(
        (mouseX + x + width / 2) * noiseScale,
        (mouseY + y) * noiseScale
      );
      stroke(noiseVal * 255);
      point(x + width / 2, y);
    }
  }
}

Example

function setup() {
  createCanvas(100, 100);
  background(200);
  noLoop();
}

function draw() {
  line(10, 10, 90, 90);
}

let x = 0;
function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(204);
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  line(x, 0, x, height);
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

Example

function draw() {
  background(200);
  let currentNum = mouseX;
  let lowerBound = 0;
  let upperBound = width; //100;
  let normalized = norm(currentNum, lowerBound, upperBound);
  let lineY = 70;
  line(0, lineY, width, lineY);
  //Draw an ellipse mapped to the non-normalized value.
  noStroke();
  fill(50);
  let s = 7; // ellipse size
  ellipse(currentNum, lineY, s, s);

  // Draw the guide
  let guideY = lineY + 15;
  text('0', 0, guideY);
  textAlign(RIGHT);
  text('100', width, guideY);

  // Draw the normalized value
  textAlign(LEFT);
  fill(0);
  textSize(32);
  let normalY = 40;
  let normalX = 20;
  text(normalized, normalX, normalY);
}

Example

function setup() {
  //Exponentially increase the size of an ellipse.
  let eSize = 3; // Original Size
  let eLoc = 10; // Original Location

  ellipse(eLoc, eLoc, eSize, eSize);

  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));

  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));

  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));
}

Example

let deg = 45.0;
let rad = radians(deg);
print(deg + ' degrees is ' + rad + ' radians');
// Prints: 45 degrees is 0.7853981633974483 radians

Example

for (let i = 0; i < 100; i++) {
  let r = random(50);
  stroke(r * 5);
  line(50, i, 50 + r, i);
}

for (let i = 0; i < 100; i++) {
  let r = random(-50, 50);
  line(50, i, 50 + r, i);
}

// Get a random element from an array using the random(Array) syntax
let words = ['apple', 'bear', 'cat', 'dog'];
let word = random(words); // select random word
text(word, 10, 50); // draw the word

Example

for (let y = 0; y < 100; y++) {
  let x = randomGaussian(50, 15);
  line(50, y, x, y);
}

let distribution = new Array(360);

function setup() {
  createCanvas(100, 100);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, 15));
  }
}

function draw() {
  background(204);

  translate(width / 2, width / 2);

  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    stroke(0);
    let dist = abs(distribution[i]);
    line(0, 0, dist, 0);
  }
}

Example

randomSeed(99);
for (let i = 0; i < 100; i++) {
  let r = random(0, 255);
  stroke(r);
  line(i, 0, i, 100);
}

Example

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  line(x, 0, x, height);
}

function mousePressed() {
  x += 1;
  redraw();
}

let x = 0;

function setup() {
  createCanvas(100, 100);
  noLoop();
}

function draw() {
  background(204);
  x += 1;
  line(x, 0, x, height);
}

function mousePressed() {
  redraw(5);
}

Example

function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A','B','C']

  reverse(myArray);
  print(myArray); // ['C','B','A']
}

Example

function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  // Round the mapped number.
  let bx = round(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

var s = second();
text('Current second: \n' + s, 5, 50);

Example

function setup() {
  var myArray = ['A', 'B', 'C'];
  print(myArray); // ['A', 'B', 'C']
  var newArray = shorten(myArray);
  print(myArray); // ['A','B','C']
  print(newArray); // ['A','B']
}

Example

function setup() {
  var regularArr = ['ABC', 'def', createVector(), TAU, Math.E];
  print(regularArr);
  shuffle(regularArr, true); // force modifications to passed array
  print(regularArr);

  // By default shuffle() returns a shuffled cloned array:
  var newArr = shuffle(regularArr);
  print(regularArr);
  print(newArr);
}

Example

let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}

Example

function setup() {
  var words = ['banana', 'apple', 'pear', 'lime'];
  print(words); // ['banana', 'apple', 'pear', 'lime']
  var count = 4; // length of array

  words = sort(words, count);
  print(words); // ['apple', 'banana', 'lime', 'pear']
}

function setup() {
  var numbers = [2, 6, 1, 5, 14, 9, 8, 12];
  print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]
  var count = 5; // Less than the length of the array

  numbers = sort(numbers, count);
  print(numbers); // [1,2,5,6,14,9,8,12]
}

Example

function setup() {
  var myArray = [0, 1, 2, 3, 4];
  var insArray = ['A', 'B', 'C'];
  print(myArray); // [0, 1, 2, 3, 4]
  print(insArray); // ['A','B','C']

  splice(myArray, insArray, 3);
  print(myArray); // [0,1,2,'A','B','C',3,4]
}

Example

var names = 'Pat,Xio,Alex';
var splitString = split(names, ',');
text(splitString[0], 5, 30);
text(splitString[1], 5, 50);
text(splitString[2], 5, 70);

Example

function setup() {
  var myStr = 'Mango, Banana, Lime';
  var myStrArr = splitTokens(myStr, ',');

  print(myStrArr); // prints : ["Mango"," Banana"," Lime"]
}

Example

function draw() {
  background(200);
  let eSize = 7;
  let x1 = map(mouseX, 0, width, 0, 10);
  let y1 = 80;
  let x2 = sq(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  let spacing = 15;
  noStroke();
  fill(0);
  text('x = ' + x1, 0, y1 + spacing);
  text('sq(x) = ' + x2, 0, y2 + spacing);
}

Example

function draw() {
  background(200);
  let eSize = 7;
  let x1 = mouseX;
  let y1 = 80;
  let x2 = sqrt(x1);
  let y2 = 20;

  // Draw the non-squared.
  line(0, y1, width, y1);
  ellipse(x1, y1, eSize, eSize);

  // Draw the squared.
  line(0, y2, width, y2);
  ellipse(x2, y2, eSize, eSize);

  // Draw dividing line.
  stroke(100);
  line(0, height / 2, width, height / 2);

  // Draw text.
  noStroke();
  fill(0);
  let spacing = 15;
  text('x = ' + x1, 0, y1 + spacing);
  text('sqrt(x) = ' + x2, 0, y2 + spacing);
}

Example

print(str('10')); // "10"
print(str(10.31)); // "10.31"
print(str(-10)); // "-10"
print(str(true)); // "true"
print(str(false)); // "false"
print(str([true, '10.3', 9.8])); // [ "true", "10.3", "9.8" ]

Example

function setup() {
  var myArray = [1, 2, 3, 4, 5];
  print(myArray); // [1, 2, 3, 4, 5]

  var sub1 = subset(myArray, 0, 3);
  var sub2 = subset(myArray, 2, 2);
  print(sub1); // [1,2,3]
  print(sub2); // [3,4]
}

Example

let a = 0.0;
let inc = TWO_PI / 50.0;
for (let i = 0; i < 100; i = i + 2) {
  line(i, 50, i, 50 + tan(a) * 2.0);
  a = a + inc;
}

Example

text('word', 10, 30);
fill(0, 102, 153);
text('word', 10, 60);
fill(0, 102, 153, 51);
text('word', 10, 90);

let s = 'The quick brown fox jumped over the lazy dog.';
fill(50);
text(s, 10, 10, 70, 80); // Text wraps within text box

avenir;
function setup() {
  avenir = loadFont('assets/Avenir.otf');
  textFont(avenir);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw() {
  background(0);
  text('p5.js', 0, 0);
}

Example

textSize(16);
textAlign(RIGHT);
text('ABCD', 50, 30);
textAlign(CENTER);
text('EFGH', 50, 50);
textAlign(LEFT);
text('IJKL', 50, 70);

textSize(16);
strokeWeight(0.5);

line(0, 12, width, 12);
textAlign(CENTER, TOP);
text('TOP', 0, 12, width);

line(0, 37, width, 37);
textAlign(CENTER, CENTER);
text('CENTER', 0, 37, width);

line(0, 62, width, 62);
textAlign(CENTER, BASELINE);
text('BASELINE', 0, 62, width);

line(0, 87, width, 87);
textAlign(CENTER, BOTTOM);
text('BOTTOM', 0, 87, width);

Example

fill(0);
textSize(12);
textFont('Georgia');
text('Georgia', 12, 30);
textFont('Helvetica');
text('Helvetica', 12, 60);

let fontRegular, fontItalic, fontBold;
function setup() {
  fontRegular = loadFont('assets/Regular.otf');
  fontItalic = loadFont('assets/Italic.ttf');
  fontBold = loadFont('assets/Bold.ttf');
  background(210);
  fill(0);
  textFont(fontRegular);
  text('Font Style Normal', 10, 30);
  textFont(fontItalic);
  text('Font Style Italic', 10, 50);
  textFont(fontBold);
  text('Font Style Bold', 10, 70);
}

Example

textSize(28);

let aChar = 'P';
let cWidth = textWidth(aChar);
text(aChar, 0, 40);
line(cWidth, 0, cWidth, 50);

let aString = 'p5.js';
let sWidth = textWidth(aString);
text(aString, 0, 85);
line(sWidth, 50, sWidth, 100);

Example

var string = trim('  No new lines\n   ');
text(string + ' here', 2, 50);

Example

print(unchar('A')); // 65
print(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]
print(unchar(split('ABC', ''))); // [ 65, 66, 67 ]

Example

print(unhex('A')); // 10
print(unhex('FF')); // 255
print(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]

Example

var y = year();
text('Current year: \n' + y, 5, 50);

Example

function setup() {
  let x = -3;
  let y = abs(x);

  print(x); // -3
  print(y); // 3
}

Example

let a = PI;
let c = cos(a);
let ac = acos(c);
// Prints: "3.1415927 : -1.0 : 3.1415927"
print(a + ' : ' + c + ' : ' + ac);

let a = PI + PI / 4.0;
let c = cos(a);
let ac = acos(c);
// Prints: "3.926991 : -0.70710665 : 2.3561943"
print(a + ' : ' + c + ' : ' + ac);

Example

function draw() {
  background(204);
  angleMode(DEGREES); // Change the mode to DEGREES
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  translate(width / 2, height / 2);
  push();
  rotate(a);
  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees
  pop();
  angleMode(RADIANS); // Change the mode to RADIANS
  rotate(a); // variable a stays the same
  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians
}

Example

function setup() {
  var myArray = ['Mango', 'Apple', 'Papaya'];
  print(myArray); // ['Mango', 'Apple', 'Papaya']

  append(myArray, 'Peach');
  print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']
}

Deprecated:

• Yes

Example

var src = ['A', 'B', 'C'];
var dst = [1, 2, 3];
var srcPosition = 1;
var dstPosition = 0;
var length = 2;

print(src); // ['A', 'B', 'C']
print(dst); // [ 1 ,  2 ,  3 ]

arrayCopy(src, srcPosition, dst, dstPosition, length);
print(dst); // ['B', 'C', 3]

Example

let a = PI + PI / 3;
let s = sin(a);
let as = asin(s);
// Prints: "1.0471976 : 0.86602545 : 1.0471976"
print(a + ' : ' + s + ' : ' + as);

let a = PI + PI / 3.0;
let s = sin(a);
let as = asin(s);
// Prints: "4.1887903 : -0.86602545 : -1.0471976"
print(a + ' : ' + s + ' : ' + as);

Example

let a = PI + PI / 3;
let t = tan(a);
let at = atan(t);
// Prints: "1.0471976 : 1.7320509 : 1.0471976"
print(a + ' : ' + t + ' : ' + at);

let a = PI + PI / 3.0;
let t = tan(a);
let at = atan(t);
// Prints: "4.1887903 : 1.7320513 : 1.0471977"
print(a + ' : ' + t + ' : ' + at);

Example

function draw() {
  background(204);
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  rect(-30, -5, 60, 10);
}

Example

print(boolean(0)); // false
print(boolean(1)); // true
print(boolean('true')); // true
print(boolean('abcd')); // false
print(boolean([0, 12, 'true'])); // [false, true, false]

Example

print(byte(127)); // 127
print(byte(128)); // -128
print(byte(23.4)); // 23
print(byte('23.4')); // 23
print(byte('hello')); // NaN
print(byte(true)); // 1
print(byte([0, 255, '100'])); // [0, -1, 100]

Example

function draw() {
  background(200);
  // map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the ceiling of the mapped number.
  let bx = ceil(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

print(char(65)); // "A"
print(char('65')); // "A"
print(char([65, 66, 67])); // [ "A", "B", "C" ]
print(join(char([65, 66, 67]), '')); // "ABC"

Example

function setup() {
  var arr1 = ['A', 'B', 'C'];
  var arr2 = [1, 2, 3];

  print(arr1); // ['A','B','C']
  print(arr2); // [1,2,3]

  var arr3 = concat(arr1, arr2);

  print(arr1); // ['A','B','C']
  print(arr2); // [1, 2, 3]
  print(arr3); // ['A','B','C', 1, 2, 3]
}

Example

function draw() {
  background(200);

  let leftWall = 25;
  let rightWall = 75;

  // xm is just the mouseX, while
  // xc is the mouseX, but constrained
  // between the leftWall and rightWall!
  let xm = mouseX;
  let xc = constrain(mouseX, leftWall, rightWall);

  // Draw the walls.
  stroke(150);
  line(leftWall, 0, leftWall, height);
  line(rightWall, 0, rightWall, height);

  // Draw xm and xc as circles.
  noStroke();
  fill(150);
  ellipse(xm, 33, 9, 9); // Not Constrained
  fill(0);
  ellipse(xc, 66, 9, 9); // Constrained
}

Example

let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);
  a = a + inc;
}

Example

function setup() {
  let myDictionary = createNumberDict(100, 42);
  print(myDictionary.hasKey(100)); // logs true to console

  let anotherDictionary = createNumberDict({ 200: 84 });
  print(anotherDictionary.hasKey(200)); // logs true to console
}

Example

function setup() {
  let myDictionary = createStringDict('p5', 'js');
  print(myDictionary.hasKey('p5')); // logs true to console

  let anotherDictionary = createStringDict({ happy: 'coding' });
  print(anotherDictionary.hasKey('happy')); // logs true to console
}

Example

function setup() {
  createCanvas(100, 100, WEBGL);
  noStroke();
  fill(255, 102, 204);
}

function draw() {
  background(255);
  pointLight(color(255), createVector(sin(millis() / 1000) * 20, -40, -10));
  scale(0.75);
  sphere();
}

Example

var d = day();
text('Current day: \n' + d, 5, 50);

Example

let rad = PI / 4;
let deg = degrees(rad);
print(rad + ' radians is ' + deg + ' degrees');
// Prints: 0.7853981633974483 radians is 45 degrees

Example

function setup() {
  let density = displayDensity();
  pixelDensity(density);
  createCanvas(100, 100);
  background(200);
  ellipse(width / 2, height / 2, 50, 50);
}

Example

// Move your mouse inside the canvas to see the
// change in distance between two points!
function draw() {
  background(200);
  fill(0);

  let x1 = 10;
  let y1 = 90;
  let x2 = mouseX;
  let y2 = mouseY;

  line(x1, y1, x2, y2);
  ellipse(x1, y1, 7, 7);
  ellipse(x2, y2, 7, 7);

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = int(dist(x1, y1, x2, y2));

  // Let's write d along the line we are drawing!
  push();
  translate((x1 + x2) / 2, (y1 + y2) / 2);
  rotate(atan2(y2 - y1, x2 - x1));
  text(nfc(d, 1), 0, -5);
  pop();
  // Fancy!
}

Example

function draw() {
  background(200);

  // Compute the exp() function with a value between 0 and 2
  let xValue = map(mouseX, 0, width, 0, 2);
  let yValue = exp(xValue);

  let y = map(yValue, 0, 8, height, 0);

  let legend = 'exp (' + nfc(xValue, 3) + ')\n= ' + nf(yValue, 1, 4);
  stroke(150);
  line(mouseX, y, mouseX, height);
  fill(0);
  text(legend, 5, 15);
  noStroke();
  ellipse(mouseX, y, 7, 7);

  // Draw the exp(x) curve,
  // over the domain of x from 0 to 2
  noFill();
  stroke(0);
  beginShape();
  for (let x = 0; x < width; x++) {
    xValue = map(x, 0, width, 0, 2);
    yValue = exp(xValue);
    y = map(yValue, 0, 8, height, 0);
    vertex(x, y);
  }

  endShape();
  line(0, 0, 0, height);
  line(0, height - 1, width, height - 1);
}

Example

var str = '20';
var diameter = float(str);
ellipse(width / 2, height / 2, diameter, diameter);

Example

function draw() {
  background(200);
  //map, mouseX between 0 and 5.
  let ax = map(mouseX, 0, 100, 0, 5);
  let ay = 66;

  //Get the floor of the mapped number.
  let bx = floor(map(mouseX, 0, 100, 0, 5));
  let by = 33;

  // Multiply the mapped numbers by 20 to more easily
  // see the changes.
  stroke(0);
  fill(0);
  line(0, ay, ax * 20, ay);
  line(0, by, bx * 20, by);

  // Reformat the float returned by map and draw it.
  noStroke();
  text(nfc(ax, 2), ax, ay - 5);
  text(nfc(bx, 1), bx, by - 5);
}

Example

print(hex(255)); // "000000FF"
print(hex(255, 6)); // "0000FF"
print(hex([0, 127, 255], 6)); // [ "000000", "00007F", "0000FF" ]

Example

var h = hour();
text('Current hour:\n' + h, 5, 50);

Example

print(int('10')); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([false, true, '10.3', 9.8])); // [0, 1, 10, 9]

Example

var array = ['Hello', 'world!'];
var separator = ' ';
var message = join(array, separator);
text(message, 5, 50);

Example

function setup() {
  background(200);
  let a = 20;
  let b = 80;
  let c = lerp(a, b, 0.2);
  let d = lerp(a, b, 0.5);
  let e = lerp(a, b, 0.8);

  let y = 50;

  strokeWeight(5);
  stroke(0); // Draw the original points in black
  point(a, y);
  point(b, y);

  stroke(100); // Draw the lerp points in gray
  point(c, y);
  point(d, y);
  point(e, y);
}