AI Vine Writer - Type to Grow Organic Vines

This sketch creates an interactive typing experience where each keystroke spawns an organic vine that grows upward from the cursor position. Vowels bloom into colorful flowers with glowing centers, while consonants sprout green leaves. The vines use Perlin noise for natural, curved movement and fade away after reaching their maximum length, creating a meditative visual effect.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Keyboard inputArray managementPerlin noiseConditional renderingColor mappingCanvas animationObject propertiesResponsive canvas

🔄 Code Flow

Code flow showing setup, draw, drawvine, keytyped, windowresized

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

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> backgroundfade[background-fade] draw --> vineloop[vine-loop] vineloop --> vinegrowth[vine-growth] vinegrowth --> vinecleanup[vine-removal] vinecleanup --> draw draw --> segmentloop[segment-loop] segmentloop --> noiseoffset[noise-offset] noiseoffset --> positioncalc[position-calculation] positioncalc --> radiusmap[radius-mapping] segmentloop --> vowelrender[vowel-rendering] segmentloop --> consonantrender[consonant-rendering] consonantrender --> leafgen[leaf-generation] click setup href "#fn-setup" click draw href "#fn-draw" click backgroundfade href "#sub-background-fade" click vineloop href "#sub-vine-loop" click vinegrowth href "#sub-vine-growth" click vinecleanup href "#sub-vine-removal" click segmentloop href "#sub-segment-loop" click noiseoffset href "#sub-noise-offset" click positioncalc href "#sub-position-calculation" click radiusmap href "#sub-radius-mapping" click vowelrender href "#sub-vowel-rendering" click consonantrender href "#sub-consonant-rendering" click leafgen href "#sub-leaf-generation" draw --> keytyped[keytyped] keytyped --> inputvalid[input-validation] inputvalid --> vineobjcreate[vine-object-creation] vineobjcreate --> vowelcheck[vowel-detection] vowelcheck --> colorassign[color-assignment] click keytyped href "#fn-keytyped" click inputvalid href "#sub-input-validation" click vineobjcreate href "#sub-vine-object-creation" click vowelcheck href "#sub-vowel-detection" click colorassign href "#sub-color-assignment" draw --> windowresized[windowresized] click windowresized href "#fn-windowresized"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It initializes the canvas size, sets the background color, and configures drawing settings. Using windowWidth and windowHeight makes the sketch responsive to browser resizing.

function setup(){
  createCanvas(windowWidth,windowHeight);
  background(5,30,10);
  noStroke();
}

Line by Line:

createCanvas(windowWidth,windowHeight): Creates a canvas that fills the entire browser window, making the sketch responsive to window size
background(5,30,10): Sets the initial background to a very dark green color (RGB: 5,30,10), creating a nature-like dark canvas
noStroke(): Disables stroke (outline) for all shapes, so only filled shapes will be drawn

`draw()`

draw() runs 60 times per second, creating the animation. Each frame, we fade the background slightly (creating trails), update all vines' growth, remove old vines, and redraw everything. The semi-transparent background creates a ghosting effect where vines fade gradually.

function draw(){
  background(5,30,10,25);
  for(let i=vines.length-1;i>=0;i--){
    let v=vines[i];
    v.t+=1.8;
    if(v.t>v.max+60){vines.splice(i,1);continue;}
    drawVine(v);
  }
}

🔧 Subcomponents:

calculation Semi-transparent Background background(5,30,10,25)

Redraws background with low alpha (25) to create a fade trail effect instead of clearing completely

for-loop Vine Update Loop for(let i=vines.length-1;i>=0;i--)

Iterates through all vines in reverse order (important for safe array removal)

calculation Vine Growth v.t+=1.8

Increments the vine's growth progress by 1.8 units per frame

conditional Vine Cleanup if(v.t>v.max+60){vines.splice(i,1);continue;}

Removes vines from the array after they've grown beyond their maximum length plus 60 frames

Line by Line:

