Creating Code Art with css-doodle Course

Digital Art and Design
Tutorials for creating code art or computer art in a web browser with css-doodle code.

CSS-Doodle Course - CSS Grid star
In this tutorial, we will continue to work on our first CSS-Doodle project. We have set up our startup file using the p5.js online editor in the last tutorial. Now, we will learn about the CSS Grid Layout Module.

CSS-Doodle Course - Drawing Basic Shapes star
Now that we have created a grid in our CSS-Doodle sketch, it's time to put something inside the cells of the grid. Let's learn how to draw some basic shapes.

CSS-Doodle Course - Online Editor Setup star
Now, we will discuss how to set up a workspace using the P5.js online editor.

CSS-Doodle Course - Qtr Circles with Border Radius star
One CSS-Doodle pattern that is all over the web, so it must be popular, is a grid full of quarter circles. The fun happens when we use CSS-Doodle to randomly draw the quarter circles in to the grid, as we can get some interesting patterns.

CSS-Doodle Course - Startup File star
In this tutorial, we will create a basic css-doodle file that we can use as a startup file for any css-doodle project. As we work through the code, we will discuss what it does.

CSS-Doodle Course - The Grid star
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.

INDEX - Creating Code Art with CSS-Doodle star
CSS-Doodle is a fun way to create code art, i.e. art created on the computer with code. It was created by Yuan Chuan and he released it under the MIT License, so it's free for all of us. All the work is done in HTML and CSS. So, if you are new to code art, CSS-Doodle is a good choice.

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







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