42 | 43 |
44 |45 | Green 46 | Yellow 47 | Pink 48 | Red 49 | Blue 50 |
51 |52 | [Works best in Chrome] 53 |
54 | 55 | 56 | 57 | More cool experiments! 58 | 59 | 60 | 61 | 62 | 66 | 67 | 68 | 69 | 70 |
71 |
72 |
73 |
74 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/isoblocks.coffee:
--------------------------------------------------------------------------------
1 | ###
2 | isoblocks.coffee
3 |
4 | version 1.0
5 | Author Kushagra Gour a.k.a. chinchang (chinchang457@gmail.com)
6 | Licensed under The MIT License
7 |
8 | Description:
9 | IsoBlocks is a library to create eye candy isometric texts.
10 |
11 | Usage:
12 |
13 | var iso = new IsoBlocks(400); // pass the number of blocks to pre-generate
14 | iso.generate('Your Text Here'); // By Default starts from the lower left of the screen
15 |
16 | Position it:
17 | iso.generate('Your Text Here', {x: 320, y: 600});
18 |
19 | Colorize it (Presently supports- green, red, pink, blue, yellow only):
20 | iso.generate('Your Text Here', {x: 320, y: 600, colors: 'green'}); // Pass a color using 'colors' option
21 |
22 | Use multiple colors:
23 | iso.generate('Your Text Here', {x: 320, y: 600, colors: ['green', 'yellow']}); // Pass an array of colors in 'colors'
24 |
25 | ###
26 |
27 | $(->
28 | $('#iso_input').bind 'keydown', onKeyPress
29 | )
30 |
31 | onKeyPress = (e) ->
32 | if e.key is 13 or e.keyCode is 13
33 | if iso then iso.generate $(e.target).val(), {x: 320, y: 500, colors: $("input[name=color]:checked").map( -> return this.value; ).get()}
34 |
35 | ###
36 | Cube class
37 | ###
38 | class Cube
39 | constructor: ->
40 |
41 | @width: 15
42 | @height: 15
43 |
44 |
45 | ###
46 | IsoBlocks class
47 | ###
48 | class IsoBlocks
49 |
50 | # Array of pre-generated cubes which are used throughout.
51 | cubes: []
52 |
53 | # Current cube index in the @cubes array to be used for drawing
54 | current_cube_index: 0
55 |
56 | # An HTML string template for a block
57 | cube_template: ''
58 |
59 | # Default Configuration Object
60 | default_config: {}
61 |
62 | # Current Configuration Object
63 | config: {}
64 |
65 | ###
66 | Constructor
67 | @param num_cubes Number Number of cubes to pre-generate. Default is 450.
68 | ###
69 | constructor: (num_cubes = 450) ->
70 | @default_config =
71 | # Colors to use for the text blocks
72 | colors: []
73 |
74 | # Starting x cordinate on the screen
75 | x: 30
76 |
77 | # Starting y cordinate on the screen
78 | y: window.innerHeight - 100
79 |
80 | # Spacing between 2 characters in terms of number of blocks. Default is 1.
81 | character_spacing: 1
82 |
83 | @preGenerateCubes num_cubes
84 |
85 | ###
86 | @params s string String to draw
87 | @param config Object Configuration object.
88 | ###
89 | generate: (s, config = {}) ->
90 | $.extend @config, @default_config, config
91 | colors = []
92 | # Append iso_color prefix to colors
93 | if config.colors
94 | if typeof config.colors is 'string'
95 | config.colors = [config.colors]
96 | colors = (color.toLowerCase().replace(/^/,' iso_color_') for color in config.colors)
97 | @config.colors = colors
98 |
99 | # Initialize the @current_cube_index to start using the cubes from end for current string
100 | @current_cube_index = @cubes.length - 1
101 |
102 | # Hide all cubes
103 | for cube in @cubes
104 | $(cube).addClass('unused')
105 |
106 | current_row = 0
107 | current_col = 0
108 |
109 | # Loop throught the characters and keep drawing them
110 | for ch, index in s
111 | current_col += @drawCharacter ch, current_row, current_col
112 |
113 | # Give some space between 2 characters
114 | current_col += @config.character_spacing
115 |
116 | ###
117 | It draws a character at given row and column
118 | Returns the width of the character in number of blocks
119 | @param ch String A character to draw
120 | @param row Number Current character's row
121 | @param col Number Current character's column
122 | ###
123 | drawCharacter: (ch, row, col) ->
124 | # Lowercase the character
125 | ch = ch.toLowerCase()
126 |
127 | # Handle special characters
128 | if ch is ' ' then return 1
129 | else if ch is '#' then ch = 'fill'
130 | else if ch is '!' then ch = 'exclamation'
131 | else if ch is '?' then ch = 'question'
132 | else if ch is '.' then ch = 'fullstop'
133 | else if ch is ',' then ch = 'comma'
134 | else if ch is '-' then ch = 'dash'
135 | else if ch is ';' then ch = 'semicolon'
136 | else if ch is ':' then ch = 'colon'
137 | else if ch is '/' then ch = 'f_slash'
138 | else if ch is '[' then ch = 'l_square_bracket'
139 | else if ch is ']' then ch = 'r_square_bracket'
140 |
141 | # Skip if character matrix not found
142 | if not current_ch = Characters[ch] then return 0
143 | for arr, i in current_ch
144 | for val, j in arr
145 | if val
146 | # Calulate isometric position of the cube
147 | pos_x = (row+i+col+j) * Cube.width * 0.8 + @config.x
148 | pos_y = (row+i-(col+j)) * Cube.height / 2 * 0.8 + @config.y
149 |
150 | # Calculate z-index according to the cube's position
151 | z = parseInt 100 * pos_y - 40 * pos_x + 2000, 10
152 |
153 | ###
154 | If its not the first time, we have already generated cubes.
155 | So no need of dom manipulation again and again.
156 | Else if we do not have some cubes, we generate them. This happens for the first time only.
157 | ###
158 | if @current_cube_index >= 0
159 | cube = @cubes[@current_cube_index]
160 | cube.style.left = pos_x + 'px'
161 | cube.style.top = pos_y + 'px'
162 | # Remove previous color class, pick a new random color class and add it
163 | class_string = $(cube).attr 'class'
164 | class_string = class_string.replace(/iso_color_\w+/g, '')
165 | if @config.colors.length
166 | new_color = @config.colors[Math.floor Math.random() * @config.colors.length]
167 | class_string = class_string.concat(" #{new_color}")
168 | $(cube).removeClass().addClass class_string
169 | cube.style.zIndex = z
170 | $(cube).removeClass 'unused'
171 | @current_cube_index--
172 | else
173 | console.warn 'Cubes got Over!'
174 | return
175 | # Return the character width
176 | current_ch[0].length
177 |
178 | ###
179 | @param cube_count Number Number of cubes to pre-generate
180 | ###
181 | preGenerateCubes: (cube_count) ->
182 | html_string = ''
183 | for i in [1...cube_count]
184 | current_cube = @cube_template
185 |
186 | current_cube = current_cube.replace '@left', (150 + Math.random() * (window.screen.width-400))
187 | current_cube = current_cube.replace '@top', (200 + Math.random() * (window.screen.height - 500))
188 | html_string += current_cube
189 |
190 | # Insert the cubes into the DOM. Uses innerHTML for faster DOM Insertion.
191 | if html_string then $('#iso_container').get(0).innerHTML += html_string
192 |
193 | # Get the cube references
194 | @cubes = document.getElementsByClassName('iso_block')
195 |
196 | # IsoBlocks end
--------------------------------------------------------------------------------
/js/characters.js:
--------------------------------------------------------------------------------
1 | /*
2 | characters.coffee
3 |
4 | version 1.0
5 | Author Kushagra Gour a.k.a. chinchang (chinchang457@gmail.com)
6 | Licensed under The MIT License
7 |
8 | Description:
9 | Defines the shape of characters. Has all static members.
10 | */
11 | var Characters;
12 |
13 | Characters = (function() {
14 |
15 | function Characters() {}
16 |
17 | Characters.a = [[1, 1, 1, 1], [1, 0, 0, 1], [1, 1, 1, 1], [1, 0, 0, 1], [1, 0, 0, 1]];
18 |
19 | Characters.b = [[1, 1, 1, 0], [1, 0, 1, 0], [1, 1, 1, 1], [1, 0, 0, 1], [1, 1, 1, 1]];
20 |
21 | Characters.c = [[1, 1, 1, 1], [1, 0, 0, 0], [1, 0, 0, 0], [1, 0, 0, 0], [1, 1, 1, 1]];
22 |
23 | Characters.d = [[1, 1, 1, 0], [1, 0, 0, 1], [1, 0, 0, 1], [1, 0, 0, 1], [1, 1, 1, 0]];
24 |
25 | Characters.e = [[1, 1, 1, 1], [1, 0, 0, 0], [1, 1, 1, 0], [1, 0, 0, 0], [1, 1, 1, 1]];
26 |
27 | Characters.f = [[1, 1, 1, 1], [1, 0, 0, 0], [1, 1, 1, 0], [1, 0, 0, 0], [1, 0, 0, 0]];
28 |
29 | Characters.g = [[1, 1, 1, 1], [1, 0, 0, 0], [1, 0, 1, 1], [1, 0, 0, 1], [1, 1, 1, 1]];
30 |
31 | Characters.h = [[1, 0, 0, 1], [1, 0, 0, 1], [1, 1, 1, 1], [1, 0, 0, 1], [1, 0, 0, 1]];
32 |
33 | Characters.i = [[1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [1, 1, 1, 1, 1]];
34 |
35 | Characters.j = [[1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [1, 0, 1, 0, 0], [1, 1, 1, 0, 0]];
36 |
37 | Characters.k = [[1, 0, 0, 1], [1, 0, 1, 0], [1, 1, 0, 0], [1, 0, 1, 0], [1, 0, 0, 1]];
38 |
39 | Characters.l = [[1, 0, 0, 0], [1, 0, 0, 0], [1, 0, 0, 0], [1, 0, 0, 0], [1, 1, 1, 1]];
40 |
41 | Characters.m = [[1, 0, 0, 0, 1], [1, 1, 0, 1, 1], [1, 0, 1, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1]];
42 |
43 | Characters.n = [[1, 0, 0, 0, 1], [1, 1, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 0, 1, 1], [1, 0, 0, 0, 1]];
44 |
45 | Characters.o = [[1, 1, 1, 1], [1, 0, 0, 1], [1, 0, 0, 1], [1, 0, 0, 1], [1, 1, 1, 1]];
46 |
47 | Characters.p = [[1, 1, 1, 1], [1, 0, 0, 1], [1, 1, 1, 1], [1, 0, 0, 0], [1, 0, 0, 0]];
48 |
49 | Characters.q = [[0, 1, 1, 1, 0], [1, 0, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 0, 1, 0], [0, 1, 1, 0, 1]];
50 |
51 | Characters.r = [[1, 1, 1, 1], [1, 0, 0, 1], [1, 1, 1, 1], [1, 0, 1, 0], [1, 0, 0, 1]];
52 |
53 | Characters.s = [[0, 1, 1, 1], [1, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 1], [1, 1, 1, 0]];
54 |
55 | Characters.t = [[1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0]];
56 |
57 | Characters.u = [[1, 0, 0, 1], [1, 0, 0, 1], [1, 0, 0, 1], [1, 0, 0, 1], [1, 1, 1, 1]];
58 |
59 | Characters.v = [[1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [0, 1, 0, 1, 0], [0, 0, 1, 0, 0]];
60 |
61 | Characters.w = [[1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 1, 0, 1], [1, 1, 1, 1, 1]];
62 |
63 | Characters.x = [[1, 0, 0, 0, 1], [0, 1, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 1, 0], [1, 0, 0, 0, 1]];
64 |
65 | Characters.y = [[1, 0, 0, 0, 1], [0, 1, 0, 1, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0]];
66 |
67 | Characters.z = [[1, 1, 1, 1, 1], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], [1, 1, 1, 1, 1]];
68 |
69 | Characters.fill = [[1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1]];
70 |
71 | Characters.exclamation = [[1], [1], [1], [0], [1]];
72 |
73 | Characters.question = [[0, 1, 1, 1], [1, 0, 0, 1], [0, 0, 1, 0], [0, 0, 0, 0], [0, 0, 1, 0]];
74 |
75 | Characters.comma = [[0, 0], [0, 0], [0, 0], [0, 1], [1, 0]];
76 |
77 | Characters.fullstop = [[0], [0], [0], [0], [1]];
78 |
79 | Characters.dash = [[0, 0, 0], [0, 0, 0], [1, 1, 1], [0, 0, 0], [0, 0, 0]];
80 |
81 | Characters.colon = [[0], [1], [0], [1], [0]];
82 |
83 | Characters.semicolon = [[0, 0], [0, 1], [0, 0], [0, 1], [1, 0]];
84 |
85 | Characters.f_slash = [[0, 0, 0, 0, 1], [0, 0, 0, 1, 0], [0, 0, 1, 0, 0], [0, 1, 0, 0, 0], [1, 0, 0, 0, 0]];
86 |
87 | Characters.l_square_bracket = [[1, 1, 1], [1, 0, 0], [1, 0, 0], [1, 0, 0], [1, 1, 1]];
88 |
89 | Characters.r_square_bracket = [[1, 1, 1], [0, 0, 1], [0, 0, 1], [0, 0, 1], [1, 1, 1]];
90 |
91 | return Characters;
92 |
93 | })();
94 |
--------------------------------------------------------------------------------
/js/isoblocks.js:
--------------------------------------------------------------------------------
1 | /*
2 | isoblocks.coffee
3 |
4 | version 1.0
5 | Author Kushagra Gour a.k.a. chinchang (chinchang457@gmail.com)
6 | Licensed under The MIT License
7 |
8 | Description:
9 | IsoBlocks is a library to create eye candy isometric texts.
10 |
11 | Usage:
12 |
13 | var iso = new IsoBlocks(400); // pass the number of blocks to pre-generate
14 | iso.generate('Your Text Here'); // By Default starts from the lower left of the screen
15 |
16 | Position it:
17 | iso.generate('Your Text Here', {x: 320, y: 600});
18 |
19 | Colorize it (Presently supports- green, red, pink, blue, yellow only):
20 | iso.generate('Your Text Here', {x: 320, y: 600, colors: 'green'}); // Pass a color using 'colors' option
21 |
22 | Use multiple colors:
23 | iso.generate('Your Text Here', {x: 320, y: 600, colors: ['green', 'yellow']}); // Pass an array of colors in 'colors'
24 | */
25 | var Cube, IsoBlocks, onKeyPress;
26 |
27 | $(function() {
28 | return $('#iso_input').bind('keydown', onKeyPress);
29 | });
30 |
31 | onKeyPress = function(e) {
32 | if (e.key === 13 || e.keyCode === 13) {
33 | if (iso) {
34 | return iso.generate($(e.target).val(), {
35 | x: 320,
36 | y: 500,
37 | colors: $("input[name=color]:checked").map(function() {
38 | return this.value;
39 | }).get()
40 | });
41 | }
42 | }
43 | };
44 |
45 | /*
46 | Cube class
47 | */
48 |
49 | Cube = (function() {
50 |
51 | function Cube() {}
52 |
53 | Cube.width = 15;
54 |
55 | Cube.height = 15;
56 |
57 | return Cube;
58 |
59 | })();
60 |
61 | /*
62 | IsoBlocks class
63 | */
64 |
65 | IsoBlocks = (function() {
66 |
67 | IsoBlocks.prototype.cubes = [];
68 |
69 | IsoBlocks.prototype.current_cube_index = 0;
70 |
71 | IsoBlocks.prototype.cube_template = '';
72 |
73 | IsoBlocks.prototype.default_config = {};
74 |
75 | IsoBlocks.prototype.config = {};
76 |
77 | /*
78 | Constructor
79 | @param num_cubes Number Number of cubes to pre-generate. Default is 450.
80 | */
81 |
82 | function IsoBlocks(num_cubes) {
83 | if (num_cubes == null) num_cubes = 450;
84 | this.default_config = {
85 | colors: [],
86 | x: 30,
87 | y: window.innerHeight - 100,
88 | character_spacing: 1
89 | };
90 | this.preGenerateCubes(num_cubes);
91 | }
92 |
93 | /*
94 | @params s string String to draw
95 | @param config Object Configuration object.
96 | */
97 |
98 | IsoBlocks.prototype.generate = function(s, config) {
99 | var ch, color, colors, cube, current_col, current_row, index, _i, _len, _len2, _ref, _results;
100 | if (config == null) config = {};
101 | $.extend(this.config, this.default_config, config);
102 | colors = [];
103 | if (config.colors) {
104 | if (typeof config.colors === 'string') config.colors = [config.colors];
105 | colors = (function() {
106 | var _i, _len, _ref, _results;
107 | _ref = config.colors;
108 | _results = [];
109 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
110 | color = _ref[_i];
111 | _results.push(color.toLowerCase().replace(/^/, ' iso_color_'));
112 | }
113 | return _results;
114 | })();
115 | this.config.colors = colors;
116 | }
117 | this.current_cube_index = this.cubes.length - 1;
118 | _ref = this.cubes;
119 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
120 | cube = _ref[_i];
121 | $(cube).addClass('unused');
122 | }
123 | current_row = 0;
124 | current_col = 0;
125 | _results = [];
126 | for (index = 0, _len2 = s.length; index < _len2; index++) {
127 | ch = s[index];
128 | current_col += this.drawCharacter(ch, current_row, current_col);
129 | _results.push(current_col += this.config.character_spacing);
130 | }
131 | return _results;
132 | };
133 |
134 | /*
135 | It draws a character at given row and column
136 | Returns the width of the character in number of blocks
137 | @param ch String A character to draw
138 | @param row Number Current character's row
139 | @param col Number Current character's column
140 | */
141 |
142 | IsoBlocks.prototype.drawCharacter = function(ch, row, col) {
143 | var arr, class_string, cube, current_ch, i, j, new_color, pos_x, pos_y, val, z, _len, _len2;
144 | ch = ch.toLowerCase();
145 | if (ch === ' ') {
146 | return 1;
147 | } else if (ch === '#') {
148 | ch = 'fill';
149 | } else if (ch === '!') {
150 | ch = 'exclamation';
151 | } else if (ch === '?') {
152 | ch = 'question';
153 | } else if (ch === '.') {
154 | ch = 'fullstop';
155 | } else if (ch === ',') {
156 | ch = 'comma';
157 | } else if (ch === '-') {
158 | ch = 'dash';
159 | } else if (ch === ';') {
160 | ch = 'semicolon';
161 | } else if (ch === ':') {
162 | ch = 'colon';
163 | } else if (ch === '/') {
164 | ch = 'f_slash';
165 | } else if (ch === '[') {
166 | ch = 'l_square_bracket';
167 | } else if (ch === ']') {
168 | ch = 'r_square_bracket';
169 | }
170 | if (!(current_ch = Characters[ch])) return 0;
171 | for (i = 0, _len = current_ch.length; i < _len; i++) {
172 | arr = current_ch[i];
173 | for (j = 0, _len2 = arr.length; j < _len2; j++) {
174 | val = arr[j];
175 | if (val) {
176 | pos_x = (row + i + col + j) * Cube.width * 0.8 + this.config.x;
177 | pos_y = (row + i - (col + j)) * Cube.height / 2 * 0.8 + this.config.y;
178 | z = parseInt(100 * pos_y - 40 * pos_x + 2000, 10);
179 | /*
180 | If its not the first time, we have already generated cubes.
181 | So no need of dom manipulation again and again.
182 | Else if we do not have some cubes, we generate them. This happens for the first time only.
183 | */
184 | if (this.current_cube_index >= 0) {
185 | cube = this.cubes[this.current_cube_index];
186 | cube.style.left = pos_x + 'px';
187 | cube.style.top = pos_y + 'px';
188 | class_string = $(cube).attr('class');
189 | class_string = class_string.replace(/iso_color_\w+/g, '');
190 | if (this.config.colors.length) {
191 | new_color = this.config.colors[Math.floor(Math.random() * this.config.colors.length)];
192 | class_string = class_string.concat(" " + new_color);
193 | }
194 | $(cube).removeClass().addClass(class_string);
195 | cube.style.zIndex = z;
196 | $(cube).removeClass('unused');
197 | this.current_cube_index--;
198 | } else {
199 | console.warn('Cubes got Over!');
200 | return;
201 | }
202 | }
203 | }
204 | }
205 | return current_ch[0].length;
206 | };
207 |
208 | /*
209 | @param cube_count Number Number of cubes to pre-generate
210 | */
211 |
212 | IsoBlocks.prototype.preGenerateCubes = function(cube_count) {
213 | var current_cube, html_string, i;
214 | html_string = '';
215 | for (i = 1; 1 <= cube_count ? i < cube_count : i > cube_count; 1 <= cube_count ? i++ : i--) {
216 | current_cube = this.cube_template;
217 | current_cube = current_cube.replace('@left', 150 + Math.random() * (window.screen.width - 400));
218 | current_cube = current_cube.replace('@top', 200 + Math.random() * (window.screen.height - 500));
219 | html_string += current_cube;
220 | }
221 | if (html_string) $('#iso_container').get(0).innerHTML += html_string;
222 | return this.cubes = document.getElementsByClassName('iso_block');
223 | };
224 |
225 | return IsoBlocks;
226 |
227 | })();
228 |
--------------------------------------------------------------------------------