├── .README.md.swp
├── .gitignore
├── README.md
├── backgrounds
├── boxes-01.png
├── boxes-02.png
├── boxes-03.png
├── boxes-04.png
├── boxes-05.png
├── boxes-06.png
├── boxes-07.png
├── boxes-08.png
├── boxes-09.png
├── boxes-10.png
├── boxes-11.png
├── boxes-12.png
├── boxes-13.png
├── boxes-14.png
├── boxes-15.png
├── boxes.png
└── honeycomb.png
├── examples
├── 01.gif
├── 01.png
├── 02.gif
├── 02.png
├── 03.png
├── 05.png
├── 06.png
├── 08.png
├── 09.png
├── 12.png
├── 13.png
├── 14.png
├── 15.png
├── 16.png
├── 17.png
├── 18.png
├── 19.png
├── 20.png
├── 21.png
├── 24.png
├── 27.png
├── 28.png
├── 30.png
├── 31.png
├── 32.png
├── 34.png
├── 35.png
├── 36.png
├── 37.png
├── 38.png
├── 39.png
└── honeycomb-14.gif
├── index.html
├── js
└── processing.api.js
└── source-images
├── 01.png
├── 03.png
├── 04.png
├── 07.jpg
├── 09.jpg
├── 12.png
└── readme
├── 01.png
├── 02.png
├── 03.png
├── 04.png
├── 05.png
└── bee.png
/.README.md.swp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/.README.md.swp
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # honeycomb-js
4 |
5 | A bee flew into my room today and I thought about how they make [honeycombs](https://en.wikipedia.org/wiki/Honeycomb).
6 | # Demo
7 |
8 | You can play around with the resulting patterns by moving the cursor and pressing `+` or `-` on your keyboard. To see the tesselation grid hit `d`. Make sure the browser window has the focus by clicking on the image, otherwise keys won't work.
9 |
10 | Demo: [honeycomb-js](https://fgrimme.github.io)
11 |
12 | There is also a small gallery of 3d'ish op-art patterns.
13 |
14 | Gallery: [patterns](#pattern-gallery)
15 |
16 |
17 | #How it works
18 |
19 | **honeycomb-js** is an implementation of a simple [Kaleidoscope](https://en.wikipedia.org/wiki/Kaleidoscope). It creates symmetric patterns based on an input image. It is a fun project and I use it to create background images for websites. There are some samples in the backgrounds directory.
20 |
21 | The code is written in Processing first and is then exported to JavaScript. You can find the Java/Processing implementation here [honeycomb](https://github.com/fgrimme/honeycomb) and the Android version here [SymDroid](https://github.com/fgrimme/SymDroid).
22 |
23 |
24 | To simulate the Kaleidoscope functionality, a hexagon is created consisting of six triangles as the basic shape. The triangles are rendered with a texture taken from a reference image. The source area for the texture is controlled by the cursor position.
25 |
26 | **Rotation**
27 |
28 | Next, the triangles get rotated by 60° each. To create a symmetrical image the texture is mirrored alternatingly along the x-axis.
29 |
30 |
31 |
32 |
33 | The coordinates for the triangle rotation can be easily calculated by imagining a surrounding circle.
34 |
35 |
36 |
37 |
38 |
39 | ```javascript
40 | x = RADIUS * cos( TWO_PI / 6)
41 | y = RADIUS * sin( TWO_PI / 6 )
42 | ```
43 |
44 | **Horizontal Tesselation**
45 |
46 |
47 | The resulting hexagonal shape is tesselated over the entire canvas. First horizontally and then vertically.
48 | The position on the x-axis is calculated by adding the radius times three to the last position.
49 |
50 |
51 |
52 |
53 |
54 | ```javascript
55 | x += RADIUS * 3
56 | ```
57 |
58 | **Vertical Tesselation**
59 |
60 | The position on the y-axis is caculated by the square root of half the radius times three (angle bisector in equilateral triangle).
61 |
62 |
63 |
64 | ```javascript
65 | y += sqrt(3) * (RADIUS / 2)
66 | ```
67 |
68 | **Honeycomb Tesselation**
69 |
70 | Not very precise ~ my Gimp skills are not the best :-)
71 |
72 |
73 |
74 | #Keymap
75 |
76 | > Some of the functions could not be ported to the JS version.
77 |
78 | | Key | Function |
79 | |-------|-----------------------
80 | | m | next image |
81 | | n | previous image |
82 | | + | increase radius |
83 | | - | decrease radius |
84 | | r | record |
85 | | k | jump right |
86 | | p | screenshot |
87 | | c | move circular |
88 | | d | toggle mouse |
89 | | v | toggle direction |
90 | | y | increase velocity |
91 | | x | decrease velocity |
92 | | i | show image path |
93 | | t | toggle transparency |
94 | | j | jump down |
95 | | h | jump left |
96 | | u | jump up |
97 | | 1 | reset image |
98 | | 2 | invert image |
99 | | 3 | desaturate image |
100 | | 4 | blur image |
101 | | 5 | bitmap image |
102 | | 6 | posterize image |
103 | | 7 | erode image |
104 | | 8 | dilate image |
105 | | UP | move up |
106 | | DOWN | move down |
107 | | LEFT | move left |
108 | | RIGHT |move right |
109 |
110 | # Pattern Gallery
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
--------------------------------------------------------------------------------
/backgrounds/boxes-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-01.png
--------------------------------------------------------------------------------
/backgrounds/boxes-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-02.png
--------------------------------------------------------------------------------
/backgrounds/boxes-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-03.png
--------------------------------------------------------------------------------
/backgrounds/boxes-04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-04.png
--------------------------------------------------------------------------------
/backgrounds/boxes-05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-05.png
--------------------------------------------------------------------------------
/backgrounds/boxes-06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-06.png
--------------------------------------------------------------------------------
/backgrounds/boxes-07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-07.png
--------------------------------------------------------------------------------
/backgrounds/boxes-08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-08.png
--------------------------------------------------------------------------------
/backgrounds/boxes-09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-09.png
--------------------------------------------------------------------------------
/backgrounds/boxes-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-10.png
--------------------------------------------------------------------------------
/backgrounds/boxes-11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-11.png
--------------------------------------------------------------------------------
/backgrounds/boxes-12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-12.png
--------------------------------------------------------------------------------
/backgrounds/boxes-13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-13.png
--------------------------------------------------------------------------------
/backgrounds/boxes-14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-14.png
--------------------------------------------------------------------------------
/backgrounds/boxes-15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes-15.png
--------------------------------------------------------------------------------
/backgrounds/boxes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/boxes.png
--------------------------------------------------------------------------------
/backgrounds/honeycomb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/backgrounds/honeycomb.png
--------------------------------------------------------------------------------
/examples/01.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/01.gif
--------------------------------------------------------------------------------
/examples/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/01.png
--------------------------------------------------------------------------------
/examples/02.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/02.gif
--------------------------------------------------------------------------------
/examples/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/02.png
--------------------------------------------------------------------------------
/examples/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/03.png
--------------------------------------------------------------------------------
/examples/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/05.png
--------------------------------------------------------------------------------
/examples/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/06.png
--------------------------------------------------------------------------------
/examples/08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/08.png
--------------------------------------------------------------------------------
/examples/09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/09.png
--------------------------------------------------------------------------------
/examples/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/12.png
--------------------------------------------------------------------------------
/examples/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/13.png
--------------------------------------------------------------------------------
/examples/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/14.png
--------------------------------------------------------------------------------
/examples/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/15.png
--------------------------------------------------------------------------------
/examples/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/16.png
--------------------------------------------------------------------------------
/examples/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/17.png
--------------------------------------------------------------------------------
/examples/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/18.png
--------------------------------------------------------------------------------
/examples/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/19.png
--------------------------------------------------------------------------------
/examples/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/20.png
--------------------------------------------------------------------------------
/examples/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/21.png
--------------------------------------------------------------------------------
/examples/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/24.png
--------------------------------------------------------------------------------
/examples/27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/27.png
--------------------------------------------------------------------------------
/examples/28.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/28.png
--------------------------------------------------------------------------------
/examples/30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/30.png
--------------------------------------------------------------------------------
/examples/31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/31.png
--------------------------------------------------------------------------------
/examples/32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/32.png
--------------------------------------------------------------------------------
/examples/34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/34.png
--------------------------------------------------------------------------------
/examples/35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/35.png
--------------------------------------------------------------------------------
/examples/36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/36.png
--------------------------------------------------------------------------------
/examples/37.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/37.png
--------------------------------------------------------------------------------
/examples/38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/38.png
--------------------------------------------------------------------------------
/examples/39.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/39.png
--------------------------------------------------------------------------------
/examples/honeycomb-14.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fbngrm/honeycomb-js/7261074fc4d756cb72d7cda7e82d0cb6ce4a7418/examples/honeycomb-14.gif
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |