Блог

Главная - Вопросы по программированию - Я не могу понять, как заставить эти переменные цвета работать в функции рисования

Я не могу понять, как заставить эти переменные цвета работать в функции рисования

#javascript #p5.js

Вопрос:

Я пытался использовать встроенные функции в p5.js но я не могу понять, что я делаю неправильно, переменная col не будет назначаться moon.яркость, скорее луна всегда белая, когда я ее просматриваю, я назначил своим переменным col и dor перед функцией настройки и вызвал их в функции настройки, прежде чем инициализировать переменную Moon, в полной потере здесь, новичок в использовании p5.js так что любая помощь о том, где я ошибаюсь, была бы признательна

 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 (i.e. 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>

Ответ №1:

Здесь есть две проблемы:

  1. В JavaScript выражение (1, 2, 3) не создает массив, или вектор, или кортеж, или что-либо, что может быть использовано для представления цвета. Оператор запятой вычисляет выражение слева, и независимо от значения этого выражения он вычисляет выражение справа.
  2. В p5.js map() функция не работает с цветами, она работает только с числами. Если вы работаете с цветами, вам нужно использовать 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 R G 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 (i.e. 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>

Комментарии:

1. Здравствуйте, большое спасибо за помощь, сначала я был в замешательстве, но, посмотрев на ваши комментарии в коде, теперь я все хорошо понял 🙂 продолжу узнавать больше. Еще раз спасибо.

Метки: ,