AutoHotkey | Android | Arduino | COMM140 | Fractals | Grammar Checkers | Knots | A Million Dots Activity | Processing | Processing for Scratch Users | Redbubble | Tutorials | Weather | World Time Meeting Planner | Favicon Generator.
Home > Tutorials > Processing > Processing Examples > Introduction to Processing for Scratch Users
Processing is free to download and open source available from https://processing.org
It's a fun and simple but powerful programing environment.
I would recommend starting with some basic shapes. Take a look at Daniel Shiffman's tutorial on Coordinate System and Shapes
The first thing to learn about Processing is that instructions are written. Processing does not use blocks like Scratch.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
A first program
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Things you can do with processing that you can't do with Scratch
One thing that you can do with processing is to save your frames and then turn them into a gif usinig an online tool like .https://ezgif.com/maker
![]() |
![]() |
![]() |
// Code to save frames for animated gif
int count = 0;
void setup() {
size(400, 400); // Canvas size 400 pixels
}
void draw() {
fill(255, 0, 0); // fill with red
if (mousePressed == true) {
ellipse(mouseX, mouseY, 10, 10);
count ++;
} else {
save("frames/frame" + count + ".png");
}
}
The second thing to learn about Processing is that shapes are drawn using a coordinate system.
Every point on the screen has an x & y coordinate with 0,0 at the Top Left corner of the screen.
Remember "Across the room and Down the stairs"
.
If we want to draw a point in the center of the screen we need to give Processing the following instructions:
1) how large the screen is
2) how large to draw the point
3) where to draw the point
in Java this translates to the following 3 lines of code
size(200, 200); // a canvas 200 x 200 pixels large
strokeWeight(10); // a thick pen size
point(100, 100); // draw a point at 100 x 100
// (the center of the screen)
|
![]() |
APA citation:
Russell, R. (2018, June 30, 08:56 am). Introduciton to Processing for Scratch Users.
Retrieved February 22, 2025, from http://www.rupert.id.au/tutorials/processing/examples/introduction/index.php
Last refreshed: February 22 2025. 03:17.02 am
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.