Graphics issue

General
1

@Simeon - maybe down to an issue I’ve raised before in which you need to have a strokeWidth() of greater than 1 - could be related to OpenGL coordinates. But the following code seems to show a couple of issues:

  1. A horizontal line at the bottom offsetting the rectangle is noStroke(1) default? Also a vertical line to the left. Difficult to see. Then again this could mean I need my eyes checked again.
  2. The upper rectangle is not drawn when I use HEIGHT-20.

Is this a simple error on my part?


function setup()
    --
    bgColor = color(66, 104, 36, 255)
    rectColor = color(224, 67, 74, 255)
end

function draw()
    --
    background(bgColor)
   -- strokeWidth(2)
  --  noStroke()
    fill(rectColor)
    rect(1,1,WIDTH,20)
    rect(1,HEIGHT,WIDTH,HEIGHT-20)
end
2

@Bri_G I believe the screen coordinates start at 0,0 so the one line would be rect(0,0,WIDTH,20). As for the line for the top, try rect(0,HEIGHT-20,WIDTH,20). Or am I not understanding what you’re trying to point out.

3

@dave1707 - yup, sorry - forgot that the last two parameters are size and not co-ordinates. Makes sense now. My problem is I am trying to convert a few demos from JavaScript to Codea Lua and keep mixing up the command sets.

4

@Bri_G Is this what you’re trying to point out. It looks like there’s a white outline around the red rect. To totally fill in the bottom rect, I have to do rect(-1,-1,WIDTH+2,20).

displayMode(FULLSCREEN)

function setup()
    bgColor = color(255)
    rectColor=color(255,0,0)
end

function draw()
    background(bgColor)
    fill(rectColor)
    rect(0,0,WIDTH,20)
    rect(0,HEIGHT-20,WIDTH,20)
end
5

@dave1707 - no that’s not it. Could be my eyesight but I saw a thin line down the left and along bottom of the screen. Think I’ll have to get my eyes checked. Thanks.

Too much screen time.

6

@Bri_G I used a 10x magnifying glass and I don’t see a line going up the left side of the image. But I do see a gap to the left and bottom of the rect at the bottom of the screen.

7

@Bri_G That’s because the actual window size goes from (0, 0) to (WIDTH+2, HEIGHT+2) for drawing. For some reason in Codea they are two pixels less than needed.

8

@Anatoly - that’s weird, how can HEIGHT be two pixels short. OpenGL starts from 0,0 - I thought Codea started from 1,1 but that could be confusion with switching between languages (looking at a few at the moment). Could this be due to strokeWidth() defaults?

9

@Bri_G Its not that HEIGHT is 2 pixels short, it’s the rect command that’s smaller. I think that a circle (ellipse) also doesn’t draw a circle the size you specify but a pixel smaller.

10

@Bri_G Heres an example showing the problem. The bottom circles are 100 pixels apart. They both have a diameter of 100 pixels so they should be touching, but they’re not. The top circles have a diameter of 100 and if you slide the dist slider to move the circles closer, they have to be 98 pixels apart before they’re touching each other. Not sure why they’re not the correct size, but I’m sure there’s a good reason.

displayMode(STANDARD)

function setup()
    parameter.integer("dist",90,110,110)    
end

function draw()
    background(255, 255, 255, 255)
    fill(255,0,0)
    ellipse(200,400,100)
    ellipse(300,400,100)    
    ellipse(200,600,100)
    ellipse(200+dist,600,100)
end
11

@dave1707 @Anatoly - thanks for the feedback. As you say I think this must have been part of the design, just have to get my head round it - difficult now as have wasted no end of time and really frustrated with Catalina on Mac. Best advert for a PC that I’ve seen in years!!! Now considering wiping my Mac and re-installing Mojave!!!

12

@dave1707 - modified your code a little to see what happens with stroke. Not affected - always used within graphic object ellipse in this case.


displayMode(STANDARD)

function setup()
    parameter.integer("dist",90,110,110)
    parameter.boolean("strokeOn",off)
    parameter.integer("strokeW",1,50,1)
end

function draw()
    background(255, 255, 255, 255)
    noStroke()
    fill(255,0,0)
    ellipse(200,600,100)
    ellipse(300,600,100)    
    ellipse(200,800,100)
    ellipse(200+dist,800,100)
    if strokeOn then
        stroke(23, 23, 28, 255)
        strokeWidth(strokeW)
        ellipse(200,200,100)
        ellipse(300,200,100)    
        ellipse(200,400,100)
        ellipse(200+dist,400,100)
    end
end