Create
shape ๐ŸŒฟ Intermediate

vertex()

The `vertex()` function in p5.js is a powerful tool for creating custom shapes and paths by defining points in a 2D space. Creative coders use `vertex()` to build intricate designs, like the edges of polygons or the points of complex curves. Imagine drawing freeform shapes by connecting the dotsโ€”each vertex is a pivotal point that shapes the final artwork.

๐Ÿ“– p5.js Reference โ†’

๐Ÿง  See The Whole Picture

Imagine a blank canvas like a graph paper. Each `vertex()` call plants a dot at the specified coordinates. When you connect these dots using `beginShape()` and `endShape()`, you create lines and shapes based on the paths between these dots. The more vertices you add, the more detailed and complex your shape can become, just like creating a detailed drawing by connecting points.

๐Ÿ“– Visual Learner's Guide

The Big Picture:

Running this code would visually create a rectangle on the canvas by connecting four points.

Visual Analogy:

Think of it as placing dots on a piece of stringโ€”each dot is a vertex, and when you connect them, you form a shape.

The Numbers Decoded:

x=100 means 100 pixels from the LEFT edge. y=100 means 100 pixels from the TOP. The rectangle is created by connecting these vertices.

Connection Map:

The `beginShape()` starts the process, and `endShape(CLOSE)` connects back to the first point, completing the shape.

Common Gotcha:

Remember that the shape will only appear if you also use `beginShape()` and `endShape()` around your vertex calls.

๐Ÿ”„ How It Works

This diagram illustrates the flow of using the `vertex()` function in your code to create visual output on the canvas.

๐Ÿ“ Syntax

๐Ÿ“– How to Read This

Read `vertex(x, y)` as: 'Place a point at coordinates x and y on the canvas.' The parentheses are like a delivery box - you hand the function the coordinates it needs to draw that point.

vertex(param1, param2, ...)

Example: vertex(200, 150, 80)

๐Ÿ”€ Different Ways to Call It

vertex(value)

Use this form when you want to define a single point in a shape.

vertex(128) โ†’ This would place a single vertex at (128, 0) on the canvas, but without a defined shape, it won't be visible.
vertex(v1, v2, v3)

Use this form to define a vertex with specific coordinates (x, y) and an optional z value for 3D shapes.

vertex(255, 100, 50) โ†’ This places a vertex at (255, 100) on the canvas, contributing to a shape based on the connected vertices.

โ†ฉ๏ธ What It Returns

Type: void

The `vertex()` function does not hand anything back; it directly influences the drawing on the canvas, like instructing an artist to add a dot on a canvas.

๐ŸŽ›๏ธ Mode-Dependent Behavior

The behavior of `vertex()` is influenced by the current shape mode. It works within `beginShape()` and `endShape()` to create custom shapes. The shape mode (like `LINES`, `TRIANGLES`, and `POINTS`) determines how the vertices connect.

๐Ÿ“ฅ What Goes In

You provide `vertex()` two numbers for each point: x and y, which are like GPS coordinates telling it where to place the vertex on the canvas. The first number determines how far to move right or left, while the second number tells it how far to move up or down.

๐Ÿ“ค What Happens

When you call `vertex()`, it adds a point at the specified coordinates on the canvas. If placed within `beginShape()` and `endShape()`, these points connect to form a shape, making it a building block for more complex designs.

Parameters

x Number required

Number represents a position on the horizontal axis of the canvas. Think of it as moving left or right from the origin.

Controls the horizontal position of the vertex. Typical values range from 0 (left edge) to the width of the canvas. At 0, the vertex is all the way to the left; at max, itโ€™s at the right.

Range: 0 to canvas width

Examples: 0 โ†’ The vertex is at the left edge of the canvas. 200 โ†’ The vertex is halfway across a 400px wide canvas. 400 โ†’ The vertex is at the right edge of the canvas.
y Number required

Number represents a position on the vertical axis of the canvas. Think of it as moving up or down from the origin.

Controls the vertical position of the vertex. Typical values range from 0 (top edge) to the height of the canvas. At 0, the vertex is at the top; at max, itโ€™s at the bottom.

Range: 0 to canvas height

Examples: 0 โ†’ The vertex is at the top edge of the canvas. 200 โ†’ The vertex is halfway down a 400px tall canvas. 400 โ†’ The vertex is at the bottom edge of the canvas.

๐Ÿ’ก How Parameters Work Together

Think of the x and y parameters as coordinates on a map, where x is your east-west location and y is your north-south location. When you set these values, you precisely place a dot in a 2D space. The shape will change based on how many vertices you connect together with `beginShape()` and `endShape()`, creating everything from simple triangles to complex freeform shapes.

๐Ÿ’ป Working Example

// Complete working example with comments
function setup() {
  createCanvas(400, 400);
  noFill(); // No fill for the shape
  stroke(0); // Set stroke color to black
  beginShape(); // Start defining a shape
  vertex(100, 100); // First vertex
  vertex(300, 100); // Second vertex
  vertex(300, 300); // Third vertex
  vertex(100, 300); // Fourth vertex
  endShape(CLOSE); // Complete the shape and connect back to the start
}
Try This Code โ†’

