# Deformed circles

**URL:** <https://discourse.processing.org/t/deformed-circles/43703>\
**Category:** Coding Questions\
**Created:** [January 17, 2024, 1:00am UTC](https://discourse.processing.org/t/deformed-circles/43703 "2024-01-17T01:00:05Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 17, 2024, 1:00am UTC](https://discourse.processing.org/t/deformed-circles/43703/1 "2024-01-17T01:00:05Z")

</div>

Hi there! I am trying to draw something as this made by hand circles with processing. I know this two ways, but deforming an ellipse is still too geometric and rounded corners of a rect is not bad but not as spontaneous as the doodle that I am sending. So is there another way to deform a circle to make it really natural?

 ![IMG_20240116_205306](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/b/3b8a8574499fddd3ead36ffdd664ea617ca56bf4.jpeg)

```auto
size(400, 400);
rect(120, 80, 220, 220, 200, 360, 300, 240);
ellipse(100,100,80,100);

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 17, 2024, 2:16am UTC](https://discourse.processing.org/t/deformed-circles/43703/2 "2024-01-17T02:16:46Z")

</div>

Add together a few sine waves with random phase shifts.

Hit `Enter` to cycle through some random ones.

```auto
void setup() {
  size( 900, 900 );
  noLoop();
}

float sn( float x ) { return sin( TAU*x ); }
float cs( float x ) { return cos( TAU*x ); }

void draw() {
  translate( width/2, height/2 );
  scale( height/4. );
  strokeWeight( 0.05 );
  stroke(255);
  noFill();
  background( 0 );
  float r1 = random(1), r2 = random(1), r3 = random(1);
  beginShape();
  int N = 200;
  for( int i=0; i<=N; i++ ) {
    float u = 1.*i/N;
    float r = 1 + 0.1*(sn( 2*u+r1 )/2 + sn( 3*u+r2 )/3 + sn( 5*u+r3 )/5);
    vertex( r*cs(u), r*sn(u) );
  }
  endShape();
}

void keyPressed() { redraw(); }

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 17, 2024, 2:28am UTC](https://discourse.processing.org/t/deformed-circles/43703/3 "2024-01-17T02:28:54Z")

</div>

Or use a noise function to vary the radius:

```auto
void setup() {
  size( 900, 900 );
  noLoop();
}

float sn( float x ) { return sin( TAU*x ); }
float cs( float x ) { return cos( TAU*x ); }

void drawNoiseWobble() {
  float r1 = random(1), r2 = random(1), r3 = random(1);
  beginShape();
  int N = 360;
  for( int i=0; i<=N*1.05; i++ ) {
    float u = 1.*i/N+r3;
    float r = 1 + 0.5*(noise( 17*r1, 4*u+20*r2 )-0.5);
    vertex( r*cs(u), r*sn(u) );
  }
  endShape();
}

void draw() {
  translate( width/2, height/2 );
  scale( height/4. );
  strokeWeight( 0.05 );
  stroke(255);
  noFill();
  background( 0 );
  drawNoiseWobble();
}

void keyPressed() { redraw(); }

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 17, 2024, 4:57pm UTC](https://discourse.processing.org/t/deformed-circles/43703/4 "2024-01-17T16:57:55Z")

</div>

Thank you so much for your help @scudly . I have found this tutorial on [youtube,](https://www.youtube.com/watch?v=ZI1dmHv3MeM&t=787s) but when I try to run it I found this

> OutOfMemoryError: You may need to increase the memory setting in Preferences.

So what can I do?

```auto
float noiseMax = 0.5;

void setup() {
  size(600,600);
}

void draw() {
  background(255,255,255);
  translate(width/2, height/2);
  stroke(0,0,0);
  noFill();
  beginShape();
   for (int a=0; a<TWO_PI; a+=0.1){
     float xoff=map(cos(a),-1,1,0,noiseMax);
     float yoff=map(sin(a),-1,1,0,noiseMax);
     float r= map(noise(xoff,yoff),0,1,100,200);
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
  noLoop();
}

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 17, 2024, 5:15pm UTC](https://discourse.processing.org/t/deformed-circles/43703/5 "2024-01-17T17:15:34Z")

</div>

In your `for` loop, `int a` should be `float a`.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 17, 2024, 9:01pm UTC](https://discourse.processing.org/t/deformed-circles/43703/6 "2024-01-17T21:01:19Z")

</div>

Now I would like to draw a loop of concentric circles, so I have created a function with the organic shape. But I don’t even know if it is working because I don’t see it anymore. Could you please help me?

```auto
float noiseMax = 0.7;

void setup() {
  size(1000,1000);
}

void drawCircle(float i, float j){
  translate(width/2, height/2);
  stroke(0,0,0);
  noFill();
  beginShape();
   for (float a=0; a<TWO_PI; a+=0.1){
     float xoff=map(cos(a),-1,1,0,noiseMax);
     float yoff=map(sin(a),-1,1,0,noiseMax);
     float r= map(noise(xoff,yoff),0,1,i,j);
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
  //noLoop();
}
  

void draw() {
  background(255,255,255);
  for (float i=0; i<100; i+=5){
    for (float j=0; j<100; j+=5){
  drawCircle(i,j);
  }
  }
  }

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 17, 2024, 9:57pm UTC](https://discourse.processing.org/t/deformed-circles/43703/7 "2024-01-17T21:57:08Z")

</div>

Try this one. You can tweak `noiseScale` to make it more or less jagged.

```auto
float noiseScale = 0.005;

void setup() {
  size(1000,1000);
  noLoop();
}

void drawCircle( float innerR, float outerR ){
  stroke(0,0,0);
  noFill();
  beginShape();
   for( float i=0; i<360; i++ ) {
     float a = TAU*i/360;
     float xoff = 2000 + innerR * noiseScale * cos(a);
     float yoff = 2000 + innerR * noiseScale * sin(a);
     float r = innerR + (outerR-innerR) * noise( xoff, yoff );
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
}
  
void draw() {
  translate(width/2, height/2);
  background(255,255,255);
  for (float i=0; i<500; i+=20){
      drawCircle(i,i+100);
  }

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 17, 2024, 11:35pm UTC](https://discourse.processing.org/t/deformed-circles/43703/8 "2024-01-17T23:35:41Z")

</div>

Oh! That is amazing! 🤩 Thank you so much! They are concentric but now I have this problem

 ![mdl](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/7/a75cc21ae7c0f4efe0b853938f54e672815d5011.jpeg)

Noise is making these circles like circles made by humans, but it is also making every circle similar to closer one. And I was actually looking for independent concentric circles, as if they would be drawn by hand, like in this doodle:

 ![1705534213750](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/8/98525081d20f1d23f9733d84510fcd40793390c0.jpeg)  
So how could I use noise in every shape but not in the loop?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 18, 2024, 3:45am UTC](https://discourse.processing.org/t/deformed-circles/43703/9 "2024-01-18T03:45:14Z")

</div>

Each circle is tracing out a circular path through the noise. If you don’t want the circles correlated, pick a random point to circle around. noise() is symmetric about the origin so to avoid that, I move everything over by 2000 in addition to adding a random amount.

```auto
float noiseScale = 0.005;

void setup() {
  size(1000,1000);
  noLoop();
}

void drawCircle( float innerR, float outerR ){
  stroke(0,0,0);
  noFill();
  float rx = random(2000), ry = random(2000);
  beginShape();
   for( float i=0; i<360; i++ ) {
     float a = TAU*i/360;
     float xoff = 2000 + rx + innerR * noiseScale * cos(a);
     float yoff = 2000 + ry + innerR * noiseScale * sin(a);
     float r = innerR + (outerR-innerR) * noise( xoff, yoff );
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
}
  
void draw() {
  translate(width/2, height/2);
  background(255,255,255);
  for (float i=0; i<500; i+=5){
      drawCircle(i,i+100);
  }
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 19, 2024, 2:24pm UTC](https://discourse.processing.org/t/deformed-circles/43703/10 "2024-01-19T14:24:12Z")

</div>

Now I am trying to give the loop three colors but they are only working two of them, do you know why?

```auto
float noiseScale = 0.002;

void setup() {
  size(1000,1000);
  noLoop();
}

void drawCircle( float innerR, float outerR ){
  
  noFill();
  float rx = random(2000), ry = random(2000);
  beginShape();
   for( float i=0; i<360; i++ ) {
     float a = TAU*i/360;
     float xoff = 2000 + rx + innerR * noiseScale * cos(a);
     float yoff = 2000 + ry + innerR * noiseScale * sin(a);
     float r = innerR + (outerR-innerR) * noise( xoff, yoff );
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
}
  
void draw() {
  translate(width/2, height/2);
  background(255,255,255);
  for (float i=0; i<500; i+=3){
    if((i>500) && (random(1)>0.3)) {
  stroke(255,0,0); 
}
else if((i>200) && (random(1)>0.2)){
 stroke(0,0,255); 
}
else if((i>0) && (random(1)>0.1)){
 stroke(0,255,0); 
}
   drawCircle(i,i+100);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 19, 2024, 2:28pm UTC](https://discourse.processing.org/t/deformed-circles/43703/11 "2024-01-19T14:28:23Z")

</div>

> [@humano](#):
>
> ` if((i>500) &&`

since i goes only up to 500 the condition is never met

try `i>400`

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 19, 2024, 3:05pm UTC](https://discourse.processing.org/t/deformed-circles/43703/12 "2024-01-19T15:05:33Z")

</div>

Or this one randomizes the colors with more red in the middle and more blue to the outside:

```auto
float noiseScale = 0.002;

void setup() {
  size(1000,1000);
  noLoop();
}

void drawCircle( float innerR, float outerR ){
  noFill();
  float rx = random(2000), ry = random(2000);
  beginShape();
   for( float i=0; i<360; i++ ) {
     float a = TAU*i/360;
     float xoff = 2000 + rx + innerR * noiseScale * cos(a);
     float yoff = 2000 + ry + innerR * noiseScale * sin(a);
     float r = innerR + (outerR-innerR) * noise( xoff, yoff );
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
}
  
void draw() {
  translate(width/2, height/2);
  background(255,255,255);
  for (float i=0; i<500; i+=3) {
    float u = 1.*i/500;
    stroke( 0, 255, 0 );
    if( random(1) > u ) { stroke(255,0,0); }
    else if( random(1) < u*u ) { stroke(0,0,255); }
    drawCircle(i,i+100);
  }
}

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 19, 2024, 3:14pm UTC](https://discourse.processing.org/t/deformed-circles/43703/13 "2024-01-19T15:14:58Z")

</div>

Or if you want strictly 3 regions, I would write it like this:

```auto
void draw() {
  translate(width/2, height/2);
  background(255,255,255);
  int nCircles = 500;
  for (float i=0; i<nCircles; i+=3) {
    float u = 1.*i/nCircles;
    if( u < 0.3333 ) { stroke( 255, 0, 0 ); }
    else if( u < 0.6666 ) { stroke( 0, 255, 0 ); }
    else stroke( 0, 0, 255 );
    drawCircle(i,i+100);
  }
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 19, 2024, 4:39pm UTC](https://discourse.processing.org/t/deformed-circles/43703/14 "2024-01-19T16:39:53Z")

</div>

thank you so much, @scudly ,this is amazing!

I am trying some different options about color. I have thought about a gradient. So I have typed this sketch to make it simpler, trying to create a gradient in a loop. But it only works when I use the same variable in color that I have used to multiply lines , It does not work if I try to use another variable with other values.

```auto
size(500,500);
strokeWeight(5);
colorMode(HSB,360,100,100);
for (int i =0; i <500; i+=20){
 //for(int j=100; i<300; i+=1){
  stroke(i);
  line(i,0,i,500);
}
//}

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 19, 2024, 6:10pm UTC](https://discourse.processing.org/t/deformed-circles/43703/15 "2024-01-19T18:10:42Z")

</div>

```auto
size(500,500);
strokeWeight(5);
colorMode(HSB,1, 1, 1);
for (int i =0; i <500; i+=5){
  float u = 1.*i/500;
  stroke(u, 0.7, 1);
  line(i,0,i,500);
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 23, 2024, 3:37pm UTC](https://discourse.processing.org/t/deformed-circles/43703/16 "2024-01-23T15:37:05Z")

</div>

well, thank you so much again, @scudly , your code produces amazing results : D

I have typed a line to see different designs pressing enter and I have discovered that all of them work really good as a stop motion, if you see one every second or half a second. How could I make and export an infinite loop with, for example, 10 designs restarting again and again?

```auto
float noiseScale = 0.002;

void setup() {
  size(1000,1000);
  noLoop();
}

void drawCircle( float innerR, float outerR ){
  noFill();
  float rx = random(2000), ry = random(2000);
  beginShape();
   for( float i=0; i<360; i++ ) {
     float a = TAU*i/360;
     float xoff = 2000 + rx + innerR * noiseScale * cos(a);
     float yoff = 2000 + ry + innerR * noiseScale * sin(a);
     float r = innerR + (outerR-innerR) * noise( xoff, yoff );
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
}
  
void draw() {
  color a = color(204,255,255);
  color b = color(204,153,255);
  color c = color(255,0,102);
  translate(width/2, height/2);
  background(255,255,255);
  for (float i=-40; i<400; i+=1) {
    float u = 1.*i/450;
    //middle
    stroke(b);
    //inside
    if( random(1) > u ) { stroke(a); }
    //outside
    else if( random(1) < u*u ) { stroke(c); }
    drawCircle(i,i+100);
    
  }
}

void keyPressed() {
  if( keyCode == ENTER ) draw();
  else if( key == '+' ) saveFrame();
  redraw();
}

```

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 23, 2024, 3:52pm UTC](https://discourse.processing.org/t/deformed-circles/43703/17 "2024-01-23T15:52:42Z")

</div>

We are using both `random()` and `noise()` so to repeat, we need to set both `randomSeed()` and `noiseSeed()` to get a repeating set of values. Both of those take integers whereas `random()` gives us a float so I have to scale it up and cast to an `int`. `float`s only have 24 bits of precision, so to keep it uniform, I only sample from `2**24` values (the `1<<24` part). Each time through `draw()`, I initialize the random stream with the next random seed and then use its first value to initialize the noiseSeed value as well.

```auto
float noiseScale = 0.002;
int repeatCount = 10;
int baseSeed;

void setup() {
  size(1000,1000);
  noLoop();
  baseSeed = int(random(1<<24));
}

void drawCircle( float innerR, float outerR ){
  noFill();
  float rx = random(2000), ry = random(2000);
  beginShape();
   for( float i=0; i<360; i++ ) {
     float a = TAU*i/360;
     float xoff = 2000 + rx + innerR * noiseScale * cos(a);
     float yoff = 2000 + ry + innerR * noiseScale * sin(a);
     float r = innerR + (outerR-innerR) * noise( xoff, yoff );
     float x = r * cos(a);
     float y = r * sin(a);
     vertex(x,y);
   } 
  endShape(CLOSE);
}
  
void draw() {
  randomSeed( baseSeed + (frameCount % repeatCount) );
  noiseSeed( int(random(1<<24)) );
  color a = color(204,255,255);
  color b = color(204,153,255);
  color c = color(255,0,102);
  translate(width/2, height/2);
  background(255,255,255);
  for (float i=-40; i<400; i+=1) {
    float u = 1.*i/450;
    //middle
    stroke(b);
    //inside
    if( random(1) > u ) { stroke(a); }
    //outside
    else if( random(1) < u*u ) { stroke(c); }
    drawCircle(i,i+100);
    
  }
}

void keyPressed() {
  if( keyCode == ENTER ) draw();
  else if( key == '+' ) saveFrame();
  redraw();
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 24, 2024, 12:14am UTC](https://discourse.processing.org/t/deformed-circles/43703/18 "2024-01-24T00:14:19Z")

</div>

Thank you again! And one last question. Could I split the static image into 3 layers if I would want to print it with a pen plotter? Is it possible?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [January 24, 2024, 5:22am UTC](https://discourse.processing.org/t/deformed-circles/43703/19 "2024-01-24T05:22:22Z")

</div>

I haven’t tested this, but something like this should work:

```auto
void draw() {
  translate(width/2, height/2);
  for( int ipass=0; ipass<3; ipass++ ) {
    randomSeed( baseSeed + (frameCount % repeatCount) );
    noiseSeed( int(random(1<<24)) );
    color a = color(204,255,255);
    color b = color(204,153,255);
    color c = color(255,0,102);
    background(255,255,255);
    for (float i=-40; i<400; i+=1) {
      float u = 1.*i/450;
      //middle
      stroke(b);
      int icolor=0;
      //inside
      if( random(1) > u ) { stroke(a); icolor=1; }
      //outside
      else if( random(1) < u*u ) { stroke(c); icolor=2; }
      if( icolor == ipass )
        drawCircle(i,i+100);
    }
    save("image-"+(frameCount%repeatCount)+"-"+ipass+".png");
  }
}

```

For a plotter, I imagine you’d want SVG and I don’t know how to deal with those.