p5.js map () динамически изменяемая переменная - PullRequest
Новая
       5

p5.js map () динамически изменяемая переменная

1 голос
/ 10 октября 2019

У меня есть 2 вопроса, которые вращаются вокруг переменных blueHueDecrease и blueHueIncrease ниже. Этот код изменяет цвет фона холста относительно положения курсора на холсте. Этот код должен выполнять три вещи: 1) иметь blueHueDecrease уменьшение с 255 до 0 с позиции пикселя 0 до width/2 на холсте и иметь blueHueIncrease равное 0 во всем этом диапазоне, 2) иметь blueHueDecrease и blueHueIncrease равно 0 при width/2 на холсте и 3) имеет blueHueDecrease равное 0 от положения пикселя width/2 до ширины на холсте и blueHueIncrease увеличивается от 0 до 255 в этом диапазоне. 

var blueStartingValue;
var blueHueDecrease;
var blueHueIncrease;

function setup()
{
    createCanvas(800, 600);

    blueStartingValue = 255;
    blueHueDecrease = 0;
    blueHueIncrease = 0;  
}

function draw()
{
    blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0); //decreases blue from 255 to 0 within first half of canvas width
    blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255); //increases blue from 0 to 255 within second half of canvas width, blueHueDecrease should equal 0 through out this range
    console.log("decrease: ",blueHueDecrease);
    console.log("increase: ",blueHueIncrease);
    background(0,0, max(blueHueDecrease,blueHueIncrease));
}

Когда у меня есть две строки из приведенной выше функции настройки как таковые: 

blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0); //decreases blue from 255 to 0 within first half of canvas width
blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255); //increases blue from 0 to 255 within second half of canvas width, blueHueDecrease should equal 0 through out this range

blueHueIncrease должен изменять значения, начиная с width/2;вместо этого он имеет значения по всей ширине холста. Почему это? Как ограничить сопоставленные значения для этой переменной между width/2 и шириной?

Когда я устанавливаю логический параметр в функциях карты, равный true, дать: 

blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0,true); //decreases blue from 255 to 0 within first half of canvas width
blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255,true); //increases blue from 0 to 255 within second half of canvas width, blueHueDecrease should equal 0 through out this range

blueHueDecrease соответственно ограничивается между 0 и шириной / 2, но blueHueIncrease не ограничивается между шириной / 2 и шириной;почему это?

1 Ответ

0 голосов
/ 11 октября 2019

Когда mouseX > width/2, тогда blueHueDecrease = 255 и blueHueIncrease правильно отображаются на [0, 255].

Когда mouseX < width/2, тогда blueHueDecrease отображается на [0, 255] и blueHueIncrease = blueHueDecrease, потому что blueHueDecrease является нижней границей в 

map(mouseX,width/2,width,blueHueDecrease,255,true);

и в этом случае mouseX < width/2, blueHueIncrease ограничен нижней границей из-за последнего параметра в map (true).

Если выхотите отобразить blueHueDecrease, когда мышь оставлена, и blueHueIncrease, когда мышь направлена, тогда вы должны: 

var blueHueDecrease = map(mouseX, 0, width/2, 255, 0, true); 
var blueHueIncrease = map(mouseX, width/2, width, 0, 255, true);

Если вы хотите ограничить синий цвет до минимума, тогда выНужно использовать другую blueStartingValue и карту от blueStartingValue до 255, а не от 0 до blueStartingValue: 

var blueStartingValue = 128;
var blueHueDecrease = map(mouseX, 0, width/2, 255, blueStartingValue, true); 
var blueHueIncrease = map(mouseX, width/2, width, blueStartingValue, 255, true);

См. пример, демонстрирующий другое поведение: 

var blueStartingValue = 255;
var blueStartingValue3 = 128;

function setup() {
    createCanvas(400, 210);
}

function draw() {
    var blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0);
    var blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255); 
    
    var blueHueDecrease2 = map(mouseX,0,width/2,blueStartingValue,0,true); 
    var blueHueIncrease2 = map(mouseX,width/2,width,blueHueDecrease2,255,true); 

    var blueHueDecrease3 = map(mouseX, 0, width/2, 255, 0, true); 
    var blueHueIncrease3 = map(mouseX, width/2, width, 0, 255, true); 

    var blueHueDecrease4 = map(mouseX, 0, width/2, 255, blueStartingValue3, true); 
    var blueHueIncrease4 = map(mouseX, width/2, width, blueStartingValue3, 255, true); 
    
    background(0);
    textSize(25);

    fill(0, 0, blueHueDecrease);
    rect(10, 10, 40, 40);
    fill(0, 0, blueHueIncrease);
    rect(60, 10, 40, 40);
    fill(255);
    text(`map(,,,, false)`, 110, 45);

    fill(0, 0, blueHueDecrease2);
    rect(10, 60, 40, 40);
    fill(0, 0, blueHueIncrease2);
    rect(60, 60, 40, 40);
    fill(255);
    text(`map(,,,, true)`, 110, 95);

    fill(0, 0, blueHueDecrease3);
    rect(10, 110, 40, 40);
    fill(0, 0, blueHueIncrease3);
    rect(60, 110, 40, 40);
    fill(255);
    text(`new approach`, 110, 145);

    fill(0, 0, blueHueDecrease4);
    rect(10, 160, 40, 40);
    fill(0, 0, blueHueIncrease4);
    rect(60, 160, 40, 40);
    fill(255);
    text(`start = ` + str(blueStartingValue3), 110, 195);
}   
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
...