├── .gitignore ├── LICENCE.TXT ├── README.md ├── _README.md ├── babel.config.js ├── dist └── p5-global-effects.min.js ├── images ├── bars.jpg ├── bufferStack.jpg ├── corroded.jpg ├── cover.jpg ├── dots.jpg ├── fuzzyBlurX.jpg ├── glitch-full.jpg ├── glitchY.jpg ├── grain.jpg ├── gridScapes.jpg ├── landscape.jpg ├── mosaic.jpg ├── puzzle.jpg ├── randomBlurX.jpg ├── shiftedPixels.jpg └── stripes.jpg ├── package-lock.json ├── package.json ├── src ├── choices │ ├── Choices.ts │ └── modules │ │ ├── often.ts │ │ ├── probability.ts │ │ ├── rarely.ts │ │ └── sometimes.ts ├── colors │ ├── Colors.ts │ └── modules │ │ ├── any.ts │ │ ├── anySet.ts │ │ ├── bright.ts │ │ ├── dark.ts │ │ ├── shade.ts │ │ └── shadeSet.ts ├── hatches │ ├── Hatches.ts │ └── modules │ │ ├── bars.ts │ │ ├── corroded.ts │ │ ├── dots.ts │ │ ├── grain.ts │ │ └── stripes.ts ├── index.ts ├── numbers │ ├── Numbers.ts │ └── modules │ │ ├── fuzzy.ts │ │ ├── offset.ts │ │ └── random.ts ├── pixels │ ├── Pixels.ts │ └── modules │ │ ├── fuzzed.ts │ │ ├── glitch.ts │ │ ├── glitchArea.ts │ │ ├── linify.ts │ │ ├── mosaic.ts │ │ ├── puzzle.ts │ │ ├── shift.ts │ │ ├── shrink.ts │ │ ├── spread.ts │ │ └── waves.ts └── textures │ ├── Textures.ts │ └── modules │ ├── circles.ts │ └── striped.ts ├── svg ├── download.svg ├── header.svg ├── licence.svg ├── p5js.svg └── spacer.svg ├── test ├── Shannon-Kunkle.png ├── favicon.ico ├── index.html ├── instance.js ├── old.js ├── sketch.js ├── sketch.test.js ├── test.js └── test2.js ├── tsconfig.json ├── tslint.json ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode -------------------------------------------------------------------------------- /LICENCE.TXT: -------------------------------------------------------------------------------- 1 | Copyright 2020 Matthias Jäger 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![p5-toolkit](svg/header.svg) 2 | 3 | #### A personal collection of effects 4 | 5 | I have been working with [processing](https://processing.org/) and [p5](https://p5js.org/) for many years now and realized I have written the same, or very similar code all the time. When it comes to the topic of **generating single static images**, that highly depend on randomized geometry, texture and colors I have been copying and merging code between my projects. For this repository it is my goal to make these methods not only reusable for myself but to share it with you guys. It's a personal collection of methods and concepts I use for my artistic generative images on my [instagram](https://www.instagram.com/_matthiasjaeger/), [webiste](https://matthias-jaaeger.net/) and [blog](https://rbs46.net/). These effects could be useful for **artists**, **designers** and fellow **creative coders**. The collection contains methods for **colors**, **numbers**, **pixels**, **textures** and **hatches**. See a short overview below or browse the [type docs](/docs) for a detailed information. The script adds a globally available class constructor called ``Effects`` to your disposal. The intended use is to locally create a *new instance* in ```setup()``` and use it's methods via the dot-syntax. Include the script in ```index.html``` and use it in ```sketch.js```. Please be aware that this is a *ongoing* collection and it might change dramatically without warnings. 6 | 7 | [![download](svg/download.svg)](https://github.com/matthias-jaeger-net/p5-toolkit/tree/main/dist "Download") 8 | 9 | ![-](svg/spacer.svg) 10 | 11 | ## Include it in your index file 12 | 13 | ```html 14 | 15 | 16 | 17 | ``` 18 | 19 | ## Use the class in your sketch 20 | 21 | ```javascript 22 | // sketch.js 23 | 24 | function setup() { 25 | // Create the 'main' canvas 26 | createCanvas(800, 400); 27 | 28 | // Effects: 'this' p5 sketch is passed as argument 29 | const effects = new Effects(this); 30 | 31 | // I start with defining random colors 32 | const brand = effects.colors.any(); 33 | const bright = effects.colors.bright(); 34 | const dark = effects.colors.dark(); 35 | 36 | // Then I define some colorful hatches 37 | // All hatches take width, height, density, color and weight 38 | // A new p5.Graphics buffer with the hatch is returned to the variable 39 | const grain = effects.hatches.grain(width, height, random(), brand, random(3)); 40 | const stripes = effects.hatches.stripes(width, height, random(), dark, random(3)); 41 | const bars = effects.hatches.bars(width, height, random(), dark, random(3)); 42 | 43 | // Rendering with ps's image() function 44 | background(bright); 45 | image(grain, 0, 0); 46 | image(stripes, 0, 0); 47 | image(bars, 0, 0); 48 | 49 | // Post process? 50 | image(effects.pixels.glitch(this.get()), 0, 0); 51 | } 52 | ``` 53 | 54 | ## Available methods 55 | 56 | ### choices 57 | - ```probability(val)``` Returns true if val is larger than - ```random()``` 58 | - ```sometimes()``` Returns true with 0.5 probability 59 | - ```often()``` Returns true with 0.9 probability 60 | - ```rarely()``` Returns true with 0.1 probability 61 | 62 | ### numbers 63 | - ```fuzzy(val)``` A slightly changed or dramtically reduced value 64 | - ```offset(val, off)``` A value changed by -off *minimally* and+off *maximally* 65 | - ```random``` A value between zero and one 66 | 67 | ### colors 68 | - ```any()``` A random color 69 | - ```bright()``` A bright random color 70 | - ```dark()``` A dark random color 71 | - ```shade(col)``` A random deviation from a given color 72 | - ```anySet(len)``` An array with a fixed number of random colors 73 | - ```shadeSet(len)``` An array with a fixed number of deviations from a given color 74 | 75 | ### hatches 76 | - ```bars(width, height, density, col)``` Vertical lines in 77 | - ```stripes(width, height, density, col)``` Horizontal lines 78 | - ```corroded(width, height, density, col)``` A grid of randomized lines 79 | - ```dots(width, height, density, col)``` A grid of points 80 | - ```grain(width, height, density, col)``` Random points 81 | 82 | ### pixels 83 | - ```spread(buffer``` Randomly spread colors within the current row. 84 | - ```fuzzed(buffer)``` Less spreaded colors within the current row. 85 | - ```glitch(buffer)``` A bunch of overlays with pixel sorting and reversing 86 | - ```linify(buffer)``` A grid of lines with atributes mapped to colors 87 | - ```mosaic(buffer``` Slices the given buffer in a grid and colors the cells 88 | - ```puzzle(buffer``` Slices the given buffer in a smaller images and rearranges 89 | - ```shift(buffer``` Similar to glitch but different 90 | - ```shrink(buffer``` Shrinks the image into itself a number of times 91 | 92 | ### textures (under construction) 93 | - ```circles``` 94 | - ```striped``` 95 | 96 | ## For developers and nerds 97 | 98 | ### Important p5.js concepts you should know 99 | - Load an image: https://p5js.org/reference/#/p5/loadImage 100 | - Display images (or buffers): https://p5js.org/reference/#/p5/image 101 | - Graphics buffers: https://p5js.org/reference/#/p5/createGraphics 102 | - Color: https://p5js.org/reference/#/p5/color 103 | - How p5 works generally: https://github.com/processing/p5.js/wiki/Global-and-instance-mode 104 | 105 | ### Tools I am using here 106 | This will install the node modules I use for the development. You can check the [package.json](/package.json) for a full list. Briefly said it will install a very simple Webpack/Typescript/p5 setup for you. Having said that, because sometimes it can be strange with node modules... 107 | 108 | ### Install 109 | 110 | ```bash 111 | # Clone the repository 112 | git clone git@github.com:matthias-jaeger-net/p5-toolkit.git 113 | 114 | # Navigate in the directory 115 | cd p5-toolkit 116 | 117 | # Install the development tools 118 | npm install 119 | ``` 120 | 121 | 122 | ### Available scripts 123 | ```bash 124 | # This generates the minified file in /dist/ 125 | npm run build 126 | ``` 127 | ```bash 128 | # This outputs the raw commonjs modules, not used currently 129 | npm run compile 130 | ``` 131 | ```bash 132 | # Have no unit tests so far... 133 | npm run test 134 | ``` 135 | ```bash 136 | # This generates api docs from typescript /src 137 | npm run docs 138 | ``` -------------------------------------------------------------------------------- /_README.md: -------------------------------------------------------------------------------- 1 | # p5-toolkit 2 | 3 | ## A collection of effects and other visual trickery in the context of [p5 sketches](https://p5js.org/). 4 | 5 | ![License](https://poser.pugx.org/laravel/lumen-framework/license.svg) 6 | 7 | I frequently use this single JavaScript file when I create artistic [generative images](https://www.instagram.com/_matthiasjaeger/). The collection currently contains methods for **colors**, **numbers**, **pixels**, **textures**, **hatches**, **masks** and **other useful tools**. See a short overview below or browse the [type docs](/docs) for a detailed information. These effects could be useful for **artists**, **designers** and fellow **creative coders**. Please be aware that this is a *personal* collection and it might change dramatically without warnings. The script adds a globally available class constructor called ``Effects`` to your disposal. The intended use is to locally create a *new instance* in ```setup()``` and use it's methods via the dot-syntax. Include the script in ```index.html``` and use it in ```sketch.js```. The class currently has four groups of public available Methods. numbers, colors, pixel, texture. 8 | 9 | 10 | # Pixel 11 | These are functions that take a ``p5.Graphics`` buffer or a ``p5.Image`` as input and ``return`` a new buffer with a dramatically changed appearance. In the examples below the effect is applied on the left half of this [landscape photography](https://unsplash.com/photos/dM8INmkyDas). 12 | 13 | ```html 14 | 15 | 16 | 17 | ``` 18 | ```javascript 19 | let img, effects; 20 | 21 | function preload() { 22 | img = loadImage('Shannon-Kunkle.png'); 23 | } 24 | 25 | function setup() { 26 | createCanvas(img.width, img.height); 27 | effects = new Effects(this); 28 | 29 | // Splits the image in two halfs 30 | const half = img.width / 2; 31 | const left = img.get(0, 0, half, img.height); 32 | const right = img.get(half, 0, img.width, img.height); 33 | 34 | // Apply the sspread effect on the left half 35 | image(effects.pixel.spread(left), 0, 0); 36 | image(right, half, 0); 37 | } 38 | 39 | ``` 40 | 41 | ### ```pixel.spread(buffer)``` 42 | ![matthias-jaeger-net-buffer-demo](images/randomBlurX.jpg) 43 | 44 | ### ```pixel.fuzzy(buffer)``` 45 | ![matthias-jaeger-net-buffer-demo](images/fuzzyBlurX.jpg) 46 | 47 | ### ```pixel.mosaic(buffer)``` 48 | ![matthias-jaeger-net-buffer-demo](images/mosaic.jpg) 49 | 50 | ### ```shift(buffer)``` 51 | ![matthias-jaeger-net-buffer-demo](images/shiftedPixels.jpg) 52 | 53 | ### ```pixel.glitch(buffer)``` 54 | ![matthias-jaeger-net-buffer-demo](images/glitchY.jpg) 55 | 56 | ### ```pixel.puzzle(buffer)``` 57 | ![matthias-jaeger-net-buffer-demo](images/puzzle.jpg) 58 | 59 | ### ```pixel.linify(buffer)``` 60 | ![matthias-jaeger-net-buffer-demo](images/gridScapes.jpg) 61 | 62 | ### ```pixel.shrink(buffer)``` 63 | ![matthias-jaeger-net-buffer-demo](images/bufferStack.jpg) 64 | 65 | 66 | # Texture 67 | 68 | Texture functions help me to generate buffers quickly, so later on effects can be applied. Unlike the pixel effects textures have **more parameters**. The ``density`` should be a positive number between zero and one and scales the effects in one way or the other. The ``color`` parameter and is a ``p5.Color`` to be used for the generated geometry. In the examples below I used ``color(0)`` which means black, for simplicity, but I vary the density from left tor right. Every texture function will ``return`` a transparent graphics buffer the generated texture. 69 | 70 | 71 | 72 | ### ```dots(options)``` 73 | ![matthias-jaeger-net-buffer-demo](images/dots.jpg) 74 | ```javascript 75 | const bars = effects.hatch.bars(width, height, color(0)); 76 | ``` 77 | 78 | ### ```stripes(density, color)``` 79 | ![matthias-jaeger-net-buffer-demo](images/stripes.jpg) 80 | 81 | ### ```bars(density, color)``` 82 | ![matthias-jaeger-net-buffer-demo](images/bars.jpg) 83 | 84 | ### ```grain(density, color)``` 85 | ![matthias-jaeger-net-buffer-demo](images/grain.jpg) 86 | 87 | ### ```corroded(density, color)``` 88 | ![matthias-jaeger-net-buffer-demo](images/corroded.jpg) 89 | 90 | 91 | # Numbers 92 | ### ```numbers.prob()``` 93 | ### ```numbers.givenProb(val)``` 94 | ### ```numbers.fuzzyValue: (val)``` 95 | ### ```numbers.offset(val, off)``` 96 | 97 | # Colors 98 | 99 | I have to say the following: Don't use random colors in your sketches, :D. Carfully picked ones are much better than any generated color. Having said that, lets go on. 100 | 101 | #### ```any()``` 102 | ```javascript 103 | // Returns any random p5.Color 104 | const col = effects.any(); 105 | ``` 106 | #### ```bright()``` 107 | ```javascript 108 | // Returns a bright random p5.Color 109 | // equals: const col = color(random(100, 255), random(100, 255), random(100, 255)) 110 | const col = effects.bright(); 111 | ``` 112 | 113 | #### ```dark()``` 114 | ```javascript 115 | // Returns a dark random p5.Color 116 | // equals: const col = color(random(0, 90), random(0, 90), random(0, 90)) 117 | const col = effects.color.any(); 118 | ``` 119 | #### ```set(len)``` 120 | #### ```palette(len)``` 121 | #### ```relatives(col, len)``` 122 | 123 | # Legacy 124 | - [x] ```striped(res, colors)``` A really randomly striped graphics buffer 125 | - [ ] ```hatchMaze(w, h, d)``` 126 | - [ ] ```hatchSinusLines(w, h, d)``` 127 | - [ ] ```hatchFlowField(w, h, d)``` 128 | 129 | 130 | # Do you want to develop Effects yourself? 131 | ```bash 132 | # Clone the repository 133 | git clone git@github.com:matthias-jaeger-net/p5-toolkit.git 134 | ``` 135 | ```bash 136 | # Navigate in the directory 137 | cd p5-toolkit 138 | ``` 139 | ```bash 140 | # Install the development tools 141 | npm install 142 | ``` 143 | NOTE: This will install the node modules I use for the development. You can check the [package.json](/package.json) for a full list. Briefly said it will install a very simple Webpack/Typescript/p5 setup for you. Having said that, because sometimes it can be strange with node modules... 144 | 145 | **Available scripts** 146 | ```bash 147 | # This generates the minified file in /dist/ 148 | npm run build 149 | ``` 150 | ```bash 151 | # This outputs the raw commonjs modules, not used currently 152 | npm run compile 153 | ``` 154 | ```bash 155 | # Have no unit tests so far... 156 | npm run test 157 | ``` 158 | ```bash 159 | # This generates api docs from typescript /src 160 | npm run docs 161 | ``` -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', {targets: {node: 'current'}}], 4 | '@babel/preset-typescript', 5 | ], 6 | }; -------------------------------------------------------------------------------- /dist/p5-global-effects.min.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var e={419:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Choices=void 0;var o=r(614),i=r(973),n=r(757),a=r(405);t.Choices=function(e){var t=this;this.often=function(){return o.often(t.context)},this.sometimes=function(){return i.sometimes(t.context)},this.rarely=function(){return n.rarely(t.context)},this.probability=function(e){return a.probability(t.context,e)},this.context=e}},614:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.often=void 0;var o=r(556);t.often=function(e){return o.random(e)>.2}},405:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.probability=void 0,t.probability=function(e,t){return e.random(0,1)>t}},757:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.rarely=void 0;var o=r(556);t.rarely=function(e){return o.random(e)>.8}},973:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.sometimes=void 0;var o=r(556);t.sometimes=function(e){return o.random(e)>.5}},690:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Colors=void 0;var o=r(318),i=r(341),n=r(49),a=r(496),s=r(934),d=r(232);t.Colors=function(e){var t=this;this.any=function(){return o.any(t.context)},this.bright=function(){return i.bright(t.context)},this.dark=function(){return n.dark(t.context)},this.shade=function(e,r){return a.shade(t.context,e,r)},this.anySet=function(e){return s.anySet(t.context,e)},this.shadeSet=function(e,r){return d.shadeSet(t.context,r,e)},this.context=e}},318:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.any=void 0,t.any=function(e){var t=e.random(0,255),r=e.random(0,255),o=e.random(0,255);return e.color(t,r,o)}},934:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.anySet=void 0;var o=r(318);t.anySet=function(e,t){for(var r=[],i=0;i{Object.defineProperty(t,"__esModule",{value:!0}),t.bright=void 0,t.bright=function(e){var t=e.random(155,255),r=e.random(155,255),o=e.random(155,255);return e.color(t,r,o)}},49:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.dark=void 0,t.dark=function(e){var t=e.random(0,90),r=e.random(0,90),o=e.random(0,90);return e.color(t,r,o)}},496:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.shade=void 0;var o=r(595);t.shade=function(e,t,r){var i=o.offset(e,e.red(t),r),n=o.offset(e,e.green(t),r),a=o.offset(e,e.blue(t),r);return e.color(i,n,a)}},232:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.shadeSet=void 0;var o=r(496);t.shadeSet=function(e,t,r){for(var i=[],n=0;n{Object.defineProperty(t,"__esModule",{value:!0}),t.Hatches=void 0;var o=r(366),i=r(489),n=r(381),a=r(377),s=r(305);t.Hatches=function(e){var t=this;this.stripes=function(e,r,o,n,a){return i.stripes(t.context,e,r,o,n,a)},this.bars=function(e,r,o,i,a){return n.bars(t.context,e,r,o,i,a)},this.dots=function(e,r,i,n,a){return o.dots(t.context,e,r,i,n,a)},this.grain=function(e,r,o,i,n){return a.grain(t.context,e,r,o,i,n)},this.corroded=function(e,r,o,i,n){return s.corroded(t.context,e,r,o,i,n)},this.context=e}},381:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.bars=void 0,t.bars=function(e,t,r,o,i,n){for(var a=e.createGraphics(t,r),s=100*o,d=a.width/s,h=0;h{Object.defineProperty(t,"__esModule",{value:!0}),t.corroded=void 0,t.corroded=function(e,t,r,o,i,n){for(var a=e.createGraphics(t,r),s=t/(300*o),d=0;do&&(a.stroke(i),a.strokeWeight(u*o),a.line(d+u,h-u,d,h))}return a}},366:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.dots=void 0,t.dots=function(e,t,r,o,i,n){for(var a=e.createGraphics(t,r),s=t/(100*o),d=0;d{Object.defineProperty(t,"__esModule",{value:!0}),t.grain=void 0,t.grain=function(e,t,r,o,i,n){for(var a=e.createGraphics(t,r),s=t*r*o,d=0;d{Object.defineProperty(t,"__esModule",{value:!0}),t.stripes=void 0,t.stripes=function(e,t,r,o,i,n){for(var a=e.createGraphics(t,r),s=100*o,d=a.width/s,h=0;h{var o=r(419),i=r(690),n=r(17),a=r(913),s=r(812);window.Effects=function(e){this.context=e,this.choices=new o.Choices(this.context),this.colors=new i.Colors(this.context),this.pixels=new n.Pixels(this.context),this.textures=new s.Textures(this.context),this.hatches=new a.Hatches(this.context)}},900:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.fuzzy=void 0;var o=r(614),i=r(595);t.fuzzy=function(e,t){return o.often(e)?i.offset(e,t,10):e.random(t)}},595:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.offset=void 0,t.offset=function(e,t,r){return t+e.random(-r,r)}},556:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.random=void 0,t.random=function(e){return e.random(0,1)}},17:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Pixels=void 0;var o=r(43),i=r(90),n=r(537),a=r(760),s=r(918),d=r(62),h=r(539),u=r(286);t.Pixels=function(e){var t=this;this.spread=function(e){return i.spread(t.context,e)},this.mosaic=function(e){return o.mosaic(t.context,e)},this.shift=function(e){return n.shift(t.context,e)},this.fuzzed=function(e){return a.fuzzed(t.context,e)},this.glitch=function(e){return s.glitch(t.context,e)},this.puzzle=function(e){return d.puzzle(t.context,e)},this.linify=function(e){return h.linify(t.context,e)},this.shrink=function(e){return u.shrink(t.context,e)},this.context=e}},760:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.fuzzed=void 0;var o=r(900);t.fuzzed=function(e,t){var r=e.createGraphics(t.width,t.height),i=t.get();r.loadPixels();for(var n=0;n{Object.defineProperty(t,"__esModule",{value:!0}),t.glitch=void 0;var o=r(661);t.glitch=function(e,t){var r=e.createGraphics(t.width,t.height);r.image(t.get(),0,0);for(var i=0;i<550;i+=1){var n=e.random(t.width),a=e.random(t.height),s=e.random(-20,20),d=e.floor(e.random(1,100)),h=e.floor(e.random(1,100)),u=t.get(n,a,d,h);r.image(o.glitchArea(e,u),n+s,a)}return r}},661:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.glitchArea=void 0,t.glitchArea=function(e,t){var r=e.createGraphics(t.width,t.height);r.loadPixels();for(var o=0;o{Object.defineProperty(t,"__esModule",{value:!0}),t.linify=void 0,t.linify=function(e,t){var r=e.createGraphics(t.width,t.height),o=t.get(),i=255;r.background(i);for(var n=0;n{Object.defineProperty(t,"__esModule",{value:!0}),t.mosaic=void 0,t.mosaic=function(e,t){var r=e.createGraphics(t.width,t.height),o=t.get();r.noStroke();for(var i=t.width/100,n=0;n{Object.defineProperty(t,"__esModule",{value:!0}),t.puzzle=void 0,t.puzzle=function(e,t){for(var r=e.createGraphics(t.width,t.height),o=t.get(),i=e.floor(e.random(3,30)),n=t.width/i,a=t.height/i,s=[],d=[],h=[],u=0,c=0;c{Object.defineProperty(t,"__esModule",{value:!0}),t.shift=void 0;var o=r(614);t.shift=function(e,t){for(var r=[],i=0;i{Object.defineProperty(t,"__esModule",{value:!0}),t.shrink=void 0,t.shrink=function(e,t){for(var r=e.createGraphics(t.width,t.height),o=t.get(),i=1;i>0;i-=.1){var n=.5*t.width,a=.5*t.height,s=t.width*i,d=t.height*i;r.push(),r.translate(n,a),r.imageMode(e.CENTER),r.image(o,0,0,s,d),r.pop()}return r}},90:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.spread=void 0,t.spread=function(e,t){var r=e.createGraphics(t.width,t.height),o=t.get();r.loadPixels();for(var i=0;i{Object.defineProperty(t,"__esModule",{value:!0}),t.Textures=void 0;var o=r(20),i=r(83);t.Textures=function(e){var t=this;this.circles=function(e,r){return o.circles(t.context,e,r)},this.striped=function(e,r){return i.striped(t.context,e,r)},this.context=e}},20:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.circles=void 0;var o=r(496);t.circles=function(e,t,r){var i=e.createGraphics(t,t);i.background(e.random(r)),i.noStroke();for(var n=0;n{Object.defineProperty(t,"__esModule",{value:!0}),t.striped=void 0;var o=r(496),i=r(614);t.striped=function(e,t,r){for(var n=e.createGraphics(t,t),a=0;a often(this.context); 15 | sometimes = () => sometimes(this.context); 16 | rarely = () => rarely(this.context); 17 | probability = (prob: number) => probability(this.context, prob); 18 | } 19 | -------------------------------------------------------------------------------- /src/choices/modules/often.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { random } from '../../numbers/modules/random'; 3 | 4 | export function often(context: p5) { 5 | const prob = 0.2; 6 | return random(context) > prob; 7 | } 8 | -------------------------------------------------------------------------------- /src/choices/modules/probability.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function probability(context: p5, prob: number) { 4 | const min = 0; 5 | const max = 1; 6 | const val = context.random(min, max); 7 | return val > prob; 8 | } 9 | -------------------------------------------------------------------------------- /src/choices/modules/rarely.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { random } from '../../numbers/modules/random'; 3 | 4 | export function rarely(context: p5) { 5 | const prob = 0.8; 6 | return random(context) > prob; 7 | } 8 | -------------------------------------------------------------------------------- /src/choices/modules/sometimes.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { random } from '../../numbers/modules/random'; 3 | 4 | export function sometimes(context: p5) { 5 | const prob = 0.5; 6 | return random(context) > prob; 7 | } 8 | -------------------------------------------------------------------------------- /src/colors/Colors.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { any } from './modules/any'; 3 | import { bright } from './modules/bright'; 4 | import { dark } from './modules/dark'; 5 | import { shade } from './modules/shade'; 6 | import { anySet } from './modules/anySet'; 7 | import { shadeSet } from './modules/shadeSet'; 8 | 9 | export class Colors { 10 | public context: p5; 11 | 12 | constructor(context: p5) { 13 | this.context = context; 14 | } 15 | 16 | any = () => any(this.context); 17 | bright = () => bright(this.context); 18 | dark = () => dark(this.context); 19 | shade = (col: p5.Color, off: number) => shade(this.context, col, off); 20 | anySet = (len: number) => anySet(this.context, len); 21 | shadeSet = (col: p5.Color, len: number) => shadeSet(this.context, len, col); 22 | } 23 | -------------------------------------------------------------------------------- /src/colors/modules/any.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function any(context: p5): p5.Color { 4 | const min = 0.0; 5 | const max = 255.0; 6 | const r = context.random(min, max); 7 | const g = context.random(min, max); 8 | const b = context.random(min, max); 9 | return context.color(r, g, b); 10 | } 11 | -------------------------------------------------------------------------------- /src/colors/modules/anySet.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { any } from './any'; 3 | 4 | export function anySet(context: p5, len: number) { 5 | const arr = []; 6 | for (let i = 0; i < len; i++) { 7 | arr.push(any(context)); 8 | } 9 | return arr; 10 | } 11 | -------------------------------------------------------------------------------- /src/colors/modules/bright.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function bright(context: p5): p5.Color { 4 | const max = 255; 5 | const min = 155; 6 | const r = context.random(min, max); 7 | const g = context.random(min, max); 8 | const b = context.random(min, max); 9 | return context.color(r, g, b); 10 | } 11 | -------------------------------------------------------------------------------- /src/colors/modules/dark.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function dark(context: p5): p5.Color { 4 | const max = 90; 5 | const min = 0; 6 | const r = context.random(min, max); 7 | const g = context.random(min, max); 8 | const b = context.random(min, max); 9 | return context.color(r, g, b); 10 | } 11 | -------------------------------------------------------------------------------- /src/colors/modules/shade.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { offset } from '../../numbers/modules/offset'; 3 | 4 | export function shade(context: p5, col: p5.Color, off: number) { 5 | const r = offset(context, context.red(col), off); 6 | const g = offset(context, context.green(col), off); 7 | const b = offset(context, context.blue(col), off); 8 | return context.color(r, g, b); 9 | } 10 | -------------------------------------------------------------------------------- /src/colors/modules/shadeSet.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { shade } from './shade'; 3 | 4 | export function shadeSet(context: p5, len: number, col: p5.Color) { 5 | const arr = []; 6 | const off = 20; 7 | for (let i = 0; i < len; i++) { 8 | arr.push(shade(context, col, off)); 9 | } 10 | return arr; 11 | } 12 | -------------------------------------------------------------------------------- /src/hatches/Hatches.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { dots } from './modules/dots'; 3 | import { stripes } from './modules/stripes'; 4 | import { bars } from './modules/bars'; 5 | import { grain } from './modules/grain'; 6 | import { corroded } from './modules/corroded'; 7 | 8 | export class Hatches { 9 | public context: p5; 10 | 11 | constructor(context: p5) { 12 | this.context = context; 13 | } 14 | 15 | stripes = (width: number, height: number, density: number, color: p5.Color, weight: number) => 16 | stripes(this.context, width, height, density, color, weight) 17 | 18 | bars = (width: number, height: number, density: number, color: p5.Color, weight: number) => 19 | bars(this.context, width, height, density, color, weight) 20 | 21 | dots = (width: number, height: number, density: number, color: p5.Color, weight: number) => 22 | dots(this.context, width, height, density, color, weight) 23 | 24 | grain = (width: number, height: number, density: number, color: p5.Color, weight: number) => 25 | grain(this.context, width, height, density, color, weight) 26 | 27 | corroded = (width: number, height: number, density: number, color: p5.Color, weight: number) => 28 | corroded(this.context, width, height, density, color, weight) 29 | } 30 | -------------------------------------------------------------------------------- /src/hatches/modules/bars.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function bars(context: p5, w: number, h: number, d: number, c: p5.Color, s: number) { 4 | const gfx = context.createGraphics(w, h); 5 | const maxDist = 100; 6 | const dist = maxDist * d; 7 | const scl = (gfx.width / dist); 8 | for (let x = 0; x < gfx.width; x += scl) { 9 | gfx.strokeWeight(s); 10 | gfx.stroke(c); 11 | gfx.line(x, 0, x, gfx.height); 12 | } 13 | return gfx; 14 | } 15 | -------------------------------------------------------------------------------- /src/hatches/modules/corroded.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function corroded(context: p5, w: number, h: number, d: number, c: p5.Color, s: number) { 4 | const gfx = context.createGraphics(w, h); 5 | const maxCell = 300; 6 | const cell = maxCell * d; 7 | const scl = w / cell; 8 | for (let x = 0; x < gfx.width; x += scl) { 9 | for (let y = 0; y < gfx.height; y += scl) { 10 | const r = context.random(s); 11 | if (r > d) { 12 | gfx.stroke(c); 13 | gfx.strokeWeight(r * d); 14 | gfx.line(x + r, y - r, x, y); 15 | } 16 | } 17 | } 18 | return gfx; 19 | } 20 | -------------------------------------------------------------------------------- /src/hatches/modules/dots.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function dots(context: p5, w: number, h: number, d: number, c: p5.Color, s: number) { 4 | const gfx = context.createGraphics(w, h); 5 | const maxCell = 100; 6 | const cell = maxCell * d; 7 | const scl = w / cell; 8 | for (let x = 0; x < gfx.width; x += scl) { 9 | for (let y = 0; y < gfx.height; y += scl) { 10 | gfx.strokeWeight(s); 11 | gfx.stroke(c); 12 | gfx.point(x, y); 13 | } 14 | } 15 | return gfx; 16 | } 17 | -------------------------------------------------------------------------------- /src/hatches/modules/grain.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function grain(context: p5, w: number, h: number, d: number, c: p5.Color, s: number) { 4 | const gfx = context.createGraphics(w, h); 5 | const ammount = (w * h) * d; 6 | for (let times = 0; times < ammount; times += 1) { 7 | const x = context.random(gfx.width); 8 | const y = context.random(gfx.height); 9 | gfx.strokeWeight(s); 10 | gfx.stroke(c); 11 | gfx.point(x, y); 12 | } 13 | return gfx; 14 | } 15 | -------------------------------------------------------------------------------- /src/hatches/modules/stripes.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function stripes(context: p5, w: number, h: number, d: number, c: p5.Color, s: number) { 4 | const gfx = context.createGraphics(w, h); 5 | const maxDist = 100; 6 | const dist = maxDist * d; 7 | const scl = (gfx.width / dist); 8 | for (let y = 0; y < gfx.height; y += scl) { 9 | gfx.strokeWeight(s); 10 | gfx.stroke(c); 11 | gfx.line(0, y, gfx.width, y); 12 | } 13 | return gfx; 14 | } 15 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | import { Numbers } from './numbers/Numbers'; 4 | import { Choices } from './choices/Choices'; 5 | import { Colors } from './colors/Colors'; 6 | import { Pixels } from './pixels/Pixels'; 7 | import { Hatches } from './hatches/Hatches'; 8 | import { Textures } from './textures/Textures'; 9 | 10 | class Effects { 11 | public context: p5; 12 | public choices: Object; 13 | public colors: Object; 14 | public pixels: Object; 15 | public hatches: Object; 16 | public textures: Object; 17 | 18 | constructor(context: p5) { 19 | this.context = context; 20 | this.choices = new Choices(this.context); 21 | this.colors = new Colors(this.context); 22 | this.pixels = new Pixels(this.context); 23 | this.textures = new Textures(this.context); 24 | this.hatches = new Hatches(this.context); 25 | } 26 | } 27 | 28 | declare global { 29 | interface Window { Effects: any; } 30 | } 31 | 32 | window.Effects = Effects; 33 | -------------------------------------------------------------------------------- /src/numbers/Numbers.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { random } from './modules/random'; 3 | import { fuzzy } from './modules/fuzzy'; 4 | import { offset } from './modules/offset'; 5 | 6 | export class Numbers { 7 | public context: p5; 8 | 9 | constructor(context: p5) { 10 | this.context = context; 11 | } 12 | 13 | random = () => random(this.context); 14 | fuzzy = (val: number) => fuzzy(this.context, val); 15 | offset = (val: number, off: number) => offset(this.context, val, off); 16 | } 17 | -------------------------------------------------------------------------------- /src/numbers/modules/fuzzy.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { often } from '../../choices/modules/often'; 3 | import { offset } from './offset'; 4 | 5 | export function fuzzy(context: p5, val: number) { 6 | const off = 10.0; 7 | return (often(context) ? offset(context, val, off) : context.random(val)); 8 | } 9 | -------------------------------------------------------------------------------- /src/numbers/modules/offset.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function offset(context: p5, val: number, off: number) { 4 | return val + context.random(-off, off); 5 | } 6 | -------------------------------------------------------------------------------- /src/numbers/modules/random.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function random(context: p5) { 4 | const min = 0.0; 5 | const max = 1.0; 6 | return context.random(min, max); 7 | } 8 | -------------------------------------------------------------------------------- /src/pixels/Pixels.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { mosaic } from './modules/mosaic'; 3 | import { spread } from './modules/spread'; 4 | import { shift } from './modules/shift'; 5 | import { fuzzed } from './modules/fuzzed'; 6 | import { glitch } from './modules/glitch'; 7 | import { puzzle } from './modules/puzzle'; 8 | import { linify } from './modules/linify'; 9 | import { shrink } from './modules/shrink'; 10 | 11 | export class Pixels { 12 | public context: p5; 13 | 14 | constructor(context: p5) { 15 | this.context = context; 16 | } 17 | 18 | spread = (buffer: p5) => spread(this.context, buffer); 19 | mosaic = (buffer: p5) => mosaic(this.context, buffer); 20 | shift = (buffer: p5) => shift(this.context, buffer); 21 | fuzzed = (buffer: p5) => fuzzed(this.context, buffer); 22 | glitch = (buffer: p5) => glitch(this.context, buffer); 23 | puzzle = (buffer: p5) => puzzle(this.context, buffer); 24 | linify = (buffer: p5) => linify(this.context, buffer); 25 | shrink = (buffer: p5) => shrink(this.context, buffer); 26 | } 27 | -------------------------------------------------------------------------------- /src/pixels/modules/fuzzed.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { fuzzy } from '../../numbers/modules/fuzzy'; 3 | 4 | export function fuzzed(context: p5, buffer: p5) { 5 | const gfx = context.createGraphics(buffer.width, buffer.height); 6 | const bufferPixels = buffer.get(); 7 | gfx.loadPixels(); 8 | for (let x = 0; x < buffer.width; x += 1) { 9 | for (let y = 0; y < buffer.height; y += 1) { 10 | const col = bufferPixels.get(fuzzy(context, x), y); 11 | gfx.set(x, y, col); 12 | } 13 | } 14 | gfx.updatePixels(); 15 | return gfx; 16 | } 17 | -------------------------------------------------------------------------------- /src/pixels/modules/glitch.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { glitchArea } from './glitchArea'; 3 | 4 | export function glitch(context: p5, buffer: p5) { 5 | const gfx = context.createGraphics(buffer.width, buffer.height); 6 | gfx.image(buffer.get(), 0, 0); 7 | const max = 550; 8 | const gMin = 1; 9 | const gMax = 100; 10 | const off = 20; 11 | for (let t = 0; t < max; t += 1) { 12 | const x = context.random(buffer.width); 13 | const y = context.random(buffer.height); 14 | const ox = context.random(-off, off); 15 | const w = context.floor(context.random(gMin, gMax)); 16 | const h = context.floor(context.random(gMin, gMax)); 17 | const g = buffer.get(x, y, w, h); 18 | gfx.image(glitchArea(context, g), x + ox, y); 19 | } 20 | return gfx; 21 | } 22 | -------------------------------------------------------------------------------- /src/pixels/modules/glitchArea.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function glitchArea(context: p5, buffer: p5.Image) { 4 | const gfx = context.createGraphics(buffer.width, buffer.height); 5 | gfx.loadPixels(); 6 | for (let x = 0; x < gfx.width; x += 1) { 7 | const colors = []; 8 | for (let y = 0; y < buffer.height; y += 1) { 9 | colors.push(buffer.get(x, y)); 10 | } 11 | colors.sort(); 12 | for (let y = 0; y < gfx.height; y += 1) { 13 | gfx.set(x, y, colors[y]); 14 | } 15 | } 16 | gfx.updatePixels(); 17 | return gfx; 18 | } 19 | -------------------------------------------------------------------------------- /src/pixels/modules/linify.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function linify(context: p5, buffer: p5) { 4 | const gfx = context.createGraphics(buffer.width, buffer.height); 5 | const bufferPixels = buffer.get(); 6 | const resolution = 5; 7 | const thickness = 4; 8 | const linelength = 20; 9 | const angleshift = 0.3; 10 | const max = 255; 11 | const half = 0.5; 12 | gfx.background(max); 13 | for (let x = 0; x < gfx.width; x += resolution) { 14 | for (let y = 0; y < gfx.height; y += resolution) { 15 | const col = bufferPixels.get(x, y); 16 | const ox = x + resolution * half; 17 | const oy = y + resolution * half; 18 | const blueMap = context.map(context.blue(col), 0, max, thickness, 1); 19 | const redMap = context.map(context.red(col), 0, max, -angleshift, angleshift); 20 | const greenMap = context.map(context.green(col), 0, max, linelength, 1); 21 | gfx.stroke(col); 22 | gfx.push(); 23 | gfx.translate(ox, oy); 24 | gfx.strokeWeight(blueMap); 25 | gfx.rotate(redMap); 26 | gfx.line(0, 0, greenMap, 0); 27 | gfx.pop(); 28 | } 29 | } 30 | return gfx; 31 | } 32 | -------------------------------------------------------------------------------- /src/pixels/modules/mosaic.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function mosaic(context: p5, buffer: p5) { 4 | const gfx = context.createGraphics(buffer.width, buffer.height); 5 | const design = buffer.get(); 6 | gfx.noStroke(); 7 | const unit = 100.0; 8 | const scale = buffer.width / unit; 9 | for (let x = 0; x < buffer.width; x += scale) { 10 | for (let y = 0; y < buffer.height; y += scale) { 11 | const col = design.get(x, y); 12 | gfx.fill(col); 13 | gfx.rect(x, y, scale, scale); 14 | } 15 | } 16 | return gfx; 17 | } 18 | -------------------------------------------------------------------------------- /src/pixels/modules/puzzle.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function puzzle(context: p5, buffer: p5) { 4 | const gfx = context.createGraphics(buffer.width, buffer.height); 5 | const bufferPixels = buffer.get(); 6 | const minRes = 3; 7 | const maxRes = 30; 8 | const res = context.floor(context.random(minRes, maxRes)); 9 | const sclX = buffer.width / res; 10 | const sclY = buffer.height / res; 11 | const pieces = []; 12 | const indices = []; 13 | const newIndices = []; 14 | let index = 0; 15 | for (let x = 0; x < buffer.width; x += sclX) { 16 | for (let y = 0; y < buffer.height; y += sclY) { 17 | pieces.push(bufferPixels.get(x, y, sclX, sclY)); 18 | indices.push(index); 19 | index += 1; 20 | } 21 | } 22 | while (newIndices.length <= pieces.length) { 23 | const randomIndex = context.floor(context.random(indices.length)); 24 | newIndices.push(indices[randomIndex]); 25 | indices.splice(randomIndex, 1); 26 | } 27 | index = 0; 28 | for (let x = 0; x < buffer.width; x += sclX) { 29 | for (let y = 0; y < buffer.height; y += sclY) { 30 | gfx.image(pieces[newIndices[index]], x, y); 31 | index += 1; 32 | } 33 | } 34 | return gfx; 35 | } 36 | -------------------------------------------------------------------------------- /src/pixels/modules/shift.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { often } from '../../choices/modules/often'; 3 | 4 | export function shift(context: p5, buffer: p5) { 5 | const grid = []; 6 | for (let x = 0; x < buffer.width; x += 1) { 7 | const row = []; 8 | for (let y = 0; y < buffer.height; y += 1) { 9 | row.push(buffer.get(x, y)); 10 | } 11 | grid.push(row); 12 | } 13 | const gfx = context.createGraphics(buffer.width, buffer.height); 14 | for (let x = 0; x < gfx.width; x += 1) { 15 | const half = 0.5; 16 | const randomHalf = context.random(gfx.width * half); 17 | const offset = context.floor(randomHalf); 18 | const cs = []; 19 | const max: number = grid[x].length; 20 | for (let y = max - offset; y < max; y += 1) { 21 | cs.push(grid[x][y]); 22 | } 23 | for (let y = offset; y < max - offset; y += 1) { 24 | cs.push(grid[x][y]); 25 | } 26 | for (let y = 0; y < offset; y += 1) { 27 | cs.push(grid[x][y]); 28 | } 29 | grid[x] = often(context) ? cs.sort() : cs; 30 | } 31 | gfx.loadPixels(); 32 | for (let x = 0; x < gfx.width; x += 1) { 33 | for (let y = 0; y < gfx.height; y += 1) { 34 | gfx.set(x, y, grid[x][y]); 35 | } 36 | } 37 | gfx.updatePixels(); 38 | return gfx; 39 | } 40 | -------------------------------------------------------------------------------- /src/pixels/modules/shrink.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function shrink(context: p5, buffer: p5) { 4 | const gfx = context.createGraphics(buffer.width, buffer.height); 5 | const bufferPixels = buffer.get(); 6 | const step = 0.1; 7 | for (let scl = 1; scl > 0; scl -= step) { 8 | const half = 0.5; 9 | const x = buffer.width * half; 10 | const y = buffer.height * half; 11 | const sclX = buffer.width * scl; 12 | const sclY = buffer.height * scl; 13 | gfx.push(); 14 | gfx.translate(x, y); 15 | gfx.imageMode(context.CENTER); 16 | gfx.image(bufferPixels, 0, 0, sclX, sclY); 17 | gfx.pop(); 18 | } 19 | return gfx; 20 | } 21 | -------------------------------------------------------------------------------- /src/pixels/modules/spread.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function spread(context: p5, buffer: p5) { 4 | const gfx = context.createGraphics(buffer.width, buffer.height); 5 | const bufferPixels = buffer.get(); 6 | gfx.loadPixels(); 7 | for (let y = 0; y < buffer.height; y += 1) { 8 | for (let x = 0; x < buffer.width; x += 1) { 9 | const offX = context.floor(context.random(x)); 10 | const col = bufferPixels.get(offX, y); 11 | gfx.set(x, y, col); 12 | } 13 | } 14 | gfx.updatePixels(); 15 | return gfx; 16 | } 17 | -------------------------------------------------------------------------------- /src/pixels/modules/waves.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | 3 | export function waves(context: p5, buffer: p5) { 4 | return 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/textures/Textures.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { circles } from './modules/circles'; 3 | import { striped } from './modules/striped'; 4 | 5 | export class Textures { 6 | public context: p5; 7 | 8 | constructor(context: p5) { 9 | this.context = context; 10 | } 11 | 12 | circles = (res: number, colors: Array) => 13 | circles(this.context, res, colors) 14 | 15 | striped = (res: number, colors: Array) => 16 | striped(this.context, res, colors) 17 | } 18 | -------------------------------------------------------------------------------- /src/textures/modules/circles.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { shade } from '../../colors/modules/shade'; 3 | 4 | export function circles(context: p5, res: number, colors: Array) { 5 | const gfx = context.createGraphics(res, res); 6 | gfx.background(context.random(colors)); 7 | gfx.noStroke(); 8 | for (let t = 0; t < res; t += 1) { 9 | const off = 10; 10 | const col = shade(context, context.random(colors), off); 11 | const x = this.context.random(gfx.width); 12 | const y = this.context.random(gfx.height); 13 | const scl = 0.3; 14 | const d = this.context.random(res * scl); 15 | gfx.fill(col); 16 | gfx.circle(x, y, d); 17 | } 18 | return gfx; 19 | } 20 | -------------------------------------------------------------------------------- /src/textures/modules/striped.ts: -------------------------------------------------------------------------------- 1 | import p5 from 'p5'; 2 | import { shade } from '../../colors/modules/shade'; 3 | import { often } from '../../choices/modules/often'; 4 | 5 | export function striped(context: p5, res: number, colors: Array) { 6 | const gfx = context.createGraphics(res, res); 7 | for (let x = 0; x < gfx.width; x += 1) { 8 | const mapping = context.map(x, 0, gfx.width, 0, colors.length); 9 | const index = context.floor(mapping); 10 | const mappedColor = colors[index]; 11 | const randomizedColor = context.random(colors); 12 | const fuzzyColor = (often(context)) ? mappedColor : randomizedColor; 13 | const off = 10; 14 | gfx.stroke(shade(context, fuzzyColor, off)); 15 | gfx.line(x, 0, x, gfx.height); 16 | } 17 | return gfx; 18 | } 19 | -------------------------------------------------------------------------------- /svg/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/header.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/licence.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | license 16 | license 17 | MIT 18 | MIT 19 | 20 | -------------------------------------------------------------------------------- /svg/p5js.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/spacer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/Shannon-Kunkle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matthias-jaeger-net/p5-toolkit/5b27bec2a27a5f5e2c06b8cc3d6564d4d1aea817/test/Shannon-Kunkle.png -------------------------------------------------------------------------------- /test/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matthias-jaeger-net/p5-toolkit/5b27bec2a27a5f5e2c06b8cc3d6564d4d1aea817/test/favicon.ico -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Manual Tests 8 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /test/instance.js: -------------------------------------------------------------------------------- 1 | let myp5 = new p5(( sketch ) => { 2 | let img; 3 | sketch.preload = () => { 4 | img = sketch.loadImage('Shannon-Kunkle.png'); 5 | } 6 | 7 | sketch.setup = () => { 8 | sketch.createCanvas(img.width, img.height); 9 | const effects = new Effects(this); 10 | sketch.image(effects.randomBlurX(sketch.img.get(0, 0, img.width / 2, this.img.height)), 0, 0); 11 | sketch.image(img.get(img.width / 2, 0, img.width, img.height), img.width / 2, 0); 12 | } 13 | }); 14 | let myp5 = new p5(s, document.getElementById('sketch')); -------------------------------------------------------------------------------- /test/old.js: -------------------------------------------------------------------------------- 1 | /*)function setup() { 2 | createCanvas(800, 400); 3 | background(255); 4 | const effects = new Effects(this); 5 | for (let x = 0; x < width; x += 200) { 6 | const design = createGraphics(200, height); 7 | const density = map(x, 0, width, 0.1, 1.0); 8 | design.image(effects.bars(design, density, color(0)), 0, 0); 9 | image(design, x, 0); 10 | } 11 | //save("bars.jpg"); 12 | } 13 | 14 | /*) 15 | function setup() { 16 | createCanvas(800, 400); 17 | background(255); 18 | textAlign(CENTER); 19 | textSize(12); 20 | const effects = new Effects(this); 21 | const design = createGraphic 22 | for (let x = 0; x < width; x += 200) { 23 | const density = map(x, 0, width, 0.01, 0.001); 24 | image(effects.dots(this, createVector(10, 10), color(0)), x, 0, 200, height-20); 25 | } 26 | //save("hatchDots.jpg"); 27 | } 28 | 29 | */ 30 | 31 | 32 | /*let img; 33 | 34 | function preload() { 35 | img = loadImage('Shannon-Kunkle.png'); 36 | } 37 | 38 | function setup() { 39 | createCanvas(800, 533); 40 | const effects = new Effects(this); 41 | image(effects.bufferStack(img.get(0, 0, 400, 533), 9), 0, 0); 42 | image(img.get(400, 0, 800, 533), 400, 0); 43 | //save("bufferStack.jpg"); 44 | }*/ 45 | 46 | 47 | 48 | /*function setup() { 49 | createCanvas(800, 400); 50 | background(255); 51 | const effects = new Effects(this); 52 | for (let x = 0; x < width; x += 200) { 53 | const col = map(x, 0, width, 0, 200); 54 | const density = map(x, 0, width, 1, 0.1); 55 | image(effects.hatchDots(this, density, col), x, 0, 200, height); 56 | } 57 | //save("hatchDots.jpg"); 58 | }*/ 59 | 60 | /* 61 | 62 | let img; 63 | 64 | function preload() { 65 | img = loadImage('Shannon-Kunkle.png'); 66 | } 67 | 68 | function setup() { 69 | createCanvas(800, 533); 70 | const effects = new Effects(this); 71 | image(effects.gridScapes(img.get(0, 0, 400, 533), 9), 0, 0); 72 | image(img.get(400, 0, 800, 533), 400, 0); 73 | //save("gridScapes.jpg"); 74 | } 75 | */ -------------------------------------------------------------------------------- /test/sketch.js: -------------------------------------------------------------------------------- 1 | // sketch.js 2 | 3 | function setup() { 4 | // Create the 'main' canvas 5 | createCanvas(800, 400); 6 | 7 | // Create a new instance of Effects 8 | // 'this' p5 sketch is passed as argument 9 | const effects = new Effects(this); 10 | 11 | // I start with defining random colors 12 | // All colors return a p5 color 13 | const brand = effects.colors.any(); 14 | const bright = effects.colors.bright(); 15 | const dark = effects.colors.dark(); 16 | 17 | // Then I define some colorful hatches 18 | // All hatches take width, height, density, color and weight 19 | // A new p5.Graphics buffer with the hatch is returned to the variable 20 | const grain = effects.hatches.grain(width, height, random(), brand, random(3)); 21 | const stripes = effects.hatches.stripes(width, height, random(), dark, random(3)); 22 | const bars = effects.hatches.bars(width, height, random(), dark, random(3)); 23 | 24 | // Rendering 25 | background(bright); 26 | image(grain, 0, 0); 27 | image(stripes, 0, 0); 28 | image(bars, 0, 0); 29 | 30 | // Post process 31 | image(effects.pixels.glitch(this.get()), 0, 0); 32 | } 33 | 34 | 35 | /*function setup() { 36 | createCanvas(800, 400); 37 | const effects = new Effects(this); 38 | const bright = effects.colors.bright(); 39 | const dark = effects.colors.dark(); 40 | const randomHatchParams = () => { return [width, height, random(), bright, random()]; } 41 | 42 | textFont('Texturina'); 43 | textSize(150); 44 | textStyle(BOLD); 45 | textAlign(CENTER, CENTER); 46 | fill(dark); 47 | stroke(bright); 48 | image(effects.hatches.stripes(...randomHatchParams()), 0, 0); 49 | image(effects.hatches.bars(...randomHatchParams()), 0, 0); 50 | text('p5-toolkit', 400, 200); 51 | image(effects.pixels.shrink(this.get()), 0, 0); 52 | text('p5-toolkit', 400, 200); 53 | image(effects.pixels.glitch(this.get()), 0, 0); 54 | text('p5-toolkit', 400, 200); 55 | // save('cover.jpg'); 56 | }*/ 57 | 58 | // const bright = effects.colors.bright(); 59 | // const dark = effects.colors.dark(); 60 | 61 | // const design = createGraphics(800, 400, WEBGL); 62 | // design.background(effects.colors.dark()); 63 | 64 | // for (let t = 0; t < 100; t += 1) { 65 | // design.push(); 66 | // design.translate(random(-400, 400), random(-200, 200)); 67 | // design.rotateY(random(TAU)); 68 | // design.box(random(100), random(100), random(100)); 69 | // design.pop(); 70 | // } 71 | // image(design, 0, 0); 72 | 73 | // Hatches Test 74 | // const randomHatchParams = () => { 75 | // return [width, height, random(), effects.colors.any(), random()]; 76 | // } 77 | // image(effects.hatches.bars(...randomHatchParams()), 0, 0); 78 | // image(effects.hatches.stripes(...randomHatchParams()), 0, 0); 79 | // image(effects.hatches.dots(...randomHatchParams()), 0, 0); 80 | // image(effects.hatches.grain(...randomHatchParams()), 0, 0); 81 | // image(effects.hatches.corroded(width, height, random(), effects.colors.any(), 5), 0, 0); 82 | 83 | // image(effects.pixels.glitch(this.get()), 0, 0); 84 | // image(effects.pixels.spread(this.get()), 0, 0); 85 | // image(effects.pixels.mosaic(this.get()), 0, 0); 86 | // image(effects.pixels.fuzzy(this.get()), 0, 0); 87 | // image(effects.pixels.shrink(this.get()), 0, 0); 88 | // image(effects.pixels.shift(this.get()), 0, 0); 89 | // image(effects.pixels.puzzle(this.get()), 0, 0); 90 | // image(effects.pixels.linify(this.get()), 0, 0); 91 | 92 | //save('effects-manual-testing.jpg'); 93 | //} -------------------------------------------------------------------------------- /test/sketch.test.js: -------------------------------------------------------------------------------- 1 | test('Do I like unit testing?', () => { 2 | expect(1).toBe(1); 3 | }); 4 | 5 | test('Can I import my script here?', () => { 6 | const Effects = require('../dist/p5-global-effects.min.js'); 7 | expect(Effects).toBeDefined(); 8 | }); 9 | 10 | test('Is "randomColor" defined in Effects?', () => { 11 | const Effects = require('../dist/p5-global-effects.min.js'); 12 | const effects = new window.Effects(this); 13 | expect(effects.randomColor).toBeDefined(); 14 | }); 15 | 16 | test('Can I import p5 here?', () => { 17 | const p5 = require('../node_modules/p5/lib/p5'); 18 | expect(p5).toBeDefined(); 19 | }); 20 | 21 | test('Does it make sense to unit-test creative code?', () => { 22 | const p5 = require('../node_modules/p5/lib/p5'); 23 | const sketch = require('./sketch'); 24 | expect(myp5).toBeDefined(); 25 | }); 26 | 27 | /* 28 | test('Can I import my script here?', () => { 29 | const p5 = require('../node_modules/p5/lib/p5'); 30 | const Effects = require('../dist/p5-global-effects.min.js'); 31 | 32 | let sketch = function (p) { 33 | p.setup = function () { 34 | p.createCanvas(100, 100); 35 | p.background(0); 36 | } 37 | }; 38 | let node = document.createElement('div'); 39 | window.document.getElementsByTagName('body')[0].appendChild(node); 40 | new p5(sketch, node); 41 | expect(p5).toBeDefined(); 42 | 43 | });*/ -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | let seg = 3; 2 | let n = 100; 3 | let max = 255; 4 | let d = max / seg; 5 | let current = 0; 6 | for (let angle = n; angle < max+n; angle += d) { 7 | if (angle > max) { 8 | console.log(Math.abs(angle-max)); 9 | } else { 10 | console.log(angle); 11 | } 12 | } -------------------------------------------------------------------------------- /test/test2.js: -------------------------------------------------------------------------------- 1 | function bright() { 2 | const max = 255; 3 | const min = 120; 4 | const r = random(min, max); 5 | const g = random(min, max); 6 | const b = random(min, max); 7 | const col = color(r, g, b); 8 | return col; 9 | } 10 | 11 | function dark() { 12 | const max = 100; 13 | const min = 0; 14 | const r = random(min, max); 15 | const g = random(min, max); 16 | const b = random(min, max); 17 | const col = color(r, g, b); 18 | return col; 19 | } 20 | 21 | 22 | function anyColor() { 23 | const max = 255; 24 | const r = random(max); 25 | const g = random(max); 26 | const b = random(max); 27 | const col = color(r, g, b); 28 | return col; 29 | } 30 | 31 | function anyPalette(len) { 32 | const palette = []; 33 | for (let i = 0; i < len; i += 1) { 34 | palette.push(anyColor()); 35 | } 36 | return palette; 37 | } 38 | 39 | function relatedPalette(len, col) { 40 | const palette = []; 41 | let n = hue(col); 42 | let max = 360; 43 | let d = max / len; 44 | colorMode(HSB); 45 | let c; 46 | for (let angle = n; angle < max + n; angle += d) { 47 | if (angle > max) { 48 | c = color(abs(angle - max), saturation(col), brightness(col)); 49 | } else { 50 | c = color(abs(angle), saturation(col), brightness(col)); 51 | } 52 | palette.push(c) 53 | } 54 | colorMode(RGB); 55 | return palette; 56 | } 57 | 58 | function palette() { 59 | const brand = anyColor(); 60 | const brandDark = dark(); 61 | const brandLight = bright(); 62 | return [ 63 | brand, 64 | shade(brand), 65 | brandDark, 66 | brandLight, 67 | ] 68 | } 69 | 70 | function shade(col) { 71 | const max = 20; 72 | const h = hue(col); 73 | const s = saturation(col); 74 | const b = brightness(col); 75 | colorMode(HSB); 76 | const c = color(h, s, b + random(-max, max)); 77 | colorMode(RGB); 78 | return c; 79 | } 80 | 81 | 82 | function setup() { 83 | createCanvas(800, 400); 84 | noStroke(); 85 | const effects = new Effects(this); 86 | const p = palette(); 87 | const max = 200; 88 | background(255); 89 | for (let x = 0; x < width; x += max) { 90 | for (let y = 0; y < height; y += max) { 91 | fill(shade(random(p))); 92 | rect(x, y, max, max); 93 | } 94 | } 95 | image(effects.stripes(this, 0.2, 255), 0, 0); 96 | image(effects.bars(this, 0.2, 255), 0, 0); 97 | //image(effects.glitchY(this), 0, 0); 98 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "noImplicitAny": true, 5 | "module": "commonjs", 6 | "target": "es5", 7 | "lib": [ "es2015", "dom" ], 8 | "allowJs": true, 9 | "allowSyntheticDefaultImports": true, 10 | }, 11 | "typedocOptions": { 12 | "mode": "modules", 13 | "out": "docs" 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint-config-airbnb-base" 5 | ], 6 | "jsRules": {}, 7 | "rules": {}, 8 | "rulesDirectory": [] 9 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | var TypedocWebpackPlugin = require('typedoc-webpack-plugin'); 3 | 4 | module.exports = { 5 | entry: './src/index.ts', 6 | output: { 7 | filename: 'p5-global-effects.min.js', 8 | path: path.resolve(__dirname, 'dist'), 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.ts?$/, 14 | use: 'ts-loader', 15 | exclude: /node_modules/, 16 | } 17 | ], 18 | }, 19 | resolve: { 20 | extensions: [ '.tsx', '.ts', '.js' ], 21 | }, 22 | plugins: [ 23 | ], 24 | }; --------------------------------------------------------------------------------