¿Cómo crear el logotipo de GeeksforGeeks usando p5.js?

En este artículo, veremos cómo crear un logotipo de GeeksforGeeks usando p5.js.

Processing es un cuaderno de bocetos de software flexible y un lenguaje para aprender a codificar en el contexto de las artes visuales. Podemos crear diferentes tipos de artes utilizando nuestras habilidades de codificación, por ejemplo, como juegos, motores de animación y física, etc.

Acercarse:

• Configure la función setup() que pone el tamaño de la ventana de salida.
• Inicializar una variable con valor aleatorio (offset = 108).
• Establezca el color de fondo, sin relleno, el trazo y la posición del logotipo en la función dibujar().
• Luego comienza a dibujar el logo:
• Crea dos arcos en forma de ‘C’ invertida.
• Crea dos líneas horizontales en medio de los arcos.
• Haz que el centro de los arcos sea cero.
• Nuestro logo está completo.

A continuación se muestra la implementación del enfoque anterior.

Paso 1: crea dos arcos como se muestra a continuación:

// Create arc
arc(width/2 - offset, height/2, 200, 200, -PI + PI/3, PI);
arc(width/2 + offset, height/2, 200, 200, 0, 2*PI - PI/3);

Producción:

Paso 2: crea líneas horizontales

// Horizental lines
line(width/2 + offset + 100*sin(PI/2), height/2, width/2, height/2);
line(width/2 - offset - 100*sin(PI/2), height/2, width/2, height/2);

Ejemplo:

// Create a variable.
  
var offset;
function setup() {
  // Set the size of ouput window.
  createCanvas(600, 500);
    
  // Set the value of offset
  offset = 108;
}
  
function draw() {
    
  // Set the background colour.
  background(51);
  noFill();
  stroke(0, 255, 0);
  strokeWeight(16);
    
  // Set the ellipse mode in center.
  ellipseMode(CENTER);
    
  // Arc of both sides.
  arc(width/2 - offset, height/2, 200, 200, -PI + PI/3, PI);
  arc(width/2 + offset, height/2, 200, 200, 0, 2*PI - PI/3);
    
  // Horizental lines
  line(width/2 + offset + 100*sin(PI/2), height/2, width/2, height/2);
  line(width/2 - offset - 100*sin(PI/2), height/2, width/2, height/2);
  push();
    
  // Make the value of center zero.
  translate(width/2 - offset, height/2);
    
    
  pop();
  push();
    
  // Make the value of center zero.
  translate(width/2 + offset, height/2);
    
    
  pop();
}

Producción: