javascript - 多个按钮 P5JS
问题描述
我创建了一个模拟色盲的相机,现在我需要制作 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)
}
}
}
谢谢您的帮助
解决方案
我在这种情况下的方式是这样的:
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;
}
推荐阅读
- mongodb - 通过亚马逊网络服务自动化 mongo db 备份
- c# - 将本地 JSON 文件中的内容加载到包含 AngularJS 的 MVC 项目中
- javascript - 如何将数据从 AntD 表传递到 React 中的另一个组件?
- pandas - Python panda 多索引数据框:如何将特定列与新索引中的特定值相关联
- google-cloud-platform - PythonVirtualenvOperator 因 TypeError 失败:无法腌制“模块”对象
- php - 带有 WP_Query 的页面上的 ACF Pro 块上的 Wordpress 分页
- c# - 用于 mysql .net5 的 Nuget 包
- php - Woocommerce:按“特价”过滤管理产品
- linux - 检查是否在 cron 中设置了文件路径
- twilio - 如何在 ekata_reverse_phone 上的 twilio Addons 中打印/获取特定数据