MY TEST ROBOT

This sketch creates an interactive robot that you can click to control. Click the head to make it spin, click either arm to make it wave, or click the body to make the whole robot bounce up and down.

🧪 Try This!

Experiment with the code by making these changes:

  1. Make the robot much taller — Larger dimension values make the robot bigger overall—watch it scale upward while keeping all parts proportional
  2. Change the robot's color to purple — The fill() function sets color for all shapes drawn after it—change the blue RGB values to create a different hue
  3. Make the head spin twice as fast — Doubling the rotation speed makes the head complete its 360-degree spin in half the time
  4. Make the arms wave much faster — Higher speed values make the oscillating sine wave cycle faster, so the arms swing quicker
  5. Give the robot thicker arms — Increase the arm width to make them look more robust and beefy
  6. Make bouncing much bouncier — Higher amplitude values let the robot jump higher off the ground when bouncing
Prefer the full editor? Open it there →

📖 About This Sketch

This sketch draws a robot made of simple shapes (rectangles for the body and limbs, circles for the head) and brings it to life with four independent animations triggered by mouse clicks. Each part of the robot responds differently: the head spins a full 360 degrees, each arm swings back and forth, and the whole body bounces. What makes this sketch powerful is how it combines transforms (translate and rotate), oscillating sine waves for smooth motion, and collision detection to know which part was clicked.

The code is organized around a robot that exists at a base position (robotX, robotY), with all other coordinates calculated relative to that center point. By studying it, you will learn how to structure a complex drawing with many moving parts, how to use push() and pop() to apply rotations safely, and how mouse collision detection lets you create clickable interactive objects that feel responsive and alive.

⚙️ How It Works

  1. When the sketch loads, setup() creates a canvas that fills the whole window and positions the robot in the center. It sets rectMode(CENTER) so rectangles are drawn from their center point, and angleMode(RADIANS) so rotation angles use radians instead of degrees.
  2. Every frame, draw() clears the background and applies a bouncing offset to the robot's Y position if isBouncing is true. This offset comes from a sine wave that smoothly moves the robot up and down.
  3. The robot's body is drawn first as a blue rectangle at the center. Then the head (orange circle with eyes and nose) is drawn using push(), translate(), and rotate()—this moves the drawing origin to the head's center and spins it by headAngle. When the head is rotating, headAngle increases by headRotationSpeed each frame until a full 360-degree rotation completes.
  4. The arms are drawn with the same translate-and-rotate technique. If either arm is animating, its angle oscillates using a sine wave (sin(armPhase) multiplied by an amplitude), making it swing smoothly. The legs are drawn last as two dark blue rectangles.
  5. When you click the mouse, mousePressed() checks if the click is inside the head, left arm, right arm, or body using distance formulas and bounding boxes. If you hit the head, it begins a 360-degree rotation. If you hit either arm, it toggles that arm's waving animation on or off. If you hit the body, it toggles the bouncing animation for the entire robot.

🎓 Concepts You'll Learn

Transform matrices (push/pop)Translate and rotateSine wave oscillationCollision detectionEvent handling (mousePressed)Animation state managementRelative positioning

📝 Code Breakdown

setup()

setup() runs once when the sketch starts. It is where you create the canvas, initialize variables, and set drawing modes that affect the entire sketch.

function setup() {
  createCanvas(windowWidth, windowHeight);
  robotX = width / 2;
  robotY = height / 2; // Store original Y position
  
  rectMode(CENTER); // Draw rectangles from their center
  angleMode(RADIANS); // Ensure rotation angles are in radians

  // Assign value to armAnimationAmplitude here, where PI is defined
  armAnimationAmplitude = PI / 4; // Max swing angle (e.g., 45 degrees from vertical)
}
Line-by-line explanation (6 lines)
createCanvas(windowWidth, windowHeight);
Creates a canvas that fills the entire browser window—uses window dimensions instead of fixed numbers
robotX = width / 2;
Places the robot horizontally in the center by setting its X to half the canvas width
robotY = height / 2; // Store original Y position
Places the robot vertically in the center—this stored value is the base position before bouncing
rectMode(CENTER);
Changes how rectangles are drawn—normally (0,0) is the top-left corner, but CENTER makes (x,y) the rectangle's center
angleMode(RADIANS);
Makes all rotation angles use radians (0 to 2π) instead of degrees (0 to 360)—required for sin() and cos() to work naturally
armAnimationAmplitude = PI / 4;
Sets the maximum arm swing angle to π/4 radians, which equals about 45 degrees—defines how far the arms swing side to side

