2

I created a program to change the greyscale value of the background by tracking the mouseX position and mapping it unto the greyscale range, so that when I move the mouse left and right the color changes from black to white respectively.

I want to track the greyscale value as I move the mouse about, by calling the print() command upon clicking the mouse using function mousePressed()

When I run the program, the background color changes exactly as intended, meaning that the variable z is being calculated just fine, yet upon mouse click nothing prints and an error message is received: "p5.js says: There's an error due to "z" not being defined in the current scope."

WHAT I KNOW:

  • tracking mouseX by printing it to console with print(), upon mouse click using function mousePressed() works fine, as I had used it successfully in a different program I made. even just switching the variable z inside the print() command to mouseX works.

WHAT ELSE I TRIED:

  • I created a new variable, set its value to z and tried printing the new variable... didnt work.
  • I mapped the size of the canvas to the greyscale range (0-255) manually by division of the two numbers, and multiplied that by mouseX variable name - ratio. when I tried to print ratio the same problem occurred.

WHAT DO I WANT AN ANSWER TO?:

  1. Why does this error occur upon calling either the mapped variable, and the manually calculated one?
  2. How can I make this idea of clicking at any given mouse position, to receive the current greyscale value work? (preferably without calling any straightforward function like background.color or something)
  3. This is my first question on this website and I tried to make it as readable as possible. I would like to receive some feedback on my question, was it easy to understand? was it too descriptive? and whatever else you might see appropriate and helpful for further question uploading.

CODE: https://editor.p5js.org/KaliPali/sketches/uVx_T9kH5

var frame = {  //this is used to save the canvas size and use it
  x: 600,
  y: 400
}


function setup() {
  createCanvas(frame.x, frame.y);
}

function draw() {
  var z = map(mouseX, 0, frame.x, 0, 255) // first attempt. doesnt work
  //var ratio = mouseX*255/frame.x; //manual mapping attempt. doesnt work
  background(z);
  rectMode(CENTER)
  rect(mouseX,200,10,60)
}

function mousePressed() {
print('greyscale value is: ' + z)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
Dominique Fortin
  • 2,212
  • 15
  • 20
Constructed
  • 21
  • 2
  • 1
    *some feedback on my question* Better presented than the vast majority of new questions we see, thanks! :) – CertainPerformance Sep 09 '20 at 17:06
  • 2
    A variable name which is declared can only be seen by other statements in its current scope and descendant blocks. The problem here is that you declare `z` inside your `draw` function (which means that `z` is visible everywhere inside `draw`), but nothing outside the function can see the variable name, so `mousePressed` can't see the `z` variable. You can fix it by declaring `z` outside the function, so that both `draw` and `mousePressed` can see it: `var z; function draw() { z = map(...);` – CertainPerformance Sep 09 '20 at 17:10

0 Answers0