โš™๏ธ How It Works

When you call `vertex()`, p5.js places a point at the specified (x, y) coordinates. During the rendering cycle, if these vertices are encapsulated between `beginShape()` and `endShape()`, p5.js connects these points according to the active shape mode, drawing lines between each vertex in the order they were defined. The canvas is updated to reflect these changes, rendering the shape visually.

๐ŸŽ“ Learn Prompt Patterns

These patterns help you write better prompts for ANY function:

๐ŸŽญ Persona Pattern

Tell the AI to act as a specific type of creator

"Act as a creative coder making generative art. Use vertex() to create a dynamic landscape."

Why it works: Giving the AI a persona helps it understand the CONTEXT and style you want.

๐Ÿ“‹ Recipe Pattern

Ask for step-by-step instructions

"Give me step-by-step code to use vertex() to create a star shape. Start simple, then add complexity."

Why it works: Breaking down into steps helps you understand each part and learn incrementally.

๐Ÿ“ Template Pattern

Provide a structure for the AI to fill in

"Use this template: setup creates canvas, draw uses vertex() with specific parameters to make an abstract shape."

Why it works: Templates give the AI clear constraints, resulting in more predictable output.

๐Ÿ”„ Refinement Pattern

Start simple and iterate.

"Start with a basic vertex() example. Then I'll ask you to add color, animation, interaction."

Why it works: Building up gradually helps you understand each addition and not get overwhelmed.

๐ŸŽฏ Direct Prompts - Name the Function

Tell the AI exactly which function to use:

Direct

"Use vertex() to create a complex star shape with colors."

๐Ÿ’ก Why this is good: This prompt gives specific visual goals while allowing creative freedom.

๐Ÿ“š What you learn: Learn how to combine vertex() with colors and shapes.

๐Ÿ“ Sample Output: 
// Complete working code example
Direct

"Create a polygon using vertex() with at least five sides."

๐Ÿ’ก Why this is good: Provides a clear step-by-step approach to building a shape.

๐Ÿ“š What you learn: Understand how to define multiple vertices to create polygons.

๐Ÿ“ Sample Output: 
// Complete code

๐Ÿ”ฎ Indirect Prompts - Describe What You Want

Don't name the function - see if the AI figures out to use vertex():

Indirect

"Describe the shape you want without naming vertex() - let AI figure out how to create it."

๐Ÿ’ก Why this is good: Encourages you to focus on the visual outcome rather than the function name.

๏ฟฝ What you learn: Learn to express visual intent in your prompts.

๐Ÿ“ Sample Output: 
// Code showing AI chose vertex()

๐Ÿ–ผ๏ธ See It In Real Sketches

How vertex() is used in actual gallery sketches:

AI Maze Generator

In the maze generator, `vertex()` is used to create the walls of the maze by connecting points based on the recursive backtracking algorithm.

// Relevant code showing the function in context
vertex(x, y); // Connects the maze walls...
View Sketch โ†’

AI Kaleidoscope Generator

Here, `vertex()` is employed to create symmetrical patterns by adding multiple vertices at calculated positions.

// Relevant code showing the function in context
vertex(angle * cos(theta), angle * sin(theta)); // Create points for the kaleidoscope...
View Sketch โ†’

๐Ÿ”€ Fun Function Combinations

Try asking the AI to combine vertex() with these:

vertex() + beginShape() + endShape()

โ†’ Creates a custom shape by connecting multiple vertices.

Try: "Create a custom abstract shape using vertex() with multiple points."

// 5-10 lines showing the combination
function draw() {
  beginShape();
  vertex(50, 50);
  vertex(150, 50);
  vertex(100, 100);
  endShape(CLOSE);
}

โš ๏ธ Common Mistakes & Fixes

โŒ Mistake: Forgetting to use beginShape() and endShape()

๐Ÿค” Why it's wrong: Without these functions, the vertices won't form a visible shape.

โœ… Fix: Wrap vertex() calls with beginShape() and endShape() to create a shape.

๐Ÿ—บ๏ธ Learning Path

๐Ÿ’ก Project Ideas

  • Create a dynamic polygon generator using vertex()
  • Design a complex logo with vertex()

๐Ÿค– Ask xelsed-alpha6 to Explain

Your prompt:

"Explain what vertex() does in p5.js"

Try this prompt in p5js.AI to see how the AI explains it!

Try in p5js.AI โ†’

๐Ÿ’ก Prompt AI to Write Code Using vertex()

Example prompt:

"Create something using vertex()"

๐Ÿ”ง Ask AI to Help Debug

When stuck, try:

"My vertex() isn't working, help me debug"

โœจ Creative Combinations with AI

Ask AI to combine functions:

"Combine vertex() with other functions for interesting effects"

Ready to Try vertex()?

Open p5js.AI and ask the AI to help you use vertex() in your own creative project.

Start Coding with AI โ†’