Multiple Lights / 複数のライト

すべてのタイプのライトを1つのスケッチで使用できます。

lighting ambient point directional
3D Lights

View Source Code

/*
 * @name Multiple Lights
 * @arialabel Rotating iridescent cube on the left of the screen and an iridescent sphere on the right. The user’s mouse acts as a light illuminating the shapes and can control the direction of the light
 * @description All types of lights could be used in one sketch.
 */
function setup() {
  // createCanvas(710, 400, WEBGL);
  createCanvas(windowWidth, windowHeight, WEBGL);

  describe(
    'a 3d example containing a spinning box and a sphere, each lit with a number of different lights, including ambient (gray), directional (red), spotlight (green), and point (blue).'
  );
}

function draw() {
  background(0);

  let locX = mouseX - height / 2;
  let locY = mouseY - width / 2;

  // ambient light is gray
  ambientLight(50);
  // directional light is red
  directionalLight(255, 0, 0, 0.25, 0.25, 0);
  // spotlight is green
  spotLight(0, 255, 0, 150, 0, 250, 0, 0, -1);
  // point light is blue
  pointLight(0, 0, 255, locX, locY, 250);

  push();
  translate(-width / 4, 0, 0);
  rotateZ(frameCount * 0.02);
  rotateX(frameCount * 0.02);
  specularMaterial(250);
  box(100, 100, 100);
  pop();

  translate(width / 4, 0, 0);
  ambientMaterial(250);
  sphere(120, 24);
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.