How do I make DrawingCanvas faster?

Post reply
0 favourites
  • 5 posts
From the Asset Store
Colorful Clock
$5 USD
Be quick and match the clock’s hand with the circle color!
01smile's avatar
01smile

  • Hi,

    Is it possible to manipulate the pixels in a DrawingCanvas at much higher speed, redrawing every mouse movement? Or is manipulating pixels at high speed possible with another object?

    What I want to achieve eventually is a heatmap-drawing effect.

    I hope the c3p file makes my question clear:

    c3p: drive.google.com/file/d/1bzYRqDxKG2PJMvgfpW2TCtTBOohLenk3/view

    I simplified my code to focus on the manipulation of the pixels. The DrawingCanvas now gets another color every .1 second (pixel by pixel). But on my Windows laptop it's only two or three times/second.

    What I want is possible with js & html canvas. I included the html/js code in my project in an Iframe to show what I want to get.

    The loop in 'on snapshot' takes to much time for the html/js code to work, so disable this loop to see what I want to achieve!

    Thanks!

    Wim

  • Changing the canvas image pixel by pixel will always be slow. Also, my C3 crashes all the time when I'm trying to preview your project :)

    Maybe you can work around this by using round sprites, with circular gradient colors. Change their opacity/size as the mouse moves, and paste them onto the canvas.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Example to fake it in c3: drive.google.com/file/d/1zokWZsejsKkabFvjdBWFHeUT1oGZFC63/view

    You can change the values to get better effect. Reading pixel in and somehow converting it, will be very slow. JS code does same effect drawing, you could remake it with sprites etc.

    There seems to be bug, can't apply blur vertical&horizontal to sprites, but if they fix it, you could get much better effect. Maybe even similar to your Iframe.

  • Thanks,

    Make the Drawingcanvas much smaller to prevent crashing, this reduces the number of iterations.

    I already tought about using a sprite but

    the problem with using sprites is that I can't change the gradient of the sprite while running, I think. Or I have to limit to a few gradients.

    And I wonder why the loop in js is so much faster it can keep up with mouse movements.

    Wim

  • Snipg Thanks, I'll try this!

    Wim

Post reply
  • 5 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)