Interactive p5 Artwork Tutorial for CS6310: Exploring the 'New' Theme

Introduction: Embracing the 'New' in Interactive Art

In CS6310 (COMP1720/6720), your major project challenges you to create an interactive p5 artwork for a virtual gallery. This year's theme is 'new'. But what does 'new' mean in a world where AI-generated art, viral TikTok filters, and generative NFTs are reshaping creativity? As of May 2026, the concept of 'new' is more layered than ever. This tutorial will guide you through planning and coding a p5 sketch that explores 'new' in a meaningful, interactive way—without giving away a complete solution. You'll learn to structure your code, design interaction, and link your work to contemporary trends.

Understanding the Assignment Requirements

Before diving into code, review the key requirements: your sketch must allow interaction via keyboard, mouse, microphone, or camera; provide an engaging ~3-minute experience; relate to the theme 'new'; be suitable for public presentation; and have well-organized source code using functions, arrays, objects, and techniques from class. You'll also write an artist statement, interaction statement, and statement of originality. This tutorial focuses on the coding and conceptual aspects.

Interpreting 'New' in 2026: Trend-Inspired Ideas

The theme 'new' can be interpreted in countless ways. Here are three timely angles:

AI and Generative Art: Explore how AI 'creates' something new from existing data. Your sketch could generate unique patterns based on user input, echoing AI image generators like DALL·E or Midjourney.
Digital vs. Physical: Reflect on how digital experiences feel 'new' compared to physical ones. Use the camera to blend the user's real-world environment with digital elements, like a Snapchat lens.
Repetition and Variation: Show how small changes create novelty. Use loops and randomness to produce evolving visuals, similar to generative art on platforms like Art Blocks.

Planning Your Interactive Experience

Your three-minute experience should have a clear arc. Consider a beginning (attract mode), middle (interaction), and end (resolution). For example:

Beginning: A calm, evolving pattern that invites curiosity.
Middle: User interaction (mouse movement, keyboard) alters the pattern, creating 'new' forms.
End: The artwork resets or fades, leaving a final unique composition.

Use an interaction statement to describe this flow. Your code should track states using variables or a state machine.

Coding the Foundation: p5 Setup and Structure

Start with the template from the major project repo. Your sketch.js should have setup() and draw(). Use createCanvas() with windowWidth and windowHeight for fullscreen responsiveness. Example:

function setup() {
  createCanvas(windowWidth, windowHeight);
  // initialize variables
}

function draw() {
  background(0);
  // your generative logic
}

Organize your code into functions: drawBackground(), updateParticles(), handleInteraction(). Use arrays to store multiple objects (e.g., particles, shapes).

Adding Interactivity: Mouse, Keyboard, and Camera

Interaction is key. Here are examples:

Mouse: Use mouseX, mouseY, mouseIsPressed to control elements. For instance, create a ripple effect at the mouse position.
Keyboard: Map keys to different modes. Press 'n' to generate a 'new' pattern.
Camera: Use createCapture(VIDEO) to bring in live video. Manipulate pixels to create a stylized effect.

Trend example: Think of TikTok's green screen effect. Your sketch could replace the background with generative art while keeping the user's silhouette.

Using Objects and Arrays for Scalability

To manage complexity, create classes for reusable elements. For example, a Particle class with properties x, y, vx, vy, and methods update() and display(). Store many particles in an array:

let particles = [];

function setup() {
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  for (let p of particles) {
    p.update();
    p.display();
  }
}

This approach is similar to how game engines handle many objects (e.g., in Minecraft or Fortnite).

Designing for Engagement: The Three-Minute Experience

To keep users engaged for three minutes, introduce gradual changes. Use frameCount or a timer to shift phases. For example:

0-60 seconds: Attract mode with slow color shifts.
60-120 seconds: Interaction phase where user input speeds up changes.
120-180 seconds: Climax and resolution, leading to a final 'new' form.

You can also use millis() for precise timing. Provide visual feedback (e.g., a progress bar or evolving text) to show progression.

Connecting to the Theme 'New' Through Code

Your code should embody 'new'. For instance, use random() and noise() to generate unpredictable patterns. Every interaction creates a unique outcome—something 'new' each time. You can also use saveCanvas() to let users save their creation, emphasizing the 'new' artwork they co-created.

Trend connection: In 2026, AI art tools like RunwayML allow users to generate 'new' images from prompts. Your sketch can mimic this by letting users 'prompt' with mouse gestures.

Testing and Refining for Fullscreen

Test your sketch on different screen sizes (1920x1080 to 2560x1440). Use windowResized() to handle resizing. Ensure the 'back to gallery' button remains in the bottom-right corner. Test interaction with both keyboard and mouse to ensure responsiveness.

Writing Your Artist Statement

Your artist statement (max 1000 words) should explain your interpretation of 'new'. Avoid listing features; instead, discuss the deeper meaning. For example: 'My artwork explores how digital tools enable the creation of something new from chaos, reflecting the role of AI in modern creativity.' Use the statement to connect your code to the theme.

Conclusion: From Code to Gallery

By following this tutorial, you'll build an interactive p5 artwork that is technically sound and conceptually rich. Remember to commit regularly to GitLab, test in the lab, and write clear documentation. Your 'new' artwork awaits—start coding today!