Develop Reference

Animation not working Java Graphics

Completing a graphics program in Java, I'm trying to animate rain falling using a timer. Right now I am testing my code with a big blue rectangle so I can see where it's going but the animation isn't working for me. I'm very new to Java graphics so I could be making mistakes that just aren't clear to me.
When I try to repaint the square to move, and the paint function is called the whole screen blinks, this may be because I was using recursive functions to draw fractal trees, but I'm not sure. Is there a way to keep everything I have drawn from being repainted and just call repaint on the rain? Any guidance or tips would be appreciated.
import java.awt.*;
import javax.swing.*;
import java.lang.Math;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class FractalTree extends JFrame {
private int frameWidth = 1440;
private int frameHeight = 850;
private int rainX = 0;
private int rainY = 0;
public FractalTree()
{
setBounds(1000, 1000, frameWidth, frameHeight ); //graphics window size
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
ActionListener listener = new TimerListener();
final int DELAY = 1500;
Timer t = new Timer(DELAY, listener);
t.start();
setResizable(false);
}
public void setRain(int newRainX, int newRainY)
{
rainX = newRainX;
rainY = newRainY;
}
public void setSkyGround(Graphics g)
{
Color sky = new Color(180, 225, 255);
g.setColor(sky);
g.fillRect(0, 0, frameWidth, 550);
Color sun = new Color(225, 225, 150);
g.setColor(sun);
g.fillOval(1380, -40, 100, 100);
g.drawLine(frameWidth, 0, 1350, 550);
g.drawLine(frameWidth, 0, 1450, 550);
g.drawLine(1350, 550, 1450, 550);
int xpoints[] = {frameWidth, 1450, 1350};
int ypoints[] = {0, 550, 550};
int npoints = 3;
g.fillPolygon(xpoints, ypoints, npoints);
g.drawLine(frameWidth, 0, 1080, 550);
g.drawLine(frameWidth, 0, 880, 550);
g.drawLine(880, 550, 1080, 550);
int xpoints2[] = {frameWidth, 1080, 880};
int ypoints2[] = {0, 550, 550};
int npoints2 = 3;
g.fillPolygon(xpoints2, ypoints2, npoints2);
g.drawLine(frameWidth, 0, 480, 550);
g.drawLine(frameWidth, 0, 280, 550);
g.drawLine(480, 550, 280, 550);
int xpoints3[] = {frameWidth, 480, 280};
int ypoints3[] = {0, 550, 550};
int npoints3 = 3;
g.fillPolygon(xpoints3, ypoints3, npoints3);
g.drawLine(frameWidth, 0, 0, 430);
g.drawLine(frameWidth, 0, 0, 300);
g.drawLine(0, 430, 0, 300);
int xpoints4[] = {frameWidth, 0, 0};
int ypoints4[] = {0, 430, 300};
int npoints4 = 3;
g.fillPolygon(xpoints4, ypoints4, npoints4);
g.drawLine(frameWidth, 0, 0, 100);
g.drawLine(frameWidth, 0, 0, 0);
g.drawLine(0, 100, 0, 0);
int xpoints5[] = {frameWidth, 0, 0};
int ypoints5[] = {0, 0, 100};
int npoints5 = 3;
g.fillPolygon(xpoints5, ypoints5, npoints5);
Color grassBackground = new Color(150, 255, 170);
g.setColor(grassBackground);
g.fillRect(0, 550, frameWidth, frameHeight);
}
public void drawTree(Graphics g, int x1, int y1, double angle, int depth, int red, int green, int blue)
{
if (depth == 0)
{
Color doodle = new Color(red, green, blue);
g.setColor(doodle);
g.fillOval(x1, y1, 10, 10);
}
else
{
Graphics2D g2 = (Graphics2D) g;
g2.setStroke(new BasicStroke(depth));
Color brown = new Color(100, 25, 0);
g.setColor(brown);
int x2 = x1 + (int) (Math.cos(Math.toRadians(angle)) * depth * 10);
int y2 = y1 + (int) (Math.sin(Math.toRadians(angle)) * depth * 10);
g.drawLine(x1, y1, x2, y2);
drawTree(g, x2, y2, angle - 40, depth - 1, red, green, blue);
drawTree(g, x2, y2, angle + 20, depth - 1, red, green, blue);
}
}
public void realFlowers(Graphics g, int x, int y, int lenWid, int petals)
{
//calculates the increment
double inc = (2*Math.PI/petals);
g.setColor(Color.YELLOW);
//draws petals
for(int i = 0; i < petals; i++){
//keeps spacing consistent depandng on number of petals
double value = i * inc;
//draws petals with calculated spacing relative to number of petals
g.fillOval((int)((lenWid)*Math.cos(value)+x-lenWid/4),(int)((lenWid)*Math.sin(value)+y-lenWid/4), lenWid + lenWid/2, lenWid + lenWid/2);
}
//draws middle flower bud;
g.setColor(Color.ORANGE);
g.fillOval(x - lenWid/4, y - lenWid/4, lenWid + lenWid/2 , lenWid + lenWid/2);
}
public void drawGrass(Graphics g, int width, int height, int interval, int red, int green, int blue)
{
height = frameHeight - height;
Color grass = new Color(red, green, blue);
for(int i = 0; i < width; i= i + interval)
{
for(int j = frameHeight; j > height; j = j - interval)
{
g.setColor(grass);
g.fillRect(i, j, 3, 5);
}
}
}
public void rainDrops(Graphics g, int x, int y, int w, int h)
{
setRain(x, y);
Color rain = new Color(0, 76, 153);
g.setColor(rain);
g.fillRect(x, y, w, h);
}
public void moveRainBy(int dx, int dy)
{
rainX = rainX + dx;
rainY = rainY + dy;
repaint();
}
class TimerListener implements ActionListener
{
public void actionPerformed(ActionEvent event)
{
moveRainBy(1, 1);
}
}
public void paint(Graphics g) {
setSkyGround(g);
drawGrass(g, 1440, 315, 5, 0, 255, 0);
drawGrass(g, 1430, 310, 10, 0, 204, 0);
drawTree(g, 1085, 730, -90, 10, 255, 102, 102);
drawTree(g, 250, 600, -90, 8, 255, 255, 255);
drawTree(g, 1110, 740, -90, 4, 255, 102, 102);
drawTree(g, 1060, 745, -90, 2, 255, 102, 102);
realFlowers(g, 700,700, 8, 8);
rainDrops(g, 200, 200, 30, 30);
}
public static void main(String[] args) {
new FractalTree().setVisible(true);
}
}

