Stroke weight selection

Processing Coding Questions
1

I’m trying to make a drawing program with a tool bar, buttons, and a canvas. So far I got a lot done with help from everyone here on this forum, however, when I try click on the 2 line of my 3 line button, it draws the line with little circles, and draws outside of the canvas. Can someone help me figure out how to make it so that when I click on the 3 lines the stroke weight of the drawing line changes from 1, 4 and 7, and only draws within the canvas?




// 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(200);

  //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);

  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) {

          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 
//
2 Likes
2

Prior to posting hit ctrl-t in processing

This gives you auto-indent

Now post

Select entire code section with mouse

Hit the <\> in the command bar in the post

2 Likes
3

Thanks! Did that! Sorry about that!

2 Likes
4

Here the drawing takes place

Before line() say strokeWeight(mainStroke);

Set mainStroke where necessary

1 Like
5

Hello,

I worked a bit on this.

But I have not finished it. What you need to do: You need to set mainColor correctly when a color button is pressed.

  • I did this only for the colors red and yellowOrange. Please do the remaining buttons.

Explanation

  • Similar to mainStroke, mainColor is given the information of the current color and then used later, when we draw on the canvas. They store the information.
  • This is useful because then the outline of the buttons can still be black and strokeWeight 1.
  • When we would change color and strokeWeight immediately when the mouse is pressed on a button, we would change the button layout too. Bad. Instead we store the information and use it later.

Chrisir

Full Code


// non OOP 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 following 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 continuous 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;
color mainColor = color(0); 

void setup() {

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

  //the border for the canvas
  fill(255);

  strokeWeight(4);
  rect(500, 400, 1000, 1300);

  //rect(0, 0, 200, 500);
  //rect(0, 0, 1800, 200);
}// setup

void draw() {

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

  colorButtons();

  checkMouseForCanvasOrButtons();

  //I will make the options for different sizes to draw and the clearing option for the canvas as a rectangle
  stroke(0);
  strokeWeight(1);
  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);
}// draw

//---------------------------------------------------------------------------------------------------------------------
// called from draw()

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

  if (mouseX>500 && mouseX<1500) {
    if (mouseY>400 && mouseY<1700) {
      if (mousePressed) {
        // here we draw on canvas
        strokeWeight(mainStroke);
        stroke(mainColor); 
        line(mouseX, mouseY, drawX, drawY);
        drawX=mouseX;
        drawY=mouseY;
      }
      return; // leave
    }
  }
  colorPick();
}//func 

void colorButtons() {
  //The following code is used to make the boxes for my colors and the drawings stroke if clicked

  stroke(0);
  strokeWeight(1);

  fill(red);
  rect(10, 10, 50, 50 );

  fill(orange);
  rect(60, 10, 50, 50 );

  fill(yellowOrange);
  rect(10, 60, 50, 50 );

  fill(yellow);
  rect(60, 60, 50, 50 );

  fill(yellowGreen);
  rect(10, 110, 50, 50 );

  fill(green);
  rect(60, 110, 50, 50 );

  fill(blueGreen);
  rect(10, 160, 50, 50 );

  fill(blue);
  rect(60, 160, 50, 50 );

  fill(violet);
  rect(10, 210, 50, 50 );

  fill(pink);
  rect(60, 210, 50, 50 );

  fill(white);
  rect(10, 260, 50, 50 );

  fill(black);
  rect(60, 260, 50, 50 );

  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) {
    fill(mainColor);
    ellipse(x, y, 50, 50);
  }
}

// ------------------------------------------------------------------------------------------
// Other functions 

//This coding allows the drawing lines color to be altered when one of the squares of color is pressed
void colorPick() {
  if (mousePressed) {
    if (mouseX > 10 && mouseX < 60) {
      if (mouseY >10 && mouseY < 60) {
        mainColor = red; 
        //stroke(red);
      }
      if (mouseY>60 && mouseY < 110) {
        mainColor=yellowOrange; 
        //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);
      }
    }

    // Check 3 strokeWeight buttons 
    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;
        }
      }
    }

    // reset / clear canvas 
    if (mousePressed) {
      if (mouseX > 900 && mouseX <950) {
        if (mouseY > 10 && mouseY <60) {
          fill(255);
          strokeWeight(4);
          rect(500, 400, 1000, 1300);
        }
      }
    }
  }
}

void mousePressed() {
  if (mouseX>500 && mouseX<1500) {
    if (mouseY>400 && mouseY<1700) {
      drawX=mouseX;
      drawY=mouseY;
    }
  }
}//func
//
//End of Sketch
3 Likes
6

Dude you are so amazing!!! Do you have any tips or anything you think I need to study up on so that way I can figure this out better myself?

1 Like
7

It’s a matter of practice and training. Not reading but doing.

The principle to receive input, store it (as opposed to use it immediately like in fill(red)) (this is processing it) and use it later when needed (output) is probably very essential.

  • Input - Processing - Output.

There is also a tutorial anatomy of a sketch: https://www.processing.org/tutorials/

Read the first three textual tutorials, do the examples therein.

OOP (object oriented programming)

You could start by reading the tutorial about objects (https://www.processing.org/tutorials/) and make a class Button and an array of buttons as has been suggested by josephh.

See also https://github.com/Kango/Processing-snippets/wiki/Variables,-Arrays-and-object-oriented-programming

When you make a class Button, you could use a variable int type 0 or 1 to tell whether the button is

  • a rect (colors and clear canvas button) or
  • a stroke Weight button

Details: commandID

You could also say each button has an ID.
When a button is pressed it returns its ID.
You need to evaluate the ID.

My idea:

  • You give the clear canvas button ID 1000.
  • You give the Stroke Weight buttons 300,301,302.
  • Give the color buttons ID 0,1,2,3…!

You put the colors in an array like

color[] colorsList = {
red,
green,
blue,
....
...

};

Now the trick: Give the color buttons ID 0,1,2,3… matching the position in this array.

Then instead of evaluating each color button separately you can just say mainColor = colorsList [ commandID ]; . Very nice. You’ll understand what I am talking about once you get there.



if (commandID==1000) {
  // clear canvas
} else if (commandID==300) {
  mainStroke=1;
} else if (commandID==301) {
  mainStroke=4;
} else if (commandID==302) {
  mainStroke=7;
} else if (commandID>=0 && commandID<18 ) {  // check 18 ??? 
  mainColor = colorsList [ commandID ];
} else {
  //Error
  println("Error 1925: unknown commandID " 
    + commandID ); 
  exit();
}

Chrisir

4 Likes