AI Daydreaming Fish - Dreams of the Ocean

This sketch creates a whimsical animated fish swimming in a bowl, with floating bubbles and rotating dream messages displayed in thought bubbles above. The fish moves side-to-side using a sine wave, bubbles continuously spawn and float upward, and the dream text cycles through three philosophical messages every 3 seconds, creating a peaceful and emotional narrative about the fish's desires for freedom.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopArray manipulationSine wave motionParticle systemText renderingConditional spawningWindow responsivenessTrigonometric functions

🔄 Code Flow

Code flow showing setup, draw, windowresized

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

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> bowl-drawing[Bowl Setup and Drawing] draw --> fish-position[Fish Position with Sine Wave] draw --> fish-body[Fish Body Drawing] draw --> bubble-spawn[Random Bubble Spawning] draw --> bubble-animation[Bubble Movement and Removal] draw --> thought-bubble[Thought Bubble Drawing] draw --> dream-text[Dream Text Cycling] bubble-spawn -->|2% chance| bubble-animation bubble-animation -->|for each bubble| bubble-animation fish-position -->|calculate x position| fish-body fish-body -->|draw fish| thought-bubble thought-bubble -->|draw thought bubble| dream-text dream-text -->|cycle dreams every 180 frames| draw click setup href "#fn-setup" click draw href "#fn-draw" click bowl-drawing href "#sub-bowl-drawing" click fish-position href "#sub-fish-position" click fish-body href "#sub-fish-body" click bubble-spawn href "#sub-bubble-spawn" click bubble-animation href "#sub-bubble-animation" click thought-bubble href "#sub-thought-bubble" click dream-text href "#sub-dream-text"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's where you initialize your canvas and set up global drawing settings like text alignment and size. Using windowWidth and windowHeight makes your sketch adapt to different screen sizes.

function setup(){createCanvas(windowWidth,windowHeight);textAlign(CENTER,CENTER);textSize(20);}

Line by Line:

createCanvas(windowWidth,windowHeight): Creates a canvas that fills the entire browser window, making the sketch responsive to different screen sizes
textAlign(CENTER,CENTER): Sets text alignment so that text is centered both horizontally and vertically around the coordinates you specify
textSize(20): Sets the font size to 20 pixels for all text drawn in the sketch

`draw()`

draw() runs 60 times per second, creating the animation. Each frame, it clears the background, updates positions, and redraws everything. The sine wave creates smooth swimming motion, the bubble loop manages multiple particles, and the dream cycling creates the emotional narrative.

function draw(){
  background(180,220,255);
  let bowlR=200, bx=width/2, by=height/2+60;
  noFill();stroke(255);strokeWeight(4);circle(bx,by,bowlR);
  let fx=bx+40*sin(frameCount*0.01), fy=by+10;
  noStroke();fill(255,140,0);ellipse(fx,fy,70,40);
  triangle(fx-35,fy,fx-55,fy-15,fx-55,fy+15);
  fill(0);circle(fx+20,fy-5,5);
  if(random(1)<0.02)bubbles.push({x:fx+35,y:fy-5,r:6+random(4),v:1+random(1)});
  stroke(200);noFill();
  for(let i=bubbles.length-1;i>=0;i--){
    let b=bubbles[i];b.y-=b.v;circle(b.x,b.y,b.r*2);
    if(b.y<by-bowlR/2-40)bubbles.splice(i,1);
  }
  let tx=bx, ty=by-160;
  noStroke();fill(255,255,255,230);
  ellipse(tx,ty,160,90);ellipse(tx-40,ty+5,60,50);ellipse(tx+40,ty+10,60,50);
  ellipse(fx+20,fy-40,18,14);ellipse(fx+10,fy-20,12,9);
  fill(50);let dream=dreams[floor(frameCount/180)%dreams.length];text(dream,tx,ty-3);
}

🔧 Subcomponents:

calculation Bowl Setup and Drawing let bowlR=200, bx=width/2, by=height/2+60; noFill();stroke(255);strokeWeight(4);circle(bx,by,bowlR);

Defines the bowl's radius and center position, then draws a white circle outline to represent the fish bowl

