Difference between revisions of "Processing"

Revision as of 07:21, 15 January 2023

Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.

Processing started out as using Java as a language, but later evolved for the web using using the p5.js library, which is now also available in the Processing editor as a 'mode'.

Setting up

You can start using processing by downloading the processing editor at https://processing.org/download This gives you an editor to get started with coding in java right of the box. If you'd like to use p5.js / JavaScript as your language, you can install the p5.js mode for the Processing editor or start coding p6.js direct online at https://editor.p5js.org/

Getting started

Processing programs are coded using either the Java or JavaScript language.

The main function used for updating the screen is the draw() function, so implementing this function is also more or less a requirement for doing anything with graphics. There is also a setup() function available, but those can be skipped for sizecoded productions.

Most animated effects will also need to use some kind of a timer, so you are likely to also use the built-in millis() function or keep track of your time (t) yourself as well. So a minimal setup would look something like this:

t=0;function draw(){ 
// your effect code
t++;}

Video display

Processing's default canvas size has a resolution of 100 x 100 pixels with 256 shades of grayscale colormode. You can set or resize your canvas using the following functions:

createCanvas(width,height,[renderer])
resizeCanvas(width,height)

Built-in Draw functions

Here are a couple of built-in drawing functions you can use. For most primitives have their color set via the fill(color) call. Unfortunately for us sizecoders, primitives have stroke enabled by default. You can disable this using the noStroke() call.

background(colorvalue) - clears screen
point(x,y) 
circle(x,y,r)
ellipse(x,y,rw,rh)
rect(x,y,w,h)
line(x0,y0,x1,y1,color)
square(x,y,d)
triangle()
arc()
quad()
print()

Getting something on screen

Here is a bit of code to get you started:

t=0;function draw()
{
noStroke();
for (y=0;y<100;y++) for (x=0;x<100;x++) {
fill(x&y+t);circl(x,y,1);    
}
t++;
}

Which will display a moving XOR pattern.

Color Handling

Default colormode for using primitive draws in processing is a grayscale value 0..255, usually passed via the fill(grayvalue) call. You can set a different colormode (RGB or HSV for example) for primitive drawing using the colorMode call ( https://processing.org/reference/colorMode_.html )

Sound

Processing allows for sound output using the Sound library ( https://processing.org/reference/libraries/sound/index.html )

Optimisation Tricks

Updated soon.

Final optimisations and PDE File Release

When you are happy with your intro and want to get it ready for release, it becomes time to look at squeezing those last bytes.

Final optimisations can be done by stringing as much code together on single lines and removing any extra spaces and whitelines. Here are a couple of other tips and tricks that help you squeeze those final bytes:

• No need to use the setup() function, just resize your canvas inside the draw() function.
• In some cases java-code might be smaller than javascript/p5.js depending on your code.
• specific integer casting is possible with ~~varianble or expression.
• You can stick 2 for-loops together like so for(y=0;y<99;y++)for(x=0;x<99;x++){ ... }
• JavaScript: You can stick code and don't have to use ; when connected to a { or }

PDE file release

The PDE file is just a raw dump of your java/javascript code. Unfortunately, that means that using an eval with the code 'packed' as unicode characters (as is used with codetweets for example), does nothing for decreasing your file size.

Also, the Processing editor doesn't show character count, so you'll have to keep track of your filesize manually. Once you have your PDE file wihtin the designated target size, make sure to add a screenshot and readme.txt / file_id.diz to your production and create a ZIP file for the PDE, screenshot and readme.

Additional Resources

Sizecoding using Processing is still in its infancy, but luckily there is already plenty of information to get you started!

• Processing API Reference https://processing.org/reference/
• p5.js API Reference https://p5js.org/reference/