# How to draw a black and white cookie?

**URL:** <https://discourse.processing.org/t/how-to-draw-a-black-and-white-cookie/8634>\
**Category:** Coding Questions\
**Created:** [February 22, 2019, 3:37pm UTC](https://discourse.processing.org/t/how-to-draw-a-black-and-white-cookie/8634 "2019-02-22T15:37:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sorenkirk](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@sorenkirk](https://discourse.processing.org/u/sorenkirk)\
**Post date:** [February 22, 2019, 3:37pm UTC](https://discourse.processing.org/t/how-to-draw-a-black-and-white-cookie/8634/1 "2019-02-22T15:37:53Z")

</div>

I am basically trying to draw something like this:

 ![](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5d0fce6c9f5a8e0bd28399adfbab855eb08358d0.png)

I can draw a half circle and a larger surrounding circle, but I am having trouble simulating the uneven-ness of one of the half circles and making the shape look bevelled.

```auto

void setup(){
size(500,500);
smooth(4);
}

void half_circles(float x, float y, float r, color c1, color c2){
  
  noStroke();
  fill(c1);
  // draw one half circle 
  arc(x,y, r, r, -HALF_PI, HALF_PI);
  
  // now do same thing for other half of circle
  pushMatrix();
  translate(x,y);
  rotate(PI);
  fill(c2);
  arc(0, 0, r, r, -HALF_PI,HALF_PI);
  popMatrix();
  }
  
void draw(){
  noLoop();
  // draw bigger circle
  fill(#DCC096);
  ellipse(width/2,height/2,220,220);
  // draw two half circles
  half_circles(width/2,height/2,200, 255,0);

  
}

```

---

<div class="post-metadata">

**Author:** ![janglee](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/janglee/32/4035_2.png) [@janglee](https://discourse.processing.org/u/janglee)\
**Post date:** [February 22, 2019, 6:26pm UTC](https://discourse.processing.org/t/how-to-draw-a-black-and-white-cookie/8634/2 "2019-02-22T18:26:14Z")

</div>

You can use `noise` function for randomness. take a look at [https://www.youtube.com/watch?v=8ZEMLCnn8v0](https://www.youtube.com/watch?v=8ZEMLCnn8v0)

---

<div class="post-metadata">

**Author:** ![sorenkirk](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@sorenkirk](https://discourse.processing.org/u/sorenkirk)\
**Post date:** [February 22, 2019, 6:37pm UTC](https://discourse.processing.org/t/how-to-draw-a-black-and-white-cookie/8634/3 "2019-02-22T18:37:55Z")

</div>

I know about the noise function but I am not even sure how to parametrize the shapes so that I can add noise. I am drawing two arcs – so the only opportunity for noise is with the width/height of each half-circle, but that wouldn’t be too helpful.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 23, 2019, 7:11pm UTC](https://discourse.processing.org/t/how-to-draw-a-black-and-white-cookie/8634/4 "2019-02-23T19:11:19Z")

</div>

You won’t be able to do this with arcs – unless you could somehow post-process their pixel output with a PShader. That seems unlikely.

Another approach is to draw the edges with PShapes using curveVertex or bezierVertex and then add randomness / drift to them to create a stroke.

The example is very “hand drawn” – the variable pressure line thickness, the brush orientation.

Can you record stroke data (or pixel data) with your mouse and use that as an asset, or do you need this to be derived from simple geometry at run time?

Here is one very simple example of how to do mouse-controlled brush-based drawing in Processing – although I suspect you want your output to be vector based rather than pixel based.

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/18816/lines-and-strokes)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 23, 2019, 7:14pm UTC](https://discourse.processing.org/t/how-to-draw-a-black-and-white-cookie/8634/5 "2019-02-23T19:14:54Z")

</div>

> [@sorenkirk](#):
>
> making the shape look bevelled.

You want a radial gradient for that.

> **[Radial Gradient / Examples](https://processing.org/examples/radialgradient.html)**
>
> Draws a series of concentric circles to create a gradient from one color to another.

Then you want to mask it, e.g. with your frosting outline.

- [How to copy a triangle out of an image - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/18819/how-to-copy-a-triangle-out-of-an-image)
- [Masking a shape with another shape - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/23886/masking-a-shape-with-another-shape)