Cognitive | presentation available online here http

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. You can change the port by using grunt serve --port 8001. Use p5.js 'global mode' when including just a single sketch into the presentation.
Install Node.js
Install Grunt
Install dependencies (you must be already on the presentation folder, otherwise $ cd Cognitive)
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.
Serve the presentation and monitor source files for changes
Open http://localhost:8000 to view your presentation
Create your js sketch in the sketches folder, e.g.,
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');
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>