Click here to view my gallery!

Overview and Usage

The core functionality of my project is to create a gallery page which displays various p5 sketches, including a static image, a static artwork with randomness, an infinite loop, an interactive sketch, a sketch that outputs audio, and a sketch that creates audio and visuals based on user input. Here is a link to the GitHub repository where the code for my sketches are hosted: https://github.com/yumingt/yumingt.github.io/tree/master/project2. To run the code, simply clone the repository, and run it locally or copy the Javascript from the html files of each sketch into p5.

Here is a gif of my p5 gallery:

Development Process

Here are the steps that outline my process for this project:

1. Make drafts of Sketches 1-6 on p5.js
2. Create a gallery page and work on CSS layout
3. Link all sketches onto gallery page
4. Add screenshots/gifs of each sketch to the gallery page. Here is a screenshot of my project in an unfinished state as I was adding images to each block:

5. Create an outline of project writeup
6. Finalize writeup and link gallery to writeup page
7. Push final code to GitHub

Issue Deep-Dive

An issue that I encountered was that my sketches that involved audio did not play the audio when accessed from my gallery page even though it worked in the p5.js environment.

I resolved this problem by adding the following script tags to the head of my html code:

      
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
      
    

This fix taught me that I should always check to make sure that I've properly imported libraries before trying to use them.

Ideas and Future:

Kudos

Thank you to the p5 documentation and Hannah for providing great example code.