Related
The essential question of what I am trying to ask is: How would I make a graph in which the line at y=0 is actually at y=*some number* and that as my Y increases, Java's y decreases?
I am attempting to make a line graph which documents change of populations of animals. I need to make the graph's Y=0 around the y=980 line. I also need to make something that would notice an increase in population and graph it as a decrease in y (to make the line go UP). What I'm trying to say is that I need to create a line graph that looks like a line graph.
I have attempted multiple different things, which each give me a different result based on different inputs. I have successfully created the graph that starts around the y=980 line and goes up, as shown by the image below. The method I used for this was to draw the lines (for the graph itself) and then to take the absolute value of the difference of 10 times the value minus 90, as shown by
g.drawLine((125), (y+1)*93, width, (y+1)*93);
g.drawString(Math.abs(y*10-90) + " alive", (80), (y+1)*93);
This completely works for the graph, but when trying to implement it into the graphing of the lines, I receive mixed results.
For this project, I have 3 populations: predators of my animal, prey of my animal, and my animal. I want to graph the population size of all of these. When using the previously shown method, I successfully graph the first value of the population of the predators. The other two, however, are on the opposite side of the graph from where they must be. (e.g. my animal's population size is set to start at 90, but on the graph it is around the mid-20s, as also shown by the graph below). The code I used for each of these is:
// predator animal line
g.setColor(Color.red);
g.drawLine(i*93+125, (Math.abs((predatorAnimalAmt[i]*10)-90)), (i+1)*93+125, (Math.abs((predatorAnimalAmt[i+1]*10)-90)));
g.drawLine(100, height-45, 120, height-45);
g.drawString("PREDATOR", 30, height-40);
// prey animal line
g.setColor(Color.green);
g.drawLine(i*93+125, (Math.abs((preyAnimalAmt[i]*10)-90)), (i+1)*93+125, (Math.abs((preyAnimalAmt[i+1]*10)-90)));
g.drawLine(100, height-60, 120, height-60);
g.drawString("PREY", 30, height-55);
// our animal's line
g.setColor(Color.blue);
g.drawLine(i*93+125, (Math.abs((ourAnimalAmt[i]*10)-90)), (i+1)*93+125, (Math.abs((ourAnimalAmt[i+1]*10)-90)));
g.drawLine(100, height-75, 120, height-75);
g.drawString("OUR ANIMAL", 30, height-70);
Here is my code in this class (there are other classes accessible in my github page)
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Toolkit;
import java.awt.image.BufferStrategy;
import java.util.ArrayList;
import java.util.Random;
// ALL OF MY CLASSES
import natural.selection.main.animalia.Animal;
import natural.selection.main.animalia.OurAnimal;
import natural.selection.main.animalia.Predator;
import natural.selection.main.animalia.Prey;
public class MainApp implements Runnable {
private Display display;
private int width, height;
public String title;
private boolean running = false;
private Thread thread;
private Random random = new Random();
private BufferStrategy bs;
private Graphics g;
private ArrayList<Animal> allAnimals = new ArrayList<>();
private int[] animalAmt = new int[20];
private ArrayList<Prey> allPreyAnimals = new ArrayList<>();
private int[] preyAnimalAmt = new int[20];
private ArrayList<OurAnimal> allOurAnimals = new ArrayList<>();
private int[] ourAnimalAmt = new int[20];
private ArrayList<Predator> allPredatorAnimals = new ArrayList<>();
private int[] predatorAnimalAmt = new int[20];
public MainApp(String title, int width, int height){
this.width = width;
this.height = height;
this.title = title;
}
private void init(){
display = new Display(title, width, height);
for(int i=0; i<90; i++) {
OurAnimal animal = new OurAnimal(random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10));
allOurAnimals.add(animal);
allAnimals.add(animal);
}
for(int i=0; i<(80+random.nextInt(10)); i++) {
Prey animal = new Prey(random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10));
allPreyAnimals.add(animal);
allAnimals.add(animal);
}
for(int i=0; i<(50+random.nextInt(10)); i++) {
Predator animal = new Predator(random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10), random.nextInt(10));
allPredatorAnimals.add(animal);
allAnimals.add(animal);
}
animalAmt[0] = allAnimals.size();
preyAnimalAmt[0] = allPreyAnimals.size();
ourAnimalAmt[0] = allOurAnimals.size();
predatorAnimalAmt[0] = allPredatorAnimals.size();
}
private void tick() {
}
// Amount of weeks to simulate
private int weeksToSim = 20;
private void render(){
bs = display.getCanvas().getBufferStrategy();
if(bs == null){
display.getCanvas().createBufferStrategy(3);
return;
}
g = bs.getDrawGraphics();
//Clear Screen
g.clearRect(0, 0, width, height);
//Draw Here!
g.setColor(Color.black);
// LINE GRAPH OF SPECIES COUNT
// Draw the graph
for(int x=0; x<weeksToSim; x++) {
g.drawLine(x*93+125, height-100, x*93+125, 0);
g.drawString("Week " + (x+1), x*93+125-20, height-80);
}
for(int y=0; y<10; y++) {
g.drawLine((125), (y+1)*93, width, (y+1)*93);
g.drawString(Math.abs(y*10-90) + " alive", (80), (y+1)*93);
}
// Draw the line
for(int i=0; i<(animalAmt.length-1); i++) {
// predator animal line
g.setColor(Color.red);
g.drawLine(i*93+125, (Math.abs((predatorAnimalAmt[i]*10)-90)), (i+1)*93+125, (Math.abs((predatorAnimalAmt[i+1]*10)-90)));
g.drawLine(100, height-45, 120, height-45);
g.drawString("PREDATOR", 30, height-40);
// prey animal line
g.setColor(Color.green);
g.drawLine(i*93+125, (Math.abs((preyAnimalAmt[i]*10)-90)), (i+1)*93+125, (Math.abs((preyAnimalAmt[i+1]*10)-90)));
g.drawLine(100, height-60, 120, height-60);
g.drawString("PREY", 30, height-55);
// our animal's line
g.setColor(Color.blue);
g.drawLine(i*93+125, (Math.abs((ourAnimalAmt[i]*10)-90)), (i+1)*93+125, (Math.abs((ourAnimalAmt[i+1]*10)-90)));
g.drawLine(100, height-75, 120, height-75);
g.drawString("OUR ANIMAL", 30, height-70);
}
//End Drawing!
bs.show();
g.dispose();
}
public void run(){
init();
int fps = 60;
double timePerTick = 1000000000 / fps;
double delta = 0;
long now;
long lastTime = System.nanoTime();
long timer = 0;
int ticks = 0;
Toolkit.getDefaultToolkit().sync();
while(running){
now = System.nanoTime();
delta += (now - lastTime) / timePerTick;
timer += now - lastTime;
lastTime = now;
if(delta >= 1){
tick();
render();
ticks++;
delta--;
}
if(timer >= 1000000000){
System.out.println("Ticks and Frames: " + ticks);
ticks = 0;
timer = 0;
}
}
stop();
}
public int getWidth(){
return width;
}
public int getHeight(){
return height;
}
public synchronized void start(){
if(running)
return;
running = true;
thread = new Thread(this);
thread.start();
}
public synchronized void stop(){
if(!running)
return;
running = false;
try {
thread.join();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
How would I go about making all of the points correct with just one formula without completely disrupting all of my code?
Here is what I get as a result of my code:
Let's extract this functionality into two functions that calculate the correct x and y position for a given week and count. This way, you can change the chart layout by just changing a single function instead of multiple lines scattered throughout the code:
private int getChartX(double week) {
return (int)Math.round(week * 93 + 32);
}
private int getChartY(double count) {
return (int)Math.round(930 - count * 9.3);
}
Using these functions, you can re-structure your drawing code like this:
// Draw the graph
for(int week = 1; week <= weeksToSim; week++) {
int x = getChartX(week);
g.drawLine(x, getChartY(0), x, 0);
g.drawString("Week " + week, x-20, getChartY(0) + 20);
}
for(int y=0; y<10; y++) {
int count = 10 * y;
int y = getChartY(count);
g.drawLine(getChartX(1), y, width, y);
g.drawString(count + " alive", getChartX(1) - 45, y);
}
// Draw the line
for(int i=0; i<(animalAmt.length-1); i++) {
int week = i + 1;
// predator animal line
g.setColor(Color.red);
g.drawLine(getChartX(week), getChartY(predatorAnimalAmt[i]), getChartX(week + 1), getChartY(predatorAnimalAmt[i + 1]));
...
}
I want to get nested stencils to work in OpenGL.
I call them masks from now on.
So the stencil buffer is cleared to all 0's.
I make my first mask, the grey area.
Now that have to be all 1's in the stencil buffer, and normal drawing is not allowed to happen outside that mask.
Now I create a second mask which is a child of the first one:
It would only update the stencil buffer if the area is inside the area of the previous mask:
Same if we would make another child mask, we would only increment if it was inside the parent mask.
Now if we would end the last mask (the green one), we can decrement the values where they where equal to the mask depth.
Ok that is the idea, but I have been stuck on getting this to work for weeks (not full time...).
Either masking does not work, or it does not work as expected. Here I provide code that makes the most sense to me.
I use processing, which can be downloaded here https://processing.org/ (download and run, simple as that).
PGL pgl;
Rect current_rect;
void setup() {
size(600, 600, P3D);
noStroke();
// will have a depth of 0, equal to the stencil buffer after a clear
current_rect = make_rect(null, 0, 0, width, height);
}
class Rect {
float x;
float y;
float w;
float h;
ArrayList<Rect> children = new ArrayList<Rect>();
Rect parent;
int mask_depth;
}
Rect make_rect(Rect parent, float x, float y, float w, float h) {
Rect r = new Rect();
r.x = x;
r.y = y;
r.w = w;
r.h = h;
if (parent != null) {
r.parent = parent;
r.mask_depth = parent.mask_depth + 1;
parent.children.add(r);
}
return r;
}
void draw() {
if (frameCount == 2) noLoop();
println();
pgl = beginPGL();
pgl.enable(PGL.STENCIL_TEST);
pgl.clear(PGL.STENCIL_BUFFER_BIT);
background(150, 80, 70);
begin_mask(100, 100, 400, 400);
fill(150);
rect(100, 100, 400, 400);
// SHOULD NOT FALL OUTSIDE OF THE MASK!
debug_text(" A ");
// disabled for now cause the above begin_mask
// goes already wrong
if (false) {
begin_mask(50, 150, 500, 100); // B
fill(100);
rect(50, 150, 500, 100);
debug_text(" B ");
if (true) {
begin_mask(200, 50, 100, 500); // C
fill(50);
rect(200, 50, 100, 500);
debug_text(" C ");
end_mask(); // C
}
end_mask(); // B
// why is the one from above (C) on this one?
// disable this one to see what I mean
if (true) {
begin_mask(50, 350, 500, 100); // D
fill(75);
rect(50, 350, 500, 100);
fill(255);
debug_text(" D ");
end_mask(); // D
}
}
end_mask(); // A
flush();
endPGL();
}
void begin_mask(float x, float y, float w, float h) {
current_rect = make_rect(current_rect, x, y, w, h);
flush();
pgl.colorMask(false, false, false, false);
pgl.depthMask(false);
pgl.stencilOp(PGL.KEEP, PGL.KEEP, PGL.INCR);
println("increment stencil when stencil is equal to: "+current_rect.parent.mask_depth);
pgl.stencilFunc(PGL.EQUAL, current_rect.parent.mask_depth, 0xFF);
// write to stencil buffer
noStroke();
fill(0);
rect(x, y, w, h);
flush();
enable_normal_draw_mode();
}
void enable_normal_draw_mode() {
pgl.stencilMask(0x00);
println("normal write when stencil depth is: "+(current_rect.mask_depth));
pgl.stencilFunc(PGL.GEQUAL, current_rect.mask_depth, 0xff);
pgl.stencilOp(PGL.KEEP, PGL.KEEP, PGL.KEEP);
pgl.colorMask(true, true, true, true);
pgl.depthMask(true);
flush();
println("enable_normal_draw_mode "+current_rect.mask_depth);
}
void end_mask() {
// decrement stencil mask as if we never existed
pgl.stencilMask(0xff);
pgl.stencilFunc(PGL.GEQUAL, current_rect.mask_depth, 0xff);
pgl.stencilOp(PGL.KEEP, PGL.KEEP, PGL.DECR);
pgl.colorMask(false, false, false, false);
pgl.depthMask(false);
noStroke();
fill(0);
rect(current_rect.x, current_rect.y, current_rect.w, current_rect.h);
flush();
current_rect = current_rect.parent;
enable_normal_draw_mode();
}
void debug_text(String s) {
fill(255);
text(xxx(s), 0, 0);
}
String xxx(String to_repeat) {
String result = "";
String line = "";
for (int x = 0; x < 50; x++) {
line += to_repeat;
}
for (int y = 0; y < 50; y++) {
result += line + "\n";
}
return result;
}
(new to java). So I am have created the following script and I would like my object called "site" to appear only when the mouse is pressed and then stay on the screen. Then at every mouse pressed it created a new "site".
What it does now is that it creates a site at the beginning and the adds one when the mouse is pressed. But I don't want that site in the beginning, I just want it when I click.
Is anyone could help me that would be great!
/*preload = "factory_12.png";*/
/*preload = "sign.png";*/
/*preload = "simple_truck.png";*/
Lorry lorry;
PImage concretePlant;
PFont aFont;
int xCoord;
int yCoord;
ArrayList<Site> sites;
int siteSize = 30;
void setup() // What is called once at the beginning
{
size (500, 500);
concretePlant = loadImage("factory_12.png");
aFont = createFont("IndustrialRevolution-Regular", 12);
textFont(aFont);
xCoord = int(width/2);
yCoord = int(height/2);
//Creating empty Array List where store sites objects
sites = new ArrayList<Site>();
//Adding first site
sites.add(new Site(random(width), random(height), siteSize));
//storing lorries
lorry = new Lorry(xCoord, yCoord);
}
void draw() // Draw the background and concrete plant
{
background (235, 247, 255); //light blue background, not in draw as it wouldn't allow the site image to stay
image(concretePlant, xCoord, yCoord, 60, 60);
fill(1);
text("Concrete Plant", xCoord-20, yCoord+70);
//Calling the sites
for (int i = sites.size () - 1; i>=0; i--) {
Site site = sites.get(i);
site.displaySites();
}
//calling the lorry functions
lorry.updateLorry();
}
void mousePressed() {
sites.add(new Site(mouseX, mouseY, siteSize));
}
class Site
{
float x,y;
float size;
PImage picture;
Site (float xin, float yin, float sin)
{
x = xin;
y = yin;
size = sin;
picture = loadImage("sign.png");
}
void displaySites()
{
image(picture, x, y, 60, 60);
}
}
class Lorry
{
PVector location;
PVector concretePlant;
PVector velocity;
PImage mixer;
boolean changeDirection;
int siteNumber = 0;
Site destination;
Lorry(float xCoord, float yCoord)
{
concretePlant = new PVector(xCoord, yCoord); //Initial start point
location = new PVector(xCoord, yCoord); //Initial start point
velocity = new PVector(2, 2);
mixer = loadImage("simple_truck.png");
destination = sites.get(siteNumber);
changeDirection = false;
}
void displayLorry()
{
image(mixer, location.x, location.y, 30, 30);
}
void Move()
{
float xdir = destination.x - location.x;
float ydir = destination.y - location.y;
PVector dir = new PVector (xdir, ydir);
dir.normalize();
location.add(dir);
print("going");
}
void reachDestination()
{
//println(destination,location);
//if ((destination.x == location.x) && (destination.y == location.y)) {
if (dist(destination.x, destination.y, location.x, location.y) < 1) {
if (siteNumber <sites.size() -1) {
siteNumber++; // siteNumber = siteNumber + 1;
destination = sites.get(siteNumber);
changeDirection = true;
} else {
println("reached final site");
}
println("reachedDestination");
}
}
void updateLorry()
{
displayLorry();
Move();
reachDestination();
}
}
Thank you :)
Get rid of this line:
//Adding first site
sites.add(new Site(random(width), random(height), siteSize));
This line in your setup() function adds a Site. If you don't want to add a Site at startup, remove this line.
You should also try to go through the process of debugging your problem. For example, step through the code line-by-line with a piece of paper and a pencil, or add print statements, or use the debugger that comes with the Processing editor. That will help you figure out problems like this in the future. Good luck!
I am writing a darts application, and have implemented a Dartboard which is painted as a BufferedImage.
When rendering the dartboard, I first iterate over the co-ordinates of the BufferedImage and calculate the 'segment' that it resides in. I wrap this up into a DartboardSegment, which is basically just a collection of points with a small amount of extra structure (what number on the board it corresponds to, etc).
Currently, to actually render the dartboard I paint each point individually, like the following:
for (Point pt : allPoints)
{
DartboardSegment segment = getSegmentForPoint(pt);
Color colour = DartboardUtil.getColourForSegment(segment);
int rgb = colour.getRGB();
int x = (int)pt.getX();
int y = (int)pt.getY();
dartboardImage.setRGB(x, y, rgb);
}
Obviously this takes some time. It's not an intolerable amount (~2-3s to paint a 500x500 area), but I'd like to eliminate this 'lag' if I can. In other areas of my application I have encountered alternate methods (such as Graphics.fillRect()) which are much faster.
I've seen that there is a fillPolgyon() method on the Graphics class, however I don't think I can easily convert my segments into polygons because their shapes vary (e.g. the shape of a triple, a circle for the bullseye...). Is there a faster way in java to paint an arbitrary array of Points at once, rather than looping through and painting individually?
The code that I want to write is something like:
for (DartboardSegment segment : allSegments)
{
Color colour = DartboardUtil.getColourForSegment(segment);
Polgyon poly = segment.toPolygon();
Graphics gfx = dartboardImage.getGraphics();
gfx.setColor(colour);
gfx.fillPolygon(poly);
}
I don't think I can easily convert my segments into polygons because their shapes vary (e.g. the shape of a triple, a circle for the bullseye...)
Here is something that may give you some ideas.
You can create Shape objects to represent each area of the dartboard:
import java.awt.*;
import java.util.*;
import javax.swing.*;
import java.awt.geom.*;
public class Dartboard extends JPanel
{
private ArrayList<DartboardSegment> segments = new ArrayList<DartboardSegment>();
private int size = 500;
private int radius = size / 2;
private int border = 25;
private int doubleSize = size - (2 * border);
private int tripleSize = size / 2;
private int thickness = 10;
public Dartboard()
{
createSegmentWedges();
int innerRadius = size - (2 * border);
Shape outer = new Ellipse2D.Double(0, 0, size, size);
Shape inner = new Ellipse2D.Double(border, border, innerRadius, innerRadius);
Area circle = new Area( outer );
circle.subtract( new Area(inner) );
segments.add( new DartboardSegment(circle, Color.BLACK) );
createBullsEye();
}
private void createSegmentWedges()
{
int angle = -99;
for (int i = 0; i < 20; i++)
{
// Create the wedge shape
GeneralPath path = new GeneralPath();
path.moveTo(250, 250);
double radians1 = Math.toRadians( angle );
double x1 = Math.cos(radians1) * radius;
double y1 = Math.sin(radians1) * radius;
path.lineTo(x1 + 250, y1 + 250);
angle += 18;
double radians2 = Math.toRadians( angle );
double x2 = Math.cos(radians2) * radius;
double y2 = Math.sin(radians2) * radius;
path.lineTo(x2 + 250, y2 + 250);
path.closePath();
Color wedgeColor = (i % 2 == 0) ? Color.BLACK : Color.WHITE;
segments.add( new DartboardSegment(path, wedgeColor) );
// Create the double/triple shapes
Color color = (i % 2 == 0) ? Color.RED : Color.GREEN;
createShape(doubleSize, path, color);
createShape(tripleSize, path, color);
}
}
private void createShape(int outerSize, GeneralPath path, Color color)
{
int outerOffset = (size - outerSize) / 2;
int innerSize = outerSize - (2 * thickness);
int innerOffset = (size - innerSize) / 2;
Shape outer = new Ellipse2D.Double(outerOffset, outerOffset, outerSize, outerSize);
Shape inner = new Ellipse2D.Double(innerOffset, innerOffset, innerSize, innerSize);
Area circle = new Area( outer );
circle.subtract( new Area(inner) );
circle.intersect( new Area(path) );
segments.add( new DartboardSegment(circle, color) );
}
private void createBullsEye()
{
int radius1 = 40;
int offset1 = (size - radius1) / 2;
Ellipse2D.Double bullsEye1 = new Ellipse2D.Double(offset1, offset1, radius1, radius1);
segments.add( new DartboardSegment(bullsEye1, Color.GREEN) );
int radius2 = 20;
int offset2 = (size - radius2) / 2;
Ellipse2D.Double bullsEye2 = new Ellipse2D.Double(offset2, offset2, radius2, radius2);
segments.add( new DartboardSegment(bullsEye2, Color.RED) );
}
#Override
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g.create();
for (DartboardSegment segment: segments)
{
g2d.setColor( segment.getColor() );
g2d.fill( segment.getShape() );
}
}
#Override
public Dimension getPreferredSize()
{
return new Dimension(500, 500);
}
class DartboardSegment
{
private Shape shape;
private Color color;
public DartboardSegment(Shape shape, Color color)
{
this.shape = shape;
this.color = color;
}
public Shape getShape()
{
return shape;
}
public Color getColor()
{
return color;
}
}
private static void createAndShowGUI()
{
JFrame frame = new JFrame("DartBoard");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new Dartboard());
frame.setLocationByPlatform( true );
frame.pack();
frame.setVisible( true );
}
public static void main(String[] args)
{
EventQueue.invokeLater( () -> createAndShowGUI() );
/*
EventQueue.invokeLater(new Runnable()
{
public void run()
{
createAndShowGUI();
}
});
*/
}
}
After a bit more digging, I think one solution to this is to do the following. It's not the neatest, but I think it will work:
int i = 0;
for (int y=0; y<height; y++)
{
for (int x=0; x<width; x++)
{
Point pt = new Point(x, y);
DartboardSegment segment = getSegmentForPoint(pt);
Color colour = DartboardUtil.getColourForSegment(segment);
pixels[i] = colorToUse.getRGB();
i++;
}
}
dartboardImage.setRGB(0, 0, width, height, pixels, 0, width);
I am open to better suggestions, however!
I am trying to calculate the accumulating area for every creation of a rectangle.
I am aware of how to calculate the area for every time I create a rectangle, but I was hoping to get a running total.
Thanks!
float[] p1x = new float[0]; // hold the mouse pressed marks
float[] p1y = new float[0];
float[] p1z = new float[0];
float[] p2x = new float[0]; // hold the mouse pressed marks
float[] p2y = new float[0];
float[] p2z = new float[0];
int count = 0;
int rect_x1; // catch the start dragging point x
int rect_y1; // catch the start dragging point y
int rect_x2; // record moving mouseX
int rect_y2; // record moving mouseY
int rect_z1; // record mouseX releasing point
int rect_z2; // record mouseY releasing point.
boolean press, release, drag, drawRect;
void setup() {
smooth();
size(600, 400);
stroke(255);
fill(255, 255, 255, 10);
}
void draw() {
background(50);
Rect();
}
void Rect() {
float sizex = rect_x2 - rect_x1;
float sizey = rect_y2 - rect_y1;
for (int i = 0; i < count; i++) {
beginShape();
vertex(p1x[i], p1y[i]);
vertex(p2x[i], p1y[i]);
vertex(p2x[i], p2y[i]);
vertex(p1x[i], p2y[i]);
endShape(CLOSE);
}
if (mousePressed && mouseButton == LEFT) {
rect(rect_x1, rect_y1, sizex, sizey);
}
}
void mousePressed() {
p1x = append(p1x, mouseX);
p1y = append(p1y, mouseY);
rect_x1 = mouseX;
rect_y1 = mouseY;
mouseDragged(); // Reset vars
}
void mouseReleased() {
p2x = append(p2x, mouseX);
p2y = append(p2y, mouseY);
rect_x2 = mouseX;
rect_y2 = mouseY;
count++;
}
void mouseDragged() {
rect_x2 = mouseX;
rect_y2 = mouseY;
}
Well, you've got a couple options.
Option 1: Calculate the total every time you draw the rectangles. You've got a for loop in your Rect() function that loops through and draws them. You can just calculate the total area then.
Option 2: Keep a running total, and increment that every time you add a rectangle. You can do this in your mouseReleased() function.
I'm not sure exactly what you mean when you say you want one single accumulated number. You either have to total them up whenever you want the total, or you need to keep a running total and add to it whenever you add a new rectangle.