Question

In java processing 3, write a program that draws a circle. The center of the circle would be first point on the canvas where the mouse is pressed on it. While the mouse is pressed, the circle can be drawn by moving the mouse cursor farther than the first point that mouse was pressed (circle center). As soon as the code is run, a timer at the bottom of the canvas should start working. Also, the radius of the circle cannot be more than 0.1 of the width of the canvas. If the player draws a large circle, the message "This is too big!" will be shown on the canvas. Still player can fix it and get back to game by moving the mouse towards the center of the circle (the point that first mouse was pressed on) and resume the game.

Answer 1

Answer:-

Width and height--

The width and height variables always contain a value that corresponds to the width and height of your sketch (in pixels). Generally, this will be the same as the value that you specify in the createCanvas() function.

The width and height variables are useful because they allow you to make sketches that take into account the size of the canvas.

Mouse position--

Processing provides two special variables, mouseX and mouseY, that contain the X and Y coordinates of the mouse cursor in the current frame. Remember that the code in draw() is running over and over again, very quickly: up to sixty times per second. A bit of pre-written code that is a part of the p5.js library calls this function over and over for you, and each time it does so, it updates the mouseX and mouseY variables with the current position of the mouse cursor on the screen. These two variables together make it easy to make your sketch react to user input in the form of mouse movement.

Here’s a quick example sketch that simply draws a circle underneath the current mouse position:

function setup() { createCanvas(400, 400); } function draw() { background(50); noFill(); stroke(255); strokeWeight(8); ellipse(mouseX, mouseY, 45, 45); }

Of course, you’re not limited to using the mouseX and mouseY to control the position of the elements that you draw. Here’s a sketch that uses the mouseX value to control the width of the stroke, and the mouseY value to control the size of the ellipse:

function setup() { createCanvas(400, 400); } function draw() { background(50); noFill(); stroke(255); strokeWeight(mouseX / 10); ellipse(200, 200, mouseY, mouseY); }

Mouse clicks--

Processing includes a special built-in variable called mouseIsPressed which holds the value true if the user is currently holding the mouse, and false otherwise. You can use this to make your sketch do different things depending on whether or not the user is holding down the mouse button.

function setup() { createCanvas(400, 400); } function draw() { background(50); noFill(); stroke(255); strokeWeight(8); if (mouseIsPressed) { ellipse(200, 200, 300, 300); } }