¿Cómo diseñar gráficos de sombreado plano usando p5.js?

El sombreado plano es una técnica de iluminación utilizada en gráficos 3D por computadora para sombrear cada polígono de un objeto en función del ángulo entre la superficie normal del polígono y la dirección de la fuente de luz, sus respectivos colores y la intensidad de la fuente de luz.

  • El color se calcula una vez para cada cara del polígono.
  • Todos los píxeles en un polígono se establecen en el mismo color
  • Funciona para objetos hechos de caras planas.

Ejemplo:

Javascript

// Store the angle value in a variable
var angle = 0.1;
  
// Set the canvas size
function setup() {
    createCanvas(500, 500, WEBGL);
}
  
// Function to draw the Flat 
// Shading Graphics
function draw() {
  
    // Create a directional light with 
    // specified color and direction
    directionalLight(25, 250, 50, 101, 0, 0);
  
    // Set the background color
    background(50, 50, 200);
  
    // Set the rotation angle
    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);
  
    // Set the fill color
    fill(0, 0, 205);
      
    noStroke();
    ambientMaterial(300);
    cone(100);
    angle += 0.03;
}

Producción:

Publicación traducida automáticamente

Artículo escrito por cmelakkia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *