A processing library to ease the transition from scratch to processing
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data
examples
lib
resources
src/eu/barkmin/processing/scratch
web
.classpath
.gitignore
.project
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
README.md
license.txt

README.md

Processing Library Scratch

To ease the transition from the block-based programming environment Scratch to Processing this library was created. Therefore the core elements of Scratch are remodelled.

Elements

ScratchStage

Usage: import eu.barkmin.processing.scratch.ScratchStage

API: https://www.barkmin.eu/processing-library-scratch/reference/eu/barkmin/processing/scratch/ScratchStage.html

Source Code: https://github.com/mikebarkmin/processing-library-scratch/blob/master/src/eu/barkmin/processing/scratch/ScratchStage.java

Initialization

Before you can use any of the class provided by this library be sure to initialize the ScratchStage. You only need to place this statement ScratchStage.init(this) in your setup function. A minimal example could look like this:

import eu.barkmin.processing.scratch.*;

void setup() {
  ScratchStage.init(this);
}

void draw() {
}

Looks

Scratch Processing
stage switch backdrop to stage.switchBackdrop("backdrop1")
stage next backdrop stage.nextBackdrop()
stage set color stage.setTint(0)
stage change color stage.changeTint(25)
stage set ghost stage.setTransparency(0)
stage change ghost stage.changeTransparency(25)
stage backdrop name stage.getCurrentBackdropName()
stage backdrop index stage.getCurrentBackdropIndex()

To add a new backdrop call stage.addBackdrop("newBackdrop", "path/to/newBackdrop.png");. Afterwards you can swith to the backdrop by calling stage.switchBackdrop("newBackdrop");.

Sound

When you work with sound you need to install processing-sound and need to import the library in your main .pde file. import processing.sound.*;

Scratch Processing
sound play stage.play("Meow");
sound stop all stage.stopAllSounds();

To add a new sound call stage.addSound("newSound", "path/to/newSound.wav");. Afterwards you can play the sound by calling stage.playSound("newSound");.

Hint: On my notebook I was not able to playback mp3 files, therefore I converted them to wav files with SoundConverter.

ScratchSprite

Usage: import eu.barkmin.processing.scratch.ScratchSprite

API: https://www.barkmin.eu/processing-library-scratch/reference/eu/barkmin/processing/scratch/ScratchSprite.html

Source Code: https://github.com/mikebarkmin/processing-library-scratch/blob/master/src/eu/barkmin/processing/scratch/ScratchSprite.java

In Scratch sprites are the main actors. Every sprite has a custom set of costumes and sounds, which could be dynamicly changed. Most of the functionality which sprites in Scratch have were tried to reimplement in processing.

Creation

import eu.barkmin.processing.scratch.*;

CatSprite myCat;

void setup() {
  size(800, 600);
  ScratchStage.init(this);
  myCat = new CatSprite();
}

void draw() {
  myCat.draw();
}

// Define a class Cat 
class CatSprite extends ScratchSprite {
  CatSprite() {
    super("cat", "sprites/cat.png");  
    this.setOnEdgeBounce(true);
  }
  void draw() {
    super.draw();
    this.move(2);
  }
}

Motion

Scratch Processing
sprite set x to sprite.setX(0);
sprite change x by sprite.changeX(10);
sprite set y to sprite.setY(0);
sprite change y by sprite.changeY(10);
sprite go to sprite.setPosition(0, 0);
sprite move sprite.move(10);
sprite point in direction sprite.setRotation(90);
sprite turn left sprite.turnLeft(15);
sprite turn right sprite.turnRight(15);
sprite direction sprite.getRotation();
sprite on edge bounce sprite.setOnEdgeBounce(true);
sprite x sprite.getX();
sprite y sprite.getY();

Looks

