Creating an Applet
Processing can be downloaded here. This section assumes that it is already working on your computer. Open up Processing and you should see the “editor”, which looks like this: If we press the “play” (or “run”) button on the top left, we’ll get a little applet like the one below. Easy, right? Think of that [...]
Size and Background
So we have out applet, but it’s a little dull so far – just a grey box. Let’s make it bigger, and more colorful. In the editor, add the following code: void setup() { size(500, 500); } This is the setup() method. The brackets group the code – in this section, everything you add should [...]
Drawing Shapes
Add one more line to your setup() method (you’ll see why later): noLoop(); Now, we’re going to make a draw() method. Just like when we made the setup() method, we have the following: void draw() { } Now, let’s draw something! How about a square. rect(50, 50, 400, 400); You should have something that looks [...]
Saving Things for Later
So far, we’ve found ourselves using the same numbers again and again. Wouldn’t it be easier if we could save them for later? We can! And it’s easy. Above your setup() and draw() methods, add the following: int width = 500; int height = 500; int border = 50; Now, change the rect() line in [...]
Making the Image Change
Try this: int width = 500; int height = 500; int x = 0; int y = 0; int s = 10; void setup() { size(500, 500); background(236, 0 , 128); frameRate(5); } void draw() { fill(255, 126, 0); stroke(238); rect(x*s, y*s, s, s); x++; y++; } What’s changed? Some extra variables at the top [...]
Sometimes Do This, Sometimes Do That
So we have our image changing, but all the squares are the same color. Let’s switch that up! If your friend was going to get you a soda, you might say – get me Cherry Coke if they have it, if not I’ll have a Dr Pepper. The way we do that is by using [...]
Repeating Things
We repeat things using loops. There are multiple kinds of loops, but one of the most useful is the for-loop. We use this when we want to do something a certain number of times. It looks like this: for(int i = 0; i < max; i++) { } Whatever goes in the brackets gets repeated [...]
Responding to Mouse Clicks
So far, our applets aren’t very interactive. But it’s really easy to add response to mouse clicks. Make a new applet with a plain background. Our setup() method will be the same as usual, and we’ll want the variables for width, height, and a third one – a radius. Make sure there’s no noLoop() – [...]
Responding to Keyboard Input
Try the following code: int width = 500; int height = 500; int x; int y; int size = 20; void setup() { size(500, 500); background(236, 0 , 128); x = width/2; y = height/2; stroke(255, 126, 0); fill(238); rect(x, y, size, size); } void draw() { } void keyPressed() { if (key == CODED) [...]
Saving Lots of Values
Sometimes, we want to keep track of a lot of values, more than we can using individual variable names. We do this using arrays. Here, we’ll use two arrays to create a scrolling background effect. We declare an array like this: int[] name = new int[size]; Here, the “int” means we’re storing a whole number, [...]
Working With A Grid
Many simple games take place on grids – Tetris or Minesweeper are examples. So how can we do that? We’ll want to use a grid to keep track of what’s going on. Something we can use, is what’s called a 2-dimensional array. We can declare one of those like this: int[][] grid = new int[width][height] [...]
Turning Your Applet Into a Web Page
Click “Export” on the top left of Processing. In the folder where you’ve saved your applet, you’ll now find another folder called “applet”. If you want to put your applet on the internet, you just have to upload that folder!
Pretty Web
Here’s the setup() method for this applet: void setup() { size(500, 500); background(64); noLoop(); } My draw method consists of 9 lines. 1 loop, 4 stroke() calls, and 4 line() calls. Can you work out how it’s done?
Marble Fractal
Fractals are really awesome. Here’s a simple one: How’s this fractal made? Let’s show it at a lower depth. This is a simple square, each time it is divided into four. One diagonal becomes darker, the other lighter. And the each of these new squares is divided until we reach the depth that we want. [...]
Fractal: Sierpinski triangle
See the Wikipedia article. The Sierpinski Triangle looks like this: The image above has a depth of 9 – let’s show it at a lower depth – 4 – below: Here, we start with a large triangle. Each time we split this triangle into 3 more triangles, with an empty middle (itself a triangle). Here’s [...]
Powered by WordPress using the F8 Lite Theme
subscribe to posts or subscribe to comments
Processing Workshop by Cate Huston is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Log in