๐ŸŽจ
[JS] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • ๐Ÿ“ฌLeave Us Feedback
  • Curriculum Extras
    • ๐Ÿ”ฎCurriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt. 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Pathfinding Algorithms && Facial Scanning
    • Playing with Pixels
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Draw & Draw With Functions
    • ๐Ÿ”ฎUnit 1 Overview
    • U1LA1.1: p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes && Styling
    • ๐Ÿ—ƒ๏ธU1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB && HSB
    • ๐Ÿค“EXTRA: Color & Data Storage
    • ๐Ÿค“EXTRA: Color Palette Practice
    • โœจU1LA3.1: Introducing Variables
    • โœจU1LA3.2: Creating Custom Variables
    • โœจU1LA4.1: What is Abstraction?
    • โœจU1LA4.2: Intro to Functions && Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • ๐Ÿ—ƒ๏ธU1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • ๐ŸŽจUnit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw on Canvas
    • ๐Ÿ”ฎUnit 2 Overview
    • โœจU2LA1.1: Conditionals and If Statements
    • โœจU2LA1.2: Conditionals and if, else if, and else statements
    • โœจU2LA1.3: Logical Operators And/Or
    • ๐Ÿ—ƒ๏ธU2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • โœจU2LA3.1: Data Type Scavenger Hunt
    • โœจU2LA3.2: Functions that Return Values
    • ๐Ÿค“U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions && Collide2D
    • U2LA4.2: Mouse Clicks && Shapes as Buttons
    • ๐Ÿ—ƒ๏ธU2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses && Nested Conditionals
    • ๐ŸŽจUnit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • ๐Ÿ”ฎUnit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • ๐Ÿ—ƒ๏ธU3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • ๐Ÿ—ƒ๏ธU3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • U3LA2.4: Updating and Deleting from Arrays
    • ๐Ÿ—ƒ๏ธ๐Ÿค“ U3LA2 Mini Project 2: CodeWars Array Challenges
    • U3LA3.1: Preload, Images, Tint
    • ๐Ÿค“U3LA3.2: Images and Arrays with ml5
    • U3LA3.3: Fonts && Text Styling
    • ๐Ÿ—ƒ๏ธU3LA4 Mini Project 4: Typography
    • U3LA4.1: Loading & Playing Sound Files
    • ๐ŸŽจUnit 3 Final Project: Patatap
  • Unit 4: Motion, Objects, Transformation
    • ๐Ÿ”ฎUnit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions && Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • ๐Ÿ—ƒ๏ธU4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • ๐Ÿค“๐Ÿ—ƒ Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • ๐Ÿค“U4LA5.1: Sine && Oscillating Motion
    • ๐Ÿค“U4LA5.2: Cosine && Circular Motion
    • ๐ŸŽจUnit 4 Final Project: Animated Greeting Card || PSA
  • Unit 5: Final Project
    • ๐Ÿ”ฎUnit 5 Overview
    • ๐ŸŽจCourse Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes && Overview
  • Objectives
  • Suggested Duration
  • Planning Notes && Materials
  • Resources
  • Project Launch (12 - 20 minutes)
  • Project Prompt
  • Wrap-Up
  • Culturally Responsive Best Practices
  • Extensions
  1. Unit 1: Draw & Draw With Functions

Unit 1 Final Project: Abstract Album Art

How can I use my skills in p5 to convey a specific mood or theme?

PreviousU1LA5.1: Your Custom Function LibraryNextUnit 2 Overview

Last updated 2 years ago

Teacher Notes && Overview

This culminating project of Unit 1 is meant as a showcase for all skills students have learned up until this point. It is equally meant to be a creative exploration that allows students to try their skills at art and design and justify their decisions.

Emphasis should be placed on the justification, as many students have anxiety when asked to produce work judged on artistic merit. For students who do not feel they can connect with music, encourage them to think of something in their life they can represent abstractly.

This project is a great way for students to open up and take advantage of their creative freedom!

The launch for this project can utilize one of two (or both, or none) videos found in the resources folder. One of the videos gives a humorous look into the benefits of abstract art; the other is a more scientific look into synesthesia and should provide a grounding for students as to how shapes can convey more than just โ€˜roundโ€™ or โ€˜pointy.โ€™ Read your class to decide what type of motivation they might need!

This project is best assessed with a written accompaniment where students justify their design decisions. You may want to provide sentence starters for this activity.

Objectives

Students will be able to:

  • Showcase skills learned in Unit 1

  • Create an abstract representation of a mood or theme using p5.js

