Prompted in AI Studio:
Use p5.js to create an image of a pelican riding a bicycle.
Defining the Core Elements
I'm now zeroing in on defining the essential elements: a pelican and a bicycle. The task is to break down each into geometric components suitable for p5.js. I am trying to determine the most effective approach to create a visually appealing and recognizable representation of this quirky scene using the library.
Outlining the Visual Composition
I've sketched out the key geometric elements for the pelican and bicycle, aiming for a side profile view. The pelican's shape consists of a round head, a distinctive pouch, and wings to grip the handlebars. The bicycle comprises circular wheels, a triangular frame, a curved handlebar, and a small seat. I am planning a simplified background to enhance the subject's focus. I'm focusing on the structural components to define the visuals.
Planning the Visual Implementation
Now I'm moving toward the actual implementation, deciding how to structure the code. I'll use separate drawing functions within draw() which only needs to execute once, so noLoop() is appropriate. I've sketched the bicycle components and location for the wheels, frame, seat, and handlebar positions on a 600x600 canvas. Key positions are centered around (300, 400). I am determining the specific coordinates and radii.
Detailing the Pelican
I've specified the precise shapes and coordinates for the pelican's parts. The body is an ellipse at (280, 280), with width 120 and height 160. I've mapped the neck with a curve, the head as an ellipse, and the beak as a series of connected shapes. I have defined the pouch, wing, leg and foot. The background will be sky blue with green grass at the bottom. The coding is getting underway. I've started the setup function and am working on the bicycle frame.
Refining the Bike Geometry
I've pinpointed specific coordinates for the bicycle frame: the wheels, bottom bracket, seat joint, and head tube, along with a strokeWeight of 5 for the frame. I'm focusing on defining the spokes for the wheels, and then I'll finalize the tire drawings.
Adjusting the Pelican Design
I'm adjusting the pelican's design. The body's ellipse is moved to (250, 270), with an added rotation. I'm choosing a bezier curve for the neck. I'm using beginShape() to connect it to the body. The head will be an ellipse at (330, 120), and the beak will be a triangle. The pouch will be created with beginShape(), and an eye will be a small circle. I'm evaluating an arc or an angled ellipse for the wing.
Defining Wing & Leg Details
Now I'm focusing on the pelican's wing and legs. Instead of detailing the feathers, I'll stylize the wing with thick, smooth lines. I'll make the legs exaggerated for comedic effect. I am determining precise coordinates and line weights for these elements within the sketch.
Implementing the Bike Details
I'm now detailing the bicycle, starting with a red frame using specific coordinates for the back wheel, front wheel, crank, seat post, and handlebar stem. I'm focusing on drawing the lines for the frame, including the seat and handlebars, aiming for visual clarity. I have specified the colors and weights. I'm structuring the spokes to make the wheels.
Adding the Landscape Details
I'm now incorporating essential landscape elements to enrich the scene. I've begun with a vibrant sky blue background. I'm adding a yellow sun and fluffy white clouds. Below, there's grass and a road, as well. These details are now in place to draw far pelican and the bike, then the close parts of the pelican.
Finalizing the Bicycle Geometry
I'm now zeroing in on detailing the wheels and the bicycle frame. I've successfully implemented the spokes using a loop and calculated angles to distribute them uniformly. I've added the tires with a thick stroke and a dark fill to make them pop. The red frame is now in place. I have completed the lines forming the front and back triangles, with the front fork and seat.
Refining the Bike Details
I am now focusing on the final touches for the bike and pelican interaction. I've placed the seat and positioned the pelican accordingly. I've re-evaluated the origin point for the pelican's body, which is now the key to matching the bike location. I have just worked out that I will be drawing the entire pelican within the translate matrix, so now all shapes will work.
Revising Coordinate Relationships
I'm now recalibrating the pelican's coordinates in relation to the bicycle. I'm focusing on aligning the bird's body for better visual balance. I've re-mapped the body with global coordinates, so I'm now testing the use of translate and rotate, to improve the look of the bird. I'm implementing a thick neck for the pelican, with a bezier curve.
Adjusting Pelican Features
I'm now revising the pelican's visual features and remapping coordinates to create a more realistic appearance. I've switched from an overly complex wing structure to a simpler, more stylized, triangular shape. The beak is also simplified. My focus is on refining the pouch's bezier curve, using a stroke to define it clearly and working on the bird's eye.
Adding Final Details
I'm now adding finishing touches to the pelican, with an eye catchlight and some tail feathers. I've switched the pelican's legs to a cartoonish 2-segment style. I have set the leg color and weight, with a round joint. I have positioned the vertices in the correct locations for a simple, yet clear representation.
Defining the Bird Details
Now I'm focusing on defining the bird's limbs. The pelican's near wing will be a thick stroke reaching for the handlebars. The far leg connects the body to the pedal with a simplified joint. I'm adding a webbed foot for realism. The details are coming together.
Enhancing the Pelican Wing
I'm now refining the pelican's wing to integrate it more smoothly. I've adjusted the coordinates and shape. I'm focusing on the black tips of the primary feathers, ensuring a more integrated and recognizable wing shape. Now, I am adding the 'hand' holding the handlebars.
Adjusting the Pelican Geometry
I'm now revising the neck's bezier coordinates to better connect with the pelican's body. The goal is a realistic 'S' curve, which is in progress. Also, I'm reviewing the draw call order, so far the far pelican parts are first, then the bicycle, and then the pelican. The far pedal has to be behind the bicycle frame. I'm focusing on the layering for depth.
Finalizing the Bicycle Details
I'm now implementing the final layers for bicycle details, starting with the far pedal arm and bike wheels. I'm coding the spokes with a loop, then the tire rims. Then, I'm coding the red frame with stroke join and cap. I'm adding the seat and fork.
Implementing the Pedals
I'm now implementing the pedals. The far pedal is placed behind the bicycle. I am putting the near pedal inside the pelican code, so it will go over the pelican leg or the pelican's leg. I just need to determine the final location of both to get the scene composition correct. I have completed the near and far pedal coordinates.
Finalizing the Scene Elements
I'm now implementing the near pedal and evaluating the layering of its parts with the pelican's foot. I'm placing the near pedal inside the pelican code, so the foot will overlap the pedal. I've placed a light pedal clip on top.
Completing the Pelican Leg
Now I'm finalizing the pelican's near leg and foot, defining target coordinates for pedal placement. I'm ensuring the foot overlaps the near pedal for a cohesive look. I've re-positioned the near leg coordinates to have the foot and the pedal appear seamlessly connected. I'm focusing on the foot triangles.
Refining the Bird's Features
I'm now revising and coding the final touches for the pelican, specifically the features, such as the eye catchlight and some tail feathers. I've switched the wing structure to a stylized, triangular shape and a simplified beak. Also, the bezier curve defining the pouch now has a stroke for clarity.
Finalizing the Pelican Details
I'm now implementing the near hand grip for the handlebars and refining the geometry of the pelican, with a focus on its placement. I've switched the wing structure to a stylized, triangular shape and a simplified beak. Also, the bezier curve defining the pouch now has a stroke for clarity. The far pedal is placed behind the bicycle. Now, I have fully integrated the hand, which fits perfectly with the bike.
Adding the Final Touches
I'm now implementing the sun, clouds, grass, and road for the background. I'm adding subtle details to enrich the scene. I have calculated coordinates and colors to enhance visual appeal. The sun is now a yellow circle with rays. I've added a green grass patch and a road. I've focused on subtle, yet effective, additions. The bike is framed beautifully!
Adding the Final Touches
I'm now implementing the shadow to ground the bike, adding depth with subtle details. I've also verified key pelican proportions to enhance its exaggerated features. The beak and pouch curves are perfect. I've also decided to add a little mouth line over the beak, so it looks better.
Adding the Helmet Details
I'm now contemplating adding a playful touch: a helmet for the pelican, perhaps to emphasize bicycle safety. I've sketched a blue arc for the helmet, adjusting the strap's bezier curve, ensuring the helmet sits correctly on the head. Then, I realized the pouch may obstruct the strap, so I'll just keep the image as it is.
Adding the Fishy Detail
Now I'm adding a fun element: a little fish sticking out of the pelican's pouch! I'll keep the pouch solid, so it won't be translucent. I'm focusing on the position of the fish tail. I'll define it with a triangle and ellipse, rotating it appropriately. I am working on the exact placement to avoid obscuring the beak or the bicycle elements.
Evaluating Pelican Overlap
I'm now zeroing in on the pelican's positioning on the bike, which looks correct. I'm satisfied the bird's body overlaps the seat. I've confirmed that the pelican's neck smoothly connects to its body. The bike wheels and spokes are also tested and confirmed. Also, the handlebars and grip position look good.
Refining the Handlebars
I am now focusing on the handlebars and re-evaluating the current handlebar arc and stem. I have simplified the design with straight lines and an arc for better visual feedback. I've re-coded the handlebars, and am planning a classic curved approach. After several iterations, I will try a bezier curve.
Simplifying the Handlebars
I've simplified the handlebars, opting for a swept-back line design for a cleaner look. The new code creates an elegant curved grip. I'm satisfied now that the handlebars' grip coordinate perfectly matches the pelican's near wing line. I am fine-tuning the pelican's wing to integrate this new grip seamlessly.
Finalizing the Scene
I'm now integrating the final, stylized handlebars. The grip coordinates now align seamlessly with the pelican's wing. After refining the visual integration with new coordinates, I've rechecked the bike frame. I have a cohesive scene now.
Reviewing Background Elements
I'm now integrating final details, like a feathery crest on the pelican's head. I have confirmed the bike's frame. I'm reviewing colors and ensuring good visual contrast for the sky, sun, clouds, grass, road and bike.
Adjusting Pelican Color & Contrast
I am now focusing on refining color choices to ensure visual pop. I've re-evaluated the pelican's body color to floral white #FFF8F0 for contrast against the sky. I am also planning to rely on color differences for definition in the flat illustration. The stroke from the previous iterations will be omitted for simplicity.
Updating Color and Style
I'm now implementing the color changes with hex codes. I've defined constants for the pelican's white, shadow, pouch, beak, legs, and bike red. The code is much cleaner, and easier to read. I have updated the pelican's tail feathers as well.
Refining the Bird Details
I'm now implementing the near leg coordinates, the foot triangle, and re-positioning the body, head, and neck. I'm coding the fluff on the head, the eye and beak, as well.
Finalizing the Pelican Details
I'm now implementing the near and far leg details. The code now defines the far leg's stroke weight and cap. Also, the hand grip and the near wing are now correct. I'm focusing on the pelican's head. The beak is correct, and I'm refining the pouch using bezier and line techniques.
Finalizing the Scene Colors
I'm now integrating the final bicycle wheel spoke and pedal layers, ensuring visual harmony with the scene. I have tested the visual flow of drawing order. The far pedal is positioned behind the bicycle. I have confirmed the bike's red frame, with stroke and cap. I'm satisfied now with the pelican.
Finalizing the Scene Colors
I'm now satisfied with the bike, and I have just implemented the handlebar, seat, and fork. The pedal layers and spoke are complete. I have now completed the entire bike frame, including the wheel lines and spokes. Also, the drawing order has been thoroughly checked.
Confirming Scene Integration
I'm now confirming the seamless integration, the code for handlebars, pedal, and grip work perfectly, and I've verified the drawing order. I'm satisfied now that the near pedal and grip coordinate perfectly with the pelican. The background layering is complete.
Confirming Draw Order
I'm now confirming the drawing order to ensure correct visual layering. The far pedal, bicycle frame, and near pedal are drawn first. Next comes the pelican's near leg, wing, body, head, and beak. The near pedal arm, which is part of the bicycle, is now correctly drawn over the bicycle frame and under the pelican's foot. The pelican's "hand" (near wing) is now drawn over the handlebars and grip, creating the right visual effect. I am implementing the clouds, now.
I'm making the clouds fluffy.
function drawClouds() {
fill(255, 255, 255, 220);
noStroke();
// Cloud 1
ellipse(200, 120, 120, 40);
ellipse(230, 100, 80, 50);
}Refining the Background
I'm now adding fluffy clouds for visual enhancement, and I have just added motion lines to the design. I have made the clouds and wind lines. I am reviewing the code, and there are no external assets. I have checked for all definitions. Finally, I'm adjusting the pelican's body to create a more whimsical look.
Adjusting Pelican's Anatomy
I'm now revising the pelican's anatomy based on the previously-missed shoulder alignment. The near wing's coordinate shift is now accurate; the correct origin is on the body. The goal is a natural visual flow from the body to wing. I am evaluating new wing shape parameters.
Refining the Pelican Wing
I'm now iterating on the pelican's near wing, calculating precise coordinates to link it to the handlebars. I'm focusing on creating the 'shoulder' with a thick line that ensures it connects visually. This simplifies the shape. I'm also adding black tips at the end. I've re-written the wing code for guaranteed connection with the shoulder at (310, 230).
Finalizing the Pelican's Wings
I've precisely defined the near wing's wrist and grip coordinates, ensuring a seamless visual flow. I have also coded the far wing with solid lines to match. Canvas dimensions have been verified. I'm verifying the draw order with a focus on pedal and wing.
Confirming Visual Layering
I'm now confirming the visual layering, focusing on the bike's far pedal. The current approach will have the pedal sit over the foot, which is acceptable in this cartoon style for depth. I will leave the pedal in the bicycle draw() function. I also have confirmed the wheel spoke placement.
Run the sketch here to see the image.
// A whimsical p5.js sketch of a pelican riding a bicycle.
const pelicanWhite = '#FDF5E6';
const pelicanShadow = '#DCD3C0';
const pouchColor = '#FF9900';
const beakColor = '#FFCC00';
const legColor = '#FF8800';
const farLegColor = '#CC6600';
const bikeRed = '#D92525';
function setup() {
createCanvas(800, 600);
angleMode(DEGREES);
noLoop(); // We only need to draw this static scene once
}
function draw() {
drawBackground();
drawFarPelicanParts();
drawBicycle();
drawPelican();
drawMotionLines();
}
function drawBackground() {
// Sky
background(135, 206, 235);
// Sun
fill(255, 220, 0);
noStroke();
circle(700, 100, 100);
// Sun rays
stroke(255, 220, 0);
strokeWeight(4);
for (let i = 0; i < 360; i += 45) {
let x1 = 700 + cos(i) * 65;
let y1 = 100 + sin(i) * 65;
let x2 = 700 + cos(i) * 85;
let y2 = 100 + sin(i) * 85;
line(x1, y1, x2, y2);
}
// Fluffy Clouds
fill(255, 255, 255, 230);
noStroke();
// Cloud 1
ellipse(200, 120, 120, 40);
ellipse(230, 100, 80, 50);
ellipse(170, 110, 70, 40);
// Cloud 2
ellipse(600, 160, 140, 50);
ellipse(640, 140, 90, 60);
ellipse(560, 150, 80, 50);
// Cloud 3
ellipse(350, 80, 100, 30);
ellipse(370, 65, 60, 40);
// Ground / Grass
fill(85, 170, 85);
rect(0, 480, width, 120);
// Road
fill(140);
rect(0, 510, width, 60);
// Road lines
stroke(255);
strokeWeight(4);
for (let x = 20; x < width; x += 60) {
line(x, 540, x + 30, 540);
}
// Drop shadow under the bike
fill(0, 0, 0, 40);
noStroke();
ellipse(400, 515, 500, 20);
}
function drawFarPelicanParts() {
// Far leg
stroke(farLegColor);
strokeWeight(12);
strokeJoin(ROUND);
strokeCap(ROUND);
noFill();
beginShape();
vertex(290, 280); // Hip
vertex(320, 340); // Knee
vertex(355, 400); // Pedal connection
endShape();
// Far foot
fill(farLegColor);
noStroke();
triangle(350, 395, 390, 400, 380, 415);
// Far wing reaching for handles
stroke(pelicanShadow);
strokeWeight(30);
strokeCap(ROUND);
line(310, 220, 450, 245);
}
function drawBicycle() {
let bwX = 240, bwY = 430; // Back Wheel
let fwX = 560, fwY = 430; // Front Wheel
let cX = 380, cY = 430; // Crank/Pedal Hub
let sX = 300, sY = 290; // Seat
let hX = 500, hY = 270; // Handlebars
push();
// --- Far Pedal Arm & Pedal ---
stroke(120);
strokeWeight(8);
strokeCap(ROUND);
line(cX, cY, cX - 25, cY - 30);
fill(40);
noStroke();
rectMode(CENTER);
rect(cX - 25, cY - 30, 26, 12, 4);
// --- Wheels and Spokes ---
strokeWeight(2);
stroke(150);
for (let i = 0; i < 360; i += 20) {
let dx = cos(i) * 80;
let dy = sin(i) * 80;
line(bwX, bwY, bwX + dx, bwY + dy);
line(fwX, fwY, fwX + dx, fwY + dy);
}
// Tires
stroke(40);
strokeWeight(12);
noFill();
circle(bwX, bwY, 160);
circle(fwX, fwY, 160);
// Inner rims
stroke(200);
strokeWeight(4);
circle(bwX, bwY, 144);
circle(fwX, fwY, 144);
// --- Bicycle Frame ---
stroke(bikeRed);
strokeWeight(8);
strokeJoin(ROUND);
strokeCap(ROUND);
line(bwX, bwY, cX, cY); // Chainstay
line(bwX, bwY, sX, sY); // Seatstay
line(cX, cY, sX, sY); // Seat tube
line(cX, cY, hX, hY); // Down tube
line(sX, sY, hX, hY); // Top tube
// Front fork
stroke(180);
line(hX, hY, fwX, fwY);
// --- Seat ---
stroke(150);
strokeWeight(6);
line(sX, sY, sX, sY - 15); // Seat post
fill(30);
noStroke();
rectMode(CENTER);
rect(sX - 5, sY - 15, 50, 15, 8); // Saddle
// --- Handlebars ---
stroke(180);
strokeWeight(8);
strokeJoin(ROUND);
strokeCap(ROUND);
noFill();
beginShape();
vertex(hX, hY); // Stem top
vertex(hX - 10, hY - 30); // Curve back
vertex(hX - 40, hY - 15); // Grip position
endShape();
// Grip cover
stroke(40);
strokeWeight(10);
line(hX - 30, hY - 20, hX - 40, hY - 15);
// --- Crank Hub ---
fill(80);
noStroke();
circle(cX, cY, 24);
fill(150);
circle(cX, cY, 12);
// --- Near Pedal Arm & Pedal ---
stroke(180);
strokeWeight(8);
strokeCap(ROUND);
line(cX, cY, cX + 25, cY + 30);
fill(40);
noStroke();
rectMode(CENTER);
rect(cX + 25, cY + 30, 26, 12, 4);
pop();
}
function drawPelican() {
// Tail feathers
fill(pelicanWhite);
noStroke();
triangle(230, 240, 160, 290, 240, 300);
fill(40);
triangle(190, 275, 150, 295, 200, 300);
// Near leg
stroke(legColor);
strokeWeight(12);
strokeJoin(ROUND);
strokeCap(ROUND);
noFill();
beginShape();
vertex(290, 280); // Hip
vertex(360, 360); // Knee
vertex(405, 460); // Pedal connection
endShape();
// Near Foot
fill(legColor);
noStroke();
triangle(395, 455, 435, 460, 425, 475);
// Body (Tilted forward)
fill(pelicanWhite);
noStroke();
push();
translate(290, 220);
rotate(15);
ellipse(0, 0, 150, 200);
pop();
// Neck (S-Curve)
stroke(pelicanWhite);
strokeWeight(45);
strokeCap(ROUND);
noFill();
bezier(290, 160, 310, 80, 360, 120, 410, 70);
// Feather Fluff on back of head
fill(pelicanWhite);
noStroke();
triangle(375, 50, 400, 70, 365, 80);
triangle(380, 45, 410, 60, 385, 70);
// Head
noStroke();
fill(pelicanWhite);
ellipse(410, 70, 70, 60);
// Eye
fill(0);
circle(425, 60, 8);
fill(255);
circle(426, 59, 3); // Catchlight
// Beak Top
fill(beakColor);
beginShape();
vertex(420, 55);
vertex(560, 70);
vertex(420, 70);
endShape(CLOSE);
// Huge Pouch
fill(pouchColor);
stroke('#CC7700');
strokeWeight(2);
beginShape();
vertex(420, 70);
vertex(560, 70);
// Control point 1, Control point 2, End point (throat)
bezierVertex(540, 160, 440, 160, 390, 90);
endShape(CLOSE);
// Mouth Line defining the split between beak and pouch
stroke('#CC7700');
strokeWeight(3);
noFill();
line(420, 70, 560, 70);
// Near Wing (Folded/extended to grip)
stroke(pelicanWhite);
strokeWeight(40);
strokeCap(ROUND);
line(310, 230, 430, 260);
// Black primary feathers on wing tip
push();
translate(435, 260);
rotate(10);
fill(40);
noStroke();
ellipse(0, 0, 60, 25);
pop();
// Grip / "Hand" reaching the handlebar
stroke(pelicanWhite);
strokeWeight(12);
line(435, 255, 460, 255);
}
function drawMotionLines() {
// Speed lines to emphasize movement
stroke(255, 255, 255, 180);
strokeWeight(3);
strokeCap(ROUND);
line(100, 350, 160, 350);
line(50, 380, 130, 380);
line(120, 250, 180, 250);
line(700, 300, 750, 300);
line(650, 220, 720, 220);
}