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. In the last tutorial, we created a startup file for a css-doodle project. Now, we will discuss how to set up a workspace using the p5.js online editor. Use the link below to view the final code.

CSS-Doodle - 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 Processing project. If you are interested in creating art in p5.js Processing, see the Index link below. However, for this course, we will be coding in css-doodle. So we need to make some changes to the default code.

Let's start by changing the name of the project from the default name, which is usually a cute, made-up name. For example, my new file is named Principled Carrot. Let's change that to css-doodle-course and save it before we start working.

Note: Projects created with the p5.js Processing online editor are called Sketches.

  1. Click the default project name in the top center of the Editor and type in the new project name css-doodle-course (see screenshot).

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

  3. To view your Sketches, just click My Account - My Sketches, to be taken to a list of all of your Sketches. (see screenshot)

  4. To return to the Editor, click the Back to Editor link at the top left.

  5. One last thing we need to discuss is the default files. You should be looking at the sketch.js file in the Editor window. As the default project is a p5.js Processing project, we need to make some changes to convert to a css-doodle project. First let's open the file menu.

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

  7. As you can see, we have three files, including the sketch.js, index.html and style.css. As we will be coding only in the HTML file, let's delete the other two.

  8. 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).

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

  10. That leaves just the HTML file. But at this point, the code in the file is for the p5.js project. Notice the two <script> tags at the top that point to, or call in, two p5.js files. We don't need to call in these files but we will need to call in a special JavaScript library file for working in css-doodle. You might remember this from the last tutorial, when we created the css-doodle-startup.html startup file for our css-doodle projects. Because you have the startup file saved to your computer, we can easily copy/paste the code from the previous file in to this new file and save this new file as an online copy of our startup file. First, let's remove the existing code.

    Note: If you haven't read the previous tutorial, just click the link above to open the startup file in the embedded editor.

  11. In the online Editor, select the code, right-click and choose Delete (see screenshot).

  12. Open the css-doodle-startup.html file that you saved to your computer or open the link above. Select the text, right-click and choose Copy.

  13. Click inside the online Editor window, right-click and choose Paste.

  14. Now let's rename this file from index.html to css-doodle-startup.html.

  15. Select the index.html file name and click the arrow to open the menu. Choose Rename and type in the new name for the file (see screenshot).

Congratulations, you are ready to code your first css-doodle pattern.

Creating Code Art with css-doodle - Tutorial Series Index

Coding Art in p5.js Processing - 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.