English
Log In

Make Art With Code! Discover the Beauty of Javascript [Digital Art + Animation]

Class
Play
Terry D [Code & Art, JavaScript, M.Ed]
Average rating:
5.0
Number of reviews:
(41)
In this 8-week class, learners write code to create beautiful generative art – animated designs that magically change themselves! We'll also explore space, color, interaction, and other visual design ideas that make digital art sparkle.

Class Experience

US Grade 6 - 8
Beginner Level
8 lessons//8 Weeks
 Week 1
Lesson 1
Shape
Learners log into our coding website (https://openprocessing.org) and explore the collaborative coding screen. Then they learn p5.js JavaScript commands that draw basic shapes like ellipses and rectangles. Learners also explore the coordinate plane and use it to position shapes where they wish. Exercise #1 (15 minutes) Learners pick two adjectives like "sharp" and "wet." They use black-and-white shapes to illustrate those ideas.
 Week 2
Lesson 2
Color and Random Variation – Exploration
Learners explore a color model called "hue, saturation, and brightness" which expresses colors as a series of 3 numbers. Learners also explore ways to vary color and shape randomly. By applying randomness thoughtfully, learners create eye-catching art that looks different each time it appears. Exercise #2 (15 minutes) Learners make something completely random.
 Week 3
Lesson 3
Color and Random Variation – Project
Learners view the work of artists Mark Rothko, Damien Hirst, Sam Gilliam, and Barnett Newsman. We discuss how these artists play with the contrast between randomness and consistency in their art. Project #1 (45 minutes) Using ideas of shape, color, and randomness, learners make their own project in the spirit of one of the artists we discussed. At the end of class, learners can share projects if they wish.
 Week 4
Lesson 4
Progression Through Time and Space – Exploration
Learners use variables to change the color, position, and size of shapes progressively over time. They also learn how to use commands like "if" to change projects when specific conditions are met (for example, if a shape touches bottom, the animation ends). Exercise #3 (15 minutes) Learners change one characteristic of a shape, like its sideways position, progressively over time.
 Week 5
Lesson 5
Progression Through Time and Space – Project
Learners view several exemplary, carefully-curated animations in p5.js JavaScript that change color, shape, size, or position progressively over time. They discuss what kinds of changes they find appealing. Project #2 (45 minutes) Using ideas of progression over time, learners create a meditation app, a fish tank, an abstract grid, or other project of their own design. At the end of class, learners can share projects if they wish.
 Week 6
Lesson 6
Interaction – Exploration
Learners view several exemplary, carefully-curated animations in p5.js JavaScript that change when you press the mouse button or keys. At the same time, learners also explore visual reflection – shapes that move or change in ways that oppose one another. Exercise #4 (15 minutes) Learners make a project where shapes change in simple ways when you touch them or press a key. For example, they make 2 shapes that jump apart when you press 'j.'
 Week 7
Lesson 7
Interaction – Project
Project #3 (55 minutes) Using ideas of interaction and reflection as well all previous skills, learners create a kaleidoscope, digital paint brushes that produce special visual effects, digital faces that can be changed by touching them, or other projects of their own design. At the end of class, learners can share projects if they wish.
 Week 8
Lesson 8
Finish Projects and Share
If learners wish, they can continue to work on previous projects. Alternatively, learners can collaborate to create an interactive poster for our class using all the skills we studied.
  • Students will learn basic JavaScript coding skills and how they can be used to express visual design ideas like random variation, progression through time, and interaction.
17 years of experience teaching JavaScript, Python, Scratch, HTML, 3D websites, and artbotics to students from 8 - 15 years old in private, public, and after-school settings. Two masters degrees in education – from Harvard Graduate School of Education with a focus on technology and from Lesley University in mathematics education. And, most of all, great love, patience, and respect for the many different ways that students learn and the gifts they each bring to the classroom!
0 - 1 hours per week outside of class
Projects
Frequency: 3-6 throughout the class
Feedback: included
Details: Students will develop several projects that explore basic coding skills – creating shapes and color, using variables to create animation, and using "if" commands to make animations behave in different ways over time. In addition, students learn how code can express visual design themes including shape, color and random variation, progression through space and time, and interaction.
Grading
Frequency: 3-6 throughout the class
Details: Assessment is done informally for the 3 major class projects. Written feedback is provided via a learner note.
To support a variety of learning styles, this class provides consistent structure with multiple communication strategies (written, verbal, and visual) as well as flexibility in content, pacing, learner participation and teaching approaches.
No prerequisites.
In addition to the Outschool classroom, this class uses:
Students will create a login and join a coding group at Open Processing, where their class will write code collaboratively and see the resulting animations. Student logins at Open Processing include many safety features. For example, no personal information is collected, student profiles and projects are visible only to the teacher and classmates, and students are not allowed to comment or annotate projects outside their class. For a full description of these protections, see "Restricted Student Accounts" at https://intercom.help/openprocessing/en/articles/5228489-student-account-types. This free code editor, funded by the Processing Foundation, works on Windows, Mac, Linux, and Chromebook computers but is not appropriate for iPads or phones. 
Joined August, 2022
5.0
41reviews
Profile
Teacher expertise and credentials
Hello! My name is Terry, and I'm glad to meet you! In my classes, learners create art, games, and stories by writing computer code. 

My students learn by tinkering – by exploring and changing starter code to see what happens, always working in... 

Reviews

Group Class

$23

weekly or $184 for 8 classes
1x per week, 8 weeks
55 min

Live video meetings
Ages: 11-14
2-4 learners per class

About
Support
SafetyPrivacyCA PrivacyLearner PrivacyTerms
Get The App
Download on the App StoreGet it on Google Play
© 2024 Outschool