From the course: Coding for Visual Learners: Learning JavaScript from Scratch

Environment setup - JavaScript Tutorial

From the course: Coding for Visual Learners: Learning JavaScript from Scratch

Start my 1-month free trial Buy for my team

Environment setup

“

- [Instructor] There are a couple of ways you can start using p5.js and JavaScript. One option is to visit the p5.jsS website and download the p5.js source code onto your system. If you are to go to the p5.js website and click to download link, here, you can find the link to be able to download the entire source code of p5.js. At time creation of this course, the download page has a link called p5.js complete, which includes the p5.js library and an example project. Download this archive file and find the folder names empty-example inside it. In this folder, you will find two files, the sketch.js, where you can write JavaScript codes and an index.html file that can be launched with a web browser such as Chrome and would execute and display the results of the Java script code inside the sketch.js file. You can also find a copy of these files on my GitHub repository as well. Even though you can change the contents of sketch.js JavaScript file with a plain text editor like Notepad, you might instead want to use a code editor such as Sublime Text to do so. A code editor is pretty similar to a text editor like Notepad or Word but it has special features that make coding much easier, such as highlighting of special words for a given programming language. In our case, that language is JavaScript. Sublime Text is a code editor that can be downloaded for free. Perhaps the easiest way to get started with p5.js and JavaScript is to use an online editor though. An online code editor can be used inside a web browser and doesn't require you to install anything on your system. It's my preferred way of working when I'm learning, as it makes it really easy to get started. An easy to use online code editor that is available at the time of the preparation of this course is the p5.js Online Editor. If this link is not accessible for any reason, you also try the p5.js template that is hosted on my Code Pen account. Code Pen is a social development platform that allows you to write code in the browser and share your work with other developers. It's a great environment for development and experimentation. The difference between Code Pen and the p5.js Editor is that thep5.js Editor only allows you to run p5.js related code inside itself. Whereas Code Pen can execute any front end Java script code. Once we launch the p5.js Editor, you will see an area where we can write our codes. How this online editor works is that whenever we have some code ready to be executed, we will press the play button at the top of the page. This play button will show the results of our code on the right hand side panel. The online editor of Code Pen is slightly different in that it automatically executes the codes, anytime you change it. Pressing the play button, at this point, wouldn't do much, as we didn't write any code that draws shapes to the screen. We will just see an empty screen get generated. But as we can see, this editor has some code already written into it. This code that we see is needed for almost all the p5.js programs that we will be writing. So it's included here for our convenience. Let's just delete this code for now though, because before we start using p5.js to learn JavaScript, we will see a couple of things on the fundamentals of JavaScript.

Contents