WELCOME TO RATIO CLUB

Week 5

Nodes and Node.js: Small Parts & Modular Designs

node.js

JavaScript is an interpreted language, not a compiled language.

When we load a webpage that uses JavaScript, the server sends the JavaScript file to our computer (the client) and our webbrowser acts as the interpreter - it knows how to use the JavaScript code to make the magic happen.

JavaScript works by taking control of the browser itself. But what if you want to control more than just the browser? What if you want to use JavaScript to use other parts of your computer?

Node.js is another form of JavaScript interpreter. It allows you to run JavaScript without a browser, and it let's you get around the limitations of a web-browser. This means you can do far more complicated things.

Originally created to build web-servers, Node has exploded in popularity since it was created in 2009 because it allows anyone who knows JavaScript to make local programmes.

Using the Command Line

We use Node from the Command Line, which we access through a Terminal.

At first, the Command Line can seem really alien and weird. It's just another interface, another way of navigating through folders and talking to your computer.

Visual Studio Code has an Integrated Terminal (in the top menu under 'View').

Here are some super useful Command Line commands:

cd — Change Directory

cd "name of folder" -- moves down into a folder
cd ../              -- moves up one folder

dir / ls — List Directory

dir -- lists files and folders below (Windows)
ls  -- lists files and folders below (Mac)

clear — Clear the Terminal

gets rid of all the old Terminal text

Ctrl-C / Cmd-C — Abort

tell the Terminal to stop doing what it's doing

To run a JavaScript file in Node, we navigate to the folder that containst the file and use the keyword node followed by the name of the file.

Any time we have used console.log() it will print out in the Terminal which is handy.

require

We can use JavaScript in Node really easily. Variables, Functions, Objects and For Loops all behave the same way in Node.

We can also use packages, which are libraries for Node. These are sometimes also called modules.

To use them, we have to require them, and store them in a variable.

var osc = require("osc");

This variable is an Object that holds all the functionality of that package.
This means we can console.log it to see whats inside - however this can get messy with big packages. Instead, check the package documentation!

npm

But how do we find, install and read about packages?

The answer to all these questions and a few more is npmjs.com

This is the website for npm - Node Package Manager. This comes with Node and installs packages for you.

Once you find a package you want to use, open a Terminal and navigate to where your Node programme is. Then use npm install followed by the name of the package:

npm install osc

EXERCISE

This week we're all gonna collaborate to make a website on the projector.

We'll have to use all the JavaScript we have learned to tell my computer what to do using Node on our individual computers.

We'll do this by requiring a packaged called OSC that allows computers to communicate easily.

Don't worry too much about what OSC is - let's learn by doing. But if you wanna read more about it after, look here

What is Generative Art?

Generative Art is a broad term that gets applied often to art made with code.

To define it losely, it's art where the artist has created a situation or an algorithm where the art then makes itself.

These can be vast and complicated, involving machine learning, data anaylsis and masses of sensors.

It can also be remarkably simple, clean and beautiful.

Generative Art

A Ship Adrift by James Bridle

James Bridle is a British writer and artist who makes a lot of brilliant work analysing computers and technology.

He runs/ran a blog called The New Aesthetic that reported on the weirdness of modern culture.

His work A Ship Adrift uses real-time weather data from the wind direction in London, to move a virtual ship around the a map of the world.

More Info on James Bridle

Roomtone Variations by Nicolas Collins

Nicolas Collins is an American composer and hacker, who's work mainly focusses on how the technology we use to record and replay music is now part and parcel of the music itself.

In the 90s he began hacking CD Players to make generative music.

Roomtone Variations is a composition that is different everytime it is performed. This is because it uses the natural size and ambience of the room it is performed in to decide what tone to play next.

By letting a microphone feedback in the room, a dominant tone is produced. Collins then removes this tone, letting the next dominant tone come through. He repeats this until every tone in the room has been played.

He then gets a number of players to improvise on this score structure.

Some CD music by Nicolas Collins

Saskia Freeke

Saskia Freeke is a Dutch designer, coder and artist. Every day for the past 2 years she has been making geometric gifs with code.

She also wrote a handy guide to making similar things for yourself!

Saskia's guide to making generative art with P5

Saskia's blog of daily work.

Turning Ideas into Algorithms

By now, you know pretty much everything you need to know to programme websites and make local programmes on your own computer.

You have learnt the very basics of how to code.
All you need do now is practice.

There is always so much more to learn, and every new project will probably involved learning something new.

So how do we turn creative ideas into codeable problems we can research and make?

It's important to know how to break the whole project down into smallest individual steps, so that line by line you can tell your computer what to do.

This is what an Algorithm is: a complicated problem broken down in to each of the smallest steps possible, and written up into code.

Algorithmic Planning

Making an idea into an algorithm is the hardest part of writing code. But if you get it right, the rest is easy.

The best coders are those who can analyse a problem and see it step by step. The best way to write code is to make each step as small as possible.

Planning everything out on paper is a great way to visualise the problem. Making a long step-by-step to-do list shows you what needs to happen next and tells you what needs to be broken down further.

Modular Design and Functions

It is generally better to put each step into it's own function, so you can reuse any parts that are the same.

Think carefully what needs to go in and what needs to come out.

You can often copy and paste useful functions into future projects.

Keeping Code Organised

You can also import JavaScript files into any HTML file using the script tag and the src attribute:

<script src="myFile.js"></script>

You can import as many JavaScript files as you need/want to.

This allows you to reuse old code, and also to break parts of your code up into sensible sections.

Be aware that the order you import JavaScript files will be the order the JavaScript is run in.

You can do the same with Node by using Exports

Algorithmic Checklist

When trying to figure out a problem and make anything with code, refer to this handy checklist!

  1. State the project as explicitly as possible
  2. Break it all down into steps from start to finish
  3. Break each of these steps down into smaller steps
  4. Use console.log() as often as possible to check the right thing is happening.
  5. If one part is working, move it into it's own function.
  6. Don't cut corners.

Homework

Please read through Saskia Freeke's guide to making things in P5.js

Then think about what you want to make for you Christmas Project.

When you have the beginning of an idea, start to write down what it is and do this as explicitly as possible.