More links

Adobe Connect | Adobe Conect Custom Pods | AutoHotkey | Android | Arduino | Blog | COMM140Fractals | 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

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




Basic Gif     


"Crossfade frames" applied


// 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 July 18, 2018, from http://www.rupert.id.au/tutorials/processing/examples/introduction/index.php

Last refreshed: July 18 2018. 06:53.29 pm

rupert dot russell at acu dot edu dot au Support Wikipedia

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

104 visits since June 27, 2018