Accidental fractal pattern using line(), and wonky line() behavior

p5.js Coding Questions
1

So playing around with vectors for the first time I created a circle by drawing a line and rotating it:

let count = 0
let slice = 6
let oddSize = 0.0625

function unitVectorGrade() {
  translate(width / 2, height / 2)
  angleMode(DEGREES)
  stroke('purple')
  strokeWeight(oddSize + 0.0001) //0.0625
  let v = createVector(0, width / 2);
  angleMode(DEGREES)
  rotate(count)
  if (count < 360) {
    line(0, 0, v.x, v.y)
    count += 1 / slice
  }
}

As you can see this generates a very interesting fractal pattern which seems to be rotationally symmetrical and I bet contains very neat mathematical properties. You can play with slice to make the pattern more detailed in a way.

In addition, changing the parameter in strokeWeight() results in some very interesting line() behavior, when setting the stroke weight to oddSize the lines go all wonky and don’t generate evenly, setting the weight to anything smaller then oddSize doesn’t render the lines at all, and you can add further decimal places to oddSize to see further weird behavior.

This got me curious as to why these happen, thus, I have some questions that I’m hoping some p5.js pro could answer:

  1. how does the program execute when line() is declared, meaning what are the machine’s instructions for line()? and why does oddSize behave the way it does? (would like to see some source code explanation for the way line() deals with strokeWeight()) asking this because this is probably why both of these phenomenon happen, the exact position in which the program decides to draw the pixels of the line is probably determined by some formula.

  2. could there be any other determining factor for the appearance of this visual oddity such as the screen’s graphics or something related to the physical screen?

  3. please add any discoveries / observations so we could discuss this interesting effect. thanks :slight_smile:

2

I’ve run into the same problem. With exact same program in Java Processing behaves as it should, but javascript can produce weird artifacts. Some of the artifact look like moire effect. To me that sounds more like a rounding issue. When line is drawn in an angle against coordinates smoothing creates pixels values between line colour and background along the line. Idea is to make line look smooth, without pixelation or jagged edges. Lines closely side by side can also create moire effect.
So problem can be in line drawing routines. But because processing Java doesn’t have this problem it could come from browser implementation of things. And it would explain why it hasn’t been fixed.

1 Like
3

That is exactly what i thought was happening. So question number 1 asks where could i find the instructions the program uses to create the lines, and to smooth them. Have a clue where i could do that?

4

Smoothing is on by default. noSmooth() turns it off.