ADVANCED FRONTEND DEVELOPMENT

hello,

Objectives

  • Animation
  • Tween engines
  • Creative Frontend development
  • WebGL/GLSL

What's Animation?

Should I animate it in codes?

  • Is it interactive?
  • Is it too simple to code?

YES! 

NO!

Code it. Yeah!

Sprite/Video

Frame by frame
animation

function loop() {
    // clamp at maximum 60fps in browser
    requestAnimationFrame(loop);
    render();
}

function render() {
    // draw something
}
function lerp(from, to, ratio) {
    return from + (to - from) * ratio;
}

Lerp

// lazy shorthand
currentValue += (newValue - currentValue) * 0.1;
currentValue = lerp(currentValue , newValue, 0.1);

Framerate independent  Easing

Tween Engines

TweenMAX

Tween.JS

TweenMax.to(elem, duration, {property: value, ease: easingFunction});

TweenMax.fromTo(elem, duration, {property: fromValue}, {property: toValue});
var tweenObj = {animation: 0};
TweenMax.to(tweenObj , 2, {animation: 1});

Which easing function should I use?

  • Physically makes sense
  • Cheaper

Physically
makes sense

Which easing function should I use?

EaseInOut

EaseOut / EaseIn

Cheaper

Which easing function should I use?

For example in CSS:

  • Opacity
  • Background-color
  • Border-radius
  • Width/Height
  • ...

Graphics tools

Grapher(Mac)

Creative Frontend Development

If you cant resolve the problem mathematically, try to resolve it visually.

Edan Kwan ( 1986-present)

What's WebGL?

WEBGL !== 3D 

 !== THREEJS

  • OpenGL ES 2.0
  • Lower level rendering
  • Experimental(still)

Popular Libraries
for WebGL

2D

3D

Pixi.js

Two.js

Three.js

Babylon.js

Unity?

Goo

Shader Language

Vertex Shader

Fragment Shader

var vertices = [x0, y0, x1, y1, x2, y2...]

gl.drawArrays(gl.triangles, ..

// OR DrawElements with Indices
gl.drawElements(gl.triangles, ..

Vertex shader

attribute vec2 aPosition;

void main(void) {
    gl_Position = vec4(aPosition, 0.0, 1.0);
}

JS with WebGL API

GLSL

  • gl.POINTS
  • gl.LINES
  • gl.LINE_STRIP
  • gl.LINE_LOOP
  • gl.TRIANGLES
  • gl.TRIANGLE_STRIP
  • gl.TRIANGLE_FAN
var texture = gl.createTexture();
texture.image = image;
gl.bindTexture(gl.TEXTURE_2D, texture);

Fragment shader

uniform sampler2D uTexture;

varying vec2 vTexCoord;

void main() {
    gl_FragColor = texture2D(uTexture, vTexCoord);
}

JS with WebGL API

GLSL

Texture

GLSL qualifier

  • attributes
  • uniform
  • varying

GLSL Data Types

  • float
  • bool
  • int
  • vec2
  • vec3
  • vec4
  • ivec2...
  • bvec2...
  • mat2
  • mat3
  • mat4

daily award winning sites

Thank you!

advance_frontend_development

By Edan Kwan

advance_frontend_development

Work in progress

  • 391

More from Edan Kwan