# Creating ellipses with different colours and sizes

**URL:** <https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834>\
**Category:** Beginners\
**Created:** [August 22, 2018, 4:59am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834 "2018-08-22T04:59:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 22, 2018, 4:59am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/1 "2018-08-22T04:59:56Z")

</div>

Hey there, I’m trying to create something similar to this video: [https://www.youtube.com/watch?v=Yy5EcsV1jvk](https://www.youtube.com/watch?v=Yy5EcsV1jvk), but much simpler. All I want to do is have my ellipses change colour and size over and over. How do you do this?

Thanks for any help in advance!

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 22, 2018, 5:30am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/2 "2018-08-22T05:30:45Z")

</div>

First of all, those are some pretty neat visuals; I can see why you’re inspired.

Second of all, can I ask you to brake down the problem into smaller parts? When doing any type of problem solving, something that always helps me is to take a step back and ask myself “What _can_ I do, and what _can’t_ I?”

How about exploring how the [ellipse()](https://processing.org/reference/ellipse_.html) function works?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 22, 2018, 6:21am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/3 "2018-08-22T06:21:42Z")

</div>

It is really difficult to ask general “how do I do this?” question.

You can read more on the subject here:

> [@Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-tips-on-asking-questions/2147):
>
> Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code to …

Now to get back at your project, I would advise, as @tony said, to divide your project in different objectives, master them and at the end put everything together. It could be something like this in your case:

1. Draw an ellipse where you want, the size you want
2. Change the color of that ellipse
3. Move it over time (no matter how)
4. Change the size over time (no matter how)
5. Change the color over time (no matter how)
6. Now control how the ellipse changes over time (position, size and color)
7. How to draw multiple of them (which data structure adopt for the project)
8. Enjoy

Now if when trying to break it down you run into problems, come back and post your code here. Explain what you want to achieve and what exactly is the problem that you encounter. We’ll all be happy to help 🙂

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [August 22, 2018, 8:23am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/4 "2018-08-22T08:23:15Z")

</div>

Try having one ellipse drawn each frame at the center of the screen.  
Vary the color and size randomly each time but draw them at the same place.

One detail worth noting is that the ellipses aren’t filled in (which can be achieved with noFill()) and that they have quite thick borders, which can be adjusted using the stroke() function.

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 23, 2018, 12:24pm UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/5 "2018-08-23T12:24:07Z")

</div>

hey! Thanks for replying. I’ve been trying to do this, but don’t actually know how to keep having it drawn at the same spot each frame?! I’m VERY new to Processing.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 23, 2018, 12:59pm UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/6 "2018-08-23T12:59:20Z")

</div>

Can you show us the code you have so far?

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 25, 2018, 1:12am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/7 "2018-08-25T01:12:17Z")

</div>

void setup (){  
size(700, 700);  
background(255, 255, 255, 255);

}

void draw (){  
noStroke();  
fill(178, 235, 22);  
background(255,255,255);  
ellipse(350, 350, frameCount, frameCount);  
fill(0, 88, 255);  
ellipse(350, 350, 250, 250);  
fill(239, 65, 54);  
ellipse(350, 350, 150, 150);  
fill(239, 65, 54);  
ellipse(350, 350, 50, 50);  
fill(178, 235, 22);  
ellipse(350, 350, 200, 200);  
fill(239, 65, 54);  
ellipse(350, 350, 20, 20);

}

^So, I’ve been following a tutorial on Skillshare that has the very basics. Another student watching that tutorial did something similar by having no stroke, and randomly changing the diameters and colours of the ellipses every frame count (up until a certain size). This is just what I’m not too sure about doing!

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 25, 2018, 3:46am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/8 "2018-08-25T03:46:01Z")

</div>

You need to check to the [reference](https://processing.org/reference/) and become familiar with the following entries:

- [draw()](https://processing.org/reference/draw_.html)
- setup()
- color
- color()
- size()
- Both width and height entries

You can find also lots of inspirations exploring the examples either available in the Processing Development Environment (PDE) or in the Processing site.

To change color, you need to know that the default color mode is rgb: red, green and blue. To generate any color, you need to use the rgb codes together. For instance: `color(255,0,0)` gives you red as green and blue are 0. You need to know that by default, the color range goes from 0 to 255 (although that can be change).

If you try something like this: `fill(random()*255,0,0)` and then you draw an ellipse, the ellipse will be filled with different shades of red as the `random()` function returns a number from 0 to 1, so `random()*255` will return a value from 0 to 255. This value is updated every time the `draw()` function is executed, at a rate of 60 fps.

Kf

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 25, 2018, 11:56am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/9 "2018-08-25T11:56:34Z")

</div>

i think the question is about REDRAWING

so when you try

```auto
float radius = 200.0;

void setup () {
  size(500, 500);
  background(100, 100, 255);
}

void draw () {
  noStroke();
  //background(100, 100, 255);
  fill(255, int(random(255.0)), 0);
  radius = random(200.0);
  ellipse(width/2, height/2, radius, radius);
  delay(100);
}

```

it might be close to what you want,  
but now you try to enable line 10 again ( by removing the // )  
and you see that the background(); in the draw loop  
erases “history”

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 27, 2018, 2:17am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/11 "2018-08-27T02:17:42Z")

</div>

Also, I’ve learnt how to take ‘screenshots’ of my piece, but is there an easy way to create a ‘gif’ style visual from it?

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 27, 2018, 3:19am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/12 "2018-08-27T03:19:04Z")

</div>

As I add more ellipses, i.e. more to my code, it appears that the frame count is becoming slower? Any ideas?

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 27, 2018, 4:05am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/13 "2018-08-27T04:05:02Z")

</div>

