makingthenoise.com : music, art, code
August 17, 2013

One Sketch to Rule Them All (Part 3)

In my last post, I showed how you can flip between 2 Processing sketches within the same window.  This might be useful if you have a library of sketches you want to demo, but don’t want to close/open each sketch by hand.

Now I’d like to show how you can display 2 sketches at the same time.

ConcurrentSketches

This image may not look too impressive, but what you’re seeing is 2 different sketches overlaying on top of each other.  The trick is that I’m using the createGraphics() method to create an offline graphics buffer, sending that buffer to the child sketches, and then displaying the results as an image in the parent sketch:

public void draw() {
		background(0);

		childSketch1.draw(offlineGraphics);
		image(offlineGraphics.get(), 0, 0);

		childSketch2.draw(offlineGraphics);
		image(offlineGraphics.get(), 0, 0);
	}

Within each of the child sketches, I have:

public void draw(PGraphics offlineGraphics)
	{
		offlineGraphics.beginDraw();
		offlineGraphics.background(0, 0);
		offlineGraphics.fill(100);
		offlineGraphics.ellipse(mouseY, mouseX, 50, 50);
		offlineGraphics.fill(200);
		offlineGraphics.ellipse(mouseX, mouseY, 50, 50);
		offlineGraphics.endDraw();
	}

Something that’s very important to note is this line:

offlineGraphics.background(0, 0);

 

You’re probably used to calling background(0) to clear the background of your sketch before drawing, otherwise your sketch looks like this:

ConcurrentNoBackground

The benefit of using createGraphics() and background(0,0) is that you can clear the background with a transparent alpha channel.  This allows you to layer independent drawings on top of one another.

The downside of this approach is that any child sketches need to be modified to accept the offlineGraphics parameter.  It should just be a quick copy/paste job to modify an existing sketch, but still a small hassle.

What secrets might Part 4 contain???

1 to “One Sketch to Rule Them All (Part 3)”

Trackbacks/Pingbacks

  1. […] I’ve always been a fan of the HeMesh 3d rendering library for Processing, but the real breakthrough came when I figured out how to render content offline and feed that content into the main drawing pipeline.  This allows you to apply 2d effects to your 3d renderings (edge detect, mirror, blur, etc).  I talk about this technique a bit in this post. […]

  1. makingthenoise.com says...

    […] I’ve always been a fan of the HeMesh 3d rendering library for Processing, but the real breakthrough came when I figured out how to render content offline and feed that content into the main drawing pipeline.  This allows you to apply 2d effects to your 3d renderings (edge detect, mirror, blur, etc).  I talk about this technique a bit in this post. […]

Leave a Reply