Your SlideShare is downloading. ×
0
JAVASCRIPT GRAPHIC LIBRARIES
ALENA KALTUNEVICH 10/11/2013
1
Summary
Introduction
Most Popular JS graphic libraries
HTML5 canvas element
KineticJs
Three.JS
External links
2
Introduction
JavaScript graphic libraries are free, easy to use and are based on html5
canvas element or svg technology.
T...
Most popular JS graphic libraries
D3.js
Powerful library for manipulating data based documents, allows to bind arbitrary d...
Most popular JS graphic libraries
KinetcJs
Used for rendering 2d content such as curves, lines , shapes in static or anima...
HTML5 Canvas element
Tag similar to any other html tag
The contents of the tag is rendered with JavaScript
Context is an o...
HTML5 Canvas element
Within canvas element you can draw lines, curves, polygons
Line Quadratic curve
Polygon
7
http://www.html5canvastutorials.com/labs/html5-canvas-elastic-stars-with-kineticjs/
http://www.html5canvastutorials.com/ki...
Multiple possibilities exist for animating elements:
you can apply linear movement, oscillation movement, random direction...
Three.js
Three.js is used to render 3d content with renderer object
var renderer = new THREE.WebGLRenderer();
3d objects a...
Three.js
Different lights are available such as spot light, point light, ambient light etc
You apply different textures an...
External links
http://bonsaijs.org/
http://raphaeljs.com/
http://mrdoob.github.io/three.js/
http://d3js.org/
http://kineti...
Find out more
• On https://techblog.betclicgroup.com/
About Betclic
• Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio
comprising variou...
Upcoming SlideShare
Loading in...5
×

Mini-Training: JS Graphical Libraries

1,195

Published on

Overview of recent JS Graphical Libraries, based on HTML5 Canvas or SVG, such as KineticJs and Three.JS

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,195
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mini-Training: JS Graphical Libraries"

  1. 1. JAVASCRIPT GRAPHIC LIBRARIES ALENA KALTUNEVICH 10/11/2013 1
  2. 2. Summary Introduction Most Popular JS graphic libraries HTML5 canvas element KineticJs Three.JS External links 2
  3. 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. 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. 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. 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. 7. HTML5 Canvas element Within canvas element you can draw lines, curves, polygons Line Quadratic curve Polygon 7
  8. 8. http://www.html5canvastutorials.com/labs/html5-canvas-elastic-stars-with-kineticjs/ http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-brighten-or- darken-image-tutorial/ KineticJs offers the possibility to use build-in 2d elements such as cercles, rectangles, and other shapes . You can make these elements draggable, place them on different layers, apply transformation and styling features like scaling, shadowing etc. When you are working with images, filters are available for inverting colors, grayscaling and other similar effects. 8
  9. 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. 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. 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
  12. 12. External links http://bonsaijs.org/ http://raphaeljs.com/ http://mrdoob.github.io/three.js/ http://d3js.org/ http://kineticjs.com/ http://processingjs.org/ http://www.html5canvastutorials.com/ 12
  13. 13. Find out more • On https://techblog.betclicgroup.com/
  14. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×