Creative Coding Spring 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:

1. Use a conditional statement (5 points)
2. Use a reserved function (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:

1. Your rationale for the user interaction for the album art and its connection to the song of choice. 5p

Create a sketch that changes the color of three different shapes using variables and function keyPressed(). Your assignment must include:

1. Three different shapes. (3.33 pts)
2. A function keyPressed() that is used to change the shapes' colors. (3.33 pts)
3. Custom variables that control the color of the three shapes.(3.33 pts)

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:
7. 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 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

Tell a story using 5 images.

Create a P5js sketch, code included, that contains:

1. 5 images used to tell a story. 30p
2. Evidence of a keyboard / mouse interaction (or JavaScript timer) to navigate the images. 20p
3. The ability to return to the 1st image without restarting program. 20p
4. Evidence of accompanying text for every image. 10p
5. Evidence of a media file / song that will be played over the story. 10p
6. 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 does the following:

1. Uses a loop (for or while) to create a row of rectangles to resemble the rainbow road from Mario Kart.
2. Utilizes the loop variable to create different colors for each rectangle.

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.. At least 1 example of an array. (BONUS POINTS)
4. Dimensions that reflect a phone background. 10p

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

Create a P5js sketch, code included, that contains:

1. A custom 3D Model built in TinkerCAD as shown in class.
2. Keyboard Interactions to move the 3D object around the canvas.

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
9. 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 uses the Scribble library:

1. Make sure that the Scribble Library is properly integrated (5p)

2 .Include up to 5 shapes.(5 p)

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:

1. An integrated P5js library.(P5.sound will not count) 40p
2. The use of function calls or keywords from the integrated P5js library or Web API. 30p
3. The arrangement of at least 10 shapes and/or text to create a sketch 20p
4. Proper syntax 5p

Write an accompanying description that explains:

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

• Scribble
• Button / Buttons / Clickable
• Shape / Shape5

Create a sketch that resembles a website of your choosing. Be sure to include:

1. createA();
2. createButton();
3. createInput();
4. A fourth DOM element listed in the P5js reference.

Take the webcam code provided in class and remix it.

1. Manipulate the color
2. Manipulate the size of the 'pizelated' shape
3. Manipulate the shape

THE AR FILTER

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. 20p.
3. User interaction that allows the user to cycle through the two interactions. 20p.
4. Proper syntax 5p.

Please note: • IMAGE 1 must contain an arrangement of at least 5 P5js shapes to create an image overlay. 10p • IMAGE 2 must contain pixel manipulation. 10p

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:

1. Uses the Amplitude() object to create an audio reactive sketch.
2. Changes color based on the audio playing.
3. Changes shape size based on the audio playing for at least 3 shapes.

Create a sketch that:

1. Has a Bubbles class to create several bubble objects
2. Allows users to 'burst' bubble objects

THE VIDEO 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. An object: a visual that contains an image or at least 3 shape function calls. 20p
4. A class that serves as the blueprint for the objects that will be collected or avoided. 15p.
5. A Javascript Timer that will signal the end of the game. 15p.
6. A win / lose screen. 10p
7. Proper syntax. 5p

Design and create a P5js sketch that incorporates concepts of your major / your intended field. Write a paragraph explaining how you would use P5js to create a work of art in your chosen discipline.

In class this week, we will be working in groups to make an interactive film. Create a P5js sketch that contains:

1. 5 (30 second) videos that you filmed over the course of the week. 33p
2. User interaction that determines which video will play next 33p
3. The ability to play each video in a different sequence every time. 33p

THE FINAL PROJECT

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 15p
3. SONG 3 must utilize a concept discussed previously in class (webcam interaction, 3D objects, DOM elements, classes) 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