high resolution images with off-screen drawing

In an earlier post I have shown how to make smooth images at any scale using the pdf-renderer. But you can do this only with graphics objects such as line, point, shape, ellipse and so on. It won’t work if you want to manipulate pixels to create such as fractal images. You need too a different solution if the pdf-viewer does not do what you want it to do. Then, you could simply use a larger screen size, but this often becomes inconvenient.

To make a good large print you would need images with about 25 million pixels. One side having 5000 pixels you could write “size(5000,5000)”, but this is much too large for your computer screen. Thus we better use an off-screen image buffer to draw and to save the picture at full resolution. The program should show the result in a small convenient screen size.

Based on these ideas I made the class “OutputBuffer”. You find the code in the next post. It has a PGraphics object. Its dimensions are a multiple, called magnification, of the dimensions of the processing graphics window. We have the usual methods to show it on-screen and to save it. The unit of length is a number of pixels on the computer screen and independent of the value of magnification. Thus we can use a low magnification of 1 or 2 to rapidly debug a program. Then we only need to increase the magnification to save the same image in high-resolution.

Here’s a small program, that shows how to use the class “OutputBuffer”. It draws something using objects and then manipulates pixels. Note how this fits. Try out different magnification values. Please do not forget “outputBuffer.beginImage();” before drawing and “outputBuffer.endImage();” at the end. Doing only pixel manipulation requires “outputBuffer.beginPixels();” before drawing and “outputBuffer.endPixels();”.

 OutputBuffer outputBuffer, activeOutputBuffer;

void setup() {
  size(600, 600);
  outputBuffer=new OutputBuffer(1);

void draw() {
//  outputBuffer.magnification(0.5);
  Vector v;
  int i,j,index;
  outputBuffer.thisImage.line(-100, 0, 100, 0);
  outputBuffer.thisImage.line(0, -100, 0, 100);
  for ( j=0;j<outputBuffer.thisHeight;j++){
    for( i=0;i<outputBuffer.thisWidth;i++){
      if((sq(v.x)+sq(v.y))<0.04) outputBuffer.thisImage.pixels[i+outputBuffer.thisWidth*j]=color(255,0,0);
This entry was posted in Anamorphosis, Cellular automata, Extra, Fractals, Kaleidoscopes, programming and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.