This example shows how to set a clickable list of items in Zdog
30 |
To do this, draw 2 canvas, the second is the "ghost" of the first. Each shape in the ghost has a unique color which enables to detect which shape has been clicked.
31 | Because I don't know - for the moment - how to synchronize the draggable mode between the vibible canvas and his ghost, I deactivated the draggable mode.
32 | It's experimental but it works fine on Chrome and Firefox
33 |
34 |
35 |
36 |
Click on cubes and cylinders + Arrow keys to zoom (or Escape to reset)
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/sources/zdog_leap_v1.js:
--------------------------------------------------------------------------------
1 | // link to the official gallery :
2 | // https://developer-archive.leapmotion.com/gallery/tags/javascript
3 |
4 | // link to install a leap motion on Linux Fedora :
5 | // https://github.com/bugzy/leap-fedora-rpm
6 |
7 | // a good tutorial on the Leap Motion (in french):
8 | // https://slides.jmpp.io/leapjs/#/
9 |
10 | // Link to the official documentation
11 | // https://developer-archive.leapmotion.com/documentation/javascript/api/Leap.InteractionBox.html?proglang=javascript
12 |
13 | {
14 | "use strict";
15 |
16 | let canvas = document.getElementById('zdog-canvas');
17 |
18 | const width = canvas.width;
19 | const height = canvas.height;
20 |
21 | let illo = new Zdog.Illustration({
22 | element: canvas,
23 | dragRotate: true,
24 | // translate:{x:-width/2, y:-height/2}, // not apply translation here, because we need to know the version of the leap controller
25 | });
26 |
27 | const size_palm = 30;
28 | const size_finger = 20;
29 | const size_bone = 10;
30 | const size_inch = 15;
31 |
32 | var boxes = [];
33 | var illo_translate = true; // flag to apply the translation on illo only once
34 |
35 | function getCoords(leapPoint, frame) {
36 | let mult = 0;
37 | if (frame.hasOwnProperty('interactionBox')) {
38 | // for older version of the leap motion controller
39 | let iBox = frame.interactionBox;
40 | let normalizedPoint = iBox.normalizePoint(leapPoint, true);
41 | mult = 1000;
42 | return {
43 | x: normalizedPoint[0] * mult,
44 | y: (1 - normalizedPoint[1]) * mult,
45 | z: normalizedPoint[2] * mult
46 | };
47 | } else {
48 | // for lastest version of the leap motion controller
49 | mult = 3;
50 | return {
51 | x: leapPoint[0] * mult,
52 | y: -leapPoint[1] * mult,
53 | z: leapPoint[2] * mult
54 | };
55 | }
56 | }
57 |
58 | function generateBox(digits, x, y, z, width, height, depth) {
59 | digits.push({width: width, height: height, depth: depth, coords: {x: x, y: y, z: z}});
60 | }
61 |
62 | function leapmotion() {
63 |
64 | const controller = new Leap.Controller();
65 | controller.connect();
66 |
67 | controller.on('frame', (frame) => {
68 |
69 | if (illo_translate) {
70 | // apply the translation once only
71 | illo_translate = false;
72 | if (frame.hasOwnProperty('interactionBox')) {
73 | // for older version of the leap motion controller
74 | illo.translate = {
75 | x:(-width / 2), y:(-height / 2)
76 | }
77 | } else {
78 | // for lastest version of the leap motion controller
79 | illo.translate = {
80 | x:(width / 10) , y:(height / 2)
81 | }
82 | }
83 | }
84 |
85 | let digits = [];
86 |
87 | // for each hand
88 | frame.hands.forEach(hand => {
89 |
90 | // for drawing the palm
91 | var palmPos = getCoords(hand.palmPosition, frame);
92 | generateBox(digits, palmPos.x, palmPos.y, palmPos.z, size_palm, size_palm, size_palm);
93 |
94 | // For each finger
95 | hand.fingers.forEach((finger, id) => {
96 | /*
97 | for( var j = 0, jmax=finger.bones.length; j < jmax; j++ ){
98 | let bone = finger.bones[j];
99 |
100 | let pos = getCoords(bone.center(), frame);
101 | generateBox(digits, pos.x, pos.y, pos.z, size_bone, size_bone, size_bone);
102 | }
103 | */
104 | let size_item = size_bone;
105 | if (id == 0) {
106 | size_item = size_inch;
107 | }
108 | var carpPos = getCoords(finger.carpPosition, frame); // carpal
109 | generateBox(digits, carpPos.x, carpPos.y, carpPos.z, size_finger, size_finger, size_finger);
110 |
111 | var mcpPos = getCoords(finger.mcpPosition, frame); // metacarpal
112 | generateBox(digits, mcpPos.x, mcpPos.y, mcpPos.z, size_item, size_item, size_item);
113 |
114 | var pipPos = getCoords(finger.pipPosition, frame); // proximal
115 | generateBox(digits, pipPos.x, pipPos.y, pipPos.z, size_item, size_item, size_item);
116 |
117 | var dipPos = getCoords(finger.dipPosition, frame); // intermediate phalange
118 | generateBox(digits, dipPos.x, dipPos.y, dipPos.z, size_item, size_item, size_item);
119 |
120 | var tipPos = getCoords(finger.tipPosition, frame); // distal phalange
121 | generateBox(digits, tipPos.x, tipPos.y, tipPos.z, size_item, size_item, size_item);
122 |
123 | });
124 |
125 | });
126 | boxes.push(digits);
127 |
128 | });
129 |
130 | }
131 |
132 | function draw() {
133 |
134 | let digits = [];
135 | if (boxes.length > 1) {
136 | digits = boxes.shift();
137 | } else {
138 | if (boxes.length == 1) {
139 | digits = boxes[0];
140 | } else {
141 | digits = [];
142 | }
143 | }
144 |
145 | illo.children = [];
146 |
147 | digits.forEach(item => {
148 | new Zdog.Box({
149 | addTo: illo,
150 | width: item.width,
151 | height: item.height,
152 | depth: item.depth,
153 | translate: item.coords,
154 | rotate: {x: 0.7, y: 0.7},
155 | stroke: false,
156 | color: '#C25', // default face color
157 | leftFace: '#EA0',
158 | rightFace: '#E62',
159 | topFace: '#ED0',
160 | bottomFace: '#636',
161 | });
162 | });
163 |
164 | illo.updateRenderGraph();
165 | }
166 |
167 | function animate() {
168 | draw();
169 | requestAnimationFrame(animate);
170 | }
171 |
172 | document.addEventListener("DOMContentLoaded", function (event) {
173 | console.log("DOM fully loaded and parsed");
174 | leapmotion();
175 | animate();
176 | });
177 | }
178 |
--------------------------------------------------------------------------------
/sources/zdog_leap_v2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Leap Motion with Zdog - draw hands
6 |
25 |
26 |
27 |
28 |
Plug your Leap Motion and play with your hands
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/sources/zdog_leap_v2.js:
--------------------------------------------------------------------------------
1 | // link to the official gallery :
2 | // https://developer-archive.leapmotion.com/gallery/tags/javascript
3 |
4 | // link to install a leap motion on Linux Fedora :
5 | // https://github.com/bugzy/leap-fedora-rpm
6 |
7 | // a good tutorial on the Leap Motion (in french):
8 | // https://slides.jmpp.io/leapjs/#/
9 |
10 | // Link to the official documentation
11 | // https://developer-archive.leapmotion.com/documentation/javascript/api/Leap.InteractionBox.html?proglang=javascript
12 |
13 | {
14 | "use strict";
15 |
16 | let canvas = document.getElementById('zdog-canvas');
17 |
18 | const width = canvas.width;
19 | const height = canvas.height;
20 |
21 | let illo = new Zdog.Illustration({
22 | element: canvas,
23 | dragRotate: true,
24 | // translate:{x:-width/2, y:-height/2}, // not apply translation here, because we need to know the version of the leap controller
25 | });
26 |
27 | const size_palm = 30;
28 | const size_finger = 20;
29 | const size_bone = 10;
30 | const size_inch = 15;
31 |
32 | var boxes = [];
33 | var illo_translate = true; // flag to apply the translation on illo only once
34 |
35 | function getCoords(leapPoint, frame) {
36 | let mult = 0;
37 | if (frame.hasOwnProperty('interactionBox')) {
38 | // for older version of the leap motion controller
39 | let iBox = frame.interactionBox;
40 | let normalizedPoint = iBox.normalizePoint(leapPoint, true);
41 | mult = 1000;
42 | return {
43 | x: normalizedPoint[0] * mult,
44 | y: (1 - normalizedPoint[1]) * mult,
45 | z: normalizedPoint[2] * mult
46 | };
47 | } else {
48 | // for lastest version of the leap motion controller
49 | mult = 3;
50 | return {
51 | x: leapPoint[0] * mult,
52 | y: -leapPoint[1] * mult,
53 | z: leapPoint[2] * mult
54 | };
55 | }
56 | }
57 |
58 | function generateBox(digits, x, y, z, width, height, depth) {
59 | digits.push({width: width, height: height, depth: depth, coords: {x: x, y: y, z: z}});
60 | }
61 |
62 | function leapmotion() {
63 |
64 | const controller = new Leap.Controller();
65 | controller.connect();
66 |
67 | controller.on('frame', (frame) => {
68 |
69 | if (illo_translate) {
70 | // apply the translation once only
71 | illo_translate = false;
72 | if (frame.hasOwnProperty('interactionBox')) {
73 | // for older version of the leap motion controller
74 | illo.translate = {
75 | x:(-width / 2), y:(-height / 2)
76 | }
77 | } else {
78 | // for lastest version of the leap motion controller
79 | illo.translate = {
80 | x:(width / 10) , y:(height / 2)
81 | }
82 | }
83 | }
84 |
85 | let digits = [];
86 |
87 | // for each hand
88 | frame.hands.forEach(hand => {
89 |
90 | // for drawing the palm
91 | var palmPos = getCoords(hand.palmPosition, frame);
92 | generateBox(digits, palmPos.x, palmPos.y, palmPos.z, size_palm, size_palm, size_palm);
93 |
94 | // For each finger
95 | hand.fingers.forEach((finger, id) => {
96 | /*
97 | for( var j = 0, jmax=finger.bones.length; j < jmax; j++ ){
98 | let bone = finger.bones[j];
99 |
100 | let pos = getCoords(bone.center(), frame);
101 | generateBox(digits, pos.x, pos.y, pos.z, size_bone, size_bone, size_bone);
102 | }
103 | */
104 | let size_item = size_bone;
105 | if (id == 0) {
106 | size_item = size_inch;
107 | }
108 | var carpPos = getCoords(finger.carpPosition, frame); // carpal
109 | generateBox(digits, carpPos.x, carpPos.y, carpPos.z, size_finger, size_finger, size_finger);
110 |
111 | var mcpPos = getCoords(finger.mcpPosition, frame); // metacarpal
112 | generateBox(digits, mcpPos.x, mcpPos.y, mcpPos.z, size_item, size_item, size_item);
113 |
114 | var pipPos = getCoords(finger.pipPosition, frame); // proximal
115 | generateBox(digits, pipPos.x, pipPos.y, pipPos.z, size_item, size_item, size_item);
116 |
117 | var dipPos = getCoords(finger.dipPosition, frame); // intermediate phalange
118 | generateBox(digits, dipPos.x, dipPos.y, dipPos.z, size_item, size_item, size_item);
119 |
120 | var tipPos = getCoords(finger.tipPosition, frame); // distal phalange
121 | generateBox(digits, tipPos.x, tipPos.y, tipPos.z, size_item, size_item, size_item);
122 |
123 | });
124 |
125 | });
126 | boxes.push(digits);
127 |
128 | });
129 |
130 | }
131 |
132 | function draw() {
133 |
134 | let digits = [];
135 | if (boxes.length > 1) {
136 | digits = boxes.shift();
137 | } else {
138 | if (boxes.length == 1) {
139 | digits = boxes[0];
140 | } else {
141 | digits = [];
142 | }
143 | }
144 |
145 | illo.children = [];
146 |
147 | digits.forEach(item => {
148 | new Zdog.Box({
149 | addTo: illo,
150 | width: item.width,
151 | height: item.height,
152 | depth: item.depth,
153 | translate: item.coords,
154 | rotate: {x: 0.7, y: 0.7},
155 | stroke: false,
156 | color: '#C25', // default face color
157 | leftFace: '#EA0',
158 | rightFace: '#E62',
159 | topFace: '#ED0',
160 | bottomFace: '#636',
161 | });
162 | });
163 |
164 | illo.updateRenderGraph();
165 | }
166 |
167 | function animate() {
168 | draw();
169 | requestAnimationFrame(animate);
170 | }
171 |
172 | document.addEventListener("DOMContentLoaded", function (event) {
173 | console.log("DOM fully loaded and parsed");
174 | leapmotion();
175 | animate();
176 | });
177 | }
178 |
--------------------------------------------------------------------------------
/sources/zdog_magnetcubes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Zdog - Magnetic cubes
6 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/sources/zdog_magnetcubes.js:
--------------------------------------------------------------------------------
1 | // Made with Zdog
2 |
3 | {
4 | "use strict";
5 |
6 | let canvas = document.getElementById('zdog-canvas');
7 | let width = canvas.width;
8 | let height = canvas.height;
9 |
10 | let illo = new Zdog.Illustration({
11 | element: canvas,
12 | dragRotate: true,
13 | translate:{x:-width/2, y:-height/2},
14 | // rotate:{y:100, z:100}
15 | });
16 |
17 | var side = 40;
18 | var dist = 50;
19 | var mid_side = side / 2;
20 | var global_dist = dist * 2;
21 | var isSpinning = false;
22 |
23 |
24 | const getMousePos = function (canvas, evt) {
25 | // It's a very reliable algorithm to get mouse coordinates (don't use anything else)
26 | // it works fine on Firefox and Chrome
27 | // source : https://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas
28 | var rect = canvas.getBoundingClientRect();
29 | return {
30 | x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
31 | y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
32 | };
33 | }
34 |
35 | function generateGrid(xmax, ymax, space=100) {
36 | let items = [];
37 | let xbegin = space + 10;
38 | let ybegin = space + 10;
39 | for (let x=0; x {
50 | let diffX = a.x - b.x ;
51 | let diffY = a.y - b.y;
52 | return Math.atan2(diffY, diffX);
53 | }
54 |
55 | boxes.forEach(item => {
56 | item.node = new Zdog.Box({
57 | addTo: illo,
58 | width: side,
59 | height: side,
60 | depth: side,
61 | translate: item.coords,
62 | rotate: {x: 0.7, y:0.7},
63 | stroke: false,
64 | color: '#C25', // default face color
65 | leftFace: '#EA0',
66 | rightFace: '#E62',
67 | topFace: '#ED0',
68 | bottomFace: '#636',
69 | });
70 | })
71 |
72 | function draw (){
73 | if (isSpinning) {
74 | illo.rotate.z += 0.003;
75 | }
76 | illo.updateRenderGraph();
77 | }
78 |
79 | function animate() {
80 | draw();
81 | requestAnimationFrame( animate );
82 | }
83 |
84 | const PI_ON_SEMI_CIRCLE = Math.PI / 180;
85 | const SEMI_CIRCLE_ON_PI = 180 / Math.PI;
86 |
87 | const degreesToRadians = (val) => {
88 | return val * PI_ON_SEMI_CIRCLE;
89 | }
90 |
91 | const radiandToDegrees = (val) => {
92 | return val * SEMI_CIRCLE_ON_PI;
93 | }
94 |
95 | document.addEventListener('mousemove', (e) => {
96 | let mouse = getMousePos(canvas, e);
97 | mouse.z = 0; // z doesn't existe on the mouse object, we add it for comparison with the coordinates of the cubes
98 |
99 | // Effect 1 :
100 | /*
101 | boxes.forEach(sqr => {
102 | let diff = diffHypothenuse(sqr.coords, mouse);
103 | if (diff < 200) {
104 | let angle = degreesToRadians(diff / 5);
105 | sqr.node.rotate = {x: angle, y:angle};
106 | }
107 | })
108 | */
109 |
110 | // Effect 2 :
111 | boxes.forEach(sqr => {
112 | let angle = diffArctangente(mouse, sqr.coords);
113 | sqr.node.rotate = {x: angle, y:angle};
114 | });
115 |
116 |
117 | })
118 |
119 | document.addEventListener("DOMContentLoaded", function(event) {
120 | console.log("DOM fully loaded and parsed");
121 | animate();
122 | });
123 | }
124 |
--------------------------------------------------------------------------------
/sources/zdog_obj.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 3D Object with Zdog
6 |
27 |
28 |
29 |
30 |
Click & drag to rotate
31 |
32 |
33 |
34 |
35 |
Up & Down arrow keys : same zoom+/zoom- on the X, Y and Z axes
36 | Left & Right arrow keys : zoom+/zoom- on Y axes only
37 | Escape key : reset scale to 1 on the X, Y and Z axes
38 | Others 3D objects on this site
39 |
Up & Down arrow keys : same zoom+/zoom- on the X, Y and Z axes
36 | Left & Right arrow keys : zoom+/zoom- on Y axes only
37 | Escape key : reset scale to 1 on the X, Y and Z axes
38 | Others 3D objects on this site
39 |
Up & Down arrow keys : same zoom+/zoom- on the X, Y and Z axes
36 | Left & Right arrow keys : zoom+/zoom- on Y axes only
37 | Escape key : reset scale to 1 on the X, Y and Z axes
38 | Others 3D objects on this site
39 |