# Creating random shapes within the limits

**URL:** <https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438>\
**Category:** Coding Questions\
**Created:** [February 25, 2022, 7:14am UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438 "2022-02-25T07:14:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![callenk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/callenk/32/15805_2.png) [@callenk](https://discourse.processing.org/u/callenk)\
**Post date:** [February 25, 2022, 7:14am UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/1 "2022-02-25T07:14:42Z")

</div>

Hi, I am trying to draw some shapes to resemble a face, I have arrays that holds the certain x, y points for each part of a human face like eyes, jaw,nose etc.

What is the best way to go about this, using arc, vertex?

The idea is drawing sorta random shapes while staying in the defined points from these arrays to resemble a face. Here is one example in image format

> **[photo-2022-02-25-18-06-45](https://ibb.co/8md9fGW)**
>
> Image photo-2022-02-25-18-06-45 hosted in ImgBB

Here is the code sample which currently only draws a basic shape but should give you an idea.

> **[p5.js Web Editor](https://editor.p5js.org/userobject/sketches/hT8-0PpDU)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<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:** [February 25, 2022, 10:16am UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/2 "2022-02-25T10:16:05Z")

</div>

Hello, @callenk, and welcome to the Processing Foundation Forum!

With randomization, would you like to vary the positions of the facial features, the forms of the facial features, or a combination of both?

_EDIT (February 25, 2022):_

Since each type of facial feature has its own nuances, it might be best to write a separate function for drawing each one. This would enable you to use different strategies for introducing randomness, based on those nuances. Below is an example of a function for drawing the mouth. It obviously needs refinement.

```auto
function drawMouth(color) {
  let mouth = [
    {
      _x: 387.6577683742578,
      _y: 369.0331888192228,
    },
    {
      _x: 407.00089302625776,
      _y: 365.85590373064906,
    },
    {
      _x: 434.7384985549439,
      _y: 366.171463258642,
    },
    {
      _x: 449.27931827961254,
      _y: 369.2639073617315,
    },
    {
      _x: 464.0487483311093,
      _y: 368.01369229132035,
    },
    {
      _x: 495.8288616632999,
      _y: 374.3113342729382,
    },
    {
      _x: 521.1731921017742,
      _y: 381.34289533674905,
    },
    {
      _x: 490.3371981073987,
      _y: 398.9959073598651,
    },
    {
      _x: 466.94158625804715,
      _y: 405.7705438797759,
    },
    {
      _x: 443.9603429832458,
      _y: 406.68249762387074,
    },
    {
      _x: 424.86575622764354,
      _y: 402.63111022606483,
    },
    {
      _x: 405.62077095350855,
      _y: 392.2080545568318,
    },
    {
      _x: 390.69194115753766,
      _y: 370.0178396726528,
    },
    {
      _x: 428.2131300495174,
      _y: 373.0973695790913,
    },
    {
      _x: 448.9742443594697,
      _y: 375.4678421199305,
    },
    {
      _x: 469.8304490771126,
      _y: 377.6905037503284,
    },
    {
      _x: 516.0693200903028,
      _y: 380.80110325034724,
    },
    {
      _x: 467.582837756528,
      _y: 393.76089985426137,
    },
    {
      _x: 446.66764118933406,
      _y: 394.052458612104,
    },
    {
      _x: 427.4513557777959,
      _y: 391.0020196328584,
    },
  ];
  fill(color);
  beginShape();
  for (var d of mouth) {
    // randomize vertices
    vertex(d._x + randomGaussian() * 10, d._y + randomGaussian() * 4);
  }
  endShape(CLOSE);
} // end function drawMouth

```

![lips](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2b4b788491a10994da199fe688b354add04fc3de.png)

Note, here, that a different degree of variability is being used for the `x` and `y` coordinates of the vertices:

```auto
    vertex(d._x + randomGaussian() * 10, d._y + randomGaussian() * 4);

```

You could also use different functions to implement the randomness for the different features. See the following:

- [p5.js Reference: random()](https://p5js.org/reference/#/p5/random)
- [p5.js Reference: randomGaussian()](https://p5js.org/reference/#/p5/randomGaussian)
- [p5.js Reference: noise()](https://p5js.org/reference/#/p5/noise)

---

<div class="post-metadata">

**Author:** ![callenk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/callenk/32/15805_2.png) [@callenk](https://discourse.processing.org/u/callenk)\
**Post date:** [February 25, 2022, 4:03pm UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/3 "2022-02-25T16:03:47Z")

</div>

Thanks @javagar, randomgaussian is a good idea.

I also would like to use noise() function but unsure how to do it with these arrays, like drawing similar to this within each part/array.

[image](https://64.media.tumblr.com/5f39a361e459306d7e04e762f28c1a96/tumblr_p26jc4xSAl1uftd3vo1_640.gifv)

---

<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:** [February 25, 2022, 4:40pm UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/4 "2022-02-25T16:40:12Z")

</div>

> [@callenk](#):
>
> I also would like to use noise() function …

Here is an example:

```auto
function drift(x, y) {
  let mult = 50.0;
  let div = 100.0;
  let n = noise(x / div, y / div) * mult;
  n = n - mult / 2;
  print(n);
  return n;
}

function drawMouth(color) {
  let mouth = [
    {
      _x: 387.6577683742578,
      _y: 369.0331888192228,
    },
    {
      _x: 407.00089302625776,
      _y: 365.85590373064906,
    },
    {
      _x: 434.7384985549439,
      _y: 366.171463258642,
    },
    {
      _x: 449.27931827961254,
      _y: 369.2639073617315,
    },
    {
      _x: 464.0487483311093,
      _y: 368.01369229132035,
    },
    {
      _x: 495.8288616632999,
      _y: 374.3113342729382,
    },
    {
      _x: 521.1731921017742,
      _y: 381.34289533674905,
    },
    {
      _x: 490.3371981073987,
      _y: 398.9959073598651,
    },
    {
      _x: 466.94158625804715,
      _y: 405.7705438797759,
    },
    {
      _x: 443.9603429832458,
      _y: 406.68249762387074,
    },
    {
      _x: 424.86575622764354,
      _y: 402.63111022606483,
    },
    {
      _x: 405.62077095350855,
      _y: 392.2080545568318,
    },
    {
      _x: 390.69194115753766,
      _y: 370.0178396726528,
    },
    {
      _x: 428.2131300495174,
      _y: 373.0973695790913,
    },
    {
      _x: 448.9742443594697,
      _y: 375.4678421199305,
    },
    {
      _x: 469.8304490771126,
      _y: 377.6905037503284,
    },
    {
      _x: 516.0693200903028,
      _y: 380.80110325034724,
    },
    {
      _x: 467.582837756528,
      _y: 393.76089985426137,
    },
    {
      _x: 446.66764118933406,
      _y: 394.052458612104,
    },
    {
      _x: 427.4513557777959,
      _y: 391.0020196328584,
    },
  ];
  fill(color);
  beginShape();
  for (var d of mouth) {
    // randomize vertices
    vertex(d._x + drift(d._x, d._y), d._y + drift(d._x, d._y));
  }
  endShape(CLOSE);
} // end function drawMouth

```

---

<div class="post-metadata">

**Author:** ![callenk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/callenk/32/15805_2.png) [@callenk](https://discourse.processing.org/u/callenk)\
**Post date:** [February 27, 2022, 6:30am UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/5 "2022-02-27T06:30:33Z")

</div>

Thanks this one utilises the noise function but what I meant was making that look similar to the last image I shared. As in drawing circles within circles

---

<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:** [February 27, 2022, 11:54am UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/6 "2022-02-27T11:54:06Z")

</div>

> [@callenk](#):
>
> What is the best way to go about this, using arc, vertex?

> [@callenk](#):
>
> As in drawing circles within circles

In addition to using the functions listed [here](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/2) for providing randomization, it might be beneficial to experiment with the following, which are listed in the [p5.js Reference](https://p5js.org/reference):

- [`curveVertex()`](https://p5js.org/reference/#/p5/curveVertex)
- [`arc()`](https://p5js.org/reference/#/p5/arc)
- [`ellipse()`](https://p5js.org/reference/#/p5/ellipse)
- [`circle()`](https://p5js.org/reference/#/p5/circle)
- [`curve()`](https://p5js.org/reference/#/p5/curve)
- [`bezier()`](https://p5js.org/reference/#/p5/bezier)

Use randomizations to vary the locations of vertices, lengths of arcs, and other parameters. If you post code and images during the process of experimentation, we can provide suggestions.

---

<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:** [February 27, 2022, 1:00pm UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438/7 "2022-02-27T13:00:07Z")

</div>

One way to proceed with experimentation might be to open the image that you shared on a canvas, and collect `mouseX` and `mouseY` coordinates in the JavaScript console that can be used to approximate that image via the functions listed above.

Here’s some starter code that might help with collecting coordinates:

```auto
let img;
function preload() {
  // image from https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438?u=javagar
  img = loadImage("photo-2022-02-25-18-06-45.jpeg");
}
function setup() {
  createCanvas(img.width, img.height);
}

function draw() {
  image(img, 0, 0);
}
function mouseReleased() {
  print(mouseX, mouseY);
}

```

Press and release the mouse on the canvas to collect coordinates.

Screen capture:

 ![coordinates](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/26a73f16db26c138e52a058949d121fc520e7ed4.jpeg)

After writing p5.js code to approximate the image, add function calls to provide randomization.

_EDIT (February 27, 2022):_

> [@javagar](#):
>
> … open the image that you shared …

… or draw an image by hand on paper, photograph it, and write code to approximate that, as a next step.