/*
 * @name 混合光
 * @frame 710,400 (optional)
 * @description 展示一个有三种不同光的盒子。
 */
function setup() {
  createCanvas(710, 400, WEBGL);
  noStroke();
}

function draw() {
  background(0);

  // 右侧：橘色点光源
  pointLight(150, 100, 0, 500, 0, 200);

  // 左侧：蓝色定向光
  directionalLight(0, 102, 255, -1, 0, 0);

  // 上方：黄色聚光
  pointLight(255, 255, 109, 0, 0, 300);

  rotateY(map(mouseX, 0, width, 0, PI));
  rotateX(map(mouseY, 0, height, 0, PI));
  box(200);
}

@@ -181,77 +181,381 @@
 0);%0A
+  
 %0A  // 
-%E5%8F%B3%E4%BE%A7%EF%BC%9A%E6%A9%98%E8%89%B2%E7%82%B9%E5%85%89%E6%BA%90%0A  pointLight(150, 100, 0, 500, 0, 200);%0A%0A  // %E5%B7%A6%E4%BE%A7%EF%BC%9A%E8%93%9D%E8%89%B2%E5%AE%9A%E5%90%91%E5%85%89
+ambient light%0A   ambientLight(0, 255/4, 0);%0A  %0A  // to set the light position,%0A  // think of the world's coordinate as:%0A  // -width/2,-height/2 -------- width/2,-height/2%0A  //                %7C            %7C%0A  //                %7C     0,0    %7C%0A  //                %7C            %7C%0A  // -width/2,height/2--------width/2,height/2%0A%0A  // blue directional light from the left
 %0A  d
@@ -577,11 +577,9 @@
 (0, 
-102
+0
 , 25
@@ -602,147 +602,405 @@
  // 
-%E4%B8%8A%E6%96%B9%EF%BC%9A%E9%BB%84%E8%89%B2%E8%81%9A%E5%85%89%0A  pointLight(255, 255, 109, 0, 0, 300
+calculate distance from center to mouseX%0A  let lightX = mouseX - width / 2;%0A  let lightY = mouseY - height / 2;%0A  %0A  // red spotlight%0A  // axis located at lightX, lightY, 500%0A  // axis direction of light: 0, 0, -1%0A  spotLight(255, 0, 0, lightX, lightY, 500, 0, 0, -1
 );%0A%0A 
+ //
  rotate
-Y(map(mouseX, 0, width, 0, PI)
+ on X axis%0A  rotateX(-PI/4
 );%0A 
+ //
  rotate
-X(map(mouseY, 0, height, 0, PI));
+ on Y axis%0A  rotateY(PI/4);%0A  %0A  // place box on (0, 0, 0), size 100
 %0A  box(
-2
+1
 00);

Update 05_Mixture.js