Difference between revisions of "Processing"

Latest revision as of 10:42, 25 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 uses Java as its core language, But also support web 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 p5.js direct online at https://editor.p5js.org/ Even though the p5.js variant is great for web export, its less suitable for sizecoding as it generates quite a hefty .html file to launch the program.

Getting started

Processing programs are coded using either the Java or JavaScript language. For sizecoding, we are focussing on Java, as this will work as a standalone PDE file within the Processing IDE.

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.

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:

int t=0;
void setup(){size(640,360);}
void draw(){ 
// your effect code
t++;
}

The setup() function can be skipped if you decide to stickg to the default canvas size of 100x100 pixels.

Video display

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

size(width,height,[renderer])

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()
text("text",x,y)

Getting something on screen

Here is a bit of code to get you started:

int t=0;void draw()
{
for(int y=0;y<100;y++)for(int x=0;x<100;x++){
stroke(x&y+t);point(x,y);   
}
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(value) or stroke(value) calls, but your can write full rgb colors via stroke(r,g,b) and fill(color(r,g,b)).

You can set a different colormode (RGB or HSV for example) for primitive drawing using the colorMode call ( https://processing.org/reference/colorMode_.html )

Text Handling

Texts can be printed using the default font with the text("text",x,y); command. Fontsize can be set with textSize(size); and color with fill(color(r,g,b)). Additionally there are some options for Text alignment ( see https://processing.org/reference/#typography ). External fonts can not be loaded/used for sizecoding.

Using Shaders

It is possible to use shaders in processing by initializing your canvas in P2D or P3D mode.

Since everything needs to be in a single PDE file, we cannot use the LoadShader() function, but need to use the PShader constructor to initialize the shader. After initialization you can select the shader using the shader(shadername) or filter(shadername) function.

Here is a minimal example of how to setup a simple shader:

// Shadercode 
PShader s;String g="#version 150\nin vec4 position;out vec4 fragColor;uniform float t;void main(){"; 
String[] v={g,"gl_Position=position-.5;}"};
String[] f={g,"vec2 p=gl_FragCoord.xy/vec2(480,270);fragColor=vec4(p.x,p.y,cos(p.y*2.+t),1);}"};
void setup(){size(960,540,P2D);s=new PShader(this,v,f);}
void draw(){filter(s);s.set("t",(float)millis()/999);}

Sound

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

Unfortunately, this is no option for sizecoding as this is an external library that needs to be delivered alongside the PDE file.

However it is possible to access sound directly through java via the:

import javax.sound.sampled.*; // for digital sound output
import javax.sound.midi.*; // for MIDI sound output

However, minimal setup for these libraries is at least 150-300 bytes, so they are unusable for 256 byte intros or less and even for larger intros cut into the size-budget significantly.

Optimisation Tricks

Here are a couple of other tips and tricks that help you squeeze those bytes:

• Use single line of global variables to save space on type definition
• Assign as many variables in a single line when type definition is need , e.g. float x=o%320,y=o/320,z=3;
• For loops can be written like this: for(i=0;i++<256;) to save 1 character.
• If its clear from the call what type to expect, it is possible to use var instead of type new Typename when used locally in a function.
• You can stick 2 for-loops together like so for(y=0;y<99;y++)for(x=0;x<99;x++){ ... }

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.

The PDE file is just a raw dump of your Java code and needs to be delivered as a single PDE file without external dependencies. 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/