Fun with circles

A red circle with a white stroke:


function setup()    
    x = WIDTH/2
    y = HEIGHT/2
    iparameter("width", 5, 35, 20)
    iparameter("radius", 5, 80, 40)
    fill(255, 0, 0)
    lineCapMode(SQUARE)
end

function draw()
    background(0)
    strokeWidth(width)
    -- Draw a line for comparison
    stroke(192)
    line(x-radius, y-radius+width/2, x+radius, y-radius+width/2)
   -- Draw a circle
    stroke(255)
    ellipse(x, y, radius*2)
end

However, as the radius is reduced to equal the strokeWidth, what is suddenly rendered is a red circle with no stroke. (This explains why Test 7 in the Physics Lab example project does not need to set noStroke() when it renders its red circles.)

As the radius is reduced further to greater than half the strokeWidth, what is rendered is a white circle with a red edge.

As the radius is reduced further, what is rendered is a white circle (no red).

Also, if the strokeWidth is about 10 or less, the thickness of a line is about half the thickness of the stroke for a circle. (Which explains why, in the Physics Lab example project, the circumference of a circle is drawn with a strokeWidth half of that used to draw its radius.)

This can be compared (strokeWidth of about 10 or less) and contrasted (the other points) with the square below:


function setup()    
    x = WIDTH/2
    y = HEIGHT/2
    iparameter("width", 5, 35, 20)
    iparameter("radius", 5, 80, 40)
    fill(255, 0, 0)
    lineCapMode(SQUARE)
    rectMode(CENTER)
end

function draw()
    background(0)
    strokeWidth(width)
    -- Draw a line for comparison
    stroke(192)
    line(x-radius, y-radius-width/2, x+radius, y-radius-width/2)
   -- Draw a square
    stroke(255)
    rect(x, y, radius*2, radius*2)
end