Processing
Time
2 hrs
Difficulty
Module 2
Prerequisites
Summation Presentation
Departments
Career & Technology Studies
Authors
Sandra Kuipers
Groupings
Individual
Pairs
Pairs
Minimum Year Group
None
Blurb
Processing is the art of drawing computer graphics through code. In this unit you'll start writing code that controls the pixels on your screen.
License
This work is shared under the following license: Creative Commons BY-SA-NC
Outline
Learner Outcomes Students will:
|
|
Competency Focus
|
Interdisciplinary Connections
|
Reflection What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
|
|
Credits Any CC attribution, thanks, credit, etc.
|
This page requires you to be logged in to access it. Please login and try again.
5 mins
What is Processing?
Introduction
- Processing is a language for learning how to code.
- It's designed for creating graphics and visual arts.
- We can also use it to create basic games and puzzles.
- This animation was made with processing. Pretty cool stuff!
60 mins
Hello Processing!
Hands On
- The best way to learn processing is to dive in and get some hands-on experience.
- The following tutorial has a great introduction to processing, with videos and a live code editor.
- It will introduce you to basic drawing functions, colours, and interactivity.
- This tutorial takes about an hour to complete.
- Feel free to pause it along the way and play with the code as you go.
5 mins
Setup & Draw
Digging In
- Every scene in p5js needs a setup() and a draw().
- These are built-in functions that run automatically when you hit play.
- Setup:
- Runs once at the beginning of your program.
- This is where you can initialize variables and objects like buttons.
- Draw:
- Runs once per frame. The standard frames per second is 60.
- This is where you can write code to draw shapes and text.
5 mins
The Canvas
Digging In
- The createCanvas(width, height) function determines how big of a scene you are creating.
- This function takes two parameters: the first is the canvas width, the second is the canvas height.
- Every scene should start with a createCanvas() in the setup() function.
- If your x or y coordinate are bigger than the canvas, your object could overlap outside the canvas.
5 mins
Functions
Digging In
- These are some of the shape functions you've learned about so-far:
- Explore some options to modify shapes, such as:
10 mins
The p5.js Editor
Digging In
- p5.js has a great online editor: https://editor.p5js.org/
- This editor lets us code, save, and share our code without any extra setup.
- Take a moment to familiarize yourself with the editor.
- This will be the editor we use for all of our processing units.
- Be sure to login using the Login with Google option.
- The following video can walk you through every option in the editor (optional).
30 mins
Your First Drawing
Evidence
- Now that you've learned the basics of Processing, it's time to try your hand at making a scene from scratch.
- Create a new sketch in the p5js editor.
- Create a scene using basic shapes, lines and colours.
- Your scene could be abstract or something specific. It should have:
- A canvas.
- A background.
- Several shapes of different sizes.
- You can find more colours by using a Colour Picker (copy the RGB value).
- Be sure to login and save your progress as you go!
- Once your drawing is complete, use the Share option to share a link as evidence of your learning in this unit.
Links
- https://editor.p5js.org/
- p5js editor
- https://hello.processing.org/
- createCanvas(width, height)
- ellipse(x, y, width, height)
- fill(r, g, b)
- line(x1, y1, x2, y2)
- noFill()
- noStroke()
- rect(x, y, width, height)
- stroke(r, g, b)
- strokeWeight(weight)
- Processing
- abstract
- Colour Picker
Images
Embeds
There are no records to display.
Records
1-3 of
3
Unit | Students |
---|---|
|
Mike Shared on 06/01/2021 |
|
Kenneth Shared on 02/11/2020 |
|
Nathan Shared on 05/10/2020 |