He estado tratando de usar funciones integradas en p5.js pero no puedo entender qué estoy haciendo mal, la variable col no se asignará a moon.brightness, sino que la luna siempre es blanca cuando la previsualizo, yo asigné mis variables col y dor antes de la función de configuración y las llamé en la función de configuración antes de inicializar la variable Luna, con una pérdida total aquí, nuevo en el uso de p5.js, por lo que agradecería cualquier ayuda sobre dónde me estoy equivocando.
var groundHeight; var mountain1; var mountain2; var tree; var moon; var sun; var darkness; var brightness; var col; var dor; function setup() { cnv = createCanvas(800, 600) //set the groundHeight proportional to the canvas size groundHeight = (height / 3) * 2; //initalise the mountain objects with properties to help draw them to the canvas mountain1 = { x: 400, y: groundHeight, height: 320, width: 230 }; mountain2 = { x: 550, y: groundHeight, height: 200, width: 130 }; //initalise the tree object tree = { x: 150, y: groundHeight + 20, trunkWidth: 40, trunkHeight: 150, canopyWidth: 120, canopyHeight: 100 }; //initalise the sun sun = { x: 150, y: 70, diameter: 80 }; col = (150, 200, 255) dor = (255, 255, 255) //TASK: intialise a moon object with an extra property for brightness moon = { brightness: col, x: 700, y: 70, diameter: 80 }; //set the initial darkness darkness = { x: 800, y: 600, light: col }; } function draw() { //TASK: update the values for the moons brightness, the sun's position and the darkness. //You can either map this to the mouse's location (ie the futher left the mouse is the more daylight) or you can just change the values gradually over time. //draw the sky background(150, 200, 255); noStroke(); //draw the sun fill(255, 255, 0); ellipse(sun.x, sun.y, sun.diameter); sun.y = map(mouseX, 0, 800, 70, 630) fill(moon.brightness) ellipse(moon.x, moon.y, moon.diameter); moon.brightness = map(mouseX, 0, 800, col, dor); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Hay dos problemas aquí:
(1, 2, 3) no crea una matriz, ni un vector, ni una tupla, ni nada que pueda usarse para representar un color. El operador de coma evalúa la expresión de la izquierda y, independientemente del valor de esa expresión, evalúa una expresión de la derecha.map() no funciona con colores, solo funciona con números. Si está trabajando con colores, necesita usar lerpColor() var groundHeight; var mountain1; var mountain2; var tree; var moon; var sun; var col; var dor; function setup() { cnv = createCanvas(800, 600) //set the groundHeight proportional to the canvas size groundHeight = (height / 3) * 2; //initalise the mountain objects with properties to help draw them to the canvas mountain1 = { x: 400, y: groundHeight, height: 320, width: 230 }; mountain2 = { x: 550, y: groundHeight, height: 200, width: 130 }; //initalise the tree object tree = { x: 150, y: groundHeight + 20, trunkWidth: 40, trunkHeight: 150, canopyWidth: 120, canopyHeight: 100 }; //initalise the sun sun = { x: 150, y: 70, diameter: 80 }; // FIXED: Use the color function to create a p5.Color object from RG and B components col = color(150, 200, 255) dor = color(255, 255, 255) //TASK: intialise a moon object with an extra property for brightness moon = { brightness: col, x: 700, y: 70, diameter: 80 }; } function draw() { //TASK: update the values for the moons brightness, the sun's position and the darkness. //You can either map this to the mouse's location (ie the futher left the mouse is the more daylight) or you can just change the values gradually over time. scale //draw the sky background(150, 200, 255); noStroke(); //draw the sun fill(255, 255, 0); ellipse(sun.x, sun.y, sun.diameter); sun.y = map(mouseX, 0, 800, 70, 630) fill(moon.brightness) ellipse(moon.x, moon.y, moon.diameter); // FIXED: when interpolating between two colors, use lerpColor instead of map moon.brightness = lerpColor(col, dor, mouseX / width); } html, body { margin: 0; padding: 0; } canvas { transform: scale(0.25); transform-origin: top left; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>