header

 

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

Last refreshed: November 20 2018. 07:53.08 am

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.


617 visits since June 27, 2018