• @[email protected]
    link
    fedilink
    7
    edit-2
    2 months ago

    Drawing a circle is actually pretty simple! Say we want to draw one with:

    • radius r=5
    • center C=(0,0)
    • 1000 points

    The logic would be:

    for (let i = 0; i < 1000; i++) {
        // full circle is made up of 2 * PI angles -> calculate current loop angle
        const angle = (2 * Math.PI) * (i / 1000)
        const x = r * Math.cos(angle)
        const y = r * Math.sin(angle)
        drawPixel(x, y)
    }
    

    The circle starts being drawn at (5, 0). As y approaches -5, x gets smaller until it hits 0. Then x approaches -5 and y approaches 0, and so on.

    • @[email protected]
      link
      fedilink
      12 months ago

      That won’t work well ;-) it will draw 1000 pixels whatever the circumference!

      A good start though, for sure.

      • @[email protected]
        link
        fedilink
        12 months ago

        It’s just meant to be a simple example. If someone says other tutorials quickly go over their head, it’s not a good idea to introduce unnecessary concepts to start with.