When I try to repaint the square to move, and the paint function is called the whole screen blinks
This is because you've override paint of the a top level container (JFrame) which is not double buffered.
As a general recommendation, you should be basing your core functionality around a JPanel and override it's paintComponent method. Take a look at Performing Custom Painting and Painting in AWT and Swing for more details
You might like to also have a look at How to get the EXACT middle of a screen, even when re-sized and How can I set in the midst? for more details why it's not recommended to extend directly from JFrame and try to paint to it.
Is there a way to keep everything I have drawn from being repainted and just call repaint on the rain?
Painting is destructive, that is, each time paint/paintComponent is called, you are expected to repaint the entire state of the component from scratch.
You could use a buffering technique, using something like BufferedImage to paint your state to and simply have the paint methods draw the image, but that would depend on how complex a solution you want. If you were to use buffering technique, I would consider which elements are "static" and which elements are "dynamic". Painting those static elements to the buffer and then, when paint is called, painting the dynamic elements over the top the buffer

How do I make objects *not* move when I have animation?

In swing graphics, I need to make something where the stick figure moves back and forth, but something stays put. I'm using the blue horizontal line as a test. It doesn't move, but it disappears in time with the stick figure's sword. How do I stop that?
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.util.*;
public class AnimatedBoxman extends JApplet implements Runnable,ActionListener
{
int size=50;
int x = 0;
int y =300;
int side2side = 50;
Thread t;
boolean sworddrawn = false;
JButton myButton = new JButton("Change");
static Random myRan = new Random();
public void init()
{
Container content = getContentPane();
content.setBackground(Color.red);
setLayout(new FlowLayout());
add(myButton);
myButton.addActionListener(this);
}
public void actionPerformed (ActionEvent ae)
{
side2side= -side2side;
Container content = getContentPane();
content.setBackground(new Color
(Math.abs(myRan.nextInt())%256,
Math.abs(myRan.nextInt())%256,
Math.abs(myRan.nextInt())%256));
repaint();
}
public void run( )
{
while( true )
{
x+= side2side;
if (x > this.getSize().width-50 || x < 0)
side2side = -side2side;
if (x%3 == 0)
sworddrawn = !sworddrawn;
repaint( );
try {
Thread.sleep(900);
}
catch( Exception e ) { }
}
}
public void start( )
{
t = new Thread(this);
t.start( );
}
public void paint ( Graphics g )
{
super.paint( g );
g.setColor(Color.blue);
g.drawLine(x-10, y, x-30,y);
g.drawLine(x-30, y, x-30, y-20);
g.drawLine(x-10, y-20, x-10, y);
g.drawLine(x-10, y-20, x+10, y-20);
g.drawLine(x-10, y-20, x+10, y-20);
g.drawLine(x-10, y, x+10, y);
g.drawLine(x-10, y, x-10, y+20);
g.drawLine(x, y+20, x, y);
g.drawLine(x+10, y+20,x+10, y);
g.drawLine(x+10, y, x+30, y);
g.drawLine(x+30, y, x+30, y-20);
g.drawLine(x+10, y-20, x+10, y);
g.drawLine(x, y+20, x+10, y+20);
g.drawLine(x-10, y+20, x-10, y+30);
g.drawLine(x-10, y+30, x, y+30);
g.drawLine(x, y+30, x, y+20);
g.drawLine(x, y+30, x+10, y+30);
g.drawLine(x+10, y+30, x+10, y+20);
g.drawLine(x-10, y+20, x, y+20);
g.drawOval(x-7, y-20, 5, 5);
g.drawOval(x+1, y-20, 5, 5);
g.drawLine(x-4, y-8, x-5, y-5);
g.drawLine(x-5, y-8, x+6, y-8);
g.drawLine(x+6, y-5, x+6, y-8);
if( sworddrawn )
{
g.drawLine(500, 400, 700, 400);
}
else
{
Polygon myPolygon2;
myPolygon2=new Polygon();
myPolygon2.addPoint(x-42,y-184);
myPolygon2.addPoint(x-32,y-195);
myPolygon2.addPoint(x-21,y-184);
g.fillPolygon(myPolygon2);
g.fillRect(x-41, y-184, 20, 100);
g.fillArc(x-50, y-104, 40, 20, 180, 180);
g.fillArc(x-35, y-94, 20, 35, 90, 180);
g.drawLine(x-30, y-164, x-30, y-24);
g.drawOval(x-40, y-24, 20, 30);
}
}
}

