Ever wanted to program generative art graphics?
Ever wanted to create amazing graphics that can work accross web, mobile and installations?
Want an easy environment to sketch your computer graphics in?
Then you've come to the right place.
This tutorial will focus on how to setup Three.js in Visual Studio Code so that you can start coding as quickly as possible. It will be aimed at beginners to generative art, web graphics and three.js so you may want to skim this if you're already versed in these.
1. Setting Up Your Code Editor
To start to code you need someplace to code, store your code files and also run them.
VS Code is a very basic code editor from Microsoft that is lightweight and easy on the eyes - perfect for this tutorial.
After this, go to the extensions tab and download the Liver Server extenson - it should download in a few seconds. This extension will allow us to run our web code locally on our computer as if it were a regular website.
2. What Is Code
There are also scripts and executables. This is fairly large so I'll try and simplify things here. A scripting language, like JS or Python, is a very 'light' and 'high level' programming language, meaning it doesn't interfere much with moving and editing the meory of a computer when it runs. As a result, scripts are often much simpler to write but loose some of the serious horsepower and versatility you can get from a 'lower level' programming language such as C++ or Java.
Often scripts remain as the files they are written in and are run using a runtime or an interpreter. Lower level languages are often compiled and built into executable files called .exe which you have probably seen before. An exe file is a standalone file that only needs to be run on the platform (Linux, Windows or Mac etc) it was built for.
3. What Is A Website
All a website is is a bunch of files structured together in a cohesive way. Just like how you 'browse' books on a shelf, internet browsers browse files - they go to the internet address and read the files at that address. These files can be on any networked computer but are mostly on servers, which are basically just lots and lots of networked computers that companies will 'host' you site on.
So when we access our website, our browser goes to that address, which points to the network the computer is on and where within that computer network, which computer it is on and then where in that computer the files are. You can think of it as simply as another computer holding a folder directory full of files decribing your site; the look of it, how it interacts, any data like images or contact details and much, much more.
4. Your First File
So to get started we need to make a new folder and make a file called index.html in that folder. Then copy and paste the code below:
The index.html file is the first file that any browser looks at. It is the master file and all websites must have one otherwise you will see an error in your browser.
HTML is made up of tags. Each tag is comprised of a pair; <html>...</html> , <head>...</head>, <body>...</body> With the </> denoting the end of the tag.
What these do is tell the browser how to process the data within the tags.
- The whole code is within the <html></html> tag, this tells the browser that everything inside is html code.
- <head></head> tags tell the browser metadata information about the whole page. It's title, how it looks on google, what character set to use and many, many other things. In a proper website this can be huge.
- <body></body> defines everything that we see within the actual page, how it is laid out and how it functions.
For now hit Alt+L, Alt+O to run the code from VSCode in your browser. We are able to do this because we downloaded that Liver Server extension earlier. If we did not we would have had to manually setup and run our own web server on our local machine - which is what this extension does automatically.
From this index.html file we can define a whole bunch of things on our webpage and link to other files of various different types that will do a whole range of different things...
5. Some Style
So we now even though we have a website it doesn't look that great. Let's fix that.
The main other file we need is a CSS file. CSS stands for Cascading Style Sheet. This file defines the style our website will render all our content in. Copy and paste the code below into a file called man.css in a subdirectory called /styles:
Have a go playing with these values and watch your website update whenever you save your file - this is one of the perks of using web-based development, the changes you make are almost instant allowing very fast development and creative flow, something not shared across all programming languages.
Okay we have a baller webpage and it's lookin' good but this is a graphics tutorial so lets actually make some graphics in our browser.
But that isn't what we want right now.
Three.js simplifies things to we can begin creating as soon as possible.
Download Three.js here and put it into a folder called /three somehwere in your system but not in this lessons folder.
Now even though we have access to the whole three.js library we don't want to use all of it in one go. Websites need to be fast and so should contain as few files and lines of code as possible.
Because of this we only want to include the files that are absolutley necissary for us. So let's do that...
Make a new folder called /js/vendor/three/
And copy the three.js and OrbitalControls.js files in there:
After that, make a file called app.js in your /js folder and copy this code in:
From our index.html file we run this script using this line:
This is telling the browser to run the file found in js/ called app.js.
It might look like a lot to take in compared to the other files we have used but it is actually very simple. We will go into the details of our app.js file in the next lesson.
If you have performed all the steps and run your code you should see a nice rotating cube like this:
This lesson has provided an overview of developing graphics for the web and we now have the base development environment for real-time graphics work.
Next, we will go into detail about how these graphics are working so we can create even more sophisticated ones.
Tell a friend about this site,
Want to see more like this?
Consider supporting through the store.
Have an idea, suggestion or just want to say hi?
The please leave a comment!