Part of the Visual Computing course given at Universidad Nacional de Colombia by Jean Pierre Charalambos.
Powered by reveal.
Made possible thanks to...
$ git clone https://github.com/VisualComputing/SceneGraphs.git
$ cd SceneGraphs
$ git checkout gh-pages
|-- css/
|-- js/
|-- plugin/
|-- lib/
|-- fig/
|-- sketches/
|-- index.html
|-- source.md
Refer to the reveal folder structure for more details, and to the Setup below.
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.
-
Install Node.js
-
Install Grunt
-
Install dependencies (you must be already on the presentation folder, otherwise
$ cd SceneGraphs
)
$ npm install
-
Edit the presentation contents using markdown in the
source.md
, adding figures to thefig/
folder and p5.js skectches to theskectches/
folder (detailed instructions below) as needed. -
Serve the presentation and monitor source files for changes
$ grunt serve
- Open http://localhost:8000 to view your presentation
You can change the port by using grunt serve --port 8001
.
p5.js sketches
- Create your js sketch in the
sketches
folder, e.g.,
$ touch sketches/mysketch.js
- Define a canvas id (e.g.,
mysketch_id
) within your mysketch.jssetup
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');
-
Include your sketch as a script in the
index.html
, e.g.,<script src="sketches/mysketch.js"></script>
-
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>