如何使用 p5.js 创建 GeeksforGeeks 徽标？

在本文中，我们将了解如何使用 p5.js 创建GeeksforGeeks徽标。

Processing 是一种灵活的软件速写本，也是一种用于学习如何在视觉艺术环境中编码的语言。我们可以使用我们的编码技能示例创建不同类型的艺术，例如游戏、动画和物理引擎等。

方法：

• 设置设置输出窗口大小的函数setup()。
• 用随机值（offset = 108）初始化一个变量。
• 在 draw()函数中设置 logo 的背景颜色、nofill、描边和位置。
• 然后开始画logo：
• 创建两个弧倒“C”形。
• 在弧的中间创建两条水平线。
• 使圆弧的中心为零。
• 我们的标志是完整的。

下面是上述方法的实现。

第一步：创建两条弧线，如下图：

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);

输出：

第 2 步：创建水平线

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);

例子：

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();
}

输出：