Difference between revisions of "Processing"

Revision as of 05:42, 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 are also setup() and update() functions 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 time() 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

The PICO-8 has a 128x128 pixel display with 16 colors which can be accessed via a wide range of graphics functions.

Built-in Draw functions

Here are a couple of built-in drawing functions you can use:

CLS(color=0)
PSET(x,y,color) 
color=PGET(x,y)
CIRC(x,y,r,color)
CIRCFILL(x,y,r,color)
RECT(x,y,w,h,color)
RECTFILL(x,y,w,h,color)
LINE(x0,y0,x1,y1,color)
PRINT(text,[x,y,color]) / ?text,x,y,color

COLOR(color) - Set default color
PAL(destindex,sourceindex) - Replace dest colorindex with color from sourceindex
FILLP(mask) -- Set fill pattern for circ, circfill, rect, rectfill, pset, and line

Getting something on screen

Here is a bit of code to get you started:

T=0FUNCTION _DRAW() 
FOR Y=0,128 DO FOR X=0,128 DO
PSET(X,Y,X~Y+T)
END END
T=T+1
END

Which will display an animated 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 PICO-8 does not allow you to poke the sound registers directly, but instead works with the SFX(effectindex) command to generate sounds. However we are allowed to poke the piece of memory that holds the sound effect data, like so:

POKE(12869+offset,value)SFX(1)

More recently, the PICO-8's secret 5512Hz 8-bit digital audio out API at port 0x808 has been discovered. More information about this port can be found here: https://www.lexaloffle.com/bbs/?tid=41991

Optimisation Tricks

Here are a few tricks you can use to optimize your PICO-8 code, using a plasma-effect as an example:

• Step 1: Use label/goto instead of the FUNCTION _DRAW

::F::
FOR Y=0,127 DO FOR X=0,127 DO
PSET(X,Y,SIN(X>>7)+SIN(Y>>7)+T())
END END
FLIP()GOTO F

• Step 2: For pixel effects, you can skip the FLIP() command for Monte-Carlo style updating

::F::
X=RND()Y=RND()
PSET(X<<7,Y<<7,SIN(X)+SIN(Y)+T())
GOTO F

• Step 3: Use the PRINT/? command to draw characters instead of pixels to save a few characters

::F::
X=RND()Y=RND()
?0,X<<7,Y<<7,SIN(X)+SIN(Y)+T()
GOTO F

• Step 4: If it is possible to write the entire code on a single line, you can use the WHILE(1) code-construct, for example

WHILE(1)X=RND()Y=RND()?0,X<<7,Y<<7,SIN(X)+SIN(Y)+T()

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:

• 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.

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/