CSS-Doodle Course - Online Editor Setup

CSS-Doodle Course - Online Editor Setup
CSS-Doodle is a free web component for creating patterns on the computer using code. The code we will be using is the commonly used code for webpages, HTML and CSS. Now, we will discuss how to set up a workspace using the online p5.js Editor. Use the link below to view the example code.

CSS-Doodle Course - Online Editor Setup

The Processing Foundation, the creators of the free and open source Processing projects, have supplied their community with an online coding environment (editor), which makes teaching, learning and sharing code art projects very easy. In fact, when you clicked the link above, you opened an embedded editor window showing one of the files in my account.

p5.js Editor

The first thing that you need to do is sign up for a free account. Once signed in to your account, you will see a new project (see screenshot) with some basic code for starting a p5.js Processing project, which is called a sketch. However, for this course, we will be using CSS-Doodle. So we need to make some changes to the default code.

Let's start by changing the name of the sketch from the default name, which is usually a cute, made-up name. For example, my new sketch is named Catkin mall. Let's change that to CSS-Doodle Course - Startup File and save it before we start working.

  1. Click the default sketch name in the top center of the editor and type in the new sketch name CSS-Doodle Course - Startup File (see screenshot).

  2. From the top menu, click File - Save to save the project as a new sketch.

  3. You should be looking at the sketch.js file in the editor window. We will be adding our code in to the index.html file. Let's open the sketch Files menu.

  4. Click the < arrow to open the menu (see screenshot).

  5. As you can see, we have three files, which are the sketch.js, index.html and style.css. As we only need the index.html file, let's delete the other two files.

  6. Select the index.html file in the menu, to put the that code in to the editor window.

  7. Place your mouse over the sketch.js file name and you will see another arrow appear next to the name. Click the arrow and choose Delete from the menu (see screenshot).

  8. Repeat the last step to delete the style.css file.

  9. That leaves just the index.html file. But at this point, the default code in the index.html file is for a p5.js project. Let's remove the existing code and replace it with code for using CSS-Doodle.

  10. In the online editor, select all of the code, right-click and choose Delete (see screenshot).

  11. Now let's copy/paste the code from the example file.

  12. Click the link at the top of the tutorial, to open the editor window that has the example code. Type that code in to your own editor window.

  13. Now let's rename this file from index.html to CSS-Doodle-Course-StartupFile.html.

  14. In the Sketch Files menu, select the index.html file name and click the arrow to the right of the name. Choose Rename and type in the new name for the file (see screenshot).

In the next tutorial, we will take a look at the code.

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