Render high-res images using Hype Framework

Processing Libraries
1

Hi everybody,

I recently started working with Processing in combination with Joshuas’ Hype Framework. I’m able to save single frames from an animation but only in the same resolution as the sketch e.g. 800x500. Is there a way save frames in a higher resolutions especially using Hype?
I found a snippet here on the forum providing a tile based solution but I can not get it running correctly.

HDrawablePool dp2;
HSwarm    swarm;
HTimer    timer;

int scaleValue = 3;  // Multiplication factor
int xoffset = 0;     // x-axis offset 
int yoffset = 0;     // y-axis offset

void setup() {
	size(500,800);
	H.init(this).background(#ffffff).autoClear(false);
	smooth();

	swarm = new HSwarm()
  	.addGoal(H.mouse())
  	.speed(10)
  	.turnEase(0.05f)
  	.twitch(40)
 	;


	dp2 = new HDrawablePool(500);
	dp2.autoAddToStage()
	.add(new HEllipse(5))
	// .add(new HRect(2))
	.colorist(new HColorPool(#BFBFBF, #8C8C8C, #404040, #262626, #0D0D0D, #F2F2F2, #BFBFBF, #8C8C8C,#F23E2E).fillOnly())
	.onCreate(
			new HCallback() {
				public void run(Object obj) {
					int i = dp2.currentIndex();
					HDrawable d = (HDrawable) obj;
					
					d
						.strokeWeight(1)
						.stroke(#000000)
						.loc(width/2, height)
						.anchorAt(H.CENTER)
						.size((int)random(10,50), (int)random(5,3) )
						
					;
					swarm.addTarget(d);

				     

				}
			}
		);

	timer = new HTimer()
  	.numCycles( dp2.numActive() )
  	.interval(550)
  	.callback(
   	new HCallback() {
    	public void run(Object obj) {
     	dp2.request();
    		}
   		}
  	);
	
	
	
}

void draw() {
	
	H.drawStage();
	scale(scaleValue);
  	translate(xoffset * (-width/scaleValue), yoffset * (-height/scaleValue));
    
	
}


void keyPressed(){
    if(key=='s'||key=='S')
        // saveFrame("../frames/#########.tif"); 
    	setOffset();
        
}


void setOffset() {
  save("../frames/lines-" + xoffset + "-" + yoffset + ".jpg");
  xoffset++;
  if (xoffset == scaleValue) {
    xoffset = 0;
    yoffset++;
    if (yoffset == scaleValue) {
      exit();
    } 
  }
  
}

If anyone could point me in the right direction. Thanks in advance
Marcel

1 Like
2

Can you simply use size() to define a different sketch size?

Alternately you could use a PGraphics with any resolution you want and save to it (so, a different graphics buffer from the main sketch canvas). For example, see this previous discussion of HCanvas and getting out the PGraphics.

3

Hi Jeremy,

thanks for your feedback. I’ve taken a look into it but can’t seem to really understand how the method mentioned in the threat is working with my code.

On a side note I should mentioned that I would like to render a sketch size for later printing purposes. If I would simply change size(800,500) to size(3500,4500) or something even bigger I can kiss my CPU goodbye :wink:

Any idea how to implement it with H.drawStage()?

Cheers,
Marcel

4

Is the content of the 3500, 4500 render a single-pass frame, or is it content that would build up on the sketch surface over many frames / seconds / minutes of running?

5

the animation develops over a period of time e.g. a swarm movement. I currently make use of saveFrame() in combo with a key command for the low resolution renders and hoped that there is a way to render larger images with a similar method.