How I Approach a Creative Coding Project
Tags: css, creativecoding
Published: 2018-06-01 16:08:59

---
title: How I Approach a Creative Coding Project
published: true
description: 
tags: #css, #creativecoding
---
In this post I aim to demonstrate how I approach a creative coding project, using my contribution to this months Creative Coding Club theme (Spring into Action) as an example.

Before writing any code, I find it helpful to sketch out what I want to do on a piece of graph paper. Having the sketch in front of me makes it easier to work out what code to write. I draw the sketch using squares, rectangles, circles and ovals, angled as needed, which are the shapes I will code (I could use others, but I like to keep it simple, and I haven’t yet found those four insufficient). I create more complex shapes by combining shapes in various ways. I normally draw the shapes in pencil and then use coloured pens to highlight each layer, with each colour corresponding to a z-index and background colour. Oh, and I often cross stuff out and start again because it doesn’t end up looking the way I want, as you can see from the picture below:

![Sketch of sun, clouds and lightning plus some crossed out.](https://thepracticaldev.s3.amazonaws.com/i/c8fu30j9mhpmew284f6a.JPG)

Now that I have sketches I’m satisfied with for the cloud, sun, rain and lightning, I’m ready to write some code. From the sketch I can see most of what I need to write. Each square on the graph paper equals a set number of pixels on the screen, this time I’ve chosen 10 pixels, but I vary that from project to project. The colour coded highlighting tells me what z-index each element should have. I create curved elements using CSS border-radius, and angled elements using CSS transform. I’m not afraid to deviate from the sketch if it doesn’t look right once coded, and this time I adapted the lightning sketch as I coded.

The HTML code is just a long series of divs (semantic elements are not much use in this type of project).

```html
<div class="cloudRectangle"></div>
<div class="cloudCircle" id="leftCloudCircle"></div>
<div class="cloudCircle" id="topCloudCircle"></div>
<div class="cloudCircle" id="rightCloudCircle"></div>
<div class="sunCentre"></div>
<div class="sunRay" id="sunRayNorthNorthWest"></div>
<div class="sunRay" id="sunRayNorth"></div>
<div class="sunRay" id="sunRayNorthNorthEast"></div>
<div class="sunRay" id="sunRayEastNorthEast"></div>
<div class="sunRay" id="sunRayEast"></div>
<div class="sunRay" id="sunRayEastSouthEast"></div>
<div class="rain" id="rainTopLeft"></div>
<div class="rain" id="rainTopCentre"></div>
<div class="rain" id="rainTopRight"></div>
<div class="rain" id="rainMiddleLeft"></div>
<div class="rain" id="rainMiddleCentre"></div>
<div class="rain" id="rainMiddleRight"></div>
<div class="rain" id="rainBottomLeft"></div>
<div class="rain" id="rainBottomCentre"></div>
<div class="rain" id="rainBottomRight"></div>
<div class="lightningYellow" id="lightningYellowMain"></div>
<div class="lightningBodyColour" id="lightningBodyColourNorthWest"></div>
<div class="lightningBodyColour" id="lightningBodyColourNorthEast"></div>
<div class="lightningBodyColour" id="lightningBodyColourSouthWest"></div>
<div class="lightningBodyColour" id="lightningBodyColourSouthEast"></div>
<div class="lightningYellow" id="lightningYellowTopStrip"></div>
<div class="lightningYellow" id="lightningYellowMiddleStrip"></div>
<div class="lightningYellow" id="lightningYellowBottomStrip"></div>
<div class="lightningBodyColour" id="lightningBodyColourLeftMiniRectangle"></div>
<div class="lightningBodyColour" id="lightningBodyColourRightMiniRectangle"></div>
<div class="lightningBodyColour" id="lightningBodyColourLeftMiniSquare"></div>
<div class="lightningBodyColour" id="lightningBodyColourRightMiniSquare"></div>

<div class="ground"></div>

<div class="flowerStem" id="flower1Stem"></div>
<div class="flowerPetalNorthWest" id="flower1PetalNorthWest"></div>
<div class="flowerPetalNorthEast" id="flower1PetalNorthEast"></div>
<div class="flowerPetalSouthWest" id="flower1PetalSouthWest"></div>
<div class="flowerPetalSouthEast" id="flower1PetalSouthEast"></div>
<div class="flowerYellowCentre" id="flower1YellowCentre"></div>
<div class="flowerOrangeCentre" id="flower1OrangeCentre"></div>

<div class="flowerStem" id="flower2Stem"></div>
<div class="flowerPetalNorthWest" id="flower2PetalNorthWest"></div>
<div class="flowerPetalNorthEast" id="flower2PetalNorthEast"></div>
<div class="flowerPetalSouthWest" id="flower2PetalSouthWest"></div>
<div class="flowerPetalSouthEast" id="flower2PetalSouthEast"></div>
<div class="flowerYellowCentre" id="flower2YellowCentre"></div>
<div class="flowerOrangeCentre" id="flower2OrangeCentre"></div>
```

I use descriptive id and class names so that I can easily see what each bit of the code is for. I often have to make decisions about how to assign the ids and classes. For example, I could’ve chosen to use one class for all the parts of the cloud, or equally to have used a different class for the larger circle than the smaller ones.

The CSS has a lot more lines than the HTML. First of all, I just write the CSS for the basic visuals. I will add more code for the animations later. I won’t show you the entire CSS here, but here is an example for the cloud:

```css
.cloudRectangle {
  position: absolute;
  background-color: #cccccc;
  width: 120px;
  height: 100px;
  left: 750px;
  top: 150px;
  z-index: 3;
}

.cloudCircle {
  position: absolute;
  background-color: #cccccc;
  border-radius: 50%;
  z-index: 3;
}

#leftCloudCircle {
  width: 100px;
  height: 100px;
  left: 700px;
  top: 150px;
}

#topCloudCircle {
  width: 120px;
  height: 120px;
  left: 750px;
  top: 90px;
}

#rightCloudCircle {
  width: 100px;
  height: 100px;
  left: 820px;
  top: 150px;
}
```
Now that I’ve got the basic visuals right, it’s time to start coding the animations. In this project I’m using CSS keyframes animations, so I add the animation properties to the CSS for the elements I want to animate, and specify the animation using a keyframes @ rule. As before, I’ll just show you a bit of the animation code, this time for the sky:

```css
@keyframes skyAnimation {
  25% {
    background-color: #aaccff;
  }
  50% {
    background-color: #ffffff;
  }
  75% {
    background-color: #dddddd;
  }
}
```
The sky is actually the page background, so the animation property needs to be added to body: 

```css
body {
  background-color: #ffffff;
  animation: skyAnimation 60s infinite;
}
```
Now that I’ve got the animations working satisfactorily, the project is complete!

You can look at the full code and see the finished project on CodePen:

{% codepen https://codepen.io/dominicduffin1/pen/NzGxoW %}