Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

226
Views
how to use the 'map' function using Brackets and p5.js?

I'm currently taking a course on intro to computer programming. It's an online course and doesn't have much help when you're stuck.
I'm using Brackets and p5.js. I unfortunately don't know how to use the map function, I've tried different possibilities, but so far I haven't been able to solve the question below:

When the mouse button is pressed:
    - Use the 'random' function to produce random values ranging from 2 to 14.
    - Assign the output to Secure_vault_key0

    When the mouse button is released:
    - Use the 'random' function to produce random values ranging from 2 to 8.
    - Assign the output to Secure_vault_key1

    When any key is pressed:
    - Make Secure_vault_key2 equal to the value of 'key'

    When the mouse button is pressed:
    - Use the 'map' function to scale mouseX to values ranging from 14 to 77.
    - Assign the output to Secure_vault_key3

    When the mouse button is pressed:
    - Use the 'map' function to scale mouseY to values ranging from 22 to 76.
    - Assign the output to Secure_vault_key4

    Whilst the mouse is being dragged:
    - Use the 'map' function to scale mouseX to values ranging from 14 to 80.
    - Assign the output to Secure_vault_key5



This time you'll need to create the relevant event handlers yourself.

There are many possible ways of investigating this case, but you
should use ONLY the following commands:

    - The assignment operator aka. the equals sign !
    - mouseX, mouseY
    - key, keyCode
    - random
    - map

*/

//declare the variables

var Secure_vault_key0;
var Secure_vault_key1;
var Secure_vault_key2;
var Secure_vault_key3;
var Secure_vault_key4;
var Secure_vault_key5;


function preload()
{
    //IMAGES WILL BE LOADED HERE

}

function setup()
{
    createCanvas(512,512);

    //initialise the variables
    Secure_vault_key0 = 0;
    Secure_vault_key1 = "";
    Secure_vault_key2 = "";
    Secure_vault_key3 = 0;
    Secure_vault_key4 = 0;
    Secure_vault_key5 = 0;

}

///////////////////EVENT HANDLERS///////////////////

//Create event handlers here to open the safe ...




function mouseDragged()

 {
   console.log("mouseDragged", mouseX, mouseY);
     
     Secure_vault_key5 = map(mouseX, 14, 80);
   
                            }



function mousePressed()    
 
 {   
    console.log("mousePressed");
     
     Secure_vault_key0 = random(2,14);
     Secure_vault_key3 = map(mouseX, 14, 76);
                                    }

function keyPressed()    
 
 {   
    console.log("keyPressed");
     
     Secure_vault_key2 = key;
     
     
                                    }

function mouseRealesed()

 {
   console.log("mouseReleased");
     
     Secure_vault_key1 = random(2,8);
   
               
                            }


///////////////DO NOT CHANGE CODE BELOW THIS POINT///////////////////
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Check out the p5.js reference page for map() : https://p5js.org/reference/#/p5/map

It looks like you're only using three parameters in your map functions, and it requires five (with an optional sixth parameter). The five necessary parameters are as follows (in this order):

  1. variable you want to map the value of (in your case mouseX)
  2. the current minimum of that value (if you're working with mouseX, you most likely want to use zero)
  3. the current maximum of that value (again, if you're working with mouseX, you probably want to use the width of your canvas here, which you can do using the built in width variable or hardcoding in the value)
  4. the new minimum value you want to be stored in one of your Secure_vault variables
  5. the new maximum value you want

It might seem silly or redundant that you need to specify the current maximum and minimum of a built-in variable like mouseX, but it's just one of those programming things where the computer demands as much explicit instruction as possible in order to properly execute your instructions.

Look at the second example on the reference page linked above for a good example of using the map() function with mouseX. And if you're going to be working in p5.js beyond this project these reference pages are a really great place to look for answers to all kinds of questions!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!