Scratch Processing
sprite show sprite.show();
sprite hide sprite.hide();
srpite switch costume sprite.switchCostume("costume1");
sprite next costume sprite.nextCostume();
sprite set color sprite.setTint(0);
sprite change color by sprite.changeTint(25);
sprite set ghost sprite.setTransparency(0);
sprite change ghost by sprite.changeTransparency(25);
sprite set size sprite.setSize(100);
sprite costume name sprite.getCurrentCostumeName();
sprite costume number sprite.getCurrentCostumeIndex();
sprite size sprite.getSize();

To add a new costume call sprite.addCostume("newCostume", "path/to/newCostume.png");. Afterwards you can swith to the costume by calling sprite.switchCostume("newCostume");.

Sound

When you work with sound you need to install processing-sound and need to import the library in your main .pde file. import processing.sound.*;

Scratch Processing
sound play sprite.play("Meow");
sound stop all sprite.stopAllSounds();

To add a new sound call sprite.addSound("newSound", "path/to/newSound.wav");. Afterwards you can play the sound by calling sprite.playSound("newSound");.

Hint: On my notebook I was not able to playback mp3 files, therefore I converted them to wav files with SoundConverter.

ScratchPen

Usage: import eu.barkmin.processing.scratch.ScratchPen

API: https://www.barkmin.eu/processing-library-scratch/reference/eu/barkmin/processing/scratch/ScratchPen.html

Source Code: https://github.com/mikebarkmin/processing-library-scratch/blob/master/src/eu/barkmin/processing/scratch/ScratchPen.java

In Scratch every sprite can use a pen to draw lines, therefore every ScratchSprite object has an pen assoziated with it. Through a similiar api the pen can be modified.

Scratch Processing
pen up sprite.getPen().up();
pen down sprite.getPen().down();
pen set color to sprite.getPen().setColor(50);
pen change color by sprite.getPen().changeColor(1);
pen set transparency to sprite.getPen().setTransparency(50);
pen change transparency by sprite.getPen().changeTransparency(1);
pen set size to sprite.getPen().setSize(50);
pen change size by sprite.getPen().changeSize(1);
pen erase all stage.eraseAll();

Timer

Sometimes you want to tigger an event after a certain time or at a certain time interval. Therefore the stage and every sprite have one or more Timer objects. You can access the timer objects throught stage.getTimer() or sprite.getTimer(). The timer object has some useful methods:

API Example Description
void getMillis() cat.getTimer().getMillis() Returns the milliseconds since the sprite was created
boolean everyMillis(int) stage.getTimer().everyMillis(600) Returns true every 600 Milliseconds
boolean forMillis(int) dog.getTimer().forMillis(600) Returns true for the first 600 Milliseconds
boolean afterMillis(int) cat.getTimer().afterMillis(600) Returns true after the first 600 Milliseconds
boolean intervalMillis(int) cat.getTimer().intervalMillis(600) Returns toggles between true and false every 600 Milliseconds starting with false
boolean intervalMillis(int, boolean) cat.getTimer().intervalMillis(600, true) Returns toggles between true and false every 600 Milliseconds starting with true
boolean intervalMillis(int, int) cat.getTimer().intervalMillis(600, 200) Returns toggles between true for 600 Milliseconds and false for 200 Milliseconds starting with false
boolean intervalMillis(int, int, boolean) cat.getTimer().intervalMillis(600, 200, true) Returns toggles between true for 600 Milliseconds and false for 200 Milliseconds starting with true

For a visual example of these methods see example Timer or the gif below. A dot represents the return of true.

timer

everyMillis(600) -> orange (first line)
forMillis(600) -> lime (second line)
afterMillis(600) -> green (third line)
intervalMillis(600) -> skyblue (fourth line)
intervalMillis(600, true) -> blue (fifth line)
intervalMillis(600, 300) -> pink (sixth line)
intervalMillis(600, 300, true) -> red (seventh line)

If you want that a sprite should do something every 2000ms and every 1000ms, you need two timers. To add a timer you simply call sprite.addTimer("timerForMe"). The timer is than accessable with sprite.getTimer("timerForMe").

