Bristled Onions

bristled_onions

Original image from:

p5.js code:

// instance mode
new p5((p) => {
  let img;

  p.preload = () => {
    // mixed onions image from Wikipedia: Onion
    // https://en.m.wikipedia.org/wiki/Onion
    img = p.loadImage("440px-Mixed_onions.jpeg");
  };

  p.setup = () => {
    p.createCanvas(img.width, img.height);
    p.noLoop();
  };
  
  p.draw = () => {
    p.noFill();

    img.loadPixels();
    const numPixels = img.width * img.height;
    for (let i = 0; i < numPixels; i++) {
      let x = p.floor(i % img.width);
      let y = p.floor(i / img.width);

      p.stroke(
        p.color(
          img.pixels[i * 4],
          img.pixels[i * 4 + 1],
          img.pixels[i * 4 + 2],
          img.pixels[i * 4 + 3]
        )
      );

      p.push();
      p.translate(x, y);
      p.rotate(p.random(2 * p.TWO_PI));
      p.strokeWeight(p.random(1, 3));
      p.curve(
        0,
        0,
        p.randomGaussian() * 10,
        p.randomGaussian() * 10,
        (p.randomGaussian() + 1) * 10,
        (p.randomGaussian() + 1) * 10,
        p.randomGaussian() * 3,
        p.randomGaussian() * 3
      );
      p.pop();
    }
  };
  
});

6 Likes

Has anyone noticed that there is a spatial and directional bias regarding the visibility of the strokes in the sketch above? This is because the pixels are being sampled in order by row from top to bottom, and that within each row the pixels are sampled from left to right. Since the strokes are drawn intentionally from each pixel in a random orientation that partially obscures neighboring strokes, the ones at the bottom and at the right, to a lesser extent, are the most visible.

In the above, compare the bristled image to the original. Note that upward strokes tend to be more visible than downward ones. This is especially evident in the flattening of the bases of the onions at the bottom, since the pixels in the black background below them are sampled and stroked later than those of the onions.

While the partial obscuring of neighboring strokes is a feature, the spatial and directional bias is a bug. In the following image, that bias has been rectified via a shuffling of the order of the pixel sampling:

bristled_onions_03

Notice that the bases of the onions at the bottom are decidedly more rounded than those in the previous sketch.

Here’s the updated code:

// instance mode
new p5((p) => {
  let img;

  p.preload = () => {
    // mixed onions image from Wikipedia: Onion
    // https://en.m.wikipedia.org/wiki/Onion
    img = p.loadImage("440px-Mixed_onions.jpeg");
  };

  p.setup = () => {
    p.createCanvas(img.width, img.height);
    p.noLoop();
  };
  
  p.draw = () => {
    p.noFill();
    
    img.loadPixels();
    const numPixels = img.width * img.height;
    
    // randomize order of pixel access
    let pix = Array(numPixels);
    for (let n = 0; n < pix.length; n++) {
      pix[n] = n;
    }
    p.shuffle(pix, true);
    
    for (let k = 0; k < numPixels; k++) {
      let i = pix[k];
      let x = p.floor(i % img.width);
      let y = p.floor(i / img.width);

      p.stroke(
        p.color(
          img.pixels[i * 4],
          img.pixels[i * 4 + 1],
          img.pixels[i * 4 + 2],
          img.pixels[i * 4 + 3]
        )
      );

      p.push();
      p.translate(x, y);
      p.rotate(p.random(2 * p.TWO_PI));
      p.strokeWeight(p.random(1, 3));
      p.curve(
        0,
        0,
        p.randomGaussian() * 10,
        p.randomGaussian() * 10,
        (p.randomGaussian() + 1) * 10,
        (p.randomGaussian() + 1) * 10,
        p.randomGaussian() * 3,
        p.randomGaussian() * 3
      );
      p.pop();
    }
  };
  
});
2 Likes

BtW, Wikimedia.org has CORS enabled; thus we can load remote media links straight from it: :link:

img = p.loadImage("https://upload.Wikimedia.org/wikipedia/commons/thumb/a/a2/Mixed_onions.jpg/480px-Mixed_onions.jpg");

2 Likes

Thanks. This replacement code has been tested, and the sketch works well with it:

  let img;

  p.preload = () => {
    // mixed onions image from Wikipedia: Onion
    // link to article: https://en.m.wikipedia.org/wiki/Onion
    img = p.loadImage("https://upload.Wikimedia.org/wikipedia/commons/thumb/a/a2/Mixed_onions.jpg/480px-Mixed_onions.jpg");
  };
2 Likes