Creative Coding: Spring 2024

Using P5js Shape commands, create a digital portrait of a person of your choosing. Make sure to:

1. Use at least 6 shapes commands. (5 points)
2. Use fill() and background() commands. (5 points)

Create a static piece of album art for a song of your choosing.

Create a P5js sketch, code included, that contains:

1. An arrangement of 6 or more different shape functions as found in the P5js reference, positioned into a work of album art. 60pt
2. Evidence of shape attribute manipulation (fill, alpha, corner-type, stroke, etc.) 20pt
3. A defined color palette. 5pt
4. Proper Syntax 5p

Write an accompanying paragraph that explains:

1. Your rationale for the visual language of the album art and its connection to the song of choice. 5pt
2. Your rationale for the color palette of the piece. 5pt

Create a sketch that uses 5 if statements to change the color and stroke of a single triangle. Use the following variables / conditions for your if statements:

1. keyIsPressed
2. mouseIsPressed
3. key == '1'
4. key == '2'
5. keyCode == UP_ARROW

Remix a static album cover submission to create a piece of interactive album art.

Create a P5js sketch, code included, that contains:

1. The addition of at least two new shapes. 10p
2. Evidence of 2 keyboard interactions (keyCode, key). 30p'
3. Evidence of mouse-clicking interaction (mouseIsPressed) 20p
4. The random() command. 10p
5. The mouseX / mouseY keyword. 20p
6. Proper syntax 5p

Write an accompanying paragraph that explains: Your rationale for the user interaction for the album art and its connection to the song of choice. 5p

Create a P5js sketch that allows you to cycle between two or more images using the number keys.

Tell a story using 5 images Create a P5js sketch, code included, that contains:

1. At minimum 5 images used to tell a story. 30p
2. Evidence of a keyboard interaction to navigate the images. 20p
3. The ability to return to the 1st image without restarting the program. 10p
4. Evidence of accompanying text for each image. 5p
5. Evidence of a song being played. 15p
6. Proper syntax 10p.

Write an accompanying paragraph that explains: Your rationale for the story you created and the media you chose. 10p

Create a P5js sketch that achieves the following instructions:

1. Use the WASD keys to control the movements of a single circle.
2. Use custom variables and the mousePressed() function to control the color of that circle.
3. Play a song

Arrange shapes to make a moving video game character (sprite). Create a P5js sketch that contains:

1. An imported image to represent a video game character. 30p
2. Evidence of keyboard interaction (UP, DOWN, LEFT, RIGHT ARROWS) to move the character around the canvas. 25p
3. Use of a conditional statement in function draw() to trigger a costume change (color/ shape/ image). 10p
4. Evidence of world building: an arrangement of at least 5 shapes or an image to create a background world for the character. 15p
5. An imported song that plays for the duration of your video game. 10p
6. Proper syntax 5p

Write an accompanying paragraph that explains:

Your rationale for the user interaction for the video game character, their movement, and the world they exist in. 5p

Create a sketch that does the following:

1. Uses three for loops to create line art.
2. Uses the line(), stroke(), and strokeWeight() commands in each for loop
3. Different starting, ending and incrementing values for i in each for loop

Create a P5js sketch, code included, that contains:

1. At least 2 examples of nested for loops. 30p
2. Evidence of a visual design/drawing/character - consisting of an image+ shape commands - that is repeated throughout the wallpaper. 30p
3. Dimensions that reflect a phone background. 20p
4. Proper Syntax 10p

Write an accompanying paragraph that explains: Your rationale for the visual aesthetic of the wallpaper: the rationale behind the design and color palette of the sketch. 10p

Redo the Video Game Character assignment into at least 2 custom functions.

Using arrays and the random() function call, create a sketch that generates a WuTang Clan name for a user when they hit ENTER.

Create a coloring book application for children.

https://culturallykreative.itch.io/whhlm

Create a P5js sketch, code included, that contains:

1. Evidence of mouse interaction to draw on the canvas. 10p

2. The ability to leave a trail while drawing on the canvas. 10p

3. At least three different color book images for the user to color in. 10p

4. Evidence of a keyboard interaction to change the image the user will color in. 15p

5. Evidence of a keyboard interaction to clear the canvas of colors. 15p

6. The ability to change the color of the drawing tool using colorPicker(). 15p

7. The ability to change between three brush textures (using shapes or images) 15p

8. Evidence of a keyboard interaction that will allow you to download and print out your work of art 5p

9. Proper syntax. 5p

Create 2 mock AR Filters for Instagram:

Create a P5js sketch that:

1. Enables your web-camera 30p.
2. Contains at least 2 examples of Camera manipulation (Use filter(), tint() and a shape/image overlay). 20p.
3. User interaction that allows the user to cycle through the two interactions. 20p.
4. Proper syntax 5p.

1. Using the Brightness Mirror Code provided by 11.4 of the Coding Train, remix a new brightness mirror experience for users.
2. EXTRA CREDIT: +10 Points if you cycle between two Mirror experiences

Arrange shapes to make a moving 3D video game world. Create a P5js sketch that contains:

Evidence of world building: an arrangement of at least 4 3D shape functions to create a video game environment. 20p

Evidence of X,Y,Z rotation for at least 1 3D shape. 15p

Evidence of linear motion for at least 1 3D shape. 15p

Evidence of at least 1 imported texture to wrap a 3D object. 10p

Evidence of the normalMaterial() function call to wrap at least one 3D object. 10p

Evidence of at least one imported 3D Model 20p

Proper Syntax 5p Write an accompanying paragraph that explains: Your rationale for the user interaction for the video game character, their movement, and the world they exist in. 5p

Using rotate(), translate(), and push()/pop(), create a replica of our solar system.

Use the p5.Amplitude object to create an audio reactive visual.

Use the P5js Scribble Library to create art. Use every shape in the p5.scribble.js library.

Use the P5js Polar Library to create art. Use 4 Single Shape Drawings, 4 Multiple Shape Drawings, and animation techniques.

Using a library chosen in class, create an artistic sketch.

Create a collection / avoidance video game using Object Oriented Programming.

Create a P5js sketch that contains:

1. A playable main character (created using an image / or shapes) 20p.
2. Mouse Interaction that will move the character around the canvas 15p.
3. At least 10 objects: entities that will be collected / avoided using an image 20p
4. A class that serves as the blueprint for the objects that will be collected or avoided. 15p.
5. A Javascript Timer that [ setTimeout() ] will signal the end of the game. 15p
6. A win / lose screen. 10p Proper syntax. 5p

Create a P5.js sketch that contains:

1. 3 Songs (at least 60 seconds long). 15p
2. 3 visual accompaniments; one for each song. 15p
3. Evidence of user interaction to switch between songs. 10p
4. A clear narrative connecting each audio-visual experience to the others 5p
5. Proper Syntax. 5p

PLEASE NOTE:

1. SONG 1 must contain an audio-reactive visual and user interaction 15p
2. SONG 2 must contain an integrated library or a class 15p
3. SONG 3 must utilize a concept discussed previously in class (webcam interaction, 3D objects, DOM elements) 15p

Write an accompanying paragraph that explains: Your rationale for the song selections, the visual aesthetic of each visual, and the rationale behind the design and color palette of the sketches. 5p\

Create a quick sketch that toggles between a work of art on a 2D canvas and a work or art on a 3D canvas. Use:

1. At least three 3D Shape Functions
2. At least three 2D Shape Functions
3. The KeyPressed() Function to toggle between the 2D Canvas and the 3D Canvas