The blue horizontal line can be outside of the content pane, in which case it is not drawn. You can check the size of the content pane by adding a line to the init method:
System.out.println("getSize(): " + getSize());
On my laptop, the size is 400 by 300 pixels:
getSize(): java.awt.Dimension[width=400,height=300]
This results in an invisible blue horizontal line:
g.drawLine(500, 400, 700, 400);
With lower values for x and y coordinates, the line is visible:
g.drawLine(50, 40, 70, 40);
Finally, when you ask a question it can be useful to add a screenshot of your application with some additional text to explain what your problem is (for example, what you expect versus what you see).

Java Graphics - repaint() doesn't work when I click -> all before works

I have a new problem with the repaint methode.
There is a frame in which I paint several graphics together. When I click in a specific range of coordinates, it should change the status of one graphic and then repaint this specific range. But this repaint doesn't work...
This is the method that initialize the graphics (the declaration of the graphics isn't shown):
private void initComponents() {
Painter painter = new Painter();
setExtendedState(MAXIMIZED_BOTH);
int width = (int) getContentPane().getBounds().getWidth();
int height = (int) getContentPane().getBounds().getHeight();
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
g0 = new Gleis(25, 1, 4, 0, 0);
g1 = new Gleis(26, 1, 0, 1, 0);
k0 = new KnopfRot(26, 1, 0, false);
g2 = new Gleis(27, 1, 0, 2, 0);
g3 = new Gleis(28, 1, 0, 3, 0);
g4 = new Gleis(29, 1, 0, 4, 0);
g5 = new Gleis(30, 1, 0, 5, 0);
g6 = new Gleis(31, 1, 0, 6, 0);
g7 = new Gleis(32, 1, 0, 7, 0);
g8 = new Gleis(33, 1, 0, 8, 0);
g9 = new Gleis(34, 1, 0, 9, 0);
g10 = new Gleis(35, 1, 0, 10, 0);
g11 = new Gleis(36, 1, 0, 11, 0);
g12 = new Gleis(37, 1, 0, 12, 0);
g13 = new Gleis(38, 1, 0, 13, 0);
k1 = new KnopfRot(38, 1, 1, false);
painter.addGleis(g0);
painter.addGleis(g1);
painter.addKnopfRot(k0);
painter.addGleis(g2);
painter.addGleis(g3);
painter.addGleis(g4);
painter.addGleis(g5);
painter.addGleis(g6);
painter.addGleis(g7);
painter.addGleis(g8);
painter.addGleis(g9);
painter.addGleis(g10);
painter.addGleis(g11);
painter.addGleis(g12);
painter.addGleis(g13);
painter.addKnopfRot(k1);
this.addMouseListener(new MouseListener() {
#Override
public void mouseClicked(MouseEvent e) {
double x = e.getX();
double y = e.getY();
frameMouseClicked(x, y);
}
});
this.getContentPane().add(painter);
this.setVisible(true);
}
public void frameMouseClicked(double x, double y) {
if(x >= 306 && x <= 314 && y >= 55 && y <= 63){ //x+11 y+32
Painter painter = new Painter();
painter.updateKnopfRot(k0, 26, 1, 306, 55);
repaint();
}
else{}
}
Then my class KnopfRot:
public class KnopfRot {
int xposition;
int yposition;
int type;
int id;
boolean status;
//Konstruktor
public KnopfRot(int xpos, int ypos, int id, boolean status){
this.xposition = xpos * 11 + 12;
this.yposition = ypos * 11 + 12;
this.id = id; //zur eindeutigen Bezeichnung der Gleiselemente
this.status = status;
}
public void draw(Graphics2D g) {
if (!status) {
Ellipse2D.Double aussen = new Ellipse2D.Double(xposition, yposition, 8, 8);
Ellipse2D.Double innen = new Ellipse2D.Double(xposition + 1, yposition + 1, 6, 6);
g.setColor(Color.black);
g.fill(aussen);
g.setColor(Color.red);
g.fill(innen);
}
else if (status){
Ellipse2D.Double aussen = new Ellipse2D.Double(xposition, yposition, 7, 7);
Ellipse2D.Double innen = new Ellipse2D.Double(xposition + 1, yposition + 1, 5, 5);
g.setColor(Color.black);
g.fill(aussen);
g.setColor(Color.red);
g.fill(innen);
}
else {}
}
}
And the Painter-Class with the method updateKnopfRot which is callen in the MouseEvent:
public class Painter extends JPanel {
private List<Gleis> gleisList = new ArrayList<>();
private List<KnopfRot> knopfList = new ArrayList<>();
//fügt ein neues Element der Liste gleisList hinzu
public void addGleis(Gleis gleis) {
gleisList.add(gleis);
}
public void addKnopfRot(KnopfRot knopf) {
knopfList.add(knopf);
}
public void updateKnopfRot(KnopfRot knopf, int x, int y, int xpos, int ypos) {
knopfList.remove(knopf);
addKnopfRot(new KnopfRot(x, y, 0, true));
}
//paint-Methode geht jedes Element der Liste gleisList durch und führt die draw-Methode in Gleis.java aus
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
for (Gleis gleis : gleisList) {
gleis.draw(g2);
}
for (KnopfRot knopf : knopfList) {
knopf.draw(g2);
}
}
}
Sorry for so much code but I can't reduce it to explain/show the problem.
Can somebody help?

