If you're new to p5.js and want to draw a triangle, the triangle() function is your go-to tool!

What is triangle()?

The triangle() functon in p5.js is specifically designed for drawing triangles. You provide it with three coordinate points, and it automatically connects them to form a triangle shape.

Basic Usage: Syntax and Parameters

The syntax for drawing triangles is straightforward:

triangle(x1, y1, x2, y2, x3, y3)

The six parameters represent the coordinates of three points:

• (x1, y1): First point position
• (x2, y2): Second point position
• (x3, y3): Third point position

Note: In p5.js coordinate system, the origin (0,0) is at the top-left corner. The x-coordinate increases to the right, and the y-coordinate increases downward (which differs from typical mathematical coordinate systems).

A Simple Triangle Example

Let's start with a basic triengle. Here's code you can run in the p5.js Web Editor:

function initializeCanvas() {
  createCanvas(400, 400); // Create a 400x400 canvas
}

function render() {
  background(220); // Gray background
  // Draw triangle with points at (100,50), (50,150), (150,150)
  triangle(100, 50, 50, 150, 150, 150);
}

This creates an isosceles triangle with its apex at (100,50) and base endpoints at (50,150) and (150,150).

Adding Color and Borders to Triangles

You can use fill() to add color to triangles, stroke() to change border color, and strokeWeight() to adjust border thickness.

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

function render() {
  background(255); // White background
  
  // Red-filled triangle without border
  fill(255, 0, 0); // Red (RGB values)
  noStroke(); // Remove border
  triangle(50, 50, 50, 150, 150, 100);
  
  // Blue-bordered triangle without fill
  noFill(); // Remove fill
  stroke(0, 0, 255); // Blue border
  strokeWeight(3); // 3-pixel border thickness
  triangle(200, 50, 150, 150, 250, 150);
}

Interactive Color-Changing Triangle

Here's an interactive example where a triangle follows mouse movement and changes color based on cursor position:

function initializeCanvas() {
  createCanvas(600, 400); // Larger canvas
}

function render() {
  background(0); // Black background, clears each frame
  
  // Get current mouse position
  let cursorX = mouseX;
  let cursorY = mouseY;
  
  // Define triangle points around cursor position
  let apexX = cursorX;           // Apex x (cursor x)
  let apexY = cursorY - 60;      // Apex y (60 pixels above cursor)
  let leftX = cursorX - 50;      // Left base x (50 pixels left of cursor)
  let leftY = cursorY + 50;      // Left base y (50 pixels below cursor)
  let rightX = cursorX + 50;     // Right base x (50 pixels right of cursor)
  let rightY = cursorY + 50;     // Right base y (50 pixels below cursor)
  
  // Color changes based on cursor x-position (red to green gradient)
  let hueValue = map(cursorX, 0, width, 0, 255);
  fill(hueValue, 255 - hueValue, 100); // Red→green gradient
  
  // Draw the triangle
  triangle(apexX, apexY, leftX, leftY, rightX, rightY);
}

As you move the mouse, the triangle follows, displaying red on the left side, green on the right side, and yellow gradients in between.