# Render high-res images using Hype Framework

**URL:** <https://discourse.processing.org/t/render-high-res-images-using-hype-framework/17815>\
**Category:** Libraries\
**Created:** [February 14, 2020, 9:09am UTC](https://discourse.processing.org/t/render-high-res-images-using-hype-framework/17815 "2020-02-14T09:09:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrclstrtr](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@mrclstrtr](https://discourse.processing.org/u/mrclstrtr)\
**Post date:** [February 14, 2020, 9:09am UTC](https://discourse.processing.org/t/render-high-res-images-using-hype-framework/17815/1 "2020-02-14T09:09:57Z")

</div>

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.

```auto
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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 17, 2020, 1:41am UTC](https://discourse.processing.org/t/render-high-res-images-using-hype-framework/17815/2 "2020-02-17T01:41:19Z")

</div>

> [@mrclstrtr](#):
>
> Is there a way save frames in a higher resolution

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.

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/9303/hype-pgraphics)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

**Author:** ![mrclstrtr](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@mrclstrtr](https://discourse.processing.org/u/mrclstrtr)\
**Post date:** [February 17, 2020, 2:33pm UTC](https://discourse.processing.org/t/render-high-res-images-using-hype-framework/17815/3 "2020-02-17T14:33:52Z")

</div>

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 😉

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

Cheers,  
Marcel

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 17, 2020, 3:06pm UTC](https://discourse.processing.org/t/render-high-res-images-using-hype-framework/17815/4 "2020-02-17T15:06:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mrclstrtr](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@mrclstrtr](https://discourse.processing.org/u/mrclstrtr)\
**Post date:** [February 17, 2020, 3:11pm UTC](https://discourse.processing.org/t/render-high-res-images-using-hype-framework/17815/5 "2020-02-17T15:11:44Z")

</div>

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.