P5js funcion map

P5js funcion map

Map

Use the map() function to take any number and scale it to a new number that is more useful for the project that you are working on. For example, use the numbers from the mouse position to control the size or color of a shape. In this example, the mouse’s x-coordinate (numbers between 0 and 360) are scaled to new numbers to define the color and size of a circle.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function setup() {

  createCanvas(640, 400);

  noStroke();

}

function draw() {

  background(0);

  // Scale the mouseX value from 0 to 640 to a range between 0 and 175

  let c = map(mouseX, 0, width, 0, 175);

  // Scale the mouseX value from 0 to 640 to a range between 40 and 300

  let d = map(mouseX, 0, width, 40, 300);

  fill(255, c, 0);

  ellipse(width/2, height/2, d, d);

}

Credits

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•