event 🌱 Beginner

`key()`

The key() function in p5.js allows you to detect which key is currently being pressed on the keyboard. Creative coders can use this function to create interactive applications, like games or generative art that responds to user input. For instance, you could use key() to change shapes or colors in real-time based on which key a player presses, enhancing the engagement of the audience.

📖 p5.js Reference →

🧠 See The Whole Picture

Imagine your keyboard as a large board filled with buttons. When you press a key, it's like pushing a specific button down on that board. The key() function is your assistant that observes which button was pressed, capturing the action so you can use it to animate or alter your artwork based on user input. Every press is a new instruction for your code to follow.

📖 Visual Learner's Guide

The Big Picture:

When you run this code, you’ll see shapes change color and type based on which key you press.

Visual Analogy:

Think of this process like a conductor leading an orchestra. Each key press is a cue for the orchestra to play a different note or song.

The Numbers Decoded:

Here, instead of numbers, we are working with keys. If you press 'a', a red circle appears. If you press 'b', a blue square shows up. These keys act as triggers for your visuals.

Connection Map:

The fill() function sets the shape color before drawing. The key() function determines which shape to draw based on the key pressed.

Common Gotcha:

Remember, the key() function only reads the last key pressed, so it’s important to check the condition every frame in draw()!

🔄 How It Works

graph TD A[User Presses Key] --> B[key()] B --> C[Returns Key Value] style B fill:#ff6b6b

This diagram illustrates the flow of information from the user's keyboard input to the key() function, which captures and returns the value of the pressed key.

📝 Syntax

📖 How to Read This

Read key() as: 'Get the current key being pressed on the keyboard'. The parentheses are like a request for information - you’re asking the function to return the value of the key being pressed.

key()

Example: key() // Returns the current key being pressed

↩️ What It Returns

Type: String

The key() function hands back a String that indicates which key was pressed. Think of it as receiving a message that tells you exactly what key was hit on the keyboard.

📥 What Goes In

When you press a key on your keyboard, the key() function captures that action. It's like sending a letter to the canvas, telling it which key has been pressed. This input enables your code to react dynamically to user actions.

📤 What Happens

The key() function takes your keystroke and instantly returns that information, allowing your code to execute specific actions based on the key pressed. It’s like having a magic button that triggers different responses in your artwork.

💻 Working Example

// Complete working example with comments
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let currentKey = key(); // Get the current key pressed
  if (currentKey === 'a') {
    fill(255, 0, 0); // Red if 'a' is pressed
    ellipse(200, 200, 100, 100); // Draw a red circle
  } else if (currentKey === 'b') {
    fill(0, 0, 255); // Blue if 'b' is pressed
    rect(150, 150, 100, 100); // Draw a blue square
  }
}

Try This Code →

⚙️ How It Works

When p5.js runs your sketch, it continuously checks for keyboard input. Each time a key is pressed, the key() function captures that event, storing the key value temporarily. During each frame of the draw() loop, this value can be used to alter visuals or interactions, enabling dynamic responses to the user’s actions.

🎓 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 game developer. Use key() to create a character that moves left and right."

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 key() to create a responsive art piece that changes color with different key presses."

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 key() to change shapes based on user input."

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

🔄 Refinement Pattern

Start simple and iterate

"Start with a basic key() example that draws a single shape. Then I'll ask you to add more shapes and animations based on different keys."

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

"Create a sketch that uses key() to change colors when different keys are pressed."

💡 Why this is good: This structure clearly outlines a visual goal and the use of the key() function.

📚 What you learn: You learn how to connect keyboard inputs to visual changes.

📝 Sample Output:

// 10-15 lines of COMPLETE working code

Direct

"Use key() to create a simple interactive game where pressing keys moves an object around."

💡 Why this is good: It sets a context for the AI, focusing on interaction and movement.

📚 What you learn: Understanding interactivity and real-time user feedback in creative coding.

📝 Sample Output:

// complete code

🔮 Indirect Prompts - Describe What You Want

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

Indirect

"Describe a visual art piece that changes based on user input without mentioning key() directly."

💡 Why this is good: This encourages thinking about the visual outcome rather than the specific function.

� What you learn: You learn to communicate visual intent effectively.

📝 Sample Output:

// Code showing AI chose key()

🖼️ See It In Real Sketches

How key() is used in actual gallery sketches:

Interactive Color Changer

This sketch uses the key() function to change the background color based on key presses, creating a vibrant and reactive canvas.

// Relevant code showing the function in context
function draw() {
  if (key() === 'r') background(255, 0, 0);
  else if (key() === 'g') background(0,...

🔀 Fun Function Combinations

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

key() + fill()

→ Changes the color of shapes based on key presses.

Try: "Create a sketch where different shapes are drawn in different colors based on the key pressed."

// 5-10 lines showing the combination
function draw() {
  if (key() === 'r') fill(255, 0, 0);
  else if (key() === 'g') fill(0, 255, 0);
  ellipse(200, 200, 100, 100);
}

⚠️ Common Mistakes & Fixes

❌ Mistake: Not calling key() inside the draw() function, leading to no response to key presses.

🤔 Why it's wrong: If key() is not called inside draw(), it will not update continuously and won't reflect real-time input.

✅ Fix: Make sure to place key() inside the draw() loop to constantly check for key presses.

🗺️ Learning Path

💡 Project Ideas

Create a simple game where players move a character using the keyboard.
Develop an interactive art piece that changes colors based on key inputs.

🤖 Ask xelsed-alpha6 to Explain

Your prompt:

"Explain what key() 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 key()

Example prompt:

"Create something using key()"

🔧 Ask AI to Help Debug

When stuck, try:

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

✨ Creative Combinations with AI

Ask AI to combine functions:

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

📚 Related Functions

Ready to Try key()?

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

Start Coding with AI →