Introducción a canvas

@rafinskipg

https://leanpub.com/deceroacanvas

Mucho más...

Conceptos básicos

Pilla el repositorio

https://github.com/rafinskipg/taller_canvas

Coordenadas

Contexto

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

Ejercicio: 

Dibuja un cuadrado de 200X200 en las coordenadas 100,100

Rellenalo de azul

Rotando y trasladando

context.rotate(radians)

Ejercicio, rota tu cuadrado 45 grados

context.translate

Añadiendo animación

function mainGameLoop(){
  //Calculate delta time

  update(dt);
  
  clear();

  render();

  requestAnimationFrame(mainGameLoop);
 }

 mainGameLoop();

! setTimeOut  && ! setInterval

Es un tema de velocidades...

//Calcular el diferencial o delta de tiempo
var now = Date.now();
var dt = now - then;
then = now;

update(dt);

function update(dt){
  posicionX += dt * velocidad;
}

Ejercicio: 

Altera la posición x e y en la función update

Refactor

function initialize(){
    //Do do do
}

function update(dt){
    //da da da
}

function render(context, canvas){
    //de de de
}

function clear(){
    //nope nope nope
}

initialize();

function initialize(canvas){
    //Inicializamos el motor
    var myEngine = new Engine(canvas);
    
    //Añadimos los callbacks para cada fase
    myEngine.addStartCallback(start);
    myEngine.addUpdateCallback(update);
    myEngine.addRenderCallback(render);
    
    //Empezamos la animacion
    myEngine.start();
}

Vector2D

this.speed = new Victor(200, 200);

this.speed.x === 200

//Multiplicar por delta
this.speed.multiply(new Victor(200, 200))

//Si hay que rotar el vector
this.speed.rotateDeg(grados)

//Si hay aceleración
this.speed.add(new Victor(200, 200))

//Añadimos la aceleración
this.speed.add(this.acceleration);

//Calculamos el diferencial de posición en el tiempo
var posDt = this.speed.clone()
                .multiply(new Victor(dt/1000, dt/1000));

//Lo añadimos a la posición
this.pos = this.pos.add(posDt);

Creando un motor de renderizado

function Engine(){
    updateCallbacks = [];
    renderCallbacks = [];
}

Engine.prototype.addUpdateCallback = function(cb){
    //ey
}

Engine.prototype.addRenderCallback = function(cb){
    //potato
}

Engine.prototype.loop = function(){
    //Delta time calculus && call hooks
}

CommonJS

var Engine = require('./Engine');

function initialize(){
    //Do do do
}

function update(dt){
    //da da da
}

function render(context, canvas){
    //de de de
}

module.exports = {
  initialize : initialize
}

How?

browserify main.js -o bundle.js

browserify: {
  options: {
    debug: true,
    transform: ['reactify'],
    extensions: ['.jsx']
  },
  dist: {
    options: {
      external: ['react/addons'],
      alias: ['react:']  // Make React available externally for dev tools
    },
    files: {
      'app/bundle.js': ['app/scripts/main.js'],
    }
  }
},

Una espiral

var angleBetweenPoints = ANGLE / MAX_POINTS;
var angle_incr = Utils.degreeToRadian(angleBetweenPoints);
var distanceBetweenPoints = (spiral_radius/ MAX_POINTS)

for (var i = 1; i <= MAX_POINTS; ++i) {
  var angle = i * angle_incr;
  var distanceFromCenter = i * distanceBetweenPoints;
  
  var x = centerX + Math.cos(angle) * distanceFromCenter;
  var y = centerY + Math.sin(angle) * distanceFromCenter;

  context.lineTo(x, y);
}

Sucesión Fibonacci

(1.61803 aprox)  número áureo ϕ

Fractales

Suscribirse

https://leanpub.com/deceroacanvas