Skip to content
ixfx

Starting with your computer

With this approach, you’ve got a copy of the demos on your computer

Benefits

  • Reliable: Once setup, you don’t need an internet connection, stable copy of ixfx that doesn’t change
  • Safer: Excellent hinting & support from VS Code.

Disadvantages

  • Closed: Can’t use cross-device websockets without additional steps.

Requirements

Optional

First-time setup

  1. Install Visual Studio Code
  2. Install the Github Desktop app
  3. Open repository (or if this doesn’t work, Github Desktop, choose File > Clone a repository. Paste in in https://github.com/ixfxfun/demos.git. The folder you clone it to is where you will edit your own sketches.
  4. In Github Desktop, right-click on the name of the repository and choose ‘Open in Visual Studio Code’

When you open the folder for the first time, VS Code might prompt you to install recommended extensions. Choose ‘Install’ for these.

An important extension to install (if it doesn’t happen automatically) is Five-Server.

Running

Click ‘Go Live’ Go Live button on VS Code toolbar

After you do that, you’ll see the URLs of your server. CMD+click the link and it will open. In the toolbar in the bottom-right, you can click the URL to stop the server. URLs

Advanced

Orientation

Each demo sketch is organised into a category using folders, such as the sketch circle-fill, living under visuals.

  • Directoryaudio/
    • …
  • Directorycamera/
    • …
  • Directoryixfx/
    • …
  • …
  • Directorystarters/
    • …
  • Directoryvisuals/
    • Directorycircle-fill/ a sketch folder
      • index.html
      • script.js
      • README.md
    • Directoryfunction-plot-canvas/
      • …
    • Directoryparticle-things/
      • …
    • Directorythings-canvas/
      • …
  • …
  • index.html
  • README.md

View the output via the Go Live button in the VS Code toolbar. By default it will start a web server so that your sketches are available at: http://127.0.0.1:5500. This server is only accessible from your own computer.

Whenever you save a file the browser should automatically refresh.

This will show a web page to let you navigate them in the browser. The URL structure mirrors the folder structure. For example visuals/circle-fill can be opened with http://127.0.0.1:5500/visuals/circle-fill/

Since the sketch folders are so lightweight, make many copies, so you always have a version to go back to, and it feels safe to try different variations. Try to avoid editing the original, for the same reasons.

For example, maybe you make a bunch of different sketches under a pointers directory. Some of them you name to remember which is which, others are just versioned with a simple number:

  • Directorypointers/
    • Directoryslow/
      • index.html
      • script.js
    • Directory01/
      • index.html
      • script.js
    • Directory02/
      • index.html
      • script.js

Importing ixfx

You’ll see examples of how to import ixfx from the demo files. Read on to the next section for what the ../ bits means in the import statement.

All the main modules are included in ‘bundle.js’, for example:

import { Modulation, Geometry } from 'ixfx/bundle.js'

You can import modules one-by one:

import * as Geometry from 'ixfx/geometry.js'

Or import sub-modules or individual functions:

import { Points, degreesToRadian } from 'ixfx/geometry.js';

Paths

In most cases we import from files from the same folder as the main sketch, eg:

import * as Util from './util.js'

The ./ part of the path means ‘same location’, that is, look for ‘util.js’ in the same folder as the script being executed.

At times we need to reach up a level in the folder structure to use a file shared by several sketches:

import * as Common from '../common.js'

The ../ part means ‘up one level’. That is, look for ‘common.js’ in the parent folder of the script being executed. These can be combined to go up as many levels as you need:

// Go up two levels
import * as Common from '../../common.js'

And we can even go up and then back down some other path. Eg to get a file from a sibling sketch:

import * as Blah from '../other-sketch/blah.js'

In the above example, we go up one level in the hierarchy, then down into ‘other-sketch’ and look for ‘blah.js’.