# Category Archives: arrays

## es6 concat trick

```let a = , b = , c = , d = [...a, ...b, ...c]; console.log(d); // outputs: [1, 2, 3]```

## Dictionary with ES6 Symbol

Creating a dictionary type object with ES6 Symbols is easy. Yes we have Maps and WeakMaps but this is still interesting for a variety of reasons… Being able to use objects as keys in another object (dictionary) has many great uses…. So how do you use Symbols like this?

```1 2 3 4 5 6 7 8 9 10 11 12 13 14 let a = { id: Symbol('key') }, b = { id: Symbol('key') };   let dictionary = { [a.id]: 'value by obj a', [b.id]: 'value by obj b' };   console.log(dictionary[a.id]); console.log(dictionary[b.id]);   // outputs: // 'value by obj a' // 'value by obj b'```

By using either object a or object b’s `id` symbol, our dictionary points to another value. This old AS3 snippet is similar:

http://actionsnippet.com/?p=426

Also posted in Dictionary, associative arrays, es6, html5, javascript | Tagged , , , | Leave a comment

Being able to draw smooth lines that connect arbitrary points is something that I find myself needing very frequently. This is a port of an old snippet that does just that. By averaging control points of a quadratic bezier curve we ensure that our resulting Bezier curves are always smooth.

The key can be seen here with the `bezierSkin` function. It draws either a closed or open curve.

```1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 // array of xy coords, closed boolean function bezierSkin(bez, closed = true) { var avg = calcAvgs(bez), leng = bez.length, i, n;   if (closed) { c.moveTo(avg, avg); for (i = 2; i < leng; i += 2) { n = i + 1; c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]); } c.quadraticCurveTo(bez, bez, avg, avg); } else { c.moveTo(bez, bez); c.lineTo(avg, avg); for (i = 2; i < leng - 2; i += 2) { n = i + 1; c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]); } c.lineTo(bez[leng - 2], bez[leng - 1]); } }     // create anchor points by averaging the control points function calcAvgs(p) { var avg = [], leng = p.length, prev; for (var i = 2; i < leng; i++) { prev = i - 2; avg.push((p[prev] + p[i]) / 2); } // close avg.push((p + p[leng - 2]) / 2); avg.push((p + p[leng - 1]) / 2); return avg; }```

The control points are then averaged to ensure that the curve contains no sharp angles.

Also posted in Graphics, Math, bezier, graphics algorithms, html5, javascript | Tagged , , , , | Leave a comment

## 3D Ring

Actionscript:
1. [SWF(width = 500, height=500)]
2. var ring:MovieClip = createRing();
3. ring.x = stage.stageWidth / 2;
4. ring.y = stage.stageHeight / 2;
6.
7. function createRing(sectionNum:int = 30):MovieClip{
8.     var container:MovieClip = new MovieClip();
9.     container.circles = [];
10.     container.theta = 0;
12.     var step:Number = (Math.PI * 2) / sectionNum;
13.     for (var i:int = 0; i<sectionNum; i++){
14.         var c:MovieClip = new MovieClip();
15.         with (c.graphics){
16.             lineStyle(0,0x000000);
17.             beginFill(0xCCCCCC);
18.             drawCircle(0,0,20);
19.         }
20.         c.thetaOffset = step * i;
22.         container.circles.push(c);
23.     }
25.     return container;
26. }
27. function onRun(evt:Event):void {
28.     var container:MovieClip = MovieClip(evt.currentTarget);
29.     var num:int = container.circles.length;
30.     for (var i:int = 0; i<num; i++){
31.         var c:MovieClip = container.circles[i];
32.         var angle:Number = container.theta + c.thetaOffset;
33.         c.x = 200 * Math.cos(angle);
34.         c.y = 100 * Math.sin(angle);
35.         c.scaleX = (100 + c.y) / 120 + 0.2;
36.         c.scaleY = c.scaleX;
37.     }
38.     container.circles.sortOn("y", Array.NUMERIC);
39.     for (i = 0; i<num; i++){
41.     }
42.     if (container.mouseX <-100){
44.     }
45.     if (container.mouseX> 100){
47.     }
48.     container.theta += (container.thetaDest  - container.theta) / 12;
49.
50. }

This snippet shows how to create a 3D ring navigation using sine and cosine. Have a look:

Also posted in 3D, Graphics, MovieClip, UI, motion, sortOn | Tagged , , | 3 Comments