# Bristled Onions

**URL:** <https://discourse.processing.org/t/bristled-onions/38433>\
**Category:** Gallery\
**Created:** [August 20, 2022, 8:41pm UTC](https://discourse.processing.org/t/bristled-onions/38433 "2022-08-20T20:41:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 20, 2022, 8:41pm UTC](https://discourse.processing.org/t/bristled-onions/38433/1 "2022-08-20T20:41:06Z")

</div>

![bristled_onions](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/0/30b1b51a28610eac4b22806c81fed9e3f542fc4d.png)

Original image from:

> **[Onion](https://en.wikipedia.org/wiki/Onion)**
>
> The onion (Allium cepa L., from Latin cepa meaning "onion"), also known as the bulb onion or common onion, is a vegetable that is the most widely cultivated species of the genus Allium. The shallot is a botanical variety of the onion which was classified as a separate species until 2010.: 21  Its close relatives include garlic, scallion, leek, and chive.
> This genus also contains several other species variously referred to as onions and cultivated for food, such as the Japanese bunching onion (...

p5.js code:

```auto
// 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();
    }
  };
  
});

```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 21, 2022, 6:07am UTC](https://discourse.processing.org/t/bristled-onions/38433/2 "2022-08-21T06:07:46Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/1/d1d41126c4ef32a9cb89a92057523cd8970702f0.png)

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:

```auto
// 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();
    }
  };
  
});

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 21, 2022, 12:49pm UTC](https://discourse.processing.org/t/bristled-onions/38433/3 "2022-08-21T12:49:04Z")

</div>

> [@javagar](#):
>
> `img = p.loadImage("440px-Mixed_onions.jpeg");`

BtW, [Wikimedia.org](http://Wikimedia.org) has CORS enabled; thus we can load remote media links straight from it: 🔗

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

> **[CORS - MDN Web Docs Glossary: Definitions of Web-related terms | MDN](https://developer.mozilla.org/en-US/docs/Glossary/CORS)**
>
> CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 21, 2022, 3:23pm UTC](https://discourse.processing.org/t/bristled-onions/38433/4 "2022-08-21T15:23:59Z")

</div>

> [@GoToLoop](#):
>
> [Wikimedia.org](http://Wikimedia.org) has CORS enabled; thus we can load remote media links straight from it: …

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

```auto
  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");
  };

```