What I felt through 7 Days of Learning Generative Art
Tags: beginners, art, javascript, showdev
Published: 2018-05-06 16:07:01

---
title: What I felt through 7 Days of Learning Generative Art
published: true
description: What I felt through 7 Days of Learning Generative Art
tags: beginners,art,javascript,showdev
cover_image: https://user-images.githubusercontent.com/1811616/39673282-45fec654-5174-11e8-9bff-4bddc22faa07.png
---

As I wrote in [My first step in learning Generative Art](https://dev.to/ohbarye/my-first-step-in-learning-generative-art-3674), I started learning the generative art. I was glad that there were some reactions to the article and [the tweet](https://twitter.com/ThePracticalDev/status/991301465405902848) about it so I decided to draw a picture and post it every day for seven days.

## Development environment

There's a language and an environment named [Processing](https://processing.org/) but I've used [p5.js](https://p5js.org/) because I would want to write familiar JavaScript code.

I drew them using an interactive editor on the web at https://alpha.editor.p5js.org/ or https://www.openprocessing.org/. These sites are quite awesome to draw a picture even if you're a beginner. When auto-refresh is enabled, you can check the appearance quickly and it's convenient. But be careful, if you make mistakes in code that causes an infinite loop or OOM, the browser gets hanging up and your code in the editor might get lost. That was the most painful thing I faced.

## Impression & What I learned

Because I had used HTML Canvas, the hurdle to begin drawing a picture with p5.js was not so high.

"Well, I can draw a line with `line` function, easy". "Hum, I can draw a rectangle with `rect` function, okay".

Makes sense, I thought that it was perfectly understandable --- until I saw [high-level real artworks](https://www.google.co.jp/search?q=generative+art&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj7sLzemfHaAhVr1oMKHQMKCuUQ_AUICigB&biw=1440&bih=776) on the earth. At the moment I saw them, I unintentionally said to myself "Huh!?!?".

Having said that, I knew that the only way to get used to it is to use it patiently. After I started moving my hands, I found it fascinating soon.

Unlike code in real business, Generative Art has no exact answer to choose, and there is no end until I admit it good. Even when I would think "I'm getting done", comparing some patterns I couldn't make up my mind which one to choose, then I would spend some time. However, **as time was being sucked indefinitely, I found me remember the joy of coding**.

Although it is difficult to continue everyday posting, I would like to continue drawing generative art in the future so that I never forget the feeling.

## Artworks

All of my artworks are published in [OpenProcessing](https://www.openprocessing.org/user/128456). I would like to look back them with some comments.

### day 1: ["Interfering objects" & "Light path in the dark"](https://dev.to/ohbarye/my-first-step-in-learning-generative-art-3674)

I was copying examples in a reference without any idea. I was feeling delighted with creation when I could draw anything.

But... I now don't understand what I was thinking at that time. 😅

![image](https://user-images.githubusercontent.com/1811616/39439337-37e7728c-4ce2-11e8-88aa-fd29456b2343.png)

![light](https://user-images.githubusercontent.com/1811616/39439343-3c6cdf5e-4ce2-11e8-9196-1b0df5dbf894.gif)

### day 2: ["Feather"](https://dev.to/ohbarye/learning-generative-art-day-2-feather--4ma0)

I wanted to be able to reproduce some sort of motif present in this real world. I don't like the color that I have not care so much.

![image](https://user-images.githubusercontent.com/1811616/39481377-353be79c-4da6-11e8-9746-6f8a4cc4e12e.png)

### day 3: ["Strings"](https://dev.to/ohbarye/learning-generative-art-day-3-strings--jb4)

In contrast to "Feather", I tried to put an abstract image in the picture. Although the theme is "strings", I drew an object that does not exist in the real world. I like the cool feeling.

![image](https://thepracticaldev.s3.amazonaws.com/i/urzdi9c51hiztg77bvdx.png)

### day 4: ["Flower on a Lofty Height"](https://dev.to/ohbarye/learning-generative-art-day-4-flower-on-a-lofty-height--54b5)

Like day "Feather" I tried to draw something real with more delicacy. I think that the curved line using `curveVertex` just looked like petals of a flower and the ephemeral feeling by `noStroke`.

![blue](https://thepracticaldev.s3.amazonaws.com/i/j3tjpk231kdsk0icf1yk.png)
![yellow](https://thepracticaldev.s3.amazonaws.com/i/4twrtrj47b3jtyl33i0b.png)

### day 5: ["Unknown Language"](https://dev.to/ohbarye/learning-generative-art-day-5-unknown-language--1fn1)

This one that I do not like next to those artworks of the day 1... I jumped to a difficult theme of expressing "feelings when I heard an unknown language", but I got lost what I would like to draw.

![gif](https://thepracticaldev.s3.amazonaws.com/i/2fp6w693c6t5bgowaxrn.gif)

### day 6: ["Surface Wave"](https://dev.to/ohbarye/learning-generative-art-day-6-surface-wave--8hc)

On this day I was clearly deciding to draw a picture with a wave using 2D noise. I tried adding a movement that looks like a wave traveling through the earth or a cross-section of the earth so that it does not end as just a copy and paste of a tutorial.

The code is getting complicated from around here and it seems to be hard to read back later.

<img width="704" alt="2018-05-05 21 58 21" src="https://user-images.githubusercontent.com/1811616/39663562-65bc2758-50b0-11e8-9823-015ac231c1c0.png">

<img width="705" alt="2018-05-05 21 57 17" src="https://user-images.githubusercontent.com/1811616/39663561-65969862-50b0-11e8-8e0f-9a85c14b4a27.png">

### day 7: ["Pandora's Box"](https://dev.to/ohbarye/learning-generative-art-day-7-pandoras-box--ej8)

The motif "Pandora's Box" slightly makes me itchy, but I like this picture the most due to its dynamism, afterimage atmosphere, vivid coloring.

![pandora_black](https://user-images.githubusercontent.com/1811616/39673282-45fec654-5174-11e8-9bff-4bddc22faa07.png)

![pandora_white](https://user-images.githubusercontent.com/1811616/39673283-4622d724-5174-11e8-9f3f-8193340b5a0e.png)

---

If you've got interested in generative art, maybe it's time to start!