draw()

draw() runs 60 times per second, updating all positions and redrawing the entire robot. The key insight is that currentRobotY combines the base position with animation offsets, so the bounce affects every part of the robot at once. The push() and pop() around the head and arms isolate their rotations—if you forgot pop(), all subsequent drawings would also spin!

🔬 This code makes the left arm swing using a sine wave. What happens if you multiply armAnimationAmplitude by 2? How much further does the arm swing?

  if (isLeftArmAnimating) {
    leftArmAngle = sin(leftArmPhase) * armAnimationAmplitude;
    leftArmPhase += armAnimationSpeed;
  }

🔬 This creates smooth bouncing using sine wave oscillation. What happens if you change the += to *= 1.1 instead? (Hint: the bounce will start slow and speed up or slow down)

  if (isBouncing) {
    bounceOffset = sin(bouncePhase) * bounceAmplitude;
    bouncePhase += bounceSpeed;
  }
function draw() {
  background(220); // Light gray background

  // --- Apply Bouncing Motion to the entire robot ---
  let bounceOffset = 0;
  if (isBouncing) {
    bounceOffset = sin(bouncePhase) * bounceAmplitude;
    bouncePhase += bounceSpeed;
  }
  
  // Calculate the current Y position of the robot's center, incorporating the bounce
  let currentRobotY = robotY + bounceOffset;

  // --- Draw Body ---
  fill(0, 100, 200); // Blue body
  noStroke();
  rect(robotX, currentRobotY, bodyWidth, bodyHeight); // Use currentRobotY

  // --- Draw Head (with rotation and features) ---
  fill(200, 150, 0); // Orange head
  push(); // Save current transformation state
  translate(robotX, currentRobotY + headYOffset); // Move origin to the CENTER of the head, use currentRobotY
  rotate(headAngle); // Apply head rotation
  ellipse(0, 0, headRadius * 2, headRadius * 2); // Draw head centered on new origin

  // Draw Facial Features (they will rotate with the head)
  fill(0); // Black for eyes and nose
  ellipse(-eyeOffsetX, eyeOffsetY, eyeRadius * 2, eyeRadius * 2); // Left eye
  ellipse(eyeOffsetX, eyeOffsetY, eyeRadius * 2, eyeRadius * 2); // Right eye
  rect(0, noseYOffset, noseWidth, noseHeight); // Nose

  pop(); // Restore previous transformation state

  // --- Head Rotation Logic (happens continuously in draw if isHeadRotating is true) ---
  if (isHeadRotating) {
    headAngle += headRotationSpeed; // Increment angle
    // Check if one full rotation (TWO_PI radians) is complete
    if (headAngle >= initialHeadAngle + TWO_PI) {
      headAngle = initialHeadAngle + TWO_PI; // Snap to exact 360-degree rotation
      isHeadRotating = false; // Stop rotating
    }
  }

  // --- Update Arm Angles for Animation ---
  if (isLeftArmAnimating) {
    leftArmAngle = sin(leftArmPhase) * armAnimationAmplitude;
    leftArmPhase += armAnimationSpeed;
  }
  if (isRightArmAnimating) {
    rightArmAngle = sin(rightArmPhase) * armAnimationAmplitude;
    rightArmPhase += armAnimationSpeed;
  }

  // --- Draw Left Arm (with rotation) ---
  fill(150); // Gray arms
  push();
  translate(robotX + leftArmXOffset, currentRobotY + armsYOffset); // Move origin to shoulder pivot, use currentRobotY
  rotate(leftArmAngle); // Apply arm rotation
  rect(armWidth / 2, armHeight / 2, armWidth, armHeight); // Draw arm, shoulder is at its top-left
  pop();

  // --- Draw Right Arm (with rotation) ---
  fill(150); // Gray arms
  push();
  translate(robotX + rightArmXOffset, currentRobotY + armsYOffset); // Move origin to shoulder pivot, use currentRobotY
  rotate(rightArmAngle); // Apply arm rotation
  rect(-armWidth / 2, armHeight / 2, armWidth, armHeight); // Draw arm, shoulder is at its top-right (negative width offset)
  pop();

  // --- Draw Legs ---
  fill(0, 50, 100); // Darker blue legs
  rect(robotX - legWidth / 2, currentRobotY + legsYOffset + legHeight / 2, legWidth, legHeight); // Use currentRobotY
  rect(robotX + legWidth / 2, currentRobotY + legsYOffset + legHeight / 2, legWidth, legHeight); // Use currentRobotY
}
Line-by-line explanation (19 lines)

