├── .eslintignore ├── .eslintrc.js ├── .github └── FUNDING.yml ├── .gitignore ├── .travis.yml ├── 4.1.2 ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── CodeStructure.md ├── Gruntfile.js ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── dist └── p5.accessibility.js ├── examples ├── Example │ ├── app.js │ └── index.html └── ExampleStyled │ ├── app.js │ ├── basicCanvas.js │ ├── basicShapes.js │ ├── index.html │ └── linesAndPoints.js ├── package-lock.json ├── package.json ├── src ├── _data.js ├── baseInterceptor.js ├── colorNamer.js ├── createHTMLstructure.js ├── entities │ ├── _baseEntity.js │ ├── backgroundEntity.js │ ├── ellipseModeEntity.js │ ├── fillEntity.js │ ├── shapeEntity.js │ └── textEntity.js ├── gridInterceptor │ ├── interceptorFunctions.js │ └── interceptorP5.js ├── interceptorHelperFunctions.js ├── registry.js ├── soundInterceptor │ └── interceptorP5.js └── textInterceptor │ ├── interceptorFunctions.js │ └── interceptorP5.js └── test ├── index.html ├── test.js ├── testDeps ├── chai.js ├── mocha.css ├── mocha.js └── require.js └── tests ├── gridInterceptor.js ├── interceptorHelperFunctions.js └── textInterceptorFunctions.js /.eslintignore: -------------------------------------------------------------------------------- 1 | *_data.js -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | amd: true, 5 | es6: true 6 | }, 7 | extends: ['eslint:recommended', 'p5js'], 8 | plugins: [], 9 | rules: { 10 | 'no-cond-assign': 2, 11 | 'eqeqeq': [2, 'smart'], 12 | 'no-global-assign': 0, 13 | 'no-use-before-define': [ 14 | 2, 15 | { 16 | functions: false, 17 | variables: false 18 | } 19 | ], 20 | 'no-caller': 2, 21 | 'no-undef': 2, 22 | 'no-unused-vars': [2, { 23 | args: 'all', 24 | vars: 'local' 25 | }], 26 | 'no-empty': 2, 27 | 'no-console': 0, 28 | 'no-var': 2, 29 | 'quotes': [2, 'backtick'], 30 | 'prefer-arrow-callback': 2, 31 | 'arrow-body-style': [2, 'as-needed'], 32 | 'curly': 'error', 33 | 'dot-notation': [2, { 34 | allowKeywords: false 35 | }], 36 | 'constructor-super': 2, 37 | 'object-shorthand': 2, 38 | 'prefer-const': 2, 39 | 'no-debugger': 2, 40 | 'spaced-comment': 2, 41 | 'vars-on-top': 2, 42 | 'no-irregular-whitespace': 2, 43 | 'indent': [2, 2] 44 | } 45 | }; -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: processing 2 | custom: https://processingfoundation.org/ 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .eslintrc 2 | node_modules/ 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | 2 | language: node_js 3 | node_js: 4 | - "10.1.0" 5 | install: 6 | - npm install 7 | script: 8 | - grunt 9 | # after_success: 10 | # - npm run test 11 | sudo: false 12 | -------------------------------------------------------------------------------- /4.1.2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/processing/p5.accessibility/165b836a8153aeb0529a678a211efac112f3d4fe/4.1.2 -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # p5.js Code of Conduct 2 | 3 | * **Be mindful of your language.** Any of the following behavior is unacceptable: 4 | * Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background 5 | * Threats of violence 6 | * Deliberate intimidation 7 | * Sexually explicit or violent material 8 | * Unwelcome sexual attention 9 | * Stalking or following 10 | * Or any other kinds of harassment 11 | 12 | Use your best judgement. If it will possibly make others uncomfortable, do not post it. 13 | 14 | * **Be respectful.** Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care. 15 | * **Be considerate.** Think about how your contribution will affect others in the community. 16 | * **Be open minded.** Embrace new people and new ideas. Our community is continually evolving and we welcome positive change. 17 | 18 | If you believe someone is violating the code of conduct, we ask that you report it by emailing [hello@p5js.org](mailto:hello@p5js.org). Please include your name and a description of the incident, and we will get back to you ASAP. 19 | 20 | Participants asked to stop any harassing behavior are expected to comply immediately. If a participant engages in harassing behavior, the p5.js Team may take any action they deem appropriate, up to and including expulsion from all p5.js spaces and identification of the participant as a harasser to other p5.js members or the general public. 21 | 22 | ## Also 23 | * You can read our [community statement](http://p5js.org/community/) on our website. 24 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Get Involved 2 | p5.js and p5.accessibility.js are collaborative projects created by many individuals, and you are invited to help. All types of involvement are welcome. See the [community section](https://p5js.org/community/) to get started! 3 | 4 | ### How Can I Contribute? 5 | #### First Timers 6 | For first-time contributors or those who want to start with a small task: check out our list of [good first bugs](https://github.com/processing/p5.accessibility/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22). First read the github discussion on that issue and find out if there's currently a person working on that or not. If no one is working on it or if there has was one claimed to but has not been active for a while, ask if it is up for grabs. It's okay to not know how to fix an issue and feel free to ask questions about to approach the problem! We are all just here to learn and make something awesome. Someone from the community would help you out and these are great issues for learning about the library and its development process. 7 | 8 | #### Want something more challenging? 9 | If you're already familiar with the project or would like take on something a little more challenging, please take a look at the [priority: high](https://github.com/processing/p5.accessibility/issues?q=is%3Aopen+is%3Aissue+label%3A%22priority%3A+high%22) issues. 10 | 11 | #### Feature Enhancement 12 | If you want to work on building new things, please take a look at [type: feature](https://github.com/processing/p5.accessibility/issues?q=is%3Aopen+is%3Aissue+label%3A%22type%3A+feature%22). 13 | 14 | If you'd like to work on a bug, please comment on it to let the maintainers know. If someone else has already commented and taken up that bug, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort. 15 | 16 | ##### Contribution guides 17 | * https://guides.github.com/activities/hello-world/ 18 | * https://guides.github.com/activities/forking/ 19 | 20 | ### Development installation 21 | 22 | * Clone or download this repo 23 | * `cd` into the repo 24 | * run `npm install` 25 | * run `grunt curl` to get the latest versions of the CDN libraries 26 | * make changes to the source code in the `src` folder 27 | * run `grunt` in the root folder, this will update the library in `/dist/p5-accessibility.js` 28 | * keep in mind that the examples here reference the latest CDN link to the library and not the `/dist/p5-accessibility.js` that you might generate. If you want to test your changes with the existing examples, change the index.html files in the examples to point to your local `/dist/p5-accessibility.js` 29 | -------------------------------------------------------------------------------- /CodeStructure.md: -------------------------------------------------------------------------------- 1 | The p5.accessibility library is made of the following parts: 2 | 3 | ## Interceptors 4 | 5 | Interceptors refer to the class that is called over the execution of each p5 function. The interceptors call the respective entities (through register) and take the required information that is displayed to the user. 6 | - [Base interceptor](https://github.com/processing/p5.accessibility/blob/master/src/baseInterceptor.js) 7 | - [Text interceptor](https://github.com/processing/p5.accessibility/tree/master/src/textInterceptor) 8 | - [Sound interceptor](https://github.com/processing/p5.accessibility/tree/master/src/soundInterceptor) 9 | - [Grid interceptor](https://github.com/processing/p5.accessibility/tree/master/src/gridInterceptor) 10 | 11 | ## [Entities](https://github.com/processing/p5.accessibility/tree/master/src/entities) 12 | Refers to a class that takes care of specific p5 functions 13 | All of the entities are registered in a registry. This is done so that when a function is called, the program knows which entity needs to be used. 14 | - Base entity (base class) 15 | - Fill entity (takes care of fill function) 16 | - Shape entity (takes care of all the 2d shape functions) 17 | 18 | ## [Registry](https://github.com/processing/p5.accessibility/blob/master/src/registry.js) 19 | 20 | This class contains a register of entities and their respective p5 functions. 21 | 22 | ## [Data](https://github.com/processing/p5.accessibility/blob/master/src/_data.js) 23 | The data is essentially a list of all functions, their parameters, and outputs. This file it generated by the p5.js library. 24 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* global module */ 2 | module.exports = function(grunt) { 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON(`package.json`), 5 | curl: { 6 | 'src/colorNamer.js': `https://rawgit.com/lm-n/color-namer/master/lib/colorNamer.js` 7 | }, 8 | concat: { 9 | options: { 10 | // define a string to put between each file in the concatenated output 11 | separator: `;` 12 | }, 13 | dist: { 14 | // the files to concatenate 15 | src: [`src/colorNamer.js`, `src/createHTMLstructure.js`, `src/_data.js`, `src/registry.js`, `src/interceptorHelperFunctions.js`, `src/baseInterceptor.js`, `src/entities/_baseEntity.js`, `src/entities/backgroundEntity.js`, `src/entities/fillEntity.js`, `src/entities/shapeEntity.js`, `src/entities/textEntity.js`, `src/entities/ellipseModeEntity.js`, `src/ntc.min.js`, `src/textInterceptor/*.js`, `src/gridInterceptor/*.js`, `src/soundInterceptor/*.js`], 16 | // the location of the resulting JS file 17 | dest: `dist/p5.accessibility.js` 18 | } 19 | }, 20 | uglify: { 21 | options: { 22 | banner: `/*! p5.accessibility */\n` 23 | }, 24 | dist: { 25 | files: { 26 | 'dist/p5.accessibility.min.js': [`<%= concat.dist.dest %>`] 27 | } 28 | } 29 | }, 30 | watch: { 31 | files: [`<%= concat.dist.src %>`], 32 | tasks: [`concat`] 33 | }, 34 | eslint: { 35 | source: { 36 | options: { 37 | configFile: `./.eslintrc.js` 38 | }, 39 | src: [`./src/**/*.js`] 40 | } 41 | }, 42 | open: { 43 | testChrome: { 44 | path: `http://localhost:8000/test`, 45 | app: `Chrome` 46 | }, 47 | testFirefox: { 48 | path: `http://localhost:8000/test`, 49 | app: `Firefox` 50 | }, 51 | testSafari: { 52 | path: `http://localhost:8000/test`, 53 | app: `Safari` 54 | } 55 | }, 56 | connect: { 57 | server: { 58 | options: { 59 | port: 8000, 60 | livereload: 35727, 61 | hostname: `*` 62 | } 63 | } 64 | } 65 | }); 66 | 67 | grunt.loadNpmTasks(`grunt-contrib-uglify`); 68 | grunt.loadNpmTasks(`grunt-contrib-watch`); 69 | grunt.loadNpmTasks(`grunt-contrib-concat`); 70 | grunt.loadNpmTasks(`grunt-contrib-connect`); 71 | grunt.loadNpmTasks(`grunt-curl`); 72 | grunt.loadNpmTasks(`grunt-open`); 73 | 74 | grunt.registerTask(`default`, [`concat`]); 75 | grunt.registerTask(`serve`, [`connect:server:keepalive`]); 76 | grunt.registerTask(`run-tests`, [`serve`, `open`]); 77 | }; 78 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | #### Nature of issue? 10 | 11 | - [ ] Found a bug 12 | - [ ] Existing feature enhancement 13 | - [ ] New feature request 14 | 15 | 16 | #### Details about the bug: 17 | 18 | - Web browser and version: 19 | - Operating System: 20 | - Steps to reproduce this: 21 | 22 | 23 | 24 | #### Feature enhancement details: 25 | 26 | 27 | 28 | #### New feature details: 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 2.1, February 1999 3 | 4 | Copyright (C) 1991, 1999 Free Software Foundation, Inc. 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | (This is the first released version of the Lesser GPL. It also counts 10 | as the successor of the GNU Library Public License, version 2, hence 11 | the version number 2.1.) 12 | 13 | Preamble 14 | 15 | The licenses for most software are designed to take away your 16 | freedom to share and change it. By contrast, the GNU General Public 17 | Licenses are intended to guarantee your freedom to share and change 18 | free software--to make sure the software is free for all its users. 19 | 20 | This license, the Lesser General Public License, applies to some 21 | specially designated software packages--typically libraries--of the 22 | Free Software Foundation and other authors who decide to use it. You 23 | can use it too, but we suggest you first think carefully about whether 24 | this license or the ordinary General Public License is the better 25 | strategy to use in any particular case, based on the explanations below. 26 | 27 | When we speak of free software, we are referring to freedom of use, 28 | not price. Our General Public Licenses are designed to make sure that 29 | you have the freedom to distribute copies of free software (and charge 30 | for this service if you wish); that you receive source code or can get 31 | it if you want it; that you can change the software and use pieces of 32 | it in new free programs; and that you are informed that you can do 33 | these things. 34 | 35 | To protect your rights, we need to make restrictions that forbid 36 | distributors to deny you these rights or to ask you to surrender these 37 | rights. These restrictions translate to certain responsibilities for 38 | you if you distribute copies of the library or if you modify it. 39 | 40 | For example, if you distribute copies of the library, whether gratis 41 | or for a fee, you must give the recipients all the rights that we gave 42 | you. You must make sure that they, too, receive or can get the source 43 | code. If you link other code with the library, you must provide 44 | complete object files to the recipients, so that they can relink them 45 | with the library after making changes to the library and recompiling 46 | it. And you must show them these terms so they know their rights. 47 | 48 | We protect your rights with a two-step method: (1) we copyright the 49 | library, and (2) we offer you this license, which gives you legal 50 | permission to copy, distribute and/or modify the library. 51 | 52 | To protect each distributor, we want to make it very clear that 53 | there is no warranty for the free library. Also, if the library is 54 | modified by someone else and passed on, the recipients should know 55 | that what they have is not the original version, so that the original 56 | author's reputation will not be affected by problems that might be 57 | introduced by others. 58 | 59 | Finally, software patents pose a constant threat to the existence of 60 | any free program. We wish to make sure that a company cannot 61 | effectively restrict the users of a free program by obtaining a 62 | restrictive license from a patent holder. Therefore, we insist that 63 | any patent license obtained for a version of the library must be 64 | consistent with the full freedom of use specified in this license. 65 | 66 | Most GNU software, including some libraries, is covered by the 67 | ordinary GNU General Public License. This license, the GNU Lesser 68 | General Public License, applies to certain designated libraries, and 69 | is quite different from the ordinary General Public License. We use 70 | this license for certain libraries in order to permit linking those 71 | libraries into non-free programs. 72 | 73 | When a program is linked with a library, whether statically or using 74 | a shared library, the combination of the two is legally speaking a 75 | combined work, a derivative of the original library. The ordinary 76 | General Public License therefore permits such linking only if the 77 | entire combination fits its criteria of freedom. The Lesser General 78 | Public License permits more lax criteria for linking other code with 79 | the library. 80 | 81 | We call this license the "Lesser" General Public License because it 82 | does Less to protect the user's freedom than the ordinary General 83 | Public License. It also provides other free software developers Less 84 | of an advantage over competing non-free programs. These disadvantages 85 | are the reason we use the ordinary General Public License for many 86 | libraries. However, the Lesser license provides advantages in certain 87 | special circumstances. 88 | 89 | For example, on rare occasions, there may be a special need to 90 | encourage the widest possible use of a certain library, so that it becomes 91 | a de-facto standard. To achieve this, non-free programs must be 92 | allowed to use the library. A more frequent case is that a free 93 | library does the same job as widely used non-free libraries. In this 94 | case, there is little to gain by limiting the free library to free 95 | software only, so we use the Lesser General Public License. 96 | 97 | In other cases, permission to use a particular library in non-free 98 | programs enables a greater number of people to use a large body of 99 | free software. For example, permission to use the GNU C Library in 100 | non-free programs enables many more people to use the whole GNU 101 | operating system, as well as its variant, the GNU/Linux operating 102 | system. 103 | 104 | Although the Lesser General Public License is Less protective of the 105 | users' freedom, it does ensure that the user of a program that is 106 | linked with the Library has the freedom and the wherewithal to run 107 | that program using a modified version of the Library. 108 | 109 | The precise terms and conditions for copying, distribution and 110 | modification follow. Pay close attention to the difference between a 111 | "work based on the library" and a "work that uses the library". The 112 | former contains code derived from the library, whereas the latter must 113 | be combined with the library in order to run. 114 | 115 | GNU LESSER GENERAL PUBLIC LICENSE 116 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 117 | 118 | 0. This License Agreement applies to any software library or other 119 | program which contains a notice placed by the copyright holder or 120 | other authorized party saying it may be distributed under the terms of 121 | this Lesser General Public License (also called "this License"). 122 | Each licensee is addressed as "you". 123 | 124 | A "library" means a collection of software functions and/or data 125 | prepared so as to be conveniently linked with application programs 126 | (which use some of those functions and data) to form executables. 127 | 128 | The "Library", below, refers to any such software library or work 129 | which has been distributed under these terms. A "work based on the 130 | Library" means either the Library or any derivative work under 131 | copyright law: that is to say, a work containing the Library or a 132 | portion of it, either verbatim or with modifications and/or translated 133 | straightforwardly into another language. (Hereinafter, translation is 134 | included without limitation in the term "modification".) 135 | 136 | "Source code" for a work means the preferred form of the work for 137 | making modifications to it. For a library, complete source code means 138 | all the source code for all modules it contains, plus any associated 139 | interface definition files, plus the scripts used to control compilation 140 | and installation of the library. 141 | 142 | Activities other than copying, distribution and modification are not 143 | covered by this License; they are outside its scope. The act of 144 | running a program using the Library is not restricted, and output from 145 | such a program is covered only if its contents constitute a work based 146 | on the Library (independent of the use of the Library in a tool for 147 | writing it). Whether that is true depends on what the Library does 148 | and what the program that uses the Library does. 149 | 150 | 1. You may copy and distribute verbatim copies of the Library's 151 | complete source code as you receive it, in any medium, provided that 152 | you conspicuously and appropriately publish on each copy an 153 | appropriate copyright notice and disclaimer of warranty; keep intact 154 | all the notices that refer to this License and to the absence of any 155 | warranty; and distribute a copy of this License along with the 156 | Library. 157 | 158 | You may charge a fee for the physical act of transferring a copy, 159 | and you may at your option offer warranty protection in exchange for a 160 | fee. 161 | 162 | 2. You may modify your copy or copies of the Library or any portion 163 | of it, thus forming a work based on the Library, and copy and 164 | distribute such modifications or work under the terms of Section 1 165 | above, provided that you also meet all of these conditions: 166 | 167 | a) The modified work must itself be a software library. 168 | 169 | b) You must cause the files modified to carry prominent notices 170 | stating that you changed the files and the date of any change. 171 | 172 | c) You must cause the whole of the work to be licensed at no 173 | charge to all third parties under the terms of this License. 174 | 175 | d) If a facility in the modified Library refers to a function or a 176 | table of data to be supplied by an application program that uses 177 | the facility, other than as an argument passed when the facility 178 | is invoked, then you must make a good faith effort to ensure that, 179 | in the event an application does not supply such function or 180 | table, the facility still operates, and performs whatever part of 181 | its purpose remains meaningful. 182 | 183 | (For example, a function in a library to compute square roots has 184 | a purpose that is entirely well-defined independent of the 185 | application. Therefore, Subsection 2d requires that any 186 | application-supplied function or table used by this function must 187 | be optional: if the application does not supply it, the square 188 | root function must still compute square roots.) 189 | 190 | These requirements apply to the modified work as a whole. If 191 | identifiable sections of that work are not derived from the Library, 192 | and can be reasonably considered independent and separate works in 193 | themselves, then this License, and its terms, do not apply to those 194 | sections when you distribute them as separate works. But when you 195 | distribute the same sections as part of a whole which is a work based 196 | on the Library, the distribution of the whole must be on the terms of 197 | this License, whose permissions for other licensees extend to the 198 | entire whole, and thus to each and every part regardless of who wrote 199 | it. 200 | 201 | Thus, it is not the intent of this section to claim rights or contest 202 | your rights to work written entirely by you; rather, the intent is to 203 | exercise the right to control the distribution of derivative or 204 | collective works based on the Library. 205 | 206 | In addition, mere aggregation of another work not based on the Library 207 | with the Library (or with a work based on the Library) on a volume of 208 | a storage or distribution medium does not bring the other work under 209 | the scope of this License. 210 | 211 | 3. You may opt to apply the terms of the ordinary GNU General Public 212 | License instead of this License to a given copy of the Library. To do 213 | this, you must alter all the notices that refer to this License, so 214 | that they refer to the ordinary GNU General Public License, version 2, 215 | instead of to this License. (If a newer version than version 2 of the 216 | ordinary GNU General Public License has appeared, then you can specify 217 | that version instead if you wish.) Do not make any other change in 218 | these notices. 219 | 220 | Once this change is made in a given copy, it is irreversible for 221 | that copy, so the ordinary GNU General Public License applies to all 222 | subsequent copies and derivative works made from that copy. 223 | 224 | This option is useful when you wish to copy part of the code of 225 | the Library into a program that is not a library. 226 | 227 | 4. You may copy and distribute the Library (or a portion or 228 | derivative of it, under Section 2) in object code or executable form 229 | under the terms of Sections 1 and 2 above provided that you accompany 230 | it with the complete corresponding machine-readable source code, which 231 | must be distributed under the terms of Sections 1 and 2 above on a 232 | medium customarily used for software interchange. 233 | 234 | If distribution of object code is made by offering access to copy 235 | from a designated place, then offering equivalent access to copy the 236 | source code from the same place satisfies the requirement to 237 | distribute the source code, even though third parties are not 238 | compelled to copy the source along with the object code. 239 | 240 | 5. A program that contains no derivative of any portion of the 241 | Library, but is designed to work with the Library by being compiled or 242 | linked with it, is called a "work that uses the Library". Such a 243 | work, in isolation, is not a derivative work of the Library, and 244 | therefore falls outside the scope of this License. 245 | 246 | However, linking a "work that uses the Library" with the Library 247 | creates an executable that is a derivative of the Library (because it 248 | contains portions of the Library), rather than a "work that uses the 249 | library". The executable is therefore covered by this License. 250 | Section 6 states terms for distribution of such executables. 251 | 252 | When a "work that uses the Library" uses material from a header file 253 | that is part of the Library, the object code for the work may be a 254 | derivative work of the Library even though the source code is not. 255 | Whether this is true is especially significant if the work can be 256 | linked without the Library, or if the work is itself a library. The 257 | threshold for this to be true is not precisely defined by law. 258 | 259 | If such an object file uses only numerical parameters, data 260 | structure layouts and accessors, and small macros and small inline 261 | functions (ten lines or less in length), then the use of the object 262 | file is unrestricted, regardless of whether it is legally a derivative 263 | work. (Executables containing this object code plus portions of the 264 | Library will still fall under Section 6.) 265 | 266 | Otherwise, if the work is a derivative of the Library, you may 267 | distribute the object code for the work under the terms of Section 6. 268 | Any executables containing that work also fall under Section 6, 269 | whether or not they are linked directly with the Library itself. 270 | 271 | 6. As an exception to the Sections above, you may also combine or 272 | link a "work that uses the Library" with the Library to produce a 273 | work containing portions of the Library, and distribute that work 274 | under terms of your choice, provided that the terms permit 275 | modification of the work for the customer's own use and reverse 276 | engineering for debugging such modifications. 277 | 278 | You must give prominent notice with each copy of the work that the 279 | Library is used in it and that the Library and its use are covered by 280 | this License. You must supply a copy of this License. If the work 281 | during execution displays copyright notices, you must include the 282 | copyright notice for the Library among them, as well as a reference 283 | directing the user to the copy of this License. Also, you must do one 284 | of these things: 285 | 286 | a) Accompany the work with the complete corresponding 287 | machine-readable source code for the Library including whatever 288 | changes were used in the work (which must be distributed under 289 | Sections 1 and 2 above); and, if the work is an executable linked 290 | with the Library, with the complete machine-readable "work that 291 | uses the Library", as object code and/or source code, so that the 292 | user can modify the Library and then relink to produce a modified 293 | executable containing the modified Library. (It is understood 294 | that the user who changes the contents of definitions files in the 295 | Library will not necessarily be able to recompile the application 296 | to use the modified definitions.) 297 | 298 | b) Use a suitable shared library mechanism for linking with the 299 | Library. A suitable mechanism is one that (1) uses at run time a 300 | copy of the library already present on the user's computer system, 301 | rather than copying library functions into the executable, and (2) 302 | will operate properly with a modified version of the library, if 303 | the user installs one, as long as the modified version is 304 | interface-compatible with the version that the work was made with. 305 | 306 | c) Accompany the work with a written offer, valid for at 307 | least three years, to give the same user the materials 308 | specified in Subsection 6a, above, for a charge no more 309 | than the cost of performing this distribution. 310 | 311 | d) If distribution of the work is made by offering access to copy 312 | from a designated place, offer equivalent access to copy the above 313 | specified materials from the same place. 314 | 315 | e) Verify that the user has already received a copy of these 316 | materials or that you have already sent this user a copy. 317 | 318 | For an executable, the required form of the "work that uses the 319 | Library" must include any data and utility programs needed for 320 | reproducing the executable from it. However, as a special exception, 321 | the materials to be distributed need not include anything that is 322 | normally distributed (in either source or binary form) with the major 323 | components (compiler, kernel, and so on) of the operating system on 324 | which the executable runs, unless that component itself accompanies 325 | the executable. 326 | 327 | It may happen that this requirement contradicts the license 328 | restrictions of other proprietary libraries that do not normally 329 | accompany the operating system. Such a contradiction means you cannot 330 | use both them and the Library together in an executable that you 331 | distribute. 332 | 333 | 7. You may place library facilities that are a work based on the 334 | Library side-by-side in a single library together with other library 335 | facilities not covered by this License, and distribute such a combined 336 | library, provided that the separate distribution of the work based on 337 | the Library and of the other library facilities is otherwise 338 | permitted, and provided that you do these two things: 339 | 340 | a) Accompany the combined library with a copy of the same work 341 | based on the Library, uncombined with any other library 342 | facilities. This must be distributed under the terms of the 343 | Sections above. 344 | 345 | b) Give prominent notice with the combined library of the fact 346 | that part of it is a work based on the Library, and explaining 347 | where to find the accompanying uncombined form of the same work. 348 | 349 | 8. You may not copy, modify, sublicense, link with, or distribute 350 | the Library except as expressly provided under this License. Any 351 | attempt otherwise to copy, modify, sublicense, link with, or 352 | distribute the Library is void, and will automatically terminate your 353 | rights under this License. However, parties who have received copies, 354 | or rights, from you under this License will not have their licenses 355 | terminated so long as such parties remain in full compliance. 356 | 357 | 9. You are not required to accept this License, since you have not 358 | signed it. However, nothing else grants you permission to modify or 359 | distribute the Library or its derivative works. These actions are 360 | prohibited by law if you do not accept this License. Therefore, by 361 | modifying or distributing the Library (or any work based on the 362 | Library), you indicate your acceptance of this License to do so, and 363 | all its terms and conditions for copying, distributing or modifying 364 | the Library or works based on it. 365 | 366 | 10. Each time you redistribute the Library (or any work based on the 367 | Library), the recipient automatically receives a license from the 368 | original licensor to copy, distribute, link with or modify the Library 369 | subject to these terms and conditions. You may not impose any further 370 | restrictions on the recipients' exercise of the rights granted herein. 371 | You are not responsible for enforcing compliance by third parties with 372 | this License. 373 | 374 | 11. If, as a consequence of a court judgment or allegation of patent 375 | infringement or for any other reason (not limited to patent issues), 376 | conditions are imposed on you (whether by court order, agreement or 377 | otherwise) that contradict the conditions of this License, they do not 378 | excuse you from the conditions of this License. If you cannot 379 | distribute so as to satisfy simultaneously your obligations under this 380 | License and any other pertinent obligations, then as a consequence you 381 | may not distribute the Library at all. For example, if a patent 382 | license would not permit royalty-free redistribution of the Library by 383 | all those who receive copies directly or indirectly through you, then 384 | the only way you could satisfy both it and this License would be to 385 | refrain entirely from distribution of the Library. 386 | 387 | If any portion of this section is held invalid or unenforceable under any 388 | particular circumstance, the balance of the section is intended to apply, 389 | and the section as a whole is intended to apply in other circumstances. 390 | 391 | It is not the purpose of this section to induce you to infringe any 392 | patents or other property right claims or to contest validity of any 393 | such claims; this section has the sole purpose of protecting the 394 | integrity of the free software distribution system which is 395 | implemented by public license practices. Many people have made 396 | generous contributions to the wide range of software distributed 397 | through that system in reliance on consistent application of that 398 | system; it is up to the author/donor to decide if he or she is willing 399 | to distribute software through any other system and a licensee cannot 400 | impose that choice. 401 | 402 | This section is intended to make thoroughly clear what is believed to 403 | be a consequence of the rest of this License. 404 | 405 | 12. If the distribution and/or use of the Library is restricted in 406 | certain countries either by patents or by copyrighted interfaces, the 407 | original copyright holder who places the Library under this License may add 408 | an explicit geographical distribution limitation excluding those countries, 409 | so that distribution is permitted only in or among countries not thus 410 | excluded. In such case, this License incorporates the limitation as if 411 | written in the body of this License. 412 | 413 | 13. The Free Software Foundation may publish revised and/or new 414 | versions of the Lesser General Public License from time to time. 415 | Such new versions will be similar in spirit to the present version, 416 | but may differ in detail to address new problems or concerns. 417 | 418 | Each version is given a distinguishing version number. If the Library 419 | specifies a version number of this License which applies to it and 420 | "any later version", you have the option of following the terms and 421 | conditions either of that version or of any later version published by 422 | the Free Software Foundation. If the Library does not specify a 423 | license version number, you may choose any version ever published by 424 | the Free Software Foundation. 425 | 426 | 14. If you wish to incorporate parts of the Library into other free 427 | programs whose distribution conditions are incompatible with these, 428 | write to the author to ask for permission. For software which is 429 | copyrighted by the Free Software Foundation, write to the Free 430 | Software Foundation; we sometimes make exceptions for this. Our 431 | decision will be guided by the two goals of preserving the free status 432 | of all derivatives of our free software and of promoting the sharing 433 | and reuse of software generally. 434 | 435 | NO WARRANTY 436 | 437 | 15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO 438 | WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW. 439 | EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR 440 | OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY 441 | KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE 442 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 443 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE 444 | LIBRARY IS WITH YOU. SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME 445 | THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 446 | 447 | 16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN 448 | WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY 449 | AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU 450 | FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR 451 | CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE 452 | LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING 453 | RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 454 | FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF 455 | SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH 456 | DAMAGES. 457 | 458 | END OF TERMS AND CONDITIONS 459 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Before your pull request is reviewed and merged, make sure you 2 | 3 | - [ ] there are no linting/build errors -- `npm run build` 4 | - [ ] code is in uniquely-named feature branch, and has been rebased on top of latest master. If you're asked to make more changes make sure you rebase onto master then too! 5 | - [ ] pull request is descriptively named and links to an issue number, i.e. `Fixes #123` 6 | 7 | Thank you! 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Notice: This library is no longer being updated. We are currently working on integrating the Text Output and Grid Output (formerly called Table Text Output) into p5.js. You can learn more about this work in [#4703](https://github.com/processing/p5.js/pull/4703). Once #4703 is merged we will be archiving this repository. Thanks to everyone that has contributed to this repository ❤️. 2 | 3 | [](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html) 4 | 5 | # p5.accessibility.js 6 | 7 | ## Overview 8 | 9 | p5.accessibility.js makes the p5 canvas more accessible to people who are blind and visually impaired. 10 | 11 | To learn about using p5.js with a screen reader please read the ["Using p5 with a screen reader" tutorial.](https://p5js.org/learn/p5-screen-reader.html) 12 | 13 | **\*Note** : the p5.accessibility library is currently not supported on MacOS. \* 14 | 15 | ### About the library 16 | 17 | The canvas is an inherently inaccessible element in the web. This library tries to reconstruct the content of the p5 canvas in words and sounds accessible to screen readers. 18 | 19 | The library creates 3 outputs: 20 | 21 | 1. **Plain Text Output** - This output describes the visual content present on the canvas. 22 | 23 | The general description of the canvas includes canvas size, canvas color, and number of elements in the canvas (example: "Your output is a 200 by 200 lavender blue (123, 87, 255) canvas containing the following 4 objects:""). This description is followed by a list of elements where the shape, color, position, and area of each element are described (example: "orange (255, 128, 0) ellipse at top left covering 0.79% of the canvas"), each element can be selected to get more details. A table of elements is also provided. In this table, shape, color, location, coordinates and area are described (example: "orange (255, 128, 0) ellipse location=top left coordinates =20x,20y area=0.79%"). 24 | 25 | 2. **Table Text Output** - The table output laids out the content of the canvas in the form of a table based on the spatial location of each element. 26 | 27 | A brief description of the canvas is available before the table output. This description includes: color of the background, size of the canvas, number of objects, and object types (example: "lavender blue (123, 87, 255) canvas is 200 by 200 of area 40000 contains 4 objects - 3 ellipse 1 rect"). The table describes the content spatially, each element is placed on a cell of the table depending on its position. Within each cell an element the color and type of shape of that element are available (example: "orange (255, 87, 255) ellipse"). These descriptions can be selected individually to get more details. A list of elements where shape, color, location, coordinates and area are described (example: "orange (255, 128, 0) ellipse location=top left coordinates =20x,20y area=0.79%") is also available. 28 | 29 | 3. **Sound Output** - This mode explains the movement of the objects present in the canvas. Top to Down movement is represented by a decrease in frequency and left to right through panning. 30 | 31 | To learn more about the project please read the following Medium articles: [P5 accessibility](https://medium.com/processing-foundation/accessibility-115d84535fa8) and [Making p5.js Accessible](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0). 32 | 33 | If you have found a bug in the p5.accessibility.js library, you can file it here under the [“issues”](https://github.com/processing/p5.accessibility/issues) tab. 34 | 35 | ## Usage 36 | 37 | Link to the library at the end of your html file: 38 | `` 39 | 40 | To get the **plain text output**, include the following in your HTML file, and place it where you want the output to be available: 41 | `` 42 | 43 | To get the **table text output**, include the following in your HTML file, and place it where you want the output to be available: 44 | `` 45 | 46 | To get the **sound output**, include the following in your HTML file, and place it where you want the output to be available: 47 | `` 48 | 49 | To make the **plain text and table text outputs** visible include the following in your HTML file: 50 | 51 | ```html 52 | 62 | ``` 63 | 64 | ## Get Involved 65 | 66 | p5.js and p5.accessibility.js are collaborative projects created by many individuals, and you are invited to help. All types of involvement are welcome. See the [community section](https://p5js.org/community/) to get started! 67 | 68 | ### How Can I Contribute? 69 | 70 | #### First Timers 71 | 72 | For first-time contributors or those who want to start with a small task: check out our list of [good first bugs](https://github.com/processing/p5.accessibility/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22). First read the github discussion on that issue and find out if there's currently a person working on that or not. If no one is working on it or if there has was one claimed to but has not been active for a while, ask if it is up for grabs. It's okay to not know how to fix an issue and feel free to ask questions about to approach the problem! We are all just here to learn and make something awesome. Someone from the community would help you out and these are great issues for learning about the library and its development process. 73 | 74 | #### Want something more challenging? 75 | 76 | If you're already familiar with the project or would like take on something a little more challenging, please take a look at the [priority: high](https://github.com/processing/p5.accessibility/issues?q=is%3Aopen+is%3Aissue+label%3A%22priority%3A+high%22) issues. 77 | 78 | #### Feature Enhancement 79 | 80 | If you want to work on building new things, please take a look at [type: feature](https://github.com/processing/p5.accessibility/issues?q=is%3Aopen+is%3Aissue+label%3A%22type%3A+feature%22). 81 | 82 | If you'd like to work on a bug, please comment on it to let the maintainers know. If someone else has already commented and taken up that bug, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort. 83 | 84 | ##### Contribution guides 85 | 86 | - You can read more about the [code structure here](https://github.com/processing/p5.accessibility/blob/master/CodeStructure.md). 87 | - https://guides.github.com/activities/hello-world/ 88 | - https://guides.github.com/activities/forking/ 89 | 90 | ### Development installation 91 | 92 | - Clone or download this repo 93 | - `cd` into the repo 94 | - run `npm install` 95 | - run `grunt curl` to get the latest versions of the CDN libraries 96 | - make changes to the source code in the `src` folder 97 | - run `grunt` in the root folder, this will update the library in `/dist/p5.accessibility.js` 98 | - keep in mind that the examples here reference the latest CDN link to the library and not the `/dist/p5.accessibility.js` that you might generate. If you want to test your changes with the existing examples, change the index.html files in the examples to point to your local `/dist/p5.accessibility.js` 99 | 100 | ## Tools 101 | 102 | We use the following tools: 103 | 104 | - [grunt-curl](https://github.com/twolfson/grunt-curl) a low-tech dependency manager. 105 | - [ColorNamer.js](https://github.com/MathuraMG/color-namer) a simple npm module/js client library that gives back an accessible color-name of a hex or rgb value. 106 | -------------------------------------------------------------------------------- /examples/Example/app.js: -------------------------------------------------------------------------------- 1 | let x =0, speed =2; 2 | let red; 3 | let backColor; 4 | function setup() { 5 | createCanvas(200,200); 6 | red=color(255,128,0); 7 | backColor=color(123,87,255); 8 | } 9 | 10 | function draw() { 11 | background(backColor); 12 | fill(red); 13 | ellipse(20,20,20,20); 14 | fill(32,255,65); 15 | ellipse(50,x,10,10); 16 | fill(`#00ffb2`); 17 | ellipse(150,200-x,10,10); 18 | fill(150); 19 | rect(170,170,25,25); 20 | x+=speed ; 21 | if(x>200 || x < 0) { 22 | speed = -speed; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/Example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/ExampleStyled/app.js: -------------------------------------------------------------------------------- 1 | 2 | let x =0, speed =2; 3 | let mycolor; 4 | let backColor; 5 | function setup() { 6 | createCanvas(200,200); 7 | mycolor=color(255,128,0); 8 | backColor=color(123,87,255); 9 | } 10 | 11 | function draw() { 12 | background(backColor); 13 | fill(mycolor); 14 | ellipse(20,20,20,20); 15 | fill('maroon'); 16 | ellipse(20,50,20,20); 17 | fill(32,255,65); 18 | ellipse(50,x,10,10); 19 | fill(`#00ffb2`); 20 | ellipse(150,200-x,10,10); 21 | fill(150); 22 | rect(170,170,25,25); 23 | x+=speed ; 24 | if(x>200 || x < 0) { 25 | speed = -speed; 26 | } 27 | } -------------------------------------------------------------------------------- /examples/ExampleStyled/basicCanvas.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | // try changing the values here 3 | createCanvas(300,200); 4 | background(0); 5 | } 6 | 7 | function draw() { 8 | } 9 | -------------------------------------------------------------------------------- /examples/ExampleStyled/basicShapes.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(300,200); 3 | background(255); 4 | } 5 | 6 | function draw() { 7 | // try changing the values of each shape and their fill() values 8 | fill(0); 9 | ellipse(50,50,20,30); 10 | fill(255,0,0); 11 | rect(150,50,100,50); 12 | fill(0,255,0); 13 | triangle(50,150,100,150,100,100); 14 | fill(0,0,255); 15 | quad(200,150,250,150,250,180,200,190); 16 | } 17 | -------------------------------------------------------------------------------- /examples/ExampleStyled/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/ExampleStyled/linesAndPoints.js: -------------------------------------------------------------------------------- 1 | function setup() { 2 | createCanvas(200,200); 3 | background(20); 4 | stroke(255); 5 | } 6 | 7 | function draw() { 8 | // try changing the values of each shape and their fill() values 9 | line(50,50,90,90); 10 | line(150,50,110,90); 11 | point(100,100); 12 | point(100,50); 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "p5.accessibility", 3 | "version": "0.2.0", 4 | "description": "npm package to provide text and sound additions to p5 sketch output", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "grunt run-tests", 8 | "build": "eslint src/ && grunt" 9 | }, 10 | "contributors": [ 11 | "MathuraMG", 12 | "lmhyphenn", 13 | "CleezyITP", 14 | "spiray", 15 | "mithru", 16 | "git-ebetts", 17 | "jbrundage" 18 | ], 19 | "bugs": "https://github.com/processing/p5.accessibility/issues", 20 | "license": "ISC", 21 | "dependencies": { 22 | "grunt-cli": "^1.2.0", 23 | "grunt-contrib-connect": "^1.0.2", 24 | "grunt-curl": "^2.5.1", 25 | "jquery": "^3.4.1" 26 | }, 27 | "devDependencies": { 28 | "eslint": "^5.0.1", 29 | "eslint-config-p5js": "^1.0.1", 30 | "grunt": "^1.0.4", 31 | "grunt-contrib-coffee": "^2.0.0", 32 | "grunt-contrib-concat": "^0.5.0", 33 | "grunt-contrib-cssmin": "~0.10.0", 34 | "grunt-contrib-sass": "^0.7.3", 35 | "grunt-contrib-uglify": "^3.3.0", 36 | "grunt-contrib-watch": "^1.1.0", 37 | "grunt-eslint": "^21.0.0", 38 | "grunt-mocha": "^1.2.0", 39 | "grunt-open": "^0.2.4", 40 | "nyc": "^12.0.2" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/baseInterceptor.js: -------------------------------------------------------------------------------- 1 | const MAX_OBJECTS = 20; 2 | function baseInterceptor() { 3 | this.prevTotalCount = 0, 4 | this.totalCount = 0, 5 | this.currentColor = 'white', 6 | this.currentEllipseMode = 'center', 7 | this.bgColor = 'white', 8 | this.objectArea = 0, 9 | this.coordinates = [], 10 | this.objectDescription = '', 11 | this.canvasDetails = { 12 | width: 0, 13 | height: 0 14 | }, 15 | this.setupObject = { 16 | objectArray: [], 17 | objectCount: 0, 18 | objectTypeCount: {} 19 | }, 20 | this.drawObject = { 21 | objectArray: [], 22 | objectCount: 0, 23 | objectTypeCount: {} 24 | }, 25 | this.isCleared = false; 26 | } 27 | 28 | baseInterceptor.prototype.getColorName = function(colArgs) { 29 | if (colArgs.length === 4) { 30 | return (getRGBAname(colArgs)); 31 | } else if (colArgs.length === 3) { 32 | return (getRGBname(colArgs)); 33 | } else if (colArgs.length === 2) { 34 | const trans = Math.round(100 - ((colArgs[1] * 100) / 255)); 35 | // assuming that we are doing RGB - this would be a grayscale number 36 | if (colArgs[0] < 10) { 37 | const rgb = '(0, 0, 0)'; 38 | if (trans === 0) { 39 | return ({ 40 | 'color': 'black' + ' ' 41 | }); 42 | } else { 43 | return ({ 44 | 'color': 'black with ' + trans + '% tranparency' + ' ' 45 | }); 46 | } 47 | } else if (colArgs[0] > 240) { 48 | const rgb = '(255, 255, 255)'; 49 | if (trans === 0) { 50 | return ({ 51 | 'color': 'white' + ' ' 52 | }); 53 | } else { 54 | return ({ 55 | 'color': 'white with ' + trans + '% tranparency' + ' ' 56 | }); 57 | } 58 | } else { 59 | const rgb = '(' + Math.round(colArgs[0]) + ', ' + Math.round(colArgs[0]) + ', ' + Math.round(colArgs[0]) + ')'; 60 | if (trans === 0) { 61 | return ({ 62 | 'color': 'gray' + ' ' 63 | }); 64 | } else { 65 | return ({ 66 | 'color': 'gray with ' + trans + '% tranparency' + ' ' 67 | }); 68 | } 69 | } 70 | } else if (colArgs.length === 1) { 71 | if (!(typeof(colArgs[0])).localeCompare('number')) { 72 | if (colArgs[0] < 10) { 73 | const rgb = '(0, 0, 0)'; 74 | return ({ 75 | 'color': 'black' + ' ' 76 | }); 77 | } else if (colArgs[0] > 240) { 78 | const rgb = '(255, 255, 255)'; 79 | return ({ 80 | 'color': 'white' + ' ' 81 | }); 82 | } else { 83 | const rgb = '(' + colArgs[0] + ', ' + colArgs[0] + ', ' + colArgs[0] + ')'; 84 | return ({ 85 | 'color': 'grey' + ' ' 86 | }); 87 | } 88 | } else if (!(typeof(colArgs[0])).localeCompare('string')) { 89 | if (!colArgs[0].charAt(0).localeCompare('#')) { 90 | return (getHexname(colArgs)); 91 | } else if (colArgs[0].match(/rgba/)) { 92 | return (RGBAString(colArgs)); 93 | } else if (colArgs[0].match(/rgb/)) { 94 | return (RGBString(colArgs)); 95 | } else if(htmlColors.filter(hc => hc.name === colArgs[0].toUpperCase()).length != 0){ 96 | for (let i = htmlColors.length - 1; i >= 0; i--) { 97 | if (htmlColors[i].name === colArgs[0].toUpperCase()){ 98 | return(getHexname([htmlColors[i].hex])); 99 | break; 100 | } 101 | } 102 | }else{ 103 | return ({ 104 | 'color': 'white' + ' ' 105 | }); 106 | } 107 | } 108 | } else { 109 | return ({ 110 | 'color': 'white' + ' ' 111 | }); 112 | } 113 | } 114 | 115 | const htmlColors = [ 116 | {'name':'ALICEBLUE', 'hex':'#F0F8FF'},{'name':'ANTIQUEWHITE', 'hex':'#FAEBD7'},{'name':'AQUA', 'hex':'#00FFFF'},{'name':'AQUAMARINE', 'hex':'#7FFFD4'},{'name':'AZURE', 'hex':'#F0FFFF'},{'name':'BEIGE', 'hex':'#F5F5DC'},{'name':'BISQUE', 'hex':'#FFE4C4'},{'name':'BLACK', 'hex':'#000000'},{'name':'BLANCHEDALMOND', 'hex':'#FFEBCD'},{'name':'BLUE', 'hex':'#0000FF'},{'name':'BLUEVIOLET', 'hex':'#8A2BE2'},{'name':'BROWN', 'hex':'#A52A2A'},{'name':'BURLYWOOD', 'hex':'#DEB887'},{'name':'CADETBLUE', 'hex':'#5F9EA0'},{'name':'CHARTREUSE', 'hex':'#7FFF00'},{'name':'CHOCOLATE', 'hex':'#D2691E'},{'name':'CORAL', 'hex':'#FF7F50'},{'name':'CORNFLOWERBLUE', 'hex':'#6495ED'},{'name':'CORNSILK', 'hex':'#FFF8DC'},{'name':'CRIMSON', 'hex':'#DC143C'},{'name':'CYAN', 'hex':'#00FFFF'},{'name':'DARKBLUE', 'hex':'#00008B'},{'name':'DARKCYAN', 'hex':'#008B8B'},{'name':'DARKGOLDENROD', 'hex':'#B8860B'},{'name':'DARKGRAY', 'hex':'#A9A9A9'},{'name':'DARKGREY', 'hex':'#A9A9A9'},{'name':'DARKGREEN', 'hex':'#006400'},{'name':'DARKKHAKI', 'hex':'#BDB76B'},{'name':'DARKMAGENTA', 'hex':'#8B008B'},{'name':'DARKOLIVEGREEN', 'hex':'#556B2F'},{'name':'DARKORANGE', 'hex':'#FF8C00'},{'name':'DARKORCHID', 'hex':'#9932CC'},{'name':'DARKRED', 'hex':'#8B0000'},{'name':'DARKSALMON', 'hex':'#E9967A'},{'name':'DARKSEAGREEN', 'hex':'#8FBC8F'},{'name':'DARKSLATEBLUE', 'hex':'#483D8B'},{'name':'DARKSLATEGRAY', 'hex':'#2F4F4F'},{'name':'DARKSLATEGREY', 'hex':'#2F4F4F'},{'name':'DARKTURQUOISE', 'hex':'#00CED1'},{'name':'DARKVIOLET', 'hex':'#9400D3'},{'name':'DEEPPINK', 'hex':'#FF1493'},{'name':'DEEPSKYBLUE', 'hex':'#00BFFF'},{'name':'DIMGRAY', 'hex':'#696969'},{'name':'DIMGREY', 'hex':'#696969'},{'name':'DODGERBLUE', 'hex':'#1E90FF'},{'name':'FIREBRICK', 'hex':'#B22222'},{'name':'FLORALWHITE', 'hex':'#FFFAF0'},{'name':'FORESTGREEN', 'hex':'#228B22'},{'name':'FUCHSIA', 'hex':'#FF00FF'},{'name':'GAINSBORO', 'hex':'#DCDCDC'},{'name':'GHOSTWHITE', 'hex':'#F8F8FF'},{'name':'GOLD', 'hex':'#FFD700'},{'name':'GOLDENROD', 'hex':'#DAA520'},{'name':'GRAY', 'hex':'#808080'},{'name':'GREY', 'hex':'#808080'},{'name':'GREEN', 'hex':'#008000'},{'name':'GREENYELLOW', 'hex':'#ADFF2F'},{'name':'HONEYDEW', 'hex':'#F0FFF0'},{'name':'HOTPINK', 'hex':'#FF69B4'},{'name':'INDIANRED', 'hex':'#CD5C5C'},{'name':'INDIGO', 'hex':'#4B0082'},{'name':'IVORY', 'hex':'#FFFFF0'},{'name':'KHAKI', 'hex':'#F0E68C'},{'name':'LAVENDER', 'hex':'#E6E6FA'},{'name':'LAVENDERBLUSH', 'hex':'#FFF0F5'},{'name':'LAWNGREEN', 'hex':'#7CFC00'},{'name':'LEMONCHIFFON', 'hex':'#FFFACD'},{'name':'LIGHTBLUE', 'hex':'#ADD8E6'},{'name':'LIGHTCORAL', 'hex':'#F08080'},{'name':'LIGHTCYAN', 'hex':'#E0FFFF'},{'name':'LIGHTGOLDENRODYELLOW', 'hex':'#FAFAD2'},{'name':'LIGHTGRAY', 'hex':'#D3D3D3'},{'name':'LIGHTGREY', 'hex':'#D3D3D3'},{'name':'LIGHTGREEN', 'hex':'#90EE90'},{'name':'LIGHTPINK', 'hex':'#FFB6C1'},{'name':'LIGHTSALMON', 'hex':'#FFA07A'},{'name':'LIGHTSEAGREEN', 'hex':'#20B2AA'},{'name':'LIGHTSKYBLUE', 'hex':'#87CEFA'},{'name':'LIGHTSLATEGRAY', 'hex':'#778899'},{'name':'LIGHTSLATEGREY', 'hex':'#778899'},{'name':'LIGHTSTEELBLUE', 'hex':'#B0C4DE'},{'name':'LIGHTYELLOW', 'hex':'#FFFFE0'},{'name':'LIME', 'hex':'#00FF00'},{'name':'LIMEGREEN', 'hex':'#32CD32'},{'name':'LINEN', 'hex':'#FAF0E6'},{'name':'MAGENTA', 'hex':'#FF00FF'},{'name':'MAROON', 'hex':'#800000'},{'name':'MEDIUMAQUAMARINE', 'hex':'#66CDAA'},{'name':'MEDIUMBLUE', 'hex':'#0000CD'},{'name':'MEDIUMORCHID', 'hex':'#BA55D3'},{'name':'MEDIUMPURPLE', 'hex':'#9370DB'},{'name':'MEDIUMSEAGREEN', 'hex':'#3CB371'},{'name':'MEDIUMSLATEBLUE', 'hex':'#7B68EE'},{'name':'MEDIUMSPRINGGREEN', 'hex':'#00FA9A'},{'name':'MEDIUMTURQUOISE', 'hex':'#48D1CC'},{'name':'MEDIUMVIOLETRED', 'hex':'#C71585'},{'name':'MIDNIGHTBLUE', 'hex':'#191970'},{'name':'MINTCREAM', 'hex':'#F5FFFA'},{'name':'MISTYROSE', 'hex':'#FFE4E1'},{'name':'MOCCASIN', 'hex':'#FFE4B5'},{'name':'NAVAJOWHITE', 'hex':'#FFDEAD'},{'name':'NAVY', 'hex':'#000080'},{'name':'OLDLACE', 'hex':'#FDF5E6'},{'name':'OLIVE', 'hex':'#808000'},{'name':'OLIVEDRAB', 'hex':'#6B8E23'},{'name':'ORANGE', 'hex':'#FFA500'},{'name':'ORANGERED', 'hex':'#FF4500'},{'name':'ORCHID', 'hex':'#DA70D6'},{'name':'PALEGOLDENROD', 'hex':'#EEE8AA'},{'name':'PALEGREEN', 'hex':'#98FB98'},{'name':'PALETURQUOISE', 'hex':'#AFEEEE'},{'name':'PALEVIOLETRED', 'hex':'#DB7093'},{'name':'PAPAYAWHIP', 'hex':'#FFEFD5'},{'name':'PEACHPUFF', 'hex':'#FFDAB9'},{'name':'PERU', 'hex':'#CD853F'},{'name':'PINK', 'hex':'#FFC0CB'},{'name':'PLUM', 'hex':'#DDA0DD'},{'name':'POWDERBLUE', 'hex':'#B0E0E6'},{'name':'PURPLE', 'hex':'#800080'},{'name':'REBECCAPURPLE', 'hex':'#663399'},{'name':'RED', 'hex':'#FF0000'},{'name':'ROSYBROWN', 'hex':'#BC8F8F'},{'name':'ROYALBLUE', 'hex':'#4169E1'},{'name':'SADDLEBROWN', 'hex':'#8B4513'},{'name':'SALMON', 'hex':'#FA8072'},{'name':'SANDYBROWN', 'hex':'#F4A460'},{'name':'SEAGREEN', 'hex':'#2E8B57'},{'name':'SEASHELL', 'hex':'#FFF5EE'},{'name':'SIENNA', 'hex':'#A0522D'},{'name':'SILVER', 'hex':'#C0C0C0'},{'name':'SKYBLUE', 'hex':'#87CEEB'},{'name':'SLATEBLUE', 'hex':'#6A5ACD'},{'name':'SLATEGRAY', 'hex':'#708090'},{'name':'SLATEGREY', 'hex':'#708090'},{'name':'SNOW', 'hex':'#FFFAFA'},{'name':'SPRINGGREEN', 'hex':'#00FF7F'},{'name':'STEELBLUE', 'hex':'#4682B4'},{'name':'TAN', 'hex':'#D2B48C'},{'name':'TEAL', 'hex':'#008080'},{'name':'THISTLE', 'hex':'#D8BFD8'},{'name':'TOMATO', 'hex':'#FF6347'},{'name':'TURQUOISE', 'hex':'#40E0D0'},{'name':'VIOLET', 'hex':'#EE82EE'},{'name':'WHEAT', 'hex':'#F5DEB3'},{'name':'WHITE', 'hex':'#FFFFFF'},{'name':'WHITESMOKE', 'hex':'#F5F5F5'},{'name':'YELLOW', 'hex':'#FFFF00'},{'name':'YELLOWGREEN', 'hex':'#9ACD32'} 117 | ]; 118 | 119 | function getRGBAname(colArgs) { 120 | const trans = Math.round(100 - ((colArgs[3] * 100))); 121 | /* global rgbColorName */ 122 | const colorName = rgbColorName(colArgs[0], colArgs[1], colArgs[2]); 123 | const rgb = '(' + Math.round(colArgs[0]) + ', ' + Math.round(colArgs[1]) + ', ' + Math.round(colArgs[2]) + ')'; 124 | if (trans > 0) { 125 | return ({ 126 | 'color': colorName + ' with ' + trans + '% tranparency', 127 | rgb 128 | }); 129 | } else { 130 | return ({ 131 | 'color': colorName + ' ' 132 | }); 133 | } 134 | } 135 | 136 | function getRGBname(colArgs) { 137 | const colorName = rgbColorName(colArgs[0], colArgs[1], colArgs[2]); 138 | const rgb = '(' + Math.round(colArgs[0]) + ', ' + Math.round(colArgs[1]) + ', ' + Math.round(colArgs[2]) + ')'; 139 | return ({ 140 | 'color': colorName + ' ' 141 | }); 142 | } 143 | 144 | function getHexname(colArgs) { 145 | let hex = colArgs[0].slice(1); 146 | if ((colArgs[0].match(/\w/g)).length === 3) { // 3digithex 147 | const h3x = hex.match(/\w/g) 148 | hex = [h3x[0], h3x[0], h3x[1], h3x[1], h3x[2], h3x[2]].join(''); 149 | } 150 | /* global hexColorName */ 151 | const colorName = hexColorName(hex); 152 | const r = parseInt(hex[0] + hex[1], 16); 153 | const g = parseInt(hex[2] + hex[3], 16); 154 | const b = parseInt(hex[4] + hex[5], 16); 155 | const rgb = '(' + r + ', ' + g + ', ' + b + ')'; 156 | return ({ 157 | 'color': colorName + ' ' 158 | }); 159 | } 160 | 161 | function RGBAString(colArgs) { 162 | if (colArgs[0].match(/%/)) { 163 | if (((colArgs[0].match(/%/g)).length) === 4) { 164 | // when colArgs[0] is 'rgba(10%,100%,30%,0.5%)' 165 | let values = (((colArgs[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?\s*?)/g))[0]).replace(/%|\(|\)/g, '')).split(','); 166 | values = [values[0], values[1], values[3], 0]; 167 | for (let i = values.length - 2; i >= 0; i--) { 168 | if (parseInt(values[i]) < 100) { 169 | values[i] = Math.round(parseInt(values[i]) * 2.55); 170 | } else { 171 | values[i] = 255; 172 | } 173 | } 174 | return (getRGBAname(values)); 175 | 176 | } else if (((colArgs[0].match(/%/g)).length) === 3 && ((colArgs[0].match(/,/g)).length) === 2) { 177 | // when colArgs[0] is 'rgba(10%,100%,30%)' 178 | let values = (((colArgs[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%\)\s*?\s*?)/g))[0]).replace(/%|\(|\)/g, '')).split(','); 179 | values = [values[0], values[1], values[2], 0]; 180 | for (let i = values.length - 2; i >= 0; i--) { 181 | if (parseInt(values[i]) < 100) { 182 | values[i] = Math.round(parseInt(values[i]) * 2.55); 183 | } else { 184 | values[i] = 255; 185 | } 186 | } 187 | return (getRGBAname(values)); 188 | } else if (((colArgs[0].match(/%/g)).length) === 3) { 189 | // when colArgs[0] is 'rgba(10%,100%,30%,0.5)' 190 | // This line creates an array with the values in order the following order ['R','G','B','A']. The RegEx looks for three values with percentages and one value without percentage. 191 | const values = (((colArgs[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\))/g))[0]).replace(/%|\(|\)/g, '')).split(','); 192 | for (let i = values.length - 2; i >= 0; i--) { 193 | if (parseInt(values[i]) < 100) { 194 | values[i] = Math.round(parseInt(values[i]) * 2.55); 195 | } else { 196 | values[i] = 255; 197 | } 198 | } 199 | values[3] = parseFloat(values[3]); 200 | return (getRGBAname(values)); 201 | } else { 202 | const values = [255, 255, 255, 0]; 203 | return (getRGBAname(values)); 204 | } 205 | } else { 206 | if (((colArgs[0].match(/,/g)).length) === 2) { 207 | // when colArgs[0] is 'rgba(10,100,30)' 208 | let values = (((colArgs[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\)\s*?\s*?)/g))[0]).replace(/%|\(|\)/g, '')).split(','); 209 | values = [values[0], values[1], values[2], 0]; 210 | for (let i = values.length - 2; i >= 0; i--) { 211 | if (parseInt(values[i]) < 100) { 212 | values[i] = Math.round(parseInt(values[i]) * 2.55); 213 | } else { 214 | values[i] = 255; 215 | } 216 | } 217 | return (getRGBAname(values)); 218 | } else { 219 | // when colArgs[0] is 'rgba(10,100,30,0.5)' 220 | // This line creates an array with the values in order the following order ['R','G','B','A']. Values must be less than 255. 221 | let values = (((colArgs[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\))/g))[0]).replace(/(\(|\))/g, '')).split(','); 222 | values = [parseInt(values[0]), parseInt(values[1]), parseInt(values[2]), parseFloat(values[3])]; 223 | return (getRGBAname(values)); 224 | } 225 | } 226 | } 227 | 228 | function RGBString(colArgs) { 229 | if (colArgs[0].match(/%/)) { 230 | if (((colArgs[0].match(/%/g)).length) === 3) { 231 | // when colArgs[0] is 'rgb(10%,100%,30%)' 232 | // This line creates an array with the values in order the following order ['R','G','B']. The RegEx looks for three values with percentages. 233 | const values = (((colArgs[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?%\s*?\))/g))[0]).replace(/%|\(|\)/g, '')).split(','); 234 | for (let i = values.length - 1; i >= 0; i--) { 235 | if (parseInt(values[i]) < 100) { 236 | values[i] = Math.round(parseInt(values[i]) * 2.55); 237 | } else { 238 | values[i] = 255; 239 | } 240 | } 241 | return (getRGBname(values)); 242 | } else { 243 | const values = [255, 255, 255]; 244 | return (getRGBname(values)); 245 | } 246 | } else { 247 | // when colArgs[0] is 'rgb(10,100,30)' 248 | // This line creates an array with the values in order the following order ['R','G','B']. Values must be less than 255. 249 | let values = (((colArgs[0].match(/(\(\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?,\s*?((000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])|(000(?:\.+\d*)|0?\d{1,2}(?:\.+\d*)|1\d\d(?:\.+\d*)|2[0-4]\d(?:\.+\d*)|25[0-5](?:\.+\d*)))\s*?\))/g))[0]).replace(/(\(|\))/g, '')).split(','); 250 | values = [parseInt(values[0]), parseInt(values[1]), parseInt(values[2])]; 251 | return (getRGBname(values)); 252 | } 253 | } 254 | -------------------------------------------------------------------------------- /src/colorNamer.js: -------------------------------------------------------------------------------- 1 | function calculateColor(hsv) { 2 | let colortext; 3 | if (hsv[0] !== 0) { 4 | hsv[0] = Math.round(hsv[0] * 100); 5 | let hue = hsv[0].toString().split(``); 6 | const last = hue.length - 1; 7 | hue[last] = parseInt(hue[last]); 8 | if (hue[last] < 2.5) { 9 | hue[last] = 0; 10 | } else if (hue[last] >= 2.5 && hue[last] < 7.5) { 11 | hue[last] = 5; 12 | } 13 | if (hue.length === 2) { 14 | hue[0] = parseInt(hue[0]); 15 | if (hue[last] >= 7.5) { 16 | hue[last] = 0; 17 | hue[0] = hue[0] + 1; 18 | } 19 | hsv[0] = (hue[0] * 10) + hue[1]; 20 | } else { 21 | if (hue[last] >= 7.5) { 22 | hsv[0] = 10; 23 | } else { 24 | hsv[0] = hue[last]; 25 | } 26 | } 27 | } 28 | for (let i = hsv.length - 1; i >= 1; i--) { 29 | if (hsv[i] <= 0.25) { 30 | hsv[i] = 0; 31 | } else if (hsv[i] > 0.25 && hsv[i] < 0.75) { 32 | hsv[i] = 0.5; 33 | } else { 34 | hsv[i] = 1; 35 | } 36 | } 37 | if ((hsv[0] === 0) && (hsv[1] === 0) && (hsv[2] === 1)) { 38 | for (let i = oghsv.length - 1; i >= 0; i--) { 39 | oghsv[i] = Math.round(oghsv[i] * 10000) / 10000; 40 | } 41 | for (let e = 0; e < xcp.length; e++) { 42 | if ((xcp[e].h === oghsv[0]) && (xcp[e].s === oghsv[1]) && (xcp[e].b === oghsv[2])) { 43 | colortext = xcp[e].name; 44 | break; 45 | } else { 46 | colortext = `white`; 47 | } 48 | } 49 | } else { 50 | for (let i = 0; i < colorLookUp.length; i++) { 51 | if ((colorLookUp[i].h === hsv[0]) && (colorLookUp[i].s === hsv[1]) && (colorLookUp[i].b === hsv[2])) { 52 | colortext = colorLookUp[i].name; 53 | break; 54 | } 55 | } 56 | } 57 | return colortext; 58 | } 59 | 60 | function hexToHsv(value) { 61 | const r = parseInt(value[0] + value[1], 16); 62 | const g = parseInt(value[2] + value[3], 16); 63 | const b = parseInt(value[4] + value[5], 16); 64 | const hsv = rgbToHsv(r, g, b); 65 | return hsv; 66 | } 67 | 68 | function rgbToHsv(r, g, b) { 69 | r /= 255, g /= 255, b /= 255; 70 | const max = Math.max(r, g, b), 71 | min = Math.min(r, g, b), 72 | v = max, 73 | d = max - min, 74 | s = max === 0 ? 0 : d / max; 75 | let h; 76 | if (max === min) { 77 | h = 0; // achromatic 78 | } else { 79 | switch (max) { 80 | case r: 81 | h = (g - b) / d + (g < b ? 6 : 0); 82 | break; 83 | case g: 84 | h = (b - r) / d + 2; 85 | break; 86 | case b: 87 | h = (r - g) / d + 4; 88 | break; 89 | } 90 | h /= 6; 91 | } 92 | oghsv = [h, s, v]; 93 | return [h, s, v]; 94 | } 95 | 96 | function rgbColorName(r, g, b) { 97 | if (0 <= r && r <= 255 && 0 <= g && g <= 255 && 0 <= b && b <= 255) { 98 | const colorname = calculateColor(rgbToHsv(r, g, b)); 99 | return colorname; 100 | } else { 101 | return (`Requires a valid rgb value`); 102 | } 103 | 104 | } 105 | 106 | function hexColorName(value) { 107 | const regEx = /[0-9A-Fa-f]{6}/g; 108 | if (regEx.test(value) && value.length === 6) { 109 | const colorname = calculateColor(hexToHsv(value)); 110 | return colorname; 111 | } else { 112 | return (`Requires a valid hex value`); 113 | } 114 | } 115 | 116 | let oghsv; 117 | 118 | const xcp = [{ 119 | "h": 0, 120 | "s": 0, 121 | "b": 0.8275, 122 | "name": `gray` 123 | }, 124 | { 125 | "h": 0, 126 | "s": 0, 127 | "b": 0.8627, 128 | "name": `gray` 129 | }, 130 | { 131 | "h": 0, 132 | "s": 0, 133 | "b": 0.7529, 134 | "name": `gray` 135 | }, 136 | { 137 | "h": 0.0167, 138 | "s": 0.1176, 139 | "b": 1, 140 | "name": `light pink` 141 | }, 142 | ]; 143 | 144 | const colorLookUp = [{ 145 | "h": 0, 146 | "s": 0, 147 | "b": 0, 148 | "name": `black` 149 | }, 150 | { 151 | "h": 0, 152 | "s": 0, 153 | "b": 0.5, 154 | "name": `gray` 155 | }, 156 | { 157 | "h": 0, 158 | "s": 0, 159 | "b": 1, 160 | "name": `white` 161 | }, 162 | { 163 | "h": 0, 164 | "s": 0.5, 165 | "b": 0.5, 166 | "name": `dark maroon` 167 | }, 168 | { 169 | "h": 0, 170 | "s": 0.5, 171 | "b": 1, 172 | "name": `salmon pink` 173 | }, 174 | { 175 | "h": 0, 176 | "s": 1, 177 | "b": 0, 178 | "name": `black` 179 | }, 180 | { 181 | "h": 0, 182 | "s": 1, 183 | "b": 0.5, 184 | "name": `dark red` 185 | }, 186 | { 187 | "h": 0, 188 | "s": 1, 189 | "b": 1, 190 | "name": `red` 191 | }, 192 | { 193 | "h": 5, 194 | "s": 0, 195 | "b": 1, 196 | "name": `very light peach` 197 | }, 198 | { 199 | "h": 5, 200 | "s": 0.5, 201 | "b": 0.5, 202 | "name": `brown` 203 | }, 204 | { 205 | "h": 5, 206 | "s": 0.5, 207 | "b": 1, 208 | "name": `peach` 209 | }, 210 | { 211 | "h": 5, 212 | "s": 1, 213 | "b": 0.5, 214 | "name": `brick red` 215 | }, 216 | { 217 | "h": 5, 218 | "s": 1, 219 | "b": 1, 220 | "name": `crimson` 221 | }, 222 | { 223 | "h": 10, 224 | "s": 0, 225 | "b": 1, 226 | "name": `light peach` 227 | }, 228 | { 229 | "h": 10, 230 | "s": 0.5, 231 | "b": 0.5, 232 | "name": `brown` 233 | }, 234 | { 235 | "h": 10, 236 | "s": 0.5, 237 | "b": 1, 238 | "name": `light orange` 239 | }, 240 | { 241 | "h": 10, 242 | "s": 1, 243 | "b": 0.5, 244 | "name": `brown` 245 | }, 246 | { 247 | "h": 10, 248 | "s": 1, 249 | "b": 1, 250 | "name": `orange` 251 | }, 252 | { 253 | "h": 15, 254 | "s": 0, 255 | "b": 1, 256 | "name": `very light yellow` 257 | }, 258 | { 259 | "h": 15, 260 | "s": 0.5, 261 | "b": 0.5, 262 | "name": `olive green` 263 | }, 264 | { 265 | "h": 15, 266 | "s": 0.5, 267 | "b": 1, 268 | "name": `light yellow` 269 | }, 270 | { 271 | "h": 15, 272 | "s": 1, 273 | "b": 0, 274 | "name": `dark olive green` 275 | }, 276 | { 277 | "h": 15, 278 | "s": 1, 279 | "b": 0.5, 280 | "name": `olive green` 281 | }, 282 | { 283 | "h": 15, 284 | "s": 1, 285 | "b": 1, 286 | "name": `yellow` 287 | }, 288 | { 289 | "h": 20, 290 | "s": 0, 291 | "b": 1, 292 | "name": `very light yellow` 293 | }, 294 | { 295 | "h": 20, 296 | "s": 0.5, 297 | "b": 0.5, 298 | "name": `olive green` 299 | }, 300 | { 301 | "h": 20, 302 | "s": 0.5, 303 | "b": 1, 304 | "name": `light yellow green` 305 | }, 306 | { 307 | "h": 20, 308 | "s": 1, 309 | "b": 0, 310 | "name": `dark olive green` 311 | }, 312 | { 313 | "h": 20, 314 | "s": 1, 315 | "b": 0.5, 316 | "name": `dark yellow green` 317 | }, 318 | { 319 | "h": 20, 320 | "s": 1, 321 | "b": 1, 322 | "name": `yellow green` 323 | }, 324 | { 325 | "h": 25, 326 | "s": 0.5, 327 | "b": 0.5, 328 | "name": `dark yellow green` 329 | }, 330 | { 331 | "h": 25, 332 | "s": 0.5, 333 | "b": 1, 334 | "name": `light green` 335 | }, 336 | { 337 | "h": 25, 338 | "s": 1, 339 | "b": 0.5, 340 | "name": `dark green` 341 | }, 342 | { 343 | "h": 25, 344 | "s": 1, 345 | "b": 1, 346 | "name": `green` 347 | }, 348 | { 349 | "h": 30, 350 | "s": 0.5, 351 | "b": 1, 352 | "name": `light green` 353 | }, 354 | { 355 | "h": 30, 356 | "s": 1, 357 | "b": 0.5, 358 | "name": `dark green` 359 | }, 360 | { 361 | "h": 30, 362 | "s": 1, 363 | "b": 1, 364 | "name": `green` 365 | }, 366 | { 367 | "h": 35, 368 | "s": 0, 369 | "b": 0.5, 370 | "name": `light green` 371 | }, 372 | { 373 | "h": 35, 374 | "s": 0, 375 | "b": 1, 376 | "name": `very light green` 377 | }, 378 | { 379 | "h": 35, 380 | "s": 0.5, 381 | "b": 0.5, 382 | "name": `dark green` 383 | }, 384 | { 385 | "h": 35, 386 | "s": 0.5, 387 | "b": 1, 388 | "name": `light green` 389 | }, 390 | { 391 | "h": 35, 392 | "s": 1, 393 | "b": 0, 394 | "name": `very dark green` 395 | }, 396 | { 397 | "h": 35, 398 | "s": 1, 399 | "b": 0.5, 400 | "name": `dark green` 401 | }, 402 | { 403 | "h": 35, 404 | "s": 1, 405 | "b": 1, 406 | "name": `green` 407 | }, 408 | { 409 | "h": 40, 410 | "s": 0, 411 | "b": 1, 412 | "name": `very light green` 413 | }, 414 | { 415 | "h": 40, 416 | "s": 0.5, 417 | "b": 0.5, 418 | "name": `dark green` 419 | }, 420 | { 421 | "h": 40, 422 | "s": 0.5, 423 | "b": 1, 424 | "name": `light green` 425 | }, 426 | { 427 | "h": 40, 428 | "s": 1, 429 | "b": 0.5, 430 | "name": `dark green` 431 | }, 432 | { 433 | "h": 40, 434 | "s": 1, 435 | "b": 1, 436 | "name": `green` 437 | }, 438 | { 439 | "h": 45, 440 | "s": 0.5, 441 | "b": 1, 442 | "name": `light turquoise` 443 | }, 444 | { 445 | "h": 45, 446 | "s": 1, 447 | "b": 0.5, 448 | "name": `dark turquoise` 449 | }, 450 | { 451 | "h": 45, 452 | "s": 1, 453 | "b": 1, 454 | "name": `turquoise` 455 | }, 456 | { 457 | "h": 50, 458 | "s": 0, 459 | "b": 1, 460 | "name": `light sky blue` 461 | }, 462 | { 463 | "h": 50, 464 | "s": 0.5, 465 | "b": 0.5, 466 | "name": `dark cyan` 467 | }, 468 | { 469 | "h": 50, 470 | "s": 0.5, 471 | "b": 1, 472 | "name": `light cyan` 473 | }, 474 | { 475 | "h": 50, 476 | "s": 1, 477 | "b": 0.5, 478 | "name": `dark cyan` 479 | }, 480 | { 481 | "h": 50, 482 | "s": 1, 483 | "b": 1, 484 | "name": `cyan` 485 | }, 486 | { 487 | "h": 55, 488 | "s": 0, 489 | "b": 1, 490 | "name": `light sky blue` 491 | }, 492 | { 493 | "h": 55, 494 | "s": 0.5, 495 | "b": 1, 496 | "name": `light sky blue` 497 | }, 498 | { 499 | "h": 55, 500 | "s": 1, 501 | "b": 0.5, 502 | "name": `dark blue` 503 | }, 504 | { 505 | "h": 55, 506 | "s": 1, 507 | "b": 1, 508 | "name": `sky blue` 509 | }, 510 | { 511 | "h": 60, 512 | "s": 0, 513 | "b": 0.5, 514 | "name": `gray` 515 | }, 516 | { 517 | "h": 60, 518 | "s": 0, 519 | "b": 1, 520 | "name": `very light blue` 521 | }, 522 | { 523 | "h": 60, 524 | "s": 0.5, 525 | "b": 0.5, 526 | "name": `blue` 527 | }, 528 | { 529 | "h": 60, 530 | "s": 0.5, 531 | "b": 1, 532 | "name": `light blue` 533 | }, 534 | { 535 | "h": 60, 536 | "s": 1, 537 | "b": 0.5, 538 | "name": `navy blue` 539 | }, 540 | { 541 | "h": 60, 542 | "s": 1, 543 | "b": 1, 544 | "name": `blue` 545 | }, 546 | { 547 | "h": 65, 548 | "s": 0, 549 | "b": 1, 550 | "name": `lavender` 551 | }, 552 | { 553 | "h": 65, 554 | "s": 0.5, 555 | "b": 0.5, 556 | "name": `navy blue` 557 | }, 558 | { 559 | "h": 65, 560 | "s": 0.5, 561 | "b": 1, 562 | "name": `light purple` 563 | }, 564 | { 565 | "h": 65, 566 | "s": 1, 567 | "b": 0.5, 568 | "name": `dark navy blue` 569 | }, 570 | { 571 | "h": 65, 572 | "s": 1, 573 | "b": 1, 574 | "name": `blue` 575 | }, 576 | { 577 | "h": 70, 578 | "s": 0, 579 | "b": 1, 580 | "name": `lavender` 581 | }, 582 | { 583 | "h": 70, 584 | "s": 0.5, 585 | "b": 0.5, 586 | "name": `navy blue` 587 | }, 588 | { 589 | "h": 70, 590 | "s": 0.5, 591 | "b": 1, 592 | "name": `lavender blue` 593 | }, 594 | { 595 | "h": 70, 596 | "s": 1, 597 | "b": 0.5, 598 | "name": `dark navy blue` 599 | }, 600 | { 601 | "h": 70, 602 | "s": 1, 603 | "b": 1, 604 | "name": `blue` 605 | }, 606 | { 607 | "h": 75, 608 | "s": 0.5, 609 | "b": 1, 610 | "name": `lavender` 611 | }, 612 | { 613 | "h": 75, 614 | "s": 1, 615 | "b": 0.5, 616 | "name": `dark purple` 617 | }, 618 | { 619 | "h": 75, 620 | "s": 1, 621 | "b": 1, 622 | "name": `purple` 623 | }, 624 | { 625 | "h": 80, 626 | "s": 0.5, 627 | "b": 1, 628 | "name": `pinkish purple` 629 | }, 630 | { 631 | "h": 80, 632 | "s": 1, 633 | "b": 0.5, 634 | "name": `dark purple` 635 | }, 636 | { 637 | "h": 80, 638 | "s": 1, 639 | "b": 1, 640 | "name": `purple` 641 | }, 642 | { 643 | "h": 85, 644 | "s": 0, 645 | "b": 1, 646 | "name": `light pink` 647 | }, 648 | { 649 | "h": 85, 650 | "s": 0.5, 651 | "b": 0.5, 652 | "name": `purple` 653 | }, 654 | { 655 | "h": 85, 656 | "s": 0.5, 657 | "b": 1, 658 | "name": `light fuchsia` 659 | }, 660 | { 661 | "h": 85, 662 | "s": 1, 663 | "b": 0.5, 664 | "name": `dark fuchsia` 665 | }, 666 | { 667 | "h": 85, 668 | "s": 1, 669 | "b": 1, 670 | "name": `fuchsia` 671 | }, 672 | { 673 | "h": 90, 674 | "s": 0.5, 675 | "b": 0.5, 676 | "name": `dark fuchsia` 677 | }, 678 | { 679 | "h": 90, 680 | "s": 0.5, 681 | "b": 1, 682 | "name": `hot pink` 683 | }, 684 | { 685 | "h": 90, 686 | "s": 1, 687 | "b": 0.5, 688 | "name": `dark fuchsia` 689 | }, 690 | { 691 | "h": 90, 692 | "s": 1, 693 | "b": 1, 694 | "name": `fuchsia` 695 | }, 696 | { 697 | "h": 95, 698 | "s": 0, 699 | "b": 1, 700 | "name": `pink` 701 | }, 702 | { 703 | "h": 95, 704 | "s": 0.5, 705 | "b": 1, 706 | "name": `light pink` 707 | }, 708 | { 709 | "h": 95, 710 | "s": 1, 711 | "b": 0.5, 712 | "name": `dark magenta` 713 | }, 714 | { 715 | "h": 95, 716 | "s": 1, 717 | "b": 1, 718 | "name": `magenta` 719 | }, 720 | ]; -------------------------------------------------------------------------------- /src/createHTMLstructure.js: -------------------------------------------------------------------------------- 1 | function getElementById(id) { 2 | return document.getElementById(id); 3 | } 4 | 5 | function createElement(tag) { 6 | return document.createElement(tag); 7 | } 8 | 9 | function createTextStructure() { 10 | 11 | const textOutput = getElementById(`textOutput-content`); 12 | const heading = createElement(`h1`); 13 | const contentSummary = createElement(`p`); 14 | const contentTable = createElement(`table`); 15 | const contentDetails = createElement(`p`); 16 | 17 | textOutput.style.position = `absolute`; 18 | textOutput.style.left = `-1000px`; 19 | textOutput.style.top = `auto`; 20 | textOutput.style.width = `1px`; 21 | textOutput.style.height = `1px`; 22 | textOutput.style.overflow = `hidden`; 23 | 24 | textOutput.appendChild(heading); 25 | textOutput.appendChild(contentSummary); 26 | textOutput.appendChild(contentTable); 27 | textOutput.appendChild(contentDetails); 28 | 29 | heading.innerHTML = `Text Output`; 30 | 31 | contentSummary.setAttribute(`id`, `textOutput-content-summary`); 32 | contentSummary.setAttribute(`tabIndex`, `0`); 33 | contentSummary.setAttribute(`aria-label`, `text output summary`) 34 | contentSummary.setAttribute(`role`, `main`); 35 | 36 | contentTable.setAttribute(`id`, `textOutput-content-table`); 37 | contentTable.setAttribute(`summary`, `text output details`); 38 | 39 | contentDetails.setAttribute(`id`, `textOutput-content-details`); 40 | contentDetails.setAttribute(`tabIndex`, `0`); 41 | contentDetails.setAttribute(`aria-label`, `text output details`); 42 | contentDetails.setAttribute(`role`, `main`); 43 | 44 | } 45 | 46 | function createTableStructure() { 47 | 48 | const tableOutput = getElementById(`tableOutput-content`); 49 | const heading = createElement(`h1`); 50 | const contentSummary = createElement(`p`); 51 | const contentTable = createElement(`table`); 52 | const contentDetails = createElement(`div`); 53 | 54 | tableOutput.style.position = `absolute`; 55 | tableOutput.style.left = `-1000px`; 56 | tableOutput.style.top = `auto`; 57 | tableOutput.style.width = `1px`; 58 | tableOutput.style.height = `1px`; 59 | tableOutput.style.overflow = `hidden`; 60 | 61 | tableOutput.appendChild(heading); 62 | tableOutput.appendChild(contentSummary); 63 | tableOutput.appendChild(contentTable); 64 | tableOutput.appendChild(contentDetails); 65 | 66 | heading.innerHTML = `Table Output`; 67 | 68 | contentSummary.setAttribute(`id`, `tableOutput-content-summary`); 69 | contentSummary.setAttribute(`tabIndex`, `0`); 70 | contentSummary.setAttribute(`aria-label`, `table text output summary`) 71 | contentSummary.setAttribute(`role`, `main`); 72 | 73 | contentTable.setAttribute(`id`, `tableOutput-content-table`); 74 | contentTable.setAttribute(`summary`, `table output details`); 75 | 76 | contentDetails.setAttribute(`id`, `tableOutput-content-details`); 77 | contentDetails.setAttribute(`tabIndex`, `0`); 78 | contentDetails.setAttribute(`aria-label`, `table output elements`); 79 | contentDetails.setAttribute(`role`, `main`); 80 | } 81 | 82 | if (getElementById(`textOutput-content`)) { 83 | createTextStructure(); 84 | } 85 | 86 | if (getElementById(`tableOutput-content`)) { 87 | createTableStructure(); 88 | } -------------------------------------------------------------------------------- /src/entities/_baseEntity.js: -------------------------------------------------------------------------------- 1 | function BaseEntity(Interceptor, object) { 2 | this.type = Interceptor.currentColor + ` ` + object.name, 3 | this.location = ``, 4 | this.coordinates = ``, 5 | this.isMember = function() { 6 | 7 | } 8 | 9 | this.getAttributes = function() { 10 | return ({ 11 | type: this.type, 12 | location: this.location, 13 | coordinates: this.coordinates 14 | }) 15 | }; 16 | 17 | this.getLocation = function(object, locArgs, canvasX, canvasY) { // eslint-disable-line 18 | let xCoord, yCoord; 19 | locArgs = [].slice.call(locArgs); 20 | let i = 0; 21 | const that = this; 22 | that.coordinates = ``; 23 | 24 | locArgs.forEach((argument) => { 25 | const a = argument; 26 | if (object.params[i].description.indexOf(`x-coordinate`) > -1) { 27 | xCoord = a; 28 | that.coordinates += Math.round(a) + `x,`; 29 | } else if (object.params[i].description.indexOf(`y-coordinate`) > -1) { 30 | yCoord = a; 31 | that.coordinates += Math.round(a) + `y`; 32 | } 33 | i++; 34 | }); 35 | 36 | if (xCoord < 0.4 * canvasX) { 37 | if (yCoord < 0.4 * canvasY) { 38 | return `top left`; 39 | } else if (yCoord > 0.6 * canvasY) { 40 | return `bottom left`; 41 | } else { 42 | return `mid left`; 43 | } 44 | } else if (xCoord > 0.6 * canvasX) { 45 | if (yCoord < 0.4 * canvasY) { 46 | return `top right`; 47 | } else if (yCoord > 0.6 * canvasY) { 48 | return `bottom right`; 49 | } else { 50 | return `mid right`; 51 | } 52 | } else { 53 | if (yCoord < 0.4 * canvasY) { 54 | return `top middle`; 55 | } else if (yCoord > 0.6 * canvasY) { 56 | return `bottom middle`; 57 | } else { 58 | return `middle`; 59 | } 60 | } 61 | } 62 | 63 | /* return which part of the canvas an object os present */ 64 | this.canvasLocator = function(object, canvasArgs, canvasX, canvasY) { 65 | let xCoord, yCoord; 66 | const noRows = 10, 67 | noCols = 10; 68 | let locX, locY; 69 | let i = 0; 70 | canvasArgs = [].slice.call(canvasArgs); 71 | canvasArgs.forEach((argument) => { 72 | const a = argument; 73 | 74 | if (object.params[i].description.indexOf(`x-coordinate`) > -1) { 75 | xCoord = a; 76 | } else if (object.params[i].description.indexOf(`y-coordinate`) > -1) { 77 | yCoord = a; 78 | } 79 | i++; 80 | }); 81 | 82 | locX = Math.floor((xCoord / canvasX) * noRows); 83 | locY = Math.floor((yCoord / canvasY) * noCols); 84 | if (locX === noRows) { 85 | locX = locX - 1; 86 | } 87 | if (locY === noCols) { 88 | locY = locY - 1; 89 | } 90 | return ({ 91 | locX, 92 | locY 93 | }); 94 | } 95 | } 96 | 97 | BaseEntity.isParameter = false; 98 | -------------------------------------------------------------------------------- /src/entities/backgroundEntity.js: -------------------------------------------------------------------------------- 1 | function BackgroundEntity(Interceptor, object, backgroundArgs, canvasX, canvasY) { // eslint-disable-line no-unused-vars 2 | this.populate = function(Interceptor) { 3 | if (backgroundArgs[0].name === `p5.Color`) { 4 | backgroundArgs = backgroundArgs[0].levels; 5 | } 6 | Interceptor.bgColor = Interceptor.getColorName(backgroundArgs).color; 7 | } 8 | 9 | this.populate(Interceptor); 10 | } 11 | BackgroundEntity.handledNames = [ 12 | `background` 13 | ] 14 | 15 | BackgroundEntity.handles = function(name) { 16 | return (this.handledNames.indexOf(name) >= 0); 17 | } 18 | 19 | BackgroundEntity.isParameter = true; 20 | 21 | /* global Registry */ 22 | Registry.register(BackgroundEntity); 23 | -------------------------------------------------------------------------------- /src/entities/ellipseModeEntity.js: -------------------------------------------------------------------------------- 1 | function EllipseModeEntity(Interceptor, shapeObject, modeArgs) // eslint-disable-line no-unused-vars 2 | { 3 | this.populate = function(Interceptor) { 4 | Interceptor.currentEllipseMode = modeArgs[0]; 5 | } 6 | this.populate(Interceptor); 7 | } 8 | EllipseModeEntity.handledNames = [ 9 | `ellipseMode` 10 | ] 11 | 12 | EllipseModeEntity.handles = function(name) { 13 | return (this.handledNames.indexOf(name) >= 0); 14 | } 15 | 16 | EllipseModeEntity.isParameter = true; 17 | 18 | /* global Registry */ 19 | Registry.register(EllipseModeEntity); 20 | -------------------------------------------------------------------------------- /src/entities/fillEntity.js: -------------------------------------------------------------------------------- 1 | function FillEntity(Interceptor, shapeObject, fillArgs, canvasX, canvasY) // eslint-disable-line no-unused-vars 2 | { 3 | this.populate = function(Interceptor) { 4 | if (fillArgs[0].name === `p5.Color`) { 5 | fillArgs = fillArgs[0].levels; 6 | } 7 | Interceptor.currentColor = Interceptor.getColorName(fillArgs).color; 8 | } 9 | 10 | this.populate(Interceptor); 11 | } 12 | FillEntity.handledNames = [ 13 | `fill` 14 | ] 15 | 16 | FillEntity.handles = function(name) { 17 | return (this.handledNames.indexOf(name) >= 0); 18 | } 19 | 20 | FillEntity.isParameter = true; 21 | 22 | /* global Registry */ 23 | Registry.register(FillEntity); 24 | -------------------------------------------------------------------------------- /src/entities/shapeEntity.js: -------------------------------------------------------------------------------- 1 | function ShapeEntity(Interceptor, shapeObject, shapeArgs, canvasX, canvasY) { 2 | const self = this; 3 | /* global BaseEntity */ 4 | BaseEntity.call(self, shapeObject, shapeArgs, canvasX, canvasY); 5 | this.areaAbs = 0; 6 | this.type = Interceptor.currentColor + ` ` + shapeObject.name; 7 | this.area = 0; 8 | this.length = 0; 9 | this.currentEllipseMode = Interceptor.currentEllipseMode; 10 | 11 | 12 | this.populate = function(shapeObject, arguments, canvasX, canvasY) { 13 | this.location = this.getLocation(shapeObject, arguments, canvasX, canvasY); 14 | this.coordLoc = this.canvasLocator(shapeObject, arguments, canvasX, canvasY); 15 | if(!shapeObject.name.localeCompare(`ellipse`) || !shapeObject.name.localeCompare(`rect`) || !shapeObject.name.localeCompare(`triangle`) || !shapeObject.name.localeCompare(`quad`)) { 16 | this.areaAbs = this.getObjectArea(shapeObject.name, arguments); 17 | this.area = (Math.ceil(this.getObjectArea(shapeObject.name, arguments) * 100 / (canvasX * canvasY))) + `%`; 18 | } else if(!shapeObject.name.localeCompare(`line`)) { 19 | this.length = this.getLineLength(arguments); 20 | } 21 | } 22 | 23 | this.getAttributes = function() { 24 | if((!shapeObject.name.localeCompare(`ellipse`)) || !shapeObject.name.localeCompare(`rect`) || !shapeObject.name.localeCompare(`triangle`) || !shapeObject.name.localeCompare(`quad`)) { 25 | return ({ 26 | type: this.type, 27 | location: this.location, 28 | coordinates: this.coordinates, 29 | area: this.area 30 | }) 31 | } 32 | else if(!shapeObject.name.localeCompare(`line`)) { 33 | return ({ 34 | type: this.type, 35 | location: this.location, 36 | coordinates: this.coordinates, 37 | length : this.length 38 | }) 39 | } 40 | else { 41 | return ({ 42 | type: this.type, 43 | location: this.location, 44 | coordinates: this.coordinates 45 | }) 46 | } 47 | }; 48 | 49 | /* return length of lines */ 50 | this.getLineLength = function(arguments){ 51 | const lineLength = Math.round(Math.sqrt((Math.pow(arguments[2]-arguments[0],2)) + (Math.pow(arguments[3]-arguments[1],2)))); 52 | return lineLength; 53 | } 54 | 55 | /* return area of the shape */ 56 | this.getObjectArea = function(objectType, shapeArgs) { 57 | let objectArea = 0; 58 | if (!objectType.localeCompare(`arc`)) { 59 | // area of full ellipse = PI * horizontal radius * vertical radius. 60 | // therefore, area of arc = difference bet. arc's start and end radians * horizontal radius * vertical radius. 61 | // the below expression is adjusted for negative values and differences in arc's start and end radians over PI*2 62 | const arcSizeInRadians = ((((shapeArgs[5] - shapeArgs[4]) % (PI * 2)) + (PI * 2)) % (PI * 2)); 63 | objectArea = arcSizeInRadians * shapeArgs[2] * shapeArgs[3] / 8; 64 | if (shapeArgs[6] === `open` || shapeArgs[6] === `chord`) { 65 | // when the arc's mode is OPEN or CHORD, we need to account for the area of the triangle that is formed to close the arc 66 | // (Ax( By − Cy) + Bx(Cy − Ay) + Cx(Ay − By ) )/2 67 | const Ax = shapeArgs[0]; 68 | const Ay = shapeArgs[1]; 69 | const Bx = shapeArgs[0] + (shapeArgs[2] / 2) * cos(shapeArgs[4]).toFixed(2); 70 | const By = shapeArgs[1] + (shapeArgs[3] / 2) * sin(shapeArgs[4]).toFixed(2); 71 | const Cx = shapeArgs[0] + (shapeArgs[2] / 2) * cos(shapeArgs[5]).toFixed(2); 72 | const Cy = shapeArgs[1] + (shapeArgs[3] / 2) * sin(shapeArgs[5]).toFixed(2); 73 | const areaOfExtraTriangle = abs(Ax * (By - Cy) + Bx * (Cy - Ay) + Cx * (Ay - By)) / 2; 74 | if (arcSizeInRadians > PI) { 75 | objectArea = objectArea + areaOfExtraTriangle; 76 | } else { 77 | objectArea = objectArea - areaOfExtraTriangle; 78 | } 79 | } 80 | } else if (!objectType.localeCompare(`ellipse`)) { 81 | if(!this.currentEllipseMode.localeCompare(`center`)) { 82 | objectArea = 3.14 * shapeArgs[2] * shapeArgs[3] / 4; 83 | } else if(!this.currentEllipseMode.localeCompare(`radius`)) { 84 | objectArea = 3.14 * shapeArgs[2] * shapeArgs[3]; 85 | } else if(!this.currentEllipseMode.localeCompare(`corner`)) { 86 | objectArea = 3.14 * shapeArgs[2] * shapeArgs[3] / 4; 87 | } else if(!this.currentEllipseMode.localeCompare(`corners`)) { 88 | objectArea = 3.14 * Math.abs(shapeArgs[2] - shapeArgs[0]) * Math.abs(shapeArgs[3] - shapeArgs[1]) / 4; 89 | } 90 | } else if (!objectType.localeCompare(`line`)) { 91 | objectArea = 0; 92 | } else if (!objectType.localeCompare(`point`)) { 93 | objectArea = 0; 94 | } else if (!objectType.localeCompare(`quad`)) { 95 | // ((x4+x1)*(y4-y1)+(x1+x2)*(y1-y2)+(x2+x3)*(y2-y3)+(x3+x4)*(y3-y4))/2 96 | objectArea = abs( 97 | (shapeArgs[6] + shapeArgs[0]) * (shapeArgs[7] - shapeArgs[1]) + 98 | (shapeArgs[0] + shapeArgs[2]) * (shapeArgs[1] - shapeArgs[3]) + 99 | (shapeArgs[2] + shapeArgs[4]) * (shapeArgs[3] - shapeArgs[5]) + 100 | (shapeArgs[4] + shapeArgs[6]) * (shapeArgs[5] - shapeArgs[7]) 101 | )/2; 102 | } else if (!objectType.localeCompare(`rect`)) { 103 | objectArea = shapeArgs[2] * shapeArgs[3]; 104 | } else if (!objectType.localeCompare(`triangle`)) { 105 | objectArea = abs(shapeArgs[0] * (shapeArgs[3] - shapeArgs[5]) + shapeArgs[2] * (shapeArgs[5] - shapeArgs[1]) + 106 | shapeArgs[4] * (shapeArgs[1] - shapeArgs[3])) / 2; 107 | // (Ax( By − Cy) + Bx(Cy − Ay) + Cx(Ay − By ))/2 108 | } 109 | return objectArea; 110 | } 111 | 112 | this.populate(shapeObject, shapeArgs, canvasX, canvasY); 113 | } 114 | 115 | ShapeEntity.handledNames = [ 116 | `arc`, 117 | `ellipse`, 118 | `line`, 119 | `point`, 120 | `quad`, 121 | `rect`, 122 | `triangle` 123 | ] 124 | 125 | ShapeEntity.handles = function(name) { 126 | return (this.handledNames.indexOf(name) >= 0); 127 | } 128 | 129 | ShapeEntity.isParameter = false; 130 | 131 | /* global Registry */ 132 | Registry.register(ShapeEntity); 133 | -------------------------------------------------------------------------------- /src/entities/textEntity.js: -------------------------------------------------------------------------------- 1 | function TextEntity(Interceptor, shapeObject, textArgs, canvasX, canvasY) { 2 | const self = this; 3 | /* global BaseEntity */ 4 | BaseEntity.call(self, shapeObject, textArgs, canvasX, canvasY); 5 | this.type = Interceptor.currentColor + ` ` + shapeObject.name + `: ` + String(textArgs[0]).substring(0, 20); 6 | 7 | this.populate = function(shapeObject, textArgs, canvasX, canvasY) { 8 | this.location = this.getLocation(shapeObject, textArgs, canvasX, canvasY); 9 | this.coordLoc = this.canvasLocator(shapeObject, textArgs, canvasX, canvasY); 10 | }; 11 | 12 | this.getAttributes = function() { 13 | return ({ 14 | type: this.type, 15 | location: this.location, 16 | coordinates: this.coordinates, 17 | }) 18 | }; 19 | 20 | this.populate(shapeObject, textArgs, canvasX, canvasY); 21 | } 22 | 23 | TextEntity.handledNames = [ 24 | `text` 25 | ] 26 | 27 | TextEntity.handles = function(name) { 28 | return (this.handledNames.indexOf(name) >= 0); 29 | } 30 | 31 | TextEntity.isParameter = false; 32 | 33 | /* global Registry */ 34 | Registry.register(TextEntity); 35 | -------------------------------------------------------------------------------- /src/gridInterceptor/interceptorFunctions.js: -------------------------------------------------------------------------------- 1 | var shadowDOMElement; // eslint-disable-line 2 | function GridInterceptor() { 3 | const self = this; 4 | /* global baseInterceptor */ 5 | baseInterceptor.call(self); 6 | this.noRows = 10, 7 | this.noCols = 10, 8 | this.coordLoc = {} 9 | } 10 | 11 | GridInterceptor.prototype = Object.create(baseInterceptor.prototype); 12 | 13 | GridInterceptor.prototype.clearVariables = function(object) { 14 | object.objectTypeCount = {}; 15 | object.objectArray = []; 16 | object.objectCount = 0; 17 | this.isCleared = true; 18 | return object; 19 | } 20 | 21 | GridInterceptor.prototype.createShadowDOMElement = function(document) { 22 | const contentTable = document.getElementById(`tableOutput-content-table`); 23 | for (let i = 0; i < this.noRows; i++) { 24 | const row = document.createElement(`tr`); 25 | 26 | for (let j = 0; j < this.noCols; j++) { 27 | const col = document.createElement(`td`); 28 | col.className = `gridOutput-cell-content`; 29 | col.innerHTML = `test`; 30 | row.appendChild(col); 31 | } 32 | contentTable.appendChild(row); 33 | } 34 | shadowDOMElement = document.getElementById(`tableOutput-content`); 35 | } 36 | GridInterceptor.prototype.populateObject = function(x, passedArgs, object, table, isDraw) { 37 | /* global objectCount */ 38 | objectCount = object.objectCount; 39 | /* global objectArray */ 40 | objectArray = object.objectArray; 41 | /* global objectTypeCount */ 42 | objectTypeCount = object.objectTypeCount; 43 | if (!isDraw) { 44 | // check for special function in setup -> createCanvas 45 | if (!x.name.localeCompare(`createCanvas`)) { 46 | this.canvasDetails.width = passedArgs[0]; 47 | this.canvasDetails.height = passedArgs[1]; 48 | } 49 | } 50 | /* global Registry */ 51 | const entityClass = Registry.entityFor(x.name); 52 | 53 | if (entityClass && !entityClass.isParameter) { 54 | objectArray[objectCount] = new entityClass(this, x, passedArgs, this.canvasDetails.width, this.canvasDetails.height); 55 | 56 | if (objectTypeCount[x.name]) { 57 | objectTypeCount[x.name]++; 58 | } else { 59 | objectTypeCount[x.name] = 1; 60 | } 61 | objectCount++; 62 | } else if (entityClass && entityClass.isParameter) { 63 | new entityClass(this, x, passedArgs, this.canvasDetails.width, this.canvasDetails.height); 64 | } 65 | return ({ 66 | objectCount, 67 | objectArray, 68 | objectTypeCount 69 | }); 70 | } 71 | 72 | GridInterceptor.prototype.populateTable = function(objectArray, documentPassed) { 73 | const that = this; 74 | objectArray = [].slice.call(objectArray); 75 | objectArray.forEach((object, i) => { 76 | if(i