Drawing faster than draw() screen update?
in
Programming Questions
•
2 years ago
Hi,
I have a sketch which is doing some pretty heavy calculations every frame. and thus is only updating at about 5fps. I Don't mind this, as it works with the graphics and gives it a slow, meditative feel. However, I also have mouseclicked and mousedragged methods that allow the user to draw on the screen - and what they draw is then subjected to the same evolutionary process as everything else on the screen. (this work was exhibited - see
http://forum.processing.org/topic/vision-persist-at-nuit-blanche-london-ontario#25080000001006583)
Am I right in thinking that all the mouse events are queued up and only processed once very draw() loop? The problem is that the user's drawing isn't very smooth - it only seems to update at the same framerate that the sketch is running at.
I was wondering if there was any way I could make the drawing update the screen as it happens - without having to wait for the end of the draw loop. The processing of the evolution of the picture would still take place slowly, but drawing would be processed "instantly". Perhaps using threads?
The basic structure of the program is:
class square()
{
//a square is just a square of a particular size, position, and colour - with methods to set the colour and draw itself
square() {//constructor}
render(){//draw the square}
}
float xsize=400;
float ysize=320;
square[][] grid= new square[(int)xsize][(int)ysize];
float ysize=320;
square[][] grid= new square[(int)xsize][(int)ysize];
void setup()
{
//set up all the parameters, etc
}
void draw()
{
iterate through the grid of squares, blending their colours together in a certain way to create a constant evolution, then draw all the squares
}
void mousePressed()
{
tempcol=color(random(255), random(255), random(255)); //set a random drawing colour when the mouse is pressed
}
void mouseClicked() //draw a single square at the click point
{
tempcol=color(random(255), random(255), random(255));
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].col= tempcol;
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].render();
}
void mouseDragged() //draw squares along the dragging path
{
if (mouseX>0 && mouseY>0 && mouseX<width && mouseY<height)
{
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].col= tempcol;
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].render();
}
}
{
tempcol=color(random(255), random(255), random(255)); //set a random drawing colour when the mouse is pressed
}
void mouseClicked() //draw a single square at the click point
{
tempcol=color(random(255), random(255), random(255));
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].col= tempcol;
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].render();
}
void mouseDragged() //draw squares along the dragging path
{
if (mouseX>0 && mouseY>0 && mouseX<width && mouseY<height)
{
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].col= tempcol;
grid[(int)(mouseX/squarewidth)][(int)(mouseY/squareheight)].render();
}
}
So draw() is constantly blending and redrawing the grid of squares, but you can click and drag to draw squares of a random colour at the same time. A new random colour is chosen every time you click the mouse down.
Any ideas about how to make the mouse stuff happen faster than the draw loop would be most welcome. I'm happy to post the whole program if people are interested - but it is quite complex, and the essential information is in the summary above.
Thanks,
Giles.
1
and replaced it by pixel array manipulation using only one loadPixels/updatePixels for the whole drawing operation. There are also some other tweaks. It runs at about 140 fps on my computer now.