Unit 3

Animation + Audio

Overview

Students will explore the history of Animation and create both passive and interactive works of animated art that incorporate Audio to enhance and inform their projects.

skill builders

Below are Skill Builders, short practice activities that students can complete individually or with a partner. The Skill Builders are connected to each assignment and reinforce essential Art and Computer Science concepts and ideas and should be included in student sketchbooks wherever possible.

Slide presentation about the Mexican-American animator, Bill Melendez

Skills

Relate Artistic Ideas and Works with Societal, Cultural, and Historical Context to Deepen Understanding

History of Animation

Research an animator, animation, game designer, or game that has cultural significance and/or meaning to you.

Ex., “History of Mexican animation”, “Shujaat Ali”, “LGBTQ+ representation in animation”, “cyberpunk anime”, etc.

Consider persons or works that may represent your cultural identities.

Using any appropriate format, create an in-depth presentation about the person(s) or work(s).

Explain the connection(s) between the person(s) or work(s) and your cultural identities.

basic motion i

With a partner, construct an animation device.

There are many different types of animation devices so investigate several and choose one that appeals to you.

Experiment with different animations.

Each animation device has its own strengths and weaknesses.

Skills

Use identified generative methods to formulate multiple ideas, develop artistic goals, and problem solve in media arts creation processes

The image above is a Phenakistiscope. Like a GIF animation, it can only show a short continuous loop.

basic motion II

Practice the 12 Principles of Animation

Create storyboards and/or flipbooks for several of the Principles of Animation

Skills

Implement production processes, making artistically deliberate choices in content, technique, and style in media arts productions, demonstrating understanding of associated aesthetic principles, such as emphasis and tone

BeepBox Online Sequencer

Interactive Audio I/II

BeepBox is an online tool for sketching and sharing instrumental music

There is a large selection of synthesized instruments and sound effects

BeepBox features multiple tracks so different instruments/effects can be layered together

Use BeepBox to create an original composition loop that can be used in a p5.js project

Layer at least 2 different instruments or effects together

Experiment with different tempos, rhythms, keys, etc.

Export the song to .wav or .mp3 for use in p5.js

Skills

Implement production processes, making artistically deliberate choices in content, technique, and style in media arts productions, demonstrating understanding of associated aesthetic principles, such as emphasis and tone

Functions

Draw several stylized characters in sketchbook

Use Functions with Parameters (x, y, width, height, color, etc.) to create one stylized character in p5.js

Use a loop to make multiple versions of the character with different sizes, colors, and locations

Skills

Functions
Loops
Implement production processes, making artistically deliberate choices in content, technique, and style in media arts productions, demonstrating understanding of associated aesthetic principles, such as emphasis and tone

Object Oriented Programming

The main advantages of Object Oriented Programming is modularization and reusability. Modularization helps compartmentalize code. Large files with many lines of code can be difficult for others and ourselves to read and are more prone to bugs. Reusability means that code can be used in any number of different programs.

Examine the stylized character from the Functions section above or create a new one.

List the physical characteristics (color, size, location, etc.)

List some behavioral characteristics for how you want the character to appear, move, and interact with its environment

Modular by Jolan Soens from NounProject.com

Refactor the code from the stylized character Functions into a Class.
- Use the physical/behavior characteristics to create your Constructor Function and Methods
- See Creating Classes & Objects
Test your Program to make sure the you can instantiate at least 2 Objects and that the methods all work as intended
In a p5.js sketch create a new file and give it a meaningful name
Copy all of the code from the Class into the new file
- Delete the Class code from the sketch.js file
Link the Class file to the sketch.js file with the following code in the index.html file:
- <script type = "text/javascript" src="myFileName.js"></script>
- This code goes anywhere between the <head></head> tags
Test your Program to make sure everything works as intended

skills

Refactoring
Creating Classes & Objects
Modularized programming

Arrays

What is something you have a lot of? Comic books? Pokemon cards? Family members? Friends? Social media friends/followers? Songs?

How many of these things do you have?

How might you keep the items organized? Name? Date? Geographic location?

How might you find a particular item in the collection?

List by Athok from NounProject.com

Create a list of things that you have in no particular order
Write the list on individual pieces of paper
- Alternatively, use Google Drawings and write each list item on a different shape
Number each item beginning with 0

Decide on a method of organization for your list of items (name, date, location, etc.)
Use an Interchange Sort and a Bubble Sort on your list of items (see link below)

Basic Sorting Algorithms

Reflection Questions:

Which sorting method was more efficient?

Which was easier for you to complete?

skills

Creating arrays
Zero-indexing
Sorting arrays

art alive

Students will apply the previously learned skills of response, motion, sound, Functions, Objects, Classes, Sprite Animation, et al, to create an elaborate interactive sound visualization that takes inspiration from a chosen artist, art work, art movement, or social justice issue.

Report abuse