calculation Fish Position with Sine Wave let fx=bx+40*sin(frameCount*0.01), fy=by+10;

Calculates the fish's x position using a sine wave for smooth left-right swimming motion, and sets a fixed y position

calculation Fish Body Drawing noStroke();fill(255,140,0);ellipse(fx,fy,70,40);triangle(fx-35,fy,fx-55,fy-15,fx-55,fy+15);fill(0);circle(fx+20,fy-5,5);

Draws the fish body as an orange ellipse, adds a triangular tail, and draws a black eye

conditional Random Bubble Spawning if(random(1)<0.02)bubbles.push({x:fx+35,y:fy-5,r:6+random(4),v:1+random(1)});

Has a 2% chance each frame to create a new bubble near the fish with random size and upward velocity

for-loop Bubble Movement and Removal

for(let i=bubbles.length-1;i>=0;i--){let b=bubbles[i];b.y-=b.v;circle(b.x,b.y,b.r*2);if(b.y<by-bowlR/2-40)bubbles.splice(i,1);}

Updates each bubble's position by moving it upward, draws it, and removes it when it floats above the bowl

calculation Thought Bubble Drawing

let tx=bx, ty=by-160; noStroke();fill(255,255,255,230); ellipse(tx,ty,160,90);ellipse(tx-40,ty+5,60,50);ellipse(tx+40,ty+10,60,50); ellipse(fx+20,fy-40,18,14);ellipse(fx+10,fy-20,12,9);

Draws the main thought bubble above the fish and smaller connector bubbles linking it to the fish

calculation Dream Text Cycling fill(50);let dream=dreams[floor(frameCount/180)%dreams.length];text(dream,tx,ty-3);

Cycles through the dreams array every 180 frames (3 seconds) and displays the current dream message in the thought bubble

Line by Line:

background(180,220,255): Fills the entire canvas with a light blue color, clearing the previous frame so you see animation instead of trails
let bowlR=200, bx=width/2, by=height/2+60: Creates variables for the bowl: radius of 200 pixels, centered horizontally, and positioned slightly below the vertical center
noFill();stroke(255);strokeWeight(4);circle(bx,by,bowlR): Draws the bowl as a white circle outline with a 4-pixel thick stroke and no fill
let fx=bx+40*sin(frameCount*0.01), fy=by+10: Calculates fish position: the sine function creates smooth left-right motion, and fy keeps the fish slightly below the bowl's center
noStroke();fill(255,140,0);ellipse(fx,fy,70,40): Draws the fish body as an orange ellipse (70 pixels wide, 40 pixels tall) with no outline
triangle(fx-35,fy,fx-55,fy-15,fx-55,fy+15): Draws a triangular tail pointing left, positioned relative to the fish's body
fill(0);circle(fx+20,fy-5,5): Draws a small black circle for the fish's eye
if(random(1)<0.02)bubbles.push({x:fx+35,y:fy-5,r:6+random(4),v:1+random(1)}): Each frame, there's a 2% chance to create a new bubble object with random size and speed, added to the bubbles array
for(let i=bubbles.length-1;i>=0;i--): Loops through the bubbles array backwards (from end to start) so removing items doesn't affect the loop
let b=bubbles[i];b.y-=b.v;circle(b.x,b.y,b.r*2): Gets the current bubble, moves it upward by subtracting its velocity from y, and draws it as a circle
if(b.y<by-bowlR/2-40)bubbles.splice(i,1): Removes the bubble from the array when it floats above the top of the bowl
let tx=bx, ty=by-160: Sets the thought bubble position to be centered horizontally and 160 pixels above the bowl center
noStroke();fill(255,255,255,230);ellipse(tx,ty,160,90);ellipse(tx-40,ty+5,60,50);ellipse(tx+40,ty+10,60,50): Draws three white semi-transparent ellipses to create the main thought bubble shape
ellipse(fx+20,fy-40,18,14);ellipse(fx+10,fy-20,12,9): Draws two small connector bubbles between the fish and the main thought bubble
fill(50);let dream=dreams[floor(frameCount/180)%dreams.length];text(dream,tx,ty-3): Changes the dream every 180 frames by using modulo to cycle through the dreams array, then displays the current dream in dark text

