Difference between revisions of "Processing"

From SizeCoding
Jump to: navigation, search
Line 1: Line 1:
 
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 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'.
+
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 ===
 
=== Setting up ===
 
You can start using processing by downloading the processing editor at https://processing.org/download
 
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.
+
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/
+
 
 +
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 ===
 
=== Getting started ===
 
Processing programs are coded using either the Java or JavaScript language.
 
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. There is also a setup() function available, but those can be skipped for sizecoded productions.
+
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:
 
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:
  
<syntaxhighlight lang="javascript">
+
<syntaxhighlight lang="java">
t=0;function draw(){  
+
int t=0;
 +
void setup(){size(640,360);}
 +
void draw(){  
 
// your effect code
 
// your effect code
t++;}
+
t++;
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
The setup() function can be skipped if you decide to stickg to the default canvas size of 100x100 pixels.
  
 
=== Video display ===
 
=== Video display ===
 
Processing's default canvas size has a resolution of 100 x 100 pixels with 256 shades of grayscale colormode.
 
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:
+
You can set your canvas using the following functions:
  
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
createCanvas(width,height,[renderer])
+
size(width,height,[renderer])
resizeCanvas(width,height)
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
Line 51: Line 57:
  
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
t=0;function draw()
+
int t=0;function draw()
 
{
 
{
for(y=0;y<100;y++)for(x=0;x<100;x++){
+
for(int y=0;y<100;y++)for(int x=0;x<100;x++){
 
set(x,y,x&y+t);   
 
set(x,y,x&y+t);   
 
}
 
}

Revision as of 06:30, 23 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()
print()

Getting something on screen

Here is a bit of code to get you started:

int t=0;function draw()
{
for(int y=0;y<100;y++)for(int x=0;x<100;x++){
set(x,y,x&y+t);   
}
updatePixels();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!