Creating ellipses with different colours and sizes

tomvons · August 22, 2018, 4:59am

Hey there, I’m trying to create something similar to this video: 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!

tony · August 22, 2018, 5:30am

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() function works?

jb4x · August 22, 2018, 6:21am

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

You can read more on the subject here:

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:

Draw an ellipse where you want, the size you want
Change the color of that ellipse
Move it over time (no matter how)
Change the size over time (no matter how)
Change the color over time (no matter how)
Now control how the ellipse changes over time (position, size and color)
How to draw multiple of them (which data structure adopt for the project)
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

TheWizardBear · August 22, 2018, 8:23am

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.

tomvons · August 23, 2018, 12:24pm

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.

jb4x · August 23, 2018, 12:59pm

Can you show us the code you have so far?

tomvons · August 25, 2018, 1:12am

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!

kfrajer · August 25, 2018, 3:46am

You need to check to the reference and become familiar with the following entries:

draw()
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

kll · August 25, 2018, 11:56am

i think the question is about REDRAWING

so when you try

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”

tomvons · August 27, 2018, 2:17am

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?

tomvons · August 27, 2018, 3:19am

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

tomvons · August 27, 2018, 4:05am

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?

dan850 · August 27, 2018, 4:17am

Hi @tomvons can u post the tutorial link? please

dan850 · August 27, 2018, 4:21am

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

tomvons · August 27, 2018, 4:33am

I’ve also just tried following some of the PDF codes from here: 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…

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…

dan850 · August 27, 2018, 5:33am

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?

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.

jb4x · August 27, 2018, 5:36am

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

tomvons · August 27, 2018, 5:58am

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…

However, it becomes very laggy

jb4x · August 27, 2018, 6:01am

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:

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:

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.

tomvons · August 27, 2018, 6:16am

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…

Topic		Replies	Views
Changing shape colors in loops Beginners	4	5070	September 24, 2019
I want to know how this is expressed. 02 Project Guidance	3	1231	November 12, 2018
Growing and shrinking ellipse Coding Questions homework	6	1352	May 15, 2020
I really need a help (circle getting smaller) Coding Questions homework	5	602	March 18, 2021
I want to know how this is expressed. 01 Project Guidance	3	1077	November 12, 2018

Creating ellipses with different colours and sizes

Related Topics