It won't select colors or stroke weight when I make the draw-program only draw in a specific area

Processing Coding Questions
1

I am trying to make a drawing program where it only draws in a rectangle made in setup. I want to still be able to use my color, size, and clearing ability that I made, but I can’t figure it out. Any tips would be great.

// Please note that I used heavy inspiration and help from this users own drawing program to create my own: https://www.openprocessing.org/sketch/26614/ by Basil Vendryes 

//The folowing program is a very simple drawing program. You can press you mouse key and you will be able to draw a line that follows the mouse
//you can also cange the color of the line, and clear the canvas instantly. You can also press any key on your keyboard and be able to draw an contiuous streem of circles. 

float x;
float y;

color red = color(255,0,0);
color green= color(0, 255, 0);
color blue= color(0, 0, 255);
color yellow= color(247, 240, 0);
color orange= color(247, 112, 0);
color violet= color(110, 0, 220);
color blueGreen= color(0, 247, 146);
color yellowGreen= color(157, 250, 0);
color pink= color(255, 28, 97);
color yellowOrange= color(255, 159, 3);
color white= color(255);
color black= color(0);
color rand = color(random(255));

float drawX;
float drawY;

float mainStroke= 1;


void setup(){
    
  
  size(2000,2000);
  smooth();
  background(255);
  
     fill(255);
    strokeWeight(4);
    rect(500,400,1000,1300);
    
}


void draw(){

colors();
  
  canvas();
  
  //I will make the options for different sizes to draw and the clearing option for the canavas as a rectangle 
   line(1550, 30, 1650, 30);
  strokeWeight(4);
  line(1550, 50, 1650, 50);
  strokeWeight(8);
  line(1550, 80, 1650, 80);
  strokeWeight(3);
  fill(255);
  rect(900, 10, 50, 50);
  
circleOpt(mouseX, mouseY);

  
}


  


void colors(){
  //The following code is used to make the boxes for my colors and the drawings stroke if clicked
    strokeWeight(1);
  fill(red);
  rect(10, 10, 50, 50 );
  strokeWeight(1);
  fill(orange);
  rect(60, 10, 50, 50 );
   strokeWeight(1);
  fill(yellowOrange);
  rect(10, 60, 50, 50 );
     strokeWeight(1);
  fill(yellow);
  rect(60, 60, 50, 50 );
     strokeWeight(1);
  fill(yellowGreen);
  rect(10, 110, 50, 50 );
     strokeWeight(1);
  fill(green);
  rect(60, 110, 50, 50 );
     strokeWeight(1);
  fill(blueGreen);
  rect(10, 160, 50, 50 );
  strokeWeight(1);
  fill(blue);
  rect(60, 160, 50, 50 );
     strokeWeight(1);
  fill(violet);
  rect(10, 210, 50, 50 );
       strokeWeight(1);
  fill(pink);
  rect(60, 210, 50, 50 );
       strokeWeight(1);
  fill(white);
  rect(10, 260, 50, 50 );
       strokeWeight(1);
  fill(black);
  rect(60, 260, 50, 50 );
    strokeWeight(1);
  fill(rand);
  rect(10, 310, 50, 50 );
  
}
//This is the function for my circle drawing tool, when any key is pressed, a circle will be drawn
void circleOpt(float x, float y) {
  if (keyPressed == true){
  ellipse(x,y,50,50);
  
  }
}
//This coding allows the drawing lines color to be altered when one of the sqaures of color is pressed
void colorPick(){
 if(mousePressed) {
    if(mouseX > 10 && mouseX < 60){
      if(mouseY >10 && mouseY < 60){
        stroke(red);
      }
      if(mouseY>60 && mouseY < 110){
        stroke(yellowOrange);
      }
      if(mouseY>110 && mouseY<160){
        stroke(yellowGreen);
      }
      if(mouseY>160 && mouseY<210){
        stroke(blueGreen);
      }
      if(mouseY>210 && mouseY<265){
        stroke(violet);
      }
      if(mouseY>265 && mouseY<315){
        stroke(white);
      }
      if(mouseY>315 && mouseY<365){
        stroke(rand);
      }
    }
    if(mouseX > 60 && mouseX < 110){
      if( mouseY > 10 && mouseY <60){
        stroke(orange);
      }
      if(mouseY > 60 && mouseY < 110){
        stroke(yellow);
      }
      if(mouseY > 110 && mouseY < 160){
        stroke(green);
      }
      if(mouseY >160 && mouseY < 210) {
        stroke(blue);
      }
      if(mouseY > 210 && mouseY <260){
        stroke(pink);
      }
      if(mouseY >260 && mouseY <310){
        stroke(black);
      }
    }
    if(mousePressed){
      if(mouseX > 1550 && mouseX <1650){
        if(mouseY >10 && mouseY <40){
          mainStroke= 1; }
        }
      if(mouseX > 1550 && mouseX <1650){
        if(mouseY >40 && mouseY <70){
          mainStroke= 4; }
      }
      if(mouseX > 1550 && mouseX <1650){
        if(mouseY > 70 && mouseY <100){
          mainStroke= 7;
      }  
    }
    strokeWeight(mainStroke);
    }
  if(mousePressed){
    if(mouseX > 900 && mouseX <950){
      if (mouseY > 10 && mouseY <60){
        background(255);
      }
    }
  }
  if(mousePressed){
  line(mouseX, mouseY, drawX, drawY);
  }
  }
  drawX=mouseX;
  drawY=mouseY;
  }         
  
 //The following function makes the colorPick(); fucntion draw within the rectangle made in setup
  void canvas(){
 
    if(mouseX>500 && mouseX<1500){
      if(mouseY>400 && mouseY<1700){
        colorPick();
      
            
          }

        }
      
    
  }
