多个按钮 P5JS

Question

我已经创建了一个模拟色盲的相机，现在我需要制作 8 个按钮来在不同类型的色盲之间切换，有人告诉我使用数组，但我不确定如何使用。我需要制作 8 个按钮，一旦按下就会改变这里的值 let newColor = ColorMatrix({R: r, G: g, B: b, A: a}, Blind('Protanopia') );

// from http://web.archive.org/web/20081014161121/http://www.colorjack.com/labs/colormatrix/

let blindnes = [Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, Achromatomaly];
let buttons = [];

function ColorMatrix(o,m) { // takes: RGBA object, Matrix array

    function fu(n) { 
      
      let value = 0;
      
      if( n <= 0 ){
        value = 0;
      }else if( n < 255 ){
        value = n;
      }else{
        value = 255;
      }
      
      return value; 
    }

    var r=((o.R*m[0])+(o.G*m[1])+(o.B*m[2])+(o.A*m[3])+m[4]);
    var g=((o.R*m[5])+(o.G*m[6])+(o.B*m[7])+(o.A*m[8])+m[9]);
    var b=((o.R*m[10])+(o.G*m[11])+(o.B*m[12])+(o.A*m[13])+m[14]);
    var a=((o.R*m[15])+(o.G*m[16])+(o.B*m[17])+(o.A*m[18])+m[19]);
    
    return({'R':fu(r), 'G':fu(g), 'B':fu(b), 'A':fu(a)});
}

function Blind(v) { // this function just returns the Matrix

    return({
      'Normal':[1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0, 0,0,0,0,1],     
      'Protanopia':[0.567,0.433,0,0,0, 0.558,0.442,0,0,0, 0,0.242,0.758,0,0, 0,0,0,1,0, 0,0,0,0,1],
      'Protanomaly':[0.817,0.183,0,0,0, 0.333,0.667,0,0,0, 0,0.125,0.875,0,0, 0,0,0,1,0, 0,0,0,0,1],
      'Deuteranopia':[0.625,0.375,0,0,0, 0.7,0.3,0,0,0, 0,0.3,0.7,0,0, 0,0,0,1,0, 0,0,0,0,1],
      'Deuteranomaly':[0.8,0.2,0,0,0, 0.258,0.742,0,0,0, 0,0.142,0.858,0,0, 0,0,0,1,0, 0,0,0,0,1],
      'Tritanopia':[0.95,0.05,0,0,0, 0,0.433,0.567,0,0, 0,0.475,0.525,0,0, 0,0,0,1,0, 0,0,0,0,1],
      'Tritanomaly':[0.967,0.033,0,0,0, 0,0.733,0.267,0,0, 0,0.183,0.817,0,0, 0,0,0,1,0, 0,0,0,0,1],
      'Achromatopsia':[0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0,0,0,1,0, 0,0,0,0,1],
      'Achromatomaly':[0.618,0.320,0.062,0,0, 0.163,0.775,0.062,0,0, 0.163,0.320,0.516,0,0,0,0,0,1,0,0,0,0,0]
    }[v]);

}

/* Here we are calling the function */


function setup() {
  createCanvas(400, 400);
  frameRate(15)
  cam = createCapture(VIDEO);
  cam.size(400, 400);
  cam.hide();
  noStroke();
  draw();
  
  // buttons.push(createButton('Protanopia'));
  // buttons[0].position(370, 275);
  // buttons[0].size(100, 50);
  // buttons[0].mousePressed(Protanopia);
}

function draw() {
  background(220);
  cam.loadPixels()
  
   for (let x = 0; x < cam.width; x += 3) {
    for (let y = 0; y < cam.height; y += 3) {
      let i = (y * cam.width + x) * 4;

      let r = cam.pixels[i]
      let b = cam.pixels[i + 1]
      let g = cam.pixels[i + 2]
      let a = cam.pixels[i + 3]
      let newColor = ColorMatrix({R: r, G: g, B: b, A: a}, Blind('Protanopia'));
      //console.log(b,newColor.B)
      fill(newColor.R, newColor.G, newColor.B, newColor.A)
      rect(x, y, 3, 3)
    }
   }
}

感谢您的帮助

Answer 1

我在这种情况下的想法是这样的：

let button = [];
visions = ['Normal', 'Protanopia'];

setup(){

visions.forEach((vision, i) => { //map each type of vision and create a button

    const button = createButton(vision);
    button.position(50 * i + 20, 50);
    button.mousePressed(() => changeType(vision)); // add a custom event

  });
}

let currentVision = 'Normal';


function draw(){
    background(255);

  let newColor = ColorMatrix({R: r, G: g, B: b, A: a}, Blind(vision)); // draw will rerun this line constantly so when you update currentVision it will update here

}

function changeType(type){
  vision = type;
}