![0007](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/40ef4e7b4ae832af47898a5abf290bfa98505945.jpeg)

So I tried exporting my images using a way I followed in a tutorial, and the result is… blurry and the colours aren’t as bright?! Any ideas?

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [August 27, 2018, 4:17am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/14 "2018-08-27T04:17:45Z")

</div>

Hi @tomvons can u post the tutorial link? please

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [August 27, 2018, 4:21am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/15 "2018-08-27T04:21:50Z")

</div>

also, looks like you exported the images using the ‘jpg’ format, so there will be some compression. have you tried adjusting your sketch window?

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 27, 2018, 4:33am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/16 "2018-08-27T04:33:09Z")

</div>

I’ve also just tried following some of the PDF codes from here: [https://processing.org/reference/libraries/pdf/index.html](https://processing.org/reference/libraries/pdf/index.html)

But… for some reason it must be saving the PDF in CMYK, not RGB?

So this is how it looks when saved as a PDF…

 ![03%20pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7fa5da48085aebdb6c6ad427879ceddca316536c.jpeg)

However, it is much brighter in the window? not sure if my Mac is at fault for this.

As of yet haven’t tried adjusting the window… would this help?

Also, unfortunately the tutorial is a paid subscription so you’d be unable to follow it…

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [August 27, 2018, 5:33am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/17 "2018-08-27T05:33:17Z")

</div>

Interesting, As far as i know, Processing does not support CMYK color profile yet. Have you tried adjusting your ‘fill’ parameters? For example i’m using @kll example. What about other examples that came with the processing software? Are you seeing the same problem?

```auto
float radius = 200.0;

import processing.pdf.*;

void setup () {
  size(500, 500);
  //noLoop();
    beginRecord(PDF, "filename.pdf"); 

  background( 255);

}

void draw () {
  noStroke();

  //background(100, 100, 255);
  fill(int(random(25,255)), 0, int(random(0,255)));
  radius = random(200.0);
  ellipse(width/2, height/2, radius, radius);
  delay(100);
  
}

void keyPressed() {
  if (key == 'q') {
    endRecord();
    exit();
  }
}

```

and my pdf is exported the same way as my sketch. It could be an issue with your display. if you want, you can post your code just to be sure.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 27, 2018, 5:36am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/18 "2018-08-27T05:36:11Z")

</div>

> [@tomvons](#):
>
> As I add more ellipses, i.e. more to my code, it appears that the frame count is becoming slower? Any ideas?

Can you post your code please? Drawing 2 or 3 more ellipses per frame should not have an impact on the framerate 🤔

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 27, 2018, 5:58am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/19 "2018-08-27T05:58:02Z")

</div>

```auto
float radius = 500.0;

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

void draw () {
  noStroke();
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(250, height/2, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(250, height/2, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(250, height/2, radius, radius);
  delay(50);
  noStroke();
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(500, height/2, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(500, height/2, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(500, height/2, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(750, 500, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(750, 500, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(750, 500, radius, radius);
  delay(50);
  
  
  
  noStroke();
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(500, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(500, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(500, 250, radius, radius);
  delay(50);
  noStroke();
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(500, 500, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(500, 500, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(500, 500, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(500, 750, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(500, 750, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(500, 750, radius, radius);
  delay(50);
  
  
  noStroke();
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(250, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(250, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(250, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(250, 750, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(250, 750, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(250, 750, radius, radius);
  delay(50);
  
  
  noStroke();
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(750, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(750, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(750, 250, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(239, int(65.0), 54);
  radius = random(200.0);
  ellipse(750, 750, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(178, int(235.0), 22);
  radius = random(200.0);
  ellipse(750, 750, radius, radius);
  delay(50);
  //background(255, 255, 255);
  fill(0, int(88), 255);
  radius = random(200.0);
  ellipse(750, 750, radius, radius);
  delay(50);
  
}

  

```

This code creates 6x6 ellipses…

 ![23%20pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a11e238bfa908410c8339eb18e689317588a6008.png)

However, it becomes very laggy

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 27, 2018, 6:01am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/20 "2018-08-27T06:01:43Z")

</div>

It is laggy because you are using the `delay()` function 30 times in your `draw()` loop it means that you can’t draw a frame faster than 30\*50 = 1500ms (1.5 second)…

You don’t need that and you should never use the `delay()` function inside the `draw()` loop.

Edit:  
I think I get what you try to do but the `delay()` function does not work as you want them to work…  
The image won’t be drawn onto the screen until the end of the `draw()` loop.  
It means that this peace of code:

```auto
int x = 0;

void setup() {}

void draw() {
  background(20);
  fill(200);

  ellipse(x, 50, 20, 20);
  delay(500);

  ellipse(x, 100, 20, 20);
  delay(500);

  x = x + 1;
}

```

is doing exactly the same thing as this one:

```auto
int x = 0;

void setup() {}

void draw() {
  background(20);
  fill(200);

  ellipse(x, 50, 20, 20);
  ellipse(x, 100, 20, 20);

  delay(1000);

  x = x + 1;
}

```

Notice the 2 `delay(500)` in the first one and the 1 `delay(1000)` in the second one.

If you want to draw your ellipses one by one, you’ll need to figure out another, more complex, way.

---

<div class="post-metadata">

**Author:** ![tomvons](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@tomvons](https://discourse.processing.org/u/tomvons)\
**Post date:** [August 27, 2018, 6:16am UTC](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834/21 "2018-08-27T06:16:44Z")

</div>

Ok great! I worked it out! You were right, no need to write delay so many times. Thanks!

I’m still unsure as to why when I export as PDF the colours change however…

[Next page](https://discourse.processing.org/t/creating-ellipses-with-different-colours-and-sizes/2834.md?page=2)