Función p5.js createGraphics()

La función createGraphics() en p5.js se usa para crear un búfer de gráficos fuera de la pantalla. Crea y devuelve un nuevo objeto p5.Renderer.

Sintaxis:

createGraphics(w, h, [renderer])

Parámetro: Esta función acepta tres parámetros como se mencionó anteriormente y se describe a continuación:

• w: Es un número que establece el ancho del búfer de gráficos fuera de pantalla.
• h: Es un número que establece la altura del búfer de gráficos fuera de pantalla.
• renderer: es una constante que establece el modo en P2D o WEBGL. Es un parámetro opcional. Por defecto es P2D si no está definido.

Valor devuelto: Devuelve un objeto p5.Graphics que contiene el búfer de gráficos fuera de pantalla.

El siguiente ejemplo ilustra la función createGraphics() en p5.js:

Ejemplo 1:

// Define the variable to store the graphics
let gfg;
 
function setup() {
  // Set the canvas
  createCanvas(600, 600, WEBGL);
 
  // Create a new graphics renderer
  gfg = createGraphics(300, 300);
 
  // Change the properties of the
  // graphics buffer
  gfg.background(255, 100);
  gfg.textSize(64);
  gfg.fill("green");
  gfg.textAlign(CENTER);
  gfg.text("GFG", 150, 50);
}
 
function draw() {
  background(0);
 
  // Add a point light to the scene
  pointLight(255, 255, 255, 0, -200, 200);
 
  noStroke();
  rotateZ(frameCount * 0.02);
  rotateX(frameCount * 0.02);
  noStroke();
 
  // Apply the graphics created
  // as a texture
  texture(gfg);
 
  // Use a box for the texture
  box(150);
}

Producción:

Ejemplo 2:

// Define the variable to store the graphics
let graphics;
 
function setup() {
  // Set the canvas
  createCanvas(600, 600, WEBGL);
 
  // Create a new graphics renderer
  graphics = createGraphics(200, 200);
  graphics.background(255);
}
 
function draw() {
  background(0);
 
  // Add the required objects to the
  // graphics buffer
  graphics.line(0, 0, 200, 200);
  graphics.line(100, 0, 200, 200);
  graphics.line(100, 200, 200, 100);
   
  graphics.fill("green");
  graphics.triangle(30, 75, 50, 20, 85, 70);
 
  ambientLight(150);
 
  // Add a point light to the scene
  pointLight(255, 255, 255, 0, -200, 200);
 
  rotateZ(frameCount * 0.02);
  rotateX(frameCount * 0.02);
 
  // Apply the graphics created
  // as a texture
  texture(graphics);
 
  // Use a box for the texture
  box(150);
}

Producción:

Reference:https://p5js.org/reference/#/p5/createGraphics