Art Programming Basics

Art Programming Basics will get you started with programming visuals, animations and interactive user interfaces. On the course we use the free Processing-environment which is widely used by artists and educators all over the world!

You’ll learn the basics of programming in a visual environment. As a more general theme, you learn how to represent complex visual things with simple programming structures - iteration, if-statements and variables. The module gives you a new tool for self-expression and new kinds of glasses to see the hidden logical structures of the visual world!

Target group: 13-19-year-olds and educators. This module is absolutely beginner-friendly and requires no previous experience on programming.

Length: 4 chapters 1,5-2 hours each (= 6-8 hours). Material can be adjusted for longer teaching sessions as well.

Format: Suitable for blended teaching and self-studying. Self-paced course module with video tutorials, student assignments and educator instructions

Structure: There’s four chapters and extra material for educators.

For the educator

Click on the bar below to open educator information!

Educator notes

Throughout the material there are educator notes such as this that are designed to help you succeed in a classroom situation. Click them to open them! The first educator note of a chapter is always a longer Educator Intro that you can use to prepare for the lesson.

This material is designed to be used in a blended learning environment, even though students work online, you can help navigate and facilitate their learning in the classroom.

This material is easy to use - there’s no need for long preparations.

If you want to start teaching right away, see the Checklist For The First Lesson. See also the Educator Intro in the first chapter. If you have more time, browse through this For the Educator -chapter then jump to the Educator Intro in the first chapter to plan your first lessons.

Module Overview

The aim of this course is to help you to get started with teaching art programming with Processing. We provide you and your students with materials that allow anyone to learn the basics. You are now in For The Educator -chapter which is followed by the student material that consists of 4 chapters.

The structure of this module:

  1. Art With shapes (60-90 min)
  2. Moving Stuff (90 -150 min)
  3. Interact with it (90 - 150 min)
  4. Creating More (60-120 min)

Educator Materials

The Educator material is divided as follows:

  1. For the Educator - You are here right now. Essential preparations before teaching, installations and software, learning objectives and assessment.

  2. Educator Intros are found in the beginning of every chapter and include the following things.

    • Chapter Summary - A video about the chapter and learning objectives.
    • Slides and Lesson Plans - Introductory Slides and possible lesson plans.
  3. Educator Notes are placed in the material and include extra-information, right answers to the coding tasks, pedagogical tips and ideas for activities in the classroom.

Install Processing to School Computers

You can download Processing version 3.4 (or later) from the official Processing website:

Below there's a pdf that explains all the necessary steps to download and install it for Windows or Mac OS or Linux. 

How to install Processing? (pdf)

  • If your school or facility has IT support personnel that is responsible for installing software on the computers, you can forward the above linked pdf to them.
  • If your students use their own computers, they can make the installations beforehand or at the first lesson.
  • If it's impossible to complete the installation on your available computers, you can also use the Open Processing web-based programming environment

This is not a recommended alternative because as we use Processing IDE in the tutorial videos and the Open Processing web editor isn't the best tool as projects become more complicated.

Course and Classroom Requirements

Educator notes

For each student or student pair you’ll need:

  • A desktop or laptop computer with Processing IDE installed
  • If students bring their own devices with them, they can install Processing IDE before or at the first lesson.
  • Internet connection
  • Operating system: Windows, Mac OS or Linux
  • A functioning display for the computer
  • A keyboard and mouse (or a trackpad)
  • A pair of headphones or speakers
  • Headphone splitters (if the students work in pairs)

You will need:

  • A computer (same setup as the students have)
  • Display connection to data projector or another display device

Structure of the lessons

Educator notes

Structure of The Lessons

The content is quite self-explanatory and works well for independent learning. You can begin by leading students to the material, observing their learning and helping them when they ask questions. But students may get more out of the whole experience if you plan a structure for each lesson: give an introduction where you set a clear goal for each lesson and summarize what has been learned at the end of each lesson.

Besides making the learning objectives clearer, this makes the lessons more collaborative. Instead of only individual learning at the computer, it teaches students how to work collaboratively and use each other as problem solvers. Positive interaction also boosts creativity and makes students less afraid of making mistakes. If you yourself are active, students will become active too and will help each other in the class.

There’s slides and example lesson plans in the Educator Intro of each chapter (link to introductory slides of the first chapter).

Routines for The Lessons

Browse the slides by clicking the arrow-buttons in the lower panel. These slides are not designed to be presented in the classroom.

Helping The Students

The teaching should be focused primarily on helping students with individual challenges as they come up. The material encourages the students to start creatively tinkering with the code from the very start. This means that not everyone will produce similar results. Student might need your help and support if there’s errors in their code, they don’t understand the new concepts or they lack ideas of what to do in a creative exercise.

Even if you have mastered programming, students will usually ask something that you can’t answer right away. This doesn’t have to be a threat, it’s a possibility to explore the world of creative coding together with the students.

When the students ask for help with the material, you should facilitate a discussion with them. In the following graph, we’ll try to illustrate how these discussions usually proceed and how can you answer to the different needs of the students. The main point is that usually you don’t have to give a right answer. Instead, ask a couple questions that lead students in the right direction.

Student Faces a Challenge (pdf)

There’s other ideas for facilitating student work in the slides below. You can browse the slides with the arrow-buttons in the lower panel. These slides are not meant to be presented in the classroom.

How to Document and Share the Projects?

Here's a list of alternatives for documenting students' projects. The documented projects can be added to a student's digital portfolio or a school's website. Besides documentation, remember to have some kind of exhibition or demo-day where students can show and explain their projects to each other!

Adding Projects to Open Processing

In this material, there is references to a website called Open Processing.

It's a place where people from around the world add their own Processing-projects. To add a project to Open Processing you have to register, however, it's possible to browse other peoples' projects even without registering.

See the video linked here. It guides you through the registration process and how to add a project to Open Processing (the same video is visible to the students in the end of Chapter 1). After adding a project to Open Processing, It's possible to share it with anyone via a link.

An alternative is to embed the project to a website's or blog's HTML-code as an <iframe>. Below you'll see how to find the iframe-element of a project in Open Processing.

Below is an example of a project which  has been added to Open Processing and then embedded to this site as an <iframe>. This is a nice option for two reasons. First,  the interactivity of the project doesn't disappear, and second, the code of the project is visible for anyone (by clicking the </> -symbol in the top-panel).

Images and videos

If the project is static and doesn't include movement or interaction, it's possible to save an image of it either by using the saveFrame-command or by taking a screenshot.

To make a video of a Processing-program, you can use use any screen-recording software that you may have on your computer.

Another alternative is to make a video that consists of a series of images. You can use Processing IDE's own Movie maker which creates a .mov -file of the project. Instructions are below. All video players are not able to repeat .mov-files but some such as QuickTime Player can.

  1. Include the saveFrame-command to the draw-method of the Processing-program. Save the program (File -> Save As).
  2. Run the program. The Program now saves a picture to the data-folder of the sketch each time it executes the draw-method. It's wise to usea restricted frameRate (e.g. frameRate(24)) otherwise there will be hundreds of pictures in a very short time!
  3. Stop the program after  a proper time.
  4.  In Processing IDE, click Tools -> Movie Maker. Click Choose and select the folder where the images are. Images are in the data-folder, which is in the folder of the sketch, found in the location where you saved the sketch.
  5. Click **Create movie **and choose a location for exporting the video.
  6. Processing creates a .mov -video of the images. 

Projects to a Website as JavaScript?

It's possible to decorate a website with images or videos of Processing-projects or to embed Open Processing windows there as iframes. But if you want your project to work as a part of your website dynamically, that's possible too. One example of this kind of use would be to have an interactive Processing project as a background of your whole website. It could react to the movement of the mouse, for example.

To make Processing-projects part of your website, you have to use JavaScript in one way or another.

You can write your Processing-code as JavaScript using p5.js. p5.js has many similarities with the Java-based "normal" Processing-language, but it's really JavaScript, which makes it easy to use in the web-environment. See more from the link below.

Another alternative is to use Processing.js. This is a piece of JavaScript-code that converts your normal Processing code to JavaScript.

Learning Objectives and Assessment

Educator notes

During this module you will learn the very basics of programming and how to make visual art with Processing. Besides programming, you also learn about graphic design, animating things and developing your own visual ideas with the given tools. We want to approach technology in creative and cross-curricular way that makes it possible for everyone to get inspired by it.

The main objectives of this Basic Module are listed below (also in pdf-format). Learning objectives are divided to Programming, Visual Art and Graphic Design and Creative Project Work. The more specific learning objectives of each chapter can be found in the Educator Intros

Learning Objectives - Art Programming Basics (pdf)

Learning objectives



  • … can make, save and run a program in the Processing environment.
  • …  can write basic programming commands from nothing with the right syntax.
  • … can read error messages in the and fix the program according to them.
  • … can draw shapes to desired locations on the drawing canvas.
  • … understands how a computer executes programming commands top down.
  • … understands how programming repeats some commands in the program.
  • … can use integer variables to move things on the drawing canvas.
  • … can use randomization in animations to illustrate movement observed in the world.
  • … can create interactive projects that react to movement of keyboard and mouse.
  • … can use if-statements in the programs.
  • … can read comments and use them to explain the code.

Visual Art and Graphic Design


  • … can  choose different colors using  the RGB -color model.
  • … can change the opacities of the colors to create different combinations of colors
  • … can use simple 2D-shapes to illustrate more complex visual objects.
  • … can create an animation with many moving objects.
  • … can create a graphical user interface.
  • … can reflect on the visual decisions he/she has made in the projects.

Creative Project Work


  • … learns to search for inspiring projects in the web.
  • … knows the meanings of different creative commons licences.
  • … learns to find answers to programming-related questions in the web.
  • … can develop one’s own visual idea with the given subject and programming tools.
  • … can give constructive feedback of the creative projects of others.

Curriculum References

Mehackit Atelier is designed to help students to learn programming in a creative cross-curricular way. Many contemporary national curriculums address the importance of learning to use ICT and programming in a project-based manner. The importance of creativity, thinking skills and the ability to work independently is emphasized as well, among many other so called 21st century skills.

Below, there are documents with references to three national curriculums. We have selected quotes and learning objectives from the curriculums that match with the learning objectives of Mehackit Atelier and this module. 

Reference to Finnish National Curriculum, ages 13-15 Check the full curriculum (in Finnish) here.

Reference to Finnish National Curriculum of the High Schools Check the full curriculum (in Finnish) here.

Ideas For Assessment

There’s a more detailed assessment rubric here. It can give you a rough idea of how to approach assessment with this kind of subject.

Art Programming Basics - Assessment Rubric (pdf)

There’s other assessment ideas in the following slides. You can browse the slides with the arrow-buttons in the lower panel. These slides are not meant to be presented in the classroom

Checklist for lessons