You're creating a new Painter(...) object within your frameMouseClicked(...) method, and then changing the state of this object, but this will have no effect on the completely different visualized Painter object. Your solution -- don't create a new Painter object, but rather use a reference to the original, and then try to change its state.
Regarding:
Sorry for so much code but I can't reduce it to explain/show the problem.
If this answer doesn't solve your problem, then yes, you can reduce this code and make it runnable as we've discussed in the past. Yes it will take some effort on your part to create and post a valid MCVE, but it's worth it.

Why is paintComponent not displaying correctly?

When running my program, sometimes the the triangles are drawn, sometimes they aren't, and sometimes only the last one appears. Originally I put the code in a for loop, but it didn't work, so I tried to go backwards and write it all out instead to see if it works, but to no avail. The correct behavior should be, displaying five triangles, equally spaced on the screen (Directly below the top rectangle). I tried printing out the array, but the number of times the println() method was called was sort of random, instead of constant. I heard that the paintComponent() method can be called at any time by the Swing Framework, but I'm not sure. Essentially I'm asking, why the triangles (the cyan ones) aren't being drawn correctly, and how do I fix it?
#SuppressWarnings("serial")
public class GraphicsClass extends JPanel {
private int[] xCoordinates = {20, 40, 30};
private int[] yCoordinates = {40, 40, 60};
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.DARK_GRAY);
g.fillRect(0, 0, 450, 40);
g.fillRect(0, 260, 450, 40);
g.setColor(Color.CYAN);
g.fillPolygon(xCoordinates, yCoordinates, 3);
xCoordinates[0] += 95;
xCoordinates[1] += 95;
xCoordinates[2] += 95;
g.fillPolygon(xCoordinates, yCoordinates, 3);
xCoordinates[0] += 95;
xCoordinates[1] += 95;
xCoordinates[2] += 95;
g.fillPolygon(xCoordinates, yCoordinates, 3);
xCoordinates[0] += 95;
xCoordinates[1] += 95;
xCoordinates[2] += 95;
g.fillPolygon(xCoordinates, yCoordinates, 3);
xCoordinates[0] += 95;
xCoordinates[1] += 95;
xCoordinates[2] += 95;
g.fillPolygon(xCoordinates, yCoordinates, 3);
}
}

