Creative Coding Fall 2023

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

1. Use at least 10 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 changes the type of shape users can see with user interaction:

Use a conditional statement (5 points) Allow the users to change the shape that is showing on the canvas (5 points)

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 keyboard interaction. 20p
3. Evidence of mouse-clicking interaction (mouseIsPressed) 20p

4, The random() command. 10p

5. The mouseX / mouseY keyword. 20p
6. A conditional statement for user interaction. 10p
7. 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

Use reserved functions in P5js to change shapes.

1. Include at least four reserved functions.
2. Have each reserved function create a new shape with its own fill and color.

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

1. An arrangement of at least 4 shape function calls as found in the P5js reference, positioned into a video game character. 25p
2. Evidence of user interaction (mouse interaction, keyboard interaction) to move the character around the canvas. 25p
3. Evidence of a costume change (color or shape or both). 10p

4, Evidence of world building: an arrangement of at least 5 shape functions calls to create a background world for the character. 10p

5. At least 2 custom functions: one for the character and one for the world. 20p
6. Proper syntax 5p

Write an accompanying paragraph that explains:

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

Create a P5js sketch that does the following:

1. Uploads and displays two images
2. Uses function keyPressed(), conditional statements, and an imagenumber variable to cycle between two images
3. Uses two custom functions to draw the images

THE 5 IMAGE STORYBOOK

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 (or JavaScript timer) 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. Custom functions, one for each page in the story. 10p
7. Proper syntax 5p.

Write an accompanying paragraph that explains:

Your rationale for the story you created and the media you chose. 5p

Create a P5js sketch that contains:

1, A song file that was uploaded to P5 using the loadSound() command. 2p

2. The ability to play the song file. 2p

3, Conditional Statements that control the rate (speed) of the song. 2p

4. Keyboard Interactions using the 1,2, and 3 keys in order to jump to different parts of the song. 2p
5. The ability to stop playing the song file. 2p

Create a P5js that makes a work of art using lines. Be sure to include:

1. Three For Loop Functions 5p
2. For each for loop function, change the starting value, ending value, and the update interval. 5p

Create a P5js sketch, code included, that contains:

1. At least 1 example of a for loop. 25p

2. At least 1 example of a while loop. 25p

3. Evidence of a visual design/drawing/character/image+shapes that is repeated throughout the wallpaper. 15p

4. Dimensions that reflect a phone background. 10p

5. 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. 5p

Create a drawing application similar to ProCreate, Microsoft Paint, or Adobe Illustrator.

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. 20p

3. Evidence of a keyboard interaction to change the background color. 15p

4, Evidence of a keyboard interaction to clear the canvas. 15p

5. The ability to cycle between five colors for the drawing tool. 15p

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

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

8.Proper syntax. 5p

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

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

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

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

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

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

6. Evidence of a material function call (ambientMaterial, emissiveMaterial, or specularMaterial) to wrap a 3D object. 5p

7. Evidence of a light function call (lights, spotlight, ambientLight, directionalLight, pointLight). 5p

8. Evidence of at least one imported 3D Model 15p

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

Upload a sketch that uses a custom 3D model made in TinkerCAD.

Draw four shapes in P5js. Use 4 DOM Elements to change the attributes of each shape. (fill(), stroke(), strokeweight(), size, etc).

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. Proper syntax 5p.

Create a sketch that uses translate() push() pop() and rotate() to create a 2D Model of the Solar System (Pluto is optional).

Create a visual sketch by integrating a P5js Library (from the list found at https://p5js.org/libraries/) or a Web API.

Create a P5js sketch that contains:

An integrated P5js library.(P5.sound will not count) 40p The use of function calls or keywords from the integrated P5js library or Web API. 30p The arrangement of at least 10 shapes and/or text to create a sketch 20p Proper syntax 5p Write an accompanying description that explains:

The API/Library that you chose and your rationale for the sketch created. 5p You may not choose any library used in class.

Do not use:

1. Play
2. Button / Buttons / Clickable
3. Shape / Shape5

Create a sketch using the P5js library and Scribble.

Create a sketch that P5js library and the Polar Library.

Recreate a single player version of AGAR.IO. Make sure to include the following requirements:

1. 4 Conditional Statements that uses your keyboard to move your hero circle along the X and Y axis.
2. A FoodBit class that will display and update the foodbits as they get eaten.
3. A Javascript Timer to determine when the game will end
4. A score variable
5. A end game screen that will end the game and display the users final score.
6. A way to restart the game.

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. Keyboard Interaction that will move the character around the canvas 15p.
3. At least 10 objects: entities that will be collected / avoided using at least 3 shape function or 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 quick audio reactive sketch.

Create a sketch that cycles between 2D and 3D scenes. Include the following:

1. createGraphics() command to create a 2D canvas
2. WEBGL mode for the createCanvas() command
3. A scene variable that keeps track of the current scene
4. A keyPressed() function that allows the user to cycle between the two scenes.

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

• SONG 1 must contain an audio-reactive visual and user interaction 15p
• SONG 2 must contain an integrated library or a class 15p
• 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\