🌷Lab 1: Three Points in Space

CS 1004 ~ Prof. Smith

Learning Objectives

This lab aims to provide an introduction to creating your own Javascript programs using p5js. Through working on this lab assignment, you should start to become comfortable with:

• Navigating the p5js editor and environment

• Drawing with different primitive shapes to the screen

• Declaring and using variables that control key aspects of your drawing

• Identifying when there are syntax errors in your program and how to fix them

• Identifying when there is unintended behavior in your program and how to problem-solve it

Software Setup

You can choose between using the online editor at https://editor.p5js.org for this assignment or the offline Processing IDE. The p5js.org editor is easier to use and share code from, but requires an internet connection and is easier to accidentally lose code. The Processing IDE requires more setup on your computer and is harder to share code from, but lets you work offline.

p5js.org editor: Make sure to create an account on p5js.org so that your work is saved, and to save the sketch frequently! If you are using the online editor, then when submitting your code you should submit both the URL to the sketch and a downloaded zip file of the sketch (accessible from the “Hello!” menu in the top left corner -> my sketches -> “download” from the menu associated with the sketch).

Processing IDE: If you would prefer to work offline, you should download and install the Processing IDE on your computer and set up p5js mode. You can download the Processing IDE here: https://processing.org/download and follow these instructions for installing p5js mode: https://processing.org/environment/#adding-libraries-tools-and-modes

Before you start on your lab assignment, make sure to give your sketch a name! Name your sketch following this naming convention: lastname_firstname_lab1. For example, my saved lab file is smith_gillian_lab1.

Now, let’s code!

Choose What to Draw

p5.js is designed for programming visuals, including animation, interactive media, and simulations. In this first lab, we’re going to focus on visuals – no interactivity or animation quite yet.

So, to get started, think about what you want to draw and how you want to approach it. Do you want to try drawing a specific thing, like a plant or a robot? Or will you choose something more abstract, like a geometric pattern? Try to keep it simple for now. You can always add to it later.

I’ve chosen to create a flower. You should make your own choice, and follow along with the same process I describe here, but you won't have exactly the same code.

Setting Up the Scene

Start by deciding how big your drawing canvas needs to be. This is measured in pixels. Inside of the setup function, call the createCanvas function with your width and height as parameters. For example:

function setup() {
    //create a drawing canvas 200px x 400px
    createCanvas(200, 400); 
    }

From now on, all the code you write will go in the draw function, between the curly brackets after draw. First, set your background color using the background function.

//sets background to a dark cool grey (R=3,G=19,B=28)
background(3, 19, 28); 

Now, you can start drawing your picture! Start by getting a feel for using Javascript syntax. What are the shapes you will need to make your drawing? What color should the different elements of your drawing be? Where do those shapes need to go? It may help to sketch your picture on paper first.

Start drawing the first few elements of your picture. Stop when you find yourself either frustrated by adding numbers together by hand to figure out where everything goes or drawing multiple shapes with the same values for at least one parameter. Here’s where I decided to pause drawing my flower:

//turns off outlines on all shapes drawn after this line
noStroke();

//soft pink flower petal color, slightly transparent
fill(255, 237, 240, 240);

//soft pink flower petals, draw four of them
ellipse(100, 50, 100, 100); 
ellipse(150, 100, 100, 100); 
ellipse(100, 150, 100, 100); 
ellipse(50, 100, 100, 100);

//warm yellow-orange for the center of the flower
fill(242, 197, 15);

//draw center of the flower
ellipse(100, 100, 75, 75);

This flower is the output from my code thus far.

Using Variables

I was getting frustrated when drawing my flower, because all the petals have the same diameter, and I was repeating myself a lot. I want to be able to experiment with different petal sizes, but I don’t want to change all those numbers by hand. I’m going to make a new variable that controls the size of the petals.

I also realized that I was doing a lot of math by hand to figure out where the petals should go, when they are following a simple rule: each is the same distance from the center of the flower, just in a different direction. So I’m going to make three variables: one that controls that that distance is, and the other that controls the center point of the flower. Remember to declare variables with the keyword let.

//petal size
let petalSize = 100;

//how far from the center of the flower the center of each petal is
let petalOffset = 50;

//center of the flower
let flowerCenterX = 100; 
let flowerCenterY = 100;

//soft pink flower petal color, slightly transparent
fill(255, 237, 240, 240);

//soft pink flower petals, draw four of them
ellipse(flowerCenterX, flowerCenterY - petalOffset, petalSize, petalSize); 
ellipse(flowerCenterX + petalOffset, flowerCenterY, petalSize, petalSize); 
ellipse(flowerCenterX, flowerCenterY + petalOffset, petalSize, petalSize); 
ellipse(flowerCenterX - petalOffset, flowerCenterY, petalSize, petalSize);

//warm yellow-orange for the center of the flower
fill(242, 197, 15);

//draw the center of the flower
ellipse(100, 100, 75, 75);

This code draws exactly the same flower as before, but now it’s easier to make some changes. If I think the flower petals should be smaller, I only need to change one thing (the value petalSize is set to), rather than eight separate numbers! It’s also a bit easier to understand when reading it, because the variable name conveys information about the function of the code where it is used.

Playing with Parameterization

“Okay, but... it seems like I could draw this a lot faster in MS Paint. Why bother coding it?”

We know that computer programming can be considered as a literacy. Learning new skills often involves copying something familiar. When you learned how to write, you probably first learned to copy words before you learned how to independently spell. Unfortunately, it can be a bit boring.

By programming your drawing so that it depends upon variables, you’ve just parameterized your drawing. We can change the values of these variables without changing any of the drawing behavior and see different results. For example, here’s three different flowers that can all be drawn just by changing different parameters to the code above.

Three different flowers generated from the same code, with different values for the parameter variables.

Parameterization is a core underlying principle in software development and design. In fact, you’ve already used it: recall that all the values you send to functions for drawing shapes and setting colors are called parameters. Now you are creating them yourself! Try it out – what can you create with different values? When does it start to break?

Developing Your Idea

Now, keep going with your drawing! Your goal is to have three separate points in space that are directly controlled by variables. That is, the X and Y coordinates of each of these points should have its own variable: six position variables in total. In the example code provided, the three points in space are:

• The center position of the flower (flowerCenterX, flowerCenterY)

• The bottom of the flower stem (stemBaseX, stemBaseY)

• The tip of the leaf (leafTipX, leafTipY)

Furthermore, every element drawn in the scene should use at least one of these variables. You may choose to make other variables as needed. In other words, your drawing should be fully parameterized.

Reflect on What You've Learned

Take a few minutes to write down a paragraph describing what you think you’ve learned from this assignment, both in relation to the learning objectives described at the beginning of the lab assignment, and more broadly: do you feel any differently about programming now than before? If you were to start this lab again knowing what you know now, would you do anything differently? What did you find difficult and/or easy about this lab? Is there more you want to learn?

Turn It In

Submit the following for your skills lab assignment:

• Your code, as either:

  • p5js online editor: a link to the saved sketch, and a zip file of the project directory

  • Processing IDE: a zip file of the Processing directory for your lab assignment (remember to zip the full directory, not just the directory contents)

• Either:

  • a screenshot of one of the images your code creates (if the code works) OR

  • a brief description of what you think is wrong with your code (if the code doesn’t work)

• Your one paragraph reflection

Supplemental Files

Sample code for this lab is available online or for download:

692KB

cs_1004_lab_1_sample_code.zip

archive