Academy PRO: HTML5 API graphics

HTML5 APIgraphics

binary-studio.com

Plan❖Canvas❖SVG❖WebGL

Canvas

What is canva? z?

"Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.”

<canvas></canvas>

Coord system

Let’s look at example...

http://codepen.io/anon/pen/grWvmv

Canvas can be used inGamingAdvertisingData Representation.Education and Training.Art and Decoration..

Wikipedia гласит:

Why canvas?Unlike SVG is much more convenient to deal with a large number of elements;

It has hardware acceleration

You can manipulate each pixel

You can apply image processing filters

There are a lot of libraries

Why not?Loading the CPU and RAM;

Due to the limitations of the garbage collector, there is no way to clear the memory;

It is necessary to handle events with objects

Poor performance at high resolution

We have to draw in each element separately

Canvas contextvar canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

Default properties❖Size - 300x150

❖id

❖Checking for availability

Cute examplehttp://codepen.io/anon/pen/GZmozE

Reality and expectationshttp://image.shutterstock.com/z/stock-vector-animal-portrait-with-flat-design-dog-german-shepherd-vector-illustration-188712326.jpg

http://codepen.io/anon/pen/EKWZyQ

More Canvas exampleshttp://corehtml5canvas.com/code-live/

Canvas libsKineticJS

Paper.js

EaselJS

Fabric.js

oCanvas

jCanvas

jCanvas example!http://codepen.io/SitePoint/pen/OMZNQx

Siteshttp://wineexplorer.brancottestate.com/attribute/varietal

https://www.google.com.ua/maps/

Lazy? Solution crazy!http://blog.mikeswanson.com/ai2canvas

SVG

SVG? (Schtirlitz V Gorode)

SVG is a language for describing two-dimensional graphics. As a standalone format or when mixed with other XML, it

uses the XML syntax [XML10]. When mixed with HTML5, it uses the HTML5 syntax [HTML]. …

SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by

embedding SVG animation elements in SVG content) or via scripting.

Coordinate system

Viewbox<svg width="800" height="600" viewbox="0 0 400 300">

<!-- SVG content drawn onto the SVG canvas -->

</svg>

https://sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html

SVGAny size - same quality

Search engine bots

Independence from JavaScript

SVG consBig file size.

Maps - small elements require reading whole doc.

Less details - more size

Let’s look

http://codepen.io/anon/pen/vGmdwj

Path<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

SVG statisticshttp://w3techs.com/technologies/details/im-svg/all/all

SVG vs Icon Fonthttps://github.com/blog/2112-delivering-octicons-with-svg

Libshttp://gojs.net/latest/index.html?gclid=Cj0KEQjw2sO3BRD49-zdzfb8iLwBEiQAFZgZfFNqJ57UgHyo2agqHIVUOyD4YooXa3FAli_VPNGNPXMaApZT8P8HAQ

https://bonsaijs.org/

http://processingjs.org/

http://fabricjs.com/

https://d3js.org/

http://snapsvg.io/

D3// Update…var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(d) { return d; });

// Enter…p.enter().append("p") .text(function(d) { return d; });

// Exit…p.exit().remove();

Playhttp://sheav.se/en

Fight baby, fight!http://codepen.io/chris-creditdesign/details/BIADJ

So?

WebGL

What the heck is WebGL??WebGL allows web content to use the API, based on OpenGL ES 2.0, for rendering three-dimensional graphics without the use of plug-ins in the HTML canvas element in browsers that implement support for it. WebGL programs consist of control code written in JavaScript code and special effects (shader code) that runs on the GPU. WebGL elements can be mixed with other HTML elements, and assembled with other parts of a web page or a web page background.

WebGL is contextvar gl;try { gl = canvas.getContext("experimental-webgl");} catch(e) {}

UsesGLSL (OpenGL Shading Language)

WebGL prosShows a promise of 3D with dramatically lowered friction. No client or plugin install necessary.

Royalty-free open standard shepherded by the Kronos consortium -http://www.khronos.org/

Uses HTML5's canvas element and so is part of a larger change taking place on the web rather than an isolated technology.

Browser makers Mozilla, Opera, Apple & Google are all onboard.

Transparent development of spec. Majority of discussion takes place atwww.khronos.org/webgl/public-mailing-list/

Gives access to the power of a computer's graphics hardware from within scripts on web pages.

Web GL consNot yet available beyond betaversions of Firefox, Opera, Safari and Chrome browsers. Later this year

seems to be current best guess for spec hitting v1.0. Seems that the remaining issues are related to getting security right. Good news is that as soon as spec is signed of on then implementations should be ready to roll out.

Microsoft has not signed on. The way to get it to run in IE will likely by with the Chrome Frame plugin.

Depends on having OpenGL 2.0 drivers present which many computers will not have.http://code.google.com/p/anglepr... is an open source project by Google to address this issue.

Despite recent improvements Javascript may still feel too slow or just plain unfamiliar to people used to writing rich 3D applications.

Most developer libraries are still in an early stage. Partial list:http://www.khronos.org/webgl/wik...

Look insidehttp://codepen.io/kenjiSpecial/pen/vELOrM

DiffOne main difference is that a vertex shader can manipulate the attributes of vertices. which are the corner points of your polygons.

The fragment shader on the other hand takes care of how the pixels between the vertices look. They are interpolated between the defined vertices following specific rules.

https://hacks.mozilla.org/2013/04/the-concepts-of-webgl/

To readhttps://hacks.mozilla.org/2013/04/the-concepts-of-webgl/

<script id="vshader" type="x-shader/x-vertex">

uniform mat4 u_modelViewProjMatrix; uniform mat4 u_normalMatrix; uniform vec3 lightDir;

attribute vec3 vNormal; attribute vec4 vTexCoord; attribute vec4 vPosition;

varying float v_Dot; varying vec2 v_texCoord;

void main() { gl_Position = u_modelViewProjMatrix * vPosition; v_texCoord = vTexCoord.st; vec4 transNormal = u_normalMatrix * vec4(vNormal, 1); v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); }

</script>

<script id="fshader" type="x-shader/x-fragment">

precision mediump float;

uniform sampler2D sampler2d;

varying float v_Dot; varying vec2 v_texCoord;

void main() { vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t); vec4 color = texture2D(sampler2d, texCoord); color += vec4(0.1, 0.1, 0.1, 1); gl_FragColor = vec4(color.xyz * v_Dot, color.a); }

WebGL libsglMatrix JavaScript Matrix and Vector library for High Performance WebGL apps

Sylvester An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.

A little bit more https://www.khronos.org/webgl/wiki/User_Contributions#Frameworks

Complexityhttps://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL

WebGL exampleshttps://jayweeks.com/medusae/

http://osr.org/oms/

http://madebyevan.com/webgl-water/

http://labs.gooengine.com/pearl-boy/