Creative Coding

July 14, 2023

Creative Coding with p5.js 

Prior to coming to college, I had no knowledge of coding. I was entering the Emerging Media Arts program at the University of Nebraska-Lincoln hoping to become a screenwriter. As a part of the first-year curriculum, we were exposed to creative coding. Surprisingly, this knowledge became very useful later in my studies as I programmed props for use on film sets. Now, I recommend it to anyone looking to learn about coding. 

What is p5.js? 

According to their website, “p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!” 

In other words, p5.js is a coding tool that is accessible through a web browser. This allows users to be able to save and edit their work from anywhere as long as they have internet. 

Why creative coding? 

My professor chose to teach us the concepts of coding through creative coding which allowed us to see most of the functions in a visual manner. For those who are visual learners, this made the process of coding more accessible. Additionally, p5.js used words that we were familiar and comfortable with to teach coding concepts. For example, each project was called a “sketch.” Then the default base code was set up like this: 

 

function setup() { 

  createCanvas(400, 400); 

} 

  

function draw() { 

  background(220); 

} 

 

This made it clear that we were creating a canvas to work on with the setup function and we were placing things or “drawing” on the canvas when we entered code into the draw function. 

Examples 

Coding can be an overwhelming task, but starting simply and working your way up can make it seem less daunting. To see how far your students can come, here are some of my “sketches” from when I first started to learn how to code. To run the code, you will have to press the play button. Also, feel free to move your mouse around and click to see if they are interactive! 

Surprised Cat 

The Three Little Pigs 

(Hint: Click on the canvas to turn the pages). 

Haunted House 

(Hint: Press and hold on the inside of the house. Let go when you see the ghosts)! 

 

Hannah Pedersen is a senior at the University of Nebraska-Lincoln studying Emerging Media Arts with a minor in Business and Law. She has lived in Nebraska her whole life. Hannah hopes to become a creative producer of film, television, and immersive experiences before “retiring” as a professor.