Unfortunatly the timer are not on point. Sometimes they are lacking behind. This happens when the frame rate drops. This can lead to a unwanted rendering order. For example the pattern which was tried to achive in the example TimedDot should look like this:

Lila, Lila, Green, Lila, Lila, Green, Clear.

Especially at the beginning of the sketch the frame rate increases slowly to the desired one. Therefore there are some missing frames in the beginning and the pattern is messed up. To achive a better result you should use a multiple of the frame rate for millis. (If not set the standard frame rate is 60). You can see the difference below.

Millis multipe of 100 Millis multiple of 60
timed dot normal timed dot 60

ScratchSound (internally)

Usage: import eu.barkmin.processing.scratch.ScratchSound

API: https://www.barkmin.eu/processing-library-scratch/reference/eu/barkmin/processing/scratch/ScratchSound.html

Source Code: https://github.com/mikebarkmin/processing-library-scratch/blob/master/src/eu/barkmin/processing/scratch/ScratchSound.java

ScratchImage (internally)

Usage: import eu.barkmin.processing.scratch.ScratchImage

API: https://www.barkmin.eu/processing-library-scratch/reference/eu/barkmin/processing/scratch/ScratchImage.html

Source Code: https://github.com/mikebarkmin/processing-library-scratch/blob/master/src/eu/barkmin/processing/scratch/ScratchImage.java

ScratchColor (internally)

Usage: import eu.barkmin.processing.scratch.ScratchColor

API: https://www.barkmin.eu/processing-library-scratch/reference/eu/barkmin/processing/scratch/ScratchColor.html

Source Code: https://github.com/mikebarkmin/processing-library-scratch/blob/master/src/eu/barkmin/processing/scratch/ScratchColor.java

Scratch makes it easy to work with colors on the hsl color spectrum. To achive a similar behaviour the class ScratchColor was created.

Examples

Cat

Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/Cat

An example with a simple one file setup.

cat example

Robot

Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/Robot

An example with a class in another file.

robot example

Pipes

Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/Pipes

An example with heavy use of the ScratchPen. It also plays an sound file in the background.

pipes example

RainbowVine

Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/RainbowVine

An example which makes use of mouse events and timers.

rainbow vine example

RandomDot

Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/RandomDot

An example which makes use of timers.

random dot

TimedDot

Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/TimedDot

An example which makes use of timers.

timed dot

Timer

Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/Timer

An example which makes use of the many methods of the timer.

timer

Missing

  • blocks which are not listed above are currently missing
  • sprites can not sense something. E.g.: a color or another sprite
  • sprites can not speak or think

How to install Scratch

Install with the Contribution Manager

Add contributed Libraries by selecting the menu item SketchImport Library...Add Library... This will open the Contribution Manager, where you can browse for Scratch, or any other Library you want to install.

Not all available Libraries have been converted to show up in this menu. If a Library isn't there, it will need to be installed manually by following the instructions below.

Manual Install

Contributed Libraries may be downloaded separately and manually placed within the libraries folder of your Processing sketchbook. To find (and change) the Processing sketchbook location on your computer, open the Preferences window from the Processing application (PDE) and look for the "Sketchbook location" item at the top.

By default the following locations are used for your sketchbook folder:

  • For Mac users, the sketchbook folder is located inside ~/Documents/Processing
  • For Windows users, the sketchbook folder is located inside My Documents/Processing

Download Scratch from https://github.com/mikebarkmin/processing-library-scratch/releases/latest

Unzip and copy the contributed Library's folder into the libraries folder in the Processing sketchbook. You will need to create this libraries folder if it does not exist.

The folder structure for Library Scratch should be as follows:

Processing
  libraries
    Scratch
      examples
      library
        Scratch.jar
      reference
      src

Some folders like examples or src might be missing. After Library Scratch has been successfully installed, restart the Processing application.

Troubleshooting

If you're having trouble, have a look at the Processing Wiki for more information, or contact the author Mike Barkmin.