CSS-Doodle Course - Drawing Basic Shapes

CSS-Doodle Course - Drawing Basic Shapes
Now that we have created a grid in our CSS-Doodle sketch, it's time to put something inside the cells of the grid. But first, let's review what we have learned so far.

CSS-Doodle Course - The Grid

Click the link above to open the P5 editor and open the CSS-Doodle-Course-The-Grid sketch from the previous tutorial. Click the Play button at the top left to play the sketch in the preview window. As you can see, we have a grid with 10 cells across and down the 400 x 400 pixel grid. Also each cell is filled with a black background. We know this because the 1 pixel grid gap allows the webpage's white background to peak through. We did all this with just these few lines of code (see screenshot).

:doodle {
@size: 400px;
@grid: 10x10;
grid-gap: 1px;
background: #000000;

We learned in the previous tutorials that anything that we write inside the :doodle{} selector, such as the code that sets the @size, @grid and grid-gap, affects the entire grid. But any code outside of the :doodle{} selector affects what is inside the individual grid cells, such as the background fill color for the cells. That's why we put the code for the background color outside of the :doodle{} selector but still inside the <css-doodle></css-doodle> tags.

Now we are ready to take a look at what else we can put in these grid cells. A good start is learning how to 'draw' some basic shapes inside the cells. Luckily for us, CSS-Doodle comes with a preset group of basic shapes. Use the link below to go to the CSS-Doodle website. There you will find a list of shapes and their corresponding code names. Let's start with a simple circle. We can draw a circle inside every cell with one line of code, that we will add below the background code. With this code we are using the @shape property, which draws a circle inside every cell (see screenshot).

@shape: circle;

We already have the previous sketch open, so let's duplicate the sketch. As we are saving these sketches in sequence, rename this copy of the sketch to CSS-Doodle Course - Drawing Basic Shapes, at the top of the window. Open the side menu and rename the .html file as well. Finally in the code, rename the title between the h4 tags. Now add the above code after the background statement and click the Play button to restart the sketch. All of the black rectangles have been replaced with circles.

Notice that these circles are filled with the same black background color. So, you guessed it, if we change the background color we will also change the color of the circles. Let's change the color to pink. Just replace the existing background code to the following. When you click the Play button again, you should see the black circles change to pink (see screenshot). Notice that in the previous tutorial, we set the background color to black by using the HTML HEX (Hexadecimal) code for black (#000000). This time we used the color name 'pink' to change the color. These are just two methods of designating color in code.

background: pink;

Here is the final CSS-Doodle file. CSS-Doodle Course - Drawing Basic Shapes

Have Some Fun
Take a few minutes to play with some of the other basic shapes in the CSS-Doodle list.

@shape: heart;
@shape: star;
@shape: diamond;
@shape: clover;
@shape: bicorn;

But we can't stop here. The fun really happens when we draw our own shapes.

Creating Code Art with CSS-Doodle - Tutorial Series Index

CSS-Doodle Copyright (c) Yuan Chuan. Licensed under the MIT License. CSS-Doodle Documentation.
Screenshots used by permission. Processing (Java), p5.js (JavaScript) and Processing.py (Python) are software projects created by the Processing Foundation.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2021 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.