diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 6e03962..0000000 --- a/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules/ -.DS_Store -dist/ \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 90150e9..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "editor.defaultFormatter": "oxc.oxc-vscode" -} diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..c684094 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +plusk.no \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index f288702..0000000 --- a/LICENSE +++ /dev/null @@ -1,674 +0,0 @@ - GNU GENERAL PUBLIC LICENSE - Version 3, 29 June 2007 - - Copyright (C) 2007 Free Software Foundation, Inc. - Everyone is permitted to copy and distribute verbatim copies - of this license document, but changing it is not allowed. - - Preamble - - The GNU General Public License is a free, copyleft license for -software and other kinds of works. - - The licenses for most software and other practical works are designed -to take away your freedom to share and change the works. By contrast, -the GNU General Public License is intended to guarantee your freedom to -share and change all versions of a program--to make sure it remains free -software for all its users. We, the Free Software Foundation, use the -GNU General Public License for most of our software; it applies also to -any other work released this way by its authors. You can apply it to -your programs, too. - - When we speak of free software, we are referring to freedom, not -price. Our General Public Licenses are designed to make sure that you -have the freedom to distribute copies of free software (and charge for -them if you wish), that you receive source code or can get it if you -want it, that you can change the software or use pieces of it in new -free programs, and that you know you can do these things. - - To protect your rights, we need to prevent others from denying you -these rights or asking you to surrender the rights. Therefore, you have -certain responsibilities if you distribute copies of the software, or if -you modify it: responsibilities to respect the freedom of others. - - For example, if you distribute copies of such a program, whether -gratis or for a fee, you must pass on to the recipients the same -freedoms that you received. You must make sure that they, too, receive -or can get the source code. And you must show them these terms so they -know their rights. - - Developers that use the GNU GPL protect your rights with two steps: -(1) assert copyright on the software, and (2) offer you this License -giving you legal permission to copy, distribute and/or modify it. - - For the developers' and authors' protection, the GPL clearly explains -that there is no warranty for this free software. For both users' and -authors' sake, the GPL requires that modified versions be marked as -changed, so that their problems will not be attributed erroneously to -authors of previous versions. - - Some devices are designed to deny users access to install or run -modified versions of the software inside them, although the manufacturer -can do so. This is fundamentally incompatible with the aim of -protecting users' freedom to change the software. The systematic -pattern of such abuse occurs in the area of products for individuals to -use, which is precisely where it is most unacceptable. Therefore, we -have designed this version of the GPL to prohibit the practice for those -products. If such problems arise substantially in other domains, we -stand ready to extend this provision to those domains in future versions -of the GPL, as needed to protect the freedom of users. - - Finally, every program is threatened constantly by software patents. -States should not allow patents to restrict development and use of -software on general-purpose computers, but in those that do, we wish to -avoid the special danger that patents applied to a free program could -make it effectively proprietary. To prevent this, the GPL assures that -patents cannot be used to render the program non-free. - - The precise terms and conditions for copying, distribution and -modification follow. - - TERMS AND CONDITIONS - - 0. Definitions. - - "This License" refers to version 3 of the GNU General Public License. - - "Copyright" also means copyright-like laws that apply to other kinds of -works, such as semiconductor masks. - - "The Program" refers to any copyrightable work licensed under this -License. Each licensee is addressed as "you". "Licensees" and -"recipients" may be individuals or organizations. - - To "modify" a work means to copy from or adapt all or part of the work -in a fashion requiring copyright permission, other than the making of an -exact copy. The resulting work is called a "modified version" of the -earlier work or a work "based on" the earlier work. - - A "covered work" means either the unmodified Program or a work based -on the Program. - - To "propagate" a work means to do anything with it that, without -permission, would make you directly or secondarily liable for -infringement under applicable copyright law, except executing it on a -computer or modifying a private copy. Propagation includes copying, -distribution (with or without modification), making available to the -public, and in some countries other activities as well. - - To "convey" a work means any kind of propagation that enables other -parties to make or receive copies. Mere interaction with a user through -a computer network, with no transfer of a copy, is not conveying. - - An interactive user interface displays "Appropriate Legal Notices" -to the extent that it includes a convenient and prominently visible -feature that (1) displays an appropriate copyright notice, and (2) -tells the user that there is no warranty for the work (except to the -extent that warranties are provided), that licensees may convey the -work under this License, and how to view a copy of this License. If -the interface presents a list of user commands or options, such as a -menu, a prominent item in the list meets this criterion. - - 1. Source Code. - - The "source code" for a work means the preferred form of the work -for making modifications to it. "Object code" means any non-source -form of a work. - - A "Standard Interface" means an interface that either is an official -standard defined by a recognized standards body, or, in the case of -interfaces specified for a particular programming language, one that -is widely used among developers working in that language. - - The "System Libraries" of an executable work include anything, other -than the work as a whole, that (a) is included in the normal form of -packaging a Major Component, but which is not part of that Major -Component, and (b) serves only to enable use of the work with that -Major Component, or to implement a Standard Interface for which an -implementation is available to the public in source code form. A -"Major Component", in this context, means a major essential component -(kernel, window system, and so on) of the specific operating system -(if any) on which the executable work runs, or a compiler used to -produce the work, or an object code interpreter used to run it. - - The "Corresponding Source" for a work in object code form means all -the source code needed to generate, install, and (for an executable -work) run the object code and to modify the work, including scripts to -control those activities. However, it does not include the work's -System Libraries, or general-purpose tools or generally available free -programs which are used unmodified in performing those activities but -which are not part of the work. For example, Corresponding Source -includes interface definition files associated with source files for -the work, and the source code for shared libraries and dynamically -linked subprograms that the work is specifically designed to require, -such as by intimate data communication or control flow between those -subprograms and other parts of the work. - - The Corresponding Source need not include anything that users -can regenerate automatically from other parts of the Corresponding -Source. - - The Corresponding Source for a work in source code form is that -same work. - - 2. Basic Permissions. - - All rights granted under this License are granted for the term of -copyright on the Program, and are irrevocable provided the stated -conditions are met. This License explicitly affirms your unlimited -permission to run the unmodified Program. The output from running a -covered work is covered by this License only if the output, given its -content, constitutes a covered work. This License acknowledges your -rights of fair use or other equivalent, as provided by copyright law. - - You may make, run and propagate covered works that you do not -convey, without conditions so long as your license otherwise remains -in force. You may convey covered works to others for the sole purpose -of having them make modifications exclusively for you, or provide you -with facilities for running those works, provided that you comply with -the terms of this License in conveying all material for which you do -not control copyright. Those thus making or running the covered works -for you must do so exclusively on your behalf, under your direction -and control, on terms that prohibit them from making any copies of -your copyrighted material outside their relationship with you. - - Conveying under any other circumstances is permitted solely under -the conditions stated below. Sublicensing is not allowed; section 10 -makes it unnecessary. - - 3. Protecting Users' Legal Rights From Anti-Circumvention Law. - - No covered work shall be deemed part of an effective technological -measure under any applicable law fulfilling obligations under article -11 of the WIPO copyright treaty adopted on 20 December 1996, or -similar laws prohibiting or restricting circumvention of such -measures. - - When you convey a covered work, you waive any legal power to forbid -circumvention of technological measures to the extent such circumvention -is effected by exercising rights under this License with respect to -the covered work, and you disclaim any intention to limit operation or -modification of the work as a means of enforcing, against the work's -users, your or third parties' legal rights to forbid circumvention of -technological measures. - - 4. Conveying Verbatim Copies. - - You may convey verbatim copies of the Program's source code as you -receive it, in any medium, provided that you conspicuously and -appropriately publish on each copy an appropriate copyright notice; -keep intact all notices stating that this License and any -non-permissive terms added in accord with section 7 apply to the code; -keep intact all notices of the absence of any warranty; and give all -recipients a copy of this License along with the Program. - - You may charge any price or no price for each copy that you convey, -and you may offer support or warranty protection for a fee. - - 5. Conveying Modified Source Versions. - - You may convey a work based on the Program, or the modifications to -produce it from the Program, in the form of source code under the -terms of section 4, provided that you also meet all of these conditions: - - a) The work must carry prominent notices stating that you modified - it, and giving a relevant date. - - b) The work must carry prominent notices stating that it is - released under this License and any conditions added under section - 7. This requirement modifies the requirement in section 4 to - "keep intact all notices". - - c) You must license the entire work, as a whole, under this - License to anyone who comes into possession of a copy. This - License will therefore apply, along with any applicable section 7 - additional terms, to the whole of the work, and all its parts, - regardless of how they are packaged. This License gives no - permission to license the work in any other way, but it does not - invalidate such permission if you have separately received it. - - d) If the work has interactive user interfaces, each must display - Appropriate Legal Notices; however, if the Program has interactive - interfaces that do not display Appropriate Legal Notices, your - work need not make them do so. - - A compilation of a covered work with other separate and independent -works, which are not by their nature extensions of the covered work, -and which are not combined with it such as to form a larger program, -in or on a volume of a storage or distribution medium, is called an -"aggregate" if the compilation and its resulting copyright are not -used to limit the access or legal rights of the compilation's users -beyond what the individual works permit. Inclusion of a covered work -in an aggregate does not cause this License to apply to the other -parts of the aggregate. - - 6. Conveying Non-Source Forms. - - You may convey a covered work in object code form under the terms -of sections 4 and 5, provided that you also convey the -machine-readable Corresponding Source under the terms of this License, -in one of these ways: - - a) Convey the object code in, or embodied in, a physical product - (including a physical distribution medium), accompanied by the - Corresponding Source fixed on a durable physical medium - customarily used for software interchange. - - b) Convey the object code in, or embodied in, a physical product - (including a physical distribution medium), accompanied by a - written offer, valid for at least three years and valid for as - long as you offer spare parts or customer support for that product - model, to give anyone who possesses the object code either (1) a - copy of the Corresponding Source for all the software in the - product that is covered by this License, on a durable physical - medium customarily used for software interchange, for a price no - more than your reasonable cost of physically performing this - conveying of source, or (2) access to copy the - Corresponding Source from a network server at no charge. - - c) Convey individual copies of the object code with a copy of the - written offer to provide the Corresponding Source. This - alternative is allowed only occasionally and noncommercially, and - only if you received the object code with such an offer, in accord - with subsection 6b. - - d) Convey the object code by offering access from a designated - place (gratis or for a charge), and offer equivalent access to the - Corresponding Source in the same way through the same place at no - further charge. You need not require recipients to copy the - Corresponding Source along with the object code. If the place to - copy the object code is a network server, the Corresponding Source - may be on a different server (operated by you or a third party) - that supports equivalent copying facilities, provided you maintain - clear directions next to the object code saying where to find the - Corresponding Source. Regardless of what server hosts the - Corresponding Source, you remain obligated to ensure that it is - available for as long as needed to satisfy these requirements. - - e) Convey the object code using peer-to-peer transmission, provided - you inform other peers where the object code and Corresponding - Source of the work are being offered to the general public at no - charge under subsection 6d. - - A separable portion of the object code, whose source code is excluded -from the Corresponding Source as a System Library, need not be -included in conveying the object code work. - - A "User Product" is either (1) a "consumer product", which means any -tangible personal property which is normally used for personal, family, -or household purposes, or (2) anything designed or sold for incorporation -into a dwelling. In determining whether a product is a consumer product, -doubtful cases shall be resolved in favor of coverage. For a particular -product received by a particular user, "normally used" refers to a -typical or common use of that class of product, regardless of the status -of the particular user or of the way in which the particular user -actually uses, or expects or is expected to use, the product. A product -is a consumer product regardless of whether the product has substantial -commercial, industrial or non-consumer uses, unless such uses represent -the only significant mode of use of the product. - - "Installation Information" for a User Product means any methods, -procedures, authorization keys, or other information required to install -and execute modified versions of a covered work in that User Product from -a modified version of its Corresponding Source. The information must -suffice to ensure that the continued functioning of the modified object -code is in no case prevented or interfered with solely because -modification has been made. - - If you convey an object code work under this section in, or with, or -specifically for use in, a User Product, and the conveying occurs as -part of a transaction in which the right of possession and use of the -User Product is transferred to the recipient in perpetuity or for a -fixed term (regardless of how the transaction is characterized), the -Corresponding Source conveyed under this section must be accompanied -by the Installation Information. But this requirement does not apply -if neither you nor any third party retains the ability to install -modified object code on the User Product (for example, the work has -been installed in ROM). - - The requirement to provide Installation Information does not include a -requirement to continue to provide support service, warranty, or updates -for a work that has been modified or installed by the recipient, or for -the User Product in which it has been modified or installed. Access to a -network may be denied when the modification itself materially and -adversely affects the operation of the network or violates the rules and -protocols for communication across the network. - - Corresponding Source conveyed, and Installation Information provided, -in accord with this section must be in a format that is publicly -documented (and with an implementation available to the public in -source code form), and must require no special password or key for -unpacking, reading or copying. - - 7. Additional Terms. - - "Additional permissions" are terms that supplement the terms of this -License by making exceptions from one or more of its conditions. -Additional permissions that are applicable to the entire Program shall -be treated as though they were included in this License, to the extent -that they are valid under applicable law. If additional permissions -apply only to part of the Program, that part may be used separately -under those permissions, but the entire Program remains governed by -this License without regard to the additional permissions. - - When you convey a copy of a covered work, you may at your option -remove any additional permissions from that copy, or from any part of -it. (Additional permissions may be written to require their own -removal in certain cases when you modify the work.) You may place -additional permissions on material, added by you to a covered work, -for which you have or can give appropriate copyright permission. - - Notwithstanding any other provision of this License, for material you -add to a covered work, you may (if authorized by the copyright holders of -that material) supplement the terms of this License with terms: - - a) Disclaiming warranty or limiting liability differently from the - terms of sections 15 and 16 of this License; or - - b) Requiring preservation of specified reasonable legal notices or - author attributions in that material or in the Appropriate Legal - Notices displayed by works containing it; or - - c) Prohibiting misrepresentation of the origin of that material, or - requiring that modified versions of such material be marked in - reasonable ways as different from the original version; or - - d) Limiting the use for publicity purposes of names of licensors or - authors of the material; or - - e) Declining to grant rights under trademark law for use of some - trade names, trademarks, or service marks; or - - f) Requiring indemnification of licensors and authors of that - material by anyone who conveys the material (or modified versions of - it) with contractual assumptions of liability to the recipient, for - any liability that these contractual assumptions directly impose on - those licensors and authors. - - All other non-permissive additional terms are considered "further -restrictions" within the meaning of section 10. If the Program as you -received it, or any part of it, contains a notice stating that it is -governed by this License along with a term that is a further -restriction, you may remove that term. If a license document contains -a further restriction but permits relicensing or conveying under this -License, you may add to a covered work material governed by the terms -of that license document, provided that the further restriction does -not survive such relicensing or conveying. - - If you add terms to a covered work in accord with this section, you -must place, in the relevant source files, a statement of the -additional terms that apply to those files, or a notice indicating -where to find the applicable terms. - - Additional terms, permissive or non-permissive, may be stated in the -form of a separately written license, or stated as exceptions; -the above requirements apply either way. - - 8. Termination. - - You may not propagate or modify a covered work except as expressly -provided under this License. Any attempt otherwise to propagate or -modify it is void, and will automatically terminate your rights under -this License (including any patent licenses granted under the third -paragraph of section 11). - - However, if you cease all violation of this License, then your -license from a particular copyright holder is reinstated (a) -provisionally, unless and until the copyright holder explicitly and -finally terminates your license, and (b) permanently, if the copyright -holder fails to notify you of the violation by some reasonable means -prior to 60 days after the cessation. - - Moreover, your license from a particular copyright holder is -reinstated permanently if the copyright holder notifies you of the -violation by some reasonable means, this is the first time you have -received notice of violation of this License (for any work) from that -copyright holder, and you cure the violation prior to 30 days after -your receipt of the notice. - - Termination of your rights under this section does not terminate the -licenses of parties who have received copies or rights from you under -this License. If your rights have been terminated and not permanently -reinstated, you do not qualify to receive new licenses for the same -material under section 10. - - 9. Acceptance Not Required for Having Copies. - - You are not required to accept this License in order to receive or -run a copy of the Program. Ancillary propagation of a covered work -occurring solely as a consequence of using peer-to-peer transmission -to receive a copy likewise does not require acceptance. However, -nothing other than this License grants you permission to propagate or -modify any covered work. These actions infringe copyright if you do -not accept this License. Therefore, by modifying or propagating a -covered work, you indicate your acceptance of this License to do so. - - 10. Automatic Licensing of Downstream Recipients. - - Each time you convey a covered work, the recipient automatically -receives a license from the original licensors, to run, modify and -propagate that work, subject to this License. You are not responsible -for enforcing compliance by third parties with this License. - - An "entity transaction" is a transaction transferring control of an -organization, or substantially all assets of one, or subdividing an -organization, or merging organizations. If propagation of a covered -work results from an entity transaction, each party to that -transaction who receives a copy of the work also receives whatever -licenses to the work the party's predecessor in interest had or could -give under the previous paragraph, plus a right to possession of the -Corresponding Source of the work from the predecessor in interest, if -the predecessor has it or can get it with reasonable efforts. - - You may not impose any further restrictions on the exercise of the -rights granted or affirmed under this License. For example, you may -not impose a license fee, royalty, or other charge for exercise of -rights granted under this License, and you may not initiate litigation -(including a cross-claim or counterclaim in a lawsuit) alleging that -any patent claim is infringed by making, using, selling, offering for -sale, or importing the Program or any portion of it. - - 11. Patents. - - A "contributor" is a copyright holder who authorizes use under this -License of the Program or a work on which the Program is based. The -work thus licensed is called the contributor's "contributor version". - - A contributor's "essential patent claims" are all patent claims -owned or controlled by the contributor, whether already acquired or -hereafter acquired, that would be infringed by some manner, permitted -by this License, of making, using, or selling its contributor version, -but do not include claims that would be infringed only as a -consequence of further modification of the contributor version. For -purposes of this definition, "control" includes the right to grant -patent sublicenses in a manner consistent with the requirements of -this License. - - Each contributor grants you a non-exclusive, worldwide, royalty-free -patent license under the contributor's essential patent claims, to -make, use, sell, offer for sale, import and otherwise run, modify and -propagate the contents of its contributor version. - - In the following three paragraphs, a "patent license" is any express -agreement or commitment, however denominated, not to enforce a patent -(such as an express permission to practice a patent or covenant not to -sue for patent infringement). To "grant" such a patent license to a -party means to make such an agreement or commitment not to enforce a -patent against the party. - - If you convey a covered work, knowingly relying on a patent license, -and the Corresponding Source of the work is not available for anyone -to copy, free of charge and under the terms of this License, through a -publicly available network server or other readily accessible means, -then you must either (1) cause the Corresponding Source to be so -available, or (2) arrange to deprive yourself of the benefit of the -patent license for this particular work, or (3) arrange, in a manner -consistent with the requirements of this License, to extend the patent -license to downstream recipients. "Knowingly relying" means you have -actual knowledge that, but for the patent license, your conveying the -covered work in a country, or your recipient's use of the covered work -in a country, would infringe one or more identifiable patents in that -country that you have reason to believe are valid. - - If, pursuant to or in connection with a single transaction or -arrangement, you convey, or propagate by procuring conveyance of, a -covered work, and grant a patent license to some of the parties -receiving the covered work authorizing them to use, propagate, modify -or convey a specific copy of the covered work, then the patent license -you grant is automatically extended to all recipients of the covered -work and works based on it. - - A patent license is "discriminatory" if it does not include within -the scope of its coverage, prohibits the exercise of, or is -conditioned on the non-exercise of one or more of the rights that are -specifically granted under this License. You may not convey a covered -work if you are a party to an arrangement with a third party that is -in the business of distributing software, under which you make payment -to the third party based on the extent of your activity of conveying -the work, and under which the third party grants, to any of the -parties who would receive the covered work from you, a discriminatory -patent license (a) in connection with copies of the covered work -conveyed by you (or copies made from those copies), or (b) primarily -for and in connection with specific products or compilations that -contain the covered work, unless you entered into that arrangement, -or that patent license was granted, prior to 28 March 2007. - - Nothing in this License shall be construed as excluding or limiting -any implied license or other defenses to infringement that may -otherwise be available to you under applicable patent law. - - 12. No Surrender of Others' Freedom. - - If conditions are imposed on you (whether by court order, agreement or -otherwise) that contradict the conditions of this License, they do not -excuse you from the conditions of this License. If you cannot convey a -covered work so as to satisfy simultaneously your obligations under this -License and any other pertinent obligations, then as a consequence you may -not convey it at all. For example, if you agree to terms that obligate you -to collect a royalty for further conveying from those to whom you convey -the Program, the only way you could satisfy both those terms and this -License would be to refrain entirely from conveying the Program. - - 13. Use with the GNU Affero General Public License. - - Notwithstanding any other provision of this License, you have -permission to link or combine any covered work with a work licensed -under version 3 of the GNU Affero General Public License into a single -combined work, and to convey the resulting work. The terms of this -License will continue to apply to the part which is the covered work, -but the special requirements of the GNU Affero General Public License, -section 13, concerning interaction through a network will apply to the -combination as such. - - 14. Revised Versions of this License. - - The Free Software Foundation may publish revised and/or new versions of -the GNU General Public License from time to time. Such new versions will -be similar in spirit to the present version, but may differ in detail to -address new problems or concerns. - - Each version is given a distinguishing version number. If the -Program specifies that a certain numbered version of the GNU General -Public License "or any later version" applies to it, you have the -option of following the terms and conditions either of that numbered -version or of any later version published by the Free Software -Foundation. If the Program does not specify a version number of the -GNU General Public License, you may choose any version ever published -by the Free Software Foundation. - - If the Program specifies that a proxy can decide which future -versions of the GNU General Public License can be used, that proxy's -public statement of acceptance of a version permanently authorizes you -to choose that version for the Program. - - Later license versions may give you additional or different -permissions. However, no additional obligations are imposed on any -author or copyright holder as a result of your choosing to follow a -later version. - - 15. Disclaimer of Warranty. - - THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY -APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT -HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY -OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, -THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR -PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM -IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF -ALL NECESSARY SERVICING, REPAIR OR CORRECTION. - - 16. Limitation of Liability. - - IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING -WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS -THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY -GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE -USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF -DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD -PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), -EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF -SUCH DAMAGES. - - 17. Interpretation of Sections 15 and 16. - - If the disclaimer of warranty and limitation of liability provided -above cannot be given local legal effect according to their terms, -reviewing courts shall apply local law that most closely approximates -an absolute waiver of all civil liability in connection with the -Program, unless a warranty or assumption of liability accompanies a -copy of the Program in return for a fee. - - END OF TERMS AND CONDITIONS - - How to Apply These Terms to Your New Programs - - If you develop a new program, and you want it to be of the greatest -possible use to the public, the best way to achieve this is to make it -free software which everyone can redistribute and change under these terms. - - To do so, attach the following notices to the program. It is safest -to attach them to the start of each source file to most effectively -state the exclusion of warranty; and each file should have at least -the "copyright" line and a pointer to where the full notice is found. - - - Copyright (C) - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with this program. If not, see . - -Also add information on how to contact you by electronic and paper mail. - - If the program does terminal interaction, make it output a short -notice like this when it starts in an interactive mode: - - Copyright (C) - This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. - This is free software, and you are welcome to redistribute it - under certain conditions; type `show c' for details. - -The hypothetical commands `show w' and `show c' should show the appropriate -parts of the General Public License. Of course, your program's commands -might be different; for a GUI interface, you would use an "about box". - - You should also get your employer (if you work as a programmer) or school, -if any, to sign a "copyright disclaimer" for the program, if necessary. -For more information on this, and how to apply and follow the GNU GPL, see -. - - The GNU General Public License does not permit incorporating your program -into proprietary programs. If your program is a subroutine library, you -may consider it more useful to permit linking proprietary applications with -the library. If this is what you want to do, use the GNU Lesser General -Public License instead of this License. But first, please read -. diff --git a/README.md b/README.md deleted file mode 100644 index 05e4053..0000000 --- a/README.md +++ /dev/null @@ -1,5 +0,0 @@ -### Project structure - -Some sketches made with p5.js. - -Also see [generative-workshop](https://github.com/plusk/generative-workshop/). diff --git a/archive/fagdag/instagram.html b/archive/fagdag/instagram.html new file mode 100644 index 0000000..a196e67 --- /dev/null +++ b/archive/fagdag/instagram.html @@ -0,0 +1,35 @@ + + + + + + + archive/fagdag/instagram + + + + + + diff --git a/archive/fagdag/instagram.js b/archive/fagdag/instagram.js new file mode 100644 index 0000000..8cfdf2b --- /dev/null +++ b/archive/fagdag/instagram.js @@ -0,0 +1,388 @@ +let vMax, vMin, TEXT_SIZE, PALETTE, BEKK_PALETTE, BLOBS, SPOTS; + +const EXPORT = false; +const FRAME_LIMIT = 15 * 30; // 15 seconds at 30 fps + +// How spiky the blobs are +const BLOB_AMP = 0.5; +const LINE_AMP = 0.75; +const SPOT_AMP = 0.5; + +// How steep the easing curve is, tends to push blobs to their rMin or rMax +const BLOB_EASE_STEEPNESS = 4; +const SPOT_EASE_STEEPNESS = 5; +const LINE_EASE_STEEPNESS = 2; + +// The speed at which blobs grow and shrink +const BLOB_ANIMATION_SPEED = 0.004; + +// The speed at which the blob rotates in perlin noise space, made more noticable by more spiky blobs +const ROTATION_SPEED = 0.004; + +// A rough representation of the number of vertices that make up a blob, lower value = more points +const MAX_POINT_DIST = 15; + +// The thickness of lines +const STROKE_WEIGHT = 2; + +const RANDOM_COLORS = false; + +const SPOT_COUNT = 40; +const SPOT_X_SPREAD = 7; +const SPOT_Y_SPREAD = 0.5; +const SPOT_SLANT = 3; +const SPOT_APPEAR_NOISE = 0.005; +const SPOT_DURATION = EXPORT ? FRAME_LIMIT / 2 : 250; // 0 means the spots will always be visible + +const MOVE_SPEED = 0.1; +const MOVE_RADIUS = 100; + +/* + Config end +*/ + +function easeInOutCool(steepness, x) { + const mappedX = map(x, 0, 1, -1, 1); + return (1 + Math.tanh(steepness * mappedX)) / 2; +} + +function randomColor() { + const keys = Object.keys(BEKK_PALETTE); + return BEKK_PALETTE[keys[(keys.length * Math.random()) << 0]]; +} + +class Shape { + constructor({ + z, + cx, + cy, + mrx = 0, + mry = 0, + mSpeed = 0, + mAngle = random(TWO_PI), + rMin, + rMax, + amp = BLOB_AMP, + fillColor, + aStart = 0, + aEnd = TWO_PI, + line = false, + animationSpeed = BLOB_ANIMATION_SPEED, + steepness = BLOB_EASE_STEEPNESS, + disappearTime = 0, + }) { + this.z = z; + this.cx = cx; + this.cy = cy; + this.mrx = mrx; + this.mry = mry; + this.mSpeed = mSpeed; + this.mAngle = mAngle; + this.rMin = rMin; + this.rMax = rMax; + this.amp = amp; + this.fillColor = fillColor; + this.aStart = aStart; + this.aEnd = aEnd; + this.line = line; + this.animationSpeed = animationSpeed; + this.steepness = steepness; + this.disappearTime = disappearTime; + this.visible = this.disappearTime === 0; + this.disappearTick = + noise(cx * SPOT_APPEAR_NOISE, cy * SPOT_APPEAR_NOISE) * + this.disappearTime * + (1 - cy / height); + } + + draw() { + if (this.disappearTime !== 0) { + this.disappearTick++; + if (this.disappearTick >= this.disappearTime) { + this.visible = !this.visible; + this.disappearTick = 0; + } + } + + if (!this.visible) { + return; + } + + if (this.line) { + stroke(PALETTE.new_dark_line); + noFill(); + } else { + fill(this.fillColor); + } + + // Might put all of this in the constructor + const pointCount = max((TWO_PI * this.rMax) / MAX_POINT_DIST, 30); + const deltaA = this.aEnd - this.aStart; + const amp = this.amp; + + const rotation = frameCount * ROTATION_SPEED; + this.mAngle = (this.mAngle + this.mSpeed) % TWO_PI; + + /* Iterate through a full circle of angles to draw a blob */ + beginShape(); + for (let a = this.aStart; a <= this.aEnd; a += deltaA / pointCount) { + // Get coordinates in the perlin noise space + const xOff = map(cos(a + rotation), -1, 1, 0, amp); + const yOff = map(sin(a + rotation), -1, 1, 0, amp); + + const noiseValue = noise( + xOff, + yOff, + this.z + frameCount * this.animationSpeed + ); + + const adjustedNoiseValue = easeInOutCool(this.steepness, noiseValue); + const noisedRadius = map(adjustedNoiseValue, 0, 1, this.rMin, this.rMax); + + /* Compute the final x and y and set a vertex there for the shape */ + const x = noisedRadius * cos(a); + const y = noisedRadius * sin(a); + + if (!this.line) { + const mx = this.mrx * cos(this.mAngle); + const my = this.mry * sin(this.mAngle); + vertex(this.cx + mx + x, this.cy + my + y); + } else { + vertex(this.cx + x, this.cy + y); + } + } + + if (line) { + endShape(); + noStroke(); + } else { + endShape(CLOSE); + } + } +} + +function setupBlobs() { + BLOBS = [ + new Shape({ + z: 10, + cx: width * -0.1, + cy: height * 0.9, + rMin: vMin * 0.1, + rMax: vMin * 0.3, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, + }), + new Shape({ + z: 20, + cx: width * -0.1, + cy: height * 0.1, + rMin: vMin * 0.1, + rMax: vMin * 0.45, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.kveld, + }), + new Shape({ + z: 30, + cx: 0, + cy: height * 0.5, + rMin: vMin * 0.1, + rMax: vMin * 0.2, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_dark, + }), + new Shape({ + z: 40, + cx: width * 0.9, + cy: height, + rMin: vMin * 0.1, + rMax: vMin * 0.3, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, + }), + new Shape({ + z: 50, + cx: width * 1, + cy: height * 0.75, + rMin: vMin * 0.1, + rMax: vMin * 0.3, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, + }), + new Shape({ + z: 60, + cx: width * 1.2, + cy: height * 0.5, + rMin: vMin * 0.2, + rMax: vMin * 0.4, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.grønn_kontrast, + }), + new Shape({ + z: 100, + cx: 0, + cy: 0, + rMin: vMin * 0.2, + rMax: vMin * 0.4, + aEnd: PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 200, + cx: width, + cy: height, + rMin: vMin * 0.1, + rMax: vMin * 0.3, + aStart: PI, + aEnd: PI + HALF_PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 300, + cx: width, + cy: height, + rMin: vMin * 0.15, + rMax: vMin * 0.35, + aStart: PI, + aEnd: PI + HALF_PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 1000, + cx: width / 2, + cy: height / 2, + rMin: vMin * 0.15, + rMax: vMin * 0.3, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, + }), + new Shape({ + z: 2000, + cx: width / 2, + cy: height / 2, + rMin: vMin * 0.2, + rMax: vMin * 0.35, + fillColor: PALETTE.new_dark, + }), + ]; + + SPOTS = []; + const SPOT_RMAX = vMin * 0.015; + for (let i = 0; i < SPOT_COUNT; i++) { + SPOTS.push( + new Shape({ + z: i, + cx: + width * 0.2 + + random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) - + i * SPOT_SLANT, + cy: i * SPOT_RMAX * SPOT_Y_SPREAD, + rMin: vMin * 0.005, + rMax: SPOT_RMAX, + amp: SPOT_AMP, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, + animationSpeed: 0, + steepness: SPOT_EASE_STEEPNESS, + disappearTime: SPOT_DURATION, + }) + ); + SPOTS.push( + new Shape({ + z: i + SPOT_COUNT, + cx: + width * 0.8 + + random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) + + i * SPOT_SLANT, + cy: height - i * SPOT_RMAX * SPOT_Y_SPREAD, + rMin: vMin * 0.005, + rMax: SPOT_RMAX, + amp: SPOT_AMP, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, + animationSpeed: 0, + steepness: SPOT_EASE_STEEPNESS, + disappearTime: SPOT_DURATION, + }) + ); + } +} + +function windowResized() { + vMin = min(width, height); + vMax = max(width, height); + resizeCanvas(1080, 1080); + + setupBlobs(); + + // Intrinsically tied to the rMin of central blob + TEXT_SIZE = vMin * 0.075; + textSize(TEXT_SIZE); +} + +function setup() { + colorMode(HSL); + createCanvas(1080, 1080); + pixelDensity(1); + frameRate(EXPORT ? 4 : 30); + + PALETTE = { + new_dark: color("#1c2c3c"), + new_dark_line: color("#1c2c3c"), + new_blue: color("#293895"), + // sort: color("#0E0E0E"), + hvit: color("#FFFFFF"), + soloppgang: color("#FFB88D"), + // soloppgang_kontrast: color("#FF8034"), + // regn: color("#BCCEDD"), + // regn_kontrast: color("#7E9CB9"), + skyfritt: color("#B1E8FF"), + // skyfritt_kontrast: color("#43CBFF"), + // overskyet: color("#E7E7E7"), + // overskyet_kontrast: color("#CECECE"), + solnedgang: color("#FF9999"), + // solnedgang_kontrast: color("#FF5B5B"), + sol: color("#FFF2AD"), + sol_kontrast: color("#FFF02B"), + kveld: color("#E5B1FF"), + // kveld_kontrast: color("#8E24C9"), + // grønn: color("#A1F5E3"), + grønn_kontrast: color("#16DBC4"), + // natt: color("#6D7ABB"), + // natt_kontrast: color("#162365"), + }; + PALETTE.new_dark_line.setAlpha(0.75); + BG = PALETTE.sol; + + windowResized(); + setupBlobs(); + + textAlign(CENTER); + textFont("Newzald"); + + strokeWeight(STROKE_WEIGHT); + noStroke(); + strokeCap(PROJECT); +} + +function draw() { + /* Home-made helper function to select background based on config */ + background(BG); + + for (let b = 0; b < BLOBS.length; b++) { + const blob = BLOBS[b]; + blob.draw(); + } + + for (let s = 0; s < SPOTS.length; s++) { + const spot = SPOTS[s]; + spot.draw(); + } + + fill(PALETTE.hvit); + text("Frontend", width / 2, height / 2); + text("til frokost", width / 2, height / 2 + TEXT_SIZE); + + if (EXPORT) { + saveCanvas(frameCount.toString().padStart(3, "0"), "png"); + if (FRAME_LIMIT < frameCount) { + noLoop(); + } + } +} diff --git a/archive/fagdag/story.html b/archive/fagdag/story.html new file mode 100644 index 0000000..75d9d36 --- /dev/null +++ b/archive/fagdag/story.html @@ -0,0 +1,35 @@ + + + + + + + archive/fagdag/story + + + + + + diff --git a/archive/fagdag/story.js b/archive/fagdag/story.js new file mode 100644 index 0000000..ece4575 --- /dev/null +++ b/archive/fagdag/story.js @@ -0,0 +1,388 @@ +let vMax, vMin, TEXT_SIZE, PALETTE, BEKK_PALETTE, BLOBS, SPOTS; + +const EXPORT = false; +const FRAME_LIMIT = 15 * 30; // 15 seconds at 30 fps + +// How spiky the blobs are +const BLOB_AMP = 0.5; +const LINE_AMP = 0.75; +const SPOT_AMP = 0.5; + +// How steep the easing curve is, tends to push blobs to their rMin or rMax +const BLOB_EASE_STEEPNESS = 4; +const SPOT_EASE_STEEPNESS = 5; +const LINE_EASE_STEEPNESS = 2; + +// The speed at which blobs grow and shrink +const BLOB_ANIMATION_SPEED = 0.004; + +// The speed at which the blob rotates in perlin noise space, made more noticable by more spiky blobs +const ROTATION_SPEED = 0.004; + +// A rough representation of the number of vertices that make up a blob, lower value = more points +const MAX_POINT_DIST = 15; + +// The thickness of lines +const STROKE_WEIGHT = 2; + +const RANDOM_COLORS = false; + +const SPOT_COUNT = 40; +const SPOT_X_SPREAD = 7; +const SPOT_Y_SPREAD = 0.5; +const SPOT_SLANT = 3; +const SPOT_APPEAR_NOISE = 0.005; +const SPOT_DURATION = EXPORT ? FRAME_LIMIT / 2 : 250; // 0 means the spots will always be visible + +const MOVE_SPEED = 0.1; +const MOVE_RADIUS = 100; + +/* + Config end +*/ + +function easeInOutCool(steepness, x) { + const mappedX = map(x, 0, 1, -1, 1); + return (1 + Math.tanh(steepness * mappedX)) / 2; +} + +function randomColor() { + const keys = Object.keys(BEKK_PALETTE); + return BEKK_PALETTE[keys[(keys.length * Math.random()) << 0]]; +} + +class Shape { + constructor({ + z, + cx, + cy, + mrx = 0, + mry = 0, + mSpeed = 0, + mAngle = random(TWO_PI), + rMin, + rMax, + amp = BLOB_AMP, + fillColor, + aStart = 0, + aEnd = TWO_PI, + line = false, + animationSpeed = BLOB_ANIMATION_SPEED, + steepness = BLOB_EASE_STEEPNESS, + disappearTime = 0, + }) { + this.z = z; + this.cx = cx; + this.cy = cy; + this.mrx = mrx; + this.mry = mry; + this.mSpeed = mSpeed; + this.mAngle = mAngle; + this.rMin = rMin; + this.rMax = rMax; + this.amp = amp; + this.fillColor = fillColor; + this.aStart = aStart; + this.aEnd = aEnd; + this.line = line; + this.animationSpeed = animationSpeed; + this.steepness = steepness; + this.disappearTime = disappearTime; + this.visible = this.disappearTime === 0; + this.disappearTick = + noise(cx * SPOT_APPEAR_NOISE, cy * SPOT_APPEAR_NOISE) * + this.disappearTime * + (1 - cy / height); + } + + draw() { + if (this.disappearTime !== 0) { + this.disappearTick++; + if (this.disappearTick >= this.disappearTime) { + this.visible = !this.visible; + this.disappearTick = 0; + } + } + + if (!this.visible) { + return; + } + + if (this.line) { + stroke(PALETTE.new_dark_line); + noFill(); + } else { + fill(this.fillColor); + } + + // Might put all of this in the constructor + const pointCount = max((TWO_PI * this.rMax) / MAX_POINT_DIST, 30); + const deltaA = this.aEnd - this.aStart; + const amp = this.amp; + + const rotation = frameCount * ROTATION_SPEED; + this.mAngle = (this.mAngle + this.mSpeed) % TWO_PI; + + /* Iterate through a full circle of angles to draw a blob */ + beginShape(); + for (let a = this.aStart; a <= this.aEnd; a += deltaA / pointCount) { + // Get coordinates in the perlin noise space + const xOff = map(cos(a + rotation), -1, 1, 0, amp); + const yOff = map(sin(a + rotation), -1, 1, 0, amp); + + const noiseValue = noise( + xOff, + yOff, + this.z + frameCount * this.animationSpeed + ); + + const adjustedNoiseValue = easeInOutCool(this.steepness, noiseValue); + const noisedRadius = map(adjustedNoiseValue, 0, 1, this.rMin, this.rMax); + + /* Compute the final x and y and set a vertex there for the shape */ + const x = noisedRadius * cos(a); + const y = noisedRadius * sin(a); + + if (!this.line) { + const mx = this.mrx * cos(this.mAngle); + const my = this.mry * sin(this.mAngle); + vertex(this.cx + mx + x, this.cy + my + y); + } else { + vertex(this.cx + x, this.cy + y); + } + } + + if (line) { + endShape(); + noStroke(); + } else { + endShape(CLOSE); + } + } +} + +function setupBlobs() { + BLOBS = [ + new Shape({ + z: 10, + cx: width * -0.1, + cy: height * 0.9, + rMin: vMin * 0.2, + rMax: vMin * 0.5, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, + }), + new Shape({ + z: 20, + cx: width * 0, + cy: height * 0.1, + rMin: vMin * 0.2, + rMax: vMin * 0.45, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.kveld, + }), + new Shape({ + z: 30, + cx: width * -0.2, + cy: height * 0.5, + rMin: vMin * 0.2, + rMax: vMin * 0.5, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_dark, + }), + new Shape({ + z: 40, + cx: width * 0.8, + cy: height * 0.9, + rMin: vMin * 0.2, + rMax: vMin * 0.4, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, + }), + new Shape({ + z: 50, + cx: width * 1, + cy: height * 0.7, + rMin: vMin * 0.2, + rMax: vMin * 0.5, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, + }), + new Shape({ + z: 60, + cx: width * 1.2, + cy: height * 0.5, + rMin: vMin * 0.2, + rMax: vMin * 0.4, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.grønn_kontrast, + }), + new Shape({ + z: 100, + cx: 0, + cy: 0, + rMin: vMin * 0.2, + rMax: vMin * 0.6, + aEnd: PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 200, + cx: width, + cy: height, + rMin: vMin * 0.2, + rMax: vMin * 0.6, + aStart: PI, + aEnd: PI + HALF_PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 300, + cx: width, + cy: height, + rMin: vMin * 0.15, + rMax: vMin * 0.55, + aStart: PI, + aEnd: PI + HALF_PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 1000, + cx: width / 2, + cy: height / 2, + rMin: vMin * 0.15, + rMax: vMin * 0.3, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, + }), + new Shape({ + z: 2000, + cx: width / 2, + cy: height / 2, + rMin: vMin * 0.2, + rMax: vMin * 0.35, + fillColor: PALETTE.new_dark, + }), + ]; + + SPOTS = []; + const SPOT_RMAX = vMin * 0.02; + for (let i = 0; i < SPOT_COUNT; i++) { + SPOTS.push( + new Shape({ + z: i, + cx: + width * 0.3 + + random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) - + i * SPOT_SLANT, + cy: i * SPOT_RMAX * SPOT_Y_SPREAD, + rMin: vMin * 0.005, + rMax: SPOT_RMAX, + amp: SPOT_AMP, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, + animationSpeed: 0, + steepness: SPOT_EASE_STEEPNESS, + disappearTime: SPOT_DURATION, + }) + ); + SPOTS.push( + new Shape({ + z: i + SPOT_COUNT, + cx: + width * 0.7 + + random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) + + i * SPOT_SLANT, + cy: height - i * SPOT_RMAX * SPOT_Y_SPREAD, + rMin: vMin * 0.005, + rMax: SPOT_RMAX, + amp: SPOT_AMP, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, + animationSpeed: 0, + steepness: SPOT_EASE_STEEPNESS, + disappearTime: SPOT_DURATION, + }) + ); + } +} + +function windowResized() { + vMin = min(width, height); + vMax = max(width, height); + resizeCanvas(1080, 1920); + + setupBlobs(); + + // Intrinsically tied to the rMin of central blob + TEXT_SIZE = vMin * 0.075; + textSize(TEXT_SIZE); +} + +function setup() { + colorMode(HSL); + createCanvas(1080, 1920); + pixelDensity(1); + frameRate(EXPORT ? 4 : 30); + + PALETTE = { + new_dark: color("#1c2c3c"), + new_dark_line: color("#1c2c3c"), + new_blue: color("#293895"), + // sort: color("#0E0E0E"), + hvit: color("#FFFFFF"), + soloppgang: color("#FFB88D"), + // soloppgang_kontrast: color("#FF8034"), + // regn: color("#BCCEDD"), + // regn_kontrast: color("#7E9CB9"), + skyfritt: color("#B1E8FF"), + // skyfritt_kontrast: color("#43CBFF"), + // overskyet: color("#E7E7E7"), + // overskyet_kontrast: color("#CECECE"), + solnedgang: color("#FF9999"), + // solnedgang_kontrast: color("#FF5B5B"), + sol: color("#FFF2AD"), + sol_kontrast: color("#FFF02B"), + kveld: color("#E5B1FF"), + // kveld_kontrast: color("#8E24C9"), + // grønn: color("#A1F5E3"), + grønn_kontrast: color("#16DBC4"), + // natt: color("#6D7ABB"), + // natt_kontrast: color("#162365"), + }; + PALETTE.new_dark_line.setAlpha(0.75); + BG = PALETTE.sol; + + windowResized(); + setupBlobs(); + + textAlign(CENTER); + textFont("Newzald"); + + strokeWeight(STROKE_WEIGHT); + noStroke(); + strokeCap(PROJECT); +} + +function draw() { + /* Home-made helper function to select background based on config */ + background(BG); + + for (let b = 0; b < BLOBS.length; b++) { + const blob = BLOBS[b]; + blob.draw(); + } + + for (let s = 0; s < SPOTS.length; s++) { + const spot = SPOTS[s]; + spot.draw(); + } + + fill(PALETTE.hvit); + text("Frontend", width / 2, height / 2); + text("til frokost", width / 2, height / 2 + TEXT_SIZE); + + if (EXPORT) { + saveCanvas(frameCount.toString().padStart(3, "0"), "png"); + if (FRAME_LIMIT < frameCount) { + noLoop(); + } + } +} diff --git a/archive/fagdag/web.html b/archive/fagdag/web.html new file mode 100644 index 0000000..774d12e --- /dev/null +++ b/archive/fagdag/web.html @@ -0,0 +1,22 @@ + + + + + + + archive/fagdag/web + + + + + + diff --git a/archive/fagdag/web.js b/archive/fagdag/web.js new file mode 100644 index 0000000..fb9e6bb --- /dev/null +++ b/archive/fagdag/web.js @@ -0,0 +1,380 @@ +let vMax, vMin, TEXT_SIZE, PALETTE, BLOBS, SPOTS; + +const SHOW_TEXT = false; + +// How spiky the blobs are +const BLOB_AMP = 0.5; +const LINE_AMP = 0.75; +const SPOT_AMP = 0.5; + +// How steep the easing curve is, tends to push blobs to their rMin or rMax +const BLOB_EASE_STEEPNESS = 4; +const SPOT_EASE_STEEPNESS = 5; +const LINE_EASE_STEEPNESS = 2; + +// The speed at which blobs grow and shrink +const BLOB_ANIMATION_SPEED = 0.002; + +// The speed at which the blob rotates in perlin noise space, made more noticable by more spiky blobs +const ROTATION_SPEED = 0.002; + +// A rough representation of the number of vertices that make up a blob, lower value = more points +const MAX_POINT_DIST = 15; + +// The thickness of lines +const STROKE_WEIGHT = 2; + +const RANDOM_COLORS = false; + +const SPOT_COUNT = 40; +const SPOT_X_SPREAD = 7; +const SPOT_Y_SPREAD = 0.5; +const SPOT_SLANT = 2; +const SPOT_APPEAR_NOISE = 0.005; +const SPOT_DURATION = 500; // 0 means the spots will always be visible + +const MOVE_SPEED = 0.1; +const MOVE_RADIUS = 100; + +/* + Config end +*/ + +function easeInOutCool(steepness, x) { + const mappedX = map(x, 0, 1, -1, 1); + return (1 + Math.tanh(steepness * mappedX)) / 2; +} + +function randomColor() { + const keys = Object.keys(PALETTE); + return PALETTE[keys[(keys.length * Math.random()) << 0]]; +} + +class Shape { + constructor({ + z, + cx, + cy, + mrx = 0, + mry = 0, + mSpeed = 0, + mAngle = random(TWO_PI), + rMin, + rMax, + amp = BLOB_AMP, + fillColor, + aStart = 0, + aEnd = TWO_PI, + line = false, + animationSpeed = BLOB_ANIMATION_SPEED, + steepness = BLOB_EASE_STEEPNESS, + disappearTime = 0, + }) { + this.z = z; + this.cx = cx; + this.cy = cy; + this.mrx = mrx; + this.mry = mry; + this.mSpeed = mSpeed; + this.mAngle = mAngle; + this.rMin = rMin; + this.rMax = rMax; + this.amp = amp; + this.fillColor = fillColor; + this.aStart = aStart; + this.aEnd = aEnd; + this.line = line; + this.animationSpeed = animationSpeed; + this.steepness = steepness; + this.disappearTime = disappearTime; + this.visible = this.disappearTime === 0; + this.disappearTick = + noise(cx * SPOT_APPEAR_NOISE, cy * SPOT_APPEAR_NOISE) * + this.disappearTime * + (1 - cy / height); + } + + draw() { + if (this.disappearTime !== 0) { + this.disappearTick++; + if (this.disappearTick >= this.disappearTime) { + this.visible = !this.visible; + this.disappearTick = 0; + } + } + + if (!this.visible) { + return; + } + + if (this.line) { + stroke(PALETTE.new_dark_line); + noFill(); + } else { + fill(this.fillColor); + } + + // Might put all of this in the constructor + const pointCount = max((TWO_PI * this.rMax) / MAX_POINT_DIST, 30); + const deltaA = this.aEnd - this.aStart; + const amp = this.amp; + + const rotation = frameCount * ROTATION_SPEED; + this.mAngle = (this.mAngle + this.mSpeed) % TWO_PI; + + /* Iterate through a full circle of angles to draw a blob */ + beginShape(); + for (let a = this.aStart; a <= this.aEnd; a += deltaA / pointCount) { + // Get coordinates in the perlin noise space + const xOff = map(cos(a + rotation), -1, 1, 0, amp); + const yOff = map(sin(a + rotation), -1, 1, 0, amp); + + const noiseValue = noise( + xOff, + yOff, + this.z + frameCount * this.animationSpeed + ); + + const adjustedNoiseValue = easeInOutCool(this.steepness, noiseValue); + const noisedRadius = map(adjustedNoiseValue, 0, 1, this.rMin, this.rMax); + + /* Compute the final x and y and set a vertex there for the shape */ + const x = noisedRadius * cos(a); + const y = noisedRadius * sin(a); + + if (!this.line) { + const mx = this.mrx * cos(this.mAngle); + const my = this.mry * sin(this.mAngle); + vertex(this.cx + mx + x, this.cy + my + y); + } else { + vertex(this.cx + x, this.cy + y); + } + } + + if (line) { + endShape(); + noStroke(); + } else { + endShape(CLOSE); + } + } +} + +function setupBlobs() { + BLOBS = [ + new Shape({ + z: 10, + cx: 0, + cy: height * 0.9, + rMin: vMin * 0.1, + rMax: vMin * 0.4, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, + }), + new Shape({ + z: 20, + cx: width * 0.05, + cy: height * 0.2, + rMin: vMin * 0.25, + rMax: vMin * 0.5, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.kveld, + }), + new Shape({ + z: 30, + cx: 0, + cy: height * 0.5, + rMin: vMin * 0.1, + rMax: vMin * 0.3, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_dark, + }), + new Shape({ + z: 40, + cx: width * 0.8, + cy: height, + rMin: vMin * 0.1, + rMax: vMin * 0.3, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, + }), + new Shape({ + z: 50, + cx: width * 0.9, + cy: height * 0.75, + rMin: vMin * 0.2, + rMax: vMin * 0.4, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, + }), + new Shape({ + z: 60, + cx: width * 1, + cy: height * 0.5, + rMin: vMin * 0.2, + rMax: vMin * 0.5, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.grønn_kontrast, + }), + new Shape({ + z: 100, + cx: 0, + cy: 0, + rMin: vMin * 0.2, + rMax: vMin * 0.8, + aEnd: PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 200, + cx: width, + cy: height, + rMin: vMin * 0.25, + rMax: vMin * 0.45, + aStart: PI, + aEnd: PI + HALF_PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 300, + cx: width, + cy: height, + rMin: vMin * 0.35, + rMax: vMin * 0.55, + aStart: PI, + aEnd: PI + HALF_PI, + line: true, + amp: LINE_AMP, + steepness: LINE_EASE_STEEPNESS, + }), + new Shape({ + z: 1000, + cx: width / 2, + cy: height / 2, + rMin: vMin * 0.2, + rMax: vMin * 0.4, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, + }), + new Shape({ + z: 2000, + cx: width / 2, + cy: height / 2, + rMin: vMin * 0.25, + rMax: vMin * 0.45, + fillColor: PALETTE.new_dark, + }), + ]; + + SPOTS = []; + const SPOT_RMAX = vMin * 0.025; + for (let i = 0; i < SPOT_COUNT; i++) { + SPOTS.push( + new Shape({ + z: i, + cx: + width * 0.25 + + random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) - + i * SPOT_SLANT, + cy: i * SPOT_RMAX * SPOT_Y_SPREAD, + rMin: vMin * 0.005, + rMax: SPOT_RMAX, + amp: SPOT_AMP, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, + animationSpeed: 0, + steepness: SPOT_EASE_STEEPNESS, + disappearTime: SPOT_DURATION, + }) + ); + SPOTS.push( + new Shape({ + z: i + SPOT_COUNT, + cx: + width * 0.75 + + random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) + + i * SPOT_SLANT, + cy: height - i * SPOT_RMAX * SPOT_Y_SPREAD, + rMin: vMin * 0.005, + rMax: SPOT_RMAX, + amp: SPOT_AMP, + fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, + animationSpeed: 0, + steepness: SPOT_EASE_STEEPNESS, + disappearTime: SPOT_DURATION, + }) + ); + } +} + +function windowResized() { + vMin = min(width, height); + vMax = max(width, height); + resizeCanvas(windowWidth, round(windowWidth / 2.75)); + + setupBlobs(); + + // Intrinsically tied to the rMin of central blob + TEXT_SIZE = vMin * 0.1; + textSize(TEXT_SIZE); +} + +function setup() { + colorMode(HSL); + createCanvas(windowWidth, round(windowWidth / 2.75)); + + PALETTE = { + new_dark: color("#1c2c3c"), + new_dark_line: color("#1c2c3c"), + new_blue: color("#293895"), + // sort: color("#0E0E0E"), + hvit: color("#FFFFFF"), + soloppgang: color("#FFB88D"), + // soloppgang_kontrast: color("#FF8034"), + // regn: color("#BCCEDD"), + // regn_kontrast: color("#7E9CB9"), + skyfritt: color("#B1E8FF"), + // skyfritt_kontrast: color("#43CBFF"), + // overskyet: color("#E7E7E7"), + // overskyet_kontrast: color("#CECECE"), + solnedgang: color("#FF9999"), + // solnedgang_kontrast: color("#FF5B5B"), + sol: color("#FFF2AD"), + sol_kontrast: color("#FFF02B"), + kveld: color("#E5B1FF"), + // kveld_kontrast: color("#8E24C9"), + // grønn: color("#A1F5E3"), + grønn_kontrast: color("#16DBC4"), + // natt: color("#6D7ABB"), + // natt_kontrast: color("#162365"), + }; + PALETTE.new_dark_line.setAlpha(0.75); + BG = PALETTE.sol; + + windowResized(); + setupBlobs(); + + textAlign(CENTER); + textFont("Newzald"); + + strokeWeight(STROKE_WEIGHT); + noStroke(); + strokeCap(PROJECT); +} + +function draw() { + /* Home-made helper function to select background based on config */ + background(BG); + + for (let b = 0; b < BLOBS.length; b++) { + const blob = BLOBS[b]; + blob.draw(); + } + + for (let s = 0; s < SPOTS.length; s++) { + const spot = SPOTS[s]; + spot.draw(); + } + + if(SHOW_TEXT) { + fill(PALETTE.hvit); + text("Frontend", width / 2, height / 2); + text("til frokost", width / 2, height / 2 + TEXT_SIZE); + } +} diff --git a/doodles/city.ts b/doodles/city.ts deleted file mode 100644 index 76346f8..0000000 --- a/doodles/city.ts +++ /dev/null @@ -1,48 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; -import configBuilder, { baseSetup } from "../utils"; - -new p5((p: p5) => { - let bg: p5.Color, colors: any, frame: any; - - const c = configBuilder(p, { - palette: "monowild", - limit: 100, - min: 75, - max: 150, - }); - - p.setup = () => { - baseSetup(p, c); - bg = p.color(palettes[c.palette].bg); - colors = palettes[c.palette].colors.map((collie: any) => p.color(collie)); - p.background(bg); - - frame = 0; - p.loop(); - }; - - p.draw = () => { - drawTower(); - - frame++; - console.log(frame); - if (frame == c.limit) { - p.noLoop(); - } - }; - - const drawTower = () => { - const color = p.random(colors as p5.Color[]); - const x = p.random(p.width); - const y = p.random(p.height * 0.1, p.height); - const w = p.random(c.min, c.max); - const h = p.height - y; - - for (let i = y; i < p.height; i++) { - const stroke = p.lerpColor(color, bg, i / h); - p.stroke(stroke); - p.line(x, i, x + w, i); - } - }; -}); diff --git a/doodles/dots.ts b/doodles/dots.ts deleted file mode 100644 index 540d7d5..0000000 --- a/doodles/dots.ts +++ /dev/null @@ -1,80 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - let COLORS: any, BG: p5.Color; - - const EXPORT = false; - - const PALETTE_NAME = "termos"; - - const STROKE_WEIGHT = 5; - - const ROWS = 15; - const COLS = 40; - const PAD = 200; - const ZOOM = 0.05; - const LINE = true; - const GRADIENT = true; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - if (EXPORT) p.pixelDensity(1); - if (EXPORT) p.frameRate(4); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: any) => p.color(col)); - BG = p.color(PALETTE.bg); - - p.noStroke(); - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - - p.background(BG); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - }; - - p.draw = () => { - p.background(BG); - - const ul = p.color(p.random(360), 100, 75); - const ur = p.color(p.random(360), 100, 75); - const ll = p.color(p.random(360), 100, 75); - const lr = p.color(p.random(360), 100, 75); - - for (let r = 0; r < ROWS; r++) { - for (let c = 0; c < COLS; c++) { - p.stroke(p.random(COLORS)); - const x = PAD + (c / (COLS - 1)) * (p.width - PAD * 2); - const y = PAD + (r / (ROWS - 1)) * (p.height - PAD * 2); - - const randy = 8 * p.noise(x * ZOOM, y * ZOOM); - - if (GRADIENT) { - const u = p.lerpColor(ul, ur, x / (p.width - PAD * 2)); - const l = p.lerpColor(ll, lr, x / (p.width - PAD * 2)); - p.stroke(p.lerpColor(u, l, y / (p.height - PAD * 2))); - } - - if (LINE) { - p.line(x, y, x, y - randy * STROKE_WEIGHT * 1.5); - } else { - for (let z = 0; z < randy; z++) { - const realy = y - z * (STROKE_WEIGHT * 1.5); - p.point(x, realy); - } - } - } - } - p.noLoop(); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/doodles/flow.ts b/doodles/flow.ts deleted file mode 100644 index 570b207..0000000 --- a/doodles/flow.ts +++ /dev/null @@ -1,118 +0,0 @@ -import p5 from "p5"; -import { createNoise2D, createNoise3D } from "simplex-noise"; -import { palettes } from "../palettes"; - -const { bg, colors } = palettes["genesis"]; -const C = colors.length; - -// Separate noise instances so field, speed, and color are fully independent -const fieldNoise = createNoise3D(); -const spdNoise = createNoise3D(); -const colorNoise = createNoise2D(); - -new p5((p: p5) => { - const INK_COUNT = 2500; - const ERASER_COUNT = 500; - const NOISE_SCALE = 0.001; - const VELOCITY_SCALE = 500; - const TIME_STEP = 0.000375; - - interface Strand { - x: number; - y: number; - px: number; - py: number; - age: number; - life: number; - ci: number; - eraser: boolean; - } - - const strands: Strand[] = []; - let t = 0; - - function curl(x: number, y: number): [number, number] { - const n = (dx: number, dy: number) => - fieldNoise((x + dx) * NOISE_SCALE, (y + dy) * NOISE_SCALE, t); - const dndy = (n(0, 1) - n(0, -1)) / 2; - const dndx = (n(1, 0) - n(-1, 0)) / 2; - return [dndy * VELOCITY_SCALE, -dndx * VELOCITY_SCALE]; - } - - function make(aged = false, eraser = false): Strand { - const x = p.random(p.width); - const y = p.random(p.height); - const life = 120 + p.random(180); - return { - x, - y, - px: x, - py: y, - age: aged ? p.random(life) : 0, - life, - // map simplex [-1,1] → [0, C] - ci: ((colorNoise(x * 0.005, y * 0.005) + 1) / 2) * C, - eraser, - }; - } - - p.setup = () => { - const canvas = p.createCanvas(1080, 1080); - canvas.style("max-width", "calc(100vmin - 200px)"); - canvas.style("max-height", "calc(100vmin - 200px)"); - canvas.mouseClicked(() => p.saveCanvas(`flow-${Date.now()}`, "png")); - p.background(bg); - document.body.style.background = bg; - for (let i = 0; i < INK_COUNT; i++) strands.push(make(true, false)); - for (let i = 0; i < ERASER_COUNT; i++) strands.push(make(true, true)); - }; - - p.draw = () => { - t += TIME_STEP; - - for (const s of strands) { - s.age++; - - if (s.age > s.life) { - Object.assign(s, make(false, s.eraser)); - continue; - } - - const [vx, vy] = curl(s.x, s.y); - // map simplex [-1,1] → speed range [0.4, 1.8] - const spd = p.map(spdNoise(s.x * 0.002, s.y * 0.002, t * 0.4), -1, 1, 0.4, 1.8); - - s.px = s.x; - s.py = s.y; - s.x += vx * spd; - s.y += vy * spd; - - const oob = s.x < -10 || s.x > p.width + 10 || s.y < -10 || s.y > p.height + 10; - if (oob) { - Object.assign(s, make(false, s.eraser)); - continue; - } - - const env = Math.sin(p.map(s.age, 0, s.life, 0, Math.PI)); - - if (s.eraser) { - // weight envelope: grows from 0 → 8 → 0, no abrupt pop-in - p.stroke(bg); - p.strokeWeight(5 + env * 5); - p.line(s.px, s.py, s.x, s.y); - continue; - } - - s.ci = (s.ci + 0.004) % C; - - const i0 = Math.floor(s.ci) % C; - const i1 = (i0 + 1) % C; - const col = p.lerpColor(p.color(colors[i0]), p.color(colors[i1]), s.ci % 1); - col.setAlpha(env * 255); - - p.stroke(col); - p.strokeWeight(5 + env * 5); - p.line(s.px, s.py, s.x, s.y); - } - }; -}); diff --git a/doodles/flow3d.ts b/doodles/flow3d.ts deleted file mode 100644 index c30d81b..0000000 --- a/doodles/flow3d.ts +++ /dev/null @@ -1,178 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -const { bg, colors } = palettes["genesis"]; -const C = colors.length; - -new p5((p: p5) => { - const STRAND_COUNT = 100; - const TRAIL_LEN = 20; - const ORBIT_SPEED = 10; - const SOFTENING = 10; - const SPHERE_R = 200; - const LIFE = 1000; - const STROKE_WEIGHT = 5; - - // Pre-computed constant — r is conserved by the cross-product velocity - const OMEGA = ORBIT_SPEED / (SPHERE_R + SOFTENING); - - interface TrailPoint { - x: number; - y: number; - z: number; - } - - interface Strand { - x: number; - y: number; - z: number; - nx: number; - ny: number; - nz: number; - trail: TrailPoint[]; - trailHead: number; - trailSize: number; - age: number; - ci: number; - } - - // Pre-computed RGB palette — avoids p5 Color allocations in the hot loop - let rgbColors: [number, number, number][] = []; - - const strands: Strand[] = []; - - function velocity( - x: number, - y: number, - z: number, - nx: number, - ny: number, - nz: number, - ): [number, number, number] { - return [(ny * z - nz * y) * OMEGA, (nz * x - nx * z) * OMEGA, (nx * y - ny * x) * OMEGA]; - } - - function randomOnSphere(scale: number): [number, number, number] { - const theta = p.random(0, Math.PI * 2); - const phi = Math.acos(p.random(-1, 1)); - return [ - scale * Math.sin(phi) * Math.cos(theta), - scale * Math.sin(phi) * Math.sin(theta), - scale * Math.cos(phi), - ]; - } - - function makeStrand(aged = false): Strand { - const [x, y, z] = randomOnSphere(p.random(SPHERE_R / 2, SPHERE_R)); - const [nx, ny, nz] = randomOnSphere(1); - - // Pre-allocate all trail slots as reusable objects — no per-frame allocation - const trail: TrailPoint[] = Array.from({ length: TRAIL_LEN }, () => ({ x: 0, y: 0, z: 0 })); - trail[0].x = x; - trail[0].y = y; - trail[0].z = z; - - return { - x, - y, - z, - nx, - ny, - nz, - trail, - trailHead: 1, - trailSize: 1, - age: aged ? p.random(LIFE) : 0, - ci: p.random(C), - }; - } - - function resetStrand(s: Strand): void { - const [x, y, z] = randomOnSphere(p.random(SPHERE_R / 2, SPHERE_R)); - const [nx, ny, nz] = randomOnSphere(1); - s.x = x; - s.y = y; - s.z = z; - s.nx = nx; - s.ny = ny; - s.nz = nz; - s.trail[0].x = x; - s.trail[0].y = y; - s.trail[0].z = z; - s.trailHead = 1; - s.trailSize = 1; - s.age = 0; - s.ci = p.random(C); - } - - p.setup = () => { - const canvas = p.createCanvas(1080, 1080, p.WEBGL); - canvas.style("max-width", "calc(100vmin - 200px)"); - canvas.style("max-height", "calc(100vmin - 200px)"); - p.noFill(); - document.body.style.background = bg; - - // Pre-compute RGB values once at setup - rgbColors = colors.map((c) => { - const col = p.color(c); - return [p.red(col), p.green(col), p.blue(col)]; - }); - - for (let i = 0; i < STRAND_COUNT; i++) strands.push(makeStrand(true)); - }; - - p.keyPressed = () => { - if (p.key === "s" || p.key === "S") p.saveCanvas(`flow-3d-${Date.now()}`, "png"); - }; - - p.draw = () => { - p.background(bg); - p.orbitControl(2, 2, 0.1); - - for (const s of strands) { - s.age++; - - const [vx, vy, vz] = velocity(s.x, s.y, s.z, s.nx, s.ny, s.nz); - s.x += vx; - s.y += vy; - s.z += vz; - - // Write into the existing slot object — no allocation - const slot = s.trail[s.trailHead]; - slot.x = s.x; - slot.y = s.y; - slot.z = s.z; - s.trailHead = (s.trailHead + 1) % TRAIL_LEN; - s.trailSize = Math.min(s.trailSize + 1, TRAIL_LEN); - - if (s.age > LIFE) { - resetStrand(s); - continue; - } - if (s.trailSize < 4) continue; - - s.ci = (s.ci + 0.003) % C; - - const i0 = Math.floor(s.ci) % C; - const i1 = (i0 + 1) % C; - const t = s.ci % 1; - - // Inline lerp — avoids p5 Color allocation - const r = rgbColors[i0][0] + (rgbColors[i1][0] - rgbColors[i0][0]) * t; - const g = rgbColors[i0][1] + (rgbColors[i1][1] - rgbColors[i0][1]) * t; - const b = rgbColors[i0][2] + (rgbColors[i1][2] - rgbColors[i0][2]) * t; - - p.stroke(r, g, b); - p.strokeWeight(STROKE_WEIGHT); - - // Draw segments from circular buffer in chronological order - for (let i = 0; i < s.trailSize - 1; i++) { - const ai = (s.trailHead - s.trailSize + i + TRAIL_LEN) % TRAIL_LEN; - const bi = (ai + 1) % TRAIL_LEN; - const a = s.trail[ai]; - const b2 = s.trail[bi]; - p.line(a.x, a.y, a.z, b2.x, b2.y, b2.z); - } - } - }; -}); diff --git a/doodles/gridwalker.ts b/doodles/gridwalker.ts deleted file mode 100644 index 28c8f8f..0000000 --- a/doodles/gridwalker.ts +++ /dev/null @@ -1,215 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - let COLORS: any, STROKE: any, BG: p5.Color; - - const EXPORT = false; - - const PALETTE_NAME = "termos"; - - const STROKE_WEIGHT = 0; - const OPACITY = 1; - - const PADDING = 0; - const SIZE = 10; - - const gridX = 64; - const gridY = gridX * 1.25; - const gridZ = 5; - - const DECAY = 0.02; - const WALKER_COUNT = 50; - - const RANDOM_COLORS = true; - const CIRCULAR = true; - - class Walker { - x: number; - y: number; - constructor(x: number, y: number) { - this.x = x; - this.y = y; - } - - update() { - const xMove = p.random([-1, 0, 1]); - const yMove = p.random([-1, 0, 1]); - this.x = this.x + xMove; - this.y = this.y + yMove; - - if (this.x < 0) { - this.x = gridX - 1; - } else if (this.x == gridX) { - this.x = 0; - } - - if (this.y < 0) { - this.y = gridY - 1; - } else if (this.y == gridY) { - this.y = 0; - } - } - } - - class Cell { - color: any; - value: number; - x: number; - y: number; - z: number; - constructor(x: number, y: number, color: any) { - this.color = color; - this.value = 0; - this.x = x; - this.y = y; - this.z = 0; - } - } - - class Grid { - g: Cell[][]; - constructor(x1: number, y1: number, x2: number, y2: number, colors: any[]) { - const g: Cell[][] = []; - for (let y = 0; y < gridY; y++) { - const row: Cell[] = []; - for (let x = 0; x < gridX; x++) { - const xAmt = x / (gridX - 1); - const yAmt = y / (gridY - 1); - - const xRange = x2 - x1 - SIZE; - const yRange = y2 - y1 - SIZE; - - const xCoordinate = x1 + xAmt * xRange + SIZE / 2; - const yCoordinate = y1 + yAmt * yRange + SIZE / 2; - - const color = colors[Math.floor(Math.random() * colors.length)]; - row.push(new Cell(xCoordinate, yCoordinate, color)); - } - g.push(row); - } - this.g = g; - } - - draw() { - for (let y = 0; y < this.g.length; y++) { - const r = this.g[y]; - for (let x = 0; x < r.length; x++) { - const c = r[x]; - if (c.value > 0) { - this.decrementCell(x, y); - - const fillAmt = c.z / gridZ; - - const coleur = p.color( - p.hue(p.lerpColor(BG, c.color, 1)), - p.saturation(p.lerpColor(BG, c.color, fillAmt)), - p.lightness(p.lerpColor(BG, c.color, fillAmt)), - ); - - p.fill(coleur); - - if (CIRCULAR) p.circle(c.x, c.y, SIZE); - else p.rect(c.x, c.y, SIZE); - } - } - } - } - - incrementCell(x: number, y: number) { - const cell = this.g[y][x]; - if (cell.value < gridZ) { - cell.value++; - } - } - - decrementCell(x: number, y: number) { - const cell = this.g[y][x]; - if (cell.value > 0) { - cell.value -= DECAY; - cell.z = p.round(cell.value); - } else if (cell.value < 0) { - cell.value = 0; - } - } - } - - let g: any = {}; - const walkers: Walker[] = []; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - if (EXPORT) p.pixelDensity(1); - if (EXPORT) p.frameRate(4); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: any) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - STROKE = p.random(COLORS); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.background(BG); - - g = new Grid( - PADDING, - PADDING, - p.width - PADDING, - p.height - PADDING, - RANDOM_COLORS ? COLORS : [p.random(COLORS)], - ); - - for (let i = 0; i < WALKER_COUNT; i++) { - walkers.push(new Walker(p.floor(p.random(gridX)), p.floor(p.random(gridY)))); - } - - p.rectMode(p.CENTER); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - }; - - let _x = 0; - let _y = 0; - - p.draw = () => { - g.draw(); - - for (let i = 0; i < walkers.length; i++) { - const w = walkers[i]; - g.incrementCell(w.x, w.y); - w.update(); - } - - /* - g.incrementCell(x, y); - g.incrementCell(x, y); - g.incrementCell(x, y); - g.incrementCell(x, y); - g.incrementCell(x, y); - g.incrementCell(x, y); - g.incrementCell(x, y); - g.incrementCell(x, y); - - if (x < gridX - 1) { - x++; - } else { - x = 0; - if (y < gridY - 1) { - y++; - } else { - y = 0; - } - } - */ - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/doodles/palettes.ts b/doodles/palettes.ts deleted file mode 100644 index 670ec64..0000000 --- a/doodles/palettes.ts +++ /dev/null @@ -1,37 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 2000); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - p.noStroke(); - - const entries = Object.entries(palettes); - let index = 0; - for (const [_name, palette] of entries) { - p.fill((palette as any).bg); - const ydiff = p.height / entries.length; - const y = index * ydiff; - p.rect(0, y, p.width, ydiff); - for (let i = 0; i < (palette as any).colors.length; i++) { - const coleur = (palette as any).colors[i]; - const xdiff = p.width / ((palette as any).colors.length + 1); - const x = xdiff * 0.5 + i * xdiff; - p.fill(coleur); - p.rect(x, y + ydiff * 0.25, xdiff, ydiff / 2); - } - index++; - } - }; - - p.draw = () => { - p.noLoop(); - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/doodles/perlinzoom.ts b/doodles/perlinzoom.ts deleted file mode 100644 index 9ab239b..0000000 --- a/doodles/perlinzoom.ts +++ /dev/null @@ -1,37 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - const pixellation = 4; - - p.setup = () => { - p.pixelDensity(1); - p.createCanvas(1440, 810); - p.noStroke(); - }; - - p.draw = () => { - drawNoise(0, 0, p.width / 2, p.height / 2, 0.004); - drawNoise(p.width / 2, 0, p.width, p.height / 2, 0.008); - drawNoise(0, p.height / 2, p.width / 2, p.height, 0.016); - drawNoise(p.width / 2, p.height / 2, p.width, p.height, 0.032); - p.stroke("red"); - - p.strokeWeight(4); - p.noFill(); - p.rect(0, 0, p.width / 2, p.height / 2); - p.rect(p.width / 2, 0, p.width / 4, p.height / 4); - p.rect(0, p.height / 2, p.width / 8, p.height / 8); - p.rect(p.width / 2, p.height / 2, p.width / 16, p.height / 16); - p.noLoop(); - }; - - const drawNoise = (x1: number, y1: number, x2: number, y2: number, zoom: number) => { - for (let x = 0; x < x2; x += pixellation) { - for (let y = 0; y < y2; y += pixellation) { - const c = 255 * p.noise(zoom * x, zoom * y); - p.fill(c); - p.rect(x1 + x, y1 + y, pixellation, pixellation); - } - } - }; -}); diff --git a/doodles/pleasures.ts b/doodles/pleasures.ts deleted file mode 100644 index a350b6a..0000000 --- a/doodles/pleasures.ts +++ /dev/null @@ -1,65 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - let palette: any; - let colors: any; - let colors_bg: any; - - const PALETTE_NAME = "termos"; - - const STROKE_WEIGHT = 1; - const WAVE_COUNT = 100; - const PADDING = 200; - const AMP = 100; - const TIGHTNESS = 150; - const EVO = 0.01; - - let z = 0; - - let WAVE_COLORS: any[] = []; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke("white"); - - for (let i = 0; i < WAVE_COUNT; i++) { - WAVE_COLORS.push(p.random(colors)); - } - }; - - p.draw = () => { - z += EVO; - p.background(colors_bg); - - let a = 0; - - for (let y = PADDING; y < p.height - PADDING; y += p.height / WAVE_COUNT) { - p.beginShape(); - p.fill(WAVE_COLORS[a]); - for (let x = PADDING; x < p.width - PADDING; x += 5) { - let noisebois = p.noise(x * 0.01, y * 0.01, z) * AMP; - let yohann = Math.exp(-1 * ((x - p.width / 2) / TIGHTNESS) ** 2); - const yNew = y - noisebois * yohann; - p.vertex(x, yNew); - } - p.endShape(p.CLOSE); - a += 1; - } - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/doodles/shadow.ts b/doodles/shadow.ts deleted file mode 100644 index 9ba3a24..0000000 --- a/doodles/shadow.ts +++ /dev/null @@ -1,75 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; -import configBuilder, { baseSetup, ConfigValue } from "../utils"; - -new p5((p: p5) => { - let bg: string, colors: string[]; - - const c = configBuilder(p, { - palette: "sirkul", - padding: new ConfigValue({ value: 0.25, min: 0, max: 1, step: 0.005 }), - diameter: 50, - limit: 250, - fillAmp: new ConfigValue({ value: 1, min: 1, max: 1.25, step: 0.005 }), - shadowAmp: new ConfigValue({ value: 1.025, min: 1, max: 1.25, step: 0.005 }), - outline: false, - outlineAmp: new ConfigValue({ value: 1.05, min: 1, max: 1.25, step: 0.005 }), - outlineOffset: new ConfigValue({ value: 1.1, min: 1, max: 2, step: 0.05 }), - outlineWeight: 2, - seed: p.random(10000), - }); - - const getCoords = ({ r, a }: { r: number; a: number }, amp: number) => { - const ramp = r * amp; - return { - x: ramp * p.cos(a), - y: ramp * p.sin(a), - }; - }; - - p.setup = () => { - baseSetup(p, c); - - bg = palettes[c.palette].bg; - colors = palettes[c.palette].colors; - p.background(bg); - p.strokeWeight(c.diameter); - p.noFill(); - - /* Now for the actual action */ - let coords: { r: number; a: number }[] = []; - p.translate(p.width / 2, p.height / 2); - const rmax = (p.max(p.width, p.height) / 2) * (1 - c.padding); - - /* Shadow */ - p.stroke("#222"); - for (let i = 0; i < c.limit; i++) { - coords.push({ - r: p.random(-rmax, rmax), - a: p.random(p.TAU), - }); - const { x, y } = getCoords(coords[i], c.shadowAmp); - p.point(x, y); - } - - /* Outline */ - if (c.outline) { - p.strokeWeight(c.outlineWeight); - for (let i = 0; i < c.limit; i++) { - p.stroke(colors[i % colors.length]); - const { x, y } = getCoords(coords[i], c.outlineAmp); - p.circle(x, y, c.diameter * c.outlineOffset); - } - } - - /* Fill */ - p.noStroke(); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = 2; - (p.drawingContext as CanvasRenderingContext2D).shadowColor = "black"; - for (let i = 0; i < c.limit; i++) { - p.fill(colors[i % colors.length]); - const { x, y } = getCoords(coords[i], c.fillAmp); - p.circle(x, y, c.diameter); - } - }; -}); diff --git a/doodles/spin.ts b/doodles/spin.ts deleted file mode 100644 index a8512fa..0000000 --- a/doodles/spin.ts +++ /dev/null @@ -1,66 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - let COLORS: any, STROKE: any, BG: p5.Color; - - const EXPORT = false; - - const PALETTE_NAME = "termos"; - - const STROKE_WEIGHT = 1; - const OPACITY = 1; - - const COUNT = 100; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - if (EXPORT) p.pixelDensity(1); - if (EXPORT) p.frameRate(4); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: any) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - STROKE = p.random(COLORS); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.background(BG); - - p.rectMode(p.CENTER); - p.stroke("white"); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - const angie = (p.frameCount * p.TWO_PI) / -50000; - p.rotate(angie); - p.background(BG); - p.fill("white"); - p.rect(0, 0, 80); - - const collie = p.color(p.hue(BG), p.saturation(BG), p.lightness(BG), 0.001); - p.fill(collie); - p.rect(0, 0, 100); - - for (let i = 1; i < COUNT; i++) { - const a = p.TWO_PI / COUNT; - p.rotate(a + angie); - p.rect(0, 0, 100 + ((p.height * 1.5) / COUNT) * i); - } - - // p.beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/doodles/spindots.ts b/doodles/spindots.ts deleted file mode 100644 index 8c62646..0000000 --- a/doodles/spindots.ts +++ /dev/null @@ -1,60 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - let palette: any; - let _colors: any; - let colors_bg: any; - - const PALETTE_NAME = "pastella"; - - const STROKE_WEIGHT = 7.5; - const RING_COUNT = 10; - const BALL_COUNT = 20; - const RADIUS = 400; - const SPEED = 0.25; - - // const ANGLE_STEP = 1; - - let ticker = 0; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - _colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.noFill(); - p.colorMode(p.HSL); - (p as any).angleMode((p as any).DEGREES); - p.strokeWeight(STROKE_WEIGHT); - }; - - p.draw = () => { - ticker++; - p.translate(p.width / 2, p.height / 2); - p.background(colors_bg); - - for (let r = 1; r <= RING_COUNT; r++) { - for (let b = 1; b <= BALL_COUNT; b++) { - p.strokeWeight(STROKE_WEIGHT * r ** 0.5); - p.stroke((360 / BALL_COUNT) * b, 75, 75); - const a = ((b / r ** 0.5) * SPEED * ticker) % 360; - const x = (RADIUS / RING_COUNT) * r * p.cos(a); - const y = (RADIUS / RING_COUNT) * r * p.sin(a); - p.point(x, y); - //p.strokeWeight(2); - //p.circle(x, y, 200); - } - } - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/doodles/spiral.ts b/doodles/spiral.ts deleted file mode 100644 index afd2f1d..0000000 --- a/doodles/spiral.ts +++ /dev/null @@ -1,91 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - let palette: any; - let colors: any; - let colors_bg: any; - - const PALETTE_NAME = "pastella"; - - const threads: any[] = []; - let collie: any; - - const STROKE_WEIGHT = 4; - const THREAD_COUNT = 16; - const RADIUS_SPREAD = STROKE_WEIGHT * 1.5; - let ANGLE_DIFF = 1; - const OPACITY_DIFF = 0.015; - - const RADIUS_DIFF = 0.003 * RADIUS_SPREAD * THREAD_COUNT; - - let ticker = 0; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - (p as any).angleMode((p as any).DEGREES); - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - - for (let t = 0; t < THREAD_COUNT; t++) { - collie = p.random(colors); - //collie = colors[t % colors.length]; - - threads.push({ - radius: t * RADIUS_SPREAD, - angle: 0, - prevX: 0, - prevY: 0, - opacity: OPACITY_DIFF * (THREAD_COUNT - t), - color: collie, - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - - ticker += 0.03; - let noyze = p.noise(ticker); - noyze *= RADIUS_DIFF * 5; - noyze *= p.random(-1, 1); - - for (let t = 0; t < threads.length; t++) { - const thread = threads[t]; - - const prevX = thread["prevX"]; - const prevY = thread["prevY"]; - const x = thread["radius"] * p.cos(thread["angle"]); - const y = thread["radius"] * p.sin(thread["angle"]); - - thread["radius"] += RADIUS_DIFF + noyze; - thread["angle"] += ANGLE_DIFF; - let opacity = thread["opacity"] + OPACITY_DIFF * (THREAD_COUNT - t); - - thread["prevX"] = x; - thread["prevY"] = y; - thread["opacity"] = opacity; - - const cololo = p.color(thread["color"]); - cololo.setAlpha(opacity * 255); - thread["color"] = cololo; - p.stroke(cololo); - p.line(prevX, prevY, x, y); - //p.point(x, y); - } - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/doodles/swirl.ts b/doodles/swirl.ts deleted file mode 100644 index 70c44ba..0000000 --- a/doodles/swirl.ts +++ /dev/null @@ -1,67 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; - -new p5((p: p5) => { - let PALETTE: any; - let COLORS: any; - let BG: p5.Color; - let STROKE: any; - - const PALETTE_NAME = "pastella"; // symmeblu, termos, vintage, pastella - - const STROKE_WEIGHT = 2; - - const COUNT = 7; - const LOOPS = 1; - const ANGLE_STEP = Math.PI / 100; - const spirals: any[] = []; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - PALETTE = palettes[PALETTE_NAME]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - const offset = p.round(p.random(COLORS.length - 1)); - for (let i = 0; i < COUNT; i++) { - spirals.push({ - x: p.width * 0.5, - y: (-0 * (p.height * ANGLE_STEP)) / p.TWO_PI / LOOPS, - a: 0, - step: p.random(ANGLE_STEP * 0.75, ANGLE_STEP), - color: COLORS[(offset + i) % COLORS.length], - }); - } - }; - - p.draw = () => { - p.beginShape((p as any).TRIANGLE_FAN); - for (let i = 0; i < spirals.length; i++) { - const s = spirals[i]; - s.a += s.step * (i + 1); - s.y += (p.height * s.step) / p.TWO_PI / LOOPS; - s.x += 10 * p.cos(s.a); - drawSpiral(s); - } - p.endShape(); - }; - - const drawSpiral = (s: any) => { - p.stroke(s.color); - p.vertex(s.x, s.y); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/doodles/towers.ts b/doodles/towers.ts deleted file mode 100644 index 61e32f0..0000000 --- a/doodles/towers.ts +++ /dev/null @@ -1,108 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../palettes"; -import configBuilder, { baseSetup, ConfigValue } from "../utils"; - -new p5((p: p5) => { - let bg: string, colors: string[], frame: number, scales: p5.Color[][]; - - const c = configBuilder(p, { - palette: "onom", - limit: new ConfigValue({ value: 100, min: 1, max: 100, step: 1 }), - minWidth: new ConfigValue({ value: 75, min: 50, max: 100, step: 5 }), - maxWidth: new ConfigValue({ value: 150, min: 100, max: 200, step: 5 }), - padding: new ConfigValue({ value: 0, min: 0, max: 0.5, step: 0.05 }), - grainy: true, - strokeWeight: new ConfigValue({ value: 1, min: 0.1, max: 5, step: 0.1 }), - pointSpacing: new ConfigValue({ value: 2, min: 1, max: 5, step: 0.1 }), - specks: new ConfigValue({ value: 20000, min: 0, max: 20000, step: 100 }), - angleChance: new ConfigValue({ value: 0.25, min: 0, max: 1, step: 0.05 }), - }); - - p.setup = () => { - baseSetup(p, c); - bg = palettes[c.palette].bg; - colors = palettes[c.palette].colors; - p.strokeWeight(c.strokeWeight); - - scales = []; - for (let i = 0; i < colors.length; i++) { - const color = colors[i]; - const li = []; - for (let l = 0; l < p.height; l++) { - li.push(p.lerpColor(p.color(color), p.color(bg), l / p.height)); - } - scales.push(li); - } - - drawBackground(); - - frame = 0; - p.loop(); - }; - - p.draw = () => { - drawTower(); - - frame++; - if (frame >= c.limit) { - drawSpecks(true); - p.noLoop(); - } - }; - - const drawTower = () => { - const scale = p.random(scales); - const w = p.random(c.minWidth, c.maxWidth); - const x = p.random(-w, p.width); - const y = p.random(p.height * c.padding, p.height - p.height * c.padding); - const h = p.height - y; - - const isAngled = p.random() < c.angleChance; - const angleUpwards = p.random([true, false]); - - for (let i = 0; i < h; i++) { - p.stroke(scale[i]); - - const chance = i / h; - if (c.grainy) { - for (let j = 0; j < w; j += c.strokeWeight * c.pointSpacing) { - if (p.random() > chance) { - if (isAngled) { - if (angleUpwards && w - i < j) p.point(x + j, y + i); - if (!angleUpwards && i > j) p.point(x + j, y + i); - } else { - p.point(x + j, y + i); - } - } - } - } else { - if (isAngled) { - if (i < w) { - if (angleUpwards) p.line(x + w - i, y + i, x + w, y + i); - if (!angleUpwards) p.line(x, y + i, x + i, y + i); - } else { - p.line(x, y + i, x + w, y + i); - } - } else { - p.line(x, y + i, x + w, y + i); - } - } - } - }; - - const drawBackground = () => { - p.background(bg); - drawSpecks(false); - }; - - const drawSpecks = (contrast: boolean) => { - for (let i = 0; i < c.specks; i++) { - const scale = p.random(scales); - const collie = contrast ? p.color(bg) : scale[p.round(i / c.specks)]; - p.stroke(collie); - const x = p.random(p.width); - const y = p.random(p.height); - p.point(x, y); - } - }; -}); diff --git a/index.html b/index.html index a1088ec..47f6a17 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,32 @@ - + + Generative Processing - - + + + - + +
+ +
+
+ Instagram + GitHub +
+ diff --git a/main.ts b/main.ts deleted file mode 100644 index ac78a2d..0000000 --- a/main.ts +++ /dev/null @@ -1,77 +0,0 @@ -/// - -export {}; - -type SketchLoader = () => Promise; - -const allModules = import.meta.glob(["./sketches/**/*.ts", "./doodles/**/*.ts"]); - -const EXCLUDE = new Set(["utils"]); - -const sketches = Object.fromEntries( - Object.entries(allModules) - .filter(([path]) => { - const name = path.split("/").pop()!.replace(".ts", ""); - return !EXCLUDE.has(name); - }) - .map(([path, mod]) => [path.replace(/^\.\//, "").replace(/\.ts$/, ""), mod]), -); - -const params = new URLSearchParams(location.search); -const sketchParam = params.get("s"); - -if (sketchParam && sketches[sketchParam]) { - document.body.classList.add("sketch"); - - await sketches[sketchParam](); - - const back = document.createElement("a"); - back.href = "/"; - back.textContent = "← back"; - back.className = "back-link"; - document.body.appendChild(back); -} else { - renderPicker(); -} - -function renderPicker() { - const groups = new Map(); - - for (const path of Object.keys(sketches)) { - const parts = path.split("/"); - const name = parts.pop()!; - const dir = parts.join("/"); - if (!groups.has(dir)) groups.set(dir, []); - groups.get(dir)!.push(name); - } - - const sorted = [...groups.entries()].sort(([a], [b]) => a.localeCompare(b)); - - const groups_html = sorted - .map(([dir, names]) => { - const label = formatGroupLabel(dir); - const links = names - .slice() - .sort() - .map((n) => `${n}`) - .join(""); - return `
-
${label}
-
${links}
-
`; - }) - .join(""); - - document.body.innerHTML = `

generative processing

${groups_html}`; -} - -function formatGroupLabel(dir: string): string { - // sketches/v1/circleseed → v1 / circleseed - // doodles → doodles - // archive/article → archive / article - const parts = dir.replace(/^sketches\//, "").split("/"); - if (parts.length === 1) return `${parts[0]}`; - const prefix = parts.slice(0, -1).join(" / "); - const last = parts[parts.length - 1]; - return `${prefix} / ${last}`; -} diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index c97c5a1..0000000 --- a/package-lock.json +++ /dev/null @@ -1,2153 +0,0 @@ -{ - "name": "generative-processing", - "version": "1.0.0", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "name": "generative-processing", - "version": "1.0.0", - "license": "ISC", - "dependencies": { - "p5": "^2.2.3", - "simplex-noise": "^4.0.3", - "tweakpane": "^4.0.5" - }, - "devDependencies": { - "vite-plus": "latest" - } - }, - "node_modules/@babel/runtime": { - "version": "7.29.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz", - "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==", - "license": "MIT", - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@davepagurek/bezier-path": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/@davepagurek/bezier-path/-/bezier-path-0.0.7.tgz", - "integrity": "sha512-CVlnCOrV1iy4Z12T756i9l4G6kF7r8uhlnb+xqDemAMmWQB+8Q0b+8VEqIiUfywgZDSiDr18Rm7pZlnA69rE8Q==", - "license": "MIT" - }, - "node_modules/@japont/unicode-range": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@japont/unicode-range/-/unicode-range-1.0.0.tgz", - "integrity": "sha512-BckHvA2XdjRBVAWe2uceNuRf78lBeI28kyWEbfr/Q2pE17POkwuZ6WWY/UMv8FL9iBxhW4xfDoNLM9UVZaTeUQ==", - "license": "MIT" - }, - "node_modules/@oxc-project/runtime": { - "version": "0.121.0", - "resolved": "https://registry.npmjs.org/@oxc-project/runtime/-/runtime-0.121.0.tgz", - "integrity": "sha512-p0bQukD8OEHxzY4T9OlANBbEFGnOnjo1CYi50HES7OD36UO2yPh6T+uOJKLtlg06eclxroipRCpQGMpeH8EJ/g==", - "dev": true, - "license": "MIT", - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxc-project/types": { - "version": "0.122.0", - "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.122.0.tgz", - "integrity": "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==", - "dev": true, - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/Boshen" - } - }, - "node_modules/@oxfmt/binding-android-arm-eabi": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm-eabi/-/binding-android-arm-eabi-0.42.0.tgz", - "integrity": "sha512-dsqPTYsozeokRjlrt/b4E7Pj0z3eS3Eg74TWQuuKbjY4VttBmA88rB7d50Xrd+TZ986qdXCNeZRPEzZHAe+jow==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-android-arm64": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-android-arm64/-/binding-android-arm64-0.42.0.tgz", - "integrity": "sha512-t+aAjHxcr5eOBphFHdg1ouQU9qmZZoRxnX7UOJSaTwSoKsb6TYezNKO0YbWytGXCECObRqNcUxPoPr0KaraAIg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-darwin-arm64": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-darwin-arm64/-/binding-darwin-arm64-0.42.0.tgz", - "integrity": "sha512-ulpSEYMKg61C5bRMZinFHrKJYRoKGVbvMEXA5zM1puX3O9T6Q4XXDbft20yrDijpYWeuG59z3Nabt+npeTsM1A==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-darwin-x64": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-darwin-x64/-/binding-darwin-x64-0.42.0.tgz", - "integrity": "sha512-ttxLKhQYPdFiM8I/Ri37cvqChE4Xa562nNOsZFcv1CKTVLeEozXjKuYClNvxkXmNlcF55nzM80P+CQkdFBu+uQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-freebsd-x64": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-freebsd-x64/-/binding-freebsd-x64-0.42.0.tgz", - "integrity": "sha512-Og7QS3yI3tdIKYZ58SXik0rADxIk2jmd+/YvuHRyKULWpG4V2fR5V4hvKm624Mc0cQET35waPXiCQWvjQEjwYQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-arm-gnueabihf": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.42.0.tgz", - "integrity": "sha512-jwLOw/3CW4H6Vxcry4/buQHk7zm9Ne2YsidzTL1kpiMe4qqrRCwev3dkyWe2YkFmP+iZCQ7zku4KwjcLRoh8ew==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-arm-musleabihf": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.42.0.tgz", - "integrity": "sha512-XwXu2vkMtiq2h7tfvN+WA/9/5/1IoGAVCFPiiQUvcAuG3efR97KNcRGM8BetmbYouFotQ2bDal3yyjUx6IPsTg==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-arm64-gnu": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.42.0.tgz", - "integrity": "sha512-ea7s/XUJoT7ENAtUQDudFe3nkSM3e3Qpz4nJFRdzO2wbgXEcjnchKLEsV3+t4ev3r8nWxIYr9NRjPWtnyIFJVA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-arm64-musl": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.42.0.tgz", - "integrity": "sha512-+JA0YMlSdDqmacygGi2REp57c3fN+tzARD8nwsukx9pkCHK+6DkbAA9ojS4lNKsiBjIW8WWa0pBrBWhdZEqfuw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-ppc64-gnu": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.42.0.tgz", - "integrity": "sha512-VfnET0j4Y5mdfCzh5gBt0NK28lgn5DKx+8WgSMLYYeSooHhohdbzwAStLki9pNuGy51y4I7IoW8bqwAaCMiJQg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-riscv64-gnu": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.42.0.tgz", - "integrity": "sha512-gVlCbmBkB0fxBWbhBj9rcxezPydsQHf4MFKeHoTSPicOQ+8oGeTQgQ8EeesSybWeiFPVRx3bgdt4IJnH6nOjAA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-riscv64-musl": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.42.0.tgz", - "integrity": "sha512-zN5OfstL0avgt/IgvRu0zjQzVh/EPkcLzs33E9LMAzpqlLWiPWeMDZyMGFlSRGOdDjuNmlZBCgj0pFnK5u32TQ==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-s390x-gnu": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.42.0.tgz", - "integrity": "sha512-9X6+H2L0qMc2sCAgO9HS03bkGLMKvOFjmEdchaFlany3vNZOjnVui//D8k/xZAtQv2vaCs1reD5KAgPoIU4msA==", - "cpu": [ - "s390x" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-x64-gnu": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.42.0.tgz", - "integrity": "sha512-BajxJ6KQvMMdpXGPWhBGyjb2Jvx4uec0w+wi6TJZ6Tv7+MzPwe0pO8g5h1U0jyFgoaF7mDl6yKPW3ykWcbUJRw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-linux-x64-musl": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-linux-x64-musl/-/binding-linux-x64-musl-0.42.0.tgz", - "integrity": "sha512-0wV284I6vc5f0AqAhgAbHU2935B4bVpncPoe5n/WzVZY/KnHgqxC8iSFGeSyLWEgstFboIcWkOPck7tqbdHkzA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-openharmony-arm64": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-openharmony-arm64/-/binding-openharmony-arm64-0.42.0.tgz", - "integrity": "sha512-p4BG6HpGnhfgHk1rzZfyR6zcWkE7iLrWxyehHfXUy4Qa5j3e0roglFOdP/Nj5cJJ58MA3isQ5dlfkW2nNEpolw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openharmony" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-win32-arm64-msvc": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.42.0.tgz", - "integrity": "sha512-mn//WV60A+IetORDxYieYGAoQso4KnVRRjORDewMcod4irlRe0OSC7YPhhwaexYNPQz/GCFk+v9iUcZ2W22yxQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-win32-ia32-msvc": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.42.0.tgz", - "integrity": "sha512-3gWltUrvuz4LPJXWivoAxZ28Of2O4N7OGuM5/X3ubPXCEV8hmgECLZzjz7UYvSDUS3grfdccQwmjynm+51EFpw==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxfmt/binding-win32-x64-msvc": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/@oxfmt/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.42.0.tgz", - "integrity": "sha512-Wg4TMAfQRL9J9AZevJ/ZNy3uyyDztDYQtGr4P8UyyzIhLhFrdSmz1J/9JT+rv0fiCDLaFOBQnj3f3K3+a5PzDQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint-tsgolint/darwin-arm64": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@oxlint-tsgolint/darwin-arm64/-/darwin-arm64-0.17.3.tgz", - "integrity": "sha512-5aDl4mxXWs+Bj02pNrX6YY6v9KMZjLIytXoqolLEo0dfBNVeZUonZgJAa/w0aUmijwIRrBhxEzb42oLuUtfkGw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@oxlint-tsgolint/darwin-x64": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@oxlint-tsgolint/darwin-x64/-/darwin-x64-0.17.3.tgz", - "integrity": "sha512-gPBy4DS5ueCgXzko20XsNZzDe/Cxde056B+QuPLGvz05CGEAtmRfpImwnyY2lAXXjPL+SmnC/OYexu8zI12yHQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@oxlint-tsgolint/linux-arm64": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@oxlint-tsgolint/linux-arm64/-/linux-arm64-0.17.3.tgz", - "integrity": "sha512-+pkunvCfB6pB0G9qHVVXUao3nqzXQPo4O3DReIi+5nGa+bOU3J3Srgy+Zb8VyOL+WDsSMJ+U7+r09cKHWhz3hg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@oxlint-tsgolint/linux-x64": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@oxlint-tsgolint/linux-x64/-/linux-x64-0.17.3.tgz", - "integrity": "sha512-/kW5oXtBThu4FjmgIBthdmMjWLzT3M1TEDQhxDu7hQU5xDeTd60CDXb2SSwKCbue9xu7MbiFoJu83LN0Z/d38g==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@oxlint-tsgolint/win32-arm64": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@oxlint-tsgolint/win32-arm64/-/win32-arm64-0.17.3.tgz", - "integrity": "sha512-NMELRvbz4Ed4dxg8WiqZxtu3k4OJEp2B9KInZW+BMfqEqbwZdEJY83tbqz2hD1EjKO2akrqBQ0GpRUJEkd8kKw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@oxlint-tsgolint/win32-x64": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@oxlint-tsgolint/win32-x64/-/win32-x64-0.17.3.tgz", - "integrity": "sha512-+pJ7r8J3SLPws5uoidVplZc8R/lpKyKPE6LoPGv9BME00Y1VjT6jWGx/dtUN8PWvcu3iTC6k+8u3ojFSJNmWTg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@oxlint/binding-android-arm-eabi": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.57.0.tgz", - "integrity": "sha512-C7EiyfAJG4B70496eV543nKiq5cH0o/xIh/ufbjQz3SIvHhlDDsyn+mRFh+aW8KskTyUpyH2LGWL8p2oN6bl1A==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-android-arm64": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.57.0.tgz", - "integrity": "sha512-9i80AresjZ/FZf5xK8tKFbhQnijD4s1eOZw6/FHUwD59HEZbVLRc2C88ADYJfLZrF5XofWDiRX/Ja9KefCLy7w==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-darwin-arm64": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.57.0.tgz", - "integrity": "sha512-0eUfhRz5L2yKa9I8k3qpyl37XK3oBS5BvrgdVIx599WZK63P8sMbg+0s4IuxmIiZuBK68Ek+Z+gcKgeYf0otsg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-darwin-x64": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.57.0.tgz", - "integrity": "sha512-UvrSuzBaYOue+QMAcuDITe0k/Vhj6KZGjfnI6x+NkxBTke/VoM7ZisaxgNY0LWuBkTnd1OmeQfEQdQ48fRjkQg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-freebsd-x64": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.57.0.tgz", - "integrity": "sha512-wtQq0dCoiw4bUwlsNVDJJ3pxJA218fOezpgtLKrbQqUtQJcM9yP8z+I9fu14aHg0uyAxIY+99toL6uBa2r7nxA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-arm-gnueabihf": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.57.0.tgz", - "integrity": "sha512-qxFWl2BBBFcT4djKa+OtMdnLgoHEJXpqjyGwz8OhW35ImoCwR5qtAGqApNYce5260FQqoAHW8S8eZTjiX67Tsg==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-arm-musleabihf": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.57.0.tgz", - "integrity": "sha512-SQoIsBU7J0bDW15/f0/RvxHfY3Y0+eB/caKBQtNFbuerTiA6JCYx9P1MrrFTwY2dTm/lMgTSgskvCEYk2AtG/Q==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-arm64-gnu": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.57.0.tgz", - "integrity": "sha512-jqxYd1W6WMeozsCmqe9Rzbu3SRrGTyGDAipRlRggetyYbUksJqJKvUNTQtZR/KFoJPb+grnSm5SHhdWrywv3RQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-arm64-musl": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.57.0.tgz", - "integrity": "sha512-i66WyEPVEvq9bxRUCJ/MP5EBfnTDN3nhwEdFZFTO5MmLLvzngfWEG3NSdXQzTT3vk5B9i6C2XSIYBh+aG6uqyg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-ppc64-gnu": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.57.0.tgz", - "integrity": "sha512-oMZDCwz4NobclZU3pH+V1/upVlJZiZvne4jQP+zhJwt+lmio4XXr4qG47CehvrW1Lx2YZiIHuxM2D4YpkG3KVA==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-riscv64-gnu": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.57.0.tgz", - "integrity": "sha512-uoBnjJ3MMEBbfnWC1jSFr7/nSCkcQYa72NYoNtLl1imshDnWSolYCjzb8LVCwYCCfLJXD+0gBLD7fyC14c0+0g==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-riscv64-musl": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.57.0.tgz", - "integrity": "sha512-BdrwD7haPZ8a9KrZhKJRSj6jwCor+Z8tHFZ3PT89Y3Jq5v3LfMfEePeAmD0LOTWpiTmzSzdmyw9ijneapiVHKQ==", - "cpu": [ - "riscv64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-s390x-gnu": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.57.0.tgz", - "integrity": "sha512-BNs+7ZNsRstVg2tpNxAXfMX/Iv5oZh204dVyb8Z37+/gCh+yZqNTlg6YwCLIMPSk5wLWIGOaQjT0GUOahKYImw==", - "cpu": [ - "s390x" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-x64-gnu": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.57.0.tgz", - "integrity": "sha512-AghS18w+XcENcAX0+BQGLiqjpqpaxKJa4cWWP0OWNLacs27vHBxu7TYkv9LUSGe5w8lOJHeMxcYfZNOAPqw2bg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-linux-x64-musl": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.57.0.tgz", - "integrity": "sha512-E/FV3GB8phu/Rpkhz5T96hAiJlGzn91qX5yj5gU754P5cmVGXY1Jw/VSjDSlZBCY3VHjsVLdzgdkJaomEmcNOg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-openharmony-arm64": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.57.0.tgz", - "integrity": "sha512-xvZ2yZt0nUVfU14iuGv3V25jpr9pov5N0Wr28RXnHFxHCRxNDMtYPHV61gGLhN9IlXM96gI4pyYpLSJC5ClLCQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openharmony" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-win32-arm64-msvc": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.57.0.tgz", - "integrity": "sha512-Z4D8Pd0AyHBKeazhdIXeUUy5sIS3Mo0veOlzlDECg6PhRRKgEsBJCCV1n+keUZtQ04OP+i7+itS3kOykUyNhDg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-win32-ia32-msvc": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.57.0.tgz", - "integrity": "sha512-StOZ9nFMVKvevicbQfql6Pouu9pgbeQnu60Fvhz2S6yfMaii+wnueLnqQ5I1JPgNF0Syew4voBlAaHD13wH6tw==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@oxlint/binding-win32-x64-msvc": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.57.0.tgz", - "integrity": "sha512-6PuxhYgth8TuW0+ABPOIkGdBYw+qYGxgIdXPHSVpiCDm+hqTTWCmC739St1Xni0DJBt8HnSHTG67i1y6gr8qrA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@polka/url": { - "version": "1.0.0-next.29", - "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz", - "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==", - "dev": true, - "license": "MIT" - }, - "node_modules/@standard-schema/spec": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", - "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==", - "dev": true, - "license": "MIT" - }, - "node_modules/@types/chai": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz", - "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/deep-eql": "*", - "assertion-error": "^2.0.1" - } - }, - "node_modules/@types/deep-eql": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz", - "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==", - "dev": true, - "license": "MIT" - }, - "node_modules/@voidzero-dev/vite-plus-core": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-core/-/vite-plus-core-0.1.14.tgz", - "integrity": "sha512-CCWzdkfW0fo0cQNlIsYp5fOuH2IwKuPZEb2UY2Z8gXcp5pG74A82H2Pthj0heAuvYTAnfT7kEC6zM+RbiBgQbg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@oxc-project/runtime": "=0.121.0", - "@oxc-project/types": "=0.122.0", - "lightningcss": "^1.30.2", - "postcss": "^8.5.6" - }, - "engines": { - "node": "^20.19.0 || >=22.12.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.3" - }, - "peerDependencies": { - "@arethetypeswrong/core": "^0.18.1", - "@tsdown/css": "0.21.4", - "@tsdown/exe": "0.21.4", - "@types/node": "^20.19.0 || >=22.12.0", - "@vitejs/devtools": "^0.1.0", - "esbuild": "^0.27.0", - "jiti": ">=1.21.0", - "less": "^4.0.0", - "publint": "^0.3.0", - "sass": "^1.70.0", - "sass-embedded": "^1.70.0", - "stylus": ">=0.54.8", - "sugarss": "^5.0.0", - "terser": "^5.16.0", - "tsx": "^4.8.1", - "typescript": "^5.0.0", - "unplugin-unused": "^0.5.0", - "yaml": "^2.4.2" - }, - "peerDependenciesMeta": { - "@arethetypeswrong/core": { - "optional": true - }, - "@tsdown/css": { - "optional": true - }, - "@tsdown/exe": { - "optional": true - }, - "@types/node": { - "optional": true - }, - "@vitejs/devtools": { - "optional": true - }, - "esbuild": { - "optional": true - }, - "jiti": { - "optional": true - }, - "less": { - "optional": true - }, - "publint": { - "optional": true - }, - "sass": { - "optional": true - }, - "sass-embedded": { - "optional": true - }, - "stylus": { - "optional": true - }, - "sugarss": { - "optional": true - }, - "terser": { - "optional": true - }, - "tsx": { - "optional": true - }, - "typescript": { - "optional": true - }, - "unplugin-unused": { - "optional": true - }, - "yaml": { - "optional": true - } - } - }, - "node_modules/@voidzero-dev/vite-plus-darwin-arm64": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-darwin-arm64/-/vite-plus-darwin-arm64-0.1.14.tgz", - "integrity": "sha512-q2ESUSbapwsxVRe/KevKATahNRraoX5nti3HT9S3266OHT5sMroBY14jaxTv74ekjQc9E6EPhyLGQWuWQuuBRw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@voidzero-dev/vite-plus-darwin-x64": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-darwin-x64/-/vite-plus-darwin-x64-0.1.14.tgz", - "integrity": "sha512-UpcDZc9G99E/4HDRoobvYHxMvFOG5uv3RwEcq0HF70u4DsnEMl1z8RaJLeWV7a09LGwj9Q+YWC3Z4INWnTLs8g==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@voidzero-dev/vite-plus-linux-arm64-gnu": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-linux-arm64-gnu/-/vite-plus-linux-arm64-gnu-0.1.14.tgz", - "integrity": "sha512-GIjn35RABUEDB9gHD26nRq7T72Te+Qy2+NIzogwEaUE728PvPkatF5gMCeF4sigCoc8c4qxDwsG+A2A2LYGnDg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@voidzero-dev/vite-plus-linux-arm64-musl": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-linux-arm64-musl/-/vite-plus-linux-arm64-musl-0.1.14.tgz", - "integrity": "sha512-qo2RToGirG0XCcxZ2AEOuonLM256z6dNbJzDDIo5gWYA+cIKigFQJbkPyr25zsT1tsP2aY0OTxt2038XbVlRkQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@voidzero-dev/vite-plus-linux-x64-gnu": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-linux-x64-gnu/-/vite-plus-linux-x64-gnu-0.1.14.tgz", - "integrity": "sha512-BsMWKZfdfGcYLxxLyaePpg6NW54xqzzcfq8sFUwKfwby0kgOKQ4WymUXyBvO9nnBb0ZPsJQrV0sx+Onac/LTaw==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@voidzero-dev/vite-plus-linux-x64-musl": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-linux-x64-musl/-/vite-plus-linux-x64-musl-0.1.14.tgz", - "integrity": "sha512-mOrEpj7ntW9RopGbcOYG/L0pOs0qHzUG4Vz7NXbuf4dbOSlY4JjyoMOIWxjKQORQht02Hzuf8YrMGNwa6AjVSQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@voidzero-dev/vite-plus-test": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-test/-/vite-plus-test-0.1.14.tgz", - "integrity": "sha512-rjF+qpYD+5+THOJZ3gbE3+cxsk5sW7nJ0ODK7y6ZKeS4amREUMedEDYykzKBwR7OZDC/WwE90A0iLWCr6qAXhA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@standard-schema/spec": "^1.1.0", - "@types/chai": "^5.2.2", - "@voidzero-dev/vite-plus-core": "0.1.14", - "es-module-lexer": "^1.7.0", - "obug": "^2.1.1", - "pixelmatch": "^7.1.0", - "pngjs": "^7.0.0", - "sirv": "^3.0.2", - "std-env": "^4.0.0", - "tinybench": "^2.9.0", - "tinyexec": "^1.0.2", - "tinyglobby": "^0.2.15", - "ws": "^8.18.3" - }, - "engines": { - "node": "^20.0.0 || ^22.0.0 || >=24.0.0" - }, - "peerDependencies": { - "@edge-runtime/vm": "*", - "@opentelemetry/api": "^1.9.0", - "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", - "@vitest/ui": "4.1.1", - "happy-dom": "*", - "jsdom": "*", - "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" - }, - "peerDependenciesMeta": { - "@edge-runtime/vm": { - "optional": true - }, - "@opentelemetry/api": { - "optional": true - }, - "@types/node": { - "optional": true - }, - "@vitest/ui": { - "optional": true - }, - "happy-dom": { - "optional": true - }, - "jsdom": { - "optional": true - }, - "vite": { - "optional": false - } - } - }, - "node_modules/@voidzero-dev/vite-plus-test/node_modules/ws": { - "version": "8.20.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz", - "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": ">=5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, - "node_modules/@voidzero-dev/vite-plus-win32-arm64-msvc": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-win32-arm64-msvc/-/vite-plus-win32-arm64-msvc-0.1.14.tgz", - "integrity": "sha512-7iC+Ig+8D/zACy0IJf7w/vQ7duTjux9Ttmm3KOBdVWH4dl3JihydA7+SQVMhz71a4WiqJ6nPidoG8D6hUP4MVQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/@voidzero-dev/vite-plus-win32-x64-msvc": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-win32-x64-msvc/-/vite-plus-win32-x64-msvc-0.1.14.tgz", - "integrity": "sha512-yRJ/8yAYFluNHx0Ej6Kevx65MIeM3wFKklnxosVZRlz2ZRL1Ea1Qh3tWATr3Ipk1ciRxBv8KJgp6zXqjxtZSoQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": "^20.19.0 || >=22.12.0" - } - }, - "node_modules/acorn": { - "version": "8.16.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", - "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", - "license": "MIT", - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-walk": { - "version": "8.3.5", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz", - "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==", - "license": "MIT", - "dependencies": { - "acorn": "^8.11.0" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/assertion-error": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", - "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - } - }, - "node_modules/cac": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/cac/-/cac-7.0.0.tgz", - "integrity": "sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=20.19.0" - } - }, - "node_modules/colorjs.io": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.6.1.tgz", - "integrity": "sha512-8lyR2wHzuIykCpqHKgluGsqQi5iDm3/a2IgP2GBZrasn2sBRkE4NOGsglZxWLs/jZQoNkmA/KM/8NV16rLUdBg==", - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/color" - } - }, - "node_modules/cross-spawn": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", - "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", - "dev": true, - "license": "MIT", - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/detect-libc": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", - "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=8" - } - }, - "node_modules/es-module-lexer": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz", - "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==", - "dev": true, - "license": "MIT" - }, - "node_modules/escodegen": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz", - "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==", - "license": "BSD-2-Clause", - "dependencies": { - "esprima": "^4.0.1", - "estraverse": "^5.2.0", - "esutils": "^2.0.2" - }, - "bin": { - "escodegen": "bin/escodegen.js", - "esgenerate": "bin/esgenerate.js" - }, - "engines": { - "node": ">=6.0" - }, - "optionalDependencies": { - "source-map": "~0.6.1" - } - }, - "node_modules/esprima": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", - "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", - "license": "BSD-2-Clause", - "bin": { - "esparse": "bin/esparse.js", - "esvalidate": "bin/esvalidate.js" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/estraverse": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", - "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", - "license": "BSD-2-Clause", - "engines": { - "node": ">=4.0" - } - }, - "node_modules/esutils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "license": "BSD-2-Clause", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/gifenc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/gifenc/-/gifenc-1.0.3.tgz", - "integrity": "sha512-xdr6AdrfGBcfzncONUOlXMBuc5wJDtOueE3c5rdG0oNgtINLD+f2iFZltrBRZYzACRbKr+mSVU/x98zv2u3jmw==", - "license": "MIT" - }, - "node_modules/i18next": { - "version": "19.9.2", - "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.9.2.tgz", - "integrity": "sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.0" - } - }, - "node_modules/i18next-browser-languagedetector": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-4.3.1.tgz", - "integrity": "sha512-KIToAzf8zwWvacgnRwJp63ase26o24AuNUlfNVJ5YZAFmdGhsJpmFClxXPuk9rv1FMI4lnc8zLSqgZPEZMrW4g==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.5.5" - } - }, - "node_modules/isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "dev": true, - "license": "ISC" - }, - "node_modules/libtess": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/libtess/-/libtess-1.2.2.tgz", - "integrity": "sha512-Nps8HPeVVcsmJxUvFLKVJcCgcz+1ajPTXDVAVPs6+giOQP4AHV31uZFFkh+CKow/bkB7GbZWKmwmit7myaqDSw==", - "license": "SGI-B-2.0" - }, - "node_modules/lightningcss": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", - "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", - "dev": true, - "license": "MPL-2.0", - "dependencies": { - "detect-libc": "^2.0.3" - }, - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - }, - "optionalDependencies": { - "lightningcss-android-arm64": "1.32.0", - "lightningcss-darwin-arm64": "1.32.0", - "lightningcss-darwin-x64": "1.32.0", - "lightningcss-freebsd-x64": "1.32.0", - "lightningcss-linux-arm-gnueabihf": "1.32.0", - "lightningcss-linux-arm64-gnu": "1.32.0", - "lightningcss-linux-arm64-musl": "1.32.0", - "lightningcss-linux-x64-gnu": "1.32.0", - "lightningcss-linux-x64-musl": "1.32.0", - "lightningcss-win32-arm64-msvc": "1.32.0", - "lightningcss-win32-x64-msvc": "1.32.0" - } - }, - "node_modules/lightningcss-android-arm64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", - "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-darwin-arm64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", - "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-darwin-x64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", - "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-freebsd-x64": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", - "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm-gnueabihf": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", - "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-gnu": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", - "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-arm64-musl": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", - "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-gnu": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", - "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-linux-x64-musl": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", - "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-win32-arm64-msvc": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", - "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/lightningcss-win32-x64-msvc": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", - "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MPL-2.0", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/mrmime": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz", - "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - } - }, - "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "bin": { - "nanoid": "bin/nanoid.cjs" - }, - "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" - } - }, - "node_modules/obug": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz", - "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==", - "dev": true, - "funding": [ - "https://github.com/sponsors/sxzz", - "https://opencollective.com/debug" - ], - "license": "MIT" - }, - "node_modules/omggif": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.10.tgz", - "integrity": "sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==", - "license": "MIT" - }, - "node_modules/oxfmt": { - "version": "0.42.0", - "resolved": "https://registry.npmjs.org/oxfmt/-/oxfmt-0.42.0.tgz", - "integrity": "sha512-QhejGErLSMReNuZ6vxgFHDyGoPbjTRNi6uGHjy0cvIjOQFqD6xmr/T+3L41ixR3NIgzcNiJ6ylQKpvShTgDfqg==", - "dev": true, - "license": "MIT", - "dependencies": { - "tinypool": "2.1.0" - }, - "bin": { - "oxfmt": "bin/oxfmt" - }, - "engines": { - "node": "^20.19.0 || >=22.12.0" - }, - "funding": { - "url": "https://github.com/sponsors/Boshen" - }, - "optionalDependencies": { - "@oxfmt/binding-android-arm-eabi": "0.42.0", - "@oxfmt/binding-android-arm64": "0.42.0", - "@oxfmt/binding-darwin-arm64": "0.42.0", - "@oxfmt/binding-darwin-x64": "0.42.0", - "@oxfmt/binding-freebsd-x64": "0.42.0", - "@oxfmt/binding-linux-arm-gnueabihf": "0.42.0", - "@oxfmt/binding-linux-arm-musleabihf": "0.42.0", - "@oxfmt/binding-linux-arm64-gnu": "0.42.0", - "@oxfmt/binding-linux-arm64-musl": "0.42.0", - "@oxfmt/binding-linux-ppc64-gnu": "0.42.0", - "@oxfmt/binding-linux-riscv64-gnu": "0.42.0", - "@oxfmt/binding-linux-riscv64-musl": "0.42.0", - "@oxfmt/binding-linux-s390x-gnu": "0.42.0", - "@oxfmt/binding-linux-x64-gnu": "0.42.0", - "@oxfmt/binding-linux-x64-musl": "0.42.0", - "@oxfmt/binding-openharmony-arm64": "0.42.0", - "@oxfmt/binding-win32-arm64-msvc": "0.42.0", - "@oxfmt/binding-win32-ia32-msvc": "0.42.0", - "@oxfmt/binding-win32-x64-msvc": "0.42.0" - } - }, - "node_modules/oxlint": { - "version": "1.57.0", - "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.57.0.tgz", - "integrity": "sha512-DGFsuBX5MFZX9yiDdtKjTrYPq45CZ8Fft6qCltJITYZxfwYjVdGf/6wycGYTACloauwIPxUnYhBVeZbHvleGhw==", - "dev": true, - "license": "MIT", - "bin": { - "oxlint": "bin/oxlint" - }, - "engines": { - "node": "^20.19.0 || >=22.12.0" - }, - "funding": { - "url": "https://github.com/sponsors/Boshen" - }, - "optionalDependencies": { - "@oxlint/binding-android-arm-eabi": "1.57.0", - "@oxlint/binding-android-arm64": "1.57.0", - "@oxlint/binding-darwin-arm64": "1.57.0", - "@oxlint/binding-darwin-x64": "1.57.0", - "@oxlint/binding-freebsd-x64": "1.57.0", - "@oxlint/binding-linux-arm-gnueabihf": "1.57.0", - "@oxlint/binding-linux-arm-musleabihf": "1.57.0", - "@oxlint/binding-linux-arm64-gnu": "1.57.0", - "@oxlint/binding-linux-arm64-musl": "1.57.0", - "@oxlint/binding-linux-ppc64-gnu": "1.57.0", - "@oxlint/binding-linux-riscv64-gnu": "1.57.0", - "@oxlint/binding-linux-riscv64-musl": "1.57.0", - "@oxlint/binding-linux-s390x-gnu": "1.57.0", - "@oxlint/binding-linux-x64-gnu": "1.57.0", - "@oxlint/binding-linux-x64-musl": "1.57.0", - "@oxlint/binding-openharmony-arm64": "1.57.0", - "@oxlint/binding-win32-arm64-msvc": "1.57.0", - "@oxlint/binding-win32-ia32-msvc": "1.57.0", - "@oxlint/binding-win32-x64-msvc": "1.57.0" - }, - "peerDependencies": { - "oxlint-tsgolint": ">=0.15.0" - }, - "peerDependenciesMeta": { - "oxlint-tsgolint": { - "optional": true - } - } - }, - "node_modules/oxlint-tsgolint": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/oxlint-tsgolint/-/oxlint-tsgolint-0.17.3.tgz", - "integrity": "sha512-1eh4bcpOMw0e7+YYVxmhFc2mo/V6hJ2+zfukqf+GprvVn3y94b69M/xNrYLmx5A+VdYe0i/bJ2xOs6Hp/jRmRA==", - "dev": true, - "license": "MIT", - "bin": { - "tsgolint": "bin/tsgolint.js" - }, - "optionalDependencies": { - "@oxlint-tsgolint/darwin-arm64": "0.17.3", - "@oxlint-tsgolint/darwin-x64": "0.17.3", - "@oxlint-tsgolint/linux-arm64": "0.17.3", - "@oxlint-tsgolint/linux-x64": "0.17.3", - "@oxlint-tsgolint/win32-arm64": "0.17.3", - "@oxlint-tsgolint/win32-x64": "0.17.3" - } - }, - "node_modules/p5": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/p5/-/p5-2.2.3.tgz", - "integrity": "sha512-jz9uy0k3Fcj9vKSOafQlIrpaPZZjO4rAEBZF6dGkbokisshP0M3aFm4qtLHYCoEW1XJSkFaVaOMILCQAQxUHHA==", - "license": "LGPL-2.1", - "dependencies": { - "@davepagurek/bezier-path": "^0.0.7", - "@japont/unicode-range": "^1.0.0", - "acorn": "^8.15.0", - "acorn-walk": "^8.3.4", - "colorjs.io": "^0.6.0", - "escodegen": "^2.1.0", - "gifenc": "^1.0.3", - "i18next": "^19.0.2", - "i18next-browser-languagedetector": "^4.0.1", - "libtess": "^1.2.2", - "omggif": "^1.0.10", - "pako": "^2.1.0", - "zod": "^4.2.1" - } - }, - "node_modules/pako": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", - "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==", - "license": "(MIT AND Zlib)" - }, - "node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/picocolors": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", - "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", - "dev": true, - "license": "ISC" - }, - "node_modules/pixelmatch": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-7.1.0.tgz", - "integrity": "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==", - "dev": true, - "license": "ISC", - "dependencies": { - "pngjs": "^7.0.0" - }, - "bin": { - "pixelmatch": "bin/pixelmatch" - } - }, - "node_modules/pngjs": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz", - "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=14.19.0" - } - }, - "node_modules/postcss": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz", - "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "nanoid": "^3.3.11", - "picocolors": "^1.1.1", - "source-map-js": "^1.2.1" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "license": "MIT", - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/simplex-noise": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/simplex-noise/-/simplex-noise-4.0.3.tgz", - "integrity": "sha512-qSE2I4AngLQG7BXqoZj51jokT4WUXe8mOBrvfOXpci8+6Yu44+/dD5zqDpOx3Ux792eamTd2lLcI8jqFntk/lg==", - "license": "MIT" - }, - "node_modules/sirv": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz", - "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==", - "dev": true, - "license": "MIT", - "dependencies": { - "@polka/url": "^1.0.0-next.24", - "mrmime": "^2.0.0", - "totalist": "^3.0.0" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "license": "BSD-3-Clause", - "optional": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/source-map-js": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", - "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/std-env": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.0.0.tgz", - "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==", - "dev": true, - "license": "MIT" - }, - "node_modules/tinybench": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", - "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", - "dev": true, - "license": "MIT" - }, - "node_modules/tinyexec": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz", - "integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=18" - } - }, - "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "fdir": "^6.5.0", - "picomatch": "^4.0.3" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/SuperchupuDev" - } - }, - "node_modules/tinyglobby/node_modules/fdir": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", - "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12.0.0" - }, - "peerDependencies": { - "picomatch": "^3 || ^4" - }, - "peerDependenciesMeta": { - "picomatch": { - "optional": true - } - } - }, - "node_modules/tinyglobby/node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/tinypool": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-2.1.0.tgz", - "integrity": "sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==", - "dev": true, - "license": "MIT", - "engines": { - "node": "^20.0.0 || >=22.0.0" - } - }, - "node_modules/totalist": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", - "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, - "node_modules/tweakpane": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-4.0.5.tgz", - "integrity": "sha512-rxEXdSI+ArlG1RyO6FghC4ZUX8JkEfz8F3v1JuteXSV0pEtHJzyo07fcDG+NsJfN5L39kSbCYbB9cBGHyuI/tQ==", - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/cocopon" - } - }, - "node_modules/vite": { - "name": "@voidzero-dev/vite-plus-core", - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/@voidzero-dev/vite-plus-core/-/vite-plus-core-0.1.14.tgz", - "integrity": "sha512-CCWzdkfW0fo0cQNlIsYp5fOuH2IwKuPZEb2UY2Z8gXcp5pG74A82H2Pthj0heAuvYTAnfT7kEC6zM+RbiBgQbg==", - "dev": true, - "license": "MIT", - "peer": true, - "dependencies": { - "@oxc-project/runtime": "=0.121.0", - "@oxc-project/types": "=0.122.0", - "lightningcss": "^1.30.2", - "postcss": "^8.5.6" - }, - "engines": { - "node": "^20.19.0 || >=22.12.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.3" - }, - "peerDependencies": { - "@arethetypeswrong/core": "^0.18.1", - "@tsdown/css": "0.21.4", - "@tsdown/exe": "0.21.4", - "@types/node": "^20.19.0 || >=22.12.0", - "@vitejs/devtools": "^0.1.0", - "esbuild": "^0.27.0", - "jiti": ">=1.21.0", - "less": "^4.0.0", - "publint": "^0.3.0", - "sass": "^1.70.0", - "sass-embedded": "^1.70.0", - "stylus": ">=0.54.8", - "sugarss": "^5.0.0", - "terser": "^5.16.0", - "tsx": "^4.8.1", - "typescript": "^5.0.0", - "unplugin-unused": "^0.5.0", - "yaml": "^2.4.2" - }, - "peerDependenciesMeta": { - "@arethetypeswrong/core": { - "optional": true - }, - "@tsdown/css": { - "optional": true - }, - "@tsdown/exe": { - "optional": true - }, - "@types/node": { - "optional": true - }, - "@vitejs/devtools": { - "optional": true - }, - "esbuild": { - "optional": true - }, - "jiti": { - "optional": true - }, - "less": { - "optional": true - }, - "publint": { - "optional": true - }, - "sass": { - "optional": true - }, - "sass-embedded": { - "optional": true - }, - "stylus": { - "optional": true - }, - "sugarss": { - "optional": true - }, - "terser": { - "optional": true - }, - "tsx": { - "optional": true - }, - "typescript": { - "optional": true - }, - "unplugin-unused": { - "optional": true - }, - "yaml": { - "optional": true - } - } - }, - "node_modules/vite-plus": { - "version": "0.1.14", - "resolved": "https://registry.npmjs.org/vite-plus/-/vite-plus-0.1.14.tgz", - "integrity": "sha512-p4pWlpZZNiEsHxPWNdeIU9iuPix3ydm3ficb0dXPggoyIkdotfXtvn2NPX9KwfiQImU72EVEs4+VYBZYNcUYrw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@oxc-project/types": "=0.122.0", - "@voidzero-dev/vite-plus-core": "0.1.14", - "@voidzero-dev/vite-plus-test": "0.1.14", - "cac": "^7.0.0", - "cross-spawn": "^7.0.5", - "oxfmt": "=0.42.0", - "oxlint": "=1.57.0", - "oxlint-tsgolint": "=0.17.3", - "picocolors": "^1.1.1" - }, - "bin": { - "oxfmt": "bin/oxfmt", - "oxlint": "bin/oxlint", - "vp": "bin/vp" - }, - "engines": { - "node": "^20.19.0 || >=22.12.0" - }, - "optionalDependencies": { - "@voidzero-dev/vite-plus-darwin-arm64": "0.1.14", - "@voidzero-dev/vite-plus-darwin-x64": "0.1.14", - "@voidzero-dev/vite-plus-linux-arm64-gnu": "0.1.14", - "@voidzero-dev/vite-plus-linux-arm64-musl": "0.1.14", - "@voidzero-dev/vite-plus-linux-x64-gnu": "0.1.14", - "@voidzero-dev/vite-plus-linux-x64-musl": "0.1.14", - "@voidzero-dev/vite-plus-win32-arm64-msvc": "0.1.14", - "@voidzero-dev/vite-plus-win32-x64-msvc": "0.1.14" - } - }, - "node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "license": "ISC", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/zod": { - "version": "4.3.6", - "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz", - "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/colinhacks" - } - } - } -} diff --git a/package.json b/package.json deleted file mode 100644 index eab3f8c..0000000 --- a/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "generative-processing", - "version": "1.0.0", - "description": "it is what it is and it ain't what it ain't", - "license": "ISC", - "repository": { - "type": "git", - "url": "git+https://github.com/plusk/generative-processing.git" - }, - "dependencies": { - "p5": "^2.2.3", - "simplex-noise": "^4.0.3", - "tweakpane": "^4.0.5" - }, - "devDependencies": { - "vite-plus": "latest" - }, - "overrides": { - "vite": "npm:@voidzero-dev/vite-plus-core@latest", - "vitest": "npm:@voidzero-dev/vite-plus-test@latest" - }, - "packageManager": "npm@11.12.0" -} diff --git a/palettes.json b/palettes.json new file mode 100644 index 0000000..854f14a --- /dev/null +++ b/palettes.json @@ -0,0 +1,66 @@ +{ + "mono": { + "bg": "#000000", + "colors": ["#ffffff"] + }, + "monomild": { + "bg": "#333333", + "colors": ["#FFFFFF"] + }, + "monowild": { + "bg": "#333333", + "colors": ["#FAEBD7"] + }, + "onom": { + "bg": "#FAEBD7", + "colors": ["#000000"] + }, + "genesis": { + "bg": "#FAEBD7", + "colors": ["#5C4B51", "#8CBEB2", "#F2EBBF", "#F3B562", "#F06060"] + }, + "sydney": { + "bg": "#7F4040", + "colors": ["#F7665D", "#F7826B", "#F7A571", "#78F7C2", "#BFF7B0"] + }, + "redrange": { + "bg": "#EFEFEF", + "colors": ["#2B3A42", "#3F5765", "#FF530D"] + }, + "redcent": { + "bg": "#DC3522", + "colors": ["#D9CB9E", "#374140", "#2A2C2B", "#1E1E20"] + }, + "symmeblu": { + "bg": "#333333", + "colors": ["#405952", "#9C9B7A", "#FFD393", "#FF974F", "#F54F29"] + }, + "termos": { + "bg": "#333333", + "colors": ["#4C6472", "#57A4B1", "#B0D894", "#FADE89", "#F95355"] + }, + "vintage": { + "bg": "#333333", + "colors": ["#0A7B83", "#2AA876", "#FFD265", "#F19C65", "#CE4D45"] + }, + "pastella": { + "bg": "#333333", + "colors": ["#A8E6CF", "#BFD192", "#F5E49E", "#F4A28B", "#FF8B94"] + }, + "speis": { + "bg": "#252932", + "colors": ["#fade89", "#d4ea97", "#aef2b3", "#8cf6d5", "#78f7f7"] + }, + "mello": { + "bg": "#FAEBD7", + "colors": ["#F8A255", "#F76F55", "#E14B56", "#A83A55", "#5F2756"] + }, + "online": { + "bg": "#fff", + "colors": ["#0d5474", "#fab758"] + }, + "stronk": { + "bg": "#FAEBD7", + "colors": ["#70c2ad", "#F3B562", "#F06060", "#97c87e"] + } +} diff --git a/palettes.ts b/palettes.ts deleted file mode 100644 index 2f4730a..0000000 --- a/palettes.ts +++ /dev/null @@ -1,94 +0,0 @@ -export type PALETTE_NAME = - | "mono" - | "monomild" - | "monowild" - | "onom" - | "genesis" - | "sydney" - | "redrange" - | "redcent" - | "symmeblu" - | "termos" - | "vintage" - | "pastella" - | "speis" - | "mello" - | "online" - | "stronk" - | "sirkul" - | "appfab"; - -export const palettes = { - mono: { - bg: "#000000", - colors: ["#ffffff"], - }, - monomild: { - bg: "#333333", - colors: ["#FFFFFF"], - }, - monowild: { - bg: "#333333", - colors: ["#FAEBD7"], - }, - onom: { - bg: "#FAEBD7", - colors: ["#000000"], - }, - genesis: { - bg: "#FAEBD7", - colors: ["#5C4B51", "#8CBEB2", "#F2EBBF", "#F3B562", "#F06060"], - }, - sydney: { - bg: "#7F4040", - colors: ["#F7665D", "#F7826B", "#F7A571", "#78F7C2", "#BFF7B0"], - }, - redrange: { - bg: "#EFEFEF", - colors: ["#2B3A42", "#3F5765", "#FF530D"], - }, - redcent: { - bg: "#DC3522", - colors: ["#D9CB9E", "#374140", "#2A2C2B", "#1E1E20"], - }, - symmeblu: { - bg: "#333333", - colors: ["#405952", "#9C9B7A", "#FFD393", "#FF974F", "#F54F29"], - }, - termos: { - bg: "#333333", - colors: ["#4C6472", "#57A4B1", "#B0D894", "#FADE89", "#F95355"], - }, - vintage: { - bg: "#333333", - colors: ["#0A7B83", "#2AA876", "#FFD265", "#F19C65", "#CE4D45"], - }, - pastella: { - bg: "#333333", - colors: ["#A8E6CF", "#BFD192", "#F5E49E", "#F4A28B", "#FF8B94"], - }, - speis: { - bg: "#252932", - colors: ["#fade89", "#d4ea97", "#aef2b3", "#8cf6d5", "#78f7f7"], - }, - mello: { - bg: "#FAEBD7", - colors: ["#F8A255", "#F76F55", "#E14B56", "#A83A55", "#5F2756"], - }, - online: { - bg: "#fff", - colors: ["#0d5474", "#fab758"], - }, - stronk: { - bg: "#FAEBD7", - colors: ["#70c2ad", "#F3B562", "#F06060", "#97c87e"], - }, - sirkul: { - bg: "#FAEBD7", - colors: ["#162365", "#6D7ABB", "#FFB88D", "#FF5B5B"], - }, - appfab: { - bg: "#FAEBD7", - colors: ["#FFB88D", "#16DBC4", "#A1F5E3", "#162365"], - }, -} as const satisfies Record; diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..b98ffa3 --- /dev/null +++ b/reset.css @@ -0,0 +1,135 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/sketches/chords/clean.ts b/sketches/chords/clean.ts deleted file mode 100644 index f852070..0000000 --- a/sketches/chords/clean.ts +++ /dev/null @@ -1,123 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "onom"; - -/* Choose a random color from the palette for each line */ -const RANDOM_STROKE = false; - -/* Each line has its own color from the palette */ -const PALETTED_STROKE = false; - -/* How big the circle will be */ -const RADIUS = 400; - -/* How many independent lines will be drawn each frame */ -const LINE_COUNT = 1; - -/* How swiftly the lines will move around (lower is slower) */ -const NOISE_SPEED = 0.0015; - -/* How opaque the lines will be, lower means more transparent */ -/* Lower will be smoother, but also takes longer to fill the circle */ -const OPACITY = 1; -const STROKE_WEIGHT = 1; - -/* Enable to use randomness instead of noise to select line locations */ -/* This effectively overrides the remaining config */ -const IS_RANDOM = false; - -/* Experimental: mirrors lines through the center */ -const IS_SYMMETRICAL = false; - -/* If not IS_RANDOM: noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_BIASED_ANGLE = true; -let BIASED_ANGLE = Math.PI / 2; - -/* If not IS_RANDOM: this value effectively says how strong the bias is */ -/* A lower value means the bias is strong, higher means near-random lines */ -const NOISE_RANDOMNESS = 0.75; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], STROKE: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - STROKE = p.random(COLORS); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.background(BG); - - if (RANDOM_BIASED_ANGLE) BIASED_ANGLE = p.random(p.TWO_PI); - p.noiseDetail(4, NOISE_RANDOMNESS); - }; - - p.draw = () => { - /* Moves the origin of the coordinate system to the center of the canvas */ - /* Rotate based on the bias angle, be that random or not */ - p.translate(p.width / 2, p.height / 2); - p.rotate(BIASED_ANGLE); - - /* For every line to be rendered each frame */ - for (let i = 0; i < LINE_COUNT; i++) { - /* Select two random or noised angles on the circle */ - let a1, a2; - if (IS_RANDOM) { - a1 = p.random(p.TWO_PI); - a2 = p.random(p.TWO_PI); - } else if (IS_SYMMETRICAL) { - a1 = p.TWO_PI * p.noise(0, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - a2 = p.TWO_PI * p.noise(1, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - } else { - a1 = p.TWO_PI * p.noise(i, p.frameCount * NOISE_SPEED); - a2 = p.TWO_PI * p.noise(i + LINE_COUNT, p.frameCount * NOISE_SPEED); - } - - /* Use the two angles to determine two points on the circle */ - const x1 = RADIUS * p.cos(a1); - const y1 = RADIUS * p.sin(a1); - const x2 = RADIUS * p.cos(a2); - const y2 = RADIUS * p.sin(a2); - - /* If random, choose a new color for each line */ - if (RANDOM_STROKE) { - const randomColor = p.random(COLORS); - randomColor.setAlpha(OPACITY * 255); - p.stroke(randomColor); - } else if (PALETTED_STROKE) { - const palettedColor = COLORS[i % COLORS.length]; - palettedColor.setAlpha(OPACITY * 255); - p.stroke(palettedColor); - } - - /* Draw a line between the two points */ - p.line(x1, y1, x2, y2); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/chords/planet.ts b/sketches/chords/planet.ts deleted file mode 100644 index 4582d41..0000000 --- a/sketches/chords/planet.ts +++ /dev/null @@ -1,123 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "termos"; - -/* Choose a random color from the palette for each line */ -const RANDOM_STROKE = false; - -/* Each line has its own color from the palette */ -const PALETTED_STROKE = true; - -/* How big the circle will be */ -const RADIUS = 400; - -/* How many independent lines will be drawn each frame */ -const LINE_COUNT = 10; - -/* How swiftly the lines will move around (lower is slower) */ -const NOISE_SPEED = 0.04; - -/* How opaque the lines will be, lower means more transparent */ -/* Lower will be smoother, but also takes longer to fill the circle */ -const OPACITY = 0.25; -const STROKE_WEIGHT = 1; - -/* Enable to use randomness instead of noise to select line locations */ -/* This effectively overrides the remaining config */ -const IS_RANDOM = false; - -/* Experimental: mirrors lines through the center */ -const IS_SYMMETRICAL = false; - -/* If not IS_RANDOM: noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_BIASED_ANGLE = false; -let BIASED_ANGLE = Math.PI / 4; - -/* If not IS_RANDOM: this value effectively says how strong the bias is */ -/* A lower value means the bias is strong, higher means near-random lines */ -const NOISE_RANDOMNESS = 0.75; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], STROKE: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - STROKE = p.random(COLORS); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.background(BG); - - if (RANDOM_BIASED_ANGLE) BIASED_ANGLE = p.random(p.TWO_PI); - p.noiseDetail(4, NOISE_RANDOMNESS); - }; - - p.draw = () => { - /* Moves the origin of the coordinate system to the center of the canvas */ - /* Rotate based on the bias angle, be that random or not */ - p.translate(p.width / 2, p.height / 2); - p.rotate(BIASED_ANGLE); - - /* For every line to be rendered each frame */ - for (let i = 0; i < LINE_COUNT; i++) { - /* Select two random or noised angles on the circle */ - let a1, a2; - if (IS_RANDOM) { - a1 = p.random(p.TWO_PI); - a2 = p.random(p.TWO_PI); - } else if (IS_SYMMETRICAL) { - a1 = p.TWO_PI * p.noise(0, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - a2 = p.TWO_PI * p.noise(1, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - } else { - a1 = p.TWO_PI * p.noise(i, p.frameCount * NOISE_SPEED); - a2 = p.TWO_PI * p.noise(i + LINE_COUNT, p.frameCount * NOISE_SPEED); - } - - /* Use the two angles to determine two points on the circle */ - const x1 = RADIUS * p.cos(a1); - const y1 = RADIUS * p.sin(a1); - const x2 = RADIUS * p.cos(a2); - const y2 = RADIUS * p.sin(a2); - - /* If random, choose a new color for each line */ - if (RANDOM_STROKE) { - const randomColor = p.random(COLORS); - randomColor.setAlpha(OPACITY * 255); - p.stroke(randomColor); - } else if (PALETTED_STROKE) { - const palettedColor = COLORS[i % COLORS.length]; - palettedColor.setAlpha(OPACITY * 255); - p.stroke(palettedColor); - } - - /* Draw a line between the two points */ - p.line(x1, y1, x2, y2); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/chords/spectrum.ts b/sketches/chords/spectrum.ts deleted file mode 100644 index f9e8361..0000000 --- a/sketches/chords/spectrum.ts +++ /dev/null @@ -1,123 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "termos"; - -/* Choose a random color from the palette for each line */ -const RANDOM_STROKE = false; - -/* Each line has its own color from the palette */ -const PALETTED_STROKE = true; - -/* How big the circle will be */ -const RADIUS = 400; - -/* How many independent lines will be drawn each frame */ -const LINE_COUNT = 5; - -/* How swiftly the lines will move around (lower is slower) */ -const NOISE_SPEED = 0.0015; - -/* How opaque the lines will be, lower means more transparent */ -/* Lower will be smoother, but also takes longer to fill the circle */ -const OPACITY = 0.5; -const STROKE_WEIGHT = 1; - -/* Enable to use randomness instead of noise to select line locations */ -/* This effectively overrides the remaining config */ -const IS_RANDOM = false; - -/* Experimental: mirrors lines through the center */ -const IS_SYMMETRICAL = true; - -/* If not IS_RANDOM: noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_BIASED_ANGLE = true; -let BIASED_ANGLE = Math.PI / 2; - -/* If not IS_RANDOM: this value effectively says how strong the bias is */ -/* A lower value means the bias is strong, higher means near-random lines */ -const NOISE_RANDOMNESS = 0.75; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], STROKE: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - STROKE = p.random(COLORS); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.background(BG); - - if (RANDOM_BIASED_ANGLE) BIASED_ANGLE = p.random(p.TWO_PI); - p.noiseDetail(4, NOISE_RANDOMNESS); - }; - - p.draw = () => { - /* Moves the origin of the coordinate system to the center of the canvas */ - /* Rotate based on the bias angle, be that random or not */ - p.translate(p.width / 2, p.height / 2); - p.rotate(BIASED_ANGLE); - - /* For every line to be rendered each frame */ - for (let i = 0; i < LINE_COUNT; i++) { - /* Select two random or noised angles on the circle */ - let a1, a2; - if (IS_RANDOM) { - a1 = p.random(p.TWO_PI); - a2 = p.random(p.TWO_PI); - } else if (IS_SYMMETRICAL) { - a1 = p.TWO_PI * p.noise(0, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - a2 = p.TWO_PI * p.noise(1, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - } else { - a1 = p.TWO_PI * p.noise(i, p.frameCount * NOISE_SPEED); - a2 = p.TWO_PI * p.noise(i + LINE_COUNT, p.frameCount * NOISE_SPEED); - } - - /* Use the two angles to determine two points on the circle */ - const x1 = RADIUS * p.cos(a1); - const y1 = RADIUS * p.sin(a1); - const x2 = RADIUS * p.cos(a2); - const y2 = RADIUS * p.sin(a2); - - /* If random, choose a new color for each line */ - if (RANDOM_STROKE) { - const randomColor = p.random(COLORS); - randomColor.setAlpha(OPACITY * 255); - p.stroke(randomColor); - } else if (PALETTED_STROKE) { - const palettedColor = COLORS[i % COLORS.length]; - palettedColor.setAlpha(OPACITY * 255); - p.stroke(palettedColor); - } - - /* Draw a line between the two points */ - p.line(x1, y1, x2, y2); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/chords/symmetrical.ts b/sketches/chords/symmetrical.ts deleted file mode 100644 index 6f1a90d..0000000 --- a/sketches/chords/symmetrical.ts +++ /dev/null @@ -1,123 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "onom"; - -/* Choose a random color from the palette for each line */ -const RANDOM_STROKE = false; - -/* Each line has its own color from the palette */ -const PALETTED_STROKE = false; - -/* How big the circle will be */ -const RADIUS = 400; - -/* How many independent lines will be drawn each frame */ -const LINE_COUNT = 2; - -/* How swiftly the lines will move around (lower is slower) */ -const NOISE_SPEED = 0.0015; - -/* How opaque the lines will be, lower means more transparent */ -/* Lower will be smoother, but also takes longer to fill the circle */ -const OPACITY = 0.5; -const STROKE_WEIGHT = 1; - -/* Enable to use randomness instead of noise to select line locations */ -/* This effectively overrides the remaining config */ -const IS_RANDOM = false; - -/* Experimental: mirrors lines through the center */ -const IS_SYMMETRICAL = true; - -/* If not IS_RANDOM: noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_BIASED_ANGLE = true; -let BIASED_ANGLE = Math.PI / 2; - -/* If not IS_RANDOM: this value effectively says how strong the bias is */ -/* A lower value means the bias is strong, higher means near-random lines */ -const NOISE_RANDOMNESS = 0.75; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], STROKE: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - STROKE = p.random(COLORS); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.background(BG); - - if (RANDOM_BIASED_ANGLE) BIASED_ANGLE = p.random(p.TWO_PI); - p.noiseDetail(4, NOISE_RANDOMNESS); - }; - - p.draw = () => { - /* Moves the origin of the coordinate system to the center of the canvas */ - /* Rotate based on the bias angle, be that random or not */ - p.translate(p.width / 2, p.height / 2); - p.rotate(BIASED_ANGLE); - - /* For every line to be rendered each frame */ - for (let i = 0; i < LINE_COUNT; i++) { - /* Select two random or noised angles on the circle */ - let a1, a2; - if (IS_RANDOM) { - a1 = p.random(p.TWO_PI); - a2 = p.random(p.TWO_PI); - } else if (IS_SYMMETRICAL) { - a1 = p.TWO_PI * p.noise(0, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - a2 = p.TWO_PI * p.noise(1, p.frameCount * NOISE_SPEED) + (i * p.TWO_PI) / LINE_COUNT; - } else { - a1 = p.TWO_PI * p.noise(i, p.frameCount * NOISE_SPEED); - a2 = p.TWO_PI * p.noise(i + LINE_COUNT, p.frameCount * NOISE_SPEED); - } - - /* Use the two angles to determine two points on the circle */ - const x1 = RADIUS * p.cos(a1); - const y1 = RADIUS * p.sin(a1); - const x2 = RADIUS * p.cos(a2); - const y2 = RADIUS * p.sin(a2); - - /* If random, choose a new color for each line */ - if (RANDOM_STROKE) { - const randomColor = p.random(COLORS); - randomColor.setAlpha(OPACITY * 255); - p.stroke(randomColor); - } else if (PALETTED_STROKE) { - const palettedColor = COLORS[i % COLORS.length]; - palettedColor.setAlpha(OPACITY * 255); - p.stroke(palettedColor); - } - - /* Draw a line between the two points */ - p.line(x1, y1, x2, y2); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/arrival.ts b/sketches/circleseed/arrival.ts deleted file mode 100644 index aa0a002..0000000 --- a/sketches/circleseed/arrival.ts +++ /dev/null @@ -1,91 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const RING_COUNT = 1; -const LINE_COUNT = 10000; -const STEP = 4; -const ANGLE_STEP = 1.75; -const RADIUS = 250; -const NOISE_DETAIL = 0.0075; - -const FRAME_LIMIT = 60; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(15); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - p.colorMode(p.HSL); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.width / 2; - const yCenter = p.width / 2; - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - a, - color: p.random(COLORS), - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - // p.beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const drawLine = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a * noyzed * ANGLE_STEP; - const x = LINE.x + STEP * p.cos(angle + p.HALF_PI); - const y = LINE.y + STEP * p.sin(angle + p.HALF_PI); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/arrivalcolor.ts b/sketches/circleseed/arrivalcolor.ts deleted file mode 100644 index ce3ad00..0000000 --- a/sketches/circleseed/arrivalcolor.ts +++ /dev/null @@ -1,101 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; - -const STROKE_WEIGHT = 2; -const RING_COUNT = 1; -const LINE_COUNT = 10000; -const STEP = 4; -const ANGLE_STEP = 1.75; -const RADIUS = 250; -const NOISE_DETAIL = 0.0075; - -const FRAME_LIMIT = 60; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(15); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - p.colorMode(p.HSL); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.width / 2; - const yCenter = p.width / 2; - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - a, - color: p.random(COLORS), - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - const HUE = p.hue(RING[0].color); - const SATURATION = p.saturation(RING[0].color); - const LIGHTNESS = p.lightness(RING[0].color); - const coleur = p.color( - HUE, - (SATURATION / FRAME_LIMIT) * p.frameCount, - (LIGHTNESS / FRAME_LIMIT) * p.frameCount, - (5 / FRAME_LIMIT) * p.frameCount, - ); - p.stroke(coleur); - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - // p.beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const drawLine = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a * noyzed * ANGLE_STEP; - const x = LINE.x + STEP * p.cos(angle + p.HALF_PI); - const y = LINE.y + STEP * p.sin(angle + p.HALF_PI); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/circles.ts b/sketches/circleseed/circles.ts deleted file mode 100644 index cb6600d..0000000 --- a/sketches/circleseed/circles.ts +++ /dev/null @@ -1,80 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const RING_COUNT = 10; -const LINE_COUNT = 50; -const STEP = 5; -const RADIUS = 100; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - //STROKE.setAlpha(5); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.random(p.width); - const yCenter = p.random(p.height); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - a, - color: p.random(COLORS), - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - // p.beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const drawLine = (LINE: any) => { - const x = LINE.x + STEP; - const y = LINE.y + STEP; - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/cloth.ts b/sketches/circleseed/cloth.ts deleted file mode 100644 index c75bbda..0000000 --- a/sketches/circleseed/cloth.ts +++ /dev/null @@ -1,112 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "pastella"; - -const STROKE_WEIGHT = 2; -const LINE_COUNT = 100; -const STEP = STROKE_WEIGHT * 2; -const RADIUS = 50; -const REPETITIONS = 50; -const NOISE_DETAIL = 0.00375; -const NOISE_EVO = 0.01; - -const OPACITY = 255; -const BG_OPACITY = 5; - -const LOD = 2; -const FALLBACK = 0.5; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; -let SATURATION: any; -let HUE: any; -let LIGHTNESS: any; - -const RING: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - p.colorMode(p.HSL); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - HUE = p.hue(STROKE); - SATURATION = p.saturation(STROKE); - LIGHTNESS = p.lightness(STROKE); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(OPACITY); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - const xCenter = p.width / 2; - const yCenter = p.height / 2; - const angle = p.HALF_PI; - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - a, - angle, - }); - } - p.noiseDetail(LOD, FALLBACK); - }; - - p.draw = () => { - resetDraw(); - for (let i = 0; i < REPETITIONS; i++) { - p.stroke(HUE, (SATURATION / REPETITIONS) * i, LIGHTNESS); - p.beginShape(); - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - p.endShape(p.CLOSE); - } - }; - - const resetDraw = () => { - BG.setAlpha(255); - p.background(BG); - BG.setAlpha(BG_OPACITY); - p.fill(BG); - p.translate(p.width / 2, p.height / 2); - for (let i = 0; i < RING.length; i++) { - const LINE = RING[i]; - LINE.x = RADIUS * p.cos(LINE.a); - LINE.y = RADIUS * p.sin(LINE.a); - } - }; - - const drawLine = (LINE: any) => { - const noyze = - p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL, p.frameCount * NOISE_EVO) - 0.5; - const x = LINE.x + STEP * p.cos(LINE.angle + p.TWO_PI * noyze); - const y = LINE.y + STEP * p.sin(LINE.angle + p.TWO_PI * noyze); - //p.line(LINE.x, LINE.y, x, y); - p.vertex(x, y); - LINE.x = x; - LINE.y = y; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/donuts.ts b/sketches/circleseed/donuts.ts deleted file mode 100644 index 7c74dbf..0000000 --- a/sketches/circleseed/donuts.ts +++ /dev/null @@ -1,104 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; // retro, warm, sydney, symmeblu, termos, vintage, pastella - -const STROKE_WEIGHT = 2; -const RING_COUNT = 10; -const LINE_COUNT = 200; -const STEP = 4; -const ANGLE_STEP = 0.1; -const RADIUS = 100; -const NOISE_DETAIL = 0.005; - -const FRAME_LIMIT = 90; - -const LOD = 4; -const FALL = 0.5; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(COLORS[0]); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(127); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - p.colorMode(p.HSL); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.random(RADIUS, p.width - RADIUS); - const yCenter = p.random(p.height); - const coleur = p.color(COLORS[r % COLORS.length]); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - a, - color: coleur, - }); - } - RINGS.push(RING); - } - p.noiseDetail(LOD, FALL); - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - const HUE = p.hue(RING[0].color); - const SATURATION = p.saturation(RING[0].color); - const LIGHTNESS = p.lightness(RING[0].color); - p.stroke( - HUE, - (SATURATION / FRAME_LIMIT) * p.frameCount, - (LIGHTNESS / FRAME_LIMIT) * p.frameCount, - ); - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - const drawLine = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a + noyzed * ANGLE_STEP; - const x = LINE.x + STEP * p.cos(angle); - const y = LINE.y + STEP * p.sin(angle); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/floral.ts b/sketches/circleseed/floral.ts deleted file mode 100644 index bae6911..0000000 --- a/sketches/circleseed/floral.ts +++ /dev/null @@ -1,106 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; // retro - -const STROKE_WEIGHT = 2; -const RING_COUNT = 50; -const ANGLE_STEP = 2.25; -const RADIUS_MIN = 25; -const RADIUS = 100; -const NOISE_DETAIL = 0.015; -const LINE_FACTOR = 2; - -const FRAME_LIMIT = 180; - -const STEP = STROKE_WEIGHT; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - - p.background(BG); - p.fill(BG); - p.strokeWeight(STROKE_WEIGHT); - - p.colorMode(p.HSL); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.random(p.width); - const yCenter = p.random(RADIUS / 2, p.height); - const coleur = p.color(COLORS[r % COLORS.length]); - const raddy = p.random(RADIUS_MIN, RADIUS); - for ( - let a = p.TWO_PI / (raddy * LINE_FACTOR); - a < p.TWO_PI; - a += p.TWO_PI / (raddy * LINE_FACTOR) - ) { - const x = xCenter + p.random(raddy / 4, raddy) * p.cos(a); - const y = yCenter + p.random(raddy / 4, raddy) * p.sin(a); - RING.push({ - x, - y, - a, - color: coleur, - step: p.random(STEP * 0.75, STEP * 1.25), - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - const HUE = p.hue(RING[0].color); - const SATURATION = p.saturation(RING[0].color); - const LIGHTNESS = p.lightness(RING[0].color); - const coleur = p.color( - HUE, - (SATURATION / FRAME_LIMIT) * p.frameCount, - (LIGHTNESS / FRAME_LIMIT) * p.frameCount, - ); - p.stroke(coleur); - //p.drawingContext.shadowColor = coleur; - - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - const drawLine = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a * noyzed * ANGLE_STEP; - - const x = LINE.x + LINE.step * p.cos(p.HALF_PI + angle); - const y = LINE.y + LINE.step * p.sin(p.HALF_PI + angle); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/floralbeginning.ts b/sketches/circleseed/floralbeginning.ts deleted file mode 100644 index 752216d..0000000 --- a/sketches/circleseed/floralbeginning.ts +++ /dev/null @@ -1,101 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; - -const STROKE_WEIGHT = 2; -const RING_COUNT = 1; -const LINE_COUNT = 1000; -const STEP = 4; -const ANGLE_STEP = 2; -const RADIUS = 250; -const NOISE_DETAIL = 0.0075; - -const FRAME_LIMIT = 60; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(15); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - p.colorMode(p.HSL); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.width / 2; - const yCenter = p.width / 2; - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - a, - color: p.random(COLORS), - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - const HUE = p.hue(RING[0].color); - const SATURATION = p.saturation(RING[0].color); - const LIGHTNESS = p.lightness(RING[0].color); - const coleur = p.color( - HUE, - (SATURATION / FRAME_LIMIT) * p.frameCount, - (LIGHTNESS / FRAME_LIMIT) * p.frameCount, - (5 / FRAME_LIMIT) * p.frameCount, - ); - p.stroke(coleur); - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - // p.beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const drawLine = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a * noyzed * ANGLE_STEP; - const x = LINE.x + STEP * p.cos(angle + p.HALF_PI); - const y = LINE.y + STEP * p.sin(angle + p.HALF_PI); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/floralbig.ts b/sketches/circleseed/floralbig.ts deleted file mode 100644 index d5d2195..0000000 --- a/sketches/circleseed/floralbig.ts +++ /dev/null @@ -1,109 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; // retro - -const STROKE_WEIGHT = 2; -const RING_COUNT = 5; -const ANGLE_STEP = 2.25; -const NOISE_DETAIL = 0.0075; -const LINE_FACTOR = 2; -const PADDING = 200; - -const FRAME_LIMIT = 120; - -const STEP = STROKE_WEIGHT; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - - p.background(BG); - p.fill(BG); - p.strokeWeight(STROKE_WEIGHT); - - p.colorMode(p.HSL); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - - let radsum = 0; - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const raddy = ((p.height - PADDING * 2) / 4 / RING_COUNT) * (r + 1); - radsum += raddy; - const xCenter = p.width / 2; - const yCenter = (PADDING * 3) / 4 + radsum; - const coleur = p.color(p.random(COLORS)); - for ( - let a = p.TWO_PI / (raddy * LINE_FACTOR); - a < p.TWO_PI; - a += p.TWO_PI / (raddy * LINE_FACTOR) - ) { - const x = xCenter + raddy * p.cos(a); - const y = yCenter + raddy * p.sin(a); - RING.push({ - x, - y, - a, - color: coleur, - step: p.random(STEP * 0.5, STEP * 1), - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - const HUE = p.hue(RING[0].color); - const SATURATION = p.saturation(RING[0].color); - const LIGHTNESS = p.lightness(RING[0].color); - const coleur = p.color( - HUE, - (SATURATION / FRAME_LIMIT) * p.frameCount, - (LIGHTNESS / FRAME_LIMIT) * p.frameCount, - (5 / FRAME_LIMIT) * p.frameCount, - ); - p.stroke(coleur); - //p.drawingContext.shadowColor = coleur; - - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - const drawLine = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a * noyzed * ANGLE_STEP; - - const x = LINE.x + LINE.step * p.cos(p.HALF_PI + angle); - const y = LINE.y + LINE.step * p.sin(p.HALF_PI + angle); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/floralcursor.ts b/sketches/circleseed/floralcursor.ts deleted file mode 100644 index b52af5b..0000000 --- a/sketches/circleseed/floralcursor.ts +++ /dev/null @@ -1,104 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; - -const STROKE_WEIGHT = 2; -const ANGLE_STEP = 2.25; -const NOISE_DETAIL = 0.0075; -const SEEDS_PER_EVENT = 30; -const SEED_LIFETIME = 120; -const MIN_PLANT_DIST = 20; - -const STEP = STROKE_WEIGHT; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; - -let lastPlantX = -9999; -let lastPlantY = -9999; -const SEEDS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - p.createCanvas(1080, 1350); - // cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - - p.background(BG); - p.fill(BG); - p.strokeWeight(STROKE_WEIGHT); - p.colorMode(p.HSL); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - }; - - p.draw = () => { - for (let i = SEEDS.length - 1; i >= 0; i--) { - const seed = SEEDS[i]; - const age = SEED_LIFETIME - seed.life; - const coleur = p.color( - p.hue(seed.color), - (p.saturation(seed.color) / SEED_LIFETIME) * age, - (p.lightness(seed.color) / SEED_LIFETIME) * age, - (5 / SEED_LIFETIME) * age, - ); - p.stroke(coleur); - drawSeed(seed); - seed.life--; - if (seed.life <= 0) SEEDS.splice(i, 1); - } - }; - - p.mousePressed = () => { - lastPlantX = -9999; - lastPlantY = -9999; - plantSeeds(p.mouseX, p.mouseY); - }; - - p.mouseDragged = () => { - plantSeeds(p.mouseX, p.mouseY); - }; - - const plantSeeds = (x: number, y: number) => { - const dx = x - lastPlantX; - const dy = y - lastPlantY; - if (Math.sqrt(dx * dx + dy * dy) < MIN_PLANT_DIST) return; - lastPlantX = x; - lastPlantY = y; - - const noyzed = p.noise(x * NOISE_DETAIL, y * NOISE_DETAIL); - const idx = p.constrain( - Math.floor(p.map(noyzed, 0.2, 0.8, 0, COLORS.length)), - 0, - COLORS.length - 1, - ); - const coleur = p.color(COLORS[idx]); - - for (let i = 0; i < SEEDS_PER_EVENT; i++) { - SEEDS.push({ - x, - y, - a: p.random(p.TWO_PI), - color: coleur, - step: p.random(STEP * 0.5, STEP * 1), - life: SEED_LIFETIME, - }); - } - }; - - const drawSeed = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a * noyzed * ANGLE_STEP; - - const x = LINE.x + LINE.step * p.cos(p.HALF_PI + angle); - const y = LINE.y + LINE.step * p.sin(p.HALF_PI + angle); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; -}); diff --git a/sketches/circleseed/floralnew.ts b/sketches/circleseed/floralnew.ts deleted file mode 100644 index d9f5c9f..0000000 --- a/sketches/circleseed/floralnew.ts +++ /dev/null @@ -1,120 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; // retro - -const STROKE_WEIGHT = 2; -const POLY_COUNT = 6; -const MIN_SIDES = 3; -const MAX_SIDES = 9; -const MIN_RADIUS = 60; -const MAX_RADIUS = 440; -const ANGLE_STEP = 2.25; -const NOISE_DETAIL = 0.0075; -const LINE_FACTOR = 2; - -const FRAME_LIMIT = 120; - -const STEP = STROKE_WEIGHT; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - - p.background(BG); - p.fill(BG); - p.strokeWeight(STROKE_WEIGHT); - - p.colorMode(p.HSL); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - - const xCenter = p.width / 2; - const yCenter = p.height / 2; - - for (let r = 0; r < POLY_COUNT; r++) { - const RING: any[] = []; - const t = (r + 1) / POLY_COUNT; - const radius = MIN_RADIUS + (MAX_RADIUS - MIN_RADIUS) * t; - const sides = Math.floor(p.random(MIN_SIDES, MAX_SIDES + 1)); - const coleur = p.color(p.random(COLORS)); - - const totalPoints = Math.floor(radius * LINE_FACTOR); - for (let i = 0; i < totalPoints; i++) { - const frac = i / totalPoints; - const edgePos = frac * sides; - const edgeIndex = Math.floor(edgePos); - const edgeFrac = edgePos - edgeIndex; - - const a1 = (edgeIndex / sides) * p.TWO_PI; - const a2 = ((edgeIndex + 1) / sides) * p.TWO_PI; - - const x = p.lerp(xCenter + radius * p.cos(a1), xCenter + radius * p.cos(a2), edgeFrac); - const y = p.lerp(yCenter + radius * p.sin(a1), yCenter + radius * p.sin(a2), edgeFrac); - const a = p.lerp(a1, a2, edgeFrac); - - RING.push({ - x, - y, - a, - color: coleur, - step: p.random(STEP * 0.5, STEP * 1), - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - const HUE = p.hue(RING[0].color); - const SATURATION = p.saturation(RING[0].color); - const LIGHTNESS = p.lightness(RING[0].color); - const coleur = p.color( - HUE, - (SATURATION / FRAME_LIMIT) * p.frameCount, - (LIGHTNESS / FRAME_LIMIT) * p.frameCount, - (5 / FRAME_LIMIT) * p.frameCount, - ); - p.stroke(coleur); - //p.drawingContext.shadowColor = coleur; - - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - const drawLine = (LINE: any) => { - const noyzed = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const angle = LINE.a * noyzed * ANGLE_STEP; - - const x = LINE.x + LINE.step * p.cos(p.HALF_PI + angle); - const y = LINE.y + LINE.step * p.sin(p.HALF_PI + angle); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - LINE.a = angle; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/shape.ts b/sketches/circleseed/shape.ts deleted file mode 100644 index 1f98c1c..0000000 --- a/sketches/circleseed/shape.ts +++ /dev/null @@ -1,91 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "pastella"; - -const STROKE_WEIGHT = 2; -const RING_COUNT = 5; -const LINE_COUNT = 1000; -const STEP = 4; -const RADIUS = 150; -const NOISE_DETAIL = 0.005; - -const OPACITY = 255; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - BG.setAlpha(15); - p.fill(BG); - //STROKE.setAlpha(15); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.random(p.width); - const yCenter = p.random(p.height / 2); - const collie = p.color(COLORS[r % COLORS.length]); - collie.setAlpha(OPACITY); - const angle = p.random(p.QUARTER_PI, p.TWO_PI - p.QUARTER_PI); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - angle, - color: collie, - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - p.stroke(RING[0].color); - p.beginShape(); - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - p.endShape(p.CLOSE); - } - }; - - const drawLine = (LINE: any) => { - const noyze = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const x = LINE.x + STEP * p.cos(LINE.angle * noyze); - const y = LINE.y + STEP * p.sin(LINE.angle * noyze); - //p.line(LINE.x, LINE.y, x, y); - p.vertex(x, y); - LINE.x = x; - LINE.y = y; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/circleseed/slonky.ts b/sketches/circleseed/slonky.ts deleted file mode 100644 index 5ca7d21..0000000 --- a/sketches/circleseed/slonky.ts +++ /dev/null @@ -1,86 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "mono"; - -const STROKE_WEIGHT = 2; -const RING_COUNT = 10; -const LINE_COUNT = 1000; -const STEP = 5; -const RADIUS = 100; -const NOISE_DETAIL = 0.005; - -const OPACITY = 63; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; -let STROKE: any; - -const RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - //STROKE.setAlpha(15); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let r = 0; r < RING_COUNT; r++) { - const RING: any[] = []; - const xCenter = p.random(p.width); - const yCenter = p.random(p.height); - const collie = p.color(COLORS[r % COLORS.length]); - collie.setAlpha(OPACITY); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / LINE_COUNT) { - const x = xCenter + RADIUS * p.cos(a); - const y = yCenter + RADIUS * p.sin(a); - RING.push({ - x, - y, - color: collie, - }); - } - RINGS.push(RING); - } - }; - - p.draw = () => { - for (let r = 0; r < RINGS.length; r++) { - const RING = RINGS[r]; - p.stroke(RING[0].color); - for (let l = 0; l < RING.length; l++) { - const LINE = RING[l]; - drawLine(LINE); - } - } - // p.beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const drawLine = (LINE: any) => { - const noyze = p.noise(LINE.x * NOISE_DETAIL, LINE.y * NOISE_DETAIL); - const x = LINE.x + STEP * p.cos(p.TWO_PI * noyze); - const y = LINE.y + STEP * p.sin(p.TWO_PI * noyze); - p.line(LINE.x, LINE.y, x, y); - LINE.x = x; - LINE.y = y; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/curves/abstract.ts b/sketches/curves/abstract.ts deleted file mode 100644 index 25241f6..0000000 --- a/sketches/curves/abstract.ts +++ /dev/null @@ -1,57 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const RADIUS = 1080 / 4; -const ANGLE_STEP = 0.1; - -let COLOR_PALETTE: any; -let COLOR_BG: any; -let COLOR_STROKE: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - COLOR_PALETTE = palette.colors; - COLOR_BG = p.color(palette.bg); - COLOR_STROKE = p.color(p.random(COLOR_PALETTE)); - - p.background(COLOR_BG); - p.fill(COLOR_BG); - //COLOR_STROKE.setAlpha(4); - p.stroke(COLOR_STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(colors); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - for (let r = 0; r < RADIUS; r += STROKE_WEIGHT * 2) { - for (let a = 0; a < p.TWO_PI; a += ANGLE_STEP) { - const x = r * p.cos(a); - const y = r * p.sin(a); - //p.point(x, y); - //p.bezier(0, 0, 25, 50, 50, 25, 100, 100); - p.bezier(0, 0, -p.width / 2, -p.height / 2, p.width / 2, p.height / 2, x, y); - //p.bezier(0, 0, x, y, 0, p.height, p.height / 2); - //p.circle(x, y, r); - } - } - p.noLoop(); - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/curves/bezier.ts b/sketches/curves/bezier.ts deleted file mode 100644 index 22dacc6..0000000 --- a/sketches/curves/bezier.ts +++ /dev/null @@ -1,61 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; - -const PALETTE_NAME = "mono"; - -const STROKE_WEIGHT = 1; -const COUNT = 100; -const RADIUS = 1080 / 4; - -let COLOR_PALETTE: any; -let COLOR_BG: any; -let COLOR_STROKE: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - COLOR_PALETTE = palette.colors; - COLOR_BG = p.color(palette.bg); - COLOR_STROKE = p.color(p.random(COLOR_PALETTE)); - - p.background(COLOR_BG); - p.fill(COLOR_BG); - p.noFill(); - COLOR_STROKE.setAlpha(63); - p.stroke(COLOR_STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLOR_PALETTE); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - const xEnd = p.random(-p.width / 4, p.width / 4); - const yEnd = p.random(-p.height / 4, p.height / 4); - const xAnchor0 = p.random(-p.width / 2, p.width / 2); - const yAnchor0 = p.random(-p.height / 2, p.height / 2); - const xAnchor1 = p.random(-p.width / 2, p.width / 2); - const yAnchor1 = p.random(-p.height / 2, p.height / 2); - - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / COUNT) { - const xStart = RADIUS * p.cos(a); - const yStart = RADIUS * p.sin(a); - - p.bezier(xStart, yStart, xAnchor0, yAnchor0, xAnchor1, yAnchor1, xEnd, yEnd); - } - - p.noLoop(); - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/curves/droop.ts b/sketches/curves/droop.ts deleted file mode 100644 index d43d026..0000000 --- a/sketches/curves/droop.ts +++ /dev/null @@ -1,57 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const COUNT_X = 50; -const COUNT_Y = 50; - -let COLOR_PALETTE: any; -let COLOR_BG: any; -let COLOR_STROKE: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - COLOR_PALETTE = palette.colors; - COLOR_BG = p.color(palette.bg); - COLOR_STROKE = p.color(p.random(COLOR_PALETTE)); - - p.background(COLOR_BG); - p.fill(COLOR_BG); - p.noFill(); - COLOR_STROKE.setAlpha(63); - p.stroke(COLOR_STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLOR_PALETTE); - }; - - p.draw = () => { - const xEnd = p.random(p.width); - const yEnd = p.random(p.height); - const xAnchor0 = p.random(p.width); - const yAnchor0 = p.random(p.height); - const xAnchor1 = p.random(p.width); - const yAnchor1 = p.random(p.height); - for (let x = 0; x <= p.width; x += p.width / COUNT_X) { - for (let y = 0; y <= p.height; y += p.height / COUNT_Y) { - p.bezier(xEnd, yEnd, xAnchor0, yAnchor0, xAnchor1, yAnchor1, x, y); - } - } - p.noLoop(); - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/curves/eye.ts b/sketches/curves/eye.ts deleted file mode 100644 index 7dc48cc..0000000 --- a/sketches/curves/eye.ts +++ /dev/null @@ -1,51 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; -let colors: any; - -let colors_bg: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const RADIUS = 400; -const ANGLE_STEP = 0.01; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(colors); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - for (let r = 0; r < RADIUS; r += STROKE_WEIGHT * 2) { - for (let a = 0; a < p.TWO_PI; a += ANGLE_STEP) { - const x = r * p.cos(a); - const y = r * p.sin(a); - p.circle(x, y, r); - } - } - p.noLoop(); - // p.beginShape(); p.POINTS, p.LINES, p.TRIANGLES, p.TRIANGLE_FAN, p.TRIANGLE_STRIP, p.QUADS, p.QUAD_STRIP - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/curves/layers.ts b/sketches/curves/layers.ts deleted file mode 100644 index ce391d0..0000000 --- a/sketches/curves/layers.ts +++ /dev/null @@ -1,65 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 1; -const RADIUS = 1080 / 4; -const ANGLE_STEP = 0.02; - -let COLOR_PALETTE: any; -let COLOR_BG: any; -let COLOR_STROKE: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - COLOR_PALETTE = palette.colors; - COLOR_BG = p.color(palette.bg); - COLOR_STROKE = p.color(p.random(COLOR_PALETTE)); - - p.background(COLOR_BG); - p.fill(COLOR_BG); - //p.noFill(); - //COLOR_STROKE.setAlpha(4); - p.stroke(COLOR_STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(colors); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - for (let r = 0; r < RADIUS; r += STROKE_WEIGHT * 2) { - for (let a = 0; a < p.TWO_PI; a += ANGLE_STEP) { - const x0 = 0; - const y0 = 0; - const x1 = r * p.cos(a); - const y1 = r * p.sin(a); - - const cx0 = p.random(r) * p.cos(p.random(a)); - const cy0 = p.random(r) * p.cos(p.random(a)); - const cx1 = p.random(r) * p.cos(p.random(a)); - const cy1 = p.random(r) * p.cos(p.random(a)); - //p.point(x, y); - //p.bezier(0, 0, 25, 50, 50, 25, 100, 100); - p.bezier(x0, y0, cx0, cy0, cx1, cy1, x1, y1); - //p.bezier(0, 0, x, y, 0, p.height, p.height / 2); - //p.circle(x, y, r); - } - } - p.noLoop(); - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/curves/radius.ts b/sketches/curves/radius.ts deleted file mode 100644 index 863728c..0000000 --- a/sketches/curves/radius.ts +++ /dev/null @@ -1,49 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; -let colors: any; - -let colors_bg: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const RADIUS = 400; -const ANGLE_STEP = 0.01; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(colors); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - for (let r = 0; r < RADIUS; r += STROKE_WEIGHT * 2) { - for (let a = 0; a < p.TWO_PI; a += ANGLE_STEP) { - p.point(r * p.cos(a), r * p.sin(a)); - } - } - p.noLoop(); - // p.beginShape(); p.POINTS, p.LINES, p.TRIANGLES, p.TRIANGLE_FAN, p.TRIANGLE_STRIP, p.QUADS, p.QUAD_STRIP - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/curves/weird.ts b/sketches/curves/weird.ts deleted file mode 100644 index 72e4e1c..0000000 --- a/sketches/curves/weird.ts +++ /dev/null @@ -1,49 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; -let colors: any; - -let colors_bg: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const RADIUS = 400; -const ANGLE_STEP = 100; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(colors); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - for (let r = 0; r < RADIUS; r += STROKE_WEIGHT) { - for (let a = 0; a < p.TWO_PI; a += ANGLE_STEP / r) { - p.point(r * p.cos(a), r * p.sin(a)); - } - } - p.noLoop(); - // p.beginShape(); p.POINTS, p.LINES, p.TRIANGLES, p.TRIANGLE_FAN, p.TRIANGLE_STRIP, p.QUADS, p.QUAD_STRIP - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/abstract.ts b/sketches/cyclone/abstract.ts deleted file mode 100644 index 1802aaf..0000000 --- a/sketches/cyclone/abstract.ts +++ /dev/null @@ -1,70 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; -const COUNT = 100; -const ANGLE_STEP = 0.01; // variance speed (frequency) -const AMP = 100; // variance at center -const TIGHTNESS = 150; -const EDGE_AMP = 0.15; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: i, - y: i * 5, - angle: p.PI / 2, - color: p.color(p.random(colors)), - //color: p.color(colors[i % colors.length]), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - drawBead(bead); - } - }; - - const drawBead = (bead: any) => { - p.stroke(bead.color); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP; - bead.x = p.sin(bead.angle) * AMP * yoyo; - bead.y++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/blur.ts b/sketches/cyclone/blur.ts deleted file mode 100644 index 11c282c..0000000 --- a/sketches/cyclone/blur.ts +++ /dev/null @@ -1,73 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "pastella"; - -const WALKER_COUNT = 100; -const STROKE_WEIGHT = 2; -const STEP = 50; -const ANGLE_STEP = 10; -const NOISE_FACTOR = 0.05; -const ANGLE_OFFSET = 270; - -const WALKERS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - p.angleMode(p.DEGREES); - - for (let i = 0; i < WALKER_COUNT; i++) { - WALKERS.push({ - x: p.random(-STEP, STEP), - y: p.random(-STEP, STEP), - angle: 0, - color: p.color(p.random(colors)), - }); - } - }; - - const TIGHTNESS = 100; - const AMP = 50; - - p.draw = () => { - //p.background(colors_bg); - //p.translate(-p.width / 2, p.height / 2); - //p.translate(p.width / 2, p.height / 2); - - for (let i = 0; i < WALKERS.length; i++) { - const w = WALKERS[i]; - w.color.setAlpha(Math.exp(2 * ((((w.angle + ANGLE_OFFSET) % 360) - 180) / TIGHTNESS) ** 2)); - p.strokeWeight( - STROKE_WEIGHT * - Math.exp(-1 * ((((w.angle + ANGLE_OFFSET) % 360) - 180) / TIGHTNESS) ** 2) * - AMP, - ); - p.stroke(w.color); - w.angle += ANGLE_STEP * p.noise(w.x * NOISE_FACTOR, w.y * NOISE_FACTOR); - w.x += STEP * p.cos(w.angle); - w.y += STEP * p.sin(w.angle); - p.point(w.x, w.y); - } - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/cursed.ts b/sketches/cyclone/cursed.ts deleted file mode 100644 index d89411b..0000000 --- a/sketches/cyclone/cursed.ts +++ /dev/null @@ -1,71 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; -const COUNT = 10000; -const ANGLE_STEP = 0.7; // variance speed (frequency) -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, - y: i * 2, - angle: i * ANGLE_STEP, - color: p.color(colors[i % colors.length]), - // color is overwritten by next line (duplicate key in original) - color2: p.color(p.random(colors)), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - drawBead(bead); - } - }; - - const drawBead = (bead: any) => { - p.stroke(bead.color); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP; - bead.x = p.sin(bead.angle) * AMP * yoyo; - bead.y++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/cyclone.ts b/sketches/cyclone/cyclone.ts deleted file mode 100644 index 8bf75de..0000000 --- a/sketches/cyclone/cyclone.ts +++ /dev/null @@ -1,80 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; // 2-4 optimal for 5 count? -const COUNT = 100; -const SPEED = 10; // rate of y growth, about a tenth of COUNT works -const ANGLE_STEP = 0.05; // frequency -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; -const OPACITY_CENTER = 255; // higher than 255 means higher on edges -const BEAD_OFFSET_Y = 2; // min 1, avoid matching stroke weight? - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - - const randy = p.random(p.TWO_PI); - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, //overriden by formula regardless - y: i * BEAD_OFFSET_Y, - angle: randy + i * p.random(ANGLE_STEP), - color: p.color(colors[i % colors.length]), - //color: p.color(p.random(colors)), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - if (bead.y > p.height) { - p.noLoop(); - //p.saveCanvas(); - } - } - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - const yoyangle = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP * yoyangle; // changes everything - bead.x = p.sin(bead.angle) * AMP * yoyo; - - bead.color.setAlpha(OPACITY_CENTER / yoyo); - p.stroke(bead.color); - (p.drawingContext as CanvasRenderingContext2D).shadowColor = bead.color; - p.strokeWeight(STROKE_WEIGHT + p.random(STROKE_WEIGHT, STROKE_WEIGHT * 2) * yoyo); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - bead.y += SPEED; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/dots.ts b/sketches/cyclone/dots.ts deleted file mode 100644 index d47e1df..0000000 --- a/sketches/cyclone/dots.ts +++ /dev/null @@ -1,73 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; -const COUNT = 100; -const ANGLE_STEP = 0.5; // frequency, wack around PI etc -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, - y: i * 2, - angle: i * ANGLE_STEP, - color: p.color(colors[i % colors.length]), - //color: p.color(p.random(colors)), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - drawBead(bead); - if (bead.y > p.height) { - p.noLoop(); - } - } - }; - - const drawBead = (bead: any) => { - p.stroke(bead.color); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP * yoyo; // changes everything, - bead.x = p.sin(bead.angle) * AMP * yoyo; - bead.y++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/flayed.ts b/sketches/cyclone/flayed.ts deleted file mode 100644 index 62880f3..0000000 --- a/sketches/cyclone/flayed.ts +++ /dev/null @@ -1,71 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; -const COUNT = 100; -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, - y: i * 2, - angle: (p.QUARTER_PI / COUNT) * i, - color: p.color(colors[i % colors.length]), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - drawBead(bead); - if (bead.y > p.height) { - p.noLoop(); - } - } - }; - - const drawBead = (bead: any) => { - p.stroke(bead.color); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += p.PI; - bead.x = p.sin(bead.angle) * AMP * yoyo; - bead.y++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/pattern-pi.ts b/sketches/cyclone/pattern-pi.ts deleted file mode 100644 index fad3297..0000000 --- a/sketches/cyclone/pattern-pi.ts +++ /dev/null @@ -1,73 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; -const COUNT = 100; -const ANGLE_STEP = 0.2; // frequency, wack around PI etc -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, - y: i * 2, - //angle: i * ANGLE_STEP, - angle: (p.QUARTER_PI / COUNT) * i, //QUARTER_PI, PI, TWO_PI - color: p.color(colors[i % colors.length]), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - drawBead(bead); - if (bead.y > p.height) { - p.noLoop(); - } - } - }; - - const drawBead = (bead: any) => { - p.stroke(bead.color); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP; - bead.x = p.sin(bead.angle) * AMP * yoyo; - bead.y++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/pattern.ts b/sketches/cyclone/pattern.ts deleted file mode 100644 index 24c2090..0000000 --- a/sketches/cyclone/pattern.ts +++ /dev/null @@ -1,73 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; -const COUNT = 100; -const ANGLE_STEP = 0.05; // frequency, wack around PI etc -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, - y: i * 2, - angle: i * ANGLE_STEP, //QUARTER_PI, PI, TWO_PI - //angle: (PI / COUNT) * i, //QUARTER_PI, PI, TWO_PI - color: p.color(colors[i % colors.length]), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - drawBead(bead); - if (bead.y > p.height + COUNT) { - p.noLoop(); - } - } - }; - - const drawBead = (bead: any) => { - p.stroke(bead.color); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP; - bead.x = p.sin(bead.angle) * AMP * yoyo; - bead.y++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/shape.ts b/sketches/cyclone/shape.ts deleted file mode 100644 index c2a773d..0000000 --- a/sketches/cyclone/shape.ts +++ /dev/null @@ -1,81 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 2; // 2-4 optimal for 5 count? -const COUNT = 100; -const SPEED = 10; // rate of y growth, about a tenth of COUNT works -const ANGLE_STEP = 0.05; // frequency -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; -const OPACITY_CENTER = 255; // higher than 255 means higher on edges -const BEAD_OFFSET_Y = 2; // min 1, avoid matching stroke weight? - -let palette: any; -let colors: any[]; -let colors_bg: any; - -const beads: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - - //const randy = p.random(p.TWO_PI); - const randy = p.TWO_PI; - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, //overriden by formula regardless - y: i * BEAD_OFFSET_Y, - angle: randy + i * ANGLE_STEP, - color: p.color(colors[i % colors.length]), - //color: p.color(p.random(colors)), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - if (bead.y > p.height) { - p.noLoop(); - //p.saveCanvas(); - } - } - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - const yoyangle = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP * yoyangle; // changes everything - bead.x = p.sin(bead.angle) * AMP * yoyo; - - bead.color.setAlpha(OPACITY_CENTER / yoyo); - p.stroke(bead.color); - (p.drawingContext as CanvasRenderingContext2D).shadowColor = bead.color; - p.strokeWeight(STROKE_WEIGHT + p.random(STROKE_WEIGHT, STROKE_WEIGHT * 2) * yoyo); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - bead.y += SPEED; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/cyclone/spinado.ts b/sketches/cyclone/spinado.ts deleted file mode 100644 index 996d05f..0000000 --- a/sketches/cyclone/spinado.ts +++ /dev/null @@ -1,80 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "termos"; -const STROKE_WEIGHT = 1; // 2-4 optimal for 5 count? -const COUNT = 10; -const SPEED = 1; // rate of y growth, about a tenth of COUNT works -const ANGLE_STEP = 0.05; // frequency -const AMP = 100; // variance at center -const EDGE_AMP = 0.15; -const TIGHTNESS = 150; -const OPACITY_CENTER = 255; // higher than 255 means higher on edges -const BEAD_OFFSET_Y = 2; // min 1, avoid matching stroke weight? - -const beads: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - - const randy = p.random(p.TWO_PI); - for (let i = 0; i < COUNT; i++) { - beads.push({ - x: 0, //overriden by formula regardless - y: i * BEAD_OFFSET_Y, - angle: randy + i * p.random(ANGLE_STEP), - color: p.color(colors[i % colors.length]), - //color: p.color(p.random(colors)), - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, 0); - for (let i = 0; i < beads.length; i++) { - const bead = beads[i]; - updateBead(bead); - if (bead.y > p.height) { - p.noLoop(); - //p.saveCanvas(); - } - } - }; - - const updateBead = (bead: any) => { - const yoyo = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - const yoyangle = Math.exp(EDGE_AMP * ((bead.y - p.height / 2) / TIGHTNESS) ** 2); - bead.angle += ANGLE_STEP * yoyangle; // changes everything - bead.x = p.sin(bead.angle) * AMP * yoyo; - - bead.color.setAlpha(OPACITY_CENTER / yoyo); - p.stroke(bead.color); - (p.drawingContext as CanvasRenderingContext2D).shadowColor = bead.color; - p.strokeWeight(STROKE_WEIGHT + p.random(STROKE_WEIGHT, STROKE_WEIGHT * 2) * yoyo); - p.point(bead.x, bead.y); - //p.circle(bead.x, bead.y, 100); - bead.y += SPEED; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/frokost/instagram.ts b/sketches/frokost/instagram.ts deleted file mode 100644 index 545ccb7..0000000 --- a/sketches/frokost/instagram.ts +++ /dev/null @@ -1,402 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - let _vMax: any, vMin: any, TEXT_SIZE: any, PALETTE: any, BLOBS: any, SPOTS: any; - let BG: p5.Color; - - const EXPORT = false; - const FRAME_LIMIT = 15 * 30; // 15 seconds at 30 fps - - // How spiky the blobs are - const BLOB_AMP = 0.5; - const LINE_AMP = 0.75; - const SPOT_AMP = 0.5; - - // How steep the easing curve is, tends to push blobs to their rMin or rMax - const BLOB_EASE_STEEPNESS = 4; - const SPOT_EASE_STEEPNESS = 5; - const LINE_EASE_STEEPNESS = 2; - - // The speed at which blobs grow and shrink - const BLOB_ANIMATION_SPEED = 0.004; - - // The speed at which the blob rotates in perlin noise space, made more noticable by more spiky blobs - const ROTATION_SPEED = 0.004; - - // A rough representation of the number of vertices that make up a blob, lower value = more points - const MAX_POINT_DIST = 15; - - // The thickness of lines - const STROKE_WEIGHT = 2; - - const SPOT_COUNT = 40; - const SPOT_X_SPREAD = 7; - const SPOT_Y_SPREAD = 0.5; - const SPOT_SLANT = 3; - const SPOT_APPEAR_NOISE = 0.005; - const SPOT_DURATION = EXPORT ? FRAME_LIMIT / 2 : 250; // 0 means the spots will always be visible - - const _MOVE_SPEED = 0.1; - const _MOVE_RADIUS = 100; - - /* - Config end - */ - - const easeInOutCool = (steepness: number, x: number) => { - const mappedX = p.map(x, 0, 1, -1, 1); - return (1 + Math.tanh(steepness * mappedX)) / 2; - }; - - class Shape { - z: any; - cx: any; - cy: any; - mrx: any; - mry: any; - mSpeed: any; - mAngle: any; - rMin: any; - rMax: any; - amp: any; - fillColor: any; - aStart: any; - aEnd: any; - line: any; - animationSpeed: any; - steepness: any; - disappearTime: any; - visible: any; - disappearTick: any; - - constructor({ - z, - cx, - cy, - mrx = 0, - mry = 0, - mSpeed = 0, - mAngle = p.random(p.TWO_PI), - rMin, - rMax, - amp = BLOB_AMP, - fillColor, - aStart = 0, - aEnd = p.TWO_PI, - line = false, - animationSpeed = BLOB_ANIMATION_SPEED, - steepness = BLOB_EASE_STEEPNESS, - disappearTime = 0, - }: any) { - this.z = z; - this.cx = cx; - this.cy = cy; - this.mrx = mrx; - this.mry = mry; - this.mSpeed = mSpeed; - this.mAngle = mAngle; - this.rMin = rMin; - this.rMax = rMax; - this.amp = amp; - this.fillColor = fillColor; - this.aStart = aStart; - this.aEnd = aEnd; - this.line = line; - this.animationSpeed = animationSpeed; - this.steepness = steepness; - this.disappearTime = disappearTime; - this.visible = this.disappearTime === 0; - this.disappearTick = - p.noise(cx * SPOT_APPEAR_NOISE, cy * SPOT_APPEAR_NOISE) * - this.disappearTime * - (1 - cy / p.height); - } - - draw() { - if (this.disappearTime !== 0) { - this.disappearTick++; - if (this.disappearTick >= this.disappearTime) { - this.visible = !this.visible; - this.disappearTick = 0; - } - } - - if (!this.visible) { - return; - } - - if (this.line) { - p.stroke(PALETTE.new_dark_line); - p.noFill(); - } else { - p.fill(this.fillColor); - } - - // Might put all of this in the constructor - const pointCount = p.max((p.TWO_PI * this.rMax) / MAX_POINT_DIST, 30); - const deltaA = this.aEnd - this.aStart; - const amp = this.amp; - - const rotation = p.frameCount * ROTATION_SPEED; - this.mAngle = (this.mAngle + this.mSpeed) % p.TWO_PI; - - /* Iterate through a full circle of angles to draw a blob */ - p.beginShape(); - for (let a = this.aStart; a <= this.aEnd; a += deltaA / pointCount) { - // Get coordinates in the perlin noise space - const xOff = p.map(p.cos(a + rotation), -1, 1, 0, amp); - const yOff = p.map(p.sin(a + rotation), -1, 1, 0, amp); - - const noiseValue = p.noise(xOff, yOff, this.z + p.frameCount * this.animationSpeed); - - const adjustedNoiseValue = easeInOutCool(this.steepness, noiseValue); - const noisedRadius = p.map(adjustedNoiseValue, 0, 1, this.rMin, this.rMax); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noisedRadius * p.cos(a); - const y = noisedRadius * p.sin(a); - - if (!this.line) { - const mx = this.mrx * p.cos(this.mAngle); - const my = this.mry * p.sin(this.mAngle); - p.vertex(this.cx + mx + x, this.cy + my + y); - } else { - p.vertex(this.cx + x, this.cy + y); - } - } - - if (this.line) { - p.endShape(); - p.noStroke(); - } else { - p.endShape(p.CLOSE); - } - } - } - - const setupBlobs = () => { - BLOBS = [ - new Shape({ - z: 10, - cx: p.width * -0.1, - cy: p.height * 0.9, - rMin: vMin * 0.1, - rMax: vMin * 0.3, - fillColor: PALETTE.sol_kontrast, - }), - new Shape({ - z: 20, - cx: p.width * -0.1, - cy: p.height * 0.1, - rMin: vMin * 0.1, - rMax: vMin * 0.45, - fillColor: PALETTE.kveld, - }), - new Shape({ - z: 30, - cx: 0, - cy: p.height * 0.5, - rMin: vMin * 0.1, - rMax: vMin * 0.2, - fillColor: PALETTE.new_dark, - }), - new Shape({ - z: 40, - cx: p.width * 0.9, - cy: p.height, - rMin: vMin * 0.1, - rMax: vMin * 0.3, - fillColor: PALETTE.hvit, - }), - new Shape({ - z: 50, - cx: p.width * 1, - cy: p.height * 0.75, - rMin: vMin * 0.1, - rMax: vMin * 0.3, - fillColor: PALETTE.sol_kontrast, - }), - new Shape({ - z: 60, - cx: p.width * 1.2, - cy: p.height * 0.5, - rMin: vMin * 0.2, - rMax: vMin * 0.4, - fillColor: PALETTE.grønn_kontrast, - }), - new Shape({ - z: 100, - cx: 0, - cy: 0, - rMin: vMin * 0.2, - rMax: vMin * 0.4, - aEnd: p.PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 200, - cx: p.width, - cy: p.height, - rMin: vMin * 0.1, - rMax: vMin * 0.3, - aStart: p.PI, - aEnd: p.PI + p.HALF_PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 300, - cx: p.width, - cy: p.height, - rMin: vMin * 0.15, - rMax: vMin * 0.35, - aStart: p.PI, - aEnd: p.PI + p.HALF_PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 1000, - cx: p.width / 2, - cy: p.height / 2, - rMin: vMin * 0.15, - rMax: vMin * 0.3, - fillColor: PALETTE.hvit, - }), - new Shape({ - z: 2000, - cx: p.width / 2, - cy: p.height / 2, - rMin: vMin * 0.2, - rMax: vMin * 0.35, - fillColor: PALETTE.new_dark, - }), - ]; - - SPOTS = []; - const SPOT_RMAX = vMin * 0.015; - for (let i = 0; i < SPOT_COUNT; i++) { - SPOTS.push( - new Shape({ - z: i, - cx: - p.width * 0.2 + - p.random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) - - i * SPOT_SLANT, - cy: i * SPOT_RMAX * SPOT_Y_SPREAD, - rMin: vMin * 0.005, - rMax: SPOT_RMAX, - amp: SPOT_AMP, - fillColor: PALETTE.new_blue, - animationSpeed: 0, - steepness: SPOT_EASE_STEEPNESS, - disappearTime: SPOT_DURATION, - }), - ); - SPOTS.push( - new Shape({ - z: i + SPOT_COUNT, - cx: - p.width * 0.8 + - p.random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) + - i * SPOT_SLANT, - cy: p.height - i * SPOT_RMAX * SPOT_Y_SPREAD, - rMin: vMin * 0.005, - rMax: SPOT_RMAX, - amp: SPOT_AMP, - fillColor: PALETTE.new_blue, - animationSpeed: 0, - steepness: SPOT_EASE_STEEPNESS, - disappearTime: SPOT_DURATION, - }), - ); - } - }; - - const windowResized = () => { - vMin = p.min(p.width, p.height); - _vMax = p.max(p.width, p.height); - (p as any).resizeCanvas(1080, 1080); - - setupBlobs(); - - // Intrinsically tied to the rMin of central blob - TEXT_SIZE = vMin * 0.075; - p.textSize(TEXT_SIZE); - }; - - p.setup = () => { - p.colorMode(p.HSL); - p.createCanvas(1080, 1080); - p.pixelDensity(1); - p.frameRate(EXPORT ? 4 : 30); - - PALETTE = { - new_dark: p.color("#1c2c3c"), - new_dark_line: p.color("#1c2c3c"), - new_blue: p.color("#293895"), - // sort: p.color("#0E0E0E"), - hvit: p.color("#FFFFFF"), - soloppgang: p.color("#FFB88D"), - // soloppgang_kontrast: p.color("#FF8034"), - // regn: p.color("#BCCEDD"), - // regn_kontrast: p.color("#7E9CB9"), - skyfritt: p.color("#B1E8FF"), - // skyfritt_kontrast: p.color("#43CBFF"), - // overskyet: p.color("#E7E7E7"), - // overskyet_kontrast: p.color("#CECECE"), - solnedgang: p.color("#FF9999"), - // solnedgang_kontrast: p.color("#FF5B5B"), - sol: p.color("#FFF2AD"), - sol_kontrast: p.color("#FFF02B"), - kveld: p.color("#E5B1FF"), - // kveld_kontrast: p.color("#8E24C9"), - // grønn: p.color("#A1F5E3"), - grønn_kontrast: p.color("#16DBC4"), - // natt: p.color("#6D7ABB"), - // natt_kontrast: p.color("#162365"), - }; - PALETTE.new_dark_line.setAlpha(0.75 * 255); - BG = PALETTE.sol; - - windowResized(); - setupBlobs(); - - p.textAlign(p.CENTER); - (p as any).textFont("Newzald"); - - p.strokeWeight(STROKE_WEIGHT); - p.noStroke(); - (p as any).strokeCap((p as any).PROJECT); - }; - - p.draw = () => { - /* Home-made helper function to select background based on config */ - p.background(BG); - - for (let b = 0; b < BLOBS.length; b++) { - const blob = BLOBS[b]; - blob.draw(); - } - - for (let s = 0; s < SPOTS.length; s++) { - const spot = SPOTS[s]; - spot.draw(); - } - - p.fill(PALETTE.hvit); - p.text("Frontend", p.width / 2, p.height / 2); - p.text("til frokost", p.width / 2, p.height / 2 + TEXT_SIZE); - - if (EXPORT) { - p.saveCanvas(p.frameCount.toString().padStart(3, "0"), "png"); - if (FRAME_LIMIT < p.frameCount) { - p.noLoop(); - } - } - }; -}); diff --git a/sketches/frokost/story.ts b/sketches/frokost/story.ts deleted file mode 100644 index 2d59cf2..0000000 --- a/sketches/frokost/story.ts +++ /dev/null @@ -1,402 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - let _vMax: any, vMin: any, TEXT_SIZE: any, PALETTE: any, BLOBS: any, SPOTS: any; - let BG: p5.Color; - - const EXPORT = false; - const FRAME_LIMIT = 15 * 30; // 15 seconds at 30 fps - - // How spiky the blobs are - const BLOB_AMP = 0.5; - const LINE_AMP = 0.75; - const SPOT_AMP = 0.5; - - // How steep the easing curve is, tends to push blobs to their rMin or rMax - const BLOB_EASE_STEEPNESS = 4; - const SPOT_EASE_STEEPNESS = 5; - const LINE_EASE_STEEPNESS = 2; - - // The speed at which blobs grow and shrink - const BLOB_ANIMATION_SPEED = 0.004; - - // The speed at which the blob rotates in perlin noise space, made more noticable by more spiky blobs - const ROTATION_SPEED = 0.004; - - // A rough representation of the number of vertices that make up a blob, lower value = more points - const MAX_POINT_DIST = 15; - - // The thickness of lines - const STROKE_WEIGHT = 2; - - const SPOT_COUNT = 40; - const SPOT_X_SPREAD = 7; - const SPOT_Y_SPREAD = 0.5; - const SPOT_SLANT = 3; - const SPOT_APPEAR_NOISE = 0.005; - const SPOT_DURATION = EXPORT ? FRAME_LIMIT / 2 : 250; // 0 means the spots will always be visible - - const _MOVE_SPEED = 0.1; - const _MOVE_RADIUS = 100; - - /* - Config end - */ - - const easeInOutCool = (steepness: number, x: number) => { - const mappedX = p.map(x, 0, 1, -1, 1); - return (1 + Math.tanh(steepness * mappedX)) / 2; - }; - - class Shape { - z: any; - cx: any; - cy: any; - mrx: any; - mry: any; - mSpeed: any; - mAngle: any; - rMin: any; - rMax: any; - amp: any; - fillColor: any; - aStart: any; - aEnd: any; - line: any; - animationSpeed: any; - steepness: any; - disappearTime: any; - visible: any; - disappearTick: any; - - constructor({ - z, - cx, - cy, - mrx = 0, - mry = 0, - mSpeed = 0, - mAngle = p.random(p.TWO_PI), - rMin, - rMax, - amp = BLOB_AMP, - fillColor, - aStart = 0, - aEnd = p.TWO_PI, - line = false, - animationSpeed = BLOB_ANIMATION_SPEED, - steepness = BLOB_EASE_STEEPNESS, - disappearTime = 0, - }: any) { - this.z = z; - this.cx = cx; - this.cy = cy; - this.mrx = mrx; - this.mry = mry; - this.mSpeed = mSpeed; - this.mAngle = mAngle; - this.rMin = rMin; - this.rMax = rMax; - this.amp = amp; - this.fillColor = fillColor; - this.aStart = aStart; - this.aEnd = aEnd; - this.line = line; - this.animationSpeed = animationSpeed; - this.steepness = steepness; - this.disappearTime = disappearTime; - this.visible = this.disappearTime === 0; - this.disappearTick = - p.noise(cx * SPOT_APPEAR_NOISE, cy * SPOT_APPEAR_NOISE) * - this.disappearTime * - (1 - cy / p.height); - } - - draw() { - if (this.disappearTime !== 0) { - this.disappearTick++; - if (this.disappearTick >= this.disappearTime) { - this.visible = !this.visible; - this.disappearTick = 0; - } - } - - if (!this.visible) { - return; - } - - if (this.line) { - p.stroke(PALETTE.new_dark_line); - p.noFill(); - } else { - p.fill(this.fillColor); - } - - // Might put all of this in the constructor - const pointCount = p.max((p.TWO_PI * this.rMax) / MAX_POINT_DIST, 30); - const deltaA = this.aEnd - this.aStart; - const amp = this.amp; - - const rotation = p.frameCount * ROTATION_SPEED; - this.mAngle = (this.mAngle + this.mSpeed) % p.TWO_PI; - - /* Iterate through a full circle of angles to draw a blob */ - p.beginShape(); - for (let a = this.aStart; a <= this.aEnd; a += deltaA / pointCount) { - // Get coordinates in the perlin noise space - const xOff = p.map(p.cos(a + rotation), -1, 1, 0, amp); - const yOff = p.map(p.sin(a + rotation), -1, 1, 0, amp); - - const noiseValue = p.noise(xOff, yOff, this.z + p.frameCount * this.animationSpeed); - - const adjustedNoiseValue = easeInOutCool(this.steepness, noiseValue); - const noisedRadius = p.map(adjustedNoiseValue, 0, 1, this.rMin, this.rMax); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noisedRadius * p.cos(a); - const y = noisedRadius * p.sin(a); - - if (!this.line) { - const mx = this.mrx * p.cos(this.mAngle); - const my = this.mry * p.sin(this.mAngle); - p.vertex(this.cx + mx + x, this.cy + my + y); - } else { - p.vertex(this.cx + x, this.cy + y); - } - } - - if (this.line) { - p.endShape(); - p.noStroke(); - } else { - p.endShape(p.CLOSE); - } - } - } - - const setupBlobs = () => { - BLOBS = [ - new Shape({ - z: 10, - cx: p.width * -0.1, - cy: p.height * 0.9, - rMin: vMin * 0.2, - rMax: vMin * 0.5, - fillColor: PALETTE.sol_kontrast, - }), - new Shape({ - z: 20, - cx: 0, - cy: p.height * 0.1, - rMin: vMin * 0.2, - rMax: vMin * 0.45, - fillColor: PALETTE.kveld, - }), - new Shape({ - z: 30, - cx: p.width * -0.2, - cy: p.height * 0.5, - rMin: vMin * 0.2, - rMax: vMin * 0.5, - fillColor: PALETTE.new_dark, - }), - new Shape({ - z: 40, - cx: p.width * 0.8, - cy: p.height * 0.9, - rMin: vMin * 0.2, - rMax: vMin * 0.4, - fillColor: PALETTE.hvit, - }), - new Shape({ - z: 50, - cx: p.width * 1, - cy: p.height * 0.7, - rMin: vMin * 0.2, - rMax: vMin * 0.5, - fillColor: PALETTE.sol_kontrast, - }), - new Shape({ - z: 60, - cx: p.width * 1.2, - cy: p.height * 0.5, - rMin: vMin * 0.2, - rMax: vMin * 0.4, - fillColor: PALETTE.grønn_kontrast, - }), - new Shape({ - z: 100, - cx: 0, - cy: 0, - rMin: vMin * 0.2, - rMax: vMin * 0.6, - aEnd: p.PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 200, - cx: p.width, - cy: p.height, - rMin: vMin * 0.2, - rMax: vMin * 0.6, - aStart: p.PI, - aEnd: p.PI + p.HALF_PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 300, - cx: p.width, - cy: p.height, - rMin: vMin * 0.15, - rMax: vMin * 0.55, - aStart: p.PI, - aEnd: p.PI + p.HALF_PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 1000, - cx: p.width / 2, - cy: p.height / 2, - rMin: vMin * 0.15, - rMax: vMin * 0.3, - fillColor: PALETTE.hvit, - }), - new Shape({ - z: 2000, - cx: p.width / 2, - cy: p.height / 2, - rMin: vMin * 0.2, - rMax: vMin * 0.35, - fillColor: PALETTE.new_dark, - }), - ]; - - SPOTS = []; - const SPOT_RMAX = vMin * 0.02; - for (let i = 0; i < SPOT_COUNT; i++) { - SPOTS.push( - new Shape({ - z: i, - cx: - p.width * 0.3 + - p.random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) - - i * SPOT_SLANT, - cy: i * SPOT_RMAX * SPOT_Y_SPREAD, - rMin: vMin * 0.005, - rMax: SPOT_RMAX, - amp: SPOT_AMP, - fillColor: PALETTE.new_blue, - animationSpeed: 0, - steepness: SPOT_EASE_STEEPNESS, - disappearTime: SPOT_DURATION, - }), - ); - SPOTS.push( - new Shape({ - z: i + SPOT_COUNT, - cx: - p.width * 0.7 + - p.random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) + - i * SPOT_SLANT, - cy: p.height - i * SPOT_RMAX * SPOT_Y_SPREAD, - rMin: vMin * 0.005, - rMax: SPOT_RMAX, - amp: SPOT_AMP, - fillColor: PALETTE.new_blue, - animationSpeed: 0, - steepness: SPOT_EASE_STEEPNESS, - disappearTime: SPOT_DURATION, - }), - ); - } - }; - - const windowResized = () => { - vMin = p.min(p.width, p.height); - _vMax = p.max(p.width, p.height); - (p as any).resizeCanvas(1080, 1920); - - setupBlobs(); - - // Intrinsically tied to the rMin of central blob - TEXT_SIZE = vMin * 0.075; - p.textSize(TEXT_SIZE); - }; - - p.setup = () => { - p.colorMode(p.HSL); - p.createCanvas(1080, 1920); - p.pixelDensity(1); - p.frameRate(EXPORT ? 4 : 30); - - PALETTE = { - new_dark: p.color("#1c2c3c"), - new_dark_line: p.color("#1c2c3c"), - new_blue: p.color("#293895"), - // sort: p.color("#0E0E0E"), - hvit: p.color("#FFFFFF"), - soloppgang: p.color("#FFB88D"), - // soloppgang_kontrast: p.color("#FF8034"), - // regn: p.color("#BCCEDD"), - // regn_kontrast: p.color("#7E9CB9"), - skyfritt: p.color("#B1E8FF"), - // skyfritt_kontrast: p.color("#43CBFF"), - // overskyet: p.color("#E7E7E7"), - // overskyet_kontrast: p.color("#CECECE"), - solnedgang: p.color("#FF9999"), - // solnedgang_kontrast: p.color("#FF5B5B"), - sol: p.color("#FFF2AD"), - sol_kontrast: p.color("#FFF02B"), - kveld: p.color("#E5B1FF"), - // kveld_kontrast: p.color("#8E24C9"), - // grønn: p.color("#A1F5E3"), - grønn_kontrast: p.color("#16DBC4"), - // natt: p.color("#6D7ABB"), - // natt_kontrast: p.color("#162365"), - }; - PALETTE.new_dark_line.setAlpha(0.75 * 255); - BG = PALETTE.sol; - - windowResized(); - setupBlobs(); - - p.textAlign(p.CENTER); - (p as any).textFont("Newzald"); - - p.strokeWeight(STROKE_WEIGHT); - p.noStroke(); - (p as any).strokeCap((p as any).PROJECT); - }; - - p.draw = () => { - /* Home-made helper function to select background based on config */ - p.background(BG); - - for (let b = 0; b < BLOBS.length; b++) { - const blob = BLOBS[b]; - blob.draw(); - } - - for (let s = 0; s < SPOTS.length; s++) { - const spot = SPOTS[s]; - spot.draw(); - } - - p.fill(PALETTE.hvit); - p.text("Frontend", p.width / 2, p.height / 2); - p.text("til frokost", p.width / 2, p.height / 2 + TEXT_SIZE); - - if (EXPORT) { - p.saveCanvas(p.frameCount.toString().padStart(3, "0"), "png"); - if (FRAME_LIMIT < p.frameCount) { - p.noLoop(); - } - } - }; -}); diff --git a/sketches/frokost/web.ts b/sketches/frokost/web.ts deleted file mode 100644 index 4ac67c6..0000000 --- a/sketches/frokost/web.ts +++ /dev/null @@ -1,401 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - let _vMax: any, vMin: any, TEXT_SIZE: any, PALETTE: any, BLOBS: any, SPOTS: any; - let BG: p5.Color; - - const SHOW_TEXT = false; - - // How spiky the blobs are - const BLOB_AMP = 0.5; - const LINE_AMP = 0.75; - const SPOT_AMP = 0.5; - - // How steep the easing curve is, tends to push blobs to their rMin or rMax - const BLOB_EASE_STEEPNESS = 4; - const SPOT_EASE_STEEPNESS = 5; - const LINE_EASE_STEEPNESS = 2; - - // The speed at which blobs grow and shrink - const BLOB_ANIMATION_SPEED = 0.002; - - // The speed at which the blob rotates in perlin noise space, made more noticable by more spiky blobs - const ROTATION_SPEED = 0.002; - - // A rough representation of the number of vertices that make up a blob, lower value = more points - const MAX_POINT_DIST = 15; - - // The thickness of lines - const STROKE_WEIGHT = 2; - - const RANDOM_COLORS = false; - - const SPOT_COUNT = 40; - const SPOT_X_SPREAD = 7; - const SPOT_Y_SPREAD = 0.5; - const SPOT_SLANT = 2; - const SPOT_APPEAR_NOISE = 0.005; - const SPOT_DURATION = 500; // 0 means the spots will always be visible - - const _MOVE_SPEED = 0.1; - const _MOVE_RADIUS = 100; - - /* - Config end - */ - - const easeInOutCool = (steepness: number, x: number) => { - const mappedX = p.map(x, 0, 1, -1, 1); - return (1 + Math.tanh(steepness * mappedX)) / 2; - }; - - const randomColor = () => { - const keys = Object.keys(PALETTE); - return PALETTE[keys[(keys.length * Math.random()) << 0]]; - }; - - class Shape { - z: any; - cx: any; - cy: any; - mrx: any; - mry: any; - mSpeed: any; - mAngle: any; - rMin: any; - rMax: any; - amp: any; - fillColor: any; - aStart: any; - aEnd: any; - line: any; - animationSpeed: any; - steepness: any; - disappearTime: any; - visible: any; - disappearTick: any; - - constructor({ - z, - cx, - cy, - mrx = 0, - mry = 0, - mSpeed = 0, - mAngle = p.random(p.TWO_PI), - rMin, - rMax, - amp = BLOB_AMP, - fillColor, - aStart = 0, - aEnd = p.TWO_PI, - line = false, - animationSpeed = BLOB_ANIMATION_SPEED, - steepness = BLOB_EASE_STEEPNESS, - disappearTime = 0, - }: any) { - this.z = z; - this.cx = cx; - this.cy = cy; - this.mrx = mrx; - this.mry = mry; - this.mSpeed = mSpeed; - this.mAngle = mAngle; - this.rMin = rMin; - this.rMax = rMax; - this.amp = amp; - this.fillColor = fillColor; - this.aStart = aStart; - this.aEnd = aEnd; - this.line = line; - this.animationSpeed = animationSpeed; - this.steepness = steepness; - this.disappearTime = disappearTime; - this.visible = this.disappearTime === 0; - this.disappearTick = - p.noise(cx * SPOT_APPEAR_NOISE, cy * SPOT_APPEAR_NOISE) * - this.disappearTime * - (1 - cy / p.height); - } - - draw() { - if (this.disappearTime !== 0) { - this.disappearTick++; - if (this.disappearTick >= this.disappearTime) { - this.visible = !this.visible; - this.disappearTick = 0; - } - } - - if (!this.visible) { - return; - } - - if (this.line) { - p.stroke(PALETTE.new_dark_line); - p.noFill(); - } else { - p.fill(this.fillColor); - } - - // Might put all of this in the constructor - const pointCount = p.max((p.TWO_PI * this.rMax) / MAX_POINT_DIST, 30); - const deltaA = this.aEnd - this.aStart; - const amp = this.amp; - - const rotation = p.frameCount * ROTATION_SPEED; - this.mAngle = (this.mAngle + this.mSpeed) % p.TWO_PI; - - /* Iterate through a full circle of angles to draw a blob */ - p.beginShape(); - for (let a = this.aStart; a <= this.aEnd; a += deltaA / pointCount) { - // Get coordinates in the perlin noise space - const xOff = p.map(p.cos(a + rotation), -1, 1, 0, amp); - const yOff = p.map(p.sin(a + rotation), -1, 1, 0, amp); - - const noiseValue = p.noise(xOff, yOff, this.z + p.frameCount * this.animationSpeed); - - const adjustedNoiseValue = easeInOutCool(this.steepness, noiseValue); - const noisedRadius = p.map(adjustedNoiseValue, 0, 1, this.rMin, this.rMax); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noisedRadius * p.cos(a); - const y = noisedRadius * p.sin(a); - - if (!this.line) { - const mx = this.mrx * p.cos(this.mAngle); - const my = this.mry * p.sin(this.mAngle); - p.vertex(this.cx + mx + x, this.cy + my + y); - } else { - p.vertex(this.cx + x, this.cy + y); - } - } - - if (this.line) { - p.endShape(); - p.noStroke(); - } else { - p.endShape(p.CLOSE); - } - } - } - - const setupBlobs = () => { - BLOBS = [ - new Shape({ - z: 10, - cx: 0, - cy: p.height * 0.9, - rMin: vMin * 0.1, - rMax: vMin * 0.4, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, - }), - new Shape({ - z: 20, - cx: p.width * 0.05, - cy: p.height * 0.2, - rMin: vMin * 0.25, - rMax: vMin * 0.5, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.kveld, - }), - new Shape({ - z: 30, - cx: 0, - cy: p.height * 0.5, - rMin: vMin * 0.1, - rMax: vMin * 0.3, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_dark, - }), - new Shape({ - z: 40, - cx: p.width * 0.8, - cy: p.height, - rMin: vMin * 0.1, - rMax: vMin * 0.3, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, - }), - new Shape({ - z: 50, - cx: p.width * 0.9, - cy: p.height * 0.75, - rMin: vMin * 0.2, - rMax: vMin * 0.4, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.sol_kontrast, - }), - new Shape({ - z: 60, - cx: p.width * 1, - cy: p.height * 0.5, - rMin: vMin * 0.2, - rMax: vMin * 0.5, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.grønn_kontrast, - }), - new Shape({ - z: 100, - cx: 0, - cy: 0, - rMin: vMin * 0.2, - rMax: vMin * 0.8, - aEnd: p.PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 200, - cx: p.width, - cy: p.height, - rMin: vMin * 0.25, - rMax: vMin * 0.45, - aStart: p.PI, - aEnd: p.PI + p.HALF_PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 300, - cx: p.width, - cy: p.height, - rMin: vMin * 0.35, - rMax: vMin * 0.55, - aStart: p.PI, - aEnd: p.PI + p.HALF_PI, - line: true, - amp: LINE_AMP, - steepness: LINE_EASE_STEEPNESS, - }), - new Shape({ - z: 1000, - cx: p.width / 2, - cy: p.height / 2, - rMin: vMin * 0.2, - rMax: vMin * 0.4, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.hvit, - }), - new Shape({ - z: 2000, - cx: p.width / 2, - cy: p.height / 2, - rMin: vMin * 0.25, - rMax: vMin * 0.45, - fillColor: PALETTE.new_dark, - }), - ]; - - SPOTS = []; - const SPOT_RMAX = vMin * 0.025; - for (let i = 0; i < SPOT_COUNT; i++) { - SPOTS.push( - new Shape({ - z: i, - cx: - p.width * 0.25 + - p.random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) - - i * SPOT_SLANT, - cy: i * SPOT_RMAX * SPOT_Y_SPREAD, - rMin: vMin * 0.005, - rMax: SPOT_RMAX, - amp: SPOT_AMP, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, - animationSpeed: 0, - steepness: SPOT_EASE_STEEPNESS, - disappearTime: SPOT_DURATION, - }), - ); - SPOTS.push( - new Shape({ - z: i + SPOT_COUNT, - cx: - p.width * 0.75 + - p.random(-SPOT_RMAX * SPOT_X_SPREAD, SPOT_RMAX * SPOT_X_SPREAD) + - i * SPOT_SLANT, - cy: p.height - i * SPOT_RMAX * SPOT_Y_SPREAD, - rMin: vMin * 0.005, - rMax: SPOT_RMAX, - amp: SPOT_AMP, - fillColor: RANDOM_COLORS ? randomColor() : PALETTE.new_blue, - animationSpeed: 0, - steepness: SPOT_EASE_STEEPNESS, - disappearTime: SPOT_DURATION, - }), - ); - } - }; - - const windowResized = () => { - vMin = p.min(p.width, p.height); - _vMax = p.max(p.width, p.height); - (p as any).resizeCanvas((p as any).windowWidth, p.round((p as any).windowWidth / 2.75)); - - setupBlobs(); - - // Intrinsically tied to the rMin of central blob - TEXT_SIZE = vMin * 0.1; - p.textSize(TEXT_SIZE); - }; - - p.setup = () => { - p.colorMode(p.HSL); - p.createCanvas((p as any).windowWidth, p.round((p as any).windowWidth / 2.75)); - - PALETTE = { - new_dark: p.color("#1c2c3c"), - new_dark_line: p.color("#1c2c3c"), - new_blue: p.color("#293895"), - // sort: p.color("#0E0E0E"), - hvit: p.color("#FFFFFF"), - soloppgang: p.color("#FFB88D"), - // soloppgang_kontrast: p.color("#FF8034"), - // regn: p.color("#BCCEDD"), - // regn_kontrast: p.color("#7E9CB9"), - skyfritt: p.color("#B1E8FF"), - // skyfritt_kontrast: p.color("#43CBFF"), - // overskyet: p.color("#E7E7E7"), - // overskyet_kontrast: p.color("#CECECE"), - solnedgang: p.color("#FF9999"), - // solnedgang_kontrast: p.color("#FF5B5B"), - sol: p.color("#FFF2AD"), - sol_kontrast: p.color("#FFF02B"), - kveld: p.color("#E5B1FF"), - // kveld_kontrast: p.color("#8E24C9"), - // grønn: p.color("#A1F5E3"), - grønn_kontrast: p.color("#16DBC4"), - // natt: p.color("#6D7ABB"), - // natt_kontrast: p.color("#162365"), - }; - PALETTE.new_dark_line.setAlpha(0.75 * 255); - BG = PALETTE.sol; - - windowResized(); - setupBlobs(); - - p.textAlign(p.CENTER); - (p as any).textFont("Newzald"); - - p.strokeWeight(STROKE_WEIGHT); - p.noStroke(); - (p as any).strokeCap((p as any).PROJECT); - }; - - p.draw = () => { - /* Home-made helper function to select background based on config */ - p.background(BG); - - for (let b = 0; b < BLOBS.length; b++) { - const blob = BLOBS[b]; - blob.draw(); - } - - for (let s = 0; s < SPOTS.length; s++) { - const spot = SPOTS[s]; - spot.draw(); - } - - if (SHOW_TEXT) { - p.fill(PALETTE.hvit); - p.text("Frontend", p.width / 2, p.height / 2); - p.text("til frokost", p.width / 2, p.height / 2 + TEXT_SIZE); - } - }; -}); diff --git a/sketches/glyphs/decay.ts b/sketches/glyphs/decay.ts deleted file mode 100644 index 6fac13b..0000000 --- a/sketches/glyphs/decay.ts +++ /dev/null @@ -1,123 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; -let colors: any; - -let colors_bg: any; - -const PALETTE_NAME = "redrange"; - -let padding: any; - -const MAXPOLY = 8; -const POLYCOUNT = MAXPOLY - 1; - -let STROKE_WEIGHT = 3; - -let jumpx: any; -let jumpy: any; -let col: any; -let row: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - - p.fill(colors_bg); - - p.frameRate(2); - - padding = 1080 / 5; - - jumpx = (p.width - padding * 2) / (POLYCOUNT - 1); - jumpy = (p.height - padding * 2) / (POLYCOUNT - 1); - }; - - p.draw = () => { - p.background(colors_bg); - row = 1; - for (let y = padding; y <= p.height - padding; y += jumpy) { - col = 2; - for (let x = padding; x <= p.width - padding; x += jumpx) { - p.push(); - p.translate(x, y); - p.rotate(-p.PI / 2); - if (col == 1) { - p.point(0, 0); - } else { - polygon(0, 0, jumpx * 0.3, col, row); - } - p.pop(); - col++; - } - row++; - } - // p.noLoop(); - }; - - const polygon = (x: any, y: any, radius: any, npoints: any, row: any) => { - let angle = p.TWO_PI / npoints; - const vertices: any[] = []; - for (let a = 0; a < p.TWO_PI; a += angle) { - let sx = x + p.cos(a) * radius; - let sy = y + p.sin(a) * radius; - vertices.push([sx, sy]); - } - - for (let v = 0; v < vertices.length; v++) { - p.stroke(p.random(colors)); - const vert = vertices[v]; - if (v === 0 && npoints) { - consider(vert, vertices[vertices.length - 1], row); - consider(vert, [x, y], row); - consider(vert, vertices[v + 1], row); - } else if (v === vertices.length - 1) { - consider(vert, vertices[v - 1], row); - consider(vert, [x, y], row); - consider(vert, vertices[0], row); - } else { - consider(vert, vertices[v - 1], row); - consider(vert, [x, y], row); - consider(vert, vertices[v + 1], row); - } - } - }; - - const consider = (vert: any, nuvert: any, row: any) => { - const DECAY = ((jumpy / (POLYCOUNT - row + 1)) * p.random(row - 1)) / POLYCOUNT; - const randy = 0.25 * (row - 1); - if (p.random() < 0.5) { - p.strokeWeight( - STROKE_WEIGHT * p.random(1 - (0.2 / POLYCOUNT) * row, 1 + (row - 1) / POLYCOUNT), - ); - p.line( - vert[0] + DECAY * p.random(-randy, randy), - vert[1] + DECAY * p.random(-randy, randy), - nuvert[0] + DECAY * p.random(-randy, randy), - nuvert[1] + DECAY * p.random(-randy, randy), - ); - p.strokeWeight(STROKE_WEIGHT * 3); - p.point(vert[0] + DECAY * p.random(-randy, randy), vert[1] + DECAY * p.random(-randy, randy)); - p.point( - nuvert[0] + DECAY * p.random(-randy, randy), - nuvert[1] + DECAY * p.random(-randy, randy), - ); - p.strokeWeight(STROKE_WEIGHT); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/glyphs/pigpen.ts b/sketches/glyphs/pigpen.ts deleted file mode 100644 index 9e95b14..0000000 --- a/sketches/glyphs/pigpen.ts +++ /dev/null @@ -1,170 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; -let colors: any; - -let colors_bg: any; - -const PALETTE_NAME = "pastella"; - -const STROKE_WEIGHT = 3; - -const CODE: any = { - A: { shape: "L", rotation: 0, hasDot: false }, - B: { shape: "U", rotation: 0, hasDot: false }, - C: { shape: "L", rotation: 90, hasDot: false }, - D: { shape: "U", rotation: -90, hasDot: false }, - E: { shape: "O", rotation: 0, hasDot: false }, - F: { shape: "U", rotation: 90, hasDot: false }, - G: { shape: "L", rotation: -90, hasDot: false }, - H: { shape: "U", rotation: 180, hasDot: false }, - I: { shape: "L", rotation: 180, hasDot: false }, - J: { shape: "L", rotation: 0, hasDot: true }, - K: { shape: "U", rotation: 0, hasDot: true }, - L: { shape: "L", rotation: 90, hasDot: true }, - M: { shape: "U", rotation: -90, hasDot: true }, - N: { shape: "O", rotation: 0, hasDot: true }, - O: { shape: "U", rotation: 90, hasDot: true }, - P: { shape: "L", rotation: -90, hasDot: true }, - Q: { shape: "U", rotation: 180, hasDot: true }, - R: { shape: "L", rotation: 180, hasDot: true }, - S: { shape: "V", rotation: 0, hasDot: false }, - T: { shape: "V", rotation: -90, hasDot: false }, - U: { shape: "V", rotation: 90, hasDot: false }, - V: { shape: "V", rotation: 180, hasDot: false }, - W: { shape: "V", rotation: 0, hasDot: true }, - X: { shape: "V", rotation: -90, hasDot: true }, - Y: { shape: "V", rotation: 90, hasDot: true }, - Z: { shape: "V", rotation: 180, hasDot: true }, - ",": { shape: "", rotation: 0, hasDot: true }, - ".": { shape: "", rotation: 0, hasDot: true }, - "'": { shape: "", rotation: 0, hasDot: true }, - "-": { shape: "", rotation: 0, hasDot: true }, - "(": { shape: "", rotation: 0, hasDot: true }, - ")": { shape: "", rotation: 0, hasDot: true }, - "?": { shape: "", rotation: 0, hasDot: true }, - " ": { shape: "", rotation: 0, hasDot: false }, - "": { shape: "", rotation: 0, hasDot: false }, -}; - -let padding: any; - -const PRECODES = [ - "The pigpen cipher (alternatively referred to as the masonic cipher, Freemason's cipher, Napoleon cipher, and tic-tac-toe cipher) is a geometric simple substitution cipher, which exchanges letters for symbols which are fragments of a grid. The example key shows one way the letters can be assigned to the grid. The use of symbols instead of letters is no impediment to cryptanalysis, and this system is identical to that of other simple monoalphabetic substitution schemes. Due to the simplicity of the cipher, it is often included in children's books on ciphers and secret writing.", -]; - -let PRECODED: any; - -let GRIDCOUNT: any; - -let gapfactor = 0.35375 * 1; - -let jumpx: any; -let jumpy: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - //p.fill(colors_bg); - p.noFill(); - - (p as any).strokeCap((p as any).SQUARE); - - p.angleMode(p.DEGREES); - - p.frameRate(1); - - PRECODED = PRECODES[0].toUpperCase(); - - padding = 1080 / 8; - - GRIDCOUNT = p.ceil(p.sqrt(PRECODED.length)); - - jumpx = (p.width - padding * 2) / (GRIDCOUNT - 1); - jumpy = (p.height - padding * 2) / (GRIDCOUNT - 1); - }; - - p.draw = () => { - let count = 0; - let char = ""; - - p.background(colors_bg); - - for (let y = padding; y <= p.height - padding; y += jumpy) { - for (let x = padding; x <= p.width - padding; x += jumpx) { - char = ""; - p.stroke(colors[count % colors.length]); - if (count < PRECODED.length) { - char = PRECODED[count]; - } - const charobject = CODE[char]; - console.log(char); - console.log(charobject); - drawShape( - x, - y, - jumpx * gapfactor, - charobject["shape"], - charobject["hasDot"], - charobject["rotation"], - ); - count++; - } - } - //p.saveCanvas(); - }; - - const drawShape = (x: any, y: any, radius: any, shape: any, hasDot: any, rotation: any) => { - let angles: any[] = []; - if (shape === "L") { - angles = [45 + 90, 45, 45 - 90]; - } else if (shape === "U") { - angles = [45 + 180, 45 + 90, 45, 45 - 90]; - } else if (shape === "O") { - angles = [45 + 180, 45 + 90, 45, 45 - 90, 45 - 180]; - } else if (shape === "V") { - angles = [45 + 180, [90, 45], 45 - 90]; - } - p.push(); - p.translate(x, y); - p.rotate(rotation); - p.beginShape(); - for (let i = 0; i < angles.length; i++) { - if (angles[i].length) { - let sx = 0 + p.cos(angles[i][0]) * radius; - let sy = 0 + p.sin(angles[i][1]) * radius; - p.vertex(sx, sy); - } - const a = angles[i]; - let sx = 0 + p.cos(a) * radius; - let sy = 0 + p.sin(a) * radius; - p.vertex(sx, sy); - } - p.endShape(); - if (hasDot) { - p.strokeWeight(STROKE_WEIGHT * 1.5); - if (shape === "V") { - p.point(0, (p.sin(-45) * radius) / 2); - } else { - p.point(0, 0); - } - p.strokeWeight(STROKE_WEIGHT); - } - p.pop(); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/glyphs/reveal.ts b/sketches/glyphs/reveal.ts deleted file mode 100644 index a062a38..0000000 --- a/sketches/glyphs/reveal.ts +++ /dev/null @@ -1,170 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let palette: any; -let colors: any; - -let colors_bg: any; - -const PALETTE_NAME = "pastella"; - -const STROKE_WEIGHT = 2; - -let padding: any; - -const CODE: any = { - A: { shape: "L", rotation: 0, hasDot: false }, - B: { shape: "U", rotation: 0, hasDot: false }, - C: { shape: "L", rotation: 90, hasDot: false }, - D: { shape: "U", rotation: -90, hasDot: false }, - E: { shape: "O", rotation: 0, hasDot: false }, - F: { shape: "U", rotation: 90, hasDot: false }, - G: { shape: "L", rotation: -90, hasDot: false }, - H: { shape: "U", rotation: 180, hasDot: false }, - I: { shape: "L", rotation: 180, hasDot: false }, - J: { shape: "L", rotation: 0, hasDot: true }, - K: { shape: "U", rotation: 0, hasDot: true }, - L: { shape: "L", rotation: 90, hasDot: true }, - M: { shape: "U", rotation: -90, hasDot: true }, - N: { shape: "O", rotation: 0, hasDot: true }, - O: { shape: "U", rotation: 90, hasDot: true }, - P: { shape: "L", rotation: -90, hasDot: true }, - Q: { shape: "U", rotation: 180, hasDot: true }, - R: { shape: "L", rotation: 180, hasDot: true }, - S: { shape: "V", rotation: 0, hasDot: false }, - T: { shape: "V", rotation: -90, hasDot: false }, - U: { shape: "V", rotation: 90, hasDot: false }, - V: { shape: "V", rotation: 180, hasDot: false }, - W: { shape: "V", rotation: 0, hasDot: true }, - X: { shape: "V", rotation: -90, hasDot: true }, - Y: { shape: "V", rotation: 90, hasDot: true }, - Z: { shape: "V", rotation: 180, hasDot: true }, - ",": { shape: "", rotation: 0, hasDot: true }, - ".": { shape: "", rotation: 0, hasDot: true }, - "'": { shape: "", rotation: 0, hasDot: true }, - "-": { shape: "", rotation: 0, hasDot: true }, - "(": { shape: "", rotation: 0, hasDot: true }, - ")": { shape: "", rotation: 0, hasDot: true }, - "?": { shape: "", rotation: 0, hasDot: true }, - " ": { shape: "", rotation: 0, hasDot: false }, - "": { shape: "", rotation: 0, hasDot: false }, -}; - -const PRECODES = [ - "The pigpen cipher (alternatively referred to as the masonic cipher, Freemason's cipher, Napoleon cipher, and tic-tac-toe cipher) is a geometric simple substitution cipher, which exchanges letters for symbols which are fragments of a grid. The example key shows one way the letters can be assigned to the grid. The use of symbols instead of letters is no impediment to cryptanalysis, and this system is identical to that of other simple monoalphabetic substitution schemes. Due to the simplicity of the cipher, it is often included in children's books on ciphers and secret writing.", -]; - -let PRECODED: any; - -let GRIDCOUNT: any; - -const gapgrow = 0.35375 / 1; -let gapfactor = 0.35375; - -let jumpx: any; -let jumpy: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - //p.fill(colors_bg); - p.noFill(); - - (p as any).strokeCap((p as any).SQUARE); - - p.angleMode(p.DEGREES); - - PRECODED = PRECODES[0].toUpperCase(); - - padding = 1080 / 8; - - GRIDCOUNT = p.ceil(p.sqrt(PRECODED.length)); - - jumpx = (p.width - padding * 2) / (GRIDCOUNT - 1); - jumpy = (p.height - padding * 2) / (GRIDCOUNT - 1); - }; - - p.draw = () => { - let count = 0; - let char = ""; - - p.background(colors_bg); - - for (let y = padding; y <= p.height - padding; y += jumpy) { - for (let x = padding; x <= p.width - padding; x += jumpx) { - char = ""; - p.stroke(colors[count % colors.length]); - if (count < PRECODED.length) { - char = PRECODED[count]; - } - const charobject = CODE[char]; - console.log(char); - console.log(charobject); - drawShape( - x, - y, - jumpx * gapfactor, - charobject["shape"], - charobject["hasDot"], - charobject["rotation"], - ); - count++; - } - } - //p.saveCanvas(); - gapfactor += gapgrow; - }; - - const drawShape = (x: any, y: any, radius: any, shape: any, hasDot: any, rotation: any) => { - let angles: any[] = []; - if (shape === "L") { - angles = [45 + 90, 45, 45 - 90]; - } else if (shape === "U") { - angles = [45 + 180, 45 + 90, 45, 45 - 90]; - } else if (shape === "O") { - angles = [45 + 180, 45 + 90, 45, 45 - 90, 45 - 180]; - } else if (shape === "V") { - angles = [45 + 180, [90, 45], 45 - 90]; - } - p.push(); - p.translate(x, y); - p.rotate(rotation); - p.beginShape(); - for (let i = 0; i < angles.length; i++) { - if (angles[i].length) { - let sx = 0 + p.cos(angles[i][0]) * radius; - let sy = 0 + p.sin(angles[i][1]) * radius; - p.vertex(sx, sy); - } - const a = angles[i]; - let sx = 0 + p.cos(a) * radius; - let sy = 0 + p.sin(a) * radius; - p.vertex(sx, sy); - } - p.endShape(); - if (hasDot) { - p.strokeWeight(STROKE_WEIGHT * 1.5); - if (shape === "V") { - p.point(0, (p.sin(-45) * radius) / 2); - } else { - p.point(0, 0); - } - p.strokeWeight(STROKE_WEIGHT); - } - p.pop(); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/gravity/center.ts b/sketches/gravity/center.ts deleted file mode 100644 index 1ff7db8..0000000 --- a/sketches/gravity/center.ts +++ /dev/null @@ -1,121 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "pastella"; - -const STROKE_WEIGHT = 1; -const CENTER_SIZE = STROKE_WEIGHT * 20; -const OPACITY = 0.5; -const COUNT = 5000; -const SPAWN_RADIUS = 250; -const CENTER_RADIUS = 250; -const MAX_VELOCITY = 5; -const ACCELERATION = 0.1; - -let COLORS: string[]; -let BG: p5.Color; -let STROKE: any; - -const particles: any[] = []; -let center: any; -let centerAngle = Math.PI / 2; -const centerAngleStep = 0.01; - -new p5((p: p5) => { - center = p.createVector(0, 0); - - class Particle { - location: any; - velocity: any; - color: any; - accfactor: number; - - constructor(x: number, y: number, i: number) { - this.location = p.createVector(x, y); - this.velocity = p.createVector(center.x, center.y); - this.color = COLORS[i % COLORS.length]; - this.accfactor = p.random(0.5, 1); - } - - update() { - const direction = p5.Vector.sub(center, this.location); - if (direction.mag() < CENTER_SIZE / 2) { - const r = p.random(CENTER_SIZE / 4); - const a = p.random(p.TWO_PI); - this.location = p.createVector(r * p.cos(a), r * p.sin(a)); - p.line(center.x, center.y, 0, 0); - this.velocity = p.createVector(-center.x, -center.y); - } else { - direction.normalize(); - direction.mult(ACCELERATION ** 0.75 * this.accfactor); - this.velocity.add(direction); - this.velocity.limit(MAX_VELOCITY); - this.location.add(this.velocity); - } - } - } - - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - BG.setAlpha(0.75 * 255); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //(p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - - for (let i = 0; i < COUNT; i++) { - const a = (i * p.TWO_PI) / COUNT; - const randy = p.random(SPAWN_RADIUS); - const x = randy * p.cos(a); - const y = randy * p.sin(a); - particles.push(new Particle(x, y, i)); - } - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - p.strokeWeight(STROKE_WEIGHT); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = 0; - p.stroke(0, 0, 100, OPACITY); - for (let i = 0; i < particles.length; i++) { - const particle = particles[i]; - p.stroke(particle.color); - p.point(particle.location.x, particle.location.y); - particle.update(); - } - updateCenter(); - drawCenter(); - }; - - const drawCenter = () => { - p.strokeWeight(CENTER_SIZE); - p.stroke(0, 0, 100); - p.point(center.x, center.y); - p.point(0, 0); - }; - - const updateCenter = () => { - center.x = CENTER_RADIUS * p.cos(centerAngle); - center.y = CENTER_RADIUS * p.sin(centerAngle); - centerAngle += centerAngleStep; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/gravity/gravity.ts b/sketches/gravity/gravity.ts deleted file mode 100644 index 0aab36c..0000000 --- a/sketches/gravity/gravity.ts +++ /dev/null @@ -1,114 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "pastella"; - -const STROKE_WEIGHT = 1; -const CENTER_SIZE = STROKE_WEIGHT * 20; -const OPACITY = 0.5; -const COUNT = 5000; -const SPAWN_RADIUS = 250; -const CENTER_RADIUS = 250; -const MAX_VELOCITY = 5; -const ACCELERATION = 0.1; - -let COLORS: string[]; -let BG: p5.Color; -let STROKE: any; - -const particles: any[] = []; -let center: any; -let centerAngle = Math.PI / 2; -const centerAngleStep = 0.01; - -new p5((p: p5) => { - center = p.createVector(0, 0); - - class Particle { - location: any; - velocity: any; - color: any; - accfactor: number; - - constructor(x: number, y: number, i: number) { - this.location = p.createVector(x, y); - this.velocity = p.createVector(center.x, center.y); - this.color = COLORS[i % COLORS.length]; - this.accfactor = p.random(0.75, 1); - } - - update() { - const direction = p5.Vector.sub(center, this.location); - direction.normalize(); - direction.mult(ACCELERATION * this.accfactor); - this.velocity.add(direction); - this.velocity.limit(MAX_VELOCITY); - this.location.add(this.velocity); - } - } - - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - BG.setAlpha(0.75 * 255); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //(p.drawingContext as CanvasRenderingContext2D).shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - - for (let i = 0; i < COUNT; i++) { - const a = (i * p.TWO_PI) / COUNT; - const randy = p.random(SPAWN_RADIUS); - const x = randy * p.cos(a); - const y = randy * p.sin(a); - particles.push(new Particle(x, y, i)); - } - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - drawCenter(); - p.strokeWeight(STROKE_WEIGHT); - (p.drawingContext as CanvasRenderingContext2D).shadowBlur = 0; - p.stroke(0, 0, 100, OPACITY); - for (let i = 0; i < particles.length; i++) { - const particle = particles[i]; - p.stroke(particle.color); - p.point(particle.location.x, particle.location.y); - particle.update(); - } - updateCenter(); - // beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const drawCenter = () => { - const coleur = p.color(0, 0, 100); - p.strokeWeight(CENTER_SIZE); - p.stroke(coleur); - p.point(center.x, center.y); - }; - - const updateCenter = () => { - center.x = CENTER_RADIUS * p.cos(centerAngle); - center.y = CENTER_RADIUS * p.sin(centerAngle); - centerAngle += centerAngleStep; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/gravity/moon.ts b/sketches/gravity/moon.ts deleted file mode 100644 index e38410f..0000000 --- a/sketches/gravity/moon.ts +++ /dev/null @@ -1,138 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "speis"; - -const STROKE_WEIGHT = 1; -const COUNT = 5000; -const SPAWN_RADIUS = 500; -const PLANET_RADIUS = 250; -const MOON_RADIUS = 100; -const MAX_VELOCITY = 10; -const PLANET_GRAVITY = 0.5; -const MOON_GRAVITY = 0.1; -const ANGLE_STEP_PLANET = 0.02; -const ANGLE_STEP_MOON = 0.05; - -let COLORS: string[]; -let BG: p5.Color; -let STROKE: any; - -const particles: any[] = []; -let planetAngle = Math.PI / 2; -let moonAngle = Math.PI / 2; -let planet: any; -let moon: any; - -new p5((p: p5) => { - planet = p.createVector(); - moon = p.createVector(); - - class Particle { - location: any; - velocity: any; - - constructor(x: number, y: number) { - this.location = p.createVector(x, y); - this.velocity = p.createVector(planet.x, planet.y); - } - - update() { - const planetGravity = p5.Vector.sub(planet, this.location); - planetGravity.normalize(); - planetGravity.mult(PLANET_GRAVITY); - this.velocity.add(planetGravity); - this.velocity.limit(MAX_VELOCITY); - this.location.add(this.velocity); - - const moonGravity = p5.Vector.sub(moon, this.location); - moonGravity.normalize(); - moonGravity.mult(MOON_GRAVITY); - this.velocity.add(moonGravity); - this.velocity.limit(MAX_VELOCITY); - this.location.add(this.velocity); - } - } - - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - - for (let i = 0; i < COUNT; i++) { - const a = (i * p.TWO_PI) / COUNT; - const x = p.random(SPAWN_RADIUS) * p.cos(a); - const y = p.random(SPAWN_RADIUS) * p.sin(a); - particles.push(new Particle(x, y)); - } - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - updatePlanet(); - updateMoon(); - drawPlanet(); - drawMoon(); - p.strokeWeight(STROKE_WEIGHT); - for (let i = 0; i < particles.length; i++) { - const particle = particles[i]; - const randy = p.random(COLORS); - //const speedness = particle.velocity.mag() / MAX_VELOCITY; - const coleur = p.color( - p.hue(randy), - p.saturation(randy), - p.lightness(randy), - //1 - speedness - ); - p.stroke(coleur); - p.point(particle.location.x, particle.location.y); - particle.update(); - } - // beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const updatePlanet = () => { - planet.x = PLANET_RADIUS * p.cos(planetAngle); - planet.y = PLANET_RADIUS * p.sin(planetAngle); - planetAngle += ANGLE_STEP_PLANET; - }; - - const updateMoon = () => { - moon.x = planet.x + MOON_RADIUS * p.cos(moonAngle); - moon.y = planet.y + MOON_RADIUS * p.sin(moonAngle); - moonAngle += ANGLE_STEP_MOON; - }; - - const drawPlanet = () => { - p.strokeWeight(STROKE_WEIGHT * 50); - p.stroke(0, 0, 100); - p.point(planet.x, planet.y); - }; - - const drawMoon = () => { - p.strokeWeight(STROKE_WEIGHT * 10); - p.stroke(0, 0, 100); - p.point(moon.x, moon.y); - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/gravity/spline.ts b/sketches/gravity/spline.ts deleted file mode 100644 index 365628d..0000000 --- a/sketches/gravity/spline.ts +++ /dev/null @@ -1,160 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "speis"; //termos, pastella, speis - -const STROKE_WEIGHT = 1; -const CENTER_SIZE = STROKE_WEIGHT * 15; -const OPACITY = 0.5; -const COUNT = 10000; -const VERTICES = 10; -const SPAWN_RADIUS = 1080 / 2; -const MAX_VELOCITY = 7.5; -const ACCELERATION = 0.2; -const TIMEWALK = 0.02; - -const EXPORT = false; - -let COLORS: string[]; -let BG: p5.Color; -let STROKE: any; - -let center: any; -const particles: any[] = []; -const vertices: any[] = []; -const path: any[] = []; - -let walkindex = 0; - -new p5((p: p5) => { - class Particle { - location: any; - velocity: any; - color: any; - accfactor: number; - - constructor(x: number, y: number, i: number) { - this.location = p.createVector(x, y); - this.velocity = p.createVector(center.x, center.y); - this.color = p.color(COLORS[i % COLORS.length]); - this.accfactor = p.random(0.5, 1.5); - } - - update() { - const direction = p5.Vector.sub(center, this.location); - direction.normalize(); - direction.mult(ACCELERATION ** 0.75 * this.accfactor); - this.velocity.add(direction); - this.velocity.limit(MAX_VELOCITY); - this.location.add(this.velocity); - } - } - - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - if (EXPORT) p.frameRate(5); - - p.background(BG); - p.fill(BG); - BG.setAlpha(255); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - vertices.push(p.createVector(0, p.height / 2)); - vertices.push(p.createVector(0, p.height / 2)); - for (let i = 0; i < VERTICES; i++) { - vertices.push( - p.createVector(p.random(-p.width / 5, p.width / 5), p.random(-p.height / 5, p.height / 5)), - ); - } - vertices.push(p.createVector(0, 0)); - vertices.push(p.createVector(0, 0)); - - for (let i = 0; i < vertices.length - 3; i++) { - const a = vertices[i]; - const b = vertices[i + 1]; - const c = vertices[i + 2]; - const d = vertices[i + 3]; - for (let t = 0; t < 1; t += 1 * TIMEWALK) { - const x = p.splinePoint(a.x, b.x, c.x, d.x, t); - const y = p.splinePoint(a.y, b.y, c.y, d.y, t); - path.push(p.createVector(x, y)); - } - } - center = path[0]; - - for (let i = 0; i < COUNT; i++) { - const a = (i * p.TWO_PI) / COUNT; - const randy = p.random(SPAWN_RADIUS); - const x = randy * p.cos(a); - const y = randy * p.sin(a); - particles.push(new Particle(x, y, i)); - } - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - /* - p.strokeWeight(STROKE_WEIGHT * 0.5); - p.beginShape(); - for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; - p.curveVertex(v.x, v.y); - } - p.endShape(); - - for (let i = 0; i < path.length; i++) { - p.strokeWeight(STROKE_WEIGHT * 5); - p.point(path[i].x, path[i].y); - p.strokeWeight(STROKE_WEIGHT); - } - */ - updateCenter(); - drawCenter(); - p.strokeWeight(STROKE_WEIGHT); - - for (let i = 0; i < particles.length; i++) { - const particle = particles[i]; - p.stroke(particle.color); - p.point(particle.location.x, particle.location.y); - particle.update(); - } - //if (walkindex >= path.length) p.noLoop(); - if (EXPORT) { - p.saveCanvas(); - } - if (p.frameCount > 900) { - p.noLoop(); - } - }; - - const drawCenter = () => { - p.strokeWeight(CENTER_SIZE); - p.stroke(0, 0, 100); - p.point(center.x, center.y); - }; - - const updateCenter = () => { - center.x = path[walkindex].x; - center.y = path[walkindex].y; - if (walkindex < path.length - 1) walkindex++; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/gravity/splinecenter.ts b/sketches/gravity/splinecenter.ts deleted file mode 100644 index 246cea9..0000000 --- a/sketches/gravity/splinecenter.ts +++ /dev/null @@ -1,157 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "pastella"; - -const STROKE_WEIGHT = 1; -const CENTER_SIZE = STROKE_WEIGHT * 20; -const OPACITY = 0.5; -const COUNT = 5000; -const VERTICES = 10; -const SPAWN_RADIUS = 200; -const MAX_VELOCITY = 7.5; -const ACCELERATION = 0.2; -const TIMEWALK = 0.01; - -let COLORS: string[]; -let BG: p5.Color; -let STROKE: any; - -let center: any; -const particles: any[] = []; -const vertices: any[] = []; -const path: any[] = []; - -let walkindex = 0; - -new p5((p: p5) => { - class Particle { - location: any; - velocity: any; - color: any; - accfactor: number; - - constructor(x: number, y: number, i: number) { - this.location = p.createVector(x, y); - this.velocity = p.createVector(center.x, center.y); - this.color = COLORS[i % COLORS.length]; - this.accfactor = p.random(0.5, 1); - } - - update() { - const direction = p5.Vector.sub(center, this.location); - if (direction.mag() < CENTER_SIZE / 2) { - const r = p.random(CENTER_SIZE / 4); - const a = p.random(p.TWO_PI); - this.location = p.createVector(r * p.cos(a), r * p.sin(a)); - p.line(center.x, center.y, 0, 0); - this.velocity = p.createVector(-center.x, -center.y); - } else { - direction.normalize(); - direction.mult(ACCELERATION ** 0.75 * this.accfactor); - this.velocity.add(direction); - this.velocity.limit(MAX_VELOCITY); - this.location.add(this.velocity); - } - } - } - - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - BG.setAlpha(255); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - - for (let i = 0; i < VERTICES; i++) { - vertices.push( - p.createVector(p.random(-p.width / 4, p.width / 4), p.random(-p.height / 4, p.height / 4)), - ); - } - - for (let i = 0; i < vertices.length - 3; i++) { - const a = vertices[i]; - const b = vertices[i + 1]; - const c = vertices[i + 2]; - const d = vertices[i + 3]; - for (let bla = 0; bla < 1; bla += 1 * TIMEWALK) { - const x = p.splinePoint(a.x, b.x, c.x, d.x, bla); - const y = p.splinePoint(a.y, b.y, c.y, d.y, bla); - path.push(p.createVector(x, y)); - } - } - center = path[0]; - - for (let i = 0; i < COUNT; i++) { - const a = (i * p.TWO_PI) / COUNT; - const randy = p.random(SPAWN_RADIUS); - const x = randy * p.cos(a); - const y = randy * p.sin(a); - particles.push(new Particle(x, y, i)); - } - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - /* - - p.strokeWeight(STROKE_WEIGHT * 0.5); - p.beginShape(); - for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; - p.curveVertex(v.x, v.y); - } - p.endShape(); - - for (let i = 0; i < path.length; i++) { - p.strokeWeight(STROKE_WEIGHT * 5); - p.point(path[i].x, path[i].y); - p.strokeWeight(STROKE_WEIGHT); - } -*/ - p.strokeWeight(STROKE_WEIGHT); - - for (let i = 0; i < particles.length; i++) { - const particle = particles[i]; - p.stroke(particle.color); - p.point(particle.location.x, particle.location.y); - particle.update(); - } - updateCenter(); - drawCenter(); - if (walkindex >= path.length) p.noLoop(); - }; - - const drawCenter = () => { - p.strokeWeight(CENTER_SIZE); - p.stroke(0, 0, 100); - p.point(center.x, center.y); - p.point(0, 0); - }; - - const updateCenter = () => { - center.x = path[walkindex].x; - center.y = path[walkindex].y; - walkindex++; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/hole/eye.ts b/sketches/hole/eye.ts deleted file mode 100644 index 0dbe03b..0000000 --- a/sketches/hole/eye.ts +++ /dev/null @@ -1,97 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "symmeblu"; //mono, onom, redrange - -const MAX_FRAMES = 450; -const STROKE_WEIGHT = 1; -let ANGLE_STEP = 0.05; -const ANGLE_AMP = 10; -const ALPHA = 255; -let RADIUS_STEP = 1; -const RADIUS_AMP = 0.01; -const WEIGHT_AMP = 5; -const MIN_RADIUS = 100; -const MAX_RADIUS = 1080 * 0.5; //1080 * 0.75 -const COUNT = 10000; - -const POINTS_ARR: any[] = []; - -let frame = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 720); // 1080, (1350/720) - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - p.background(BG); - p.fill(BG); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - for (let i = 0; i < COLORS.length; i++) { - const collie = p.color(COLORS[i]); - collie.setAlpha(ALPHA); - COLORS[i] = collie; - } - p.translate(p.width / 2, p.height / 2); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / COUNT) { - const randy = p.random(MIN_RADIUS, MAX_RADIUS); - POINTS_ARR.push({ - radius: randy, - angle: a, - stroke: p.random(COLORS), - weight: p.random(STROKE_WEIGHT * 0.5, STROKE_WEIGHT * 2), - }); - } - //p.circle(0, 0, 200); - //p.frameRate(4); - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - for (let pt = 0; pt < POINTS_ARR.length; pt++) { - const poi = POINTS_ARR[pt]; - p.stroke(poi.stroke); - const x = poi.radius * p.cos(poi.angle); - const y = poi.radius * p.sin(poi.angle); - if (poi.radius <= MIN_RADIUS) { - poi.radius = MAX_RADIUS; - p.strokeWeight(poi.weight); - } else { - const factor = (MAX_RADIUS + MIN_RADIUS - poi.radius) / MAX_RADIUS; - poi.angle += ANGLE_STEP * factor ** ANGLE_AMP; - poi.radius -= RADIUS_STEP * factor ** RADIUS_AMP; - p.strokeWeight(STROKE_WEIGHT / 2 + poi.weight * factor ** WEIGHT_AMP); - const xNew = poi.radius * p.cos(poi.angle); - const yNew = poi.radius * p.sin(poi.angle); - let factorini = (factor ** 0.5 * 0.5 * MAX_FRAMES) / frame; - if (frame >= MAX_FRAMES / 2) { - factorini = factor ** 0.5; - } - p.line(x * factorini, y * factorini, xNew, yNew * factorini); - } - } - //p.circle(0, 0, MIN_RADIUS * 2); - //p.saveCanvas(); - if (frame >= MAX_FRAMES) { - p.noLoop(); - } - frame++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/hole/hole.ts b/sketches/hole/hole.ts deleted file mode 100644 index 8a013de..0000000 --- a/sketches/hole/hole.ts +++ /dev/null @@ -1,83 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "symmeblu"; - -const STROKE_WEIGHT = 2; -const ANGLE_STEP = 0.1; -const ANGLE_AMP = 5; -const RADIUS_STEP = 2; -const RADIUS_AMP = 0.01; -const MIN_RADIUS = 100; -const MAX_RADIUS = 1080; //1080 * 0.75 -const COUNT = 10000; - -const POINTS_ARR: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - //STROKE.setAlpha(5); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - p.translate(p.width / 2, p.height / 2); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / COUNT) { - const randy = p.random(MIN_RADIUS, MAX_RADIUS); - POINTS_ARR.push({ - radius: randy, - angle: a, - stroke: p.random(COLORS), - weight: p.random(STROKE_WEIGHT * 0.5, STROKE_WEIGHT * 4), - }); - } - //p.circle(0, 0, 200); - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - - for (let pt = 0; pt < POINTS_ARR.length; pt++) { - const poi = POINTS_ARR[pt]; - p.stroke(poi.stroke); - const x = poi.radius * p.cos(poi.angle); - const y = poi.radius * p.sin(poi.angle); - if (poi.radius <= MIN_RADIUS) { - poi.radius = MAX_RADIUS; - p.strokeWeight(poi.weight); - } else { - const factor = (MAX_RADIUS + MIN_RADIUS - poi.radius) / MAX_RADIUS; - poi.angle += ANGLE_STEP * factor ** ANGLE_AMP; - poi.radius -= RADIUS_STEP * factor ** RADIUS_AMP; - p.strokeWeight(STROKE_WEIGHT / 2 + poi.weight * factor ** 5); - const xNew = poi.radius * p.cos(poi.angle); - const yNew = poi.radius * p.sin(poi.angle); - p.line(x, y, xNew, yNew); - } - } - //p.circle(0, 0, MIN_RADIUS * 2); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/hole/pupil.ts b/sketches/hole/pupil.ts deleted file mode 100644 index 2ba795f..0000000 --- a/sketches/hole/pupil.ts +++ /dev/null @@ -1,98 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "symmeblu"; //mono, onom, redrange - -const MAX_FRAMES = 450; -const STROKE_WEIGHT = 1; -let ANGLE_STEP = 0.05; -const ANGLE_AMP = 10; -const ALPHA = 255; -let RADIUS_STEP = 1; -const RADIUS_AMP = 0.01; -const WEIGHT_AMP = 5; -const MIN_RADIUS = 100; -const MAX_RADIUS = 1080 * 0.5; //1080 * 0.75 -const COUNT = 10000; - -const POINTS_ARR: any[] = []; - -let frame = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, (1350/720) - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - p.background(BG); - p.fill(BG); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - for (let i = 0; i < COLORS.length; i++) { - const collie = p.color(COLORS[i]); - collie.setAlpha(ALPHA); - COLORS[i] = collie; - } - p.translate(p.width / 2, p.height / 2); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / COUNT) { - const randy = p.random(MIN_RADIUS, MAX_RADIUS); - POINTS_ARR.push({ - radius: randy, - angle: a, - stroke: p.random(COLORS), - weight: p.random(STROKE_WEIGHT * 0.5, STROKE_WEIGHT * 2), - }); - } - //p.circle(0, 0, 200); - //p.frameRate(4); - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - for (let pt = 0; pt < POINTS_ARR.length; pt++) { - const poi = POINTS_ARR[pt]; - p.stroke(poi.stroke); - const x = poi.radius * p.cos(poi.angle); - const y = poi.radius * p.sin(poi.angle); - if (poi.radius <= MIN_RADIUS) { - poi.radius = MAX_RADIUS; - p.strokeWeight(poi.weight); - } else { - const factor = (MAX_RADIUS + MIN_RADIUS - poi.radius) / MAX_RADIUS; - poi.angle += ANGLE_STEP * factor ** ANGLE_AMP; - poi.radius -= RADIUS_STEP * factor ** RADIUS_AMP; - p.strokeWeight(STROKE_WEIGHT / 2 + poi.weight * factor ** WEIGHT_AMP); - const xNew = poi.radius * p.cos(poi.angle); - const yNew = poi.radius * p.sin(poi.angle); - let factorini = (factor ** 0.5 * 0.5 * MAX_FRAMES) / frame; - if (frame >= MAX_FRAMES / 2) { - factorini = factor ** 0.5; - } - //p.line(x * factorini, y * factorini, xNew * factorini, yNew * factorini); - p.line(x * factorini, y * factorini, xNew, yNew); - } - } - //p.circle(0, 0, MIN_RADIUS * 2); - //p.saveCanvas(); - if (frame >= MAX_FRAMES) { - p.noLoop(); - } - frame++; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/hole/well.ts b/sketches/hole/well.ts deleted file mode 100644 index b87852f..0000000 --- a/sketches/hole/well.ts +++ /dev/null @@ -1,69 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "mono"; - -const STROKE_WEIGHT = 2; -const MIN_RADIUS = 100; -const MAX_RADIUS = 1080 * 0.5; //1080 * 0.75 -const COUNT = 10000; - -const POINTS_ARR: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - //STROKE.setAlpha(5); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - p.translate(p.width / 2, p.height / 2); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / COUNT) { - const randy = p.random(MIN_RADIUS, MAX_RADIUS); - POINTS_ARR.push({ - radius: randy, - angle: a, - }); - } - //p.circle(0, 0, 200); - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - for (let pt = 0; pt < POINTS_ARR.length; pt++) { - const poi = POINTS_ARR[pt]; - const x = poi.radius * p.cos(poi.angle); - const y = poi.radius * p.sin(poi.angle); - p.point(x, y); - if (poi.radius <= MIN_RADIUS) { - poi.radius = MAX_RADIUS; - } else { - poi.radius -= MIN_RADIUS * Math.exp((-1 / MIN_RADIUS) * (poi.radius - MIN_RADIUS)); - } - } - // p.beginShape(); p.POINTS, p.LINES, p.TRIANGLES, p.TRIANGLE_FAN, p.TRIANGLE_STRIP, p.QUADS, p.QUAD_STRIP - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/kaleidoscope/automated.ts b/sketches/kaleidoscope/automated.ts deleted file mode 100644 index 82ff46e..0000000 --- a/sketches/kaleidoscope/automated.ts +++ /dev/null @@ -1,77 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let symmetry = 64; - -let symangle = 360 / symmetry; - -let frame = 0; -let x: any, y: any; - -let palette: any; -let colors: any; -let _colors_stroke: any; -let colors_bg: any; - -const PALETTE_NAME = "pastella"; - -const STEP = 1.5; - -let angle = 0; -let anglestep = 1; -let anglesign = 1; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = palettes[keys[(keys.length * Math.random()) << 0]]; - - colors = palette.colors; - colors_bg = palette.bg; - _colors_stroke = palette["stroke"]; - - p.background(colors_bg); - p.angleMode(p.DEGREES); - - p.strokeWeight(3); - x = p.width / 2; - y = p.height / 2; - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - frame += 0.5; - - if (x > 0 && x < p.width && y > 0 && y < p.height) { - let startx = x; - let starty = y; - - let noised = p.noise(x, y) - 0.5; - - anglestep = p.random(2); - if (angle > 180 || angle < 0) anglesign *= -1; - angle += anglestep * anglesign + noised * 2; - - x += p.cos(angle) * STEP; - y += p.sin(angle) * STEP; - - for (let i = 0; i < symmetry; i++) { - p.stroke(colors[i % colors.length]); - p.rotate(symangle); - p.line(startx - p.width / 2, starty - p.height / 2, x - p.width / 2, y - p.height / 2); - p.push(); - p.scale(1, -1); - p.line(startx - p.width / 2, starty - p.height / 2, x - p.width / 2, y - p.height / 2); - p.pop(); - } - } - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/kaleidoscope/mouse.ts b/sketches/kaleidoscope/mouse.ts deleted file mode 100644 index ffdb1ac..0000000 --- a/sketches/kaleidoscope/mouse.ts +++ /dev/null @@ -1,52 +0,0 @@ -import p5 from "p5"; - -// Symmetry corresponding to the number of reflections. Change the number for different number of reflections -let symmetry = 32; - -let angle = 360 / symmetry; - -let frame = 0; - -new p5((p: p5) => { - p.setup = () => { - p.createCanvas(710, 710); - p.angleMode(p.DEGREES); - p.colorMode(p.HSL); - }; - - // Clear Screen function - const _clearScreen = () => { - p.background(0); - }; - - // Full Screen Function - const _screenFull = () => { - let fs = (p as any).fullscreen(); - (p as any).fullscreen(!fs); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - frame += 2; - - if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < p.height) { - let mx = p.mouseX - p.width / 2; - let my = p.mouseY - p.height / 2; - let pmx = (p as any).pmouseX - p.width / 2; - let pmy = (p as any).pmouseY - p.height / 2; - - if (p.mouseIsPressed) { - p.stroke(frame % 360, 100, 50, 0.75); - for (let i = 0; i < symmetry; i++) { - p.rotate(angle); - p.strokeWeight(2); - p.line(mx, my, pmx, pmy); - p.push(); - p.scale(1, -1); - p.line(mx, my, pmx, pmy); - p.pop(); - } - } - } - }; -}); diff --git a/sketches/layers/blob.ts b/sketches/layers/blob.ts deleted file mode 100644 index fb6750c..0000000 --- a/sketches/layers/blob.ts +++ /dev/null @@ -1,137 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "stronk"; - -const LAYER_COUNT = 10; - -/* The average radius of the full shape */ -const MEAN_RADIUS = 540; - -/* Enable strokes on the border of each layer, specify weight if enabled */ -const HAS_STROKE = false; -const STROKE_WEIGHT = 1; - -/* Layers are light to dark (from the center), enable to reverse it */ -const INVERTED_GRADIENT = true; - -/* Instead of gradient from light to dark, go from the fill color to dark */ -const CAP_LIGHTNESS = true; - -/* The degree to which noise affects the layers */ -/* Low values are blobby, high values are spikey */ -const NOISE_MULTIPLIER = 0.2; - -/* The speed at which the layers */ -const NOISE_SPEED = 0.0025; - -/* Mirror the layers on either axis */ -const SYMMETRICAL_X = false; -const SYMMETRICAL_Y = false; - -/* Background is determined by the gradient, but these flags may override it */ -/* If both flags are true, palette background will be used */ -const USE_FILL_AS_BACKGROUND = false; -const USE_PALETTE_BACKGROUND = true; - -/* The amount of points that make up each layer, lower means "pointier" */ -/* For example 3 points mean triangular layers, 4 means squares */ -/* Higher might not be noticable, but will make for smoother borders */ -const POINT_COUNT = 500; - -/* Mild rotation, negative speed rotates counter-clockwise */ -const ROTATION_SPEED = 0.001; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], FILL: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - FILL = p.random(COLORS); - if (HAS_STROKE) p.stroke(FILL); - else p.noStroke(); - }; - - p.draw = () => { - /* Move coordinate system to center of canvas for easier trigonometry */ - p.translate(p.width / 2, p.height / 2); - - /* Home-made helper function to select background based on config */ - drawBackground(); - - /* Because layers are drawn in sequence, draw large layers on bottom first */ - for (let i = LAYER_COUNT; i > 0; i--) { - drawLayer((MEAN_RADIUS / LAYER_COUNT) * i, i); - } - }; - - const drawBackground = () => { - if (INVERTED_GRADIENT) { - if (CAP_LIGHTNESS) p.background(FILL); - else p.background(255); - } else { - p.background(0); - } - if (USE_FILL_AS_BACKGROUND) p.background(FILL); - if (USE_PALETTE_BACKGROUND) p.background(BG); - }; - - const drawLayer = (r: any, i: any) => { - /* A number from 0 to 1, where the middle layer would have 0.5 */ - const layerColorFactor = INVERTED_GRADIENT ? i / LAYER_COUNT : 1 - i / LAYER_COUNT; - - /* Adjust saturation and lightness based on the layer factor */ - const fillColor = p.color( - p.hue(FILL), - layerColorFactor * p.saturation(FILL), - layerColorFactor * (CAP_LIGHTNESS ? p.lightness(FILL) : 100), - ); - p.fill(fillColor); - - /* Iterate through a full circle of angles to make a layer */ - p.beginShape(); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / POINT_COUNT) { - /* Maybe overcomplicated way of getting x and y coordinate in noise field */ - const xOff = SYMMETRICAL_Y - ? p.cos(a * NOISE_MULTIPLIER) - : p.map(i * p.cos(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - const yOff = SYMMETRICAL_X - ? p.sin(a * NOISE_MULTIPLIER) - : p.map(i * p.sin(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - - /* Get noise based on x, y, and the "time" */ - const noised = p.noise(xOff, yOff, p.frameCount * NOISE_SPEED); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noised * r * p.cos(a + p.frameCount * ROTATION_SPEED); - const y = noised * r * p.sin(a + p.frameCount * ROTATION_SPEED); - p.vertex(x, y); - } - p.endShape(p.CLOSE); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/layers/depth.ts b/sketches/layers/depth.ts deleted file mode 100644 index 39f113e..0000000 --- a/sketches/layers/depth.ts +++ /dev/null @@ -1,137 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "stronk"; - -const LAYER_COUNT = 50; - -/* The average radius of the full shape */ -const MEAN_RADIUS = 1350; // 675 or 1350 are my favorites - -/* Enable strokes on the border of each layer, specify weight if enabled */ -const HAS_STROKE = false; -const STROKE_WEIGHT = 1; - -/* Layers are light to dark (from the center), enable to reverse it */ -const INVERTED_GRADIENT = true; - -/* Instead of gradient from light to dark, go from the fill color to dark */ -const CAP_LIGHTNESS = true; - -/* The degree to which noise affects the layers */ -/* Low values are blobby, high values are spikey */ -const NOISE_MULTIPLIER = 0.15; - -/* The speed at which the layers */ -const NOISE_SPEED = 0.005; - -/* Mirror the layers on either axis */ -const SYMMETRICAL_X = false; -const SYMMETRICAL_Y = false; - -/* Background is determined by the gradient, but these flags may override it */ -/* If both flags are true, palette background will be used */ -const USE_FILL_AS_BACKGROUND = true; -const USE_PALETTE_BACKGROUND = false; - -/* The amount of points that make up each layer, lower means "pointier" */ -/* For example 3 points mean triangular layers, 4 means squares */ -/* Higher might not be noticable, but will make for smoother borders */ -const POINT_COUNT = 500; - -/* Mild rotation, negative speed rotates counter-clockwise */ -const ROTATION_SPEED = 0; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], FILL: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - FILL = p.random(COLORS); - if (HAS_STROKE) p.stroke(FILL); - else p.noStroke(); - }; - - p.draw = () => { - /* Move coordinate system to center of canvas for easier trigonometry */ - p.translate(p.width / 2, p.height / 2); - - /* Home-made helper function to select background based on config */ - drawBackground(); - - /* Because layers are drawn in sequence, draw large layers on bottom first */ - for (let i = LAYER_COUNT; i > 0; i--) { - drawLayer((MEAN_RADIUS / LAYER_COUNT) * i, i); - } - }; - - const drawBackground = () => { - if (INVERTED_GRADIENT) { - if (CAP_LIGHTNESS) p.background(FILL); - else p.background(255); - } else { - p.background(0); - } - if (USE_FILL_AS_BACKGROUND) p.background(FILL); - if (USE_PALETTE_BACKGROUND) p.background(BG); - }; - - const drawLayer = (r: any, i: any) => { - /* A number from 0 to 1, where the middle layer would have 0.5 */ - const layerColorFactor = INVERTED_GRADIENT ? i / LAYER_COUNT : 1 - i / LAYER_COUNT; - - /* Adjust saturation and lightness based on the layer factor */ - const fillColor = p.color( - p.hue(FILL), - layerColorFactor * p.saturation(FILL), - layerColorFactor * (CAP_LIGHTNESS ? p.lightness(FILL) : 100), - ); - p.fill(fillColor); - - /* Iterate through a full circle of angles to make a layer */ - p.beginShape(); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / POINT_COUNT) { - /* Maybe overcomplicated way of getting x and y coordinate in noise field */ - const xOff = SYMMETRICAL_Y - ? p.cos(a * NOISE_MULTIPLIER) - : p.map(i * p.cos(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - const yOff = SYMMETRICAL_X - ? p.sin(a * NOISE_MULTIPLIER) - : p.map(i * p.sin(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - - /* Get noise based on x, y, and the "time" */ - const noised = p.noise(xOff, yOff, p.frameCount * NOISE_SPEED); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noised * r * p.cos(a + p.frameCount * ROTATION_SPEED); - const y = noised * r * p.sin(a + p.frameCount * ROTATION_SPEED); - p.vertex(x, y); - } - p.endShape(p.CLOSE); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/layers/spikes.ts b/sketches/layers/spikes.ts deleted file mode 100644 index d123ac9..0000000 --- a/sketches/layers/spikes.ts +++ /dev/null @@ -1,137 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "stronk"; - -const LAYER_COUNT = 10; - -/* The average radius of the full shape */ -const MEAN_RADIUS = 675; - -/* Enable strokes on the border of each layer, specify weight if enabled */ -const HAS_STROKE = false; -const STROKE_WEIGHT = 2; - -/* Layers are light to dark (from the center), enable to reverse it */ -const INVERTED_GRADIENT = true; - -/* Instead of gradient from light to dark, go from the fill color to dark */ -const CAP_LIGHTNESS = true; - -/* The degree to which noise affects the layers */ -/* Low values are blobby, high values are spikey */ -const NOISE_MULTIPLIER = 10; - -/* The speed at which the layers */ -const NOISE_SPEED = 0.005; - -/* Mirror the layers on either axis */ -const SYMMETRICAL_X = false; -const SYMMETRICAL_Y = false; - -/* Background is determined by the gradient, but these flags may override it */ -/* If both flags are true, palette background will be used */ -const USE_FILL_AS_BACKGROUND = true; -const USE_PALETTE_BACKGROUND = true; - -/* The amount of points that make up each layer, lower means "pointier" */ -/* For example 3 points mean triangular layers, 4 means squares */ -/* Higher might not be noticable, but will make for smoother borders */ -const POINT_COUNT = 500; - -/* Mild rotation, negative speed rotates counter-clockwise */ -const ROTATION_SPEED = 0.001; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], FILL: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - FILL = p.random(COLORS); - if (HAS_STROKE) p.stroke(FILL); - else p.noStroke(); - }; - - p.draw = () => { - /* Move coordinate system to center of canvas for easier trigonometry */ - p.translate(p.width / 2, p.height / 2); - - /* Home-made helper function to select background based on config */ - drawBackground(); - - /* Because layers are drawn in sequence, draw large layers on bottom first */ - for (let i = LAYER_COUNT; i > 0; i--) { - drawLayer((MEAN_RADIUS / LAYER_COUNT) * i, i); - } - }; - - const drawBackground = () => { - if (INVERTED_GRADIENT) { - if (CAP_LIGHTNESS) p.background(FILL); - else p.background(255); - } else { - p.background(0); - } - if (USE_FILL_AS_BACKGROUND) p.background(FILL); - if (USE_PALETTE_BACKGROUND) p.background(BG); - }; - - const drawLayer = (r: any, i: any) => { - /* A number from 0 to 1, where the middle layer would have 0.5 */ - const layerColorFactor = INVERTED_GRADIENT ? i / LAYER_COUNT : 1 - i / LAYER_COUNT; - - /* Adjust saturation and lightness based on the layer factor */ - const fillColor = p.color( - p.hue(FILL), - layerColorFactor * p.saturation(FILL), - layerColorFactor * (CAP_LIGHTNESS ? p.lightness(FILL) : 100), - ); - p.fill(fillColor); - - /* Iterate through a full circle of angles to make a layer */ - p.beginShape(); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / POINT_COUNT) { - /* Maybe overcomplicated way of getting x and y coordinate in noise field */ - const xOff = SYMMETRICAL_Y - ? p.cos(a * NOISE_MULTIPLIER) - : p.map(i * p.cos(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - const yOff = SYMMETRICAL_X - ? p.sin(a * NOISE_MULTIPLIER) - : p.map(i * p.sin(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - - /* Get noise based on x, y, and the "time" */ - const noised = p.noise(xOff, yOff, p.frameCount * NOISE_SPEED); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noised * r * p.cos(a + p.frameCount * ROTATION_SPEED); - const y = noised * r * p.sin(a + p.frameCount * ROTATION_SPEED); - p.vertex(x, y); - } - p.endShape(p.CLOSE); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/layers/symmetry.ts b/sketches/layers/symmetry.ts deleted file mode 100644 index 78e0312..0000000 --- a/sketches/layers/symmetry.ts +++ /dev/null @@ -1,138 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "stronk"; - -const LAYER_COUNT = 10; - -/* The average radius of the full shape */ -const MEAN_RADIUS = 675; - -/* Enable strokes on the border of each layer, specify weight if enabled */ -const HAS_STROKE = true; -const STROKE_WEIGHT = 4; - -/* Layers are light to dark (from the center), enable to reverse it */ -const INVERTED_GRADIENT = true; - -/* Instead of gradient from light to dark, go from the fill color to dark */ -const CAP_LIGHTNESS = false; - -/* The degree to which noise affects the layers */ -/* Low values are blobby, high values are spikey */ -const NOISE_MULTIPLIER = 1; - -/* The speed at which the layers */ -const NOISE_SPEED = 0.002; - -/* Mirror the layers on either axis */ -const SYMMETRICAL_X = true; -const SYMMETRICAL_Y = true; - -/* Background is determined by the gradient, but these flags may override it */ -/* If both flags are true, palette background will be used */ -const USE_FILL_AS_BACKGROUND = true; -const USE_PALETTE_BACKGROUND = false; - -/* The amount of points that make up each layer, lower means "pointier" */ -/* For example 3 points mean triangular layers, 4 means squares */ -/* Higher might not be noticable, but will make for smoother borders */ -const POINT_COUNT = 500; - -/* Mild rotation, negative speed rotates counter-clockwise */ -//const ROTATION_SPEED = 0.001; -const ROTATION_SPEED = 0; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], FILL: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - FILL = p.random(COLORS); - if (HAS_STROKE) p.stroke(FILL); - else p.noStroke(); - }; - - p.draw = () => { - /* Move coordinate system to center of canvas for easier trigonometry */ - p.translate(p.width / 2, p.height / 2); - - /* Home-made helper function to select background based on config */ - drawBackground(); - - /* Because layers are drawn in sequence, draw large layers on bottom first */ - for (let i = LAYER_COUNT; i > 0; i--) { - drawLayer((MEAN_RADIUS / LAYER_COUNT) * i, i); - } - }; - - const drawBackground = () => { - if (INVERTED_GRADIENT) { - if (CAP_LIGHTNESS) p.background(FILL); - else p.background(255); - } else { - p.background(0); - } - if (USE_FILL_AS_BACKGROUND) p.background(FILL); - if (USE_PALETTE_BACKGROUND) p.background(BG); - }; - - const drawLayer = (r: number, i: number) => { - /* A number from 0 to 1, where the middle layer would have 0.5 */ - const layerColorFactor = INVERTED_GRADIENT ? i / LAYER_COUNT : 1 - i / LAYER_COUNT; - - /* Adjust saturation and lightness based on the layer factor */ - const fillColor = p.color( - p.hue(FILL), - layerColorFactor * p.saturation(FILL), - layerColorFactor * (CAP_LIGHTNESS ? p.lightness(FILL) : 100), - ); - p.fill(fillColor); - - /* Iterate through a full circle of angles to make a layer */ - p.beginShape(); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / POINT_COUNT) { - /* Maybe overcomplicated way of getting x and y coordinate in noise field */ - const xOff = SYMMETRICAL_Y - ? p.cos(a * NOISE_MULTIPLIER) - : p.map(i * p.cos(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - const yOff = SYMMETRICAL_X - ? p.sin(a * NOISE_MULTIPLIER) - : p.map(i * p.sin(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - - /* Get noise based on x, y, and the "time" */ - const noised = p.noise(xOff, yOff, p.frameCount * NOISE_SPEED); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noised * r * p.cos(a + p.frameCount * ROTATION_SPEED); - const y = noised * r * p.sin(a + p.frameCount * ROTATION_SPEED); - p.vertex(x, y); - } - p.endShape(p.CLOSE); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/layers/wacko.ts b/sketches/layers/wacko.ts deleted file mode 100644 index 6efdbb9..0000000 --- a/sketches/layers/wacko.ts +++ /dev/null @@ -1,137 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "stronk"; - -const LAYER_COUNT = 100; - -/* The average radius of the full shape */ -const MEAN_RADIUS = 675; - -/* Enable strokes on the border of each layer, specify weight if enabled */ -const HAS_STROKE = false; -const STROKE_WEIGHT = 1; - -/* Layers are light to dark (from the center), enable to reverse it */ -const INVERTED_GRADIENT = true; - -/* Instead of gradient from light to dark, go from the fill color to dark */ -const CAP_LIGHTNESS = true; - -/* The degree to which noise affects the layers */ -/* Low values are blobby, high values are spikey */ -const NOISE_MULTIPLIER = 2; - -/* The speed at which the layers */ -const NOISE_SPEED = 0.005; - -/* Mirror the layers on either axis */ -const SYMMETRICAL_X = true; -const SYMMETRICAL_Y = false; - -/* Background is determined by the gradient, but these flags may override it */ -/* If both flags are true, palette background will be used */ -const USE_FILL_AS_BACKGROUND = true; -const USE_PALETTE_BACKGROUND = true; - -/* The amount of points that make up each layer, lower means "pointier" */ -/* For example 3 points mean triangular layers, 4 means squares */ -/* Higher might not be noticable, but will make for smoother borders */ -const POINT_COUNT = 500; - -/* Mild rotation, negative speed rotates counter-clockwise */ -const ROTATION_SPEED = 0.0; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], FILL: any, BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 720); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - FILL = p.random(COLORS); - if (HAS_STROKE) p.stroke(FILL); - else p.noStroke(); - }; - - p.draw = () => { - /* Move coordinate system to center of canvas for easier trigonometry */ - p.translate(p.width / 2, p.height); - - /* Home-made helper function to select background based on config */ - drawBackground(); - - /* Because layers are drawn in sequence, draw large layers on bottom first */ - for (let i = LAYER_COUNT; i > 0; i--) { - drawLayer((MEAN_RADIUS / LAYER_COUNT) * i, i); - } - }; - - const drawBackground = () => { - if (INVERTED_GRADIENT) { - if (CAP_LIGHTNESS) p.background(FILL); - else p.background(255); - } else { - p.background(0); - } - if (USE_FILL_AS_BACKGROUND) p.background(FILL); - if (USE_PALETTE_BACKGROUND) p.background(BG); - }; - - const drawLayer = (r: any, i: any) => { - /* A number from 0 to 1, where the middle layer would have 0.5 */ - const layerColorFactor = INVERTED_GRADIENT ? i / LAYER_COUNT : 1 - i / LAYER_COUNT; - - /* Adjust saturation and lightness based on the layer factor */ - const fillColor = p.color( - p.hue(FILL), - layerColorFactor * p.saturation(FILL), - layerColorFactor * (CAP_LIGHTNESS ? p.lightness(FILL) : 100), - ); - p.fill(fillColor); - - /* Iterate through a full circle of angles to make a layer */ - p.beginShape(); - for (let a = 0; a < p.TWO_PI; a += p.TWO_PI / POINT_COUNT) { - /* Maybe overcomplicated way of getting x and y coordinate in noise field */ - const xOff = SYMMETRICAL_Y - ? p.cos(a * NOISE_MULTIPLIER) - : p.map(i * p.cos(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - const yOff = SYMMETRICAL_X - ? p.sin(a * NOISE_MULTIPLIER) - : p.map(i * p.sin(a) + 1, -1, 1, 1, 1 + NOISE_MULTIPLIER); - - /* Get noise based on x, y, and the "time" */ - const noised = p.noise(xOff, yOff, p.frameCount * NOISE_SPEED); - - /* Compute the final x and y and set a vertex there for the shape */ - const x = noised * r * p.cos(a + p.frameCount * ROTATION_SPEED); - const y = noised * r * p.sin(a + p.frameCount * ROTATION_SPEED); - p.vertex(x, y); - } - p.endShape(p.CLOSE); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/lindenmayer/grid.ts b/sketches/lindenmayer/grid.ts deleted file mode 100644 index e0f30dd..0000000 --- a/sketches/lindenmayer/grid.ts +++ /dev/null @@ -1,117 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const ANGLE_STEP = Math.PI / 2; -const STEP = 1080 / 32; -const DEPTH = 5; -let SYSTEM = "A"; -const RULES = [ - { - symbol: "A", - rule: "-BF+AFA+FB-", - }, - { - symbol: "B", - rule: "+AF-BFB-FA+", - }, -]; - -let x = 0; -let y = 0; -let angle = 0; -let POS = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - BG.setAlpha(63); - p.fill(BG); - //p.noFill(); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - (p as any).rectMode((p as any).CENTER); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let i = 0; i < DEPTH; i++) { - SYSTEM = construct(SYSTEM); - console.log(SYSTEM); - } - }; - - p.draw = () => { - p.translate(STEP / 2, p.height - STEP / 2); - //p.circle(x, y, 100); - //p.circle(x, y, STEP * 2); - //p.rect(x, y, STEP, STEP); - const SYMBOL = SYSTEM[POS]; - p.point(x, y); - - if (SYMBOL === "F") { - let x1 = x + STEP * p.cos(angle); - let y1 = y + STEP * p.sin(angle); - //p.line(x, y, x1, y1); - p.line(x, y, x1, y1); - x = x1; - y = y1; - } else if (SYMBOL === "+") { - angle += ANGLE_STEP; - } else if (SYMBOL === "-") { - angle -= ANGLE_STEP; - } else if (SYMBOL === "A") { - //p.circle(x, y, 10); - //angle += p.PI; - } else if (SYMBOL === "B") { - //p.rect(x, y, 10, 10); - //angle -= p.PI; - } - - POS++; - if (POS >= SYSTEM.length) { - p.noLoop(); - POS = 0; - } - }; - - const construct = (system: string) => { - let constructed = ""; - for (let i = 0; i < system.length; i++) { - const symbol = system[i]; - let match = false; - for (let r = 0; r < RULES.length; r++) { - const rule = RULES[r]; - if (symbol === rule.symbol) { - constructed += rule.rule; - match = true; - break; - } - } - if (!match) constructed += symbol; - } - return constructed; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/lindenmayer/overlap.ts b/sketches/lindenmayer/overlap.ts deleted file mode 100644 index 96a5b16..0000000 --- a/sketches/lindenmayer/overlap.ts +++ /dev/null @@ -1,117 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; -const ANGLE_STEP = Math.PI / 2; -const STEP = 1080 / 32; -const DEPTH = 5; -let SYSTEM = "A"; -const RULES = [ - { - symbol: "A", - rule: "-BF+AFA+FB-", - }, - { - symbol: "B", - rule: "+AF-BFB-FA+", - }, -]; - -let x = 0; -let y = 0; -let angle = 0; -let POS = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - //BG.setAlpha(63); - p.fill(BG); - //p.noFill(); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - (p as any).rectMode((p as any).CENTER); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let i = 0; i < DEPTH; i++) { - SYSTEM = construct(SYSTEM); - console.log(SYSTEM); - } - }; - - p.draw = () => { - p.translate(STEP / 2, p.height - STEP / 2); - //p.circle(x, y, 100); - p.circle(x, y, STEP * 2); - //p.rect(x, y, STEP, STEP); - const SYMBOL = SYSTEM[POS]; - p.point(x, y); - - if (SYMBOL === "F") { - let x1 = x + STEP * p.cos(angle); - let y1 = y + STEP * p.sin(angle); - //p.line(x, y, x1, y1); - //p.line(x, y, x1, y1); - x = x1; - y = y1; - } else if (SYMBOL === "+") { - angle += ANGLE_STEP; - } else if (SYMBOL === "-") { - angle -= ANGLE_STEP; - } else if (SYMBOL === "A") { - //p.circle(x, y, 10); - //angle += p.PI; - } else if (SYMBOL === "B") { - //p.rect(x, y, 10, 10); - //angle -= p.PI; - } - - POS++; - if (POS >= SYSTEM.length) { - p.noLoop(); - POS = 0; - } - }; - - const construct = (system: string) => { - let constructed = ""; - for (let i = 0; i < system.length; i++) { - const symbol = system[i]; - let match = false; - for (let r = 0; r < RULES.length; r++) { - const rule = RULES[r]; - if (symbol === rule.symbol) { - constructed += rule.rule; - match = true; - break; - } - } - if (!match) constructed += symbol; - } - return constructed; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/lindenmayer/tree.ts b/sketches/lindenmayer/tree.ts deleted file mode 100644 index 8aa9cb8..0000000 --- a/sketches/lindenmayer/tree.ts +++ /dev/null @@ -1,121 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "genesis"; - -const STROKE_WEIGHT = 5; -const ANGLE_STEP = Math.PI / 8; -const STEP = 25; -const DEPTH = 3; -let SYSTEM = "F"; -const RULES = [ - { - symbol: "F", - rule: "FF+[+F-F-F]-[-F+F+F]", - }, -]; - -let x = 0; -let y = 0; -let angle = -Math.PI / 2; -let POS = 0; -const STATE_STACK: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - //BG.setAlpha(63); - p.fill(BG); - //p.noFill(); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - (p as any).rectMode((p as any).CENTER); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - - for (let i = 0; i < DEPTH; i++) { - SYSTEM = construct(SYSTEM); - console.log(SYSTEM); - } - }; - - p.draw = () => { - p.stroke(COLORS[0]); - p.translate(p.width / 2, p.height); - //p.circle(x, y, 100); - //p.circle(x, y, STEP * 2); - //p.rect(x, y, STEP, STEP); - const SYMBOL = SYSTEM[POS]; - //p.point(x, y); - - if (SYMBOL === "F") { - let x1 = x + STEP * p.cos(angle); - let y1 = y + STEP * p.sin(angle); - p.line(x, y, x1, y1); - x = x1; - y = y1; - } else if (SYMBOL === "+") { - angle += p.random(ANGLE_STEP * 0.9, ANGLE_STEP * 1.1); - } else if (SYMBOL === "-") { - angle -= p.random(ANGLE_STEP * 0.9, ANGLE_STEP * 1.1); - } else if (SYMBOL === "[") { - STATE_STACK.push({ - x, - y, - angle, - }); - } else if (SYMBOL === "]") { - p.stroke(p.random(COLORS)); - p.circle(x, y, STEP / 2); - const pop = STATE_STACK.pop(); - x = pop.x; - y = pop.y; - angle = pop.angle; - } - - POS++; - if (POS >= SYSTEM.length) { - p.noLoop(); - POS = 0; - } - }; - - const construct = (system: string) => { - let constructed = ""; - for (let i = 0; i < system.length; i++) { - const symbol = system[i]; - let match = false; - for (let r = 0; r < RULES.length; r++) { - const rule = RULES[r]; - if (symbol === rule.symbol) { - constructed += rule.rule; - match = true; - break; - } - } - if (!match) constructed += symbol; - } - return constructed; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/oi/1-shape.ts b/sketches/oi/1-shape.ts deleted file mode 100644 index 91d4f4a..0000000 --- a/sketches/oi/1-shape.ts +++ /dev/null @@ -1,14 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - p.setup = () => { - p.createCanvas(1080, 1350); - - p.background(p.color("#ff7b7b")); - - p.noFill(); - p.strokeWeight(3); - - p.circle(p.width / 2, p.height / 2, 250); - }; -}); diff --git a/sketches/oi/2-grid.ts b/sketches/oi/2-grid.ts deleted file mode 100644 index 442abde..0000000 --- a/sketches/oi/2-grid.ts +++ /dev/null @@ -1,25 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - const STROKE_WEIGHT = 3; - const PADDING = 216; - const SHAPE_COUNT = 7; - - p.setup = () => { - p.createCanvas(1080, 1350); - - p.background(p.color("#ff7b7b")); - - p.noFill(); - p.strokeWeight(STROKE_WEIGHT); - - const Y_STEP = (p.height - PADDING * 2) / (SHAPE_COUNT - 1); - const X_STEP = (p.width - PADDING * 2) / (SHAPE_COUNT - 1); - - for (let y = PADDING; y <= p.height - PADDING; y += Y_STEP) { - for (let x = PADDING; x <= p.width - PADDING; x += X_STEP) { - p.circle(x, y, 75); - } - } - }; -}); diff --git a/sketches/oi/3-polygon.ts b/sketches/oi/3-polygon.ts deleted file mode 100644 index d7a258f..0000000 --- a/sketches/oi/3-polygon.ts +++ /dev/null @@ -1,62 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - const STROKE_WEIGHT = 3; - const PADDING = 216; - const SHAPE_COUNT = 7; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - - (p as any).angleMode((p as any).DEGREES); - - p.strokeWeight(STROKE_WEIGHT); - }; - - p.draw = () => { - p.background(p.color("#ff7b7b")); - - const Y_STEP = (p.height - PADDING * 2) / (SHAPE_COUNT - 1); - const X_STEP = (p.width - PADDING * 2) / (SHAPE_COUNT - 1); - - for (let y = PADDING; y <= p.height - PADDING; y += Y_STEP) { - let col = 1; - for (let x = PADDING; x <= p.width - PADDING; x += X_STEP) { - p.push(); - p.translate(x, y); - p.rotate(-90); - polygon(0, 0, 37.5, col + 1); - p.pop(); - col++; - } - } - }; - - const polygon = (x: number, y: number, radius: number, count: number) => { - const vertices: any[] = []; - for (let angle = 0; angle < 360; angle += 360 / count) { - vertices.push({ - x: x + p.cos(angle) * radius, - y: y + p.sin(angle) * radius, - }); - } - - for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; - if (i === vertices.length - 1) { - drawEdges(v, vertices[0]); - } else { - drawEdges(v, vertices[i + 1]); - } - } - }; - - const drawEdges = (v1: any, v2: any) => { - p.line(v1.x, v1.y, v2.x, v2.y); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/oi/4-diagonal.ts b/sketches/oi/4-diagonal.ts deleted file mode 100644 index d59b83b..0000000 --- a/sketches/oi/4-diagonal.ts +++ /dev/null @@ -1,67 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - const STROKE_WEIGHT = 3; - const PADDING = 216; - const SHAPE_COUNT = 7; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - - (p as any).angleMode((p as any).DEGREES); - - p.strokeWeight(STROKE_WEIGHT); - }; - - p.draw = () => { - p.background(p.color("#ff7b7b")); - - const Y_STEP = (p.height - PADDING * 2) / (SHAPE_COUNT - 1); - const X_STEP = (p.width - PADDING * 2) / (SHAPE_COUNT - 1); - - for (let y = PADDING; y <= p.height - PADDING; y += Y_STEP) { - let col = 1; - for (let x = PADDING; x <= p.width - PADDING; x += X_STEP) { - p.push(); - p.translate(x, y); - p.rotate(-90); - polygon(0, 0, 37.5, col + 1); - p.pop(); - col++; - } - } - }; - - const polygon = (x: number, y: number, radius: number, count: number) => { - const vertices: any[] = []; - for (let angle = 0; angle < 360; angle += 360 / count) { - vertices.push({ - x: x + p.cos(angle) * radius, - y: y + p.sin(angle) * radius, - }); - } - - for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; - if (i === vertices.length - 1) { - drawEdges(v, vertices[0], x, y); - } else { - drawEdges(v, vertices[i + 1], x, y); - } - } - }; - - const drawEdges = (v1: any, v2: any, x: number, y: number) => { - p.strokeWeight(STROKE_WEIGHT * 3); - p.point(v1.x, v1.y); - p.point(x, y); - p.strokeWeight(STROKE_WEIGHT); - p.line(v1.x, v1.y, v2.x, v2.y); - p.line(v1.x, v1.y, x, y); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/oi/5-random.ts b/sketches/oi/5-random.ts deleted file mode 100644 index 1ef9f71..0000000 --- a/sketches/oi/5-random.ts +++ /dev/null @@ -1,96 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - let COLORS: any; - - const STROKE_WEIGHT = 3; - const PADDING = 216; - const SHAPE_COUNT = 7; - - const PALETTE = { - bg: ["#ff7b7b"], - colors: [ - "#A1F5E3", - "#E7E7E7", - "#FFFFFF", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - ], - }; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - - COLORS = PALETTE.colors; - - (p as any).angleMode((p as any).DEGREES); - p.frameRate(1); - - p.strokeWeight(STROKE_WEIGHT); - }; - - p.draw = () => { - p.background(p.color("#ff7b7b")); - - const Y_STEP = (p.height - PADDING * 2) / (SHAPE_COUNT - 1); - const X_STEP = (p.width - PADDING * 2) / (SHAPE_COUNT - 1); - - for (let y = PADDING; y <= p.height - PADDING; y += Y_STEP) { - let col = 1; - for (let x = PADDING; x <= p.width - PADDING; x += X_STEP) { - p.push(); - p.translate(x, y); - p.rotate(-90); - polygon(0, 0, 37.5, col + 1); - p.pop(); - col++; - } - } - }; - - const polygon = (x: number, y: number, radius: number, count: number) => { - const vertices: any[] = []; - for (let angle = 0; angle < 360; angle += 360 / count) { - vertices.push({ - x: x + p.cos(angle) * radius, - y: y + p.sin(angle) * radius, - }); - } - - for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; - p.stroke(p.random(COLORS)); - if (i === 0) { - drawOrDont(v, vertices[vertices.length - 1]); - drawOrDont(v, { x, y }); - drawOrDont(v, vertices[i + 1]); - } else if (i === vertices.length - 1) { - drawOrDont(v, vertices[i - 1]); - drawOrDont(v, { x, y }); - drawOrDont(v, vertices[0]); - } else { - drawOrDont(v, vertices[i - 1]); - drawOrDont(v, { x, y }); - drawOrDont(v, vertices[i + 1]); - } - } - }; - - const drawOrDont = (v1: any, v2: any) => { - if (p.random() > 0.5) { - p.line(v1.x, v1.y, v2.x, v2.y); - p.strokeWeight(STROKE_WEIGHT * 3); - p.point(v1.x, v1.y); - p.point(v2.x, v2.y); - p.strokeWeight(STROKE_WEIGHT); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/oi/6-entropy.ts b/sketches/oi/6-entropy.ts deleted file mode 100644 index 49ce991..0000000 --- a/sketches/oi/6-entropy.ts +++ /dev/null @@ -1,104 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - let COLORS: any; - - const STROKE_WEIGHT = 3; - const PADDING = 216; - const SHAPE_COUNT = 7; - - const PALETTE = { - bg: ["#ff7b7b"], - colors: [ - "#A1F5E3", - "#E7E7E7", - "#FFFFFF", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - ], - }; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - - COLORS = PALETTE.colors; - - (p as any).angleMode((p as any).DEGREES); - p.frameRate(1); - - p.strokeWeight(STROKE_WEIGHT); - }; - - p.draw = () => { - p.background(p.color("#ff7b7b")); - - const Y_STEP = (p.height - PADDING * 2) / (SHAPE_COUNT - 1); - const X_STEP = (p.width - PADDING * 2) / (SHAPE_COUNT - 1); - - let row = 1; - for (let y = PADDING; y <= p.height - PADDING; y += Y_STEP) { - let col = 1; - for (let x = PADDING; x <= p.width - PADDING; x += X_STEP) { - p.push(); - p.translate(x, y); - p.rotate(-90); - polygon(0, 0, 37.5, col + 1, row); - p.pop(); - col++; - } - row++; - } - }; - - const polygon = (x: number, y: number, radius: number, count: number, row: number) => { - const vertices: any[] = []; - for (let angle = 0; angle < 360; angle += 360 / count) { - vertices.push({ - x: x + p.cos(angle) * radius, - y: y + p.sin(angle) * radius, - }); - } - - for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; - p.stroke(p.random(COLORS)); - if (i === 0) { - drawOrDont(v, vertices[vertices.length - 1], row); - drawOrDont(v, { x, y }, row); - drawOrDont(v, vertices[i + 1], row); - } else if (i === vertices.length - 1) { - drawOrDont(v, vertices[i - 1], row); - drawOrDont(v, { x, y }, row); - drawOrDont(v, vertices[0], row); - } else { - drawOrDont(v, vertices[i - 1], row); - drawOrDont(v, { x, y }, row); - drawOrDont(v, vertices[i + 1], row); - } - } - }; - - const drawOrDont = (v1: any, v2: any, row: number) => { - const randy = 0.5 * (p as any).exp(row - 1); - if (p.random() < 0.5) { - p.line( - v1.x + p.random(-randy, randy), - v1.y + p.random(-randy, randy), - v2.x + p.random(-randy, randy), - v2.y + p.random(-randy, randy), - ); - p.strokeWeight(STROKE_WEIGHT * 3); - p.point(v1.x + p.random(-randy, randy), v1.y + p.random(-randy, randy)); - p.point(v2.x + p.random(-randy, randy), v2.y + p.random(-randy, randy)); - p.strokeWeight(STROKE_WEIGHT); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/oi/7-gradient.ts b/sketches/oi/7-gradient.ts deleted file mode 100644 index ef2ee66..0000000 --- a/sketches/oi/7-gradient.ts +++ /dev/null @@ -1,117 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - let COLORS: any; - - const STROKE_WEIGHT = 3; - const PADDING = 216; - const SHAPE_COUNT = 7; - - const PALETTE = { - bg: ["#ff7b7b"], - colors: [ - "#A1F5E3", - "#E7E7E7", - "#FFFFFF", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - "#0e0e0e", - ], - }; - - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - - COLORS = PALETTE.colors; - - (p as any).angleMode((p as any).DEGREES); - p.frameRate(1); - - p.strokeWeight(STROKE_WEIGHT); - }; - - p.draw = () => { - drawGradientBackground(); - - const Y_STEP = (p.height - PADDING * 2) / (SHAPE_COUNT - 1); - const X_STEP = (p.width - PADDING * 2) / (SHAPE_COUNT - 1); - - let row = 1; - for (let y = PADDING; y <= p.height - PADDING; y += Y_STEP) { - let col = 1; - for (let x = PADDING; x <= p.width - PADDING; x += X_STEP) { - p.push(); - p.translate(x, y); - p.rotate(-90); - polygon(0, 0, 37.5, col + 1, row); - p.pop(); - col++; - } - row++; - } - }; - - const polygon = (x: number, y: number, radius: number, count: number, row: number) => { - const vertices: any[] = []; - for (let angle = 0; angle < 360; angle += 360 / count) { - vertices.push({ - x: x + p.cos(angle) * radius, - y: y + p.sin(angle) * radius, - }); - } - - for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; - p.stroke(p.random(COLORS)); - if (i === 0) { - drawOrDont(v, vertices[vertices.length - 1], row); - drawOrDont(v, { x, y }, row); - drawOrDont(v, vertices[i + 1], row); - } else if (i === vertices.length - 1) { - drawOrDont(v, vertices[i - 1], row); - drawOrDont(v, { x, y }, row); - drawOrDont(v, vertices[0], row); - } else { - drawOrDont(v, vertices[i - 1], row); - drawOrDont(v, { x, y }, row); - drawOrDont(v, vertices[i + 1], row); - } - } - }; - - const drawOrDont = (v1: any, v2: any, row: number) => { - const randy = 0.5 * (p as any).exp(row - 1); - if (p.random() < 0.5) { - p.line( - v1.x + p.random(-randy, randy), - v1.y + p.random(-randy, randy), - v2.x + p.random(-randy, randy), - v2.y + p.random(-randy, randy), - ); - p.strokeWeight(STROKE_WEIGHT * 3); - p.point(v1.x + p.random(-randy, randy), v1.y + p.random(-randy, randy)); - p.point(v2.x + p.random(-randy, randy), v2.y + p.random(-randy, randy)); - p.strokeWeight(STROKE_WEIGHT); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; - - const drawGradientBackground = () => { - const colorTop = p.color("#FF9999"); - const colorBot = p.color("#FF5B5B"); - p.strokeWeight(1); - for (let y = 0; y < p.height; y++) { - const fraction = y / p.height; - const colorHere = p.lerpColor(colorTop, colorBot, fraction); - p.stroke(colorHere); - p.line(0, y, p.width, y); - } - p.strokeWeight(STROKE_WEIGHT); - }; -}); diff --git a/sketches/perlin/compromise.ts b/sketches/perlin/compromise.ts deleted file mode 100644 index 8083dd0..0000000 --- a/sketches/perlin/compromise.ts +++ /dev/null @@ -1,225 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "symmeblu"; // symmeblu, termos - -const STROKE_WEIGHT = 2; -const OPACITY = 1; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 500; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.0015; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = true; -const STROKE_NOISE_ZOOM = 0.015; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 50; -const MAX_STEPS = 100; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = true; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = false; -const ANGLE_STEP = Math.PI / 3; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 2; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = true; -const ERASER_SPAWN_CHANCE = 0.5; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = false; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) ANGLE_BIAS = p.random(p.TWO_PI); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/perlin/dots.ts b/sketches/perlin/dots.ts deleted file mode 100644 index 6934622..0000000 --- a/sketches/perlin/dots.ts +++ /dev/null @@ -1,233 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "vintage"; // monomild, symmeblu, termos, vintage, pastella - -const STROKE_WEIGHT = 1; -const OPACITY = 0.25; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 10000; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.0025; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = true; -const STROKE_NOISE_ZOOM = 0.003; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 10; -const MAX_STEPS = 50; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = 40 * STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = false; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = false; -const ANGLE_STEP = Math.PI / 3; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 2; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = true; -const ERASER_SPAWN_CHANCE = 0.1; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = true; - -const FRAME_LIMIT = 500; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) ANGLE_BIAS = p.random(p.TWO_PI); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - - /* End drawing after a set amount of frames */ - if (p.frameCount > FRAME_LIMIT) { - console.log("Done"); - p.noLoop(); - } - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/perlin/flow.ts b/sketches/perlin/flow.ts deleted file mode 100644 index 66b4a79..0000000 --- a/sketches/perlin/flow.ts +++ /dev/null @@ -1,225 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "symmeblu"; // symmeblu, termos - -const STROKE_WEIGHT = 2; -const OPACITY = 1; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 500; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.002; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = true; -const STROKE_NOISE_ZOOM = 0.0025; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 50; -const MAX_STEPS = 100; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = true; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = false; -const ANGLE_STEP = Math.PI / 3; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 2; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = true; -const ERASER_SPAWN_CHANCE = 0.5; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = false; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) ANGLE_BIAS = p.random(p.TWO_PI); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/perlin/random.ts b/sketches/perlin/random.ts deleted file mode 100644 index 29b8dea..0000000 --- a/sketches/perlin/random.ts +++ /dev/null @@ -1,225 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "symmeblu"; // symmeblu, termos - -const STROKE_WEIGHT = 2; -const OPACITY = 1; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 500; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.001; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = false; -const STROKE_NOISE_ZOOM = 0.0025; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 50; -const MAX_STEPS = 100; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = true; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = false; -const ANGLE_STEP = Math.PI / 3; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 2; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = true; -const ERASER_SPAWN_CHANCE = 0.5; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = false; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) ANGLE_BIAS = p.random(p.TWO_PI); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/perlin/rounded.ts b/sketches/perlin/rounded.ts deleted file mode 100644 index 1702047..0000000 --- a/sketches/perlin/rounded.ts +++ /dev/null @@ -1,242 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "vintage"; // monomild, symmeblu, termos, vintage, pastella - -const STROKE_WEIGHT = 1; -const OPACITY = 0.1; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 2000; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.003; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = true; -const STROKE_NOISE_ZOOM = 0.003; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 100; -const MAX_STEPS = 150; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = true; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = true; -const ANGLE_STEP = Math.PI / 2; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 4; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = false; -const ERASER_SPAWN_CHANCE = 0.5; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = false; - -const FRAME_LIMIT = 500; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) - ANGLE_BIAS = p.random([ - p.QUARTER_PI * 1, - p.QUARTER_PI * 2, - p.QUARTER_PI * 3, - p.QUARTER_PI * 4, - p.QUARTER_PI * 5, - p.QUARTER_PI * 6, - p.QUARTER_PI * 7, - p.QUARTER_PI * 8, - ]); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - - /* End drawing after a set amount of frames */ - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/perlin/wack.ts b/sketches/perlin/wack.ts deleted file mode 100644 index bcac54e..0000000 --- a/sketches/perlin/wack.ts +++ /dev/null @@ -1,242 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "termos"; // termos, vintage, pastella - -const STROKE_WEIGHT = 1; -const OPACITY = 0.25; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 10000; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.01; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = true; -const STROKE_NOISE_ZOOM = 0.003; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 10; -const MAX_STEPS = 50; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = 40 * STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = false; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = true; -const ANGLE_STEP = Math.PI / 2; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 2; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = true; -const ERASER_SPAWN_CHANCE = 0.1; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = true; - -const FRAME_LIMIT = 375; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) - ANGLE_BIAS = p.random([ - p.QUARTER_PI * 1, - p.QUARTER_PI * 2, - p.QUARTER_PI * 3, - p.QUARTER_PI * 4, - p.QUARTER_PI * 5, - p.QUARTER_PI * 6, - p.QUARTER_PI * 7, - p.QUARTER_PI * 8, - ]); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - - /* End drawing after a set amount of frames */ - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/perlin/wacker.ts b/sketches/perlin/wacker.ts deleted file mode 100644 index 755bb2f..0000000 --- a/sketches/perlin/wacker.ts +++ /dev/null @@ -1,242 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "termos"; // termos, vintage, pastella - -const STROKE_WEIGHT = 1; -const OPACITY = 0.25; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 10000; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.05; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = true; -const STROKE_NOISE_ZOOM = 0.003; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 10; -const MAX_STEPS = 50; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = 40 * STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = true; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = true; -const ANGLE_STEP = Math.PI / 2; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 2; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = true; -const ERASER_SPAWN_CHANCE = 0.1; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = true; - -const FRAME_LIMIT = 250; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) - ANGLE_BIAS = p.random([ - p.QUARTER_PI * 1, - p.QUARTER_PI * 2, - p.QUARTER_PI * 3, - p.QUARTER_PI * 4, - p.QUARTER_PI * 5, - p.QUARTER_PI * 6, - p.QUARTER_PI * 7, - p.QUARTER_PI * 8, - ]); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - - /* End drawing after a set amount of frames */ - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/perlin/wacksoft.ts b/sketches/perlin/wacksoft.ts deleted file mode 100644 index 44480ed..0000000 --- a/sketches/perlin/wacksoft.ts +++ /dev/null @@ -1,242 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "termos"; // termos, vintage, pastella - -const STROKE_WEIGHT = 1; -const OPACITY = 0.25; - -/* The amount of walkers that will be actively drawing each frame */ -/* Reducing increases performance, while increasing will fill in faster */ -const WALKER_COUNT = 10000; - -/* The smoothness of the noise, makes a big difference */ -/* Lower values result in more gradual angle adjustments, a bit like zooming in */ -/* Higher values will lead to often more jagged lines, walkers gathering up more */ -const NOISE_ZOOM = 0.05; - -/* Disabling means every walker will have its own color */ -/* Enable to color the walkers based on their location / angle */ -/* Matching the stroke noise with the noise zoom make them mostly aligned */ -/* However, making the noise zooms slightly different offer more layered textures */ -const NOISED_STROKE = true; -const STROKE_NOISE_ZOOM = 0.003; - -/* The amount of steps a walker will take before being respawned */ -/* Longer steps will often lead to being able to gather more */ -/* Shorter steps will give a rougher or more hairy texture */ -/* A wider range also means more random respawns, and a more textured look */ -const MIN_STEPS = 10; -const MAX_STEPS = 50; -/* Shorter steps make smoother lines, while longer ones may be more jagged */ -const STEP_SIZE = 40 * STROKE_WEIGHT + 1; - -/* Enable to clip the flow field by adding a big circle on it */ -/* Disabling reveals the flow field of the full canvas */ -const CLIP_CONTENT = true; -const CLIP_RADIUS = 400; - -/* Enable to round angles to their nearest ANGLE_STEP */ -/* This effectively divides the flow field into angles based */ -const ROUNDED_ANGLES = false; -const ANGLE_STEP = Math.PI / 3; - -/* Noise will naturally lean towards an angle */ -/* Enable this to vary where the angle is, or disable and specify your own */ -const RANDOM_ANGLE_BIAS = true; -let ANGLE_BIAS = Math.PI / 2; - -/* Enable for adding "erasers" that draw more background on the noise */ -/* Disabling or reducing will likely lead to a less textured result*/ -const ERASERS_ENABLED = true; -const ERASER_SPAWN_CHANCE = 0.1; - -/* Instead of lines, draw strings of dots */ -/* Works well with very high step sizes */ -const DOT_LINES = true; - -const FRAME_LIMIT = 375; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; -const ACTIVE_WALKERS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - p.background(BG); - - for (let c = 0; c < COLORS.length; c++) { - COLORS[c].setAlpha(OPACITY * 255); - } - - /* Randomize the order of the colors so they equate to different angles each run */ - for (let i = COLORS.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [COLORS[i], COLORS[j]] = [COLORS[j], COLORS[i]]; - } - - /* Not really meant for configration as it is real confusing */ - /* Determines the amount of noise layers and their effect on the final field */ - p.noiseDetail(3, 0.75); - - if (RANDOM_ANGLE_BIAS) - ANGLE_BIAS = p.random([ - p.QUARTER_PI * 1, - p.QUARTER_PI * 2, - p.QUARTER_PI * 3, - p.QUARTER_PI * 4, - p.QUARTER_PI * 5, - p.QUARTER_PI * 6, - p.QUARTER_PI * 7, - p.QUARTER_PI * 8, - ]); - - /* Intiialize all walkers into the ACTIVE_WALKER list */ - for (let i = 0; i < WALKER_COUNT; i++) { - respawnWalker(i); - } - }; - - p.draw = () => { - /* Iterate through all walkers */ - for (let i = 0; i < WALKER_COUNT; i++) { - /* If on the first frame, initialize all walkers (happens only once) */ - const walker = ACTIVE_WALKERS[i]; - - /* If the walker has met the end of its lifespawn, respawn it */ - /* If not, have the walker take another step */ - if (walker.steps > walker.step_cap) { - respawnWalker(i); - } else { - /* Determine angle based on noise at its current point in the field */ - let a = p.noise(walker.x * NOISE_ZOOM, walker.y * NOISE_ZOOM) * p.TWO_PI; - - if (ROUNDED_ANGLES) a = p.round(a / ANGLE_STEP) * ANGLE_STEP; - - /* Effectively rotate the canvas to the angle bias */ - a += p.PI + ANGLE_BIAS; - - p.stroke(walker.color); - const x2 = walker.x + STEP_SIZE * p.cos(a); - const y2 = walker.y + STEP_SIZE * p.sin(a); - - /* Draw a line from the old to the new point, signifying a step */ - if (DOT_LINES) p.point(walker.x, walker.y); - else p.line(walker.x, walker.y, x2, y2); - walker.steps++; - - /* Update the walker coordinates */ - walker.x = x2; - walker.y = y2; - - /* A dumb amount of code that basically says one single thing: */ - /* If the walker hits an edge, loop to the other side of the screen */ - if (!CLIP_CONTENT) { - if (walker.x > p.width) walker.x = 0 - STEP_SIZE; - if (walker.x < 0) walker.x = p.width + STEP_SIZE; - if (walker.y > p.height) walker.y = 0 - STEP_SIZE; - if (walker.y < 0) walker.y = p.height + STEP_SIZE; - } else { - /* Constraint start and end of screen to be the clipped field */ - const xStart = p.width / 2 - CLIP_RADIUS; - const xEnd = p.width / 2 + CLIP_RADIUS; - const yStart = p.height / 2 - CLIP_RADIUS; - const yEnd = p.height / 2 + CLIP_RADIUS; - - /* Walkers can get stuck, so hide them just out of view */ - if (walker.x > xEnd) walker.x = xStart - STEP_SIZE; - if (walker.x < xStart) walker.x = xEnd + STEP_SIZE; - if (walker.y > yEnd) walker.y = yStart - STEP_SIZE; - if (walker.y < yStart) walker.y = yEnd + STEP_SIZE; - } - } - } - /* After all walkers have been drawn for the frame, add a clipping circle if desired */ - if (CLIP_CONTENT) drawClipCircle(); - - /* End drawing after a set amount of frames */ - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - }; - - /* Set new coordinates, a random amount of steps, and a color for the walker */ - const respawnWalker = (i: number) => { - let x = CLIP_CONTENT - ? p.random(p.width / 2 - CLIP_RADIUS, p.width / 2 + CLIP_RADIUS) - : p.random(0, p.width); - let y = CLIP_CONTENT - ? p.random(p.height / 2 - CLIP_RADIUS, p.height / 2 + CLIP_RADIUS) - : p.random(0, p.height); - - ACTIVE_WALKERS[i] = { - x: x, - y: y, - steps: 0, - step_cap: p.random(MIN_STEPS, MAX_STEPS), - color: selectWalkerColor(x, y), - }; - }; - - /* Set the color of a walker based on their location, or just randomly */ - const selectWalkerColor = (x: number, y: number) => { - /* If erasers are enabled, determine if the walker will become an eraser */ - if (ERASERS_ENABLED && p.random() < ERASER_SPAWN_CHANCE) { - return BG; - } - if (NOISED_STROKE) { - /* Set walker color based on the noise value at its coordinates, meaning the angle */ - const colorNoise = p.noise(x * STROKE_NOISE_ZOOM, y * STROKE_NOISE_ZOOM); - - /* Limit the color selection to the size of the given palette */ - const maxIndex = COLORS.length - 1; - let noisedIndex = p.round(colorNoise * maxIndex); - if (noisedIndex > maxIndex) { - noisedIndex = maxIndex; - } - return COLORS[noisedIndex]; - } else { - return p.random(COLORS); - } - }; - - const drawClipCircle = () => { - /* Stroke grows in both directions, leading to some wonky diameter calculation */ - const CLIP_STROKE = p.width + CLIP_RADIUS * 2; - const CLIP_DIAMETER = CLIP_STROKE + CLIP_RADIUS * 2; - - /* Make the circle content transparent so the flow field is visible through the clip */ - p.noFill(); - - /* Set stroke, draw circle, and reset the stroke weight back to normal */ - p.stroke(BG); - p.strokeWeight(CLIP_STROKE); - p.circle(p.width / 2, p.height / 2, CLIP_DIAMETER); - p.strokeWeight(STROKE_WEIGHT); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/recursion/grid.ts b/sketches/recursion/grid.ts deleted file mode 100644 index c242a57..0000000 --- a/sketches/recursion/grid.ts +++ /dev/null @@ -1,159 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -/* Enable to make a canvas suitable for A2 paper */ -const PRINT_MODE = false; - -/* Set a palette */ -const PALETTE_NAME = "symmeblu"; - -/* The size of the recursion field */ -const SIZE = 800; - -/* In addition to the thickness of spacing, adjusts maximum recursion depth */ -/* Scaling up the stroke weight would result in larger shapes overall */ -const STROKE_WEIGHT = 4; - -/* Enable to set a stroke on each shape based on the background color */ -const HAS_STROKE = true; - -/* Keep in mind that spawning shape means no subdivision/recursion in the slot */ -const SHAPE_CHANCE = 0.2; - -/* Lower chance means more empty space in the field */ -const BACKGROUND_CHANCE = 0.5; - -/* Will clear the canvas each frame if enabled, disabling leads to overlap */ -const CLEAR_EACH_FRAME = true; - -/* The shape will be randomly selected from the following object */ -/* The random selection is weighted based on the integer values */ -/* Example: 1 is a normal amount, 2 is double, 0 would be none of that type */ -/* The values are weighed in relation to each other, so 1 2 3 4 = 2 4 6 8 */ -const SHAPE_WEIGHTS = [ - { type: "SQUARE", weight: 1 }, - { type: "DIAMOND", weight: 1 }, - { type: "TRIANGLE", weight: 1 }, - { type: "CIRCLE", weight: 1 }, -]; -const WEIGHTED_SHAPES: string[] = []; - -/* - - CONFIG END - -*/ - -let COLORS: p5.Color[], BG: p5.Color; - -new p5((p: p5) => { - p.setup = () => { - const cnv = PRINT_MODE ? p.createCanvas(4960, 7016) : p.createCanvas(1080, 1350); - cnv.mouseClicked(clickOnSave); - p.pixelDensity(1); - p.frameRate(1); - - const PALETTE = palettes[PALETTE_NAME]; - - p.colorMode(p.HSL); - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - - /* Sketch-specific setup */ - p.strokeWeight(STROKE_WEIGHT); - (p as any).strokeJoin((p as any).BEVEL); - if (HAS_STROKE) p.stroke(BG); - else p.noStroke(); - - p.background(BG); - (p as any).rectMode(p.CENTER); - - /* Initialize weighted shapes */ - for (let s = 0; s < SHAPE_WEIGHTS.length; s++) { - const shape = SHAPE_WEIGHTS[s]; - for (let w = 0; w < shape.weight; w++) { - WEIGHTED_SHAPES.push(shape.type); - } - } - }; - - p.draw = () => { - if (CLEAR_EACH_FRAME) p.background(BG); - - /* Start the recursion field */ - /* More fields can be placed by duplicating this line and changing positions */ - step(0, p.width / 2, p.height / 2, SIZE); - }; - - const step = (currentDepth: number, x: number, y: number, r: number) => { - /* Based on chance to spawn shape, stop recursion for the tile */ - /* If the max depth has been met, all tiles will draw a shape */ - if (currentDepth != 0 && (p.random() < SHAPE_CHANCE || r <= STROKE_WEIGHT * 8)) { - drawRandomShape(x, y, r); - return; - } - - /* If no shape this tile, divide recursion field into four smaller tiles */ - const r2 = r / 2; - step(currentDepth + 1, x - r2 / 2, y - r2 / 2, r2); - step(currentDepth + 1, x + r2 / 2, y - r2 / 2, r2); - step(currentDepth + 1, x - r2 / 2, y + r2 / 2, r2); - step(currentDepth + 1, x + r2 / 2, y + r2 / 2, r2); - }; - - const drawRandomShape = (x: number, y: number, r: number) => { - drawBackgroundOrDont(x, y, r); - - /* Select a shape based on shape weights, then draw it */ - const shape = p.random(WEIGHTED_SHAPES); - if (shape == "DIAMOND") { - drawDiamond(x, y, r); - } else if (shape == "CIRCLE") { - p.circle(x, y, r); - } else if (shape == "TRIANGLE") { - drawTriangle(x, y, r); - } else if (shape == "SQUARE") { - /* Drawing a background draws a square already */ - /* In other words, do nothing */ - } - }; - - /* Set a random background and foreground color for new shape */ - const drawBackgroundOrDont = (x: number, y: number, r: number) => { - p.fill(p.random(COLORS)); - if (p.random() < BACKGROUND_CHANCE) { - (p as any).rect(x, y, r); - p.fill(p.random(COLORS)); - } - }; - - /* Draw what is basically a rotated square */ - const drawDiamond = (x: number, y: number, r: number) => { - const r2 = r / 2; - p.beginShape(); - p.vertex(x + r2, y); - p.vertex(x, y + r2); - p.vertex(x - r2, y); - p.vertex(x, y - r2); - p.endShape(p.CLOSE); - }; - - /* Draw a triangle in one of the four possible orientations*/ - const drawTriangle = (x: number, y: number, r: number) => { - const r2 = r / 2; - const excludedCorner = p.random(["TOPLEFT", "TOPRIGHT", "BOTLEFT", "BOTRIGHT"]); - if (excludedCorner == "TOPLEFT") { - p.triangle(x - r2, y + r2, x + r2, y - r2, x + r2, y + r2); - } else if (excludedCorner == "TOPRIGHT") { - p.triangle(x - r2, y - r2, x + r2, y + r2, x - r2, y + r2); - } else if (excludedCorner == "BOTLEFT") { - p.triangle(x - r2, y - r2, x + r2, y + r2, x + r2, y - r2); - } else if (excludedCorner == "BOTRIGHT") { - p.triangle(x - r2, y - r2, x - r2, y + r2, x + r2, y - r2); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/recursion/shape.ts b/sketches/recursion/shape.ts deleted file mode 100644 index dc08a86..0000000 --- a/sketches/recursion/shape.ts +++ /dev/null @@ -1,59 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "symmeblu"; - -const STROKE_WEIGHT = 4; -const PADDING = 200; - -let colors: any[]; -let colors_bg: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - const palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.stroke(colors_bg); - (p as any).rectMode(p.CENTER); - p.frameRate(2); - }; - - p.draw = () => { - p.background(colors_bg); - p.translate(p.width / 2, p.height / 2); - p.beginShape(); - drawSquare(0, 0, p.width - PADDING * 2); - p.endShape(p.CLOSE); - }; - - const drawSquare = (x: number, y: number, radius: number) => { - p.fill(p.random(colors)); - p.stroke(p.random(colors)); - - if (p.random() > 0.5) { - p.vertex(x, y); - //p.rect(x, y, radius); - //p.circle(x, y, radius); - } - const uhhh = [2, 2, 2, 4]; - if (radius > STROKE_WEIGHT * 4) { - if (p.random() > 0.25) drawSquare(x - radius / 4, y - radius / 4, radius / p.random(uhhh)); - if (p.random() > 0.25) drawSquare(x + radius / 4, y - radius / 4, radius / p.random(uhhh)); - if (p.random() > 0.25) drawSquare(x - radius / 4, y + radius / 4, radius / p.random(uhhh)); - if (p.random() > 0.25) drawSquare(x + radius / 4, y + radius / 4, radius / p.random(uhhh)); - } - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/reflect/basic.vert b/sketches/reflect/basic.vert deleted file mode 100644 index 2fcd842..0000000 --- a/sketches/reflect/basic.vert +++ /dev/null @@ -1,19 +0,0 @@ -#ifdef GL_ES -precision mediump float; -#endif - -attribute vec3 aPosition; - -// Always include this to get the position of the pixel and map the shader correctly onto the shape - -void main() { - - // Copy the position data into a vec4, adding 1.0 as the w parameter - vec4 positionVec4 = vec4(aPosition, 1.0); - - // Scale to make the output fit the canvas - positionVec4.xy = positionVec4.xy * 2.0 - 1.0; - - // Send the vertex information on to the fragment shader - gl_Position = positionVec4; -} diff --git a/sketches/reflect/reflect.frag b/sketches/reflect/reflect.frag deleted file mode 100644 index 235028d..0000000 --- a/sketches/reflect/reflect.frag +++ /dev/null @@ -1,74 +0,0 @@ -#ifdef GL_ES -precision mediump float; -#endif - -uniform vec2 u_resolution; -uniform vec2 u_pointA; -uniform vec2 u_pointB; -uniform vec2 u_pointC; -uniform float u_time; - -uniform vec3 u_color1; -uniform vec3 u_color2; - -bool withTime = false; -float noiseStrength = 0.65; -float darkenStrength = 0.5; -float distanceStrength = 0.25; - -vec3 bg = vec3(0.0); - -highp float rand(vec2 co) { - highp float a = 12.9898; - highp float b = 78.233; - highp float c = 43758.5453; - highp float dt = dot(co.xy, vec2(a, b)); - highp float sn = mod(dt, 3.14) + (withTime ? u_time : 0.0); - return fract(sin(sn) * c); -} - -// Return minimum distance between line segment vw and point p -float getDistance(vec2 v, vec2 w, vec2 p) { - vec2 l = v - w; - float l2 = dot(l, l); // i.e. |w-v|^2 - avoid a sqrt - if (l2 == 0.0) return distance(p, v); // v == w case - // Consider the line extending the segment, parameterized as v + t (w - v). - // We find projection of point p onto the line. - // It falls where t = [(p-v) . (w-v)] / |w-v|^2 - // We clamp t from [0,1] to handle points outside the segment vw. - float t = clamp(dot(p - v, w - v) / l2, 0.0, 1.0); - vec2 projection = v + t * (w - v); // Projection falls on the segment - // return pow(distance(p, projection), distanceStrength); - return pow(distance(p, projection), distanceStrength); -} - -float getPosition(vec2 p1, vec2 p2, vec2 px) { - return sign((p2.x - p1.x) * (px.y - p1.y) - (p2.y - p1.y) * (px.x - p1.x)); -} - -void main() { - // position of the pixel divided by resolution, to get normalized positions on the canvas - vec2 px = gl_FragCoord.xy / u_resolution.xy; - vec2 pa = u_pointA.xy / u_resolution.xy; - vec2 pb = u_pointB.xy / u_resolution.xy; - vec2 pc = u_pointC.xy / u_resolution.xy; - - float d1 = getDistance(pa, pb, px); - float c1 = 1.0 - d1; - float d2 = getDistance(pa, pc, px); - float c2 = 1.0 - d2; - - // Determine inside/outside wedge independent of point winding order: - // a pixel is inside the wedge if it's on the same side of AB as C, and same side of AC as B - bool sideC = getPosition(pa, pb, pc) > 0.0; - bool sideB = getPosition(pa, pc, pb) > 0.0; - bool insideWedge = ((getPosition(pa, pb, px) > 0.0) == sideC) && - ((getPosition(pa, pc, px) > 0.0) == sideB); - - float noiseFactor = noiseStrength * rand(px) + 1.0 - noiseStrength; - float darkFactor = !insideWedge ? (1.0 - (darkenStrength * max(c1, c2))) : clamp(1.0 / (d1 * d2), 0.0, 4.0); - - vec3 color = (c1 * u_color1 + c2 * u_color2) / max(c1 + c2, 1.0); - - gl_FragColor = vec4(color * darkFactor * noiseFactor, 1.0); // R,G,B,A -} diff --git a/sketches/reflect/reflect.ts b/sketches/reflect/reflect.ts deleted file mode 100644 index 6595023..0000000 --- a/sketches/reflect/reflect.ts +++ /dev/null @@ -1,57 +0,0 @@ -import p5 from "p5"; -import configBuilder, { webGLSetup, ConfigValue } from "../../utils"; - -new p5((p: p5) => { - let shay: p5.Shader, - pointA: number[], - pointB: number[], - pointC: number[], - color1: number[], - color2: number[]; - - const c = configBuilder(p, { - padding: new ConfigValue({ - value: 0.1, - min: 0, - max: 0.5, - step: 0.05, - }), - seed: p.random(10000), - }); - - const randomWithPadding = (numnum: number) => { - const padding = c.padding * numnum; - return p.random(padding, numnum - padding); - }; - - p.setup = async () => { - webGLSetup(p, c); - shay = await p.loadShader("/sketches/reflect/basic.vert", "/sketches/reflect/reflect.frag"); - - pointA = [randomWithPadding(p.width), randomWithPadding(p.height)]; - pointB = [randomWithPadding(p.width), randomWithPadding(p.height)]; - pointC = [randomWithPadding(p.width), randomWithPadding(p.height)]; - - const hue1 = p.random(360); - const hue2 = (hue1 + p.random(120, 240)) % 360; // 120–240° apart - p.colorMode(p.HSL, 360, 100, 100); - const c1 = p.color(hue1, p.random(60, 100), p.random(40, 65)); - const c2 = p.color(hue2, p.random(60, 100), p.random(40, 65)); - p.colorMode(p.RGB, 255); - color1 = [p.red(c1) / 255, p.green(c1) / 255, p.blue(c1) / 255]; - color2 = [p.red(c2) / 255, p.green(c2) / 255, p.blue(c2) / 255]; - }; - - p.draw = () => { - if (!shay) return; - p.shader(shay); - shay.setUniform("u_resolution", [p.width, p.height]); - shay.setUniform("u_time", p.frameCount * 10); - shay.setUniform("u_pointA", pointA); - shay.setUniform("u_pointB", pointB); - shay.setUniform("u_pointC", pointC); - shay.setUniform("u_color1", color1); - shay.setUniform("u_color2", color2); - p.rect(0, 0, p.width, p.height); - }; -}); diff --git a/sketches/ringshapes/many.ts b/sketches/ringshapes/many.ts deleted file mode 100644 index 87e9353..0000000 --- a/sketches/ringshapes/many.ts +++ /dev/null @@ -1,86 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const EXPORT = false; - -const PALETTE_NAME = "genesis"; - -const STROKE_WEIGHT = 2; - -const COUNT = 25; -const OPACITY = 0.075; -const ANGLE_STEP = 0.005; -const MAX_RADIUS = (1080 / 4) * 3; - -const FRAME_START = (Math.PI / ANGLE_STEP) * 2 - 1; -const FRAME_END = (Math.PI / ANGLE_STEP) * 4; - -let COLORS: p5.Color[], BG: p5.Color, STROKE: any; -let RINGS: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - if (EXPORT) p.frameRate(4); - p.pixelDensity(1); - - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - STROKE = p.random(COLORS); - - p.strokeWeight(STROKE_WEIGHT); - - p.stroke(STROKE); - p.background(BG); - BG.setAlpha(OPACITY * 255); - - p.fill(BG); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - - for (let i = 0; i < COUNT; i++) { - RINGS.push({ - a: 0, - r: ((i + 1) * MAX_RADIUS) / COUNT, - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - p.rotate(p.HALF_PI); - p.beginShape(); - for (let i = 0; i < RINGS.length; i++) { - const ring = RINGS[i]; - const x = ring.r * p.cos(ring.a); - const y = ring.r * p.sin(ring.a); - p.strokeWeight(STROKE_WEIGHT * 5); - p.point(x, y); - p.strokeWeight(STROKE_WEIGHT); - p.vertex(x, y); - ring.a += i * ANGLE_STEP; - } - p.endShape(); - - if (EXPORT) { - if (p.frameCount > FRAME_START && p.frameCount <= FRAME_END) { - p.saveCanvas(); - } - if (p.frameCount > FRAME_END) { - p.noLoop(); - } - } - // beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/ringshapes/original.ts b/sketches/ringshapes/original.ts deleted file mode 100644 index 09cb3ec..0000000 --- a/sketches/ringshapes/original.ts +++ /dev/null @@ -1,86 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const EXPORT = false; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; - -const COUNT = 20; -const ANGLE_STEP = 0.005; -const MAX_RADIUS = 500; - -let RINGS: any[] = []; - -const FRAME_START = 0; -const FRAME_END = (Math.PI / ANGLE_STEP) * 2; - -let COLORS: p5.Color[], BG: p5.Color, STROKE: any; - -new p5((p: p5) => { - p.setup = () => { - if (EXPORT) p.frameRate(4); - p.pixelDensity(1); - - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - STROKE = p.random(COLORS); - - p.strokeWeight(STROKE_WEIGHT); - p.noFill(); - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - - for (let i = 0; i < COUNT; i++) { - RINGS.push({ - a: 0, - r: ((i + 1) * MAX_RADIUS) / COUNT, - }); - } - }; - - p.draw = () => { - p.background(BG); - p.translate(p.width / 2, p.height / 2); - p.rotate(-p.HALF_PI); - p.beginShape(); - for (let i = 0; i < RINGS.length; i++) { - const ring = RINGS[i]; - const x = ring.r * p.cos(ring.a); - const y = ring.r * p.sin(ring.a); - STROKE.setAlpha(0.2 * 255); - p.stroke(STROKE); - p.circle(0, 0, ring.r * 2); - STROKE.setAlpha(255); - p.stroke(STROKE); - p.vertex(x, y); - p.strokeWeight(STROKE_WEIGHT * 5); - p.point(x, y); - p.strokeWeight(STROKE_WEIGHT); - ring.a += (COUNT - i) * ANGLE_STEP; - } - p.endShape(); - - if (EXPORT) { - if (p.frameCount > FRAME_START && p.frameCount <= FRAME_END) { - p.saveCanvas(); - } - if (p.frameCount > FRAME_END) { - p.noLoop(); - } - } - // beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/ringshapes/transparency.ts b/sketches/ringshapes/transparency.ts deleted file mode 100644 index dd67fdf..0000000 --- a/sketches/ringshapes/transparency.ts +++ /dev/null @@ -1,69 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const EXPORT = false; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 2; - -const COUNT = 10; -const ANGLE_STEP = 0.005; -const MAX_RADIUS = 500; - -let RINGS: any[] = []; - -let COLORS: p5.Color[], BG: p5.Color, STROKE: any; - -new p5((p: p5) => { - p.setup = () => { - if (EXPORT) p.frameRate(5); - - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - const PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors.map((col: string) => p.color(col)); - BG = p.color(PALETTE.bg); - STROKE = p.random(COLORS); - p.stroke(STROKE); - p.background(BG); - - p.strokeWeight(STROKE_WEIGHT); - const FILL = p.color(BG); - FILL.setAlpha(0.05 * 255); - p.fill(FILL); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = STROKE; - - for (let i = 0; i < COUNT; i++) { - RINGS.push({ - a: 0, - r: ((i + 1) * MAX_RADIUS) / COUNT, - }); - } - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - p.rotate(-p.HALF_PI); - p.beginShape(); - for (let i = 0; i < RINGS.length; i++) { - const ring = RINGS[i]; - const x = ring.r * p.cos(ring.a); - const y = ring.r * p.sin(ring.a); - p.vertex(x, y); - ring.a += i * ANGLE_STEP; - } - p.endShape(); - // beginShape(); POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/scribble/circles.ts b/sketches/scribble/circles.ts deleted file mode 100644 index c451a3d..0000000 --- a/sketches/scribble/circles.ts +++ /dev/null @@ -1,80 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let section: any; -let gap: any; -let z = 0; -let xoff = 0; -let yoff = 0; - -let scribblecount = 50; -let coords: any[] = []; -let maxr = 7.5; - -let bigrad = 0; - -let palette: any; -let bigcolor: any; -let colors: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - - palette = palettes["symmeblu"]; - - colors = palette.colors; - - section = p.width / 8; - gap = p.width / 16; - p.colorMode(p.HSL); - p.background(palette.bg); - bigrad = p.width > p.height ? (p.height - section) / 2 : (p.width - section) / 2; - for (let c = 0; c < scribblecount; c++) { - const ang = p.random(p.TWO_PI); - const rad = bigrad * p.sqrt(p.random()); - const col = p.color(p.random(colors)); - col.setAlpha((p.random() + p.random() + p.random()) * 255); - coords.push([rad * p.cos(ang), rad * p.sin(ang), p.random(maxr), col]); - } - bigcolor = p.random(colors); - }; - - const SPEED = 5; // higher = fewer circles - - const OPACITY_FILL = 0.5; // higher = less visible background circles - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - - z++; - - coords.forEach((coord) => { - p.strokeWeight(p.random(10)); - const x = coord[0]; - const y = coord[1]; - const r = coord[2]; - const nooice = p.noise(0.005 * x, 0.005 * y, 0.5 * z); - p.stroke(coord[3]); - const filler = p.color(palette.bg); - filler.setAlpha(OPACITY_FILL * 255); - p.fill(filler); - xoff = p.random(-gap / 4, gap / 4); - yoff = p.random(-gap / 4, gap / 4); - const raddy = r * nooice * (gap - z * SPEED); - if (raddy > 0) p.circle(x + xoff, y + yoff, raddy); - }); - if (gap - z * SPEED < 1) { - p.noLoop(); - } - p.stroke(bigcolor); - p.strokeWeight(1000); - p.fill(p.color(45, 45, 75, 0)); - p.circle(0, 0, bigrad * 4); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/scribble/grid.ts b/sketches/scribble/grid.ts deleted file mode 100644 index 863bb00..0000000 --- a/sketches/scribble/grid.ts +++ /dev/null @@ -1,56 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let section: any; -let gap: any; -let xoff = 0; -let yoff = 0; -let bg: p5.Color; -let palette: any; -let colors: any; - -const SPEED = 5; // higher = fewer circles -const OPACITY_STROKE = 0.75; // higher = harsher circles -const OPACITY_FILL = 0.5; // higher = less visible background circles - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - - palette = palettes["onom"]; - colors = palette.colors; - bg = p.color(palette.bg); - p.background(bg); - - bg.setAlpha(OPACITY_FILL * 255); - p.fill(bg); - - const strokey = p.color(p.random(colors)); - strokey.setAlpha(OPACITY_STROKE * 255); - p.stroke(strokey); - - section = p.width / 8; - gap = p.width / 8; - }; - - p.draw = () => { - if (gap - p.frameCount * SPEED < 0) { - p.noLoop(); - } - for (let y = section; y <= p.height - section; y += gap) { - for (let x = section; x <= p.width - section; x += gap) { - const nooice = p.noise(0.005 * x, 0.005 * y, 0.5 * p.frameCount); - xoff = p.random(-gap / 4, gap / 4); - yoff = p.random(-gap / 4, gap / 4); - p.circle(x + xoff, y + yoff, nooice * (gap - p.frameCount * SPEED)); - } - } - }; - - const clickOnSave = () => { - // p.saveCanvas(); - }; -}); diff --git a/sketches/scribble/mess.ts b/sketches/scribble/mess.ts deleted file mode 100644 index 544f9cb..0000000 --- a/sketches/scribble/mess.ts +++ /dev/null @@ -1,46 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let section: any; -let palette: any; -let colors: any; -let bg: p5.Color; - -const OPACITY_STROKE = 0.75; // higher = harsher circles -const OPACITY_FILL = 0.1; // higher = less visible background circles - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - - p.colorMode(p.HSL); - - palette = palettes["onom"]; - colors = palette.colors; - bg = p.color(palette.bg); - p.background(bg); - - bg.setAlpha(OPACITY_FILL * 255); - p.fill(bg); - - const strokey = p.color(p.random(colors)); - strokey.setAlpha(OPACITY_STROKE * 255); - p.stroke(strokey); - - section = p.width / 4; - }; - - p.draw = () => { - for (let y = section; y <= p.height - section; y += 8) { - for (let x = section; x <= p.width - section; x += 8) { - const nooice = p.noise(0.01 * x, 0.01 * y, 0.1 * p.frameCount); - p.circle(x, y, nooice * section * 2); - } - } - }; - - const clickOnSave = () => { - // p.saveCanvas(); - }; -}); diff --git a/sketches/scribble/mistake.ts b/sketches/scribble/mistake.ts deleted file mode 100644 index 17458b2..0000000 --- a/sketches/scribble/mistake.ts +++ /dev/null @@ -1,91 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -// ONLY WORKS WITH P5v1.0.0, THEY FIXED MY BUG :( - -let section: any; -let gap: any; -let z = 0; -let xoff = 0; -let yoff = 0; - -let scribblecount = 32; -let coords: any[] = []; -let maxr = 7.5; - -let bigrad = 0; - -let bigcolor: any; - -let palette: any; -let colors: any; - -let colors_bg: any; - -const PALETTE_NAME = "genesis"; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - - section = p.width / 8; - gap = p.width / 16; - bigrad = p.width > p.height ? (p.height - section) / 2 : (p.width - section) / 2; - for (let c = 0; c < scribblecount; c++) { - const ang = p.random(p.TWO_PI); - const rad = bigrad * p.sqrt(p.random()); - coords.push([ - rad * p.cos(ang), - rad * p.sin(ang), - p.random(maxr), - p.random(1), - p.random(colors), - ]); - } - p.strokeWeight(3); - bigcolor = p.random(colors); - }; - - const SPEED = 5; // higher = fewer circles - - const OPACITY_FILL = 0.5; // higher = less visible background circles - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - - z++; - - coords.forEach((coord) => { - const x = coord[0]; - const y = coord[1]; - const r = coord[2]; - const decay = coord[3]; - const nooice = p.noise(0.005 * x, 0.005 * y, 0.5 * z); - p.stroke(coord[4]); - p.fill(p.color(45, 45, 75, OPACITY_FILL)); - xoff = p.random(-gap / 4, gap / 4); - yoff = p.random(-gap / 4, gap / 4); - const raddy = r * nooice * (gap - z * SPEED * decay); - if (raddy > 0) p.circle(x + xoff, y + yoff, raddy); - }); - p.stroke(bigcolor); - p.fill(p.color(45, 45, 75, 0)); - p.strokeWeight(1000); - p.fill(p.color(45, 45, 75, 0)); - p.circle(0, 0, bigrad * 4); - if (gap - z * SPEED < 1) { - p.noLoop(); - } - }; - - const clickOnSave = () => { - // p.saveCanvas(); - }; -}); diff --git a/sketches/scribble/scramble.ts b/sketches/scribble/scramble.ts deleted file mode 100644 index 4b7fd0c..0000000 --- a/sketches/scribble/scramble.ts +++ /dev/null @@ -1,67 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let _section: any; -let gap: any; -let z = 0; -let xoff = 0; -let yoff = 0; - -let scribblecount = 64; -let coords: any[] = []; -let maxr = 7.5; - -let palette: any; -let bg: p5.Color; -let colors: any; - -const SPEED = 5; // higher = fewer circles -const OPACITY_STROKE = 0.75; // higher = harsher circles -const OPACITY_FILL = 0.5; // higher = less visible background circles - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); - cnv.mouseClicked(clickOnSave); - _section = p.width / 8; - gap = p.width / 16; - p.colorMode(p.HSL); - - palette = palettes["onom"]; - colors = palette.colors; - bg = p.color(palette.bg); - p.background(bg); - - bg.setAlpha(OPACITY_FILL * 255); - p.fill(bg); - - const strokey = p.color(p.random(colors)); - strokey.setAlpha(OPACITY_STROKE * 255); - p.stroke(strokey); - - for (let c = 0; c < scribblecount; c++) { - coords.push([p.random(p.width), p.random(p.height), p.random(maxr)]); - } - }; - - p.draw = () => { - if (gap - z * SPEED < 10) { - p.noLoop(); - } - z++; - - coords.forEach((coord) => { - const x = coord[0]; - const y = coord[1]; - const r = coord[2]; - const nooice = p.noise(0.005 * x, 0.005 * y, 0.5 * z); - xoff = p.random(-gap / 4, gap / 4); - yoff = p.random(-gap / 4, gap / 4); - p.circle(x + xoff, y + yoff, r * nooice * (gap - z * SPEED)); - }); - }; - - const clickOnSave = () => { - // p.saveCanvas(); - }; -}); diff --git a/sketches/serpent/dots.ts b/sketches/serpent/dots.ts deleted file mode 100644 index d77e60b..0000000 --- a/sketches/serpent/dots.ts +++ /dev/null @@ -1,148 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "pastella"; // termos, pastella, monster -const MIN_ALPHA = 63; -const MAX_ALPHA = 255; - -const STROKE_WEIGHT = 15; -const UNIT = 1080 / 3; -const _MAGIC = 4.75; -const ANGELS = [Math.PI / 3.9, Math.PI / 4.5, Math.PI / 5.9, Math.PI / 11]; -const MAGIQUE = [15, 10, 6, 2]; -const ODD = [true, false, false, false]; - -let scroll = 0; -const OFFSETS: any[] = []; - -let ticker = 0; -const LAYERS = 4; -const MAXNDEX = 3; -const MAXYNDEX = 16; -const DURATION = 30 * 4; -const HIGHLIGHTED: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(MIN_ALPHA); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - for (let i = 0; i < MAXYNDEX; i++) { - OFFSETS.push(p.round(p.random(DURATION))); - } - }; - - p.draw = () => { - let odd = false; - const HEIGHT = p.height + UNIT; - let yndex = 0; - for (let y = scroll; y <= HEIGHT; y += UNIT / 4) { - const WAVE: any[] = []; - if ((ticker + OFFSETS[yndex % MAXYNDEX]) % DURATION === 0) { - HIGHLIGHTED[yndex] = Math.round((LAYERS - 1) * Math.random()); - } - let xndex = 0; - for (let x = 0; x <= p.width; x += UNIT) { - const FAN: any[] = []; - if (odd) x += UNIT * 0.5; - for (let l = 0; l < LAYERS; l++) { - const diameter = (UNIT * (LAYERS - l + 1)) / LAYERS; - const stepper = (ANGELS[l] / (ODD[l] ? MAGIQUE[l] - 1 : MAGIQUE[l])) * 2; - const starter = ODD[l] ? 0 : stepper / 2; - const LAYER: any[] = []; - for (let a = starter; a <= ANGELS[l]; a += stepper) { - const angle = (p.TWO_PI / 4) * 3 + a; - LAYER.push({ - x: x + (diameter * p.cos(angle)) / 2, - y: y + (diameter * p.sin(angle)) / 2, - }); - if (a != 0) { - LAYER.push({ - x: x - (diameter * p.cos(-angle)) / 2, - y: y - (diameter * p.sin(-angle)) / 2, - }); - } - } - LAYER.sort((a: any, b: any) => a.x - b.x); - drawDots(x, y, l, diameter, LAYER, HIGHLIGHTED[yndex], xndex, yndex); - FAN.push(LAYER); - } - WAVE.push(FAN); - if (odd) x -= UNIT * 0.5; - xndex++; - } - odd = !odd; - yndex++; - } - scroll--; - ticker++; - //p.saveCanvas(); - if (ticker === 30 * 15) { - p.noLoop(); - } - }; - - const drawDots = ( - x: any, - y: any, - l: any, - diameter: any, - dots: any, - HIGHLIGHTED: any, - xndex: any, - yndex: any, - ) => { - (p as any).drawingContext.shadowBlur = 0; - p.stroke(BG); - p.arc(x, y, diameter, diameter, p.PI, p.TWO_PI); - - const oddish = yndex % 2; - - const totallayerdots = dots.length * (MAXNDEX + oddish) * 2; - const alphaRange = MAX_ALPHA - MIN_ALPHA; - const dotoffset = (totallayerdots / (MAXNDEX + 1)) * xndex; - const thisticker = ticker + OFFSETS[yndex % MAXYNDEX]; - - const thisstroke = p.color(COLORS[yndex % COLORS.length]); - - p.beginShape(p.POINTS); - for (let i = 0; i < dots.length; i++) { - if (l === HIGHLIGHTED) { - const timeFactor = (thisticker % DURATION) / DURATION; - const timedot = totallayerdots * timeFactor; - const thispos = dotoffset + i + totallayerdots / 2; - const yootaro = (2.5067 / 1) * p.sqrt(p.TWO_PI); - const eeek = Math.exp(-((thispos - timedot * 2) ** 2) / (0.25 * timedot) ** 2); - (p as any).drawingContext.shadowColor = thisstroke; - (p as any).drawingContext.shadowBlur = STROKE_WEIGHT; - thisstroke.setAlpha(MIN_ALPHA + alphaRange * yootaro * eeek); - } else { - thisstroke.setAlpha(MIN_ALPHA); - } - p.stroke(thisstroke); - const dot = dots[i]; - p.vertex(dot.x, dot.y); - } - p.endShape(); - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/serpent/fans.ts b/sketches/serpent/fans.ts deleted file mode 100644 index c47d4fe..0000000 --- a/sketches/serpent/fans.ts +++ /dev/null @@ -1,102 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 10; -const UNIT = 1080 / 3; - -const _MAGIC = 4.75; - -let scroll = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - //STROKE.setAlpha(5); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - }; - - p.draw = () => { - //p.circle(p.width / 2, p.height / 2, 100); - // p.beginShape(); p.POINTS, p.LINES, p.TRIANGLES, p.TRIANGLE_FAN, p.TRIANGLE_STRIP, p.QUADS, p.QUAD_STRIP - let odd = false; - const HEIGHT = p.height + UNIT; - for (let y = scroll; y <= HEIGHT; y += UNIT / 4) { - for (let x = 0; x <= p.width; x += UNIT) { - if (odd) x += UNIT * 0.5; - const LAYERS = 4; - - const MAGIQUE = [0.8375, 0.6575, 0.4425, 0]; - const ANGELS: any[] = []; - for (let m = 0; m < MAGIQUE.length; m++) { - let xbez = (p as any).bezierPoint( - x, - x, - (x - UNIT / 2 - x) / p.PI + x, - x - UNIT / 2, - MAGIQUE[m], - ); - let ybez = (p as any).bezierPoint( - y - (UNIT / 8) * 5, - y - (UNIT / 8) * 5, - y - (UNIT / 8) * 7, - y - (UNIT / 8) * 7, - MAGIQUE[m], - ); - p.point(xbez, ybez); - const xdiff = x - xbez; - const ydiff = y - ybez; - ANGELS.push(p.atan(ydiff / xdiff)); - } - //console.log(ANGELS); - - for (let l = 0; l < LAYERS; l++) { - p.beginShape(p.POINTS); - const diameter = (UNIT * (LAYERS - l + 1)) / LAYERS; - //p.noStroke(); - p.stroke("#ff0000"); - p.arc(x, y, diameter, diameter, p.PI, p.TWO_PI); - p.stroke(STROKE); - const aCut = ANGELS[l] * 0.5; - const aStart = p.PI + aCut; - const aEnd = p.TWO_PI - aCut; - for (let a = aStart; a <= aEnd; a += 2 * p.atan(STROKE_WEIGHT / (diameter / 2))) { - const xDot = x + (diameter * p.cos(a)) / 2; - const yDot = y + (diameter * p.sin(a)) / 2; - p.vertex(xDot, yDot); - p.line(x, y, xDot, yDot); - } - p.endShape(p.CLOSE); - } - if (odd) x -= UNIT * 0.5; - } - odd = !odd; - } - //scroll--; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/snow/0-template.ts b/sketches/snow/0-template.ts deleted file mode 100644 index 20b3cac..0000000 --- a/sketches/snow/0-template.ts +++ /dev/null @@ -1,14 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - // Will run once when the sketch is opened - p.setup = () => { - p.createCanvas(1080, 1350); - p.background("brown"); - }; - - // Will run every frame (refreshes many times per second) - p.draw = () => { - p.circle(p.width / 2, p.height / 2, 100); - }; -}); diff --git a/sketches/snow/1-snowflakes.ts b/sketches/snow/1-snowflakes.ts deleted file mode 100644 index 0845a4d..0000000 --- a/sketches/snow/1-snowflakes.ts +++ /dev/null @@ -1,39 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - // Tweakable parameters - const SNOWFLAKE_COUNT = 500; - const SIZE = 10; - const GRAVITY = 1; - - const SNOWFLAKES: any[] = []; - - // Will run once when the sketch is opened - p.setup = () => { - p.createCanvas(1080, 1350); - p.noStroke(); - - // Initialize the snowflakes with random positions - for (let i = 0; i < SNOWFLAKE_COUNT; i++) { - SNOWFLAKES.push({ - x: p.random(p.width), - y: p.random(p.height), - }); - } - }; - - // Will run every frame (refreshes many times per second) - p.draw = () => { - p.background("brown"); - - // Iterate through each snowflake to draw and update them - for (let i = 0; i < SNOWFLAKES.length; i++) { - const snowflake = SNOWFLAKES[i]; - - p.circle(snowflake.x, snowflake.y, SIZE); - - if (snowflake.y > p.height + SIZE) snowflake.y = -SIZE; - else snowflake.y += GRAVITY; - } - }; -}); diff --git a/sketches/snow/2-layers.ts b/sketches/snow/2-layers.ts deleted file mode 100644 index 57381eb..0000000 --- a/sketches/snow/2-layers.ts +++ /dev/null @@ -1,53 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - // Tweakable parameters - const SNOWFLAKES_PER_LAYER = 200; - const MAX_SIZE = 10; - const GRAVITY = 0.75; - const LAYER_COUNT = 5; - - const SNOWFLAKES: any[][] = []; - - // Will run once when the sketch is opened - p.setup = () => { - p.createCanvas(1080, 1350); - p.noStroke(); - - // Initialize the snowflakes with random positions - for (let l = 0; l < LAYER_COUNT; l++) { - SNOWFLAKES.push([]); - for (let i = 0; i < SNOWFLAKES_PER_LAYER; i++) { - SNOWFLAKES[l].push({ - x: p.random(p.width), - y: p.random(p.height), - mass: p.random(0.75, 1.25), - l: l + 1, - }); - } - } - }; - - // Will run every frame (refreshes many times per second) - p.draw = () => { - p.background("brown"); - - // Iterate through each snowflake to draw and update them - for (let l = 0; l < SNOWFLAKES.length; l++) { - const LAYER = SNOWFLAKES[l]; - - for (let i = 0; i < LAYER.length; i++) { - const snowflake = LAYER[i]; - p.circle(snowflake.x, snowflake.y, (snowflake.l * MAX_SIZE) / LAYER_COUNT); - updateSnowflake(snowflake); - } - } - }; - - // Helper function to prepare a given snowflake for the next frame - const updateSnowflake = (snowflake: any) => { - const diameter = (snowflake.l * MAX_SIZE) / LAYER_COUNT; - if (snowflake.y > p.height + diameter) snowflake.y = -diameter; - else snowflake.y += GRAVITY * snowflake.l * snowflake.mass; - }; -}); diff --git a/sketches/snow/3-wind.ts b/sketches/snow/3-wind.ts deleted file mode 100644 index 9f31c85..0000000 --- a/sketches/snow/3-wind.ts +++ /dev/null @@ -1,62 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - // Tweakable parameters - const SNOWFLAKES_PER_LAYER = 200; - const MAX_SIZE = 10; - const GRAVITY = 0.75; - const LAYER_COUNT = 5; - - const WIND_SPEED = 1; - const WIND_CHANGE = 0.0025; - - const SNOWFLAKES: any[][] = []; - - // Will run once when the sketch is opened - p.setup = () => { - p.createCanvas(1080, 1350); - p.noStroke(); - - // Initialize the snowflakes with random positions - for (let l = 0; l < LAYER_COUNT; l++) { - SNOWFLAKES.push([]); - for (let i = 0; i < SNOWFLAKES_PER_LAYER; i++) { - SNOWFLAKES[l].push({ - x: p.random(p.width), - y: p.random(p.height), - mass: p.random(0.75, 1.25), - l: l + 1, - }); - } - } - }; - - // Will run every frame (refreshes many times per second) - p.draw = () => { - p.background("brown"); - - // Iterate through each snowflake to draw and update them - for (let l = 0; l < SNOWFLAKES.length; l++) { - const LAYER = SNOWFLAKES[l]; - - for (let i = 0; i < LAYER.length; i++) { - const snowflake = LAYER[i]; - p.circle(snowflake.x, snowflake.y, (snowflake.l * MAX_SIZE) / LAYER_COUNT); - updateSnowflake(snowflake); - } - } - }; - - // Helper function to prepare a given snowflake for the next frame - const updateSnowflake = (snowflake: any) => { - const diameter = (snowflake.l * MAX_SIZE) / LAYER_COUNT; - if (snowflake.y > p.height + diameter) snowflake.y = -diameter; - else snowflake.y += GRAVITY * snowflake.l * snowflake.mass; - - // Get the wind speed at the given layer and area of the page - const wind = p.noise(snowflake.l, snowflake.y * WIND_CHANGE, p.frameCount * WIND_CHANGE) - 0.5; - if (snowflake.x > p.width + diameter) snowflake.x = -diameter; - else if (snowflake.x < -diameter) snowflake.x = p.width + diameter; - else snowflake.x += wind * WIND_SPEED * snowflake.l; - }; -}); diff --git a/sketches/snow/4-ridges.ts b/sketches/snow/4-ridges.ts deleted file mode 100644 index 934d60d..0000000 --- a/sketches/snow/4-ridges.ts +++ /dev/null @@ -1,115 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - // Tweakable parameters - const SNOW_COLOR = "snow"; - const SNOWFLAKES_PER_LAYER = 200; - const MAX_SIZE = 10; - const GRAVITY = 0.75; - const LAYER_COUNT = 4; - - const SKY_COLOR = "#B1E8FF"; - const SKY_SPACE = 0.4; - - const WIND_SPEED = 1; - const WIND_CHANGE = 0.0025; - - const SUN_COLOR = "#FFF2AD"; - const SUN_GLOW = 100; - const SUN_RADIUS = 150; - - const RIDGE_TOP_COLOR = "#BCCEDD"; - const RIDGE_BOT_COLOR = "#7E9CB9"; - const RIDGE_STEP = 4; - const RIDGE_AMP = 250; - const RIDGE_ZOOM = 0.005; - - const SNOWFLAKES: any[][] = []; - - // Will run once when the sketch is opened - p.setup = () => { - p.createCanvas(1080, 1350); - p.fill(SNOW_COLOR); - p.noStroke(); - - // Initialize the snowflakes with random positions - for (let l = 0; l < LAYER_COUNT; l++) { - SNOWFLAKES.push([]); - for (let i = 0; i < SNOWFLAKES_PER_LAYER; i++) { - SNOWFLAKES[l].push({ - x: p.random(p.width), - y: p.random(p.height), - mass: p.random(0.75, 1.25), - l: l + 1, - }); - } - } - }; - - // Will run every frame (refreshes many times per second) - p.draw = () => { - p.background(SKY_COLOR); - const skyHeight = p.round(p.height * SKY_SPACE); - drawSun(p.width / 2, skyHeight - RIDGE_AMP / 2); - - // Iterate through the layers of snowflakes - for (let l = 0; l < SNOWFLAKES.length; l++) { - const SNOWLAYER = SNOWFLAKES[l]; - - // Draw a ridge for each layer of snow - const layerPosition = l * ((p.height - skyHeight) / LAYER_COUNT); - drawRidge(l, skyHeight + layerPosition); - - // Draw each snowflake - for (let i = 0; i < SNOWLAYER.length; i++) { - const snowflake = SNOWLAYER[i]; - //p.circle(snowflake.x, snowflake.y, (snowflake.l * MAX_SIZE) / LAYER_COUNT); - updateSnowflake(snowflake); - } - } - }; - - // Draw a simple sun - const drawSun = (x: number, y: number) => { - p.fill(SUN_COLOR); - (p.drawingContext as any).shadowBlur = SUN_GLOW; - (p.drawingContext as any).shadowColor = SUN_COLOR; - p.circle(x, y, SUN_RADIUS * 2); - (p.drawingContext as any).shadowBlur = 0; - }; - - // Compute and draw a ridge - const drawRidge = (l: number, y: number) => { - // Choose a color for the ridge based on its height - const FILL = p.lerpColor( - p.color(RIDGE_TOP_COLOR), - p.color(RIDGE_BOT_COLOR), - l / (LAYER_COUNT - 1), - ); - p.fill(FILL); - - p.beginShape(); - // Iterate through the width of the canvas - for (let x = 0; x <= p.width; x += RIDGE_STEP) { - const noisedY = p.noise(x * RIDGE_ZOOM, y); - p.vertex(x, y - noisedY * RIDGE_AMP); - } - p.vertex(p.width, p.height); - p.vertex(0, p.height); - p.endShape(p.CLOSE); - p.fill(SNOW_COLOR); - }; - - // Helper function to prepare a given snowflake for the next frame - const updateSnowflake = (snowflake: any) => { - const diameter = (snowflake.l * MAX_SIZE) / LAYER_COUNT; - if (snowflake.y > p.height + diameter) snowflake.y = -diameter; - else snowflake.y += GRAVITY * snowflake.l * snowflake.mass; - - // Get the wind speed at the given layer and area of the page - const wind = p.noise(snowflake.l, snowflake.y * WIND_CHANGE, p.frameCount * WIND_CHANGE) - 0.5; - if (snowflake.x > p.width + diameter) snowflake.x = -diameter; - else if (snowflake.x < -diameter) snowflake.x = p.width + diameter; - else snowflake.x += wind * WIND_SPEED * snowflake.l; - }; -}); diff --git a/sketches/snow/5-sky.ts b/sketches/snow/5-sky.ts deleted file mode 100644 index a56d85b..0000000 --- a/sketches/snow/5-sky.ts +++ /dev/null @@ -1,143 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - // Tweakable parameters - const SNOW_COLOR = "snow"; - const SNOWFLAKES_PER_LAYER = 200; - const MAX_SIZE = 10; - const GRAVITY = 0.5; - const LAYER_COUNT = 4; - - const SKY_COLOR = "skyblue"; - const SKY_SPACE = 0.4; - const SKY_AMP = 150; - const SKY_ZOOM = 0.0025; - const SKY_LAYER_OFFSET = 3; - - const WIND_SPEED = 1; - const WIND_CHANGE = 0.0025; - - const SUN_COLOR = "#FFF2AD"; - const SUN_GLOW = 100; - const SUN_RADIUS = 150; - - const RIDGE_TOP_COLOR = "#BCCEDD"; - const RIDGE_BOT_COLOR = "#7E9CB9"; - const RIDGE_STEP = 4; - const RIDGE_AMP = 250; - const RIDGE_ZOOM = 0.005; - - const SNOWFLAKES: any[][] = []; - - // Will run once when the sketch is opened - p.setup = () => { - p.createCanvas(1080, 1350); - p.fill(SNOW_COLOR); - p.noStroke(); - - // Initialize the snowflakes with random positions - for (let l = 0; l < LAYER_COUNT; l++) { - SNOWFLAKES.push([]); - for (let i = 0; i < SNOWFLAKES_PER_LAYER; i++) { - SNOWFLAKES[l].push({ - x: p.random(p.width), - y: p.random(p.height), - mass: p.random(0.75, 1.25), - l: l + 1, - }); - } - } - }; - - // Will run every frame (refreshes many times per second) - p.draw = () => { - p.background(SKY_COLOR); - const skyHeight = p.round(p.height * SKY_SPACE); - - for (let i = 1; i < LAYER_COUNT; i++) { - drawRidge( - i, - (i * skyHeight) / LAYER_COUNT, - SKY_AMP, - SKY_ZOOM, - SKY_COLOR, - SUN_COLOR, - SKY_LAYER_OFFSET, - ); - } - - drawSun(p.width / 2, skyHeight - RIDGE_AMP / 2); - - // Iterate through the layers of snowflakes - for (let l = 0; l < SNOWFLAKES.length; l++) { - const SNOWLAYER = SNOWFLAKES[l]; - - // Draw a ridge for each layer of snow - const layerPosition = l * ((p.height - skyHeight) / LAYER_COUNT); - drawRidge( - l, - skyHeight + layerPosition, - RIDGE_AMP, - RIDGE_ZOOM, - RIDGE_TOP_COLOR, - RIDGE_BOT_COLOR, - 0, - ); - - // Draw each snowflake - for (let i = 0; i < SNOWLAYER.length; i++) { - const snowflake = SNOWLAYER[i]; - p.circle(snowflake.x, snowflake.y, (snowflake.l * MAX_SIZE) / LAYER_COUNT); - updateSnowflake(snowflake); - } - } - }; - - // Draw a simple sun - const drawSun = (x: number, y: number) => { - p.fill(SUN_COLOR); - (p.drawingContext as any).shadowBlur = SUN_GLOW; - (p.drawingContext as any).shadowColor = SUN_COLOR; - p.circle(x, y, SUN_RADIUS * 2); - (p.drawingContext as any).shadowBlur = 0; - }; - - // Compute and draw a ridge - const drawRidge = ( - l: number, - y: number, - amp: number, - zoom: number, - c1: any, - c2: any, - coff: number, - ) => { - // Choose a color for the ridge based on its height - const FILL = p.lerpColor(p.color(c1), p.color(c2), l / (LAYER_COUNT - 1 + coff)); - p.fill(FILL); - - p.beginShape(); - // Iterate through the width of the canvas - for (let x = 0; x <= p.width; x += RIDGE_STEP) { - const noisedY = p.noise(x * zoom, y); - p.vertex(x, y - noisedY * amp); - } - p.vertex(p.width, p.height); - p.vertex(0, p.height); - p.endShape(p.CLOSE); - p.fill(SNOW_COLOR); - }; - - // Helper function to prepare a given snowflake for the next frame - const updateSnowflake = (snowflake: any) => { - const diameter = (snowflake.l * MAX_SIZE) / LAYER_COUNT; - if (snowflake.y > p.height + diameter) snowflake.y = -diameter; - else snowflake.y += GRAVITY * snowflake.l * snowflake.mass; - - // Get the wind speed at the given layer and area of the page - const wind = p.noise(snowflake.l, snowflake.y * WIND_CHANGE, p.frameCount * WIND_CHANGE) - 0.5; - if (snowflake.x > p.width + diameter) snowflake.x = -diameter; - else if (snowflake.x < -diameter) snowflake.x = p.width + diameter; - else snowflake.x += wind * WIND_SPEED * snowflake.l; - }; -}); diff --git a/sketches/snow/random-vs-perlin.ts b/sketches/snow/random-vs-perlin.ts deleted file mode 100644 index f4789d5..0000000 --- a/sketches/snow/random-vs-perlin.ts +++ /dev/null @@ -1,44 +0,0 @@ -import p5 from "p5"; - -new p5((p: p5) => { - // Will run once when the sketch is opened - p.setup = () => { - p.createCanvas(1238, 400); - p.background("#222"); - p.stroke("#fff"); - p.textSize(32); - - const AMP = 200; - const baseline = p.height / 2; - const offset = -AMP / 2 + 32; - - // Random line - drawText("random()"); - p.beginShape(); - for (let x = 0; x < p.width / 2; x += 2) { - p.vertex(x, baseline + offset + AMP * p.random()); - } - p.endShape(); - - // Straiht line - p.line(p.width / 2, 0, p.width / 2, p.height); - - p.translate(p.width / 2, 0); - - // Noised line - drawText("noise()"); - p.beginShape(); - for (let x = 0; x < p.width / 2; x += 2) { - p.vertex(x, baseline + offset + AMP * p.noise(x * 0.01)); - } - p.endShape(); - }; - - const drawText = (str: string) => { - p.fill("white"); - p.strokeWeight(1); - p.text(str, 64, 64); - p.strokeWeight(2); - p.noFill(); - }; -}); diff --git a/sketches/vogel/glow.ts b/sketches/vogel/glow.ts deleted file mode 100644 index a0bfe9a..0000000 --- a/sketches/vogel/glow.ts +++ /dev/null @@ -1,113 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; - -const PALETTE_NAME = "speis"; // mono, sydney, pastella, speis - -const STROKE_WEIGHT_START = 10; -let STROKE_WEIGHT = STROKE_WEIGHT_START; - -const ANGLE = Math.PI * (3 - Math.sqrt(5)); -let SPREAD = 20; -const AMOUNT = 5; - -let x0 = 0; -let y0 = 0; - -let TICK_RATE = 1; -let ticker = 0; -const FRAME_LIMIT = 300; - -const BACKLOG: any[] = []; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - p.frameRate(30); - - p.colorMode(p.HSL); - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - - p.background(BG); - p.fill(BG); - p.noFill(); - p.strokeWeight(STROKE_WEIGHT); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - const FRAME_FACTOR = p.frameCount / FRAME_LIMIT; - for (let i = 0; i < TICK_RATE; i++) { - STROKE_WEIGHT = p.random( - STROKE_WEIGHT_START - STROKE_WEIGHT_START * FRAME_FACTOR, - STROKE_WEIGHT_START + 5 * STROKE_WEIGHT_START * FRAME_FACTOR, - ); - TICK_RATE += 0.01; - SPREAD += 0.1; - p.scale(p.random(1 - 0.5 * FRAME_FACTOR, 1)); - p.strokeWeight(STROKE_WEIGHT); - const coleur = p.color(COLORS[ticker % COLORS.length]); - const a = ANGLE * ticker; - const r = SPREAD * p.sqrt(ticker); - const x1 = r * p.cos(a); - const y1 = r * p.sin(a); - //p.circle(x1, y1, 10); - //p.line(x0, y0, x1, y1); - p.point(x0, y0); - (p as any).drawingContext.shadowColor = coleur; - p.stroke(coleur); - p.point(x1, y1); - (p as any).drawingContext.shadowBlur = STROKE_WEIGHT; - p.strokeWeight(STROKE_WEIGHT / 5); - BACKLOG[ticker % AMOUNT] = { x0, y0 }; - if (ticker > AMOUNT - 1) { - const sx = BACKLOG[(ticker + 1) % AMOUNT].x0; - const sy = BACKLOG[(ticker + 1) % AMOUNT].y0; - //p.line(sx, sy, x1, y1); - curveBetween(sx, sy, x1, y1, 0.25, 0.25, 0); - p.point(sx, sy); - } - x0 = x1; - y0 = y1; - ticker++; - } - - if (p.frameCount > FRAME_LIMIT) { - console.log("donezo"); - p.noLoop(); - //p.saveCanvas(); - } - }; - - const curveBetween = (x1: any, y1: any, x2: any, y2: any, d: any, h: any, flip: any) => { - //find two control points off this line - var original = p5.Vector.sub(p.createVector(x2, y2), p.createVector(x1, y1)); - var inline = original - .copy() - .normalize() - .mult(original.mag() * d); - var rotated = inline - .copy() - .rotate(p.radians(90) + flip * p.radians(180)) - .normalize() - .mult(original.mag() * h); - var p1 = p5.Vector.add(p5.Vector.add(inline, rotated), p.createVector(x1, y1)); - //p.line(x1, y1, p1.x, p1.y); //show control line - rotated.mult(-1); - var p2 = p5.Vector.add(p5.Vector.add(inline, rotated).mult(-1), p.createVector(x2, y2)); - //p.line(x2, y2, p2.x, p2.y); //show control line - p.bezier(x1, y1, p1.x, p1.y, p2.x, p2.y, x2, y2); - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/vogel/lines.ts b/sketches/vogel/lines.ts deleted file mode 100644 index 2baf578..0000000 --- a/sketches/vogel/lines.ts +++ /dev/null @@ -1,77 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "onom"; - -const STROKE_WEIGHT = 1; - -const ANGLE = Math.PI * (3 - Math.sqrt(5)); -const SPREAD = 14; -const OPACITY = 0.25; - -let x0: any; -let y0: any; - -let TICK_RATE = 100; -let ticker = 0; -const FRAME_LIMIT = 300; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - p.frameRate(30); - - p.colorMode(p.HSL); - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - }; - - p.draw = () => { - //p.saveCanvas(); - - p.translate(p.width / 2, p.height / 2); - for (let i = 0; i < TICK_RATE; i++) { - const a = ANGLE * ticker; - const r = SPREAD * p.sqrt(ticker); - const x1 = r * p.cos(a); - const y1 = r * p.sin(a); - //p.circle(x1, y1, 10); - if (ticker != 0) { - p.line(x0, y0, x1, y1); - } - x0 = x1; - y0 = y1; - ticker++; - } - - if (p.frameCount >= FRAME_LIMIT) { - console.log(p.frameCount); - p.noLoop(); - } - - // p.beginShape(); p.POINTS, p.LINES, p.TRIANGLES, p.TRIANGLE_FAN, p.TRIANGLE_STRIP, p.QUADS, p.QUAD_STRIP - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/vogel/moon.ts b/sketches/vogel/moon.ts deleted file mode 100644 index 0cb4cb1..0000000 --- a/sketches/vogel/moon.ts +++ /dev/null @@ -1,82 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -let PALETTE: any; -let COLORS: any; -let BG: p5.Color; -let STROKE: any; - -const PALETTE_NAME = "genesis"; // retro - -const STROKE_WEIGHT = 1; - -const ANGLE = Math.PI * (3 - Math.sqrt(5)); -const SPREAD = 15; -const OPACITY = 0.5; -const MIN_LIGHTNESS = 0.15; - -let x0: any; -let y0: any; - -let TICK_RATE = 1; -let ticker = 0; -const FRAME_LIMIT = 300; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - p.frameRate(30); - - p.colorMode(p.HSL); - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = palettes[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - STROKE = p.color(p.random(COLORS)); - - p.background(BG); - p.fill(BG); - STROKE.setAlpha(OPACITY * 255); - p.stroke(STROKE); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - TICK_RATE += 0.075; - for (let i = 0; i < TICK_RATE; i++) { - p.stroke( - p.hue(STROKE), - p.saturation(STROKE), - (p.lightness(STROKE) / FRAME_LIMIT) * (FRAME_LIMIT * (1 + MIN_LIGHTNESS) - p.frameCount), - OPACITY, - ); - const a = ANGLE * ticker; - p.rotate(a); - const r = SPREAD * p.sqrt(ticker); - const x1 = r * p.cos(a); - const y1 = r * p.sin(a); - if (ticker > 1) { - p.line(x0, y0, x1, y1); - } - x0 = x1; - y0 = y1; - ticker++; - } - //p.saveCanvas(); - if (p.frameCount > FRAME_LIMIT) { - p.noLoop(); - } - - // p.beginShape(); p.POINTS, p.LINES, p.TRIANGLES, p.TRIANGLE_FAN, p.TRIANGLE_STRIP, p.QUADS, p.QUAD_STRIP - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/vogel/spiral.ts b/sketches/vogel/spiral.ts deleted file mode 100644 index 862353f..0000000 --- a/sketches/vogel/spiral.ts +++ /dev/null @@ -1,72 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; // retro - -const STROKE_WEIGHT = 10; - -const ANGLE = Math.PI * (3 - Math.sqrt(5)); -const SPREAD = 10; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; - -let x0: number; -let y0: number; - -let TICK_RATE = 50; -let ticker = 7000; -const FRAME_LIMIT = 300; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - p.frameRate(30); - - p.colorMode(p.HSL); - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - - p.background(BG); - p.fill(BG); - //p.noFill(); - p.strokeWeight(STROKE_WEIGHT); - - //p.drawingContext.shadowBlur = STROKE_WEIGHT; - //p.drawingContext.shadowColor = p.random(COLORS); - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - p.rotate(ANGLE); - TICK_RATE *= 0.9939; - for (let i = 0; i < TICK_RATE; i++) { - const coleur = p.color(COLORS[p.round(ticker) % COLORS.length]); - p.stroke(coleur); - const a = ANGLE * ticker; - const r = SPREAD * p.sqrt(ticker); - const x1 = r * p.cos(a); - const y1 = r * p.sin(a); - p.strokeWeight(STROKE_WEIGHT + 0.005 * ticker ** 1.1); - //p.circle(x1, y1, 10); - p.point(x0, y0); - x0 = x1; - y0 = y1; - if (ticker > 1) ticker--; - } - //p.saveCanvas(); - if (p.frameCount > FRAME_LIMIT) { - console.log("donezo"); - p.noLoop(); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/vogel/square.ts b/sketches/vogel/square.ts deleted file mode 100644 index 2020e67..0000000 --- a/sketches/vogel/square.ts +++ /dev/null @@ -1,90 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "redcent"; // retro - -const STROKE_WEIGHT = 1; - -const ANGLE = Math.PI * (3 - Math.sqrt(5)); -let SPREAD = 75; -const OPACITY = 1; - -const NUCOLOR: any[] = []; - -let PALETTE: any; -let COLORS: p5.Color[]; -let BG: p5.Color; - -let x0 = 0; -let y0 = 0; - -let TICK_RATE = 0.0225; -let ticker = 0; -const FRAME_LIMIT = 300; - -let coleur: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - p.frameRate(30); - - p.colorMode(p.HSL); - PALETTE = palettes[PALETTE_NAME]; - // const PALETTE_KEYS = Object.keys(palettes); - // PALETTE = (palettes)[PALETTE_KEYS[(PALETTE_KEYS.length * Math.random()) << 0]]; - COLORS = PALETTE.colors; - BG = p.color(PALETTE.bg); - - p.background(BG); - p.fill(BG); - p.noFill(); - p.strokeWeight(STROKE_WEIGHT); - (p as any).rectMode(p.CENTER); - - for (let c = 0; c < COLORS.length; c++) { - const coleur = p.color(COLORS[c]); - coleur.setAlpha(OPACITY * 255); - NUCOLOR.push(coleur); - } - }; - - p.draw = () => { - p.translate(p.width / 2, p.height / 2); - p.rotate(ANGLE * 0.825); - for (let i = 0; i < TICK_RATE; i++) { - TICK_RATE += 0.0225; - const a = ANGLE * ticker; - const r = SPREAD * p.sqrt(ticker); - const x1 = r * p.cos(a); - const y1 = r * p.sin(a); - //p.circle(x1, y1, 10); - //p.line(x0, y0, x1, y1); - coleur = p.random(NUCOLOR); - p.stroke( - p.hue(coleur), - p.saturation(coleur), - (p.lightness(coleur) / FRAME_LIMIT) * p.frameCount, - ); - const xdiff = p.abs(x0 - x1); - const ydiff = p.abs(y0 - y1); - let meh = 0; - if (xdiff > ydiff) meh = xdiff; - else meh = ydiff; - p.circle(x0, y0, meh); - x0 = x1; - y0 = y1; - ticker++; - } - //p.saveCanvas(); - if (p.frameCount > FRAME_LIMIT) { - console.log("donezo"); - p.noLoop(); - } - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/walkers/anti.ts b/sketches/walkers/anti.ts deleted file mode 100644 index 7730c70..0000000 --- a/sketches/walkers/anti.ts +++ /dev/null @@ -1,60 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "onom"; -const STROKE_WEIGHT = 2; -const THREAD_COUNT = 1000; -const SPEED = 10; - -const THREADS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - // const keys = Object.keys(palettes); - // palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - p.stroke(p.random(colors)); - - for (let t = 0; t < THREAD_COUNT; t++) { - THREADS.push({ - x: p.width / 2, - y: p.height / 2, - xSpeed: p.random(-SPEED, SPEED), - ySpeed: p.random(-SPEED, SPEED), - }); - } - }; - - p.draw = () => { - for (let t = 0; t < THREADS.length; t++) { - const thread = THREADS[t]; - p.point(thread["x"], thread["y"]); - - updateThread(t, thread); - } - p.circle(p.width / 2, p.height / 2, 100); - }; - - const updateThread = (t: any, thread: any) => { - thread.x += thread.xSpeed; - thread.y += thread.ySpeed; - THREADS[t] = thread; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/walkers/archipelago.ts b/sketches/walkers/archipelago.ts deleted file mode 100644 index be222b1..0000000 --- a/sketches/walkers/archipelago.ts +++ /dev/null @@ -1,75 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "speis"; -const STROKE_WEIGHT = 2; -const THREAD_COUNT = 10 * 10; - -const SPEED_DIFF = 5; -const NOISE_GRANULARITY = 0.005; -const OPACITY = 255; - -const THREADS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - - const angRandy = p.random(p.TWO_PI); - - const squirtle = p.sqrt(THREAD_COUNT); - - for (let t = 0; t < THREAD_COUNT; t++) { - const collie = p.color(p.random(colors)); - collie.setAlpha(OPACITY); - - THREADS.push({ - x: ((p.width / squirtle) * (t + 0.5)) % p.width, - y: ((p.height / squirtle) * (0.5 + p.ceil(t / squirtle))) % p.height, - angle: angRandy, - color: collie, - }); - } - }; - - p.draw = () => { - //p.background(colors_bg); - - for (let t = 0; t < THREADS.length; t++) { - const thread = THREADS[t]; - p.stroke(thread.color); - //p.circle(thread.x, thread.y, 100); - //p.point(thread["x"], thread["y"]); - updateThread(thread); - } - }; - - const updateThread = (thread: any) => { - let noize = p.noise(thread.x * NOISE_GRANULARITY, thread.y * NOISE_GRANULARITY); - noize -= noize / 2; - const xNew = thread.x + p.cos(thread.angle * noize) * SPEED_DIFF * p.random(-1, 1); - const yNew = thread.y + p.sin(thread.angle * noize) * SPEED_DIFF * p.random(-1, 1); - p.line(thread.x, thread.y, xNew, yNew); - thread.x = xNew; - thread.y = yNew; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/walkers/disgusting.ts b/sketches/walkers/disgusting.ts deleted file mode 100644 index e8ebfd1..0000000 --- a/sketches/walkers/disgusting.ts +++ /dev/null @@ -1,110 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const FRAME_LIMIT = 30; -const PALETTE_NAME = "pastella"; //mono retro redcent symmeblu pastella termos vintage -const STROKE_WEIGHT_START = 100; -const STROKE_WEIGHT = 5; -const STROKE_WEIGHT_DIFF = (STROKE_WEIGHT_START - STROKE_WEIGHT) / FRAME_LIMIT; -const THREAD_COUNT = 144; -const SPEED = 10; -const NOISE_GRANULARITY = 0.005; //0.005 -//const NOISE_EVOLUTION = 0.0001; -const OPACITY = 255; - -const FADE_IN = OPACITY / FRAME_LIMIT; -let fade = 0; -let noize = 0; -const THREADS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -let timer = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = p.color(palette.bg); - p.background(colors_bg); - - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - - const angRandy = p.random(p.PI); - const squirtle = p.sqrt(THREAD_COUNT); - for (let t = 0; t < THREAD_COUNT; t++) { - const collie = p.color(p.random(colors)); - if (OPACITY >= fade) collie.setAlpha(fade); - THREADS.push({ - x: ((p.width / squirtle) * t) % p.width, - y: ((p.height / squirtle) * p.ceil(t / squirtle)) % p.height, - angle: angRandy, - color: collie, - strokeWeight: STROKE_WEIGHT_START, - }); - } - }; - - p.draw = () => { - fade += FADE_IN; - //noize += NOISE_EVOLUTION; - //p.background(colors_bg); - - for (let t = 0; t < THREADS.length; t++) { - const thread = THREADS[t]; - if (OPACITY >= fade) thread.color.setAlpha(fade); - p.strokeWeight(thread.strokeWeight); - if (thread.strokeWeight - STROKE_WEIGHT_DIFF >= STROKE_WEIGHT) { - thread.strokeWeight -= STROKE_WEIGHT_DIFF; - } else { - thread.strokeWeight = STROKE_WEIGHT; - } - p.stroke(thread.color); - - updateThread(thread); - } - timer++; - if (timer > FRAME_LIMIT) { - p.noLoop(); - } - }; - - const updateThread = (thread: any) => { - let noisebois = p.noise(thread.x * NOISE_GRANULARITY, thread.y * NOISE_GRANULARITY, noize); - let xOld = thread.x; - let yOld = thread.y; - let xNew = xOld + p.cos(thread.angle * noisebois) * SPEED; - let yNew = yOld + p.sin(thread.angle * noisebois) * SPEED; - if (xNew <= 0) { - xOld = p.width; - xNew = p.width - xNew; - } else if (xNew >= p.width) { - xOld = 0; - xNew = xNew % p.width; - } - if (yNew <= 0) { - yOld = p.height; - yNew = p.height - yNew; - } else if (yNew >= p.height) { - yOld = 0; - yNew = yNew % p.height; - } - p.line(xOld, yOld, xNew, yNew); - //p.point(thread.x, thread.y); - - thread.x = xNew; - thread.y = yNew; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/walkers/dots.ts b/sketches/walkers/dots.ts deleted file mode 100644 index e9900df..0000000 --- a/sketches/walkers/dots.ts +++ /dev/null @@ -1,115 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -// sydney -// redcent -// symmeblu -// termos -// vintage -const PALETTE_NAME = "termos"; -const FRAME_LIMIT = 35; -const SPEED = 50; -const STROKE_WEIGHT = 1; -const STROKE_WEIGHT_START = 50; // higher = more background circles -const THREAD_COUNT = 500; -const NOISE_GRANULARITY = 0.005; -//const NOISE_EVOLUTION = 0.0001; -const OPACITY = 255; - -const STROKE_WEIGHT_DIFF = (STROKE_WEIGHT_START - STROKE_WEIGHT) / FRAME_LIMIT; -const FADE_IN = OPACITY / FRAME_LIMIT; -let fade = 0; -let noize = 0; -const THREADS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -let timer = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(2400, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = p.color(palette.bg); - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - - const squirtle = p.sqrt(THREAD_COUNT); - for (let t = 0; t < THREAD_COUNT; t++) { - const collie = p.color(p.random(colors)); - if (OPACITY >= fade) collie.setAlpha(fade); - THREADS.push({ - x: ((p.width / squirtle) * t) % p.width, - y: ((p.height / squirtle) * p.ceil(t / squirtle)) % p.height, - angle: p.PI / 2, - color: collie, - strokeWeight: p.random(STROKE_WEIGHT_START * 0.5, STROKE_WEIGHT_START), - }); - } - }; - - p.draw = () => { - fade += FADE_IN; - //noize += NOISE_EVOLUTION; - //p.background(colors_bg); - - for (let t = 0; t < THREADS.length; t++) { - const thread = THREADS[t]; - if (OPACITY >= fade) thread.color.setAlpha(fade); - p.strokeWeight(thread.strokeWeight); - if (thread.strokeWeight - STROKE_WEIGHT_DIFF >= STROKE_WEIGHT) { - thread.strokeWeight -= STROKE_WEIGHT_DIFF; - } else { - thread.strokeWeight = STROKE_WEIGHT; - } - //p.fill(thread.color); - p.stroke(thread.color); - updateThread(thread); - } - timer++; - if (timer > FRAME_LIMIT) { - p.noLoop(); - } - }; - - const updateThread = (thread: any) => { - let noisebois = p.noise(thread.x * NOISE_GRANULARITY, thread.y * NOISE_GRANULARITY, noize); - let xOld = thread.x; - let yOld = thread.y; - let xNew = xOld + p.cos(thread.angle * noisebois) * SPEED; - let yNew = yOld + p.sin(thread.angle * noisebois) * SPEED; - if (xNew <= 0) { - xOld = p.width; - xNew = p.width - xNew; - } else if (xNew >= p.width) { - xOld = 0; - xNew = xNew % p.width; - } - if (yNew <= 0) { - yOld = p.height; - yNew = p.height - yNew; - } else if (yNew >= p.height) { - yOld = 0; - yNew = yNew % p.height; - } - //p.line(xOld, yOld, xNew, yNew); - //p.circle(thread.x, thread.y, thread.strokeWeight / 2); - //p.rect(thread.x, thread.y, thread.strokeWeight / 2, thread.strokeWeight / 2); - p.point(thread.x, thread.y); - - thread.x = xNew; - thread.y = yNew; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/sketches/walkers/lines.ts b/sketches/walkers/lines.ts deleted file mode 100644 index db5c922..0000000 --- a/sketches/walkers/lines.ts +++ /dev/null @@ -1,91 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -const PALETTE_NAME = "genesis"; -const STROKE_WEIGHT = 5; -const THREAD_COUNT = 1000; -const SPEED = 5; -const NOISE_GRANULARITY = 0.005; -//const NOISE_EVOLUTION = 0.0001; -const OPACITY = 255; -const FADE_IN = 5; - -let fade = 0; -let noize = 0; -const THREADS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -let _timer = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1080); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = palette.bg; - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - - const _angRandy = p.random(p.TWO_PI); - const squirtle = p.sqrt(THREAD_COUNT); - for (let t = 0; t < THREAD_COUNT; t++) { - const collie = p.color(p.random(colors)); - if (OPACITY >= fade) collie.setAlpha(fade); - THREADS.push({ - x: ((p.width / squirtle) * (t + 0.5)) % p.width, - y: ((p.height / squirtle) * (0.5 + p.ceil(t / squirtle))) % p.height, - //angle: angRandy, - angle: p.TWO_PI, - color: collie, - }); - } - }; - - p.draw = () => { - fade += FADE_IN; - //p.background(colors_bg); - //noize += NOISE_EVOLUTION; - - for (let t = 0; t < THREADS.length; t++) { - const thread = THREADS[t]; - thread.color.setAlpha(fade); - p.stroke(thread.color); - - updateThread(thread); - } - }; - - const updateThread = (thread: any) => { - let noisebois = p.noise(thread.x * NOISE_GRANULARITY, thread.y * NOISE_GRANULARITY, noize); - let xOld = thread.x; - let yOld = thread.y; - let xNew = xOld + p.cos(thread.angle * noisebois) * SPEED; - let yNew = yOld + p.sin(thread.angle * noisebois) * SPEED; - if (xNew <= 0) { - xOld = 0; - xNew = p.width - xNew; - } - if (yNew <= 0) { - yOld = 0; - yNew = p.height - yNew; - } - p.line(xOld, yOld, xNew, yNew); - //p.circle(thread.x, thread.y, 50); - //p.point(thread["x"], thread["y"]); - - thread.x = xNew % p.width; - thread.y = yNew % p.height; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/walkers/mono.ts b/sketches/walkers/mono.ts deleted file mode 100644 index 5b66564..0000000 --- a/sketches/walkers/mono.ts +++ /dev/null @@ -1,106 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -// sydney -// redcent -// symmeblu -// termos -// vintage -// monster -const PALETTE_NAME = "mono"; -const SPEED = 50; -const STROKE_WEIGHT = 1; -const THREAD_COUNT = 1000; -const NOISE_GRANULARITY = 0.0025; -const NOISE_EVOLUTION = 0.001; -const OPACITY = 63; - -const FADE_IN = OPACITY / 100; -let fade = 31; -let noize = 0; -const THREADS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -let _timer = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = p.color(palette.bg); - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - - const squirtle = p.sqrt(THREAD_COUNT); - const angRandy = p.random(p.TWO_PI); - for (let t = 0; t < THREAD_COUNT; t++) { - const collie = p.color(p.random(colors)); - if (OPACITY >= fade) collie.setAlpha(fade); - THREADS.push({ - x: ((p.width / squirtle) * t) % p.width, - y: ((p.height / squirtle) * p.ceil(t / squirtle)) % p.height, - color: collie, - angle: angRandy, - strokeWeight: p.random(STROKE_WEIGHT * 0.5, STROKE_WEIGHT * 2), - }); - } - }; - - p.draw = () => { - fade += FADE_IN; - noize += NOISE_EVOLUTION; - //p.background(colors_bg); - - for (let t = 0; t < THREADS.length; t++) { - const thread = THREADS[t]; - if (OPACITY >= fade) thread.color.setAlpha(fade); - p.strokeWeight(thread.strokeWeight); - //p.fill(thread.color); - p.stroke(thread.color); - updateThread(thread); - } - _timer++; - }; - - const updateThread = (thread: any) => { - let noisebois = p.noise(thread.x * NOISE_GRANULARITY, thread.y * NOISE_GRANULARITY, noize); - let xOld = thread.x; - let yOld = thread.y; - let xNew = xOld + p.cos(thread.angle * noisebois) * SPEED; - let yNew = yOld + p.sin(thread.angle * noisebois) * SPEED; - if (xNew <= 0) { - xOld = p.width; - xNew = p.width - xNew; - } else if (xNew >= p.width) { - xOld = 0; - xNew = xNew % p.width; - } - if (yNew <= 0) { - yOld = p.height; - yNew = p.height - yNew; - } else if (yNew >= p.height) { - yOld = 0; - yNew = yNew % p.height; - } - //p.line(xOld, yOld, xNew, yNew); - //p.circle(thread.x, thread.y, thread.strokeWeight / 2); - //p.rect(thread.x, thread.y, thread.strokeWeight / 2, thread.strokeWeight / 2); - p.point(thread.x, thread.y); - - thread.x = xNew; - thread.y = yNew; - }; - - const clickOnSave = () => { - //p.saveCanvas(); - }; -}); diff --git a/sketches/walkers/worms.ts b/sketches/walkers/worms.ts deleted file mode 100644 index b632839..0000000 --- a/sketches/walkers/worms.ts +++ /dev/null @@ -1,105 +0,0 @@ -import p5 from "p5"; -import { palettes } from "../../palettes"; - -// sydney -// redcent -// symmeblu -// termos -// vintage -// monster -const PALETTE_NAME = "genesis"; -const SPEED = 5; -const STROKE_WEIGHT = 10; -const THREAD_COUNT = 200; -const NOISE_GRANULARITY = 0.005; -const NOISE_EVOLUTION = 0.01; -const OPACITY = 255; - -const FADE_IN = OPACITY / 30; -let fade = 0; -let noize = 0; -const THREADS: any[] = []; - -let palette: any; -let colors: any[]; -let colors_bg: any; - -let _timer = 0; - -new p5((p: p5) => { - p.setup = () => { - const cnv = p.createCanvas(1080, 1350); // 1080, 1350 - cnv.mouseClicked(clickOnSave); - - palette = palettes[PALETTE_NAME]; - //const keys = Object.keys(palettes); - //palette = (palettes)[keys[(keys.length * Math.random()) << 0]]; - colors = palette.colors; - colors_bg = p.color(palette.bg); - p.background(colors_bg); - p.strokeWeight(STROKE_WEIGHT); - p.fill(colors_bg); - - const squirtle = p.sqrt(THREAD_COUNT); - for (let t = 0; t < THREAD_COUNT; t++) { - const collie = p.color(p.random(colors)); - if (OPACITY >= fade) collie.setAlpha(fade); - THREADS.push({ - x: ((p.width / squirtle) * t) % p.width, - y: ((p.height / squirtle) * p.ceil(t / squirtle)) % p.height, - angle: p.PI / 2, - color: collie, - strokeWeight: p.random(STROKE_WEIGHT * 0.5, STROKE_WEIGHT * 2), - }); - } - }; - - p.draw = () => { - fade += FADE_IN; - noize += NOISE_EVOLUTION; - //p.background(colors_bg); - - for (let t = 0; t < THREADS.length; t++) { - const thread = THREADS[t]; - if (OPACITY >= fade) thread.color.setAlpha(fade); - p.strokeWeight(thread.strokeWeight); - //p.fill(thread.color); - p.stroke(thread.color); - updateThread(thread); - } - _timer++; - }; - - const updateThread = (thread: any) => { - let noisebois = p.noise(thread.x * NOISE_GRANULARITY, thread.y * NOISE_GRANULARITY, noize); - let xOld = thread.x; - let yOld = thread.y; - let xNew = xOld + p.cos(thread.angle * noisebois) * SPEED; - let yNew = yOld + p.sin(thread.angle * noisebois) * SPEED; - if (xNew <= 0) { - xOld = p.width; - xNew = p.width - xNew; - } else if (xNew >= p.width) { - xOld = 0; - xNew = xNew % p.width; - } - if (yNew <= 0) { - yOld = p.height; - yNew = p.height - yNew; - } else if (yNew >= p.height) { - yOld = 0; - yNew = yNew % p.height; - } - p.line(xOld, yOld, xNew, yNew); - //p.circle(thread.x, thread.y, thread.strokeWeight / 2); - //p.rect(thread.x, thread.y, thread.strokeWeight / 2, thread.strokeWeight / 2); - //p.point(thread.x, thread.y); - - thread.x = xNew; - thread.y = yNew; - }; - - const clickOnSave = () => { - p.saveCanvas(); - }; -}); diff --git a/style.css b/style.css index 3cdbf73..d2e7f57 100644 --- a/style.css +++ b/style.css @@ -1,87 +1,100 @@ -/* sketch view */ -body.sketch { - display: grid; - place-items: center; - height: 100vh; - margin: 0; +:root { + --text: black; + --background: antiquewhite; + --padding: 50px; + --line-width: 2px; } -body.sketch canvas { - width: initial !important; - height: 90vh !important; - box-shadow: 0 4px 16px rgb(0 0 0 / 0.5); +body { + display: flex; + flex-direction: column; + align-items: center; + padding: 0 calc(var(--padding) * 2) var(--padding); + + color: var(--text); + background: var(--background); + font-family: "Open Sans", sans-serif; + font-size: 1.5rem; } -.back-link { - position: fixed; - top: 1rem; - left: 1rem; - color: #fff; - font-family: monospace; - font-size: 0.8rem; - text-decoration: none; - opacity: 0.35; - z-index: 100; - transition: opacity 0.15s; +main { + width: 100%; + display: grid; + grid-gap: calc(var(--padding) / 2); + grid-template-columns: 1fr 1fr; + grid-auto-rows: 40vw; } -.back-link:hover { - opacity: 1; +main .sketch-entrance { + display: block; + position: relative; } -/* picker view */ -*, -*::before, -*::after { - box-sizing: border-box; +.sketch-entrance > div { + position: absolute; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + color: transparent; + + transition: backdrop-filter 0.2s, color 0.2s; } -body { - margin: 0; - padding: 2.5rem 3rem; - background: #faebd7; - color: #000; - font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace; - font-size: 0.8rem; - line-height: 1.6; +.sketch-entrance > div:hover { + color: white; + backdrop-filter: blur(10px); } -h1 { - color: #333; - font-size: 0.75rem; - margin: 0 0 3rem; - font-weight: normal; - letter-spacing: 0.15em; - text-transform: uppercase; +.sketch-entrance > img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; } -.group { - margin-bottom: 2rem; +footer { + width: 100%; + display: flex; + justify-content: center; + margin-top: var(--padding); + /* border-top: var(--line-width) solid var(--text); */ + padding-top: var(--padding); } -.group-label { - color: #333; - margin-bottom: 0.4rem; - font-size: 0.7rem; - letter-spacing: 0.08em; +footer > a { + transition: opacity 0.2s; } -.group-label span { - color: #444; +footer > a:hover { + opacity: 0.5; } -.items { - display: flex; - flex-wrap: wrap; - gap: 0.2rem 0; +footer > a > img { + width: var(--padding); } -a { - color: inherit; - text-decoration: none; - padding: 0.1rem 0.6rem 0.1rem 0; +footer > * + * { + margin-left: var(--padding); } -a:hover { - text-decoration: underline; +@media only screen and (max-width: 1000px) { + :root { + --padding: 25px; + } + + body { + padding: var(--padding); + font-size: 1rem; + } + + h1 { + font-size: 2rem; + } } diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index 3aee76b..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2020", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "strict": true, - "noUnusedLocals": false, - "noUnusedParameters": false, - "skipLibCheck": true - }, - "include": ["./**/*.ts"], - "exclude": ["node_modules"] -} diff --git a/utils.ts b/utils.ts deleted file mode 100644 index 6b1e702..0000000 --- a/utils.ts +++ /dev/null @@ -1,90 +0,0 @@ -import p5 from "p5"; -import { Pane } from "tweakpane"; -import { PALETTE_NAME, palettes } from "./palettes"; - -export class ConfigValue { - value: number; - min: number; - max: number; - step: number; - show?: boolean; - - constructor({ - value, - min, - max, - step, - show, - }: { - value: number; - min: number; - max: number; - step: number; - show?: boolean; - }) { - this.value = value; - this.min = min; - this.max = max; - this.step = step; - this.show = show; - } -} - -// p is a p5 instance, c is an object of values or ConfigValues -const configBuilder = (p: p5, c: Record) => { - const config: { palette: PALETTE_NAME } & Record = { - palette: "onom", - seed: 0, - ...c, - download: () => p.saveCanvas(`s${config.seed}-f${p.frameCount}.png`), - }; - - const pane = new Pane() as any; - - const controllers: Record = {}; - - Object.entries(config).forEach(([key, value]) => { - const label = key.charAt(0).toUpperCase() + key.slice(1); - if (key === "download") { - controllers[key] = pane.addButton({ title: label }).on("click", config[key]); - } else if (key === "palette") { - const options: Record = {}; - Object.keys(palettes).forEach((name) => { - options[name] = name; - }); - controllers[key] = pane - .addBinding(config, key, { options, label }) - .on("change", () => p.setup()); - } else if (key === "seed") { - controllers[key] = pane - .addBinding(config, key, { min: 0, max: 100, step: 1, label }) - .on("change", () => p.setup()); - } else if (value instanceof ConfigValue) { - config[key] = value.value; - controllers[key] = pane - .addBinding(config, key, { min: value.min, max: value.max, step: value.step, label }) - .on("change", () => p.setup()); - } else { - controllers[key] = pane.addBinding(config, key, { label }).on("change", () => p.setup()); - } - }); - - return config; -}; - -export const baseSetup = (p: p5, c: Record) => { - p.createCanvas(1080, 1350); - p.pixelDensity(1); - p.randomSeed(c.seed); - p.random(); // get rid of some pseudo-random nastiness - p.colorMode(p.HSL); -}; - -export const webGLSetup = (p: p5, c: Record) => { - p.createCanvas(1080, 1350, p.WEBGL); - p.pixelDensity(1); - p.randomSeed(c.seed); - p.random(); // get rid of some pseudo-random nastiness -}; - -export default configBuilder; diff --git a/vite.config.ts b/vite.config.ts deleted file mode 100644 index 30b875c..0000000 --- a/vite.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { defineConfig } from "vite-plus"; - -export default defineConfig({ - staged: { - "*": "vp check --fix", - }, - lint: { options: { typeAware: true, typeCheck: true } }, -});