Think about it this way. paintComponent may be called any time (upwards of four times when the component is first painted on the screen in some cases). So each time it is called, you're adding 95 to each of the xCoordinates, this would make xCoordinates[0] equal to 400 after paintComponent is called the first time, 800 after the second time, so on and so fourth...
Instead, you need to make a copy of the xCoordinates and modify it instead, for example...
public class TestPane extends JPanel {
private int[] xCoordinates = {20, 40, 30};
private int[] yCoordinates = {40, 40, 60};
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.DARK_GRAY);
g.fillRect(0, 0, 450, 40);
g.fillRect(0, 260, 450, 40);
int[] xPosy = Arrays.copyOf(xCoordinates, xCoordinates.length);
g.setColor(Color.CYAN);
for (int index = 0; index < 4; index++) {
g.fillPolygon(xPosy, yCoordinates, 3);
xPosy[0] += 95;
xPosy[1] += 95;
xPosy[2] += 95;
}
}
}
Of course, you could forgo some of the oddities and just make use of the 2D Graphics Shape API
public class TestPane extends JPanel {
private Polygon triangle;
public TestPane() {
triangle = new Polygon(new int[]{20, 40, 30}, new int[]{40, 40, 60}, 3);
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setColor(Color.DARK_GRAY);
g2d.fillRect(0, 0, 450, 40);
g2d.fillRect(0, 260, 450, 40);
g2d.setColor(Color.CYAN);
AffineTransform at = AffineTransform.getTranslateInstance(0, 0);
for (int index = 0; index < 4; index++) {
Shape shape = at.createTransformedShape(triangle);
g2d.fill(shape);
at.translate(95, 0);
}
}
}