`windowResized()`

windowResized() is a special p5.js function that automatically gets called whenever the user resizes their browser window. By calling resizeCanvas(), you ensure the sketch adapts to any screen size without breaking.

function windowResized(){resizeCanvas(windowWidth,windowHeight);}

Line by Line:

resizeCanvas(windowWidth,windowHeight): Automatically resizes the canvas whenever the browser window is resized, keeping the sketch responsive

📦 Key Variables

bubbles array

Stores all active bubble objects. Each bubble has properties for x position, y position, radius, and upward velocity. Bubbles are added when spawned and removed when they float away.

let bubbles = [];

dreams array

Stores the three dream messages that cycle through the thought bubble. These represent the fish's desires.

let dreams = ['The Ocean','Freedom','A Bigger Bowl'];

bowlR number

The radius of the fish bowl in pixels. Used to draw the bowl circle and determine when bubbles should be removed.

let bowlR = 200;

bx number

The x-coordinate (horizontal position) of the bowl's center on the canvas.

let bx = width/2;

by number

The y-coordinate (vertical position) of the bowl's center on the canvas.

let by = height/2 + 60;

fx number

The x-coordinate (horizontal position) of the fish, calculated using a sine wave to create swimming motion.

let fx = bx + 40*sin(frameCount*0.01);

fy number

The y-coordinate (vertical position) of the fish, kept constant slightly below the bowl center.

let fy = by + 10;

tx number

The x-coordinate of the thought bubble center, aligned with the bowl center.

let tx = bx;

ty number

The y-coordinate of the thought bubble center, positioned above the bowl.

let ty = by - 160;

frameCount number

A built-in p5.js variable that counts how many frames have been drawn since the sketch started. Used for animation timing.

Used in: frameCount*0.01 and frameCount/180

🧪 Try This!

Experiment with the code by making these changes:

Change the dreams array to your own messages like ['Pizza', 'Sleep', 'Treats']. Edit line 1 and watch the thought bubble display your new dreams.
Modify the bubble spawn chance from 0.02 to 0.05 on line 13 to create more bubbles, or change it to 0.01 for fewer bubbles. See how it affects the visual density.
Change the sine wave speed by modifying frameCount*0.01 to frameCount*0.02 on line 8. This makes the fish swim faster back and forth.
Adjust the fish color by changing fill(255,140,0) on line 9 to fill(255,0,0) for red or fill(0,255,0) for green.
Change the dream cycle speed from 180 frames to 300 frames on line 24 (frameCount/300) to make dreams change more slowly.
Modify the bowl radius from 200 to 300 on line 5 to create a bigger bowl and see how all the proportions change.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG draw() - bubble removal condition

The bubble removal boundary (by-bowlR/2-40) is hardcoded and doesn't account for the actual thought bubble position, which could cause bubbles to disappear unexpectedly or persist too long.

💡 Use a more intuitive boundary like by - bowlR/2 - 100 or define it as a constant at the top of the sketch for easier adjustment.

PERFORMANCE draw() - bubble loop

The bubble loop iterates backwards through the array every single frame, even when there are no bubbles. With many bubbles, this could impact performance.

💡 Consider using array.filter() to remove dead bubbles in one pass, or only loop if bubbles.length > 0 to skip unnecessary iterations.

STYLE sketch.js - overall code formatting

The code is heavily minified with multiple statements on single lines, making it hard to read and debug. For example, line 5 has 4 statements combined.

💡 Break lines into separate statements for clarity: put each circle(), ellipse(), and fill() call on its own line. This makes the code easier to understand and modify.

FEATURE draw() - fish animation

The fish always swims at the same speed and amplitude. The movement could be more dynamic.

💡 Add a second sine wave with different frequency for vertical bobbing: fy = by + 10 + 5*sin(frameCount*0.005) to make the fish move more naturally.

BUG draw() - dream text cycling

If the dreams array is empty or modified externally, the code could crash or display undefined. There's no validation.

💡 Add a check: if(dreams.length > 0) before accessing the dreams array, or set a default dream value.

Preview

Code flow diagram showing the structure of AI Daydreaming Fish - Dreams of the Ocean - Code flow showing setup, draw, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview