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!
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:
Art With shapes (60-90 min)
Moving Stuff (90 -150 min)
Interact with it (90 - 150 min)
Creating More (60-120 min)
Educator Materials
The Educator material is divided as follows:
For the Educator - You are here right now. Essential preparations before teaching, installations and software, learning objectives and assessment.
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.
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.
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
https://www.openprocessing.org/sketch/create
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.
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.
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.
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.
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.
Include the
saveFrame-command
to the draw-method of the Processing-program. Save the program
(File -> Save As).
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!
Stop the program after a proper time.
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.
Click **Create movie **and choose a location for exporting the
video.
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. https://p5js.org/
Another alternative is to use Processing.js. This is a piece of
JavaScript-code that converts your normal Processing code to
JavaScript. http://processingjs.org/
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
… 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
Student...
… 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
Student…
… 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.
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
