Life in Color

Objective: To create 6 designs using the same color palette.

The palette I think best represents me are the following 5 colors:

These colors were generated on the Coolors website and I immediately fell in love with them since they are reminiscent of colors found in nature. I appreciate the gradient from dark green to light green and the variety of combinations within the palette to create contrast. Ironically, these colors also resemble a palette I used to design a logo for a startup idea I had a few months ago.

Using this palette, I made 6 designs using p5.js. I decided to do all of my designs in p5.js because I wanted to blend my interests in environmental science and computer science. I incorporated interactive components within a few of my designs with a goal to invite the audience to explore within themselves.

Design 1: ZigZag

ZigZag is a program that utilizes algorithmic design. It randomly draws lines on the canvas and keeps looping forever. Over time, the canvas becomes more and more dense with lines.

Design 2: Friendly Caterpillar

Friendly Caterpillar is a program where the user controls a caterpillar on the screen. The caterpillar follows the mouse cursor around the screen. When the user clicks down on the mouse, it munches on the leaves in the background.

Design 3: Scrambled Letters

Scrambled Letters is a program that allows the user to type into the canvas by using their keyboard. The program creates an illusion that the letters are falling onto the screen and piling up as more keys are typed. When the user clicks on the screen with their mouse, the existing letters are erased from the screen.

Design 4: Foliage

Foliage is a program that is designed to resemble a collection of leaves in an abstract way while also implementing algorithmic design. As the user clicks on the canvas with their mouse, more circles randomly appear on the screen.

Design 5: Spotlight

Spotlight is a program that encourages the user to explore the canvas. It starts out with a spotlight and a message that reads “Look Around!” The spotlight moves along your cursor as you navigate the canvas. Once you find a word, it appears on the screen. Once all the words are located, the program reads “Discover Yourself. Don’t be afraid to explore!.” I downloaded the font Permanent Marker by Font Diner and used it for all the text in my program.

Design 6: Hollow

Hollow is a program that uses 3-D shapes to create an abstract moving image. There are floating torus shapes that are rotating on various axises. The user can move their cursor to orient the light in the space as well as drag/zoom around the environment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s