« Curriculum
This course is included with our Coding/STEAM Curriculum - High School Plan

Description

Tynker’s introduction to foundational concepts of art and computer science.

In this course, students are introduced to art, design, and animation principles using Processing, a programming language designed for the visual arts community. Students explore the works of dozens of famous masters like Monet, Raphael, Picasso, and more — then recreate digital art in the same style using JavaScript and p5.js. This approach makes learning programming fundamentals both visual and fun.

Artists and coders have a lot in common. Exploring these intersections is a major theme of the course, and students will have extensive practice with logic, problem-solving, and design thinking.

Students who complete this course will achieve mastery of JavaScript and p5.js. More than that, students learn how to use code to create their own art and express themselves. The course has a series of hands-on Labs that allow students to imagine their own original masterpieces. Students work through the design and implementation process, iterating their artwork to digital perfection. The course ends with a final group project, putting students' coding and collaboration skills to the test.

Topics

  • JavaScript syntax
  • Conditional logic
  • Nested loops
  • Automation
  • Functions
  • Simple loops
  • Conditional loops
  • Expressions
  • Operators
  • Data types
  • Variables
  • Canvas Drawing
  • Colors
  • Drawing shapes
  • Gradients
  • Pixel art
  • Animation
  • Image processing
  • Pixel editing
  • Interactive art

What Students Learn

  • Use p5.js toolkit to draw simple shapes using 2D coordinates
  • Write and debug simple programs
  • Emoji Maker
  • Piet Mondrian (Grid Art)
  • Origami
  • Silhouette Cutting
  • Picasso (Cubism)
  • Pissarro (Cityscape)
  • Sol LeWitt (Geometric Wall Design)
  • Seurat (Pointillism)
  • Monet (Impressionism)
  • Raphael (Perspective)
  • Matisse (Post-Impressionism)
  • Andy Warhol (Silkscreening)
  • Halftones

Technical Requirements

* Online courses require a modern desktop computer, laptop computer, Chromebook, or Netbook with Internet access and a Chrome (29+), Firefox (30+), Safari (7+), or Edge (20+) browser. No downloads required.

Intro to Programming with Art Lesson Plan

Unit 1: Introduction to p5.js


The course is organized into a series of Units. Each unit is broken into chapters. You can skip around if you like, but we recommend that beginners follow this course sequentially: Each challenge builds on the last, and they grow in complexity as the course progresses.

In this first unit of the course, students will begin programming and making art with code. After a lesson in JavaScript basics, students learn how to draw basic shapes, like circles, ellipses, quadrilaterals, and triangles.

Students will explore key geometric ideas like vertices and radians, as well as fundamental computing concepts like function calls, how computers use color, and how JavaScript represents coordinates.

Hands-on labs and challenges will have students creating abstract art like Piet Mondrian. Simple movement puzzles reinforce JavaScript syntax basics.

A Project-Driven Course

The course was developed to demonstrate the possibilities of the integration of visualization and computer science. We have kept this course project-based to keep the work for students hands-on. These larger projects will be driving students' learning of code and computer science.

The problem with this is some students will satisfy the minimum and refuse to experiment, refine, and enhance their work. This runs completely contrary to artistic development. Artistic development requires that we satisfy the basic requirements, but then look to elevate the piece through experimentation and critical analysis.

As a teacher, we need to cheer on encouragement and value when students take a chance and step out and begin expressing themselves creatively. The labs are not about perfection, they are about learning and development and should be judged not by the beauty of the code, but by the growth of the student.

Not a Traditionally Timed Course

This is not your traditional 50 minute or 80 minute block class. Creativity takes effort … and time, too. Occasionally, you may need to ask students to turn in labs they consider "unfinished," provided that they otherwise satisfy your requirements.

Desired Outcomes
This course is designed to expose students to a variety of artistic and coding techniques. My hope is that at the end of the course, students will see art in a different light and code in a different light.

The goal is not to become a coding master or to groom the next Picasso, the goal is to excite the creative juices of students and encourage them to look at math, science, English, CS, and Art as powerful tools of creativity and design.

Suggested Unit Pacing Guide
NOTE: Your school may expect teachers to present a lesson before Lesson 1.1, in which students and the teacher get to know each other and create classroom norms. Even if your school does not require this, you may find it worthwhile to do so.

Suggested Unit Pacing Guide

WeekUnit Pacing
Week 1Lessons: 1.1-1.3
Week 2Lesson: 1.4
Week 3Lessons: 1.5-1.6
Week 4Lessons: 1.7-1.8
This pacing guide assumes a 36-week school calendar.

If you are falling behind:
  • Reduce or eliminate some Challenges or Labs — walk through provided sample solutions instead or skip as needed
  • Reduce or eliminate the "if time available" parts of lessons

If you are getting ahead:
  • Provide students more time on the Labs and Challenges
  • Revisit Challenges and Labs and expect students to complete more "Artist's Challenges" during the Lab portions of the course

Class Presentations

These student-facing slide presentations help educators seamlessly run Tynker lessons in a virtual or physical classroom setting. Each lesson has its own set of slides that introduce the big ideas, suggest unplugged activities, and include a section for each activity module. While running lesson slides, you can switch back and forth between the activity, the slides, answer keys and other lesson materials.
A sample slide presentation is available for your review. Please log in to view all the class presentations available with your plan..
Lesson 1
Unit 1: Introduction to p5.js
0 Slides
Lesson 2
Unit 2: Complex Colors and Shapes
0 Slides
Lesson 3
Unit 3: Beauty of Code
0 Slides
Lesson 4
Unit 4: Logic of Art
0 Slides
Lesson 5
Unit 5: Image Processing & Pixel Editing
0 Slides
Lesson 6
Unit 6: Interactive Art and Animation
0 Slides
Lesson 7
Unit 7: Collaborative Final Project
0 Slides