Creature Prototype
Creature Prototype
March 7th, 2025 by Isaac Cheaz
Prof: J.H. Moon
translate(), push() and pop()
In p5.js, the functions translate(), push(), and pop() manage how shapes and drawings are rendered in relation to the canvas. Understanding how and when to use these functions can help you organize your sketch more effectively. The push() and pop() functions in p5.js are used to manage transformations and styles in your sketch. push() saves the current state, allowing you to apply transformations or style changes (like translate(), rotate(), or fill()) to specific shapes without affecting others. After making the changes, pop() restores the previous state, ensuring that transformations and styles only affect the intended parts of the sketch. This approach helps you isolate changes and avoid unintended side effects when working with complex scenes. The translate(x, y) function is used when you want to shift the entire coordinate system by a specific amount. By calling translate(), you move the origin (0, 0) of the canvas to a new location, making it easier to position shapes relative to this new origin.
User-Defined Functions
User-defined functions allow the one coding to be able to reuse code and make things more organized. Think of user-defined functions like custom functions that have specific intructions that can be ran over and over in the other functions or in setup. Its effective because it changes how we think about coding, from a step by step linear process, to one that can be looped back. It can be compared to when animators reuse an explosion scene in multiple episodes or even mouth movements. Overall, its importance lies on its ability to reduce redundant, repetitive code.
For my code, I used a User-defined function when i was making the heart of the creature. The parameters took the X and Y position that the heart was going to be and also the size of the heart. This made the placement and tweaks to the heart much more easy...
I didn't get to use the user-defined functions that much for this creature since I didn't find it necessary. Although it would've made my code have WAY less lines. Apart from the heart of the creature, another area where I could've made changes to, adding user-defined functions, was the dots and lines, making them more customized instead of using p5js.'s default circle and line functions.
//speed
let nFrames = 200;
//how connected the lines look
let nPoints = 300;
//loops, has to be whole number or fix the pos of the second circle
let delay = 3.0;
function setup() {
createCanvas(800, 400);
background(50);
}
function draw() {
background(50);
let timing = frameCount / nFrames;
//diameter of the circles, could be changed to creatures head and tail
let diameter = 10;
let xTwo = width / 3 + 100 * cos(TWO_PI * timing);
let yTwo = height / 2 + 100 * sin(TWO_PI * timing);
let xOne = width / 2 + 30 * cos(TWO_PI * timing);
let yOne = height / 2 + 20 * sin(TWO_PI * timing);
let xThree = width / 1.4 - 100 * cos(TWO_PI * timing);
let yThree = height / 2 + 100 * sin(TWO_PI * timing);
yFour = sin(frameCount * 0.031) * 100 + 100;
xFive = height/1.1 + 50 + sin(frameCount * 0.03) * 100
line(xOne, yOne, xTwo, yTwo);
line(xOne, yOne, xThree, yThree);
line(xTwo, yTwo, 50, yFour);
line(xThree, yThree, 750, yFour);
line(xOne, yOne, xFive, 300);
fill(255);
circle(xThree, yThree, diameter);
circle(xTwo, yTwo, diameter);
circle(xOne, yOne, diameter);
circle(xFive, 300, diameter);
for (let counter = 0; counter < nPoints; counter += 1) {
let percentage = counter / nPoints;
let delayedTiming = timing - delay * percentage;
let xTwoDelayed = (3 * width) / 4 + 200 * cos(TWO_PI * delayedTiming);
let yTwoDelayed = height / 2 + 100 * sin(TWO_PI * delayedTiming);
}
//heart
fill(255, 0, 0);
heart(xOne + 5, yOne + 10, abs(sin(frameCount*0.06)*12));
function heart(x, y, size) {
beginShape();
vertex(x, y);
bezierVertex(
x - size / 2,
y - size / 2,
x - size,
y + size / 3,
x,
y + size
);
bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
endShape(CLOSE);
}
}