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!
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?
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:
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 
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.
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.
Can you show us the code you have so far?
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!
You need to check to the reference and become familiar with the following 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
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”
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?
As I add more ellipses, i.e. more to my code, it appears that the frame count is becoming slower? Any ideas?
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?
Hi @tomvons can u post the tutorial link? please
also, looks like you exported the images using the ‘jpg’ format, so there will be some compression. have you tried adjusting your sketch window?
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…
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.
Can you post your code please? Drawing 2 or 3 more ellipses per frame should not have an impact on the framerate 
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
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.
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…