How to create GeeksforGeeks logo using p5.js ?

How to create GeeksforGeeks logo using p5.js ?

Last Updated : 18 Jan, 2023

In this article, we will see how to create a GeeksforGeeks logo using p5.js.

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. We can create different types of arts using our coding skills example is like games, animation And physics engines, etc.

Approach:

Set the function setup() which put output window size.
Initialize a variable with random value(offset = 108).
Set background colour,nofill, stroke, and position of the logo in draw() function.
Then start to draw the logo:
Create two arcs inverted 'C' shape.
Create two horizontal lines in mid of the arcs.
Make the center of the arcs zero.
Our logo is complete.

Below is the implementation of above approach.

Step 1: Create two arcs as shown below:

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

Output:

Step 2: Create Horizontal lines

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

Example:

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

Output:

How to create GeeksforGeeks logo using p5.js ?

_sh_pallavi

Improve

Article Tags :

Similar Reads

Create GeeksforGeeks logo using HTML and CSS

Creating a logo using HTML and CSS involves designing graphical elements with HTML tags, styling them using CSS properties such as colors, sizes, and positions, and possibly incorporating SVG graphics or images. This approach allows for custom, scalable, and interactive logo designs on web pages. Ge

How to create a rainbow disc using p5.js ?

In this article, we are going to see how we can create a rainbow disc using p5.js. p5.js is a JavaScript library that makes it easy to create interactive graphics, and it is well-suited for visualizations of all kinds, including rainbows. This article will show you how to create a rainbow using p5.j

How to Design Flat Shading Graphics using p5.js ?

Flat shading is a lighting technique used in 3D computer graphics to shade each polygon of an object based on the angle between the polygon's surface normal and the direction of the light source, their respective colors and the intensity of the light source. Color is computed once for each face of t

Create Logo Clouds using Next.JS and Tailwind CSS

A logo cloud is a collection of logos that are displayed on a webpage to showcase partnerships, clients, or supported platforms. This component is often used to establish credibility or showcase affiliations. Using Next.js with Tailwind CSS you can create a responsive and customizable logo cloud tha

How to Draw Graphics using Canvas in HTML5 ?

In this article, we will draw graphics by using the canvas element in the document. This tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Note: This tag is n