3. Introduction
JavaScript graphic libraries are free, easy to use and are based on html5
canvas element or svg technology.
They provide easy and efficient tool for creating:
2d elements: lines, curves, shapes
3d content: polygons , perspective
Styling: shades, filters
Graphs and charts,
Drag and drop interactive elements,
Animations without using Flash technology
http://www.html5canvastutorials.com/labs/html5-canvas-ultimate-flash-
killer/
3
4. Most popular JS graphic libraries
D3.js
Powerful library for manipulating data based documents, allows to bind arbitrary data to
DOM and create original effects to visualize them.
Does not support well IE earlier versions.
http://bl.ocks.org/mbostock/3943967
http://mbostock.github.io/d3/tutorial/circle.html
Processing.js
The code is written using Processing language and then it is included in HTML page, good
for creating interactive graphic elements.
http://mariuswatz.com/works/abstract01js/index_auto.html
Raphael
Draws graphics for web sites using SVG for most browsers, VML for older versions of IE.
http://raphaeljs.com/curver.html
http://raphaeljs.com/polar-clock.html 4
5. Most popular JS graphic libraries
KinetcJs
Used for rendering 2d content such as curves, lines , shapes in static or animated way
http://www.html5canvastutorials.com/labs/html5-canvas-wheel-of-fortune/
Three.js
Used for rendering 3d content
http://blackjk3.github.io/threefab/
BonsaiJS
Used for creating svg based graphics
http://demos.bonsaijs.org/demos/rainbow/index.html
5
6. HTML5 Canvas element
Tag similar to any other html tag
The contents of the tag is rendered with JavaScript
Context is an object used to render graphics inside the canvas element
The context can be 2d or webgl (3d)
6
7. HTML5 Canvas element
Within canvas element you can draw lines, curves, polygons
Line Quadratic curve
Polygon
7
9. Multiple possibilities exist for animating elements:
you can apply linear movement, oscillation movement, random direction
movement, rotation based on mathematical formulas :
http://www.html5canvastutorials.com/kineticjs/html5-
canvas-all-easing-functions-with-kineticjs/
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-
animate-position-tutorial/
You have the possibility to make elements move only within the boundaries of
delimited area :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-shapes-
horizontally-or-vertically-tutorial/
9
10. Three.js
Three.js is used to render 3d content with renderer object
var renderer = new THREE.WebGLRenderer();
3d objects are represented by meshes
var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300)
Then Meshes are added to the scene
scene.add(plane);
Scene is then rendered with camera, orthographic and perspective
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 1, 1000);
http://www.html5canvastutorials.com/three/html5-canvas-webgl-plane-with-three-js/
10
11. Three.js
Different lights are available such as spot light, point light, ambient light etc
You apply different textures and materials to the meshes
var material = new THREE.MeshPhongMaterial({color: 0xe4e4e4});
Very impressive results can be achieved when rendering complex shape object
modeled with a 3d modeling program such as Blender.
You can also give to the user the possibility to interact with the scene and modify
dynamically the content of the scene.
http://threejs.org/examples/webgl_materials_cubemap_balls_reflection.html
http://carvisualizer.plus360degrees.com/threejs/
11
14. About Betclic
• Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio
comprising various complementary international brands: Betclic, Everest Gaming, bet-at-
home.com, Expekt…
• Active in 100 countries with more than 12 million customers worldwide, the Group is
committed to promoting secure and responsible gaming and is a member of several
international professional associations including the EGBA (European Gaming and Betting
Association) and the ESSA (European Sports Security Association).
• Through our brands, Betclic Everest Group places expertise, technological know-how and
security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion
of our players.