Draw a Sprite with P5js
Version 1.0
P5js is a coding language and platform that makes it easy to create and share sketches, animations, and games right in the browser. It's based on JavaScript, the web's native programming language, but has special syntax for drawing and animating shapes.
⚠️ You have to manually save your sketch if you want it to auto-save in future.
🎩 Click Auto-refresh at upper left to auto-play your sketch after any change.
⚠️ Pressing Cmd-S can at times summon a dialog box for saving to your hard drive. To avoid that, choose File > Save with your cursor inside the editor.
Where to put your commands:
setup() // Put commands here that set the general conditions of your sketch.
createCanvas(400, 300) // Sets the size of your sketch.
draw() // Put commands here that happen every time your sketch refreshes (60 times per second)
Choosing your paintbrush and colors:
fill("turquoise") // The color inside a shape.
stroke("teal") // The color of the shape's border.
strokeWeight(6) // The width in pixels of the border.
noFill() // Give the shape a transparent body.
noStroke() // Remove any border from the shape.
Setting a color affects all shapes drawn below.
Indenting your code doesn't change the output but makes it more readable!
What do the numbers in the parentheses ("arguments") mean?
// Draw a rectangle or square.
rect(10, 10, 50, 30); // The arguments are the x, y position and width, height of the rectangle.
// Draw an ellipse or circle.
ellipse(30, 30, 40, 60); // The arguments are the x, y position and width, height.
// Draw an advanced shape.
line(10, 20, 50, 20); // The arguments are the points x1, y1 and x2, y2.
triangle(30, 75, 58, 20, 86, 75); // Thede arguments are the x, y of the three points.
quad(189, 18, 216, 18, 216, 360, 144, 360); // The arguments are the x, y of all four corners of the quadrilateral.
arc(479, 300, 280, 280, 180, 360); // The arguments are the x, y position, width, height, and the start and stop angle.
angleMode(DEGREES); // Put this in setup to use degrees out of 360 for the last two arguments of arc().
You can use many common English words for colors if you wrap them in quotes inside fill() or stroke(), eg fill("magenta").
Start a new sketch called something like "Mary's avatar." Using a variety of P5js shapes and colors create a icon that will represent you for this class. The icon can be abstract or represent a person or animal, as long as it's distinctive and can be read at a small scale, like the size of the Slack icon. If you can't think of a picture to represent you, just draw your initials with some colors that feel right for you (make them from shapes, not actual text). Here's an example of initials made with code.
Your overall shape should be roughly squarish in dimensions. Don't worry if it doesn't fill the canvas, so that it will make a good thumbnail. Add translate() and scale() commands at the top of your draw() function to center and size your avatar to fill the square.
Instead of submitting to a Slack channel, just make this your Slack profile picture by clicking on your user thumbnail at upper right, then choosing Edit Profile.
Add a conditional (if statement) that changes its appearance--fill, stroke, scale, position, anything--when the user clicks the mouse.
Boring example • Less boring example
Browsers, like people, read from the top down. Whatever you write below can overwrite what's written above.
Default to angleMode(RADIANS), but you can switch to angleMode(DEGREES)
Default to rectMode(CORNER), but you can switch to rectMode(CENTER)
Default to ellipseMode(CENTER), but you can switch to ellipseMode(CORNER)
⚠️ Watch out for Bermuda triangles!
mouseIsPressed: a variable true as long as the user is holding the mouse down.
Example: click to show a bunny's winter fur:
fill("brown"); // Start with normal fur.
if (mouseIsPressed) {
fill("white"); // If it's wintertime, blend in with the snow!
}
ellipse(10, 10, 50); // Draw the bunny.