p5.js haritası () dinamik olarak değişen değişken

oy
0

Ben blueHueCharacteristics.decrease etrafında döner 2 soru var ve aşağıdaki değişkenleri blueHueCharacteristics.increase. Ne bu kod işe yarar arka plan üzerinde imlecin konumuna göre arka planın rengini değiştirmektir. Ne bu kod yapmak için beklenen / 2 ve bu aralık içinde .increase değişken eşittir 0, .decrease genişlik 0 ila 0 255 .decrease değişken azalma olması ve değişken genişlik / 2 de 0 eşit .increase ve En / 2 değişken eşittir 0 .decrease genişlik ve bu aralık içinde 0 ile 255 arasında .increase değişken bir artış için.

var hueStartingValues;
var hue;
var blueHueCharacteristics;


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

    hueStartingValues = {
        red: 150,
        green: 200,
        blue: 255
    }
    hue = {
        red: 0,
        green: 0,
        blue: 0
    }

    blueHueCharacteristics = {
        decrease: 0,
        increase: 0
    }
}



function draw()
{
    hue.red = map(mouseX,0,width/2,hueStartingValues.red,255,true); //takes red value with respect to cursor's position on canvas; limits red to 255 at width/2
    hue.green = map(mouseX,0,width,hueStartingValues.green,0,true); //takes green value with respect to cursor's position on canvas; makes sure green doesn't go into negative values
    blueHueCharacteristics.decrease = map(mouseX,0,width/2,hueStartingValues.blue,0); //decreases blue from 255 to 0 within first half of canvas width
    blueHueCharacteristics.increase = map(mouseX,width/2,width,blueHueCharacteristics.decrease,255); //increases blue from 0 to 255 within second half of canvas width, .decrease should equal 0 through out this range
    console.log(decrease: ,blueHueCharacteristics.decrease);
    console.log(increase: ,blueHueCharacteristics.increase);
    background(hue.red,hue.green, max(blueHueCharacteristics.decrease,blueHueCharacteristics.increase));
}    

Ben gibi kurulum fonksiyonunda iki satır varsa:

blueHueCharacteristics.decrease = map(mouseX,0,width/2,hueStartingValues.blue,0); //decreases blue from 255 to 0 within first half of canvas width
blueHueCharacteristics.increase = map(mouseX,width/2,width,blueHueCharacteristics.decrease,255); //increases blue from 0 to 255 within second half of canvas width

blueHueCharacteristics.increase genişliği / 2'de başlayan sıfır olmayan değere sahip değildir; bunun yerine, tüm tuval aracılığıyla dışarı sıfırdan farklı değerleri vardır. Bu neden? Nasıl genişlik / 2 ve genişliği arasındaki bu değişken için aralık kısıtlayan mı? Ayrıca, nasıl tuval üzerinde giderken gelip, .decrease ve .increase değerleri farklıdır?

Ben gerçek eşit boolean parametresini ayarlamak Sonra, vermek:

blueHueCharacteristics.decrease = map(mouseX,0,width/2,hueStartingValues.blue,0,true); //decreases blue from 255 to 0 within first half of canvas width
blueHueCharacteristics.increase = map(mouseX,width/2,width,blueHueCharacteristics.decrease,255,true); //increases blue from 0 to 255 within second half of canvas width

.decrease değişkeni 0 ve genişlik uygun / 2 ile sınırlı olur, ancak .increase genişliği / 2 ve genişliği arasındaki sınırlı almaz; bu neden?

Oluştur 10/10/2019 saat 00:38
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

Zaman mouseX > width/2, o zaman blueHueDecrease = 255ve blueHueIncreaseuygun bir [0, 255] eşleştirilir.

Zaman mouseX < width/2, o blueHueDecrease[0, 255] eşleştirilir ve blueHueIncrease = blueHueDecreaseçünkü blueHueDecreasedaha düşük bağlanmış olan

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

ve bu durumda mouseX < width/2, blueHueIncreaseçünkü son parametre, alt sınır ile sınırlıdır map( true).

Eşlemek isterseniz blueHueDecreasefare sol ve zaman blueHueIncreasefare için `ve ardından sağ olduğunda:

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

Eğer minimuma mavi renk kısıtlamak istiyorsanız, o zaman farklı bir kullanımı ettik blueStartingValuegelen ve harita blueStartingValue yerine 0'dan daha 255 blueStartingValue:

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

farklı davranışlar gösterir örneğe bakın:

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>

Cevap 11/10/2019 saat 08:30
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more