p5.js

# Install globally
npm install -g p5-server

# Create a new sketch
p5 create my-sketch

# Run a server with live reload
p5 serve --open

# Run a sketch in split view mode
p5 serve sketch.js --theme split

# Create a screenshot of a sketch
p5 screenshot my-sketch.js

# Build a static site of p5.js sketches
p5 build --theme grid

# Run a server with live reload
p5 serve --open

# Run a sketch in split view mode
p5 serve sketch.js --theme split

# Create a screenshot of a sketch
p5 screenshot my-sketch.js

# Build a static site of p5.js sketches
p5 build --theme grid

// Include the library in your HTML
<script src="https://cdn.jsdelivr.net/gh/osteele/p5.libs/p5.layers/dist/p5.layers.min.js"></script>

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

function draw() {
  // Start drawing to a layer
  beginLayer();
  background(100);
  fill('blue');
  circle(width / 2, height / 2, 100);
  endLayer();

  // Create a named layer
  beginLayer('overlay');
  noFill();
  stroke('red');
  strokeWeight(3);
  rect(width / 4, height / 4, width / 2, height / 2);
  endLayer();

  // Draw all layers to the canvas
  drawLayers();
}

// Include the library in your HTML
<script src="https://cdn.jsdelivr.net/gh/osteele/p5.libs/p5.rotate-about/dist/p5.rotate-about.min.js"></script>

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
}

function draw() {
  background(220);

  // Rotate around a specific point (100, 200)
  // instead of around the canvas origin
  push();
  const angle = radians(frameCount);
  rotateAbout(angle, 100, 200);
  rect(100, 200, 50, 50);
  pop();

  // Scale around a specific point (300, 200)
  push();
  const scale = 1 + 0.5 * sin(frameCount / 30);
  scaleAbout(scale, 300, 200);
  rect(300, 200, 50, 50);
  pop();
}

// Include the library in your HTML
<script src="https://cdn.jsdelivr.net/gh/osteele/p5.libs/p5.vector-arguments/dist/p5.vector-arguments.min.js"></script>

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

function draw() {
  background(220);

  // Create a vector for the mouse position
  let mousePos = createVector(mouseX, mouseY);

  // Draw a circle at the mouse position using the vector
  fill('red');
  circle(mousePos, 30);

  // Create another vector and draw a rectangle
  let pos = createVector(width/2, height/2);
  fill('blue');
  rect(pos, 50, 50);

  // Draw a line between two vectors
  let start = createVector(0, 0);
  let end = createVector(mouseX, mouseY);
  line(start, end);
}