CSS-Doodle Course - The Grid

CSS-Doodle Course - The Grid
In this tutorial, we will apply what we have learned about the CSS grid, as we add the code for the grid to our CSS-Doodle startup file. Use the link below to view the completed code for this tutorial.

CSS-Doodle Course - The Grid

Here is all the code put together in the <css-doodle> tag, with the correct values for each parameter.

<css-doodle>
:doodle {
@size: 400px;
@grid: 10x10;
grid-gap: 1px;
}
background: #000000;
</css-doodle>


New CSS-Doodle Sketch

Let's make a new sketch for this project in the p5.js Editor. Login to your account and go to My Sketches. Click the CSS-Doodle Course - Startup File sketch, to open the sketch in to the editor. Let's duplicate this sketch.

  1. With the CSS-Doodle Course - Startup File sketch open, click File - Duplicate (see screenshot) from the top menu to make a duplicate of the CSS-Doodle Course - Startup File sketch.

  2. You will see the sketch name change to CSS-Doodle Course - Startup File copy.

  3. Select the sketch name and change it to CSS-Doodle Course - The Grid (see screenshot).

  4. Now let's rename this copy of CSS-Doodle-Course-StartupFile.html file.

  5. With the file still selected in the menu, click the arrow to the right and choose Rename. Rename the HTML file to CSS-Doodle-Course-Grid.html (see screenshot).

  6. Let's update the header title for this tutorial (see screenshot).

  7. Change the header title to CSS-Doodle Course - The Grid.

  8. Change the code in the <css-doodle> tag to the following.

  9. <css-doodle>
    :doodle {
    @size: 400px;
    @grid: 10x10;
    grid-gap: 1px;
    }
    background: #000000;
    </css-doodle>


  10. Click File - Save to save your changes to the code.

  11. Click the Run button (see screenshot) to see your grid.

Try changing the parameter values for each property in the CSS-Doodle code and click the Run button to see the results. Unless coded otherwise, a square will be drawn in each cell of the grid by default. So you have just created a simple repeat pattern of black squares. In the next tutorial, we will experiment with some other design elements.

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.





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





Content copyright © 2019 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.