Why is this error showing up? — Processing

Could anyone share with me why I am getting this error? Basically it's a program where I want to simulate basic basic plant growth. I want to do it in such a way that the petals are all stored in an array of circles.
Stem myStem;
Circle circles;
float scaleFactor=0.5;
void setup() {
size(floor(400*scaleFactor), floor(800*scaleFactor));
myStem = new Stem(200,800);
}
void draw() {
background(150);
smooth();
Circle circles[];
circles = new Circle[5];
circles[0] = new Circle(0, -40, 50, 50);
circles[1] = new Circle(0, -40, 50, 50);
circles[2] = new Circle(0, -40, 50, 50);
circles[3] = new Circle(0, -40, 50, 50);
circles[4] = new Circle(0, -40, 50, 50);
for (int i = 0; i < circles.length; i++) {
circles = ellipse(circles[i].c1, circles[i].c2, circles[i].c3, circles[i].c4);
rotate(radians(72));
circles[i] = Circle;
}
myStem.drawStem();
}
class Stem {
int initalloX=200;
int initalloY=800;
Stem(int tempInitalloX, int tempInitalloY) {
initalloX = tempInitalloX;
initalloY = tempInitalloY;
}
void drawStem() {
background(#0DBADB);
scale(scaleFactor, scaleFactor);
stroke (12, 149, 11);
fill (12, 149, 11);
strokeWeight(10);
line(initalloX, initalloY, initalloX, ((frameCount>250)?initalloY-500:initalloY-(2*frameCount)));
//stem1
if (frameCount>101) {
noStroke();
translate(initalloX, initalloY-200);
scale(min((float)(frameCount-100)/100, 1), min((float)(frameCount-100)/100, 1));
beginShape();
vertex(0, 0);
bezierVertex(-40, -5, -30, -40, -80, -20);
bezierVertex(-47, -16, -52, 8, 0, 0);
endShape(CLOSE);
scale(1/min((float)(frameCount-100)/100, 1), 1/min((float)(frameCount-100)/100, 1));
translate(-initalloX, -(initalloY-200));
}
//stem2
if (frameCount>151) {
noStroke();
translate(initalloX, initalloY-300);
scale(-min((float)(frameCount-150)/150, 1), min((float)(frameCount-150)/150, 1));
beginShape();
vertex(0, 0);
bezierVertex(-40, -5, -30, -40, -80, -20);
bezierVertex(-47, -16, -52, 8, 0, 0);
endShape(CLOSE);
scale(-1/min((float)(frameCount-150)/150, 1), 1/min((float)(frameCount-150)/150, 1));
translate(-initalloX, -(initalloY-300));
}
}
}
class Circle {
int c1 = 0;
int c2 = -40;
int c3 = 50;
int c4 = 50;
Circle(int tc1, int tc2, int tc3, int tc4) {
c1 = tc1;
c2 = tc2;
c3 = tc3;
c4 = tc4;
}
}
Thanks in advance... All help is much appreciated.

Besides all thing already pointed, note that ellipse() is a void method, and so, it won't return anything. Thus a line like
circle = ellipse(x,y,z,z)
has no meaning. You probably wan to use the values stored in ciclcle[i] to draw ellipses, so just call
ellipse(circles[i].c1, circles[i].c2, circles[i].c3, circles[i].c4);
no need for assigning it. Also i don't see why create 5 equal circles. If your circle object is just storing data, why store the same data five times? The call:
for (int i = 0; i < circles.length; i++) {
ellipse(0, -40, 50, 50);
rotate(radians(72));
}
Will have the same effect.
Besides that calling background() at the end of draw (trough myStem.drawStem()) will hide all things previously drawn.
And yet there is no need to recreate the array and reassign the values 60 times per second, you can move it to setup.
I made those changes to your code. It will compile now. Still the "petals" is beeing drawn at origin, and the fill/stroke of them needs to be handled, but at least it is running :)
You may want to make a display method in your circle class... More like i pointed in the other post you made. cheers!
Stem myStem;
//Circle circles; // double declaration
Circle circles[]; // keeping the array one only
float scaleFactor=0.5;
void setup() {
size(floor(400*scaleFactor), floor(800*scaleFactor));
myStem = new Stem(200,800);
//mpoved this to setup, no need to recreate each frame
circles = new Circle[5];
circles[0] = new Circle(0, -40, 50, 50);
circles[1] = new Circle(0, -40, 50, 50);
circles[2] = new Circle(0, -40, 50, 50);
circles[3] = new Circle(0, -40, 50, 50);
circles[4] = new Circle(0, -40, 50, 50);
// also smooth only needs to be called once
// unless ther is a noSmooth() somewhere
smooth();
}
void draw() {
// moved this here
background(#0DBADB);
for (int i = 0; i < circles.length; i++) {
ellipse(circles[i].c1, circles[i].c2, circles[i].c3, circles[i].c4);
// note you may use this instead
//ellipse(0, -40, 50, 50);
rotate(radians(72));
}
myStem.drawStem();
}
class Stem {
int initalloX=200;
int initalloY=800;
Stem(int tempInitalloX, int tempInitalloY) {
initalloX = tempInitalloX;
initalloY = tempInitalloY;
}
void drawStem() {
//background(#0DBADB); // this was hiding all other draws
scale(scaleFactor, scaleFactor);
stroke (12, 149, 11);
fill (12, 149, 11);
strokeWeight(10);
line(initalloX, initalloY, initalloX, ((frameCount>250)?initalloY-500:initalloY-(2*frameCount)));
//stem1
if (frameCount>101) {
noStroke();
translate(initalloX, initalloY-200);
scale(min((float)(frameCount-100)/100, 1), min((float)(frameCount-100)/100, 1));
beginShape();
vertex(0, 0);
bezierVertex(-40, -5, -30, -40, -80, -20);
bezierVertex(-47, -16, -52, 8, 0, 0);
endShape(CLOSE);
scale(1/min((float)(frameCount-100)/100, 1), 1/min((float)(frameCount-100)/100, 1));
translate(-initalloX, -(initalloY-200));
}
//stem2
if (frameCount>151) {
noStroke();
translate(initalloX, initalloY-300);
scale(-min((float)(frameCount-150)/150, 1), min((float)(frameCount-150)/150, 1));
beginShape();
vertex(0, 0);
bezierVertex(-40, -5, -30, -40, -80, -20);
bezierVertex(-47, -16, -52, 8, 0, 0);
endShape(CLOSE);
scale(-1/min((float)(frameCount-150)/150, 1), 1/min((float)(frameCount-150)/150, 1));
translate(-initalloX, -(initalloY-300));
}
}
}
class Circle {
int c1 = 0;
int c2 = -40;
int c3 = 50;
int c4 = 50;
Circle(int tc1, int tc2, int tc3, int tc4) {
c1 = tc1;
c2 = tc2;
c3 = tc3;
c4 = tc4;
}
}

Learned something new I guess for declaring an array.
As for what is going wrong, it looks like you're using a Circle variable called "circle" and confusing it with an array of Circles by also calling it circle which probably is leading to all sorts of problems. That's probably what you should focus on fixing.

Guessing...
There are two definitions of circles in the class
Circle circles
Circle[] circles

I think this circles[i] = Circle; is the error. You cannot asign a Type (the class Circle) to a variable (i.e. an Object or an instance of a class)