background(5,30,10,25): Redraws the background with transparency (alpha=25), creating a fade effect where old vines gradually disappear instead of being instantly erased
for(let i=vines.length-1;i>=0;i--): Loops through the vines array backwards (from last to first). This is crucial because we're removing items from the array during iteration
let v=vines[i]: Creates a shorthand reference to the current vine object for easier access
v.t+=1.8: Increases the vine's growth time by 1.8 each frame, controlling how much of the vine is visible
if(v.t>v.max+60){vines.splice(i,1);continue;}: Checks if the vine has grown beyond its maximum length plus 60 frames. If so, removes it from the array and skips to the next iteration
drawVine(v): Calls the drawVine function to render the current vine on the canvas

`drawVine(v)`

drawVine() is called for each vine every frame. It draws the vine segment-by-segment, using Perlin noise to create natural curves. The key insight is that we only draw up to v.t (current growth), so the vine appears to grow gradually. Vowels create flower-like blooms with glowing tips, while consonants create leafy green stems.

function drawVine(v){
  for(let i=0;i<v.t&&i<v.max;i+=4){
    let off=i*0.03;
    let yy=v.y-i,xx=v.x+(noise(v.seed+off)-0.5)*60;
    let r=map(i,0,v.max,7,1);
    if(v.isVowel){
      fill(v.col[0],v.col[1],v.col[2],210);
      ellipse(xx,yy,r+1,r+1);
      if(i>v.t-14){
        fill(255,240,200,220);
        ellipse(xx,yy,r+4,r+4);
      }
    }else{
      fill(40,130,70,220);
      ellipse(xx,yy,r,r);
      if(noise(v.seed*2+off)>0.78){
        fill(70,170,90,220);
        let s=r*2;
        triangle(xx,yy-s,xx-s,yy,xx+s,yy);
      }
    }
  }
}

🔧 Subcomponents:

for-loop Vine Segment Loop for(let i=0;i<v.t&&i<v.max;i+=4)

Iterates through segments of the vine, stepping by 4 pixels, drawing only up to the current growth time

calculation Noise Offset Calculation let off=i*0.03

Creates a smooth offset value for Perlin noise to vary the vine's curvature

calculation Segment Position let yy=v.y-i,xx=v.x+(noise(v.seed+off)-0.5)*60

Calculates the x,y position of each segment, with y moving upward and x using noise for organic curves

calculation Segment Radius let r=map(i,0,v.max,7,1)

Maps the segment position to a radius, making the vine thinner as it grows upward

conditional Vowel Flower Rendering if(v.isVowel){...}

Draws colored circles for vowels, with a glowing effect at the growing tip

conditional Consonant Leaf Rendering }else{...}

Draws green circles for consonants with occasional leaf shapes based on noise

conditional Leaf Sprouting if(noise(v.seed*2+off)>0.78){...}

Randomly generates leaf shapes on consonant vines based on Perlin noise

Line by Line:

for(let i=0;i<v.t&&i<v.max;i+=4): Loops through the vine in 4-pixel segments, from 0 up to either the current growth time (v.t) or maximum length (v.max), whichever is smaller
let off=i*0.03: Creates a small offset value that changes smoothly with position, used to feed into the noise function for natural variation
let yy=v.y-i: Calculates the y position by starting at the spawn point (v.y) and moving upward (subtracting i)
xx=v.x+(noise(v.seed+off)-0.5)*60: Calculates the x position using Perlin noise to create organic curves. The noise value (0-1) is shifted to (-0.5 to 0.5) and scaled by 60 for horizontal variation
let r=map(i,0,v.max,7,1): Maps the segment's position along the vine to a radius, starting thick (7) at the base and tapering to thin (1) at the tip
if(v.isVowel): Checks if this vine was spawned by a vowel keystroke
fill(v.col[0],v.col[1],v.col[2],210): Sets the fill color to the vine's assigned color (pink or yellow) with high opacity (210)
ellipse(xx,yy,r+1,r+1): Draws a circle at the segment position with radius r+1, forming the main body of the flower
if(i>v.t-14): Checks if this segment is near the growing tip (within 14 pixels of the current growth point)
ellipse(xx,yy,r+4,r+4): Draws a larger glowing circle around the tip to create a bloom effect
fill(40,130,70,220): Sets the fill color to dark green for consonant vine segments
ellipse(xx,yy,r,r): Draws a green circle at the segment position, forming the main stem
if(noise(v.seed*2+off)>0.78): Uses Perlin noise to randomly decide if a leaf should appear at this segment (78% threshold means leaves appear about 22% of the time)
let s=r*2: Calculates the leaf size based on the segment radius
triangle(xx,yy-s,xx-s,yy,xx+s,yy): Draws a triangle pointing upward to represent a leaf shape

