css-doodle Course - Online Editor Setup
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.
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.
- Click the default project name in the top center of the Editor and type in the new project name css-doodle-course (see screenshot).
- From the top menu, click File - Save to save the project as a new Sketch.
- To view your Sketches, just click My Account - My Sketches, to be taken to a list of all of your Sketches. (see screenshot)
- To return to the Editor, click the Back to Editor link at the top left.
- Click the < arrow to open the file menu (see screenshot).
- 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).
- Repeat the last step to delete the style.css file.
- In the online Editor, select the code, right-click and choose Delete (see screenshot).
- 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.
- Click inside the online Editor window, right-click and choose Paste.
- 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).
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.
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.
Note: If you haven't read the previous tutorial, just click the link above to open the startup file in the embedded editor.
Now let's rename this file from index.html to css-doodle-startup.html.
Creating Code Art with css-doodle - Tutorial Series Index
Coding Art in p5.js Processing - Tutorial Series Index
Editor's Picks Articles
Top Ten Articles
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.