-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathColor.js.html
347 lines (318 loc) · 27.8 KB
/
Color.js.html
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="../favicon.ico"><title>Source: Color.js</title><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474 c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323 c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848 S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328 c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="dark"><div class="sidebar-container"><div class="sidebar" id="sidebar"><a href="/" class="sidebar-title sidebar-title-anchor">Home</a><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="AgentArray.html">AgentArray</a></div><div class="sidebar-section-children"><a href="AgentList.html">AgentList</a></div><div class="sidebar-section-children"><a href="AgentSet.html">AgentSet</a></div><div class="sidebar-section-children"><a href="Animator.html">Animator</a></div><div class="sidebar-section-children"><a href="DataSet.html">DataSet</a></div><div class="sidebar-section-children"><a href="GUI.html">GUI</a></div><div class="sidebar-section-children"><a href="GeoDataSet.html">GeoDataSet</a></div><div class="sidebar-section-children"><a href="Keyboard.html">Keyboard</a></div><div class="sidebar-section-children"><a href="Link.html">Link</a></div><div class="sidebar-section-children"><a href="Links.html">Links</a></div><div class="sidebar-section-children"><a href="Model.html">Model</a></div><div class="sidebar-section-children"><a href="Model3D.html">Model3D</a></div><div class="sidebar-section-children"><a href="Mouse.html">Mouse</a></div><div class="sidebar-section-children"><a href="Patch.html">Patch</a></div><div class="sidebar-section-children"><a href="Patches.html">Patches</a></div><div class="sidebar-section-children"><a href="RGBDataSet.html">RGBDataSet</a></div><div class="sidebar-section-children"><a href="ThreeDraw.html">ThreeDraw</a></div><div class="sidebar-section-children"><a href="Turtle.html">Turtle</a></div><div class="sidebar-section-children"><a href="Turtle3D.html">Turtle3D</a></div><div class="sidebar-section-children"><a href="Turtles.html">Turtles</a></div><div class="sidebar-section-children"><a href="TwoDraw.html">TwoDraw</a></div><div class="sidebar-section-children"><a href="World.html">World</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="module-src_geojson.html">src/geojson</a></div><div class="sidebar-section-children"><a href="module-src_gis.html">src/gis</a></div><div class="sidebar-section-children"><a href="module-src_utils.html">src/utils</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-1 - AgentScript.html">1 - AgentScript</a></div><div class="sidebar-section-children"><a href="tutorial-2 - JavaScript.html">2 - JavaScript</a></div><div class="sidebar-section-children"><a href="tutorial-3 - Browser.html">3 - Browser</a></div><div class="sidebar-section-children"><a href="tutorial-4 - Model.html">4 - Model</a></div><div class="sidebar-section-children"><a href="tutorial-5 - View.html">5 - View</a></div><div class="sidebar-section-children"><a href="tutorial-6.1 - AnimatorController.html">6.1 - AnimatorController</a></div><div class="sidebar-section-children"><a href="tutorial-6.2 - KeyboardController.html">6.2 - KeyboardController</a></div><div class="sidebar-section-children"><a href="tutorial-6.3 - GuiController.html">6.3 - GuiController</a></div><div class="sidebar-section-children"><a href="tutorial-6.4 - MouseController.html">6.4 - MouseController</a></div><div class="sidebar-section-children"><a href="tutorial-7 - CodePenServer.html">7 - CodePenServer</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"><div class="navbar-item"><a id="github" href="https://github.com/backspaces/agentscript" target="">Github</a></div><div class="navbar-item"><a id="AgentScript" href="https://code.agentscript.org" target="">AgentScript.org</a></div><div class="navbar-item"><a id="npm" href="https://www.npmjs.com/package/agentscript" target="">npm</a></div><div class="navbar-item"><a id="unpkg" href="https://unpkg.com/browse/agentscript/" target="">unpkg</a></div></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section id="source-page" class="source-page"><header><h1 id="title" class="has-anchor">Color.js</h1></header><article><pre class="prettyprint source lang-js"><code>import * as util from './utils.js'
// /** @module */
/**
*
* A general color module, supporting css string colors, canvas2d pixel
* colors, webgl and canvas2d Uint8ClampedArray r,g,b,a arrays.
*
* #### CSS Color Strings.
*
* CSS colors in HTML are strings, see [Mozillas Color Reference](
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value),
* taking one of 7 forms:
*
* - Names: over 140 color case-insensitive names like
* Red, Green, CadetBlue, etc.
* - Hex, short and long form: #0f0, #ff10a0
* - RGB: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
* - HSL: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.8)
*
* See [this wikipedia article](https://goo.gl/ev8Kw0)
* on differences between HSL and HSB/HSV.
*
*/
/** @namespace */
const Color = {
/**
* Convert 4 r,g,b,a ints in [0-255] ("a" defaulted to 255) to a
* css color string.
*
* @param {number} r integer in [0, 255] for red channel
* @param {number} g integer in [0, 255] for green channel
* @param {number} b integer in [0, 255] for blue channel
* @param {number} [a=255] integer in [0, 255] for alpha/opacity channel
* @returns {string} A rgb(r,g,b) or rgba(r,g,b,a) css color string
*/
rgbaCssColor(r, g, b, a = 255) {
a = a / 255
const a2 = a.toPrecision(2)
return a === 1 ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},${a2})`
},
/**
* Convert 4 ints, h,s,l,a, h in [0-360], s,l in [0-100]% a in [0-255] to a
* css color string.
* See [hsl()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl).
*
* NOTE: h=0 and h=360 are the same, use h in 0-359 for unique colors.
*
* @param {number} h
* @param {number} [s=100]
* @param {number} [l=50]
* @param {number} [a=255]
* @returns {string} A css HSL color string
*/
hslCssColor(h, s = 100, l = 50, a = 255) {
a = a / 255
const a4 = a.toPrecision(4)
return a === 1
? `hsl(${h},${s}%,${l}%)`
: `hsla(${h},${s}%,${l}%,${a4})`
},
/**
* Return a html/css hex color string for an r,g,b opaque color (a=255).
* Hex strings do not support alpha.
* Both #nnn and #nnnnnn forms supported.
* Default is to check for the short hex form.
* @param {number} r Integer value for red channel
* @param {number} g Integer value for green channel
* @param {number} b Integer value for blue channel
* @returns {string} A css hex color string #nnn or #nnnnnn, n in [0,F] hex
*/
hexCssColor(r, g, b) {
return `#${(0x1000000 | (b | (g << 8) | (r << 16)))
.toString(16)
.slice(-6)}`
},
// cssColor is a hybrid string and is our standard. It returns:
//
// * rgbaCssColor if a not 255 (i.e. not opaque)
// * hexCssColor otherwise
cssColor(r, g, b, a = 255) {
return a === 255
? this.hexCssColor(r, g, b)
: this.rgbaCssColor(r, g, b, a)
},
randomCssColor() {
const r255 = () => util.randomInt(256) // random int in [0,255]
return this.cssColor(r255(), r255(), r255())
},
randomGrayCssColor(min = 0, max = 255) {
const gray = util.randomInt2(min, max) // random int in [min,max]
return this.cssColor(gray, gray, gray)
},
// ### Pixels
cssToPixel(string) {
const rgba = this.cssToUint8Array(string)
return this.rgbaToPixel(...rgba)
},
rgbaToPixel(r, g, b, a = 255) {
const rgba = new Uint8Array([r, g, b, a])
const pixels = new Uint32Array(rgba.buffer)
return pixels[0]
},
randomPixel() {
const r255 = () => util.randomInt(256) // random int in [0,255]
return this.rgbaToPixel(r255(), r255(), r255())
},
randomGrayPixel(min = 0, max = 255) {
const gray = util.randomInt2(min, max) // random int in [min,max]
return this.rgbaToPixel(gray, gray, gray)
},
// ### CSS String Conversions
// Return 4 element array given any legal CSS string color.
//
// Because strings vary widely: CadetBlue, #0f0, rgb(255,0,0),
// hsl(120,100%,50%), we do not parse strings, instead we let
// the browser do our work: we fill a 1x1 canvas with the css string color,
// returning the r,g,b,a canvas ImageData TypedArray.
// The shared 1x1 canvas 2D context.
sharedCtx1x1: util.createCtx(1, 1, false, { willReadFrequently: true }),
// sharedCtx1x1: util.createCtx(1, 1),
// Convert any css string to 4 element Uint8ClampedArray TypedArray.
// If you need a JavaScript Array, use `new Array(...TypedArray)`
// Slow, but works for all css strings: hsl, rgb, .. as well as names.
cssToUint8Array(string) {
this.sharedCtx1x1.clearRect(0, 0, 1, 1)
this.sharedCtx1x1.fillStyle = string
this.sharedCtx1x1.fillRect(0, 0, 1, 1)
return this.sharedCtx1x1.getImageData(0, 0, 1, 1).data
},
// ### Typed Color
// A TypedColor is a 4 element ArrayBuffer, with two views:
//
// * pixelArray: A single element Uint32Array view
// * u8array: A 4 element r,g,b,a Uint8ClampedArray view
//
// getters/setters are provided for multiple other color types:
// 'css', 'pixel', 'rgb', 'webgl'
// If g is undefinec, returns toTypedColor(g)
typedColor(r, g, b, a = 255) {
if (g === undefined) return this.toTypedColor(r)
const u8array = new Uint8ClampedArray([r, g, b, a])
u8array.pixelArray = new Uint32Array(u8array.buffer) // one element array
// Make this an instance of TypedColorProto
Object.setPrototypeOf(u8array, TypedColorProto)
return u8array
},
isTypedColor(any) {
return any && any.constructor === Uint8ClampedArray && any.pixelArray
},
// Return a typedColor given a value and optional colorType
// If the value already is a typedColor, simply return it
// If colorType not defined, assume css (string) or pixel (number)
// or array [r,g,b,a=255]
// The colorType can be: 'css', 'pixel', 'rgb', 'webgl'
// Note rgb and webgl are int arrays & float arrays respectively.
toTypedColor(value, colorType) {
if (this.isTypedColor(value)) return value
const tc = this.typedColor(0, 0, 0, 0) // "empty" typed color
if (colorType == null) {
if (util.isString(value)) tc.css = value
else if (util.isNumber(value)) tc.pixel = value
else if (util.isArray(value)) tc.rgb = value
else if (util.isTypedArray(value)) tc.rgb = value
else throw Error(`toTypedColor: illegal value ${value}`)
} else {
// REMIND: type check value & colorType?
tc[colorType] = value
}
return tc
},
// Random typedColor, rgb or gray, alpha = 255 for both:
randomTypedColor() {
const r255 = () => util.randomInt(256) // random int in [0,255]
return this.typedColor(r255(), r255(), r255())
},
// Random gray color, alpha = 255
randomGrayTypedColor(min = 0, max = 255) {
const gray = util.randomInt2(min, max) // random int in [min,max]
return this.typedColor(gray, gray, gray)
},
// Arrays of random typed colors, very useful for patch colors
randomColorArray(length) {
const colors = new Array(length)
util.forLoop(colors, (c, i) => (colors[i] = this.randomTypedColor()))
return colors
},
randomGrayArray(length, min = 0, max = 255) {
const grays = new Array(length)
util.forLoop(
grays,
(g, i) => (grays[i] = this.randomGrayTypedColor(min, max))
)
return grays
},
}
// Prototype for Color. Getters/setters for usability, may be slower.
const TypedColorProto = {
// Inherit from Uint8ClampedArray
__proto__: Uint8ClampedArray.prototype,
// Set the Color to new rgba values.
setColor(r, g, b, a = 255) {
this.checkColorChange()
this[0] = r
this[1] = g
this[2] = b
this[3] = a
},
// No real need for getColor, it *is* the typed Uint8 array
set rgb(rgbaArray) {
this.setColor(...rgbaArray)
},
get rgb() {
return this
},
// Set opacity to a value in 0-255
setAlpha(alpha) {
this.checkColorChange()
this[3] = alpha // Uint8ClampedArray will clamp to 0-255
},
getAlpha() {
return this[3]
},
get alpha() {
return this.getAlpha()
},
set alpha(alpha) {
this.setAlpha(alpha)
},
// Set the Color to a new pixel value
setPixel(pixel) {
this.checkColorChange()
this.pixelArray[0] = pixel
},
// Get the pixel value
getPixel() {
return this.pixelArray[0]
},
get pixel() {
return this.getPixel()
},
set pixel(pixel) {
this.setPixel(pixel)
},
// Set pixel/rgba values to equivalent of the css string.
// 'red', '#f00', 'ff0000', 'rgb(255,0,0)', etc.
//
// Does *not* set the chached this.string, which will be lazily evaluated
// to its common cssColor by getCss(). The above would all return '#f00'.
setCss(string) {
return this.setColor(...Color.cssToUint8Array(string))
},
// Return the cssColor for this Color, cached in the @string value
getCss() {
if (this.string == null) this.string = Color.cssColor(...this)
return this.string
},
get css() {
return this.getCss()
},
set css(string) {
this.setCss(string)
},
// Note: webgl colors are 3 RGB floats (no A)
setWebgl(array) {
if (array.length !== 3)
throw Error(
'setWebgl array length must be 3, length:',
array.length
)
this.setColor(
// OK if float * 255 non-int, setColor stores into uint8 array
array[0] * 255,
array[1] * 255,
array[2] * 255
)
},
getWebgl() {
return [this[0] / 255, this[1] / 255, this[2] / 255]
},
get webgl() {
return this.getWebgl()
},
set webgl(array) {
this.setWebgl(array)
},
// Housekeeping when the color is modified.
checkColorChange() {
// Reset string & webgl on color change.
this.string = null // will be lazy evaluated via getCss.
// this.floatArray = null
},
// Return true if color is same value as myself, comparing pixels
equals(color) {
return this.getPixel() === color.getPixel()
},
toString() {
return `[${Array.from(this).toString()}]`
},
// Return a [distance metric](
// http://www.compuphase.com/cmetric.htm) between two colors.
// Max distance is roughly 765 (3*255), for black & white.
// For our purposes, omitting the sqrt will not effect our results
rgbDistance(r, g, b) {
const [r1, g1, b1] = this
const rMean = Math.round((r1 + r) / 2)
const [dr, dg, db] = [r1 - r, g1 - g, b1 - b]
const [dr2, dg2, db2] = [dr * dr, dg * dg, db * db]
const distanceSq =
(((512 + rMean) * dr2) >> 8) +
4 * dg2 +
(((767 - rMean) * db2) >> 8)
return distanceSq // Math.sqrt(distanceSq)
},
}
export default Color
</code></pre></article></section><footer class="footer" id="PeOAagUepe"><div class="wrapper">AgentScript version: 0.10.20 using clean-jsdoc-theme</div></footer></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><a href="/" class="sidebar-title sidebar-title-anchor">Home</a><div class="mobile-nav-links"><div class="navbar-item"><a id="github-mobile" href="https://github.com/backspaces/agentscript" target="">Github</a></div><div class="navbar-item"><a id="AgentScript-mobile" href="https://code.agentscript.org" target="">AgentScript.org</a></div><div class="navbar-item"><a id="npm-mobile" href="https://www.npmjs.com/package/agentscript" target="">npm</a></div><div class="navbar-item"><a id="unpkg-mobile" href="https://unpkg.com/browse/agentscript/" target="">unpkg</a></div></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="AgentArray.html">AgentArray</a></div><div class="sidebar-section-children"><a href="AgentList.html">AgentList</a></div><div class="sidebar-section-children"><a href="AgentSet.html">AgentSet</a></div><div class="sidebar-section-children"><a href="Animator.html">Animator</a></div><div class="sidebar-section-children"><a href="DataSet.html">DataSet</a></div><div class="sidebar-section-children"><a href="GUI.html">GUI</a></div><div class="sidebar-section-children"><a href="GeoDataSet.html">GeoDataSet</a></div><div class="sidebar-section-children"><a href="Keyboard.html">Keyboard</a></div><div class="sidebar-section-children"><a href="Link.html">Link</a></div><div class="sidebar-section-children"><a href="Links.html">Links</a></div><div class="sidebar-section-children"><a href="Model.html">Model</a></div><div class="sidebar-section-children"><a href="Model3D.html">Model3D</a></div><div class="sidebar-section-children"><a href="Mouse.html">Mouse</a></div><div class="sidebar-section-children"><a href="Patch.html">Patch</a></div><div class="sidebar-section-children"><a href="Patches.html">Patches</a></div><div class="sidebar-section-children"><a href="RGBDataSet.html">RGBDataSet</a></div><div class="sidebar-section-children"><a href="ThreeDraw.html">ThreeDraw</a></div><div class="sidebar-section-children"><a href="Turtle.html">Turtle</a></div><div class="sidebar-section-children"><a href="Turtle3D.html">Turtle3D</a></div><div class="sidebar-section-children"><a href="Turtles.html">Turtles</a></div><div class="sidebar-section-children"><a href="TwoDraw.html">TwoDraw</a></div><div class="sidebar-section-children"><a href="World.html">World</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="module-src_geojson.html">src/geojson</a></div><div class="sidebar-section-children"><a href="module-src_gis.html">src/gis</a></div><div class="sidebar-section-children"><a href="module-src_utils.html">src/utils</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-1 - AgentScript.html">1 - AgentScript</a></div><div class="sidebar-section-children"><a href="tutorial-2 - JavaScript.html">2 - JavaScript</a></div><div class="sidebar-section-children"><a href="tutorial-3 - Browser.html">3 - Browser</a></div><div class="sidebar-section-children"><a href="tutorial-4 - Model.html">4 - Model</a></div><div class="sidebar-section-children"><a href="tutorial-5 - View.html">5 - View</a></div><div class="sidebar-section-children"><a href="tutorial-6.1 - AnimatorController.html">6.1 - AnimatorController</a></div><div class="sidebar-section-children"><a href="tutorial-6.2 - KeyboardController.html">6.2 - KeyboardController</a></div><div class="sidebar-section-children"><a href="tutorial-6.3 - GuiController.html">6.3 - GuiController</a></div><div class="sidebar-section-children"><a href="tutorial-6.4 - MouseController.html">6.4 - MouseController</a></div><div class="sidebar-section-children"><a href="tutorial-7 - CodePenServer.html">7 - CodePenServer</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>