Overview and Usage

The task for this project was to create a sketch gallery of six sketches using the p5.js library.

Sketch One: Static
Sketch Two: Random
Sketch Three: Infinite Loop
Sketch Four: Interactive
Sketch Five: Audio
Sketch Six: Audio and Visuals

Sketch Gallery

The sketch gallery can be found here on the "Sketch Gallery [MP2: Creative Coding Explorations]" page. To view each individual sketch on it's own page, click on the sketch title.

Development Process

p5.js documentation

1. Read documentation.

To start, I read through the Getting Started documentation and References to familiarize myself with the p5.js library.

p5.js Web Editor

2. Create sketches on Web Editor.

Once familiar with the p5.js library, I opened a new sketch on the Web Editor to start on the sketches for the gallery. I used the Web Editor as it has an embedded canvas so I could quickly iterate on the sketches and see changes without needing to refresh the page.

Sketch code copied over to new JavaScript file

3. Move sketches to portfolio site.

After I was happy with how all the sketches looked, I copied over the code for my sketches to new JavaScript files.

Live Server

4. Sketch in Live Server

Once the sketch code was copied over to a new JavaScript file, I opened the file in Live Server to see how it looked on a webpage. I made slight tweaks to the dimensions of shapes and position of text based on how it looked in the Live Server page until I was happy with how everything looked.

Skeleton template of gallery layout

5. Create Skeleton Gallery.

I then created a skeleton of the gallery using a grid display. To format the sketch image and sketch title layout, I copied over how I had displayed project images and project titles from my Projects page.

Live Server

6. Embed Sketches into Gallery

Once the grid display was set up, I embedded the sketches using the iframe HTML code:


  <iframe src = "sketches/s1/s1.html"></iframe>

Issue Deep-Dive

Issue: Low-Quality Gifs of Sketches

One issue I encountered was when I first added the GIFs of the sketches, they appeared really low-quality and pixelated. I didn't like the look of this as it made it difficult to tell what was going on in the sketch. My method of adding the GIFs of the sketches was to screen record a .mov file then convert to .gif file and use the <a> HTML tag to hyperlink with a GIF, but I found that GIFs often have low resolution compared to static images like JPGs and PNGs because the videos are compressed into video sequences.

I looked up online if there was a way to display a page inside another page using HTML, and I found iframe documentation on the W3 Schools website. I learned that iframe is used to display a web page within another web page. How this works is that the <iframe> tag is an inline frame, which embeds another document within the current HTML document. I found using the iframe tag quite helpful in linking the interactive sketches as it kept the resolution high and no pixelation occurred.

Pixelated and Blurry Gifs

Ideas & Future Work

Here are some additional ideas and features I would like to add to my gallery sketches in the future!

Include a way to change the song that is played for sketch 5 (like choosing the song based on whichever keyboard key is pressed)
Change the size of the circle for the cursor pen based on speed the cursor is moving
Change the cursor pen to a more complex shape (like maybe a star or flower)
Add more notes so the keyboard player for sketch 6 so it can play more complex music besides twinkle twinkle little star

Kudos

Kudos to these helpful online resources! And special thanks to Hannah, Raina, and other peers as well :)