loading...

How I Approach a Creative Coding Project

dominicduffin1 profile image Dominic Duffin ・4 min read

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.

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

<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:

.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:

@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:

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:

Posted on by:

dominicduffin1 profile

Dominic Duffin

@dominicduffin1

Cofounder of ArtTechChat. Open University student. Citizen of the global internet.

Discussion

markdown guide