I'm trying to draw text inside of a PGraphics, but it looks ugly. Code:

PGraphics g;

void setup() {
  size(400, 400);

  g = createGraphics(width, height);

  g.beginDraw();
  g.fill(255);
  g.text("In PGraphics", 4, 48);
  g.endDraw();
}

void draw() {
  background(32);

  fill(255);
  text("In Draw", 4, 24);

  image(g, 0, 0);
}

Here's a screenshot:

What's going wrong with this? I tried adding a background(0) call to the PGraphics, but it didn't help, because the background needs to be transparent. I am going to draw color in my final sketch, so I can't really use blending modes.

EDIT: Just providing more details: I need to use JAVA2D, because my sketch uses clip(), and P2D breaks clip() with transform().

Here is an example of circles and text drawn to a PGraphics buffer (top), and just regular circles/text on the side. Why is there such a huge difference in quality/appearance? There is no difference in code between the two asides from appending canvas.

    for (int x = 1; x < width/M; x ++) {
      if (line) {
        canvas.line(x*M, 0, x*M, canvasHeight);
      }
      canvas.textSize(10);
      canvas.textAlign(CENTER, CENTER);
      canvas.text(x + "m", x*M, 25*cm); 
      canvas.ellipse(x*M, 50*cm, 20*cm, 20*cm);
    }

String canvasMsg = "CACTUS";
PFont font;
PImage bg;
int y;

void setup() {
  size(640, 360);
  bg = loadImage("cactus.JPG");

  fill(153, 0, 153);


  font = loadFont("ACaslonPro-Semibolditalic-48.vlw");
  textFont(font);
  textSize(100);

  textAlign(CENTER);
  text(canvasMsg, width / 2 - 10, height + 2);
}

void draw() {
  background(bg);
}

I have made this little code for trying P5JS

  var bubbleDiam = 40;
  var bubbleNb = 80;
  var xpos = [];
  var ypos = [];
  var hue = []; 

 function setup() {

 createCanvas(windowWidth, windowHeight);
 colorMode(HSB,360,100,100);
 noStroke();

  for( var i = 0 ; i < bubbleNb ; i++){
  xpos[i] = random(bubbleDiam, windowWidth - bubbleDiam);
  ypos[i] = random(bubbleDiam, windowHeight - bubbleDiam);
  hue[i] = random(360);
  }      
}

function draw() {
 var bri = map(mouseY,0,displayHeight, 60,100);
 var vary = map(mouseX,0,displayWidth,-60,60);

  for( var i = 0 ; i < bubbleNb ; i++){
    fill(hue[i] + vary, 80,bri);
    ellipse(xpos[i],ypos[i],bubbleDiam,bubbleDiam, 100);
}

}

but there is a strong problem of aliasing as you can see

temp-bubbles

how can I have beautiful circles in P5js ?

thanks

var y,x;
var sliderx,slidery;
const GoldenRatio = (1 + Math.sqrt(5)) / 2;


function setup() {
  createCanvas(1920/3*2,1080/3*2);
  background(255, 204, 0);
  sliderx = createSlider(0,1500,1200,1);
  console.log(x);
  console.log(y);
}

function draw() {
  x = sliderx.value();
  y = x / GoldenRatio;
  noFill();
  rect(1,0,x-2,y);
  GoldenRatioDraw(x,y);
}

function GoldenRatioDraw(x,y){
  if(x>0 && y>0){
  push();
  translate(y,y);
  line(0,0,0,-y);
  arc(0,-y,y * 2,y * 2,PI/2,PI);
  rotate(3* PI /2);
  translate(x-y);
  GoldenRatioDraw(y,x-y);
  pop();
  }
}

When I change the x value with the slider, I want it to change the dimension of the rectangle not to draw a new one and overlay the old one.(sorry for bad english :) )

