An Introduction to Processing


Published on

Processing ( is a great tool in learning to program and you can make some amazing stuff with it - just look at the exhibit. These slides step through creating your first little applet, how to override PApplet, the setup() and draw() methods, and animating your applet.

1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • An Introduction to Processing

    1. 1. An Introduction to Processing Cate Huston
    2. 2. What We’ll Cover • Making your first Applet • The Processing API (where you can find all kinds of useful methods) • Animating an Applet in Processing • Exporting your Applet
    3. 3. What’s Processing? • “an electronic sketchbook for developing ideas” • Open source environment • Programming language (very similar to Java) • Can be used as a library in Eclipse • Makes it easy to create Applets
    4. 4. So What Can We Make? • Personally, I like to use it to make Fractals and little games: • • But you can use Processing for all kinds of things, see: •
    5. 5. Getting Started • Either • Get the version for your operating system from • Or get core.jar (this will be in the wave) • Make a new Project in Eclipse • Make a “lib” folder inside it, and put core.jar there
    6. 6. It should look like this. Notice that it’s inside the workspace, but not inside another folder.
    7. 7. Right click on core.jar, and select Build Path -> Add to Build Path
    8. 8. Make a new class, but click on the “browse” button next to the “Superclass” text box, and find “PApplet” - see how it’s in core.jar? And click OK.
    9. 9. See how the Superclass is different? This just means we’re building on top of “PApplet” - so we’re reusing stuff that other people have made, and customizing it.
    10. 10. This is different from last time: see how we’re importing PApplet, and our class extends PApplet.
    11. 11. When we make a Processing Applet we need these two methods.
    12. 12. If you’re pro you can use the @Override notation. This means that we are “overriding” (replacing) a method in the Superclass (PApplet). Don’t worry if this doesn’t make sense, it’s not that important.
    13. 13. You’ll want your setup() method to look a bit like this. Try running it and see what happens.
    14. 14. Size and Background • Play with the values we pass to size(), what happens if we make it size(500, 500) for example? • Play with the values we pass to background. What if we make it background(238)? • We can also call background with three values, which correspond to it’s RGB components. Try background(256, 0, 128).
    15. 15. Try adding some code to the draw() method. What does this do?
    16. 16. The Draw() Method • Try changing the colors and the numbers in the call to ellipse(). What does that do? • See what else you can find at http:// • Ellipse takes 4 arguments, what are they? • Try making some other shapes.
    17. 17. Making Cool Stuff • Have multiple shapes! • Can you use the constructs from the last session to make something more complex? • How about using a loop? • Change fill() and stroke() to add more color.
    18. 18. Lets try something more complicated: the values at the top (x, y, size and max) are global variables - this means we can use them in our setup() method as well as our draw() method. We’ll use draw() to animate our applet, taking away noLoop() means it gets called frequently.
    19. 19. This is our draw method. Each time it runs. it will update x and y - so the position of the object we draw will be different. And the color will be a little different too. Try it!
    20. 20. Using Animation • Try playing with the code and see what you can change. • Can you use a different shape? • What if you change the size of the shape (by changing size)? • What else would you like to know how to do?
    21. 21. Exporting Your Applet • Download the P5Exporter plugin from and drag it into your dropins folder inside the Eclipse folder in your file system. • Restart Eclipse. • You should see a new button at the top, click it and follow the instructions (screenshots follow).
    22. 22. See the button on the top left? That will start the P5 exporter. The select your applet on the right of the pop up box. You want to output an applet, not an application.
    23. 23. Running Your Exported Applet • You’ll find the Applet inside your project folder, which is inside your workspace folder. • It should be a folder called “applet”. • Click on index.html and it will open up browser window - your applet should be there.
    24. 24. Finally... • Processing has huge potential, we’ve not even scratched the surface here. • Look at the exhibition (at and get inspired! • Think about what other things you’d like to be able to make.
    25. 25. @kittenthebad