Hi All,
I need help, my code is way off. What is the best way to format a sketch that uses the constrain() function to divide the window into two parts; one being a toolbar and the other being a canvas? I need to limit the mouse function based on its X Y locations, formatting the mouse to draw in the ‘canvas’ section only, and click and initiate the buttons in the toolbar section.
I want to use variables and conditional statements for buttons - located in the toolbar - that will change the drawing tool function; such as “clear background” “change color” “change size”.
Right now drawing tool is not limited to activate the only inside the canvas section (the ellipse follows over to the buttons), and the button functions are not constrained / or initiated to the rects. Bear with me, but here is my code! Any thoughts are appreciated on what I am missing!
Original code:
float mx;
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); rect(100, y, 520, 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; } } } } float mx; 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); rect(100, y, 520, 440); //Drawing tool activates if mouse is pressed inside canvas if (mousePressed) { ellipse(mouseX, mouseY, 50, 50); } //Drawing tool function float x1 = map(cos (a), 1, 200, 300, 500); // When mouse is pressed drawing tool is initiated if (mousePressed) { 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; } } // 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) { grow = 0; } } }
