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.
@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?
@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)
@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
@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.
@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.
@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.
@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
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
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