Can you help me?

    var chansey;

    function preload() {
       chansey = loadImage("https://"+"image.ibb.co/kZzhax/pzbykg5va9uz.png");
    }
    let robots = [];

    function setup() {
       createCanvas(700, 600);
       background(20);
       for (var i = 0; i < 2; i++) {
          for (var j = 0; j < 2; j++) {
             robots.push(new Robot(i * 500 + 50, j * 400 + 75, 50));
          }
       }
    }

    function draw() {
       //drawing robot army.
       for (let robot of robots) {
          robot.drawRobot();
          robot.chanseyMESSAGE();
       }
       //Chansey
       image(chansey, 290, 250, 100, 100);
       //button "make chansey happy"
       stroke(255);
       fill(0);
       rect(310, 0, 60, 30);
       fill(255);
       textSize(15);
       text("Reset", 320, 20);
    }

    function mousePressed() {
       for (let antennas of robots) {
          antennas.turnOn(mouseX, mouseY);
       }
       //this make Chansey happy
       if (mouseX < 375 && mouseX > 315 && mouseY < 30 && mouseY > 0) {
          for (let colorAntennaReset of robots) {
             colorAntennaReset.b = 1;
             colorAntennaReset.red = 0;
             colorAntennaReset.green = 100;
             colorAntennaReset.blue = 300;
             //so now the chanseyMESSAGE disapear
             colorAntennaReset.chanseyTURN = false;
          }
       }
    }
    class Robot {
       constructor(x, y, t) {
          this.x = x;
          this.y = y;
          this.t = t;
          this.swicherX = this.x + 25 / 50 * this.t;
          this.swicherY = this.y - 15 / 50 * this.t;
          this.swicherRadius = (15 / 50 * this.t) / 2;
          //swicher color
          this.b = 0;
          //roboteyes color
          this.red = 0;
          this.green = 100;
          this.blue = 300;
          //chansey inside robot class...
          this.chanseyTURN = false;
       }
       drawRobot() {
          //stick of the antenna
          stroke(0, 100, 300);
          line(this.x + 2.5 / 5 * this.t, this.y + this.t / 10, this.x + 2.5 / 5 * this.t, this.y - 3 / 5 * this.t);
          //swicher ball turnOn
          stroke(100);
          fill(255, 100, this.b);
          ellipse(this.x + 25 / 50 * this.t, this.y - 15 / 50 * this.t, 15 / 50 * this.t, 15 / 50 * this.t);
          //robot head
          stroke(0);
          fill(0, 0, 150);
          rect(this.x - this.t / 10, this.y + this.t / 5, 60 / 50 * this.t, this.t / 5);
          fill(100);
          rect(this.x, this.y, this.t, 4.5 / 5 * this.t);
          //eyes
          fill(this.red, this.green, this.blue);
          rect(this.x + 9 / 50 * this.t, this.y + this.t / 5, this.t / 5, this.t / 10);
          rect(this.x + 3.2 / 5 * this.t, this.y + 1 / 5 * this.t, this.t / 5, this.t / 10);
          //mouth
          line(this.x + 1 / 5 * this.t, this.y + 3 / 5 * this.t, this.x + 4 / 5 * this.t, this.y + 3 / 5 * this.t);
       }
       turnOn(suicidetryX, suicidetryY) {
          let proxToAntenna = dist(suicidetryX, suicidetryY, this.swicherX, this.swicherY);
          if (proxToAntenna < this.swicherRadius) {
             //changing antenna color
             this.b = 255;
             // changing roboteyes color
             this.red = 255;
             this.green = 50;
             this.blue = 0;
             //making chansey ANGRY ..
             this.chanseyTURN = true;
          }
       }
       chanseyMESSAGE() {
          if (this.chanseyTURN) {
             fill(255);
             textSize(20);
             text("STOP IT", 303, 370);
          } else { //DONT SHOW THE MESSAGE }
       }
    }

I post it in the wrong place the first tme.

Often in the forum we have similar questions:
"Why is the text so blocky?"
"Why these lines are not anti-aliased?"
"Why is this circle almost squarish?"

And when asked, the user shows code looking like:

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

void draw()
{
  stroke(#000055);
  fill(#000055);

  ellipse(width / 2, height / 2, width / 10, height / 10);

  textSize(50);
  text("Blocky\nText", 100, 2 * height / 3);
  textSize(10);
  text("Other\nText", 20, height / 3);

  line(100, 50, 300, 150);
  line(150, 150, 350, 100);
}

If you are an experienced user, you immediately spot the problem, and advise to move the call to background() at the start of draw();

void setup()
{
  size(400, 400);
}

void draw()
{
  background(255);
  stroke(#000055);
  fill(#000055);

  ellipse(width / 2, height / 2, width / 10, height / 10);

  textSize(50);
  text("Blocky\nText", 100, 2 * height / 3);
  textSize(10);
  text("Other\nText", 20, height / 3);

  line(100, 50, 300, 150);
  line(150, 150, 350, 100);
}

In versions before 2.0, adding a call to smooth() helped, but it is the default now.

Why does it makes a difference?

Processing does its drawings in anti-aliased mode: the borders are smoothed by drawing semi-transparent, toned down pixels on the borders, making a nicer transition with the background. draw() is called 60 times per second (by default). It doesn't erase the background if not asked explicitly. So it draws over and over the graphics at the same place. The semi-transparent pixels cumulate on the borders, so they progressively become completely opaque. Hence the blocky look with steps.

Nearly all the Processing sketches (except some special effects playing on the accumulation of graphics) start draw() with a call to background(). There can be exceptions, but they are the done by people understanding deeply how Processing works.

I'm trying to create a map with some 130,000 points from a csv file, and have a tooltip pop up on mouse over with the data. Since there are so many points, redrawing background and the points will take too much time and performance drops. I'm trying to use pgraphics to create another "layer" just for overlays like tooltips and on mouse overs.

for some reason clear() and background(x, x, x, 0) don't clean the pgraphics object. I'm not 100% sure why.

here's the code (based on load save table example code and pgraphics reference):

PGraphics circle;
// An Array of Bubble objects
Bubble[] bubbles;
// A Table object
Table table;

void setup() {
  size(1200, 700);
  loadData();
  circle = createGraphics(100, 100);
}

void draw() {
      //background(255);
  // Display all bubbles


    for (Bubble b : bubbles) {
      b.display();
      b.rollover(mouseX, mouseY);
    }

  textAlign(LEFT);
  fill(0);
  text("Click to add bubbles.", 10, height-10);
}

void loadData() {
  // Load CSV file into a Table object
  // "header" option indicates the file has a header row
  table = loadTable("ged171.csv", "header");

  // The size of the array of Bubble objects is determined by the total number of rows in the CSV
  bubbles = new Bubble[table.getRowCount()]; 

  // You can access iterate over all the rows in a table
  int rowCount = 0;
  for (TableRow row : table.rows()) {
    // You can access the fields via their column name (or index)
    float x = row.getFloat("longitude");
    float y = row.getFloat("latitude");
    float d = row.getFloat("where_prec");
    String n = row.getString("dyad_name");
    // Make a Bubble object out of the data read
    bubbles[rowCount] = new Bubble(x*6+300, height-y*6-350, d, n);
    rowCount++;
  }
}




// A Bubble class

class Bubble {
  float x,y;
  float diameter;
  String name;

  boolean over = false;

  // Create  the Bubble
  Bubble(float x_, float y_, float diameter_, String s) {
    x = x_;
    y = y_;
    diameter = diameter_;
    name = s;
  }

  // CHecking if mouse is over the Bubble
  void rollover(float px, float py) {
    float d = dist(px,py,x,y);
    if (d < diameter/2) {
      over = true; 
    } else {
      over = false;
    }
  }

  // Display the Bubble
  void display() {
    if(frameCount==1){
    noStroke();
    //strokeWeight(2);
    fill(255);
    ellipse(x,y,diameter,diameter);


    }
    if (over) {
      fill(0,0,0,255);
      textAlign(CENTER);
      text(name,x,y+diameter/2+20);
      circle.beginDraw();
      circle.clear();
      circle.endDraw();
      circle.beginDraw();
      circle.background(0,0,0,0);
      circle.ellipse(50, 50, 75, 75);
      circle.endDraw();
      image(circle, x, y);
    }
  }
}

So I'm just getting started with processing and have little knowledge on it. Anyhow, I'm trying the bouncing ball problem and for every time it threatens to go outside the width of the screen the ball will bounce back; I've got that part covered.

Now I want it to not only bounce back and forth, but also change the background color for each time it hits the side.

What I've got so far is:

float ballX; float xspeed = 3;

void setup(){ size(500,400); ballX=0; background(0);

}

void draw(){ fill(255); ellipse(ballX,height/2,24,24);

ballX = ballX + xspeed;

if(ballX>500 || ballX<0){ xspeed=xspeed*-1;

if(ballX>500 || ballX<0){ background(random(255),random(255),random(255)); } }

This was the only way I got the background to stay that random color until the ball hit the opposite wall and changed again. When I had background(0); in void draw it would only flash a color and than turn back to black each time it hit a wall. The only problem I have now is that the ball is traced, just a long streak of white until it hits a wall and changes color.

How can I change this so that it looks normal, without the ball being traced?

I have this code where I put several images (100) and load them, i've managed to load them in my html page. And as expected they all show after each other. How could I make the appear one by one over time. So that every 10 second I get a new image on the same position. All images are the same size. So the centering should not be a problem.

my sketch.js has this for now

let faces = [];
//var canvas;

function preload(){
  for (let i = 0; i < 3; i++) {
    faces[i] = createImg('images/' + i + '.jpg');
  }
}

function setup() {
  createCanvas(800, 900);
  //canvas = createCanvas(window.innerWidth, window.innerHeight);

  // put setup code here
}

function draw() {

  image(faces, 0, 0);
  // put drawing code here
}
/*
window.onresize = function(){
  var w = window.innerWidth;
  var h = window.innerHeight;
  cansvas.size(w,h);

}
*/

It should be like an automated slideshow. 

so i almost got everything but i have one problem when i drag the mouse it draws new points/lines/curves.. but i am asked just to move the original position.

so here is the pastebin for my code till now : https://pastebin.com/EDMYrDVD

i hope i can get some help from you guys cheer.

Thank you

circulo c;
circulo c1;
void setup(){
  size(700,500);
  c = new circulo(30,width-1,0,2,3);
  c1 = new circulo(25,0,height/2,4,5);
}

void draw(){
  background(255);

  c.move();
  c.display();
  c1.move();
  c1.display();
}

class circulo{

  float x;
  float velocidadX;
  float velocidadY;
  float y;
  float d;

  circulo(float diametro, float posX, float posY, float vx, float vy){
    d = diametro;
    x = posX;
    y = posY;
    velocidadX = vx;
    velocidadY = vy;
  }

  void move(){    
      y = y + velocidadY;
      x = x + velocidadX;
  if (x > width){
    velocidadX = -velocidadX;
  }
  if (x < 0){
    velocidadX = -velocidadX;
  } 

  if (y > height){
    velocidadY= -velocidadY;
  }
  if (y < 0){
    velocidadY= -velocidadY;
  }  
 }

  void display(){
  background(10);
  ellipse(x, y, d, d);  
  }

}

`

I’m trying to make a simple shape tool for a program. It works by adding a vertex to a shape when the mouse is clicked.

//array to hold points
var mousepoints = [];



function setup() {
    createCanvas(400,400);
    background(200);
}

function draw() {
 print(mousepoints);   
    fill(20,200,66);
    beginShape();
    for(var i=0; i <mousepoints.length; i = i + 2){
    vertex(mousepoints[i], mousepoints[i+1]);
    }


    endShape();
}

function mouseClicked(){

    append(mousepoints, mouseX);
    append(mousepoints, mouseY);    

}


function keyTyped(){

    //start a new shape

    if(key ==='a'){
    mousepoints.splice(0, mousepoints.length);
    }  
}

The issue i’m facing is that when I make my shape with extrusions such as in the image, there is a fill outside the shape thats appearing(I have marked it in the red circles). Any way to resolve this?

I'm working on a code which if written correctly should be able to print the value of my potentialmeter on processing. And then I dont mean with a flowing colour screen, that I can find on the internet. I want to print on the screen the number of the potentialmeter, and when I turn the wheel it, the number on processing should change.

I think my code does connect to the potentiometer and does print it on processing, but it keeps overwriting, the numbers dont change. It just literally writes over the previous numbers.

My arduino code :

void setup() {
 //initialize the serial communication:
 Serial.begin(9600); } 
void loop() {
 //send the value of analog input 0:
 Serial.println(analogRead(A0));
//wait a bit for the analog-to-digital converter to stabilize after last 
//reading: delay(2); } 

My processing code

 import processing.serial.*;
Serial myPort;
PFont myFont;
float val;
int[] pin_val;
int lf = 10;
boolean received;
float inByte = 0;

void setup() {      

size(325,400);

fill(51,153,255);


rect(10,10,300,150);

myFont = createFont("Arial", 18);

textFont(myFont, 18);

println(Serial.list());

myPort = new Serial (this, Serial.list()[0], 9600);

pin_val = new int[0];

val = 0;

received = false;

}

void draw()

{
textSize(30);

fill(255,0,0);

textAlign(CENTER);

textFont(myFont, 18);

text("received:   "+inByte, 160,50 );                                                             //This is where I believe my fault is.
fill(255,255,255);

ellipse(162.5,260,80,80);
}

void serialEvent (Serial myPort)
 {
String inString = myPort.readStringUntil('\n');

if (inString!= null) {

// trim off any whitespace;

inString = trim(inString);

//convert to an int and map to the screen height:

inbyte = float(inString);

println(inByte);

inByte = map(inByte, 0, 1023, 0, height);

}
}

I know there is a blue rectangle and a white ellips, but that's part of my homework.

When I press the button again though, the code draws a default stroke weight over the thick pink stoke, without 'erasing' this thick pink stroke, whereas I would like the line to simply go back to: 'white' and 'default thickness of 1'.

Why doesn't the previous colored strokeWeight erase after the mousePressed-event? I'm very thankful for any advice!

Here's the code:

    boolean button = false; 
    int x = 50;
    int y = 50;
    int w = 100;
    int h = 75;

    void setup() {
      size(500,500);

    }

    void draw() {
      if (button) {
        stroke(#E55AD5);        
        strokeWeight(4);
        strokeJoin(ROUND);

    } else {
       stroke(255);
       strokeWeight(1); 

      }

      noFill();               
      rect(x,y,w,h);
    }

    void mousePressed() {
      if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
        button = !button;
      }
    }

Do I need to put the walls in a separate function? What would be the best way around this? Loop or no loop?

Here is the code :

add_library("minim")

x1=100
x2=25
y1=20
y2=25

def setup():
    global sf
    size(200, 200)
    background(255) # white
    minim=Minim(this)
    sf=minim.loadFile("light ping.mp3", 2048)

def draw():
    global x1,y1,x2,y2
    fill(155)
    stroke(1)
    rect(x1, y1, x2, y2)
    noStroke()

    rect(0, 0, 5, height-30)
    rect(0, height-30, width, 5)
    rect(width-5, 0, 5, height-30)
    rect(0,0, width, 5)


def keyReleased():

    global x1, y1, x2, y2
    rect(x1, y1, x2, y2)
    if (key == CODED):
        if (keyCode == LEFT) and x1>=1:
            x1=x1-10
            print(x1)
            background(255)
            rect(x1, y1, x2, y2)


        elif (keyCode == RIGHT) and x1<=169:
            x1=x1+10
            print(x1)
            background(255)
            rect(x1,y1,x2,y2)

        elif (keyCode == UP) and y1>=1:
            y1=y1-10
            print(y1)
            background(255)
            rect(x1,y1,x2,y2)


        elif (keyCode == DOWN) and y1<=169:
            y1=y1+10
            print(y1)
            background(255)
            rect(x1,y1,x2,y2)
        else:
            sf.play()
            sf.rewind()

Hi,
This code tries to move 2 random rectangles from left to right on the canvas.

I've tried to find a bug over chrome debugger, but can't figure it out. It looks like something is wrong inside the object method though. It is my first trial to use objects in p5.js.

I will appreciate for any help, suggestions.

Thanks

I want to draw a circle when the mouse is clicked at mouseX, mouseY but it doesn't seem to work. Can you explain why?

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(200);
}

function mousePressed() {
    ellipse(mouseX, mouseY, 180);
}

I have been trying to google and search the forums for an answer. I did find a KahnAcademy answer which is pretty much the same code but they're using processing.js.

`void setup(){
  size(1200, 1200);
  frameRate(30);
}

void draw(){
   background(255);
  //background(random(255), random(255), random(255));
}

void mouseDragged() {
  stroke(random(255), random(255), random(255));
  strokeWeight(random(20));
  line(pmouseX, pmouseY, mouseX, mouseY);
}`

The issue I'm having is with the background in draw(). I do want the background color to continuously load, but I also want the background to change to a new color each time some event is triggered (preferably a mouse release), and continuously load only that color until another trigger occurs. Right now I have the background just set to white.

So to reiterate the program logic:

1)Program starts with background continuously running initial color.

2)Mouse pressed and dragged creating colorful streak.

3)Mouse released triggering background change to new random color.

4)Background continuously runs the new random color.

5)Back to (2).

I have a simple setup where a circle follows the mouse pointer, using the standard 'easing' technique. I keep redrawing the 'background' of the canvas while successively increasing the x & y coords of the circle, in each call of the 'draw' function. The background of the canvas has been set as 'red'.

Now, I simply want to make the background of the canvas disappear (ie, become transparent) after a certain number of seconds. The problem is, when I set the background as transparent ('rgba(255, 255, 255, 0)'), the circle instead of following the mouse, starts to draw itself over like a thick line. This is equivalent to not calling the 'background' function inside the 'draw' function.

Not sure what I am doing wrong here. PS - I don't want a white background, I want a transparent background.

PImage bg;
PImage bg2;

void setup() {
framerate(10);
size(720, 720);
bg = loadImage("bg.jpg");
bg2 = loadImage("bg22.jpg");
}
void draw() {
background(bg);
float X = random(60);
if(X == 1) {
background(bg2);
}
}

PImage sourceImg;
int dw, dh;

void setup () {
  sourceImg = loadImage("test2.jpg");
  surface.setResizable(true);
  dw = sourceImg.width;
  dh = sourceImg.height;
  surface.setSize(dw, dh);
  background(sourceImg); //HERE IT GIVES ME THE ERROR
}

void draw() {
  //background(sourceImg); //HERE IT WORKS
}

I don't know how to fix this. I need the background image to be drawn one time at the start of the program. What does that error mean?

Thx in advance!

PImage img = loadImage("background.jpg"); //a 100x100 background image.
size(100,100);
background(img);

However, since size() does not take in variables, how are we suppose to define a background with variable dimensions?

I have tested with the surface.setSize() function but it does not see to work.

Example:

PImage img = loadImage("background.jpg"); //a 100x100 background image.
surface.setSize(img.width,img.height);
background(img);

I'm trying to display some text in the p5js canvas but no matter what I do, the texts just look very fuzzy and distorted. Taking the unrelated stuff away, here's my code for my text.

var font;
var font_bold;

function preload() {
    font = loadFont('assets/fonts/Open_Sans/OpenSans-Regular.ttf');
    font_bold = loadFont('assets/fonts/Open_Sans/OpenSans-Bold.ttf');
}

function setup() {
    createCanvas(810, 620);
    //etc...
}

function draw() {
    graph(graphPoint[0], graphPoint[1], graphHeight, graphWidth);
}

function graph(graph_x,
    graph_y,
    graph_h,
    graph_w) {

    textFont(font_bold);
    fill(textColor);
    text("AffordanceViz", 30,
    40);
    textFont(font);
    textSize(20);
    // etc...
};

I'm really stuck, help would be greatly appreciated :)

Best, -J

void setup() {
  size (600, 400);
  loadPixels();
  noStroke();
}

void draw() {
}

void circle_pixels(int cx, int cy, float rad, color c) {
  for (int x=0; x<600; x++) {
    for (int y=0; y<400; y++) {
      int idx = y*600+x;
      if (sq(x-cx) + sq(y-cy) <= sq(rad)) {
        pixels[idx] = c;
      }
    }
  }
  updatePixels();
}

void circle(int cx, int cy, float rad, color c) {
  fill(c);
  ellipse(cx, cy, rad, rad);
}

void mouseClicked() {
  background(128);
  color rand_color = color(int(random(255)), int(random(255)), int(random(255)));
  // This doesn't work. Old circles stick around.
  circle_pixels(300, 200, random(300), rand_color);
  // This works. Only shows one circle at once.
  //circle(300, 200, random(300), rand_color);
}

Can someone help me understand the difference in behaviour here?

If I am doing pixel manipulation, is the recommended way to clear the display just to set pixels[x,y] to grey for each (x,y) coordinate?

looking for a algorithm that can detect what type of shape has or are being drawn in the window using the mouse? i would like to learn how to detect weather a circle has been drawn and if a line has been drawn from the middle of the screen? off set-it to either side of the screen on X or Y but starting in from home ? (middle of screen) "unless its a circle"

i need to do some IF statements saying to do something IF any of those conditions has been made

this is the code i came up with but some how its not working out for me what i wanted was for the background to be black and only turn red if i drag mouse to either side of the window "x" (left or right) and blue if i go to either side of the window "y" ( up or down ) i tried other logical operators such as || and && NOPE no luck

void setup() {
size(800, 360);
}

void draw() {
background(0);

if (mouseX > 499) {
background(255, 0, 0);

} else if (mouseX > 299) {
background(255, 0, 0);

}

if (mouseY > 266) {
background(0, 0, 255);

} else if (mouseY > 100) {
background(0, 0, 255);

}


stroke(255);
line(300, 0, 300, height);// X Left
line(500, 0, 500, height);// X Right
line(-30000, 175, 30000, height);// Y Top
line(-30000, -175, 30000, height);// Y Bottom
}  

I am sure that this question has been ask before. I had really tried to dig in (forum, friends) but I am still stuck. I think it is a very simple thing and more a misunderstanding. By the way sorry about my poor english.

I'm doing an animation like a twill fabric machine. Two objects go and goes leaving a colored "string" behind. Right to left, top o bottom. The color can be set with 'b' and 'n'. We can freeze with a press mouse. All is perfectly fine, by I would like set the background by a key (here 'c' and 'v', black or white), but it does not work, the background seems to run over the previous drewn string. I tried by placing a rectangle at level -1, float, Matrix etc. nothing is working. I think it is a lack of logic P5 comprehension Thanks a lot, have a nice day

int x;
int y;
int deplaceX;
int deplaceY;
int changementX = 1;
float fond = 255;
int v=585; //X
int w=585; //Y
int deplaceV;
int deplaceW;
int f;


void setup(){
  size(600,600); 
  noStroke(); 
 background(f); 
}

void draw(){
  smooth();

 if ( key == 'f')  {
  f = 255; 
}


//FOND

/*background(fond);
  fond = changementX;

  if ( key == 'v') {

 changementX= 255;
}

  if ( key == 'c')  {
  changementX = 0;
}*/


//FORMES
  if ( key == 'n') fill(random(100,250),0,0);
  if ( key == 'b') fill(0,0, random(170,250));
  ellipse(x, y, 15, 15);
  rect(v, w, 15, 15);



///DESCEND CERCLE

  x=x+deplaceX+3;
  w=w+deplaceW-3;

if (x>width)
{deplaceX= -20; //retour
y=y+20; //à la ligne
}

if(x<20)
{
 deplaceX=1;
}

///VERSGAUCHE CARRE

if (w<1)
{deplaceW= 20;
v=v-20;
}

if(w>560)
{
deplaceW=-1;
}



}

//COMMANDES SOURIS
void mousePressed() {
  noLoop();  
}

void mouseReleased() {
  loop(); 
}

Any idea on how to fix this? Or do I need my eyes checked? Thanks!

PImage cir;
    void setup() {
      size(400, 400);


      background(255);
      for(int x = 0; x < 100; x++)
      {
        PGraphics pg = createGraphics(200,200);
        pg.beginDraw();
        pg.background(255,255,255,0);
        pg.fill(random(255), random(255), random(255));
        pg.noStroke();
        pg.ellipse(100,100,50,50);
        pg.filter(BLUR,5);
        pg.endDraw();
        cir = pg.get();
        imageMode(CENTER);
        image( cir, random(width), random(height));
       }
        println("done");
    }
    void draw() {

    }