🔧 Subcomponents:

calculation Bounce Offset Calculation bounceOffset = sin(bouncePhase) * bounceAmplitude;

Uses a sine wave to smoothly oscillate the bounce offset between -bounceAmplitude and +bounceAmplitude

conditional Head Rotation Complete Check if (headAngle >= initialHeadAngle + TWO_PI) {

Detects when the head has finished a full 360-degree rotation and stops the animation

conditional Left Arm Wave Animation if (isLeftArmAnimating) { leftArmAngle = sin(leftArmPhase) * armAnimationAmplitude; leftArmPhase += armAnimationSpeed; }

Updates the left arm's angle using a sine wave to create a smooth waving motion

conditional Right Arm Wave Animation if (isRightArmAnimating) { rightArmAngle = sin(rightArmPhase) * armAnimationAmplitude; rightArmPhase += armAnimationSpeed; }

Updates the right arm's angle using a sine wave to create a smooth waving motion

background(220); // Light gray background
Clears the canvas every frame with light gray, erasing previous drawings so animation is visible
let bounceOffset = 0;
Initializes bounceOffset to 0—if bouncing is off, the robot stays at its base Y position
if (isBouncing) {
Only calculate bouncing motion if the isBouncing flag is true (turned on by clicking the body)
bounceOffset = sin(bouncePhase) * bounceAmplitude;
Calculates a smooth up-and-down motion: sin() oscillates between -1 and 1, multiplied by bounceAmplitude to set the height
bouncePhase += bounceSpeed;
Advances the phase of the sine wave each frame—faster increments make the bounce happen quicker
let currentRobotY = robotY + bounceOffset;
Combines the robot's base Y position (robotY) with the bounce offset to get this frame's vertical position
rect(robotX, currentRobotY, bodyWidth, bodyHeight); // Use currentRobotY
Draws the body as a blue rectangle at the calculated Y position—moves up/down with the bounce
push(); // Save current transformation state
Saves the current drawing settings and coordinate system before applying transforms
translate(robotX, currentRobotY + headYOffset); // Move origin to the CENTER of the head, use currentRobotY
Moves the drawing origin to the head's center point—all future drawing happens from this new origin
rotate(headAngle); // Apply head rotation
Rotates the coordinate system by headAngle radians—the head and its facial features spin around the origin
ellipse(0, 0, headRadius * 2, headRadius * 2); // Draw head centered on new origin
Draws a circle at the new origin (0, 0)—because of translate(), this appears at the head's position
pop(); // Restore previous transformation state
Undoes all the translate() and rotate() calls, returning to the original coordinate system
if (isHeadRotating) {
Only update the head angle if rotation is active (triggered by clicking the head)
headAngle += headRotationSpeed; // Increment angle
Increases the head's rotation angle each frame by headRotationSpeed, creating smooth continuous spinning
if (headAngle >= initialHeadAngle + TWO_PI) {
Checks if the head has rotated 360 degrees (TWO_PI radians) from where it started (initialHeadAngle)
isHeadRotating = false; // Stop rotating
Turns off the rotation flag so the head stops spinning after completing one full rotation
if (isLeftArmAnimating) {
Only animate the left arm if its animation flag is true (turned on by clicking it)
leftArmAngle = sin(leftArmPhase) * armAnimationAmplitude;
Calculates the left arm's swing angle using sine—oscillates smoothly between -armAnimationAmplitude and +armAnimationAmplitude
leftArmPhase += armAnimationSpeed;
Advances the arm's animation phase each frame—controls how fast it swings back and forth

mousePressed()

mousePressed() is called once every time you click the mouse. This function uses two kinds of collision detection: bounding boxes (four boundary checks) for the body and arms, and distance comparison (dist) for the circular head. The key learning is that each animation has its own flag (isBouncing, isHeadRotating, etc.), and mousePressed() toggles or activates these flags to trigger animations in draw().

🔬 This collision box is made from four boundary calculations. What happens if you change robotMaxY to robotY instead? (Hint: you'll only be able to trigger bouncing on part of the robot)

  // Toggle bouncing if clicked anywhere on the robot
  if (mouseX > robotMinX && mouseX < robotMaxX &&
      mouseY > robotMinY && mouseY < robotMaxY) {
    isBouncing = !isBouncing;
    if (isBouncing) {
      bouncePhase = 0; // Reset bounce phase when starting animation
    }
  }
function mousePressed() {
  // Determine the overall bounding box of the robot for bouncing
  // Note: These calculations use the base robotY, as the bounceOffset is applied in draw()
  let robotMinX = robotX - bodyWidth / 2 - armWidth / 2;
  let robotMaxX = robotX + bodyWidth / 2 + armWidth / 2;
  let robotMinY = robotY + headYOffset - headRadius;
  let robotMaxY = robotY + legsYOffset + legHeight;

  // Toggle bouncing if clicked anywhere on the robot
  if (mouseX > robotMinX && mouseX < robotMaxX &&
      mouseY > robotMinY && mouseY < robotMaxY) {
    isBouncing = !isBouncing;
    if (isBouncing) {
      bouncePhase = 0; // Reset bounce phase when starting animation
    }
  }

  // Existing click detection for head rotation
  let headCenterX = robotX;
  let headCenterY = robotY + headYOffset;
  if (dist(mouseX, mouseY, headCenterX, headCenterY) < headRadius) {
    if (!isHeadRotating) {
      isHeadRotating = true;
      initialHeadAngle = headAngle;
    }
  }

  // Existing click detection for left arm animation
  let leftArmX = robotX + leftArmXOffset - armWidth / 2;
  let leftArmY = robotY + armsYOffset - armHeight / 2;
  if (mouseX > leftArmX && mouseX < leftArmX + armWidth &&
      mouseY > leftArmY && mouseY < leftArmY + armHeight) {
    isLeftArmAnimating = !isLeftArmAnimating;
    if (isLeftArmAnimating) {
      leftArmPhase = 0;
    } else {
      leftArmAngle = 0;
    }
  }

  // Existing click detection for right arm animation
  let rightArmX = robotX + rightArmXOffset - armWidth / 2;
  let rightArmY = robotY + armsYOffset - armHeight / 2;
  if (mouseX > rightArmX && mouseX < rightArmX + armWidth &&
      mouseY > rightArmY && mouseY < rightArmY + armHeight) {
    isRightArmAnimating = !isRightArmAnimating;
    if (isRightArmAnimating) {
      rightArmPhase = 0;
    } else {
      rightArmAngle = 0;
    }
  }
}
Line-by-line explanation (18 lines)

🔧 Subcomponents:

conditional Body Bounding Box Collision if (mouseX > robotMinX && mouseX < robotMaxX && mouseY > robotMinY && mouseY < robotMaxY) {

Tests if the click landed inside the rectangular bounding box that contains the whole robot

conditional Head Circle Collision if (dist(mouseX, mouseY, headCenterX, headCenterY) < headRadius) {

Tests if the click landed inside the head by measuring distance from the click to the head's center

conditional Left Arm Bounding Box Collision if (mouseX > leftArmX && mouseX < leftArmX + armWidth && mouseY > leftArmY && mouseY < leftArmY + armHeight) {

Tests if the click landed inside the left arm's rectangular area

conditional Right Arm Bounding Box Collision if (mouseX > rightArmX && mouseX < rightArmX + armWidth && mouseY > rightArmY && mouseY < rightArmY + armHeight) {

Tests if the click landed inside the right arm's rectangular area

let robotMinX = robotX - bodyWidth / 2 - armWidth / 2;
Calculates the leftmost edge of the robot's bounding box, including the arms extending outward
let robotMaxX = robotX + bodyWidth / 2 + armWidth / 2;
Calculates the rightmost edge of the robot's bounding box
let robotMinY = robotY + headYOffset - headRadius;
Calculates the top edge of the robot's bounding box (the head's top)
let robotMaxY = robotY + legsYOffset + legHeight;
Calculates the bottom edge of the robot's bounding box (the legs' bottom)
if (mouseX > robotMinX && mouseX < robotMaxX && mouseY > robotMinY && mouseY < robotMaxY) {
Tests if the mouse click falls inside the rectangular area—true if the click is on the robot's body
isBouncing = !isBouncing;
Toggles the bouncing flag: if it was true, it becomes false, and vice versa—turns bouncing on or off
if (isBouncing) { bouncePhase = 0; // Reset bounce phase when starting animation }
When bouncing starts, reset bouncePhase to 0 so the animation begins at the bottom of the bounce cycle
let headCenterX = robotX;
The head is centered horizontally on the robot's X position
let headCenterY = robotY + headYOffset;
The head's vertical center is the robot's Y position plus the offset that moves it upward
if (dist(mouseX, mouseY, headCenterX, headCenterY) < headRadius) {
Uses dist() to measure the distance from the click to the head's center—if less than the head's radius, the click hit the head
if (!isHeadRotating) {
Only start a new head rotation if the head is not already rotating—prevents starting multiple rotations
isHeadRotating = true;
Turns on the head rotation flag, which will make draw() increment headAngle each frame
initialHeadAngle = headAngle;
Stores the current head angle before rotation starts—used to detect when 360 degrees have been reached
let leftArmX = robotX + leftArmXOffset - armWidth / 2;
Calculates the left edge of the left arm's bounding box
let leftArmY = robotY + armsYOffset - armHeight / 2;
Calculates the top edge of the left arm's bounding box
if (mouseX > leftArmX && mouseX < leftArmX + armWidth && mouseY > leftArmY && mouseY < leftArmY + armHeight) {
Tests if the click landed inside the left arm's rectangular area
isLeftArmAnimating = !isLeftArmAnimating;
Toggles the left arm's animation flag on or off
if (isLeftArmAnimating) { leftArmPhase = 0; } else { leftArmAngle = 0; }
When turning animation on, reset the phase to 0. When turning off, set the angle to 0 so the arm drops back to its resting position

windowResized()

windowResized() is a special p5.js function that gets called automatically whenever the user resizes their browser window. Without it, the canvas would stay the same size and not fill the window. This is essential for responsive sketches that adapt to any screen size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  robotX = width / 2;
  robotY = height / 2; // Reset base Y position
}
Line-by-line explanation (3 lines)
resizeCanvas(windowWidth, windowHeight);
Resizes the p5.js canvas to match the new window dimensions whenever the browser window is resized
robotX = width / 2;
Recalculates the robot's horizontal center position based on the new canvas width
robotY = height / 2; // Reset base Y position
Recalculates the robot's vertical center position based on the new canvas height, keeping it centered as the window changes

📦 Key Variables

bodyWidth number

Controls the horizontal width of the robot's torso in pixels

let bodyWidth = 100;
bodyHeight number

Controls the vertical height of the robot's torso in pixels

let bodyHeight = 150;
headRadius number

Controls the size of the robot's circular head (radius, so diameter is twice this)

let headRadius = 40;
armWidth number

Controls the thickness of each arm in pixels

let armWidth = 20;
armHeight number

Controls the length of each arm in pixels

let armHeight = 80;
legWidth number

Controls the thickness of each leg in pixels

let legWidth = 30;
legHeight number

Controls the length of each leg in pixels

let legHeight = 100;
robotX number

Stores the horizontal position of the robot's center on the canvas

let robotX; // Set in setup()
robotY number

Stores the vertical position of the robot's base center—bounce offsets are added to this in draw()

let robotY; // Set in setup()
headYOffset number

Negative offset that positions the head above the body center

let headYOffset = -(bodyHeight / 2 + headRadius);
leftArmXOffset number

Negative offset that positions the left arm to the left of the robot's center

let leftArmXOffset = -(bodyWidth / 2 + armWidth / 2);
rightArmXOffset number

Positive offset that positions the right arm to the right of the robot's center

let rightArmXOffset = bodyWidth / 2 + armWidth / 2;
armsYOffset number

Offset that positions both arms vertically—approximately at the shoulder height

let armsYOffset = -(bodyHeight / 2 - armHeight / 4);
legsYOffset number

Offset that positions the legs below the body center

let legsYOffset = bodyHeight / 2;
eyeRadius number

Radius of each eye circle on the head

let eyeRadius = 6;
eyeOffsetX number

Horizontal distance of each eye from the head's center (left is negative, right is positive)

let eyeOffsetX = 15;
eyeOffsetY number

Vertical offset of the eyes from the head's center (negative moves them up)

let eyeOffsetY = -5;
noseWidth number

Horizontal width of the nose rectangle

let noseWidth = 10;
noseHeight number

Vertical height of the nose rectangle

let noseHeight = 15;
noseYOffset number

Vertical offset of the nose from the head's center (positive moves it down)

let noseYOffset = 10;
headAngle number

Current rotation angle of the head in radians—incremented each frame while rotating

let headAngle = 0;
leftArmAngle number

Current swing angle of the left arm in radians—oscillates while animating

let leftArmAngle = 0;
rightArmAngle number

Current swing angle of the right arm in radians—oscillates while animating

let rightArmAngle = 0;
isHeadRotating boolean

Flag that controls whether the head is currently spinning—set by clicking the head

let isHeadRotating = false;
initialHeadAngle number

Stores the head's angle when rotation starts—used to detect when 360 degrees are complete

let initialHeadAngle = 0;
headRotationSpeed number

How many radians to add to headAngle each frame—controls rotation speed

let headRotationSpeed = 0.1;
isLeftArmAnimating boolean

Flag that controls whether the left arm is waving—toggled by clicking it

let isLeftArmAnimating = false;
isRightArmAnimating boolean

Flag that controls whether the right arm is waving—toggled by clicking it

let isRightArmAnimating = false;
leftArmPhase number

Phase value for the left arm's sine wave animation—determines position in the wave cycle

let leftArmPhase = 0;
rightArmPhase number

Phase value for the right arm's sine wave animation—determines position in the wave cycle

let rightArmPhase = 0;
armAnimationAmplitude number

Maximum swing angle for arms in radians—controls how far they swing side to side

let armAnimationAmplitude; // Set in setup() to PI / 4
armAnimationSpeed number

How many radians to add to the arm phase each frame—controls waving speed

let armAnimationSpeed = 0.05;
isBouncing boolean

Flag that controls whether the entire robot is bouncing—toggled by clicking the body

let isBouncing = false;
bouncePhase number

Phase value for the bounce's sine wave—determines position in the up-down cycle

let bouncePhase = 0;
bounceAmplitude number

How many pixels the robot bounces up and down—controls bounce height

let bounceAmplitude = 20;
bounceSpeed number

How many radians to add to bouncePhase each frame—controls bounce speed

let bounceSpeed = 0.1;

🔧 Potential Improvements (5)

Here are some ways this code could be enhanced:

BUG mousePressed() - head collision

If the head is already rotating and you click it again, initialHeadAngle gets updated, which changes the target rotation angle mid-spin

💡 Remove the !isHeadRotating check and instead ignore clicks while the head is rotating: change 'if (!isHeadRotating)' to always set initialHeadAngle when starting, not while rotating. Better: track whether a rotation is in progress and ignore new clicks until it completes.

BUG mousePressed() - arm collision detection

The clickable area for arms uses the base robotY instead of currentRobotY, so when the robot bounces, the click areas become misaligned with the visual arms

💡 Store bounceOffset in a global variable or pass currentRobotY to mousePressed() so arm collision boxes are calculated with the bounced position.

STYLE global variables

Many similar variables (headAngle, leftArmAngle, rightArmAngle) could be grouped into objects for cleaner code: e.g., let angles = {head: 0, leftArm: 0, rightArm: 0}

💡 Refactor animation states into objects like let animation = {head: {angle: 0, rotating: false}, leftArm: {angle: 0, animating: false}} to reduce variable count and improve readability.

PERFORMANCE draw() - arm angle calculation

Each frame while animating, the arm phase increases even if it will wrap around multiple times—no harm but the number gets very large over time

💡 Add modulo arithmetic to keep phase values small: leftArmPhase = (leftArmPhase + armAnimationSpeed) % TWO_PI

FEATURE overall

There is no visual feedback when you hover over clickable parts—users don't know which parts respond to clicks

💡 Add a cursor change or highlight effect: detect if the mouse is over a clickable area (head, arms, or body) and change the cursor style or draw a subtle glow.

🔄 Code Flow

Code flow showing setup, draw, mousepressed, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> bouncecalculation[bounce-calculation] draw --> headrotationcheck[head-rotation-check] draw --> leftarmanimation[left-arm-animation] draw --> rightarmanimation[right-arm-animation] draw --> draw setup --> windowresized[windowresized] mousepressed[mousepressed] --> bodycollisionbox[body-collision-box] mousepressed --> headcollisioncircle[head-collision-circle] mousepressed --> leftarmcollisionbox[left-arm-collision-box] mousepressed --> rightarmcollisionbox[right-arm-collision-box] click setup href "#fn-setup" click draw href "#fn-draw" click bouncecalculation href "#sub-bounce-calculation" click headrotationcheck href "#sub-head-rotation-check" click leftarmanimation href "#sub-left-arm-animation" click rightarmanimation href "#sub-right-arm-animation" click windowresized href "#fn-windowresized" click mousepressed href "#fn-mousepressed" click bodycollisionbox href "#sub-body-collision-box" click headcollisioncircle href "#sub-head-collision-circle" click leftarmcollisionbox href "#sub-left-arm-collision-box" click rightarmcollisionbox href "#sub-right-arm-collision-box"

❓ Frequently Asked Questions

What visual elements are featured in the MY TEST ROBOT sketch?

The sketch creates an interactive robot consisting of a rectangular body, a circular head, arms, and legs, all designed to respond with movements and animations.

How can users interact with the MY TEST ROBOT sketch?

Users can interact with the robot by clicking the mouse, which triggers various animations such as head rotation, arm movements, and bouncing.

What creative coding concepts does the MY TEST ROBOT sketch illustrate?

This sketch demonstrates concepts such as animation, user interaction, and the use of angles to create dynamic movements in a visual composition.

Preview

MY TEST ROBOT - p5.js creative coding sketch preview
Sketch Preview
Code flow diagram showing the structure of MY TEST ROBOT - Code flow showing setup, draw, mousepressed, windowresized
Code Flow Diagram