> ## Content Index
> Fetch the complete content index at: https://alexcodesart.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Create Your First Digital Art with Code: A Step-by-Step Guide
- URL: https://alexcodesart.com/create-your-first-digital-artpiece-with-code-a-step-by-step-guide/
- Published: 2024-06-18T07:40:13.000Z
- Updated: 2025-07-01T14:19:33.000Z
- Author: Alex Postolache
- Tags: Tutorials

Let's build your first digital art with code.

### Starting with the Basics

As a starting place to write and create your first digital art pieces, I recommend using the official [p5.js editor](https://editor.p5js.org/?ref=alexcodesart.com). Once you open the editor, you’ll see the code editor on the left side of the screen and the preview window on the right, which displays the results of running your code.

We begin with the basic template of `setup()` and `draw()` functions. Here’s a quick reminder from our previous tutorial, which you can find here:

[Getting Started with p5.js: An Introduction to Creative Coding for BeginnersIntroduction to Programming and p5.js Welcome to the world of creative coding with p5.js! Whether you’re an artist, designer, educator, or a complete beginner, p5.js is a powerful JavaScript library that makes coding visual and interactive projects accessible and fun. Let’s dive into the core concepts of![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/size/w256h256/2024/06/Logo--1-.png)Alex Codes ArtAlex Postolache![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/2024/06/grid0.jpg)](https://alexcodesart.com/getting-started-with-p5-js-an-introduction-to-creative-coding-for-beginners/)

The `setup()` function is called once at the beginning of the program to set up initial environment properties such as screen size and background color. The `draw()` function, on the other hand, is called continuously, multiple times per second, to render the visual elements of your program on the screen.

```javascript
function setup() {
  createCanvas(400, 500);
}

function draw() {
  background(220);
}
```

### **Breaking Down the Artwork: Key Elements**

Upon closer inspection, we identify several key elements in this piece:

1. The background color.
2. Two overlapping semicircles, with the top one being slightly transparent.
3. An arch on top, made of eight separate curves.

With this understanding, let’s create each element step-by-step.

### Setting the Background Color

Moving forward, we will add all the described code inside the `draw()` function.

First, we set the background color using the [background()](https://p5js.org/reference/?ref=alexcodesart.com#/p5/background) function. You can pass basic color names like 'red', 'blue', 'green', or a hex RGB notation like '#e8e0d5'. For our art, we use this hex color:

```javascript
background('#e8e0d5');

```

### Drawing the Semicircles

In p5.js, every shape has two properties defining its color: the stroke (the outline) and the fill. We don’t need any strokes, so we use the `noStroke()` function.

To draw our first semicircle, we use these three lines of code:

```javascript
noStroke();
fill('#9F6642');
arc(width / 2, height / 1.2, width / 2, width / 2, PI, TWO_PI);

```

The [fill()](https://p5js.org/reference/?ref=alexcodesart.com#/p5/fill) function works like the `background()` function, allowing you to pass the color you want to fill the shape with in various formats.

The [arc()](https://p5js.org/reference/?ref=alexcodesart.com#/p5/arc) function draws an arc, taking several parameters:

- The first two parameters are the arc center’s x and y coordinates (`width / 2` and `height / 1.2`).
- The third and fourth parameters set the arc’s width and height (`width / 2` and `width / 2`).
- The fifth and sixth parameters set the angles to draw the arc between (`PI` and `TWO_PI`), corresponding to 180 to 360 degrees in radians.

![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/2024/06/Screenshot_2024-05-28_at_09.58.48.png)

One out of three elements done! 

If we run our code now, we will get this. That’s a start!

### Adding the Second Semicircle

The second semicircle is drawn on top of the first one:

```javascript
fill('#B39279B3');
arc(width / 2, height / 1.7, width / 2, width / 2, 0, PI);

```

Hexadecimal color is specified with `#RRGGBB`, where `RR`, `GG`, and `BB` are the values for red, green, and blue. To add transparency, add two additional digits (00 to FF) in front. Here, “B3” indicates approximately 70% opacity.

- The position is set by `width / 2` and `height / 1.7`, slightly higher than the first semicircle.
- The width and height are the same (`width / 2`).
- The angles (`0` and `PI`) draw from 0 to 180 degrees.

![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/2024/06/Screenshot_2024-05-28_at_10.25.43.png)

Two out of three elements done! Almost there! 

### Creating the Arch

First, let's add the variables that we need at the beginning of the file, on top of the `setup` function:

```javascript
// Define spacing and dimensions for the lines and arches
let lineGap = 10;
let archGap = lineGap * 2;
let archRadius = 60;
let lineOffset = archRadius / 2;
let archNumber = 8;
```

For the final element, the arch, we use a `for` loop to draw multiple segments, creating a smooth curve. We define the style and number of arches with `archNumber`.

```javascript
// Define the style by setting the color and weight of the lines
stroke('#264563');
strokeWeight(3);
noFill(); // Ensure the arcs are not filled

for (let i = 0; i < archNumber; i++) {
    line(width / 2 - (i * lineGap) - lineOffset, height / 1.75, width / 2 - (i * lineGap) - lineOffset, height / 3);
    line(width / 2 + (i * lineGap) + lineOffset, height / 1.75, width / 2 + (i * lineGap) + lineOffset, height / 3);
}

```

The `line()` function accepts four parameters: the x and y coordinates for the start and end points. The first line draws the left segment, and the second line draws the right segment.

For the arch, we use the `arc()` function:

```javascript
arc(width / 2, height / 3, archRadius + i * archGap, archRadius + i * archGap, PI, TWO_PI);

```

Ensure the arc is not filled by calling `noFill()`. The final code looks like this:

```javascript
stroke('#264563');
strokeWeight(3);
noFill();

for (let i = 0; i < archNumber; i++) {
    line(width / 2 - (i * lineGap) - lineOffset, height / 1.75, width / 2 - (i * lineGap) - lineOffset, height / 3);
    line(width / 2 + (i * lineGap) + lineOffset, height / 1.75, width / 2 + (i * lineGap) + lineOffset, height / 3);
    arc(width / 2, height / 3, archRadius + i * archGap, archRadius + i * archGap, PI, TWO_PI);
}

```

![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/2024/06/Screenshot_2024-05-31_at_15.41.22.png)

YOUR first masterpiece! 

Congratulations! You have created your first piece of digital art with code!

 I am proud of you and you should be too! 

### Your Turn to Experiment

The full code together with the result can be found here:

[p5.js Web EditorA web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.![](https://editor.p5js.org/favicon.ico)](https://editor.p5js.org/alex.codes.art/sketches/kfs%5F1Bq51?ref=alexcodesart.com)

An important part of learning is to experiment and play around. Familiarize yourself with the concepts we discovered today by:

- Changing the color palette inside the `fill()`, `background()`, and `stroke()` functions.
- Modifying variables defined at the beginning (`archNumber`, `lineGap`, `archRadius`).
- Making any other changes you want.

You’ll quickly see that you can create something unique from this example.

---

Don’t miss any new posts — subscribe for free! It really helps me out, and I’d love to have you along. Thanks!

## Sign up for Alex Codes Art

Art with code for curious minds

Subscribe 

Email sent! Check your inbox to complete your signup. 

No spam. Unsubscribe anytime.

### Next Tutorial

In the next tutorial, we’ll explore the `translate()`, `rect()`, and other programming concepts while creating this beautiful Bauhaus-inspired abstract art.

[Vibrant Digital Art: Creating a Bauhaus-Inspired Grid of Colorful Shapes with CodeIn this tutorial, I’ll guide you through the process of creating a Bauhaus-inspired grid of colorful shapes using code. By the end of this tutorial, you’ll have a vibrant piece of digital art. Starting with the Basics First, let’s look at the overall structure of our code. We’ll![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/size/w256h256/2024/06/Logo--1-.png)Alex Codes ArtAlex Postolache![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/size/w1200/2024/06/cover-7.png)](https://alexcodesart.com/creating-bauhaus-inspired-grid/)

---

### Wrapping up

Thank you for following along with this tutorial! If you have any questions, feedback, or just want to share your own creations, please feel free to leave a comment below. I’ll make sure to respond and help you out as best as I can.

Stay connected for more exciting tutorials and creative coding tips by subscribing to this blog. I really appreciate it!

Happy coding, and see you in the next tutorial!