Greetings

puny humans

James Tease / @whostolemyhat

Demo

Inspiration

Particles are cool

Cogmind

http://www.gridsagegames.com/blog/2014/03/particle-effects/

Code

Canvas drawing

<canvas id="canvas" width="300" height="150"></canvas>

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

Canvas drawing

context.beginPath();
// x, y, radius, startAngle, endAngle, antiClockwise
context.arc(150, 75, 20, 0, Math.PI*2, true);
context.closePath();

// colour it in so we can see it
context.fillStyle = '#ff3';
context.fill();

Draw lots

context.beginPath();
context.arc(150, 75, 20, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = '#ff3';
context.fill();

context.beginPath();
context.arc(10, 95, 10, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = '#f33';
context.fill();

context.beginPath();
context.arc(80, 120, 25, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = '#3f3';
context.fill();

context.beginPath();
context.arc(220, 35, 30, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = '#3ff';
context.fill();

Refactor

function drawCircle(context, x, y, radius, colour) {
    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI*2, true);
    context.closePath();
    context.fillStyle = colour;
    context.fill();
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

drawCircle(context, 150, 75, 20, '#ff3');
drawCircle(context, 10, 95, 10, '#f33');
drawCircle(context, 80, 20, 25, '#3f3');
drawCircle(context, 220, 35, 30, '#3ff');

DRY (again)

Tell the particle to make itself

function Particle() {
    this.x = randomHorzPosition();
    this.y = randomVertPosition();
    this.radius = randomSize();
    this.colour = randomColour();
}

function drawCircle(ctx, particle) {
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = particle.colour;
    ctx.fill();
}

for(var i = 0; i < 10; i++) {
    drawCircle(new Particle());
}

Animation

The fun stuff

The game loop

• update
• draw

The loop

Lots of drawing

60fps = call drawCircle() 60 times per second

setInterval()

var particles = [];
for(var i = 0; i < 10; i++) {
    particles.push(new Particle());
}

setInterval(function() {
    for(var i = 0; i < particles.length; i++) {
        drawCircle(particles[i]);
    }
}, 16); // 1000ms / 60fps = ~16ms

Problems with setInterval

• Inaccurate (lag)
• Runs even in background
• Fixed FPS

requestAnimationFrame

// named function containing rAF
(function animation() {
    // call rAF and pass in your animation loop
    requestAnimationFrame(animation);

    // do all your drawing
    for(var i = 0; i < particles.length; i++) {
            drawCircle(particles[i]);
    }
})(); // IIFE

Movement

• update
• draw

Update in each frame

(function animation() {
    requestAnimationFrame(animation);



    for(var i = 0; i < particles.length; i++) {
            var particle = particles[i];

            // update each particle
            particle.x += randomHorzMovement();
            particle.y += randomVertMovement();

            // draw
            drawCircle(particle);
    }
})();

Well, that didn't work

Clear canvas each frame

(function animation() {
    requestAnimationFrame(animation);

    // clear screen
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    for(var i = 0; i < particles.length; i++) {
            var particle = particles[i];

            // update each particle
            particle.x += randomHorzMovement();
            particle.y += randomVertMovement();

            // draw
            drawCircle(particle);
    }
})();

Beter, but not quite right

Generate movement on particle creation

function Particle() {
    this.x = randomHorzPosition();
    this.y = randomVertPosition();
    this.velocityX = randomHorzMovememnt();
    this.velocityY = randomVertMovement();

    this.radius = randomSize();
    this.colour = randomColour();
}

Particles from a point

Particles should come from the same point

var x = context.canvas.width / 2;
var y = context.canvas.width / 2;

(function animation() {
    requestAnimationFrame(animation);

    // clear screen
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    for(var i = 0; i < particles.length; i++) {
            var particle = particles[i];

            // update each particle
            particle.x += particle.velocityX;
            particle.y += particle.velocityY;

            // draw
            drawCircle(particle);
    }
})();

Enough of circles!

Let's use letters

Letters all have character codes

// Find the character code of lowercase a
'a'.charCodeAt(0)
// -> 97

// ... and uppercase
'A'.charCodeAt(0)
// -> 65

Uppercase letters start at 65, lowercase letters start at 97, punctuation starts at 33

Letters from numbers

String.fromCharCode(33)
// -> "!"

String.fromCharCode(65)
// -> "A"

Pick random letter

function randomNumberInRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickALetterAnyLetter() {
    // interesting characters in the range 33 - 126
    return String.fromCharCode(randomNumberInRange(33, 126));
}

function Particle() {
    ...
    this.letter = pickALetterAnyLetter();
}

Drawing text

function drawParticle(context, particle) {
    context.fillStyle = particle.colour;
    context.font = 'bold 14px arial';
    context.fillText(particle.letter, particle.x, particle.y);
}

Change the letter

function changeParticleLetter(particle) {
    particle.letter = pickALetterAnyLetter();
}

(function animloop(){
    requestAnimFrame(animloop);
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);


    for(var i = 0; i < particles.length; i++) {
        // change the letter
        changeParticleLeter(particles[i]);

        updateParticlePosition(particles[i]);
        drawParticle(context, particles[i]);
    }
})();

Frame-rate dependent

Letters change every frame - not what we want

Animation independent from framerate

Check how much time has elapsed since the last frame

Use the difference (delta) between last frame and current time as basis for movement

Check the delta

// store the current time
var time;

function Particle() {
    ...
    // last time particle changed letter
    var changeLetterDelta = 0;

    // how long should we wait for the letter to change?
    var changeLetterThreshold = 250; // 250ms
}

(function animloop() {
    requestAnimFrame(animloop);
    
    // get current time
    var now = new Date().getTime();

    // difference between last frame (time) and current time (now)
    var delta = now - (time || now);

    // since we're now rendering a frame, save the current time as the time of the last frame
    time = now;

    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    
    for(var i = 0; i < particles.length; i++) {
        var particle = particles[i];

        // particles keep track of the last time they changed letter
        particle.changeLetterDelta += delta;
    
        // add the current time to the last time particle changed letter
        // if it's past a certain point (changeLetterThreshold) then change
        if(particle.changeLetterDelta >= particle.changeLetterThreshold) {
            changeParticleLeter(particle);
            particle.changeLetterDelta = 0;
        }

        updateParticlePosition(particle);
        drawParticle(context, particle);
    }
})();

Slides

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es.

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

• No order here
• Or here
• Or here
• Or here

Fantastic Ordered List

Markdown support

For those of you who like that sort of thing. Instructions and a bit more info available here.

<section data-markdown>
  ## Markdown support

  For those of you who like that sort of thing.
  Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
</section>

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Themes

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Reveal.addEventListener( 'customevent', function() {
    console.log( '"customevent" has fired' );
} );

Background Transitions

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide".

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

Pretty Code

function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) {
        node.className += ' roll';
      }
    }
  }
}

Courtesy of highlight.js.

Intergalactic Interconnections

You can link between slides internally, like this.

Spectacular image!

Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

• Try the online editor
• Source code on GitHub
• Follow me on Twitter

THE END

BY Hakim El Hattab / hakim.se