1. Open your web browser and go to the p5.js editor website: https://editor.p5js.org

2. On the p5.js editor homepage, click on the "Sign in" button located in the top-right corner.

3. You will be directed to the sign-in page. Since you don't have an account yet, click on the "Sign up" link below the sign-in form.

4. Fill in the required information in the sign-up form. Enter your desired username, email address, and a strong password. Make sure to choose a unique username and provide a valid email address.

5. After filling in the necessary information, click on the "Create Account" button to proceed.

6. p5.js editor may ask you to verify your email address by sending a confirmation email. Check your inbox and follow the instructions in the email to verify your email address. If you don't see the email, check your spam or junk folder.

7. Once your email address is verified, you will be redirected back to the p5.js editor website.

8. Now, click on the "Sign in" button again, and this time, enter the username or email address associated with your account and your password.

9. After entering your login credentials, click on the "Sign in" button to access your p5.js editor account.

10. Congratulations! You have successfully created and signed in to your p5.js editor account. You can now start using the editor to write and run p5.js sketches, save your projects, and share them with others.

p5.js is a JavaScript library that simplifies the process of creating interactive graphics and animations in the browser. It was developed with the goal of making coding accessible and enjoyable for artists, designers, educators, and beginners who are interested in creative coding.

Here are some key aspects that make p5.js different:

1. Simplicity: p5.js provides an intuitive and beginner-friendly interface that makes it easy for anyone to start coding and creating visual projects. It abstracts away many complex details of web development, allowing users to focus on creative expression rather than intricate programming concepts.

2. Graphics and Interaction: p5.js offers a range of built-in functions and features for creating and manipulating graphics, animations, and interactive elements. It provides an extensive set of drawing tools, image manipulation capabilities, and support for user interaction through mouse and keyboard inputs.

3. Web-Based: p5.js runs entirely in the browser, utilizing the power of HTML5 canvas and JavaScript. This means that users can create and share their projects directly on the web without the need for additional software installations. It also makes p5.js compatible with multiple platforms and devices.

4. Community and Documentation: p5.js has a vibrant and supportive community of artists, educators, and developers. The p5.js website offers comprehensive documentation, tutorials, and examples, making it easier for users to learn and get started with the library. The community actively shares projects, provides help and feedback, and contributes to the ongoing development of p5.js.

5. Integration with Web Technologies: p5.js seamlessly integrates with HTML, CSS, and JavaScript, allowing users to combine creative coding with other web technologies. It provides access to web APIs, enabling users to incorporate media elements, sensor data, and external APIs into their projects.

6. Education Focus: p5.js is widely used in educational settings to teach programming, computer science, and creative coding concepts. Its focus on simplicity, visual output, and interactivity makes it an excellent tool for introducing coding to learners of all ages and backgrounds.

Overall, p5.js stands out as a user-friendly, web-based library that empowers artists and beginners to express their creativity through coding, while also providing a platform for more advanced web development and interactive projects.

Visit this website https://p5js.org/showcase/ , scroll down and get your mind blown...

Let's us make a robot using only circles (which we will be calling ellipses) and rectangle.

But first, get a pen and paper and sketch, preferrably a graph paper.

In p5.js, we use code to draw graphics on a “canvas”. The canvas displays the output of your code.

In a computer screen every pixel is a coordinate. It has an “x” value (horizontal) and a “y” value (vertical) that determines where the pixel is going to be located. But computers use a different coordinate system than the one you’re used to: the origin is located in the top left and the x value increases to the right while the y-value increases down vertically.

Add a hat or another element to the robot

AND/OR
Create a symbol that’s meaningful to you:

Think about the things that are meaningful to you, your community, or your family.

If you had to make a super simple symbol for those things, what basic shapes would you use?

Design a symbol on paper and then code in p5.

Write a short paragraph explaining your symbol and its importance.

This function creates a p5.js canvas.

The canvas is an element on the web page on which we will draw our graphics.

Syntax: createCanvas(width, height)

This function gives our canvas a background grayscale color between 0 (black) and 255 (white)

Syntax: background(value)

A line is defined by its start and end points.

line(x1,y1,x2,y2)- The function name to draw a line is "line." The first x and y are the starting point and and the second are the end point.

Draw a point near the top-right corner of the canvas.

Draw a point in the middle of the canvas.

Draw a point near the bottom-left.

Draw a horizontal line, a vertical line, a diagonal line.

Draw a line from the top-left corner to the bottom-right corner.

Extensions:

Use multiple line functions to create a rectangle and a triangle so the lines create a house (pentagon).

Add comments for each line position.