Introducción a canvas
@rafinskipg
https://leanpub.com/deceroacanvas
<canvas></canvas>
<canvas id="myCanvas"></canvas>
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?
126,272 paquetes
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
[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233]
(1.61803 aprox) número áureo ϕ
Fractales
El juego de la vida
Renderizador de sprites
Gestión de paquetes
Interacción
Canvas NodeJS
...
Gravedad
Suscribirse
https://leanpub.com/deceroacanvas
GRACIAS!
Introducción a canvas
By rafinskipg
Introducción a canvas
Charla del taller de introducción a canvas
- 832