1 Like
2

Hi there,

Welcome to the forum ! :slight_smile:
First of all please format your code using the </> button in the message editor.

I see one big problem in your code : repetition (you know that programmers hate repetition :grin:)

You see that you have different color buttons that have the same behavior for each colors (when you click it, you change the color).

Instead of writing all the conditions for your buttons (because it’s too much pain and your code is not robust) we use a common concept used in Java and other languages : Object Oriented Programming (https://en.wikipedia.org/wiki/Object-oriented_programming).

In this example, you can declare a ColorButton class :

class ColorButton{
  color c; //The button color
  int x; //x coordinate
  int y; //y coordinate
  int size;

  //The constructor
  ColorButton(color c, int x, int y, int size){
    this.c = c;
    this.x = x;
    this.y = y;
    this.size = size;
  }
}

Basically a class is representing an object and each object has its own properties (here it’s the color, and its position/size).
An object can also have methods, it’s actions that performs modifications or get information on the object.

For example, in order to check if you clicked on the button, you can have the following method inside the class :

boolean isClicked(){
  return (mouseX > x) && (mouseX < x + size) &&
         (mouseY > y) && (mouseY < y + size);
}

So now every button is going to have the same function to check if it has been clicked.

Now in your main program, you can write this :

//If the user pressed the mouse
void mousePressed(){
  if(myButton.isClicked()){
    draw_color = myButton.c;
  }
}

You can follow this tutorial for more informations : https://processing.org/tutorials/objects/
Don’t hesitate if you have more questions.

3 Likes
3

Thank you so very much, you have no idea, how helpful this is for me!! I am still a little confused with the boolean because I keep getting an error in processing, but I am sure I will figure it out!

4

I think josephh posts really is the way to go.

Remark

A remark on your old code though:

colorPick() was called by canvas but inside the if-clause:

if(mouseX>500 && mouseX<1500){
  if(mouseY>400 && mouseY<1700){
    colorPick();
     }
    }

This hindered the mouse on reaching the color selector buttons.

You had this

//The following function makes the colorPick(); fucntion draw within the rectangle made in setup
void canvas(){

if(mouseX>500 && mouseX<1500){
  if(mouseY>400 && mouseY<1700){
    colorPick();
      }
    }
}

My version would be to treat canvas and buttons outside the canvas separately:


void mousePressed() {
  drawX=mouseX;
  drawY=mouseY;
}

//The following function makes the colorPick(); fucntion draw within the rectangle made in setup
void canvas() {
  if (mouseX>500 && mouseX<1500) {
    if (mouseY>400 && mouseY<1700) {
      if (mousePressed) {
        line(mouseX, mouseY, drawX, drawY);       // ON CANVAS
        drawX=mouseX;
        drawY=mouseY;
      }
      return; // leave !!!!!!!
    }
  }
  // outside canvas : 
  colorPick();   // color selector and other buttons 
}//func 
//

Regards, Chrisir

Entire Code



// class-less version


// Please note that I used heavy inspiration and help from this users own drawing program to create my own: https://www.openprocessing.org/sketch/26614/ by Basil Vendryes

// The folowing program is a very simple drawing program. You can press you mouse key and you will be able to draw a line that follows the mouse.

// You can also change the color of the line, and clear the canvas instantly. 
// You can also press any key on your keyboard and be able to draw an contiuous stream of circles.

float x;
float y;

color red = color(255, 0, 0);
color green= color(0, 255, 0);
color blue= color(0, 0, 255);
color yellow= color(247, 240, 0);
color orange= color(247, 112, 0);
color violet= color(110, 0, 220);
color blueGreen= color(0, 247, 146);
color yellowGreen= color(157, 250, 0);
color pink= color(255, 28, 97);
color yellowOrange= color(255, 159, 3);
color white= color(255);
color black= color(0);
color rand = color(random(255));

float drawX;
float drawY;

float mainStroke= 1;

void setup() {

  size(2000, 2000);
  smooth();
  background(255);

  fill(255);
  strokeWeight(4);
  rect(500, 400, 1000, 1300);
}

void draw() {

  // stroke(0); 
  // strokeWeight(1);

  colors();

  canvas();

  //I will make the options for different sizes to draw and the clearing option for the canavas as a rectangle
  line(1550, 30, 1650, 30);
  strokeWeight(4);
  line(1550, 50, 1650, 50);
  strokeWeight(8);
  line(1550, 80, 1650, 80);
  strokeWeight(3);
  fill(255);
  rect(900, 10, 50, 50);

  circleOpt(mouseX, mouseY);
}

void colors() {
  //The following code is used to make the boxes for my colors and the drawings stroke if clicked
  strokeWeight(1);
  fill(red);
  rect(10, 10, 50, 50 );
  strokeWeight(1);
  fill(orange);
  rect(60, 10, 50, 50 );
  strokeWeight(1);
  fill(yellowOrange);
  rect(10, 60, 50, 50 );
  strokeWeight(1);
  fill(yellow);
  rect(60, 60, 50, 50 );
  strokeWeight(1);
  fill(yellowGreen);
  rect(10, 110, 50, 50 );
  strokeWeight(1);
  fill(green);
  rect(60, 110, 50, 50 );
  strokeWeight(1);
  fill(blueGreen);
  rect(10, 160, 50, 50 );
  strokeWeight(1);
  fill(blue);
  rect(60, 160, 50, 50 );
  strokeWeight(1);
  fill(violet);
  rect(10, 210, 50, 50 );
  strokeWeight(1);
  fill(pink);
  rect(60, 210, 50, 50 );
  strokeWeight(1);
  fill(white);
  rect(10, 260, 50, 50 );
  strokeWeight(1);
  fill(black);
  rect(60, 260, 50, 50 );
  strokeWeight(1);
  fill(rand);
  rect(10, 310, 50, 50 );
}

//This is the function for my circle drawing tool, when any key is pressed, a circle will be drawn
void circleOpt(float x, float y) {
  if (keyPressed) {
    ellipse(x, y, 50, 50);
  }
}

//This coding allows the drawing lines color to be altered when one of the sqaures of color is pressed
void colorPick() {
  if (mousePressed) {
    if (mouseX > 10 && mouseX < 60) {
      if (mouseY >10 && mouseY < 60) {
        stroke(red);
      }
      if (mouseY>60 && mouseY < 110) {
        stroke(yellowOrange);
      }
      if (mouseY>110 && mouseY<160) {
        stroke(yellowGreen);
      }
      if (mouseY>160 && mouseY<210) {
        stroke(blueGreen);
      }
      if (mouseY>210 && mouseY<265) {
        stroke(violet);
      }
      if (mouseY>265 && mouseY<315) {
        stroke(white);
      }
      if (mouseY>315 && mouseY<365) {
        stroke(rand);
      }
    }
    if (mouseX > 60 && mouseX < 110) {
      if ( mouseY > 10 && mouseY <60) {
        stroke(orange);
      }
      if (mouseY > 60 && mouseY < 110) {
        stroke(yellow);
      }
      if (mouseY > 110 && mouseY < 160) {
        stroke(green);
      }
      if (mouseY >160 && mouseY < 210) {
        stroke(blue);
      }
      if (mouseY > 210 && mouseY <260) {
        stroke(pink);
      }
      if (mouseY >260 && mouseY <310) {
        stroke(black);
      }
    }
    if (mousePressed) {
      if (mouseX > 1550 && mouseX <1650) {
        if (mouseY >10 && mouseY <40) {
          mainStroke= 1;
        }
      }
      if (mouseX > 1550 && mouseX <1650) {
        if (mouseY >40 && mouseY <70) {
          mainStroke= 4;
        }
      }
      if (mouseX > 1550 && mouseX <1650) {
        if (mouseY > 70 && mouseY <100) {
          mainStroke= 7;
        }
      }
      strokeWeight(mainStroke);
    }
    if (mousePressed) {
      if (mouseX > 900 && mouseX <950) {
        if (mouseY > 10 && mouseY <60) {
          background(255);
        }
      }
    }
    //if (mousePressed) {
    //  line(mouseX, mouseY, drawX, drawY);
    //}
  }
}

void mousePressed() {
  drawX=mouseX;
  drawY=mouseY;
}

//The following function makes the colorPick(); fucntion draw within the rectangle made in setup
void canvas() {

  if (mouseX>500 && mouseX<1500) {
    if (mouseY>400 && mouseY<1700) {
      if (mousePressed) {
        line(mouseX, mouseY, drawX, drawY);
        drawX=mouseX;
        drawY=mouseY;
      }
      return; // leave
    }
  }
  colorPick();
}//func 
//
2 Likes
5

Thank you!!! This is seriously helping me!!

1 Like
6

There are other issues, e.g. with strokeWeight of the 3 lines in the upper right corner

Also, the outline of the buttons changes with the color of the pen. Bad.

Solution

You can both avoid when you store the strokeWeight in an int variable and store the color in a variable penColor.

Then you can say stroke(0); and strokeWeight(1); at start of draw(), draw the buttons and then say :

 color(penColor); 
 strokeWeight(penStrokeWeight);

when you draw on the canvas with the mouse

1 Like
7

Thanks for the tips! I really appreciate it, seriously! I’ve been so stressed about this. I’m still getting some issues with it as when I run the program it will no longer change the color of the stroke size line, but it now won’t select color. I’m sure I can get this figured out!




// class-less version


// Please note that I used heavy inspiration and help from this users own drawing program to create my own: https://www.openprocessing.org/sketch/26614/ by Basil Vendryes

// The folowing program is a very simple drawing program. You can press you mouse key and you will be able to draw a line that follows the mouse.

// You can also change the color of the line, and clear the canvas instantly. 
// You can also press any key on your keyboard and be able to draw an contiuous stream of circles.

float x;
float y;

color red = color(255, 0, 0);
color green= color(0, 255, 0);
color blue= color(0, 0, 255);
color yellow= color(247, 240, 0);
color orange= color(247, 112, 0);
color violet= color(110, 0, 220);
color blueGreen= color(0, 247, 146);
color yellowGreen= color(157, 250, 0);
color pink= color(255, 28, 97);
color yellowOrange= color(255, 159, 3);
color white= color(255);
color black= color(0);
color rand = color(random(255));

float drawX;
float drawY;

float mainStroke= 1;

int penStrokeWeight = 1;
int penColor = 0;
void setup() {

  size(2000, 2000);
  smooth();
  background(255);

//the border for the canvas
  fill(255);
  strokeWeight(4);
  rect(500, 400, 1000, 1300);
  
  rect(0,0,200,500);
  rect(0,0,1800,200);
  

}

void draw() {

  stroke(0);
  strokeWeight(1);
  line(1550, 30, 1650, 30);
  color(penColor); 
 strokeWeight(penStrokeWeight);
  
  // stroke(0); 
  // strokeWeight(1);

  colors();

  canvas();
  


  //I will make the options for different sizes to draw and the clearing option for the canavas as a rectangle
  line(1550, 30, 1650, 30);
  strokeWeight(4);
  line(1550, 50, 1650, 50);
  strokeWeight(8);
  line(1550, 80, 1650, 80);
  strokeWeight(3);
  fill(255);
  rect(900, 10, 50, 50);

  circleOpt(mouseX, mouseY);
}

void colors() {
  //The following code is used to make the boxes for my colors and the drawings stroke if clicked
  strokeWeight(1);
  fill(red);
  rect(10, 10, 50, 50 );
  strokeWeight(1);
  fill(orange);
  rect(60, 10, 50, 50 );
  strokeWeight(1);
  fill(yellowOrange);
  rect(10, 60, 50, 50 );
  strokeWeight(1);
  fill(yellow);
  rect(60, 60, 50, 50 );
  strokeWeight(1);
  fill(yellowGreen);
  rect(10, 110, 50, 50 );
  strokeWeight(1);
  fill(green);
  rect(60, 110, 50, 50 );
  strokeWeight(1);
  fill(blueGreen);
  rect(10, 160, 50, 50 );
  strokeWeight(1);
  fill(blue);
  rect(60, 160, 50, 50 );
  strokeWeight(1);
  fill(violet);
  rect(10, 210, 50, 50 );
  strokeWeight(1);
  fill(pink);
  rect(60, 210, 50, 50 );
  strokeWeight(1);
  fill(white);
  rect(10, 260, 50, 50 );
  strokeWeight(1);
  fill(black);
  rect(60, 260, 50, 50 );
  strokeWeight(1);
  fill(rand);
  rect(10, 310, 50, 50 );
}

//This is the function for my circle drawing tool, when any key is pressed, a circle will be drawn
void circleOpt(float x, float y) {
  if (keyPressed) {
    ellipse(x, y, 50, 50);
  }
}

//This coding allows the drawing lines color to be altered when one of the sqaures of color is pressed
void colorPick() {
  if (mousePressed) {
    if (mouseX > 10 && mouseX < 60) {
      if (mouseY >10 && mouseY < 60) {
        stroke(red);
      }
      if (mouseY>60 && mouseY < 110) {
        stroke(yellowOrange);
      }
      if (mouseY>110 && mouseY<160) {
        stroke(yellowGreen);
      }
      if (mouseY>160 && mouseY<210) {
        stroke(blueGreen);
      }
      if (mouseY>210 && mouseY<265) {
        stroke(violet);
      }
      if (mouseY>265 && mouseY<315) {
        stroke(white);
      }
      if (mouseY>315 && mouseY<365) {
        stroke(rand);
      }
    }
    if (mouseX > 60 && mouseX < 110) {
      if ( mouseY > 10 && mouseY <60) {
        stroke(orange);
      }
      if (mouseY > 60 && mouseY < 110) {
        stroke(yellow);
      }
      if (mouseY > 110 && mouseY < 160) {
        stroke(green);
      }
      if (mouseY >160 && mouseY < 210) {
        stroke(blue);
      }
      if (mouseY > 210 && mouseY <260) {
        stroke(pink);
      }
      if (mouseY >260 && mouseY <310) {
        stroke(black);
      }
    }
    if (mousePressed) {
      if (mouseX > 1550 && mouseX <1650) {
        if (mouseY >10 && mouseY <40) {
          mainStroke= 1;
        }
      }
      if (mouseX > 1550 && mouseX <1650) {
        if (mouseY >40 && mouseY <70) {
          mainStroke= 4;
        }
      }
      if (mouseX > 1550 && mouseX <1650) {
        if (mouseY > 70 && mouseY <100) {
          mainStroke= 7;
        }
      }
      strokeWeight(mainStroke);
    }
    if (mousePressed) {
      if (mouseX > 900 && mouseX <950) {
        if (mouseY > 10 && mouseY <60) {
          background(255);
            fill(255);
  strokeWeight(4);
  rect(500, 400, 1000, 1300);
        }
      }
    }
    //if (mousePressed) {
    //  line(mouseX, mouseY, drawX, drawY);
    //}
  }
}

void mousePressed() {
  drawX=mouseX;
  drawY=mouseY;
}

//The following function makes the colorPick(); fucntion draw within the rectangle made in setup
void canvas() {

  if (mouseX>500 && mouseX<1500) {
    if (mouseY>400 && mouseY<1700) {
      if (mousePressed) {
        line(mouseX, mouseY, drawX, drawY);
        drawX=mouseX;
        drawY=mouseY;

      }
      return; // leave
    }
  }
  colorPick();
}//func 
//
1 Like
8

continued here Stroke weight selection Help

1 Like