efficient grid of points/dots

Hello everybody,

I am writing an architectural drawing app and am going through each function to make it more efficient. Currently, the slowest function of the app is drawing a grid of points.

I am using this code to draw a grid of points at the moment :

    for i=1,30 do
        for j =1,30 do
            fill(255, 255, 255, 70)
            ellipse (i*25,j*25,4)
            end
            end

This is the simplified version, the actual version allows scaling such that any time on the screen could have as little as 200 ellipses and at most 2000+. At the extreme end, it starts to lag, therefore I am here asking for some advice on what other ways I can draw a grid of dots on the screen.

Cheers,
YK

@archistudent For starters, take fill out of the loop. You only need to do fill once before the loop.

Why not do that once using set context and then sprite that image. You could remake the image every time the grid is scaled.

@dave1707 cool ive taken fill out and it is noticeably better.

@jakAttak do you mean I should make a sprite of one dot and replicate them many times and scale them to correct size? That shouldn’t be too hard, I’ll try it out. What is ‘set context’ by the way?

@archistudent You could also remove the multiple in each loop by using the 3rd parameter in the “for” loop.


function setup()
end

function draw()
    background(40, 40, 50)
    fill(255, 255, 255, 70)
    for i=1,750,25 do
        for j =1,750,25 do
            ellipse (i,j,4)
        end
    end
end

@dave1707 Cool I never knew you could do that, I will need to look at the scaling equation to see if that would work though (it is not a simple 25 multiple)

Cheers

@archistudent The scale should just change the 2nd and 3rd parameters of the “for” loop.

@archistudent - try using JakAttak’s suggestion, like this

function setup()
    grid=image(750,750)
    setContext(grid)
    fill(255,255,255,70)
    for i=1,750,25 do
        for j=1,750,25 do
            ellipse(i,j,4)
        end
    end
    setContext()
    parameter.number("Zoom",.1,5,1)
end

function draw()
    background(50)
    pushMatrix()
    scale(Zoom)
    sprite(grid,WIDTH/2,HEIGHT/2)
    sprite("Planet Cute:Character Princess Girl",300,300)
    popMatrix()
end

@ignatz I see, that is some nice optimisation. I think that will be the quickest way.

Thanks everybody, when this app gets deployed in the field, i’ll send something to you all.

@ignatz, yup glad you understood

@archistudent, setContext lets you draw to an image instead of the screen, so you can optimize by only doing drawing loops once and then simply spriting that image later.

@archistudent You also need the other optimized code to draw the sprite when you change the scale. You don’t want the code to slow down every time you change scale.

@dave1707 - actually, I think my code works pretty well as it is :wink:

@Ignatz I just wanted to make sure that when he reworked his code for setContext that he used the optimized “for” loops when he added his scale code and didn’t go back to his original loops.

@dave1707 - I don’t think it needs to be redrawn each time the scale changes. You can just zoom the original grid picture and it looks fine.

Or at least, I think it looks fine. :slight_smile:

@Ignatz Each dot gets bigger and blurs a little as you zoom the sprite. I think it would look better to recreate the sprite with the original dot size each time the scale changes. That’s why I mentioned using the optimized loop.

@dave1707 - perfectionist. No wonder it takes so long to clear the snow off your drive! :))

@Ignatz I wouldn’t say I’m a perfectionist. It’s just that things should look as good as you can make them. Creating a new grid with the original size of dots or lines would look a lot better than a blurred larger image. But then it’s not my code, so I can only make suggestions and in the end what I say doesn’t really matter that much.

@dave1707 how does the optimised loop change the scale of the sprite when the sprite is set in the void setup? At the moment Ive set the sprite size at max and so any scaling changes will make it smaller thus no blurring occurs. It looks fine but a perfectionist will not like it

edit: I reread your post and realise what you meant. Originally I had a loop in void draw and it got a bit laggy with 10000+ ellipses, the setcontext sprite is working very well right now :slight_smile:

Thanks for all your help guys, now i just need to fix the equation i use so that the background grid is infinitely large no matter which direction i move

@archistudent Here’s the code with adjustable size. It doesn’t use a sprite.


function setup()
    parameter.integer("size",1,100,25)
end

function draw()
    background(40, 40, 50)
    fill(255, 255, 255)
    for i=1,30*size,size do
        for j =1,30*size,size do
            ellipse (i,j,4)
        end
    end
end

@archistudent Here’s the code that uses the sprite.


function setup()
    parameter.integer("size",5,55,25,resize)
end

function resize()
    grid=image(size*30,size*30)
    setContext(grid)
    fill(255,255,255)
    for i=1,size*30,size do
        for j=1,size*30,size do
            ellipse(i,j,4)
        end
    end
    setContext()
end

function draw()
    background(50)
    pushMatrix()
    sprite(grid,WIDTH/2,HEIGHT/2)
    sprite("Planet Cute:Character Princess Girl",300,300)
    popMatrix()
end