Creative Coding 1-On-1 [Beginners + Games + Animation in Javascript]
Completed by 9 learners
Ages 10-14
Live 1-on-1 Lessons
Draw beautiful art, write interactive stories, and invent your own games! Add intelligence so the computer can make changes on its own, too. Learn how p5.js JavaScript code can unlock the creative artist within you. Beginners welcome.
Assessment is done informally during class. Written feedback is provided after class each week via a learner note.
Assessment
Assessment is done informally during class. Written feedback is provided after class each week via a learner note.
Class Experience
US Grade 5 - 8
Beginner Level
WHAT WILL WE CREATE?
In this ongoing 1-on-1 class, individual learners create wondrous "generative" games and art – animations that change themselves each time they're viewed. Learners can create many different projects depending on their interests. For example, some learners create scenes from nature – fading sunsets, raindrops dripping down windows, or brush strokes curving across canvas. Other learners make quizzes or storybooks with images and pages that turn. Still other learners invent and code their own games. All learners create code by typing text-based commands. (Learners do not drag-and-drop pictures of code blocks.)
WHAT'S THE AIM OF THE CLASS?
To nurture self-reliant and independent code artists – learners who not only make projects but also imagine their own project ideas and create them independently.
WHAT DOES A LESSON LOOK LIKE?
• We tinker to learn. There's plenty of room for play, exploration, and invention.
• Every lesson creates a project. I collaborate with learners to choose projects that they find fun and interesting, and I try to make sure that each project has a little magic in it – something surprising that learners can investigate and that broadens their understanding.
• Our learning proceeds in small steps. We begin with easy commands in projects that are mostly complete. Learners tinker with these projects, making small changes and investigating what happens. We particularly explore the syntax of p5.js JavaScript commands slowly and playfully. (Syntax means the patterns of letters, numbers, and punctuation in the commands.) As learners gain confidence, they proceed to write commands from scratch and eventually to create more and more of each project by themselves. At this point, I present challenges like "What commands would we need, and in what order, to make this shape move across the screen by itself ?" Or "to change its color randomly?" Or "to make it slowly disappear and reappear?" Or "to make it get smaller and smaller as it moves down the screen?" Ultimately, learners can envision whole projects and the code to create them.
• Our learning proceeds in a spiral fashion. That means each lesson revisits the skills of previous lessons and builds on them thoughtfully. We proceed at a learner's pace, sticking with each skill and moving on when it's comfortable.
WHAT ABOUT LEARNER DIFFERENCES?
• I welcome all the gifts each learner brings. I adapt lessons for each learner's style with twin goals of supporting and challenging them. I demonstrate ideas by doing, talking, drawing, or using any strategies that make learners comfortable. We work in a collaborative coding environment where we write commands together and where I can respond to learners' understandings and misunderstandings immediately.
• Most importantly, learning is carefully structured to provide challenges with low thresholds (all learners can reach them successfully) and high ceilings (challenges that stretch learning) throughout the class.
JAVASCRIPT SKILLS
• Draw shapes and colors
• Add images and music
• Use variables to animate movement and add randomness so that the computer makes changes on its own
• Respond to players' key presses and mouse clicks
• Create and use timers
• Use branching commands like "if"
• Use commands that repeat actions like "for" and "while"
• Undo mistakes and "debug" (fix problems in) code
BEFORE CLASS BEGINS, PLEASE...
(1) Learners should join our coding group at Open Processing, where they'll write code and see their animations. See additional information in "Parental Guidance," below.
(2) Learners should log into Open Processing *before each class* so they're ready to work when class begins.
(3) Learners should know how to cut and paste and how to move among different tabs in their web browsers.
Thanks! Please let me know if you need help with these requests. I am always happy to help!
Learning Goals
Students learn JavaScript commands that display shapes, colors and text and respond to key- and mouse-presses. Learners also use coordinates to position shapes and create variables to keep score, make timers and vary the size, position or color of shapes.
Other Details
Parental Guidance
Learners will create a login and join a coding group at Open Processing, where their class will write code and see the 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 learners 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 isn't appropriate for iPads or phones.
External Resources
In addition to the Outschool classroom, this class uses:
15 years of experience teaching JavaScript, Python, Scratch, web development, robotics, and artbotics to learners 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 people learn and the different gifts they each bring to the classroom!
Are you planning to use state funding, such as an Education Savings Account (ESA), Micro-grant or scholarship to help pay for your learner’s education?