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:
Javascript
// 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
Javascript
// 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:
Javascript
// 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:
Publicación traducida automáticamente
Artículo escrito por _sh_pallavi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA