Visual Computing Slides -- Fragment Shaders

Part of the Visual Computing course given at Universidad Nacional de Colombia by Jean Pierre Charalambos.

Powered by reveal.

Made possible thanks to...

Installation

$ git clone https://github.com/VisualComputing/FragmentShaders.git
$ cd FragmentShaders
$ git checkout gh-pages

Folder Structure

|-- css/
|-- js/
|-- plugin/
|-- lib/
|-- fig/
|-- sketches/
|-- index.html
|-- source.md

Refer to the reveal folder structure for more details, and to the Setup below.

Setup

External markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the slides source code.

1. Install Node.js

2. Install Grunt

3. Install dependencies (you must be already on the presentation folder, otherwise $ cd FragmentShaders)

$ npm install

4. Edit the presentation contents using markdown in the source.md, adding figures to the fig/ folder and p5.js skectches to the skectches/ folder (detailed instructions below) as needed.

5. Serve the presentation and monitor source files for changes

$ grunt serve

6. Open http://localhost:8000 to view your presentation

You can change the port by using grunt serve --port 8001.

p5.js sketches

1. Create your js sketch in the sketches folder, e.g.,

$ touch sketches/mysketch.js

2. Define a canvas id (e.g., mysketch_id) within your mysketch.js setup function:

• Use p5.js 'global mode' when including just a single sketch into the presentation.

  function setup() {
      var myCanvas = createCanvas(400, 400);
      myCanvas.parent('mysketch_id');
  }

• Use 'instance mode' if you need to inlcude more than one:

  var sketch1 = function( p ) {
      p.setup = function() {
          p.createCanvas(400, 400);
      };
  };
  var myp5_1 = new p5(sketch1, 'mysketch_id');

3. Include your sketch as a script in the index.html, e.g., <script src="sketches/mysketch.js"></script>

4. Locate your sketch in the source.md at the place you want it to be, using the id: defined in step 2, e.g., <div id='mysketch_id'></div>