Processing 1.0 - Processing Discourse

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › scrolling canvas

‹ Previous Topic | Next Topic ›

Pages: 1

scrolling canvas (Read 406 times)

meecect

scrolling canvas
Jul 10^th, 2008, 1:44am

Hi,
I'm a newbie to processing (I'm actually using processing.js, but I think this is a generic processing language quesiton). I've been able to draw some shapes and bezier lines. Now I would like know how to 'scroll my canvas'. The effect I am looking for is much like google maps. I'd like to grab a piece of the canvas and drag it around. This would make all the objects drawn on the canvas move, som some objects will move 'off screen' and some objects would move 'on screen'.

Is there a concept of an off-screen drawing context and then just rendering the part that is 'visible'?

I don't need to know how to go to the next level, as google does, and use ajax to dynamically fetch data adjacent to the canvas edges....I have access to all objects I want to draw upon initial load, but I don't necessarily want to render them all in the 'visible' part off the canvas initially.

Thanks,
Cliff

PhiLho

Re: scrolling canvas
Reply #1 - Jul 10^th, 2008, 8:06am

It is not so much of a generic Processing question (which isn't a language, but a library (or an API): Processing.js uses JavaScript language, official Processing uses Java language.
And the .js version might lack some features (I haven't looked into it, so I might be wrong!), like drawing on an off screen buffer and copying it to real canvas.

Beside, in all drawing APIs I know, you are allowed to draw beyond the screen limits: it is just wasted CPU, since the pixels will fall on the ground, having no canvas to grip on.
You can also draw on a big canvas, and use scale() transform to zoom in on a particular area, showing only a little sub-window of the whole picture, using translate() transform to move it around.
Another solution is to just redraw the screen, with a shift in the coordinates (or again a translate()), on each moving request. Having an efficient algorithm, avoiding to draw figures you know are totally off screen, is important for performances, but not trivial.

Pages: 1

‹ Previous Topic | Next Topic ›