如何使用p5.js创建GeeksforGeeks标志

在本文中，我们将看到如何使用p5.js创建一个 GeeksforGeeks 标志。

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

方法：

• 设置setup()函数以设置输出窗口大小。
• 用随机值（offset = 108）初始化一个变量。
• 在draw()函数中设置背景颜色、无填充、轮廓和标志位置。
• 然后开始绘制标志：
• 创建两个反向’C’形状的弧。
• 在弧的中间创建两条水平线。
• 将弧的中心设为零。
• 我们的标志完成了。

以下是上述方法的实现。

步骤1： 创建如下所示的两个弧：

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

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

输出：