p5.js TypedDict set() 方法

简介

在p5.js中，TypedDict是一种创建自定义键值对的方式，可以通过set()方法修改并存储键值对。set()方法接受两个参数，第一个参数为一个字符串表示键，第二个参数为任意类型的值。

语法

TypedDict.set(key, value);

参数

• key：一个字符串，表示键名。
• value：任意类型的值，表示对应键名的值。

基本用法

// 定义一个TypedDict
let myDict = createTypedDict("myDict", "name", String, "age", Number);

// 设置键值对
myDict.set("name", "张三");
myDict.set("age", 18);

// 获取键值对
console.log(myDict.name); // 输出：张三
console.log(myDict.age);  // 输出：18

功能演示

在下面的例子中，一个简单的ColorPicker选择器中可以选择填充颜色和描边颜色。选中的颜色将通过set()方法存储到一个TypedDict中，并在画布上绘制一个矩形来展示填充和描边颜色。

let myColors = createTypedDict("myColors", "fill", String, "stroke", String);

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

  // 创建填充颜色选择器
  let fillPicker = createColorPicker("#ffffff");
  fillPicker.position(20, 20);
  fillPicker.input(function() {
    myColors.set("fill", fillPicker.value());
  });

  // 创建描边颜色选择器
  let strokePicker = createColorPicker("#000000");
  strokePicker.position(20, 60);
  strokePicker.input(function() {
    myColors.set("stroke", strokePicker.value());
  });
}

function draw() {
  // 获取填充颜色和描边颜色
  let fillColor = myColors.fill;
  let strokeColor = myColors.stroke;

  // 绘制一个矩形
  fill(fillColor);
  stroke(strokeColor);
  rect(100, 100, 200, 200);
}

在上面的例子中，我们首先使用createTypedDict()方法创建了一个myColors对象，在setup()函数中创建了两个颜色选择器，并为它们设置了input()事件，以便在选择颜色时更新myColors对象。在draw()函数中，我们获取了填充和描边颜色，并用它们绘制了一个矩形。