 |
| Saved Frame (Perlin Noise based) |
Now that you've begun to create digital art using code, you may want to share it with your friends. Actually, that was probably one of your goals to begin with... There are a few options that Processing offers right out of the box that allow you to make images and movies from your sketches. Saving images is actually quite easy and only requires a small bit of code. The object we will explore in this tutorial is called saveFrame().
//the basic code to save a picture is as simple as...
void draw(){ //...drawing code...
saveFrame("picture.jpg"); noLoop(); //this bit of code is helpful if you are only saving one image}
You are not restricted to making *.jpg files; *.tif, *.tga, and *.png are all compatible file-types for images, and you can name the file as you please. There is one drawback to this method concerning creating transparencies. I will address this in a future tutorial, or you can jump ahead and start exploring the createGraphics() object.
There are also a couple of more advanced ways to save pictures. If you are running an animated program, you may want to save multiple frames and decide later which you like the best.
//to save multiple sequential imagesvoid draw(){ //basic 'for loop' for(int i=0;i<100;i++){ //...iterative drawing code... saveFrame("pic-####.jpg"); /*note that the object appears within the 'for loop' This option will sequentially number the image each time the loop runs (pic-0000, pic-0001, etc.)*/
}}A final option is to program a function that saves a picture. This involves creating a command that recognizes an input and saves the image when it receives the proper input. This section is slightly more advanced.
//to selectively save images, one option is to create a class that recognizes human imputvoid draw(){ //...drawing code... if(press){
saveFrame("pic-####.jpg"); //will only save if input is detected }//class to determine if mouse is pressed boolean press() { if(mousePressed) {
press = true; /*sends indication that input is detected and to save frames while the mouse button is held down*/ }
if(!mousePressed){
press = false; //these commands can be replaced by keystrokes, or other inputs
}}It is important to note that all of these images will be saved in the folder for the sketch you are working on at the time. You can access this folder with command-k on a Mac and ctrl-k (I assume) on PC. Images will be saved at the resolution of your draw window. Additionally, running the script back-to-back may conflict with files named in a similar fashion. With that in mind you should examine your images after each iteration, choose the ones you like, or change the way files are named.
This is my first tutorial, I hope it was helpful, and would appreciate any feedback or debugging. I truly enjoyed writing this up, and plan to do many more in the near future. If you end up using this code, please share your work with me, I would love to see it!