`keyTyped()`

keyTyped() is a p5.js function that runs whenever a key is pressed. This sketch uses it to spawn new vines at the mouse position. Each vine is an object storing position, growth state, color, and a noise seed. The vowel detection creates visual variety—vowels become colorful flowers while consonants become green leaves.

function keyTyped(){
  if(key.length!==1)return;
  let v={
    x:mouseX,y:mouseY,seed:random(1000),
    isVowel:vowels.indexOf(key)>-1,
    t:0,max:random(80,180),col:[0,0,0]
  };
  if(v.isVowel)v.col=random([[255,150,200],[255,220,120]]);
  vines.push(v);
}

🔧 Subcomponents:

conditional Input Validation if(key.length!==1)return

Ignores non-character keys (like Shift, Enter, etc.) and only processes single character inputs

calculation Vine Object Creation let v={...}

Creates a new vine object with all necessary properties for growth and rendering

conditional Vowel Detection isVowel:vowels.indexOf(key)>-1

Checks if the typed character is in the vowels string, determining vine type

conditional Color Assignment if(v.isVowel)v.col=random([[255,150,200],[255,220,120]])

Randomly assigns either pink or yellow color to vowel vines

Line by Line:

if(key.length!==1)return: Checks if the key is a single character. If not (like special keys), the function exits early without creating a vine
let v={: Starts creating a new vine object that will store all information about this vine
x:mouseX,y:mouseY: Sets the vine's starting position to the current mouse coordinates
seed:random(1000): Assigns a random seed value to the vine, used for consistent Perlin noise generation throughout the vine's lifetime
isVowel:vowels.indexOf(key)>-1: Determines if the typed key is a vowel by checking if it exists in the vowels string. Returns true if found, false otherwise
t:0,max:random(80,180): Sets the vine's growth time to 0 (just starting) and assigns a random maximum length between 80 and 180 pixels
col:[0,0,0]: Initializes the color array with black [0,0,0]. This will be overwritten for vowels with actual colors
if(v.isVowel)v.col=random([[255,150,200],[255,220,120]]): If the vine is from a vowel, randomly picks either pink [255,150,200] or yellow [255,220,120] as the color
vines.push(v): Adds the newly created vine object to the vines array, making it appear on the canvas

`windowResized()`

windowResized() is a p5.js function that automatically runs whenever the browser window is resized. This keeps the sketch responsive—the canvas always fills the entire window and the background is reset to prevent visual glitches.

function windowResized(){
  resizeCanvas(windowWidth,windowHeight);
  background(5,30,10);
}

Line by Line:

resizeCanvas(windowWidth,windowHeight): Resizes the canvas to match the new window dimensions when the browser window is resized
background(5,30,10): Redraws the background to clear any artifacts and reset the canvas to the dark green color

📦 Key Variables

vines array

Stores all active vine objects. Each vine object contains position, growth state, color, and noise seed. Vines are added when keys are typed and removed when they finish growing.

let vines=[];

vowels string

Contains all vowel characters (both lowercase and uppercase). Used to determine if a typed key should create a flower vine or a leaf vine.

let vowels="aeiouAEIOU";

v (in draw loop) object

Shorthand reference to the current vine being processed in the draw loop. Contains properties: x, y, seed, isVowel, t, max, col.

let v=vines[i];

v.x number

The horizontal position where the vine was spawned (set to mouseX when key was typed)

x:mouseX

v.y number

The vertical position where the vine was spawned (set to mouseY when key was typed)

y:mouseY

v.seed number

A random seed value used for Perlin noise generation. Ensures each vine has unique, consistent curves throughout its lifetime.

seed:random(1000)

v.isVowel boolean

True if the vine was spawned by a vowel keystroke, false if by a consonant. Determines whether to draw flowers or leaves.

isVowel:vowels.indexOf(key)>-1

v.t number

Current growth time of the vine. Incremented by 1.8 each frame. Controls how much of the vine is visible (grows from 0 to v.max).

t:0

v.max number

Maximum length of the vine in pixels. Randomly assigned between 80 and 180 when the vine is created. Determines how tall the vine grows.

max:random(80,180)

v.col array

RGB color array [R, G, B] for the vine. Vowels get pink [255,150,200] or yellow [255,220,120], consonants stay black [0,0,0].

col:[255,150,200]

🧪 Try This!

Experiment with the code by making these changes:

Change the growth speed by modifying v.t+=1.8 to v.t+=3.5 in the draw() function (around line 7). This makes vines grow much faster. Try different numbers to find a speed you like.
Modify the vowel colors in keyTyped() function. Change [255,150,200] to [255,0,255] for magenta or [0,255,255] for cyan. See how different color combinations look.
Increase the noise variation by changing the 60 multiplier in drawVine() (line 18: xx=v.x+(noise(v.seed+off)-0.5)*60) to 100 or 150. This makes vines curve more dramatically.
Add more consonant leaf types by modifying the triangle() call in drawVine(). Try drawing different shapes like quads or multiple triangles to create varied leaf patterns.
Change the background fade effect by modifying the alpha value in background(5,30,10,25) to a higher number like 50 or 100. Higher values make trails disappear faster.
Adjust the leaf spawn rate by changing the 0.78 threshold in the noise check (line 33: if(noise(v.seed*2+off)>0.78)) to 0.5 or 0.9. Lower values create more leaves, higher values create fewer.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE draw() function, vine loop

Looping backwards through the vines array is correct for removal, but the sketch could be more efficient by checking vine removal conditions before drawing rather than after.

💡 Move the removal check before drawVine() call to avoid drawing vines that are already expired: if(v.t>v.max+60){vines.splice(i,1);continue;} before drawVine(v);

BUG drawVine() function, segment loop

The loop condition i+=4 skips every 4th pixel, which can cause visual gaps in the vine if the growth speed (1.8) doesn't align well with the step size. This might create flickering or discontinuous vines.

💡 Use i+=2 or i+=3 for smoother vines, or consider using a while loop with dynamic step sizing based on the vine's current thickness.

STYLE keyTyped() function

The vowels string is global and hardcoded. If you wanted to support other languages or change vowel detection, it would require modifying the global variable.

💡 Create a function like isVowel(char) that encapsulates this logic, making the code more modular and reusable.

FEATURE drawVine() function

Consonant leaves are generated randomly but don't have any visual variation—they're all the same size and shape. This makes them less organic.

💡 Vary leaf size based on the segment radius and add rotation using push(), rotate(), and pop() to create more natural-looking leaf orientations.

BUG draw() function, background fade

The semi-transparent background with alpha=25 creates trails, but on slower devices this could cause performance issues and visual artifacts from accumulated transparency.

💡 Consider adding a frameRate() call in setup() to cap the frame rate, or use a slightly higher alpha value (like 40-50) for better performance while maintaining the fade effect.

Preview

Code flow diagram showing the structure of AI Vine Writer - Type to Grow Organic Vines - Code flow showing setup, draw, drawvine, keytyped, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

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