Creating A Toolbar & Canvas Sketch

Thanks for your patience, as I am a total beginner. I NEED to use the constrain() function, even though I would like to use an easier way, that is what is required and what I am trying to apply for this exercise. I have referenced the reference library, but I obviously am not applying its function correctly.

I have been trying to trouble shoot, but my drawing tool draws in the wrong area, and the buttons to not initiate correctly. Any help on CONSTRAIN() and buttons would be greatly appreciated, per my original question.

Updated code - used auto format on Processing



float a = 0;
int y = 0;
int grow = 0;

void setup () {
  size (620, 440); // size of window
  background(120); // background set to gray
  strokeWeight(0); // Stroke set to 0
  frameRate(20); // FrameRate speed
  rectMode(CORNER);
}

void draw() {

  // line thickness
  strokeWeight(4); 
  line(100, y, 100, 440); // line divides window into two sections: toolbar and canvas

  // toolbar buttons
  rect(20, 50, 50, 30); // button 1
  rect(20, 100, 50, 30); // button 2
  rect(20, 150, 50, 30); // button 3

  // constrain drawing tool to rect - "canvas" 
  float mx = constrain(mouseX, 100, 440);

  //Drawing tool activates if mouse is pressed inside canvas
  if (mousePressed) {
    ellipse(mouseX, mouseY, 50, 50);
  }
  
}

// Buttons Fuctions
void mousePressed() {

  // button 1 - Resets a blank 'canvas'
  if (mousePressed)
  {
    if (mouseX >= 20 && mouseX <= 50)
    {
      background(120);
    }
  }

  // button 2 - Color of drawing tool changes
  if (mousePressed)
  {
    if (mouseX >= 20 && mouseX <= 150)
    {
      fill( random(255), random(255), random(255), random(255));
    }
  }

  // Button three: Drawing tool grows
  if (mousePressed)
  {
    if (mouseX >= 20 && mouseX <= 50)
    {
      if (mousePressed) {
    float x1 = map(cos (a), 1, 200, 300, 500);
    float strokeweight = random(30); // stroke thickness varies 
    float diameter= strokeweight + grow;   // shape grows the long it is pressed
    strokeWeight(strokeweight);
    ellipse(mouseX, mouseY, x1, diameter);
    if (grow < 200) grow += 30;
  }
    }
  }
}
1 Like