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:
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:
Top comments (0)