Suggested Duration

~1-2 periods for launch/planning (~45 - 90 minutes)

~2-3 Periods for coding (~90 - 125 minutes)

This is all quite subjective; in early projects, you should adjust the pace to suit your students so they can make something they are proud of. But this project should take about a week.

Planning Notes && Materials

Planning Notes
Materials

See above for timing - students should be held accountable for getting things done each day through a series of check ins, but they also need a chance to make something meaningful to them.

No extra materials required, but you may want extra paper or coloring materials for planning purposes.

Resources

Project Launch (12 - 20 minutes)

Students have already talked about abstraction, so this is a review of the core concept. Display the table of images above. Ask students: based on these images and our prior conversations, what do you think it means to be less or more abstract?

Remind students that abstraction is generally a way to simplify things by removing details, in much the same way they've been doing with their functions: they hide the actual steps or algorithm needed to make something happen inside the function, so that when coding, they just have to worry about the function name.

In this final project, students will be abstracting both their code and their art!

In the fine art world, abstraction is often used to simplify complex ideas or themes by representing moods, emotions, and feelings with colors, shapes, and patterns. There are even some artists who specialize in abstract art.

Project Prompt

Students will create an abstract art piece that can serve as album art for a song, or can represent a poem or other literary work if they so choose. This is fairly open-ended: if students want to try interpreting something unique, let them!

Requirements:

  1. Use shapes that we covered in this unit.

  2. Use built-in variables that make your design dynamic (like size or color changes with mouse position).

  3. Have your design change slightly each time it is run by using the random feature with some of your custom variables. (EX: have parts of your design move slightly each time the program is run, or shift slightly in color)

  4. Create & use custom variables to control two or more elements of your design.

  5. Create & use custom functions for two or more repeated and/or complex elements of your design.

  6. Store custom functions in a separate, linked code document.

  7. All code should be documented and commented.

Writing Prompt:

Write a paragraph explaining your design decisions, including color choice and composition, and why it is representative of the album you chose.

Sample Output:

NB: Before students get started, plan on having them draw out their ideas. It might be useful to create a planning sheet where students can draw their ideas but also record things like color palette, where theyโ€™ll use variables, etc, etc. Plan on a solid period of paper wireframing before students move to computers.

Wrap-Up

A good practice, especially during long-term projects, is to have students share their progress. You can do this through volunteers, or as is my preference, through random selection.

This share-out method can be used outside of project time, as well. Use a calendar to sign up 1-2 students per day, working your way through your roster (and then repeating once you reach the end). Each day, be sure to conference or check-in with students who will share so they are aware they are sharing and also know what they will talk about. Students can share successes or struggles - if they share a success, they should focus on what they did to make it happen (so the class can learn). If they share a struggle, they should ask questions that the class can then assist them. Allow about 5 minutes for both shares.

Culturally Responsive Best Practices

Within this design-based challenge, there are many prompts you can give students to make the project seem more relevant to them and the cultures of communities that they are a part of. (Please recall that communities can refer to a lot of things, including just the culture of being a teen, a Minecraft player, or a KPop fan - be mindful that you are allowing students to explore choice in their creations in a way that is authentic to them!)

Allowing for student choice in this project is one of the best ways to be culturally responsive! Allow students freedom to pick the song/poem/whatever that is most meaningful to them - if they say it is important, accept it as important.

Extensions

For students racing ahead, first ask them to try to make their code as efficient as possible by deleting any superfluous lines and utilizing abstraction whenever possible.

Then, ask students to create an 'album launch' website to house their project. Point them at W3 Schools and have them research HTML and CSS on their own, as they are both very beginner friendly!

(Abstract Art && Parks and Rec)

(Youtube Video)

You might want to show students to get them motivated to try abstract art. A useful (but optional) launch activity between this video and the project is to have students practice drawing abstract art. Ask them to split their paper into three or four equal sections, and then explain that they will practice making abstract art based on songs that you play for them. Try to pick songs that they may not be familiar with and that each have a different mood/pace so they have to be in the moment! Ask students to create an abstract art piece for each song (give only 1-2 minutes for this process) that captures the mood and feeling of the piece.

Another interesting approach to get students to think about creating abstract art for albums, in particular, is to have them . (You could also play this video during/right before planning.)

๐ŸŽจ
Synthesia Video
Tom Loves Art
Unit Project Launch
this video
watch this video on synesthesia
Examples of abstract album art
Table comparing realistic images to abstract representations
Gif of a sample album art