├── .gitignore ├── CNAME ├── LICENSE ├── README.md ├── apparat ├── index.html └── sketch.js ├── apparat2 ├── index.html ├── logic.js └── sketch.js ├── apparat3 ├── index.html ├── logic.js └── sketch.js ├── apparat4 ├── index.html ├── logic.js └── sketch.js ├── blanket ├── index.html └── sketch.js ├── blanket2 ├── index.html └── sketch.js ├── blanket3 ├── index.html └── sketch.js ├── block-waves ├── index.html └── sketch.js ├── blocks ├── index.html └── sketch.js ├── blocks2 ├── index.html └── sketch.js ├── blocks3 ├── index.html └── sketch.js ├── colonization ├── index.html └── sketch.js ├── dist ├── gaussian.bundle.js ├── perlin.bundle.js ├── trace.bundle.js └── tracebig.bundle.js ├── favicon.png ├── fractured_square ├── index.html └── sketch.js ├── fractured_square2 ├── index.html └── sketch.js ├── gaussian ├── index.html ├── sketch.js └── ui.js ├── grid ├── index.html └── sketch.js ├── grid2 ├── index.html └── sketch.js ├── growth ├── index.html └── sketch.js ├── growth2 ├── index.html └── sketch.js ├── growth3 ├── index.html └── sketch.js ├── growth4 ├── index.html └── sketch.js ├── hexagon ├── index.html └── sketch.js ├── horizon ├── index.html └── sketch.js ├── horizon2 ├── index.html └── sketch.js ├── horizon3 ├── index.html └── sketch.js ├── horizon4 ├── index.html └── sketch.js ├── horizon_generator ├── index.html ├── sketch.js └── style.css ├── hot.js ├── hypo ├── index.html └── sketch.js ├── hypo2 ├── index.html └── sketch.js ├── hypo3 ├── index.html └── sketch.js ├── hypo4 ├── index.html └── sketch.js ├── index.html ├── interpolate ├── index.html └── sketch.js ├── lab ├── arab │ ├── index.html │ └── sketch.js ├── blocks3 │ ├── index.html │ └── sketch.js ├── cross-grid │ ├── index.html │ └── sketch.js ├── fall │ ├── index.html │ └── sketch.js ├── gaussian2 │ ├── index.html │ └── sketch.js ├── gradient │ ├── index.html │ └── sketch.js ├── growth5 │ ├── index.html │ └── sketch.js ├── horizon_line │ ├── index.html │ └── sketch.js ├── particle_network │ ├── index.html │ └── sketch.js ├── randomness │ ├── index.html │ └── sketch.js ├── swirl │ ├── index.html │ └── sketch.js ├── topology4 │ ├── index.html │ └── sketch.js ├── voronoi3 │ ├── index.html │ └── sketch.js └── walkers │ ├── index.html │ └── sketch.js ├── layout ├── index.html └── sketch.js ├── layout2 ├── index.html └── sketch.js ├── lindenmayer ├── index.html ├── main.css └── sketch.js ├── logo.js ├── package.json ├── patchwork ├── index.html └── sketch.js ├── patchwork2 ├── index.html └── sketch.js ├── patchwork3 ├── index.html └── sketch.js ├── patchwork4 ├── index.html └── sketch.js ├── perlin ├── index.html ├── sketch.js └── ui.js ├── random_shapes ├── index.html └── sketch.js ├── reaction_diffusion ├── index.html └── sketch.js ├── smokerings ├── index.html └── sketch.js ├── stripes ├── index.html └── sketch.js ├── stripes2 ├── index.html └── sketch.js ├── stripesbw ├── index.html └── sketch.js ├── style.css ├── tectonic ├── index.html └── sketch.js ├── tectonic2 ├── index.html └── sketch.js ├── topography ├── index.html └── sketch.js ├── topology ├── index.html └── sketch.js ├── topology2 ├── index.html └── sketch.js ├── topology3 ├── index.html └── sketch.js ├── topology4 ├── index.html └── sketch.js ├── topology5 ├── index.html └── sketch.js ├── trace-perspective-big ├── index.html └── sketch.js ├── trace-perspective ├── index.html └── sketch.js ├── trace-print ├── index.html └── sketch.js ├── trace ├── index.html └── sketch.js ├── trace2 ├── index.html └── sketch.js ├── trace3 ├── index.html └── sketch.js ├── trace4 ├── index.html └── sketch.js ├── trace5 ├── index.html └── sketch.js ├── trunk ├── index.html └── sketch.js ├── trunk2 ├── index.html └── sketch.js ├── trunk3 ├── index.html └── sketch.js ├── utils └── elementsjs │ ├── index.js │ └── package.json ├── voronoi ├── index.html └── sketch.js ├── voronoi2 ├── index.html └── sketch.js ├── weave ├── index.html └── sketch.js ├── weave2 ├── index.html └── sketch.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | generated.space -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Kjetil Midtgarden Golid 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Generative art with P5 2 | 3 | http://generated.space/ 4 | -------------------------------------------------------------------------------- /apparat/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Block Layouts 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /apparat2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Block Layouts 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /apparat2/sketch.js: -------------------------------------------------------------------------------- 1 | import BlockBuilder from './logic.js'; 2 | 3 | let sketch = function(p) { 4 | let THE_SEED; 5 | let xdim = 60; 6 | let ydim = 60; 7 | let radius = 18; 8 | let size = 12; 9 | 10 | let chance_start = 0.4; 11 | let chance_extend = 0.8; 12 | let chance_vertical = 0.5; 13 | 14 | let colors; 15 | 16 | let grid; 17 | let builder; 18 | 19 | p.setup = function() { 20 | p.createCanvas(2970, 2100); 21 | THE_SEED = p.floor(p.random(9999999)); 22 | p.randomSeed(THE_SEED); 23 | p.noLoop(); 24 | p.fill('#eeeee8'); 25 | p.background('#eeeee8'); 26 | colors = [ 27 | p.color(142, 192, 124), 28 | p.color(250, 189, 47), 29 | p.color(251, 71, 44), 30 | p.color(211, 134, 147), 31 | p.color(49, 69, 80) 32 | ]; 33 | 34 | builder = new BlockBuilder(xdim, ydim, radius, chance_start, chance_extend, chance_vertical, colors); 35 | }; 36 | 37 | p.draw = function() { 38 | /* 39 | p.translate(240, 240); 40 | grid = builder.generate(); 41 | p.strokeWeight(10); 42 | display(); 43 | p.strokeWeight(4); 44 | display(); 45 | */ 46 | 47 | p.translate(100, 10); 48 | for (let i = 0; i < 3; i++) { 49 | p.push(); 50 | for (let j = 0; j < 5; j++) { 51 | builder.radius = (j + 3) * 3; 52 | builder.grid_dim_x = builder.radius * 2 + 5; 53 | grid = builder.generate(); 54 | p.strokeWeight(8); 55 | display(); 56 | p.strokeWeight(4); 57 | display(); 58 | p.translate(200 + builder.radius * 25, 0); 59 | } 60 | p.pop(); 61 | p.translate(0, 650); 62 | 63 | builder.chance_new += 0.3; 64 | builder.chance_extend += 0.08; 65 | } 66 | }; 67 | 68 | function display() { 69 | for (var i = 0; i < grid.length; i++) { 70 | for (var j = 0; j < grid[i].length; j++) { 71 | p.noStroke(); 72 | if (grid[i][j].in && grid[i][j].col != null) { 73 | p.fill(grid[i][j].col); 74 | p.rect(j * size, i * size, size, size); 75 | } 76 | p.stroke('#050505'); 77 | if (grid[i][j].h) p.line(j * size, i * size, (j + 1) * size, i * size); 78 | if (grid[i][j].v) p.line(j * size, i * size, j * size, (i + 1) * size); 79 | } 80 | } 81 | } 82 | 83 | p.keyPressed = function() { 84 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'png'); 85 | }; 86 | }; 87 | 88 | new p5(sketch); 89 | -------------------------------------------------------------------------------- /apparat3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Block Layouts 2 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /apparat3/sketch.js: -------------------------------------------------------------------------------- 1 | import BlockBuilder from './logic.js'; 2 | 3 | let sketch = function(p) { 4 | let THE_SEED; 5 | let xdim = 18; 6 | let ydim = 18; 7 | let radius = 8; 8 | let size = 10; 9 | 10 | let chance_start = 1; 11 | let chance_extend = 0.88; 12 | let chance_vertical = 0.5; 13 | 14 | let colors; 15 | 16 | let grid; 17 | let builder; 18 | 19 | p.setup = function() { 20 | p.createCanvas(2100, 2100) 21 | THE_SEED = p.floor(p.random(9999999)); 22 | p.randomSeed(THE_SEED); 23 | p.noLoop(); 24 | p.fill('#eeeee8'); 25 | p.background('#eeeee8'); 26 | colors = [ 27 | p.color(142, 192, 124), 28 | p.color(250, 189, 47), 29 | p.color(251, 71, 44), 30 | p.color(211, 134, 147), 31 | p.color(49, 69, 80) 32 | ]; 33 | 34 | builder = new BlockBuilder(xdim, ydim, radius, chance_start, chance_extend, chance_vertical, colors); 35 | }; 36 | 37 | p.draw = function() { 38 | /* 39 | p.translate(240, 240); 40 | grid = builder.generate(); 41 | p.strokeWeight(10); 42 | display(); 43 | p.strokeWeight(4); 44 | display(); 45 | */ 46 | 47 | p.translate(205, 205); 48 | for (let i = 0; i < 6; i++) { 49 | p.push(); 50 | for (let j = 0; j < 6; j++) { 51 | grid = builder.generate(); 52 | p.strokeWeight(6); 53 | display(); 54 | p.strokeWeight(2); 55 | display(); 56 | p.translate(300, 0); 57 | } 58 | p.pop(); 59 | p.translate(0, 300); 60 | } 61 | }; 62 | 63 | function display() { 64 | for (var i = 0; i < grid.length; i++) { 65 | for (var j = 0; j < grid[i].length; j++) { 66 | p.noStroke(); 67 | if (grid[i][j].in && grid[i][j].col != null) { 68 | p.fill(grid[i][j].col); 69 | p.rect(j * size, i * size, size, size); 70 | } 71 | p.stroke('#050505'); 72 | if (grid[i][j].h) p.line(j * size, i * size, (j + 1) * size, i * size); 73 | if (grid[i][j].v) p.line(j * size, i * size, j * size, (i + 1) * size); 74 | } 75 | } 76 | } 77 | 78 | p.keyPressed = function() { 79 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'png'); 80 | }; 81 | }; 82 | 83 | new p5(sketch); 84 | -------------------------------------------------------------------------------- /apparat4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Space Invaders 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /apparat4/sketch.js: -------------------------------------------------------------------------------- 1 | import BlockBuilder from './logic.js'; 2 | 3 | let sketch = function(p) { 4 | let THE_SEED; 5 | let size = 10; 6 | 7 | let xdim = 61; 8 | let ydim = 61; 9 | 10 | let radius = 18; 11 | let wh_ratio = 0.8; 12 | let symmetric = true; 13 | 14 | let chance_start = 0.9; 15 | let chance_extend = 0.8; 16 | let chance_vertical = 0.5; 17 | 18 | let padding_outside = 150; 19 | let nx = 3; 20 | let ny = 3; 21 | let padding_between_x, padding_between_y; 22 | 23 | let colors; 24 | 25 | let grid; 26 | let builder; 27 | 28 | p.setup = function() { 29 | p.createCanvas(2100, 2100); 30 | THE_SEED = p.floor(p.random(9999999)); 31 | p.randomSeed(THE_SEED); 32 | p.noLoop(); 33 | p.background('#eeeee5'); 34 | 35 | colors = [ 36 | p.color('#6c843e'), 37 | p.color('#dc383a'), 38 | p.color('#687d99'), 39 | p.color('#705f84'), 40 | p.color('#fc9a1a'), 41 | p.color('#aa3a33'), 42 | p.color('#9c4257') 43 | ]; 44 | 45 | builder = new BlockBuilder( 46 | xdim, 47 | ydim, 48 | radius, 49 | chance_start, 50 | chance_extend, 51 | chance_vertical, 52 | colors, 53 | symmetric, 54 | wh_ratio 55 | ); 56 | 57 | padding_between_x = (p.width - padding_outside * 2 - nx * xdim * size) / (nx - 1); 58 | padding_between_y = (p.height - padding_outside * 2 - ny * ydim * size) / (ny - 1); 59 | }; 60 | 61 | p.draw = function() { 62 | p.translate(padding_outside, padding_outside); 63 | for (let i = 0; i < ny; i++) { 64 | p.push(); 65 | for (let j = 0; j < nx; j++) { 66 | grid = builder.generate(); 67 | p.strokeWeight(6); 68 | display(); 69 | p.strokeWeight(2); 70 | display(); 71 | p.translate(xdim * size + padding_between_x, 0); 72 | } 73 | p.pop(); 74 | p.translate(0, ydim * size + padding_between_y); 75 | } 76 | }; 77 | 78 | function display() { 79 | for (var i = 0; i < grid.length; i++) { 80 | for (var j = 0; j < grid[i].length; j++) { 81 | p.noStroke(); 82 | if (grid[i][j].in && grid[i][j].col != null) { 83 | p.fill(grid[i][j].col); 84 | p.rect(j * size, i * size, size, size); 85 | } 86 | p.stroke('#1c2021'); 87 | if (grid[i][j].h) p.line(j * size, i * size, (j + 1) * size, i * size); 88 | if (grid[i][j].v) p.line(j * size, i * size, j * size, (i + 1) * size); 89 | } 90 | } 91 | } 92 | 93 | p.keyPressed = function() { 94 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'png'); 95 | }; 96 | }; 97 | 98 | new p5(sketch); 99 | -------------------------------------------------------------------------------- /blanket/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Noise Blanket 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /blanket/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let pnts; 3 | let n = 1400; 4 | let terminate; 5 | 6 | p.setup = function() { 7 | p.createCanvas(1200,900); 8 | p.stroke(255,6); 9 | init(); 10 | } 11 | 12 | p.draw = function() { 13 | if(!terminate) { 14 | display(); 15 | terminate = step(); 16 | } 17 | } 18 | 19 | function init() { 20 | terminate = false; 21 | pnts = []; 22 | for (var i = 0; i < n; i++) { 23 | pnts.push({x:i-100, y:1, px:i-100, py:0}); 24 | } 25 | } 26 | 27 | function display () { 28 | for (var i = 0; i < pnts.length; i++) { 29 | p.line(pnts[i].px, pnts[i].py, pnts[i].x, pnts[i].y); 30 | } 31 | } 32 | 33 | function step () { 34 | if (pnts[0].y > p.height) return true; 35 | for (var i = 0; i < pnts.length; i++) { 36 | pnts[i].px = pnts[i].x; 37 | pnts[i].py = pnts[i].y; 38 | pnts[i].x += (p.noise(i/250,pnts[i].y/250)) *2 -1; 39 | pnts[i].y++; 40 | } 41 | return false; 42 | } 43 | 44 | 45 | } 46 | 47 | new p5(sketch); 48 | -------------------------------------------------------------------------------- /blanket2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Radial Blanket 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /blanket2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let pnts; 3 | let n = 1000; 4 | let terminate; 5 | 6 | p.setup = function() { 7 | p.createCanvas(1000,1000); 8 | p.stroke(255,6); 9 | p.strokeWeight(1); 10 | init(); 11 | } 12 | 13 | p.draw = function() { 14 | if(!terminate) { 15 | display(); 16 | terminate = step(); 17 | } 18 | } 19 | 20 | function init() { 21 | terminate = false; 22 | pnts = []; 23 | for (var i = 0; i < n; i++) { 24 | pnts.push({x:i, y:-700, px: i, py:-700}); 25 | } 26 | } 27 | 28 | function display () { 29 | p.translate(p.width/2, p.height/2); 30 | for (var i = 0; i < pnts.length; i++) { 31 | let r = p.TWO_PI * (pnts[i].x / p.width); 32 | let pr = p.TWO_PI * (pnts[i].px / p.width); 33 | let x = p.cos(r) * (pnts[i].y); 34 | let y = p.sin(r) * (pnts[i].y); 35 | let px = p.cos(pr) * (pnts[i].py); 36 | let py = p.sin(pr) * (pnts[i].py); 37 | p.line(x,y,px,py); 38 | } 39 | } 40 | 41 | function step () { 42 | if(pnts[0].y > 0) return true; 43 | for (var i = 0; i < pnts.length; i++) { 44 | pnts[i].px = pnts[i].x; 45 | pnts[i].py = pnts[i].y; 46 | 47 | let r = p.TWO_PI * (pnts[i].x / p.width); 48 | let x = p.cos(r) * (50 + pnts[i].y); 49 | let y = p.sin(r) * (50 + pnts[i].y); 50 | pnts[i].x += (p.noise(10000+x/500, 10000+y/500)) *2 - 1; 51 | pnts[i].y++; 52 | } 53 | return false; 54 | } 55 | 56 | 57 | } 58 | 59 | new p5(sketch); 60 | -------------------------------------------------------------------------------- /blanket3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Color Blanket 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /blanket3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let pnts; 3 | let n = 1000; 4 | let terminate; 5 | let color_offset; 6 | 7 | p.setup = function() { 8 | p.createCanvas(1400,1000); 9 | p.colorMode(p.HSB); 10 | init(); 11 | } 12 | 13 | p.draw = function() { 14 | if(!terminate) { 15 | display(); 16 | step(); 17 | display(); 18 | terminate = step(); 19 | } 20 | } 21 | 22 | function init() { 23 | terminate = false; 24 | pnts = []; 25 | color_offset = p.random(360); 26 | for (var i = 0; i < n; i++) { 27 | pnts.push({x:i+200, y:1, px:i+200, py:0}); 28 | } 29 | } 30 | 31 | function display () { 32 | for (var i = 0; i < pnts.length; i++) { 33 | p.stroke(((pnts[i].y * .03) + color_offset + (i/n * 120)) % 360,80,100,.07); 34 | p.line(pnts[i].px, pnts[i].py, pnts[i].x, pnts[i].y); 35 | } 36 | } 37 | 38 | function step () { 39 | if (pnts[0].y > p.height) return true; 40 | for (var i = 0; i < pnts.length; i++) { 41 | pnts[i].px = pnts[i].x; 42 | pnts[i].py = pnts[i].y; 43 | pnts[i].x += (p.noise(i/200,pnts[i].y/350)) *2 -1; 44 | pnts[i].y++; 45 | } 46 | return false; 47 | } 48 | 49 | 50 | } 51 | 52 | new p5(sketch); 53 | -------------------------------------------------------------------------------- /block-waves/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Block Waves 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /block-waves/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | 4 | let outer_dim, inner_dim; 5 | let rows; 6 | let block_back, block_front; 7 | 8 | let iul, iur, ill, ilr; 9 | let oul, our, oll, olr; 10 | 11 | let tick = 0; 12 | 13 | p.setup = function() { 14 | p.createCanvas(1300, 1000); 15 | p.rectMode(p.CORNERS); 16 | //p.noLoop(); 17 | p.noStroke(); 18 | //p.strokeWeight(2); 19 | 20 | THE_SEED = p.floor(p.random(9999999)); 21 | p.randomSeed(THE_SEED); 22 | 23 | inner_dim = 220; 24 | outer_dim = 800; 25 | 26 | rows = 24; 27 | 28 | block_back = inner_dim; 29 | block_front = p.map(inner_dim / outer_dim, 0, rows, inner_dim, outer_dim); 30 | 31 | iul = p.createVector(-inner_dim, -inner_dim); 32 | iur = p.createVector(inner_dim, -inner_dim); 33 | ill = p.createVector(-inner_dim, inner_dim); 34 | ilr = p.createVector(inner_dim, inner_dim); 35 | 36 | oul = p.createVector(-outer_dim, -outer_dim); 37 | our = p.createVector(outer_dim, -outer_dim); 38 | oll = p.createVector(-outer_dim, outer_dim); 39 | olr = p.createVector(outer_dim, outer_dim); 40 | }; 41 | p.draw = function() { 42 | p.clear(); 43 | p.translate(p.width / 2, 0); 44 | for (var j = 0; j < rows; j++) { 45 | p.scale(block_front / block_back); 46 | for (var i = 0; i < rows / 2; i++) { 47 | display_column(i, j); 48 | display_column(rows - i - 1, j); 49 | } 50 | } 51 | tick++; 52 | }; 53 | 54 | function display_column(i, j) { 55 | //let val = p.random(-0.1, 0.1); 56 | let val = p.map(p.noise(i / 20 + tick / 200, j / 8, tick / 150), 0, 1, -0.4, 0); 57 | 58 | let q1 = get_point(i, val, block_back); 59 | let q2 = get_point(i + 1, val, block_back); 60 | let q3 = get_point(i + 1, val, block_front); 61 | let q4 = get_point(i, val, block_front); 62 | 63 | if (q4.y < block_front + 180) { 64 | p.fill(236, 65, 38); 65 | p.beginShape(); 66 | p.vertex(q1.x, q1.y); 67 | p.vertex(q4.x, q4.y); 68 | p.vertex(q4.x, block_front + 180); 69 | p.vertex(q1.x, block_back + 180); 70 | p.endShape(p.CLOSE); 71 | 72 | p.fill(236, 65, 38); 73 | p.beginShape(); 74 | p.vertex(q2.x, q2.y); 75 | p.vertex(q3.x, q3.y); 76 | p.vertex(q3.x, block_front + 180); 77 | p.vertex(q2.x, block_back + 180); 78 | p.endShape(p.CLOSE); 79 | 80 | p.fill(255); 81 | p.beginShape(); 82 | p.vertex(q1.x, q1.y); 83 | p.vertex(q2.x, q2.y); 84 | p.vertex(q3.x, q3.y); 85 | p.vertex(q4.x, q4.y); 86 | p.endShape(p.CLOSE); 87 | 88 | p.fill(236, 65, 38); 89 | p.rect(q4.x, q4.y, q3.x, block_front + 180); 90 | } 91 | } 92 | 93 | function get_point(xcol, yval, bound) { 94 | let x = p.map(xcol, 0, rows, -bound, bound); 95 | let y = p.map(yval, 0, 1, bound, -bound); 96 | return p.createVector(x, y); 97 | } 98 | 99 | p.keyPressed = function() { 100 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 101 | }; 102 | }; 103 | new p5(sketch); 104 | -------------------------------------------------------------------------------- /blocks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Block Layouts 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /blocks2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Block Layouts 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /blocks2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let xdim = 10; 3 | let ydim = 8; 4 | let size = 20; 5 | 6 | let grid; 7 | let colors; 8 | 9 | 10 | p.setup = function() { 11 | p.createCanvas(1200,850); 12 | p.noLoop(); 13 | p.noFill(); 14 | 15 | colors = [ 16 | p.color(231,94,96), 17 | p.color(249,190,82), 18 | p.color(89,180,180), 19 | p.color(197,149,197) 20 | ]; 21 | } 22 | 23 | p.draw = function() { 24 | p.clear(); 25 | //p.translate(-size/2, -size/2); 26 | generate_grid(xdim, ydim); 27 | for (var i = 0; i < 7; i++) { 28 | p.push(); 29 | for (var j = 0; j < 9; j++) { 30 | p.strokeWeight(6); 31 | p.stroke(colors[p.floor(p.random(4))]); 32 | //p.fill(colors[p.floor(p.random(4))]); 33 | display(p.min(j,4), p.min(i,3), 3 + dist(4,j) , 3 + dist(3,i)); 34 | p.strokeWeight(2); 35 | p.stroke(20,39,49); 36 | p.noFill(); 37 | display(p.min(j,4), p.min(i,3), 3 + dist(4,j) , 3 + dist(3,i)); 38 | 39 | p.translate(90 + (dist(4,j) * size), 0); 40 | } 41 | p.pop(); 42 | p.translate(0, 90 + (dist(3,i) * size)); 43 | } 44 | } 45 | 46 | function generate_grid(xd,yd) { 47 | grid = new Array(yd + 1); 48 | for (var i = 0; i < grid.length; i++) { 49 | grid[i] = new Array(xd + 1); 50 | for (var j = 0; j < grid[i].length; j++) { 51 | if (i == 0 || j == 0) grid[i][j] = {h:false, v:false}; 52 | else if (i == 1 && j == 1) grid[i][j] = {h:true, v:true}; 53 | else grid[i][j] = generate_cell(grid[i][j-1].h, grid[i-1][j].v); 54 | } 55 | } 56 | } 57 | 58 | function generate_cell(west,north) { 59 | if (!west && !north) return {h:false, v:false} 60 | if (!west) return {h:flip_coin(), v:true} 61 | if (!north) return {h:true, v:flip_coin()} 62 | let h = flip_coin(); 63 | let v = h ? flip_coin() : true; 64 | return {h:h, v:v}; 65 | } 66 | 67 | function display(x1,y1, sx,sy) { 68 | p.rect(size,size, (sx-1) * size, (sy-1) * size); 69 | for (var i = 1; i < sy; i++) { 70 | for (var j = 1; j < sx; j++) { 71 | if(grid[y1 + i][x1 + j].h) p.line(j * size, i * size, (j+1) * size, i * size); 72 | if(grid[y1 + i][x1 + j].v) p.line(j * size, i * size, j * size, (i+1) * size); 73 | } 74 | } 75 | } 76 | 77 | function flip_coin() { 78 | return p.random() < .6 ? false:true 79 | } 80 | 81 | function dist (n, m) { 82 | return p.max(n - m, m - n); 83 | } 84 | } 85 | 86 | new p5(sketch); 87 | -------------------------------------------------------------------------------- /blocks3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Block Layouts 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /blocks3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let xdim = 10; 4 | let ydim = 8; 5 | let size = 40; 6 | 7 | let cgrid; 8 | let cdimx = 2; 9 | let cdimy = 2; 10 | 11 | let grid; 12 | let colors; 13 | 14 | p.setup = function() { 15 | p.createCanvas(2970, 2100); 16 | THE_SEED = p.floor(p.random(9999999)); 17 | p.randomSeed(THE_SEED); 18 | p.noLoop(); 19 | p.noFill(); 20 | p.background('#eeeee8'); 21 | 22 | cgrid = []; 23 | for (var i = 0; i < cdimy; i++) { 24 | crow = []; 25 | for (var j = 0; j < cdimx; j++) { 26 | crow.push(p.color(p.random(255), p.random(255), p.random(255))); 27 | } 28 | cgrid.push(crow); 29 | } 30 | console.log(cgrid); 31 | }; 32 | 33 | p.draw = function() { 34 | p.translate(85, 85); 35 | generate_grid(xdim, ydim); 36 | for (var i = 0; i < ydim - 1; i++) { 37 | p.push(); 38 | for (var j = 0; j < xdim - 1; j++) { 39 | p.strokeWeight(16); 40 | p.stroke(get_color(j, i)); 41 | display(p.min(j, 4), p.min(i, 3), 3 + dist(4, j), 3 + dist(3, i)); 42 | 43 | p.translate(1, 1); 44 | p.strokeWeight(6); 45 | p.stroke('#eeeee5'); 46 | display(p.min(j, 4), p.min(i, 3), 3 + dist(4, j), 3 + dist(3, i)); 47 | 48 | p.translate(215 + dist(4, j) * size, 0); 49 | } 50 | p.pop(); 51 | p.translate(0, 215 + dist(3, i) * size); 52 | } 53 | }; 54 | 55 | function generate_grid(xd, yd) { 56 | grid = new Array(yd + 1); 57 | for (var i = 0; i < grid.length; i++) { 58 | grid[i] = new Array(xd + 1); 59 | for (var j = 0; j < grid[i].length; j++) { 60 | if (i == 0 || j == 0) grid[i][j] = { h: false, v: false }; 61 | else if (i == 1 && j == 1) grid[i][j] = { h: true, v: true }; 62 | else grid[i][j] = generate_cell(grid[i][j - 1].h, grid[i - 1][j].v); 63 | } 64 | } 65 | } 66 | 67 | function generate_cell(west, north) { 68 | if (!west && !north) return { h: false, v: false }; 69 | if (!west) return { h: flip_coin(), v: true }; 70 | if (!north) return { h: true, v: flip_coin() }; 71 | let h = flip_coin(); 72 | let v = h ? flip_coin() : true; 73 | return { h: h, v: v }; 74 | } 75 | 76 | function get_color(x, y) { 77 | let px = x / (xdim - 1) * (cdimx - 1); 78 | let py = y / (ydim - 1) * (cdimy - 1); 79 | 80 | let px0 = p.floor(px); 81 | let py0 = p.floor(py); 82 | 83 | let sx = p.map(px, px0, px0 + 1, 0, 1); 84 | let sy = p.map(py, py0, py0 + 1, 0, 1); 85 | 86 | let cu = p.lerpColor(cgrid[py0][px0], cgrid[py0][px0 + 1], sigmoid(sx)); 87 | let cl = p.lerpColor(cgrid[py0 + 1][px0], cgrid[py0 + 1][px0 + 1], sigmoid(sx)); 88 | return p.lerpColor(cu, cl, sigmoid(sy)); 89 | } 90 | 91 | function sigmoid(x) { 92 | return 1.1 / (1 + p.exp(-6 * (x - 0.5))) - 0.05; 93 | } 94 | 95 | function display(x1, y1, sx, sy) { 96 | p.rect(size, size, (sx - 1) * size, (sy - 1) * size); 97 | for (var i = 1; i < sy; i++) { 98 | for (var j = 1; j < sx; j++) { 99 | if (grid[y1 + i][x1 + j].h) p.line(j * size, i * size, (j + 1) * size, i * size); 100 | if (grid[y1 + i][x1 + j].v) p.line(j * size, i * size, j * size, (i + 1) * size); 101 | } 102 | } 103 | } 104 | 105 | function flip_coin() { 106 | return p.random() < 0.6 ? false : true; 107 | } 108 | 109 | function dist(n, m) { 110 | return p.max(n - m, m - n); 111 | } 112 | 113 | p.keyPressed = function() { 114 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpg'); 115 | }; 116 | }; 117 | 118 | new p5(sketch); 119 | -------------------------------------------------------------------------------- /colonization/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Space Colonization 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kgolid/p5ycho/9fb448de863f0c5255d8b8b8660bc2be77771ad5/favicon.png -------------------------------------------------------------------------------- /fractured_square/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Fractured Square 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fractured_square/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let steps = 20; 3 | let size = 800; 4 | 5 | p.setup = function() { 6 | p.createCanvas(size,size); 7 | p.noStroke(); 8 | p.fill(255,240,230); 9 | p.blendMode(p.OVERLAY); 10 | p.noLoop(); 11 | p.frameRate(1); 12 | } 13 | 14 | p.draw = function() { 15 | p.clear(); 16 | p.fill(215,150,60); 17 | let s = generate_string(8); 18 | display(s); 19 | p.fill(185,50,130); 20 | s = generate_string(8); 21 | display(s); 22 | p.fill(80,190,155); 23 | s = generate_string(8); 24 | display(s); 25 | } 26 | 27 | function generate_string (d) { 28 | if (d == 0) { 29 | let r = p.random(5); 30 | if (r < 1) return "W"; 31 | return "B"; 32 | } 33 | 34 | let r = p.random(10 + (d * 8)); 35 | if (r < 5) return "W"; 36 | if (r < 10) return "B"; 37 | let ul = generate_string(d - 1); 38 | let ur = generate_string(d - 1); 39 | let ll = generate_string(d - 1); 40 | let lr = generate_string(d - 1); 41 | return "[" + ul + "-" + ur + "/" + ll + "-" + lr + "]"; 42 | } 43 | 44 | function display(s) { 45 | let depth = 0; 46 | for(let i = 0; i < s.length; i++) { 47 | let t = s[i]; 48 | let cur_size = size / p.pow(2, depth); 49 | //p.fill(p.random(255),p.random(255),p.random(255)); 50 | if (t == "B") { 51 | p.rect(0, 0, cur_size-1, cur_size-1); 52 | } else if (t == "[") { 53 | depth++; 54 | } else if (t == "]") { 55 | p.translate(-cur_size, -cur_size); 56 | depth--; 57 | } else if (t == "-") { 58 | p.translate(cur_size, 0); 59 | } else if (t == "/") { 60 | p.translate(-cur_size, cur_size); 61 | } 62 | } 63 | } 64 | 65 | 66 | } 67 | 68 | new p5(sketch); 69 | -------------------------------------------------------------------------------- /fractured_square2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Black Square 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fractured_square2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let steps = 8; 3 | let size = 800; 4 | 5 | p.setup = function() { 6 | p.createCanvas(size,size); 7 | p.noStroke(); 8 | p.fill(50); 9 | p.blendMode(p.OVERLAY); 10 | p.noLoop(); 11 | p.frameRate(1); 12 | } 13 | 14 | p.draw = function() { 15 | p.clear(); 16 | p.fill(22,23,22); 17 | let s = generate_string(steps); 18 | display(s); 19 | } 20 | 21 | function generate_string (d) { 22 | if (d == 0) { 23 | let r = p.random(5); 24 | if (r < 1) return "W"; 25 | return "B"; 26 | } 27 | 28 | let r = p.random(15 + (d * 10)); 29 | if (r < 4) return "W"; 30 | if (r < 20) return "B"; 31 | let ul = generate_string(d - 1); 32 | let ur = generate_string(d - 1); 33 | let ll = generate_string(d - 1); 34 | let lr = generate_string(d - 1); 35 | return "[" + ul + "-" + ur + "/" + ll + "-" + lr + "]"; 36 | } 37 | 38 | function display(s) { 39 | let depth = 0; 40 | for(let i = 0; i < s.length; i++) { 41 | let t = s[i]; 42 | let cur_size = size / p.pow(2, depth); 43 | //p.fill(p.random(255),p.random(255),p.random(255)); 44 | if (t == "B") { 45 | p.rect(0, 0, cur_size-1, cur_size-1); 46 | } else if (t == "[") { 47 | depth++; 48 | } else if (t == "]") { 49 | p.translate(-cur_size, -cur_size); 50 | depth--; 51 | } else if (t == "-") { 52 | p.translate(cur_size, 0); 53 | } else if (t == "/") { 54 | p.translate(-cur_size, cur_size); 55 | } 56 | } 57 | } 58 | 59 | 60 | } 61 | 62 | new p5(sketch); 63 | -------------------------------------------------------------------------------- /gaussian/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Splatter 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /gaussian/sketch.js: -------------------------------------------------------------------------------- 1 | const p5 = require('p5'); 2 | 3 | const ui = require('./ui'); 4 | 5 | let sketch = function(p) { 6 | let n = 10; 7 | let r = 250; 8 | 9 | let points; 10 | let current; 11 | 12 | p.setup = function() { 13 | var canvas = p.createCanvas(800, 800); 14 | p.fill(0,22,65,6); 15 | p.noStroke(); 16 | p.frameRate(.5); 17 | p.blendMode(p.MULTIPLY); 18 | 19 | current = []; 20 | points = ui.init(p,n,r,points); 21 | } 22 | 23 | p.draw = function() { 24 | p.clear(); 25 | p.translate(p.width/2, p.height/2); 26 | ui.run(p, current, points); 27 | points = ui.init(p,n,r,points,current); 28 | } 29 | } 30 | 31 | new p5(sketch); 32 | -------------------------------------------------------------------------------- /gaussian/ui.js: -------------------------------------------------------------------------------- 1 | const p5 = require('p5'); 2 | 3 | module.exports.run = run; 4 | module.exports.init = init; 5 | 6 | function init(p, n, r, points) { 7 | points = []; 8 | for (let i = 0; i < n; i++) { 9 | let rads = (i / n) * p.TWO_PI; 10 | points.push(p.createVector(p.cos(rads) * r, p.sin(rads) * r, p.random())); 11 | } 12 | for(let b = 0; b < 7; b++) { 13 | interpolate(p, points); 14 | } 15 | return points; 16 | } 17 | 18 | function run (p, current, points) { 19 | for (var i = 0; i < 80; i++) { 20 | current = update(p, current, points); 21 | display(p, current); 22 | } 23 | } 24 | 25 | function update (p, current, points) { 26 | current = deep_copy(points); 27 | for(let b = 0; b < 5; b++) { 28 | for (let i = 0; i < current.length; i++) { 29 | move_nearby(p, current[i], 150); 30 | } 31 | } 32 | return current; 33 | } 34 | 35 | function interpolate (p, points) { 36 | for (var i = points.length-1; i > 0; i--) { 37 | points.splice(i,0,generate_midpoint(p,points[i-1],points[i])); 38 | } 39 | points.splice(0,0,generate_midpoint(p,points[points.length-1],points[0])); 40 | } 41 | 42 | function generate_midpoint (p, p1, p2) { 43 | let p3 = p.createVector((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, ((p1.z + p2.z) / 2) * .27 * p.random(.3, 2)); 44 | move_nearby(p, p3, 150); 45 | return p3; 46 | } 47 | 48 | let move_nearby = function(p, pnt, sd) { 49 | pnt.x = p.randomGaussian(pnt.x, pnt.z * sd); 50 | pnt.y = p.randomGaussian(pnt.y, pnt.z * sd); 51 | } 52 | 53 | function display (p, current) { 54 | //p.clear(); 55 | p.beginShape(); 56 | for (let i = 0; i < current.length; i++) { 57 | p.vertex(current[i].x, current[i].y); 58 | } 59 | p.endShape(p.CLOSE); 60 | } 61 | 62 | let deep_copy = function(arr) { 63 | let narr = []; 64 | for (var i = 0; i < arr.length; i++) { 65 | narr.push(arr[i].copy()); 66 | } 67 | return narr; 68 | } 69 | -------------------------------------------------------------------------------- /grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Organic Grid 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /grid/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let shapes = []; 3 | let current_dir = "V"; 4 | let current_step = 1; 5 | let initial_square; 6 | 7 | p.setup = function() { 8 | p.createCanvas(900,900); 9 | p.fill(255,105,60,30); 10 | //p.noFill(); 11 | p.stroke(40,0,60); 12 | p.colorMode(p.HSB); 13 | p.blendMode(p.DARKEST); 14 | //p.frameRate(1); 15 | p.smooth(); 16 | 17 | initial_square = { 18 | nw: p.createVector(10,10), 19 | ne: p.createVector(p.width-10, 10), 20 | sw: p.createVector(10, p.height-10), 21 | se: p.createVector(p.width-10, p.height-10) 22 | } 23 | shapes.push(initial_square); 24 | } 25 | 26 | p.draw = function() { 27 | if(current_step < 15) { 28 | //p.clear(); 29 | split_all(); 30 | display(); 31 | } 32 | } 33 | 34 | function split_all() { 35 | let new_shapes = []; 36 | for (var j = 0; j < shapes.length; j++) { 37 | new_shapes = new_shapes.concat(split(shapes[j], current_dir)); 38 | } 39 | shapes = new_shapes; 40 | current_dir = toggle(current_dir); 41 | current_step++; 42 | } 43 | 44 | function display () { 45 | p.strokeWeight(50 / p.sq(current_step) + .5); 46 | for (var i = 0; i < shapes.length; i++) { 47 | p.beginShape(); 48 | p.vertex(shapes[i].nw.x, shapes[i].nw.y); 49 | p.vertex(shapes[i].ne.x, shapes[i].ne.y); 50 | p.vertex(shapes[i].se.x, shapes[i].se.y); 51 | p.vertex(shapes[i].sw.x, shapes[i].sw.y); 52 | p.vertex(shapes[i].nw.x, shapes[i].nw.y); 53 | p.vertex(shapes[i].ne.x, shapes[i].ne.y); 54 | p.endShape(p.CLOSE); 55 | } 56 | } 57 | 58 | function split (shape, dir) { 59 | let r1 = p.constrain(p.randomGaussian(.5, .07),0,1); 60 | let r2 = p.constrain(p.randomGaussian(.5, .07),0,1); 61 | 62 | if(p.random(100) < 2) return []; 63 | 64 | if (dir == "H") { 65 | if (shape.nw.dist(shape.sw) < 7 || shape.ne.dist(shape.se) < 7) return [shape]; 66 | 67 | let pwx = p.map(r1, 0, 1, shape.nw.x, shape.sw.x); 68 | let pwy = p.map(r1, 0, 1, shape.nw.y, shape.sw.y); 69 | let pw = p.createVector(pwx, pwy); 70 | 71 | let pex = p.map(r2, 0, 1, shape.ne.x, shape.se.x); 72 | let pey = p.map(r2, 0, 1, shape.ne.y, shape.se.y); 73 | let pe = p.createVector(pex,pey); 74 | 75 | let sh1 = { nw:shape.nw, ne:shape.ne, sw:pw, se:pe }; 76 | let sh2 = { nw:pw, ne:pe, sw:shape.sw, se:shape.se }; 77 | 78 | return [sh1, sh2]; 79 | } else { 80 | if (shape.nw.dist(shape.ne) < 7 || shape.sw.dist(shape.se) < 7) return [shape]; 81 | 82 | let pnx = p.map(r1, 0, 1, shape.nw.x, shape.ne.x); 83 | let pny = p.map(r1, 0, 1, shape.nw.y, shape.ne.y); 84 | let pn = p.createVector(pnx, pny); 85 | 86 | let psx = p.map(r2, 0, 1, shape.sw.x, shape.se.x); 87 | let psy = p.map(r2, 0, 1, shape.sw.y, shape.se.y); 88 | let ps = p.createVector(psx,psy); 89 | 90 | let sh1 = { nw:shape.nw, ne:pn, sw:shape.sw, se:ps }; 91 | let sh2 = { nw:pn, ne:shape.ne, sw:ps, se:shape.se }; 92 | 93 | return [sh1, sh2]; 94 | } 95 | } 96 | 97 | function toggle (dir) { 98 | if (dir == "H") return "V"; 99 | else return "H"; 100 | } 101 | } 102 | 103 | new p5(sketch); 104 | -------------------------------------------------------------------------------- /grid2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Color Grid 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /growth/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Space-Filling Tree 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /growth/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let tree = []; 3 | let boundary_size = 6; 4 | let number_of_tries = 10; 5 | let terminated = false; 6 | 7 | p.setup = function() { 8 | p.createCanvas(850,850); 9 | p.noStroke(); 10 | p.fill(255,100,90); 11 | p.ellipse(p.width/2, p.height/2, 500, 500); 12 | 13 | p.stroke(0); 14 | p.strokeWeight(1); 15 | 16 | tree.push( 17 | { 18 | pos: p.createVector(p.width / 2, p.height / 2), 19 | parent: 0, 20 | exhausted: false 21 | } 22 | ) 23 | } 24 | 25 | p.draw = function() { 26 | if (!terminated) { 27 | terminated = grow(); 28 | display(); 29 | } 30 | } 31 | 32 | function grow () { 33 | //Breadth first 34 | //for (var index = 0; index < tree.length; index++) { 35 | //Depth first 36 | for (var index = tree.length-1; index >= 0; index--) { 37 | let current = tree[index]; 38 | if(!current.exhausted) { 39 | let u = create_neighbour(current.pos); 40 | 41 | for (var t = 0; t < number_of_tries; t++) { 42 | if (ok_position(u)) { 43 | if (p.random() < .4) current.exhausted = true; 44 | tree.push({ pos: u, parent: index, exhausted: p.random() < .15 }); 45 | return false; 46 | } 47 | u = create_neighbour(current.pos); 48 | } 49 | current.exhausted = true; 50 | } 51 | } 52 | return true; 53 | } 54 | 55 | function display () { 56 | let last_index = tree.length - 1; 57 | let v = tree[last_index]; 58 | let u = tree[v.parent]; 59 | p.line(v.pos.x, v.pos.y, u.pos.x, u.pos.y); 60 | } 61 | 62 | function too_close_to_vertex (v,u) { 63 | return p5.Vector.dist(v,u) < boundary_size; 64 | } 65 | 66 | function too_close_to_tree (v) { 67 | for (let t in tree) { 68 | if (too_close_to_vertex(v,tree[t].pos)) return true; 69 | } 70 | return false; 71 | } 72 | 73 | function outside_canvas (v) { 74 | return p.dist(v.x, v.y, p.width / 2, p.height / 2) > 300; 75 | } 76 | 77 | function ok_position (v) { 78 | return !too_close_to_tree(v) && !outside_canvas(v); 79 | } 80 | 81 | function create_neighbour (v) { 82 | let r = p.random(p.TWO_PI); 83 | let x = v.x + (p.cos(r) * (boundary_size + 1)); 84 | let y = v.y + (p.sin(r) * (boundary_size + 1)); 85 | return p.createVector(x,y); 86 | } 87 | } 88 | 89 | new p5(sketch); 90 | -------------------------------------------------------------------------------- /growth2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Depth-First Flower 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /growth2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let number_of_trees = 20; 3 | let trees = []; 4 | let radius = 400; 5 | let initial_boundary_size = 15; 6 | let number_of_tries = 10; 7 | let terminated = false; 8 | let colors; 9 | 10 | p.setup = function() { 11 | p.createCanvas(950, 950); 12 | p.noStroke(); 13 | p.fill(255, 100, 90); 14 | p.background('#252525'); 15 | 16 | p.stroke(0); 17 | p.strokeWeight(2); 18 | colors = [p.color('#ce3830'), p.color('#1c8b94'), p.color('#de980f'), p.color('#d8d8be'), p.color('#454545')]; 19 | 20 | for (var i = 0; i < number_of_trees; i++) { 21 | let tree = [ 22 | { 23 | pos: p.createVector(p.width / 2 + p.random(-250, 250), p.height / 2 + p.random(-250, 250)), 24 | parent: 0, 25 | boundary: initial_boundary_size, 26 | exhausted: false 27 | } 28 | ]; 29 | trees.push(tree); 30 | } 31 | }; 32 | 33 | p.draw = function() { 34 | if (!terminated) { 35 | terminated = grow_all(); 36 | trees.forEach(display); 37 | } 38 | }; 39 | 40 | function grow_all() { 41 | return trees.map(grow).every(x => x); 42 | } 43 | 44 | function grow(tree) { 45 | //Breadth first 46 | //for (var index = 0; index < tree.length; index++) { 47 | //Depth first 48 | for (var index = tree.length - 1; index >= 0; index--) { 49 | let current = tree[index]; 50 | if (!current.exhausted) { 51 | let u = create_neighbour(current.pos, current.boundary); 52 | 53 | for (var t = 0; t < number_of_tries; t++) { 54 | let new_node = { pos: u, parent: index, boundary: current.boundary * 0.94, exhausted: current.boundary <= 3 }; 55 | if (ok_position(new_node)) { 56 | if (p.random() < 0.3) current.exhausted = true; 57 | tree.push(new_node); 58 | return false; 59 | } 60 | u = create_neighbour(current.pos, current.boundary); 61 | } 62 | current.exhausted = true; 63 | } 64 | } 65 | return true; 66 | } 67 | 68 | function display(tree, col) { 69 | let last_index = tree.length - 1; 70 | let v = tree[last_index]; 71 | let u = tree[v.parent]; 72 | 73 | p.stroke(colors[col % colors.length]); 74 | p.strokeWeight(0.5 + v.boundary / 4); 75 | p.line(v.pos.x, v.pos.y, u.pos.x, u.pos.y); 76 | } 77 | 78 | function too_close_to_vertex(v, u) { 79 | return p5.Vector.dist(v.pos, u.pos) < p.max(v.boundary, u.boundary); 80 | } 81 | 82 | function too_close_to_trees(new_node) { 83 | return trees.some(function(tree) { 84 | return tree.some(function(t) { 85 | return too_close_to_vertex(new_node, t); 86 | }); 87 | }); 88 | } 89 | 90 | function outside_canvas(v) { 91 | return p.dist(v.x, v.y, p.width / 2, p.height / 2) > radius; 92 | } 93 | 94 | function ok_position(node) { 95 | return !too_close_to_trees(node) && !outside_canvas(node.pos); 96 | } 97 | 98 | function create_neighbour(v, dist) { 99 | let r = p.random(p.TWO_PI); 100 | let x = v.x + p.cos(r) * (dist + 1); 101 | let y = v.y + p.sin(r) * (dist + 1); 102 | return p.createVector(x, y); 103 | } 104 | 105 | p.keyPressed = function() { 106 | if (p.keyCode === 80) { 107 | p.saveCanvas('roses', 'jpeg'); 108 | } 109 | }; 110 | }; 111 | 112 | new p5(sketch); 113 | -------------------------------------------------------------------------------- /growth3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Breadth-First Flower 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /growth3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let number_of_trees = 15; 3 | let trees = []; 4 | let radius = 400; 5 | let initial_boundary_size = 10; 6 | let number_of_tries = 10; 7 | let terminated = false; 8 | let colors; 9 | 10 | p.setup = function() { 11 | p.createCanvas(950,950); 12 | p.noStroke(); 13 | p.fill(255,100,90); 14 | p.background("#252525"); 15 | 16 | p.stroke(0); 17 | p.strokeWeight(2); 18 | colors = [ 19 | p.color("#ce3830"), 20 | p.color("#1c8b94"), 21 | p.color("#de980f"), 22 | p.color("#d8d8be"), 23 | p.color("#454545") 24 | ]; 25 | 26 | for (var i = 0; i < number_of_trees; i++) { 27 | let tree = [ 28 | { 29 | pos: p.createVector(p.width / 2 + p.random(-200,200), p.height / 2 + p.random(-200,200)), 30 | parent: 0, 31 | boundary: initial_boundary_size, 32 | exhausted: false 33 | } 34 | ]; 35 | trees.push(tree); 36 | } 37 | } 38 | 39 | p.draw = function() { 40 | if (!terminated) { 41 | terminated = grow_all(); 42 | trees.forEach(display); 43 | } 44 | } 45 | 46 | function grow_all () { 47 | return trees.map(grow).every((x)=>x); 48 | } 49 | 50 | function grow (tree) { 51 | //Breadth first 52 | for (var index = 0; index < tree.length; index++) { 53 | //Depth first 54 | //for (var index = tree.length-1; index >= 0; index--) { 55 | let current = tree[index]; 56 | if(!current.exhausted) { 57 | let u = create_neighbour(current.pos, current.boundary); 58 | 59 | for (var t = 0; t < number_of_tries; t++) { 60 | let new_node = { pos: u, parent: index, boundary: current.boundary * 0.95, exhausted: current.boundary <= 3 } 61 | if (ok_position(new_node)) { 62 | if (p.random() < .3) current.exhausted = true; 63 | tree.push(new_node); 64 | return false; 65 | } 66 | u = create_neighbour(current.pos, current.boundary); 67 | } 68 | current.exhausted = true; 69 | } 70 | } 71 | return true; 72 | } 73 | 74 | function display (tree, col) { 75 | let last_index = tree.length - 1; 76 | let v = tree[last_index]; 77 | let u = tree[v.parent]; 78 | 79 | p.stroke(colors[col % colors.length]); 80 | p.strokeWeight(.5 + v.boundary / 4); 81 | p.line(v.pos.x, v.pos.y, u.pos.x, u.pos.y); 82 | } 83 | 84 | function too_close_to_vertex (v,u) { 85 | return p5.Vector.dist(v.pos,u.pos) < p.max(v.boundary,u.boundary); 86 | } 87 | 88 | function too_close_to_trees (new_node) { 89 | return trees.some(function(tree) { 90 | return tree.some(function(t) { 91 | return too_close_to_vertex(new_node,t)}) 92 | }); 93 | } 94 | 95 | function outside_canvas (v) { 96 | return p.dist(v.x, v.y, p.width / 2, p.height / 2) > radius; 97 | } 98 | 99 | function ok_position (node) { 100 | return !too_close_to_trees(node) && !outside_canvas(node.pos); 101 | } 102 | 103 | function create_neighbour (v, dist) { 104 | let r = p.random(p.TWO_PI); 105 | let x = v.x + (p.cos(r) * (dist + 1)); 106 | let y = v.y + (p.sin(r) * (dist + 1)); 107 | return p.createVector(x,y); 108 | } 109 | 110 | p.keyPressed = function () { 111 | if (p.keyCode === 80) { 112 | p.saveCanvas("roses", "jpeg"); 113 | } 114 | } 115 | } 116 | 117 | new p5(sketch); 118 | -------------------------------------------------------------------------------- /growth4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Flower Grid 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /hexagon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Hexagon Patterns 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /horizon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Landslide 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /horizon/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let initial_size = 5; 3 | let initial_deviation = 250; 4 | let deviation = 100; 5 | 6 | let points; 7 | let current; 8 | 9 | p.setup = function() { 10 | p.createCanvas(1400, 900); 11 | p.noStroke(); 12 | p.colorMode(p.HSB); 13 | p.fill(0, 0, 0, 0.015); 14 | p.noLoop(); 15 | }; 16 | 17 | p.draw = function() { 18 | p.translate(p.width / 2, p.height / 2); 19 | init(); 20 | for (var i = 0; i < 180; i++) { 21 | current = update(); 22 | display(); 23 | } 24 | }; 25 | 26 | function init() { 27 | points = []; 28 | for (var i = 0; i < initial_size; i++) { 29 | points.push(p.createVector(i / (initial_size - 1) * p.width - p.width / 2, 200, p.random(-1, 1))); 30 | } 31 | for (let b = 0; b < 5; b++) { 32 | interpolate(points, initial_deviation); 33 | } 34 | } 35 | 36 | function update() { 37 | let c = deep_copy(points); 38 | for (let b = 0; b < 7; b++) { 39 | for (let i = 0; i < c.length; i++) { 40 | move_nearby(c[i], deviation); 41 | } 42 | } 43 | return c; 44 | } 45 | 46 | function display() { 47 | p.beginShape(); 48 | for (let i = 0; i < current.length; i++) { 49 | p.vertex(current[i].x, current[i].y); 50 | } 51 | p.vertex(p.width / 2, p.height / 2); 52 | p.vertex(-p.width / 2, p.height / 2); 53 | p.endShape(p.CLOSE); 54 | } 55 | 56 | function interpolate(points, sd) { 57 | for (var i = points.length - 1; i > 0; i--) { 58 | points.splice(i, 0, generate_midpoint(points[i - 1], points[i], sd)); 59 | } 60 | } 61 | 62 | function generate_midpoint(p1, p2, sd) { 63 | let p3 = p.createVector((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2 * 0.55 * p.random(0.1, 2.8)); 64 | move_nearby(p3, sd); 65 | return p3; 66 | } 67 | 68 | let move_nearby = function(pnt, sd) { 69 | pnt.x = p.randomGaussian(pnt.x, pnt.z * sd); 70 | pnt.y = p.randomGaussian(pnt.y, pnt.z * sd); 71 | }; 72 | 73 | let deep_copy = function(arr) { 74 | let narr = []; 75 | for (var i = 0; i < arr.length; i++) { 76 | narr.push(arr[i].copy()); 77 | } 78 | return narr; 79 | }; 80 | }; 81 | new p5(sketch); 82 | -------------------------------------------------------------------------------- /horizon2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Watercolor 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /horizon2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let initial_size = 5; 3 | let initial_deviation = 200; 4 | let deviation = 80; 5 | 6 | let points; 7 | let current; 8 | 9 | p.setup = function() { 10 | p.createCanvas(1000, 1000); 11 | p.noStroke(); 12 | p.colorMode(p.HSB); 13 | p.blendMode(p.MULTIPLY); 14 | p.noLoop(); 15 | 16 | } 17 | 18 | p.draw = function() { 19 | p.translate(p.width/2,p.height/2); 20 | init(); 21 | p.fill(p.random(360),80,60, .01); 22 | for (var i = 0; i < 80; i++) { 23 | current = update(); 24 | display(); 25 | } 26 | 27 | init(); 28 | p.rotate(p.PI); 29 | p.fill(p.random(360),80,60, .01); 30 | for (var i = 0; i < 50; i++) { 31 | current = update(); 32 | display(); 33 | } 34 | 35 | init(); 36 | p.rotate(p.PI / 2); 37 | p.fill(p.random(360),80,60, .01); 38 | for (var i = 0; i < 50; i++) { 39 | current = update(); 40 | display(); 41 | } 42 | 43 | } 44 | 45 | function init () { 46 | points = []; 47 | for (var i = 0; i < initial_size; i++) { 48 | points.push(p.createVector((i / (initial_size - 1)) * p.width - (p.width/2), 100, p.random(-1,1))); 49 | } 50 | for(let b = 0; b < 6; b++) { 51 | interpolate(points, initial_deviation); 52 | } 53 | } 54 | 55 | function update () { 56 | let c = deep_copy(points); 57 | for(let b = 0; b < 5; b++) { 58 | for (let i = 0; i < c.length; i++) { 59 | move_nearby(c[i], deviation); 60 | } 61 | } 62 | return c; 63 | } 64 | 65 | function display () { 66 | p.beginShape(); 67 | for (let i = 0; i < current.length; i++) { 68 | p.vertex(current[i].x, current[i].y); 69 | } 70 | p.vertex(p.width/2,p.height/2); 71 | p.vertex(-p.width/2,p.height/2); 72 | p.endShape(p.CLOSE); 73 | } 74 | 75 | function interpolate (points, sd) { 76 | for (var i = points.length-1; i > 0; i--) { 77 | points.splice(i, 0, generate_midpoint(points[i-1], points[i], sd)); 78 | } 79 | } 80 | 81 | function generate_midpoint (p1, p2, sd) { 82 | let p3 = p.createVector((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, ((p1.z + p2.z) / 2) * .55 * p.random(.5, 2.5)); 83 | move_nearby(p3, sd); 84 | return p3; 85 | } 86 | 87 | let move_nearby = function(pnt, sd) { 88 | pnt.x = p.randomGaussian(pnt.x, pnt.z * sd); 89 | pnt.y = p.randomGaussian(pnt.y, pnt.z * sd); 90 | } 91 | 92 | let deep_copy = function(arr) { 93 | let narr = []; 94 | for (var i = 0; i < arr.length; i++) { 95 | narr.push(arr[i].copy()); 96 | } 97 | return narr; 98 | } 99 | } 100 | new p5(sketch); -------------------------------------------------------------------------------- /horizon3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Landscape 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /horizon3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let initial_size = 5; 3 | let initial_deviation = 300; 4 | let deviation = 90; 5 | 6 | let points; 7 | let current; 8 | 9 | p.setup = function() { 10 | p.createCanvas(1500, 1000); 11 | p.background("#ffface"); 12 | p.noStroke(); 13 | p.colorMode(p.HSB); 14 | p.blendMode(p.DARKEST); 15 | p.noLoop(); 16 | 17 | } 18 | 19 | p.draw = function() { 20 | for (var h = -100; h < p.height; h+=250) { 21 | init(h); 22 | p.fill(p.random(360),100,80, .01); 23 | for (var i = 0; i < 35; i++) { 24 | current = update(); 25 | display(); 26 | } 27 | } 28 | } 29 | 30 | function init (ypos) { 31 | points = []; 32 | for (var i = 0; i < initial_size; i++) { 33 | points.push(p.createVector((i / (initial_size - 1)) * p.width, ypos, p.random(-1,1))); 34 | } 35 | for(let b = 0; b < 6; b++) { 36 | interpolate(points, initial_deviation); 37 | } 38 | } 39 | 40 | function update () { 41 | let c = deep_copy(points); 42 | for(let b = 0; b < 5; b++) { 43 | for (let i = 0; i < c.length; i++) { 44 | move_nearby(c[i], deviation); 45 | } 46 | } 47 | return c; 48 | } 49 | 50 | function display () { 51 | p.beginShape(); 52 | for (let i = 0; i < current.length; i++) { 53 | p.vertex(current[i].x, current[i].y); 54 | } 55 | p.vertex(p.width,p.height); 56 | p.vertex(0,p.height); 57 | p.endShape(p.CLOSE); 58 | } 59 | 60 | function interpolate (points, sd) { 61 | for (var i = points.length-1; i > 0; i--) { 62 | points.splice(i, 0, generate_midpoint(points[i-1], points[i], sd)); 63 | } 64 | } 65 | 66 | function generate_midpoint (p1, p2, sd) { 67 | let p3 = p.createVector((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, ((p1.z + p2.z) / 2) * .45 * p.random(.1, 3.5)); 68 | move_nearby(p3, sd); 69 | return p3; 70 | } 71 | 72 | let move_nearby = function(pnt, sd) { 73 | pnt.x = p.randomGaussian(pnt.x, pnt.z * sd); 74 | pnt.y = p.randomGaussian(pnt.y, pnt.z * sd); 75 | } 76 | 77 | let deep_copy = function(arr) { 78 | let narr = []; 79 | for (var i = 0; i < arr.length; i++) { 80 | narr.push(arr[i].copy()); 81 | } 82 | return narr; 83 | } 84 | 85 | p.keyPressed = function () { 86 | if (p.keyCode === 80) { 87 | p.saveCanvas("foggy", "jpeg"); 88 | } 89 | } 90 | } 91 | new p5(sketch); -------------------------------------------------------------------------------- /horizon4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Landscape PRINT 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /horizon_generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Landscape PRINT 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /horizon_generator/style.css: -------------------------------------------------------------------------------- 1 | #controller { 2 | position: relative; 3 | top: -240px; 4 | margin: 20px; 5 | } 6 | 7 | #controller > div { 8 | vertical-align: bottom; 9 | display: inline-block; 10 | width: 200px; 11 | margin: 5px; 12 | padding: 15px; 13 | border: 1px solid white; 14 | color: #fff; 15 | } 16 | 17 | #controller input[type='number'] { 18 | display: inline-block; 19 | border: none; 20 | padding: 5px; 21 | width: 80px; 22 | margin: 3px; 23 | background: none; 24 | color: #fff; 25 | border: 1px solid #fff; 26 | } 27 | 28 | #controller button { 29 | width: 100%; 30 | height: 30px; 31 | border: none; 32 | background: #fff; 33 | margin-bottom: 10px; 34 | cursor: pointer; 35 | } 36 | -------------------------------------------------------------------------------- /hot.js: -------------------------------------------------------------------------------- 1 | const acorn = require('acorn'); 2 | 3 | /** 4 | * webpack loader for hot patching top level functions on file change 5 | * inspired by https://github.com/jlongster/monkey-hot-loader 6 | */ 7 | module.exports = function (source) { 8 | if (this.cacheable) { 9 | this.cacheable(); 10 | } 11 | 12 | const ast = acorn.parse(source); 13 | const names = JSON.stringify( 14 | ast.body 15 | .filter(node => node.type == 'FunctionDeclaration') 16 | .map(node => node.id.name)); 17 | 18 | const s = `${source}; 19 | var hot = module.hot; 20 | if (hot) { 21 | hot.accept(err => console.log('error', err)); 22 | 23 | var keep = (bindings, evalstr) => 24 | hot.dispose(function (data) { 25 | data.bindings = bindings; 26 | data.evalstr = evalstr; 27 | }); 28 | 29 | if (!hot.data) { 30 | var bindings = {}, exports = module.exports; 31 | ${names}.forEach(function (name) { 32 | var f = eval(name); 33 | var proxied = new Proxy(f, { 34 | apply: function (f, self, args) { 35 | return (bindings[name] || f).apply(self, args); 36 | } 37 | }); 38 | eval(name + " = proxied;"); 39 | if (exports[name]) exports[name] = proxied; 40 | }); 41 | keep(bindings, str => eval(str)); 42 | } 43 | else { 44 | var data = hot.data, bindings = data.bindings; 45 | ${names}.forEach(function (name) { 46 | bindings[name] = data.evalstr( 47 | '(' + 48 | eval(name).toString() 49 | .replace(/^function \\w+\\(/, 50 | 'function (') + 51 | ')'); 52 | }); 53 | keep(bindings, data.evalstr); 54 | } 55 | }`; 56 | 57 | this.callback(null, s); 58 | }; 59 | -------------------------------------------------------------------------------- /hypo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Hypotrochoids 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /hypo/sketch.js: -------------------------------------------------------------------------------- 1 | import * as Elems from '../utils/elementsjs/index.js'; 2 | 3 | let sketch = function(p) { 4 | let THE_SEED; 5 | 6 | let a_pos = [p.random(300, 500), p.random(300, 500)]; 7 | let a_radius = p.random(20, 50); 8 | let a_angle = p.random(Math.PI * 2); 9 | let a_speed = 0.1; 10 | 11 | let ap_radius = p.random(5, 20); 12 | let ap_angle = p.random(Math.PI * 2); 13 | let ap_speed = -0.2; 14 | 15 | let b_pos = [400, 400]; 16 | let b_radius = p.random(50, 90); 17 | let b_angle = p.random(Math.PI * 2); 18 | let b_speed = 0.007; 19 | 20 | let bp_radius = p.random(5, 20); 21 | let bp_angle = p.random(Math.PI * 2); 22 | let bp_speed = 0.2; 23 | 24 | let stick_length = 200; 25 | 26 | let a_pin; 27 | let b_pin; 28 | let ap_pin; 29 | let bp_pin; 30 | 31 | let c_pin, c_pin_old; 32 | 33 | p.setup = function() { 34 | p.createCanvas(800, 800); 35 | THE_SEED = p.floor(p.random(9999999)); 36 | p.randomSeed(THE_SEED); 37 | p.noFill(); 38 | p.stroke(0, 150); 39 | p.background('#e0e1db'); 40 | 41 | a_pin = Elems.point_at_distance_and_angle(a_pos, a_radius, a_angle); 42 | b_pin = Elems.point_at_distance_and_angle(b_pos, b_radius, b_angle); 43 | ap_pin = Elems.point_at_distance_and_angle(a_pin, ap_radius, ap_angle); 44 | bp_pin = Elems.point_at_distance_and_angle(b_pin, bp_radius, bp_angle); 45 | 46 | c_pin = Elems.point_at_distance_towards_direction(ap_pin, stick_length, bp_pin); 47 | update(); 48 | }; 49 | 50 | p.draw = function() { 51 | for (let i = 0; i < 80; i++) { 52 | update(); 53 | //display_apparatus(); 54 | display_ink(); 55 | } 56 | }; 57 | 58 | function update() { 59 | a_angle += a_speed / 30; 60 | b_angle += b_speed / 30; 61 | ap_angle += ap_speed / 30; 62 | bp_angle += bp_speed / 30; 63 | 64 | a_pin = Elems.point_at_distance_and_angle(a_pos, a_radius, a_angle); 65 | b_pin = Elems.point_at_distance_and_angle(b_pos, b_radius, b_angle); 66 | ap_pin = Elems.point_at_distance_and_angle(a_pin, ap_radius, ap_angle); 67 | bp_pin = Elems.point_at_distance_and_angle(b_pin, bp_radius, bp_angle); 68 | 69 | c_pin_old = [c_pin[0], c_pin[1]]; 70 | c_pin = Elems.point_at_distance_towards_direction(ap_pin, stick_length, bp_pin); 71 | } 72 | function display_apparatus() { 73 | p.background(); 74 | p.stroke(255, 0, 0); 75 | p.ellipse(a_pos[0], a_pos[1], a_radius * 2, a_radius * 2); 76 | p.ellipse(b_pos[0], b_pos[1], b_radius * 2, b_radius * 2); 77 | p.stroke(0); 78 | p.ellipse(ap_pin[0], ap_pin[1], 20); 79 | p.ellipse(bp_pin[0], bp_pin[1], 20); 80 | p.ellipse(c_pin[0], c_pin[1], 20); 81 | p.line(a_pin[0], a_pin[1], c_pin[0], c_pin[1]); 82 | } 83 | 84 | function display_ink() { 85 | if (Elems.distance_between_points(c_pin_old, c_pin) < 40) p.line(c_pin_old[0], c_pin_old[1], c_pin[0], c_pin[1]); 86 | } 87 | 88 | p.keyPressed = function() { 89 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 90 | }; 91 | }; 92 | new p5(sketch); 93 | -------------------------------------------------------------------------------- /hypo2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Hypotrochoids 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /hypo2/sketch.js: -------------------------------------------------------------------------------- 1 | import * as Elems from '../utils/elementsjs/index.js'; 2 | 3 | let sketch = function(p) { 4 | let THE_SEED; 5 | 6 | let sq = [[320, 320], [480, 320], [480, 480], [320, 480], [320, 320]]; 7 | let sq_init = Math.random(); 8 | let sq_speed = 0.079; 9 | let sq_pos = sq_init; 10 | 11 | let tr = [[400, 320], [450, 480], [350, 480], [400, 320]]; 12 | let tr_init = Math.random(); 13 | let tr_speed = 0.079; 14 | let tr_pos = tr_init; 15 | 16 | let b_pos = [p.random(350, 450), p.random(350, 540)]; 17 | let b_radius = p.random(50, 90); 18 | let b_angle = p.random(Math.PI * 2); 19 | let b_speed = -0.102; 20 | 21 | let stick_length = 200; 22 | 23 | let a_pin; 24 | let b_pin; 25 | 26 | let sq_pin; 27 | let tr_pin; 28 | 29 | let c_pin, c_pin_old; 30 | 31 | p.setup = function() { 32 | p.createCanvas(800, 800); 33 | THE_SEED = p.floor(p.random(9999999)); 34 | p.randomSeed(THE_SEED); 35 | p.noFill(); 36 | p.stroke(0, 150); 37 | p.background('#e0e1db'); 38 | 39 | b_pin = Elems.point_at_distance_and_angle(b_pos, b_radius, b_angle); 40 | sq_pin = Elems.on_path(sq, sq_pos); 41 | tr_pin = Elems.on_path(tr, tr_pos); 42 | 43 | c_pin = Elems.point_at_distance_towards_direction(sq_pin, stick_length, b_pin); 44 | update(); 45 | }; 46 | 47 | p.draw = function() { 48 | for (let i = 0; i < 50; i++) { 49 | update(); 50 | //display_apparatus(); 51 | display_ink(); 52 | } 53 | }; 54 | 55 | function update() { 56 | b_angle += b_speed * p.TWO_PI / 30; 57 | sq_pos += sq_speed / 30; 58 | tr_pos += tr_speed / 30; 59 | 60 | b_pin = Elems.point_at_distance_and_angle(b_pos, b_radius, b_angle); 61 | sq_pin = Elems.on_path(sq, sq_pos); 62 | tr_pin = Elems.on_path(tr, tr_pos); 63 | 64 | c_pin_old = [c_pin[0], c_pin[1]]; 65 | c_pin = Elems.point_at_distance_towards_direction(tr_pin, stick_length, b_pin); 66 | } 67 | function display_apparatus() { 68 | p.background('#e0e1db'); 69 | p.stroke(255, 0, 0); 70 | //p.ellipse(b_pos[0], b_pos[1], b_radius * 2, b_radius * 2); 71 | display_shape(tr); 72 | display_shape(sq); 73 | p.stroke(0); 74 | p.ellipse(c_pin[0], c_pin[1], 20); 75 | p.line(sq_pin[0], sq_pin[1], c_pin[0], c_pin[1]); 76 | } 77 | 78 | function display_shape(points) { 79 | for (let i = 1; i < points.length; i++) { 80 | p.stroke(255, 0, 0); 81 | p.line(points[i - 1][0], points[i - 1][1], points[i][0], points[i][1]); 82 | } 83 | } 84 | 85 | function display_ink() { 86 | if (Elems.distance_between_points(c_pin_old, c_pin) < 40) p.line(c_pin_old[0], c_pin_old[1], c_pin[0], c_pin[1]); 87 | } 88 | 89 | p.keyPressed = function() { 90 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 91 | }; 92 | }; 93 | new p5(sketch); 94 | -------------------------------------------------------------------------------- /hypo3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Hypotrochoids 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /hypo4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Hypotrochoids 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /interpolate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Color Interpolatation 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /interpolate/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | 4 | let cdimx = 2; 5 | let cdimy = 3; 6 | let cgrid; 7 | 8 | let dimx = 200; 9 | let dimy = 200; 10 | 11 | let pad = 150; 12 | 13 | let tick = 1; 14 | 15 | p.setup = function() { 16 | p.createCanvas(1000, 1000); 17 | THE_SEED = p.floor(p.random(9999999)); 18 | p.randomSeed(THE_SEED); 19 | p.noStroke(); 20 | p.noLoop(); 21 | //p.frameRate(1); 22 | 23 | cgrid = []; 24 | for (var i = 0; i < cdimy; i++) { 25 | crow = []; 26 | for (var j = 0; j < cdimx; j++) { 27 | crow.push(p.color(p.random(255), p.random(255), p.random(255), p.random(255))); 28 | } 29 | cgrid.push(crow); 30 | } 31 | }; 32 | 33 | p.draw = function() { 34 | p.background('#222'); 35 | for (var y = 0; y < dimy; y++) { 36 | for (var x = 0; x < dimx; x++) { 37 | let px = x / dimx * (cdimx - 1); 38 | let py = y / dimy * (cdimy - 1); 39 | 40 | let px0 = p.floor(px); 41 | let py0 = p.floor(py); 42 | 43 | let sx = p.map(px, px0, px0 + 1, 0, 1); 44 | let sy = p.map(py, py0, py0 + 1, 0, 1); 45 | 46 | let cu = p.lerpColor(cgrid[py0][px0], cgrid[py0][px0 + 1], sigmoid(sx)); 47 | let cl = p.lerpColor(cgrid[py0 + 1][px0], cgrid[py0 + 1][px0 + 1], sigmoid(sx)); 48 | let c = p.lerpColor(cu, cl, sigmoid(sy)); 49 | p.fill(c); 50 | let w = (p.width - pad * 2) / dimx; 51 | let h = (p.height - pad * 2) / dimy; 52 | p.rect(pad + w * x, pad + h * y, w, h); 53 | } 54 | } 55 | tick++; 56 | }; 57 | 58 | function sigmoid(x) { 59 | //return p.sqrt(2) * x / p.sqrt(1 + x * x); 60 | 61 | return 1.1 / (1 + p.exp(-6 * (x - 0.5))) - 0.05; 62 | } 63 | 64 | p.keyPressed = function() { 65 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 66 | }; 67 | }; 68 | new p5(sketch); 69 | -------------------------------------------------------------------------------- /lab/arab/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Arab Calligraphy 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /lab/arab/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let pattern_height = 10; 3 | let pattern_width = 10; 4 | let atom_dim = 20; 5 | let space_dim = 25; 6 | let density = .5; 7 | 8 | let horizontals = []; 9 | let verticals = []; 10 | 11 | let density_slider; 12 | let width_slider, height_slider; 13 | let atom_slider, space_slider; 14 | 15 | p.setup = function() { 16 | let canvas = p.createCanvas(800,800); 17 | canvas.parent("sketch"); 18 | p.fill(0); 19 | p.noStroke(); 20 | p.frameRate(1); 21 | //p.noLoop(); 22 | 23 | setup_controllers(); 24 | } 25 | 26 | p.draw = function() { 27 | update_variables(); 28 | p.clear(); 29 | p.translate(p.width/2 - (atom_dim+space_dim)*pattern_width /2, p.height/2 - (atom_dim+space_dim)*pattern_height/2); 30 | for (let y = 0; y < pattern_height; y++) { 31 | p.push(); 32 | for (let x = 0; x < pattern_width; x++) { 33 | p.rect(0,0,atom_dim,atom_dim); 34 | if (x < pattern_width-1 && p.random() < density) 35 | p.rect(0, 0, atom_dim + space_dim, atom_dim); 36 | if (y < pattern_height-1 && p.random() < density) 37 | p.rect(0, 0, atom_dim, space_dim + atom_dim); 38 | 39 | p.translate(atom_dim + space_dim,0); 40 | } 41 | p.pop(); 42 | p.translate(0, atom_dim + space_dim); 43 | } 44 | } 45 | 46 | function setup_controllers () { 47 | let density_container = p.createDiv("density ").parent("ctrl"); 48 | let width_container = p.createDiv("width ").parent("ctrl"); 49 | let height_container = p.createDiv("height ").parent("ctrl"); 50 | let atom_container = p.createDiv("square size ").parent("ctrl"); 51 | let space_container = p.createDiv("space size ").parent("ctrl"); 52 | 53 | density_slider = p.createSlider(0, 100, 50).parent(density_container); 54 | width_slider = p.createSlider(3, 15, 10).parent(width_container); 55 | height_slider = p.createSlider(3, 15, 10).parent(height_container); 56 | atom_slider = p.createSlider(1, 30, 20).parent(atom_container); 57 | space_slider = p.createSlider(1, 30, 25).parent(space_container); 58 | 59 | update_variables(); 60 | } 61 | 62 | function update_variables () { 63 | density = p.constrain(density_slider.value()/100, 0, 1); 64 | pattern_width = p.constrain(width_slider.value(), 3, 12); 65 | pattern_height = p.constrain(height_slider.value(), 3, 12); 66 | atom_dim = p.constrain(atom_slider.value(), 1, 30); 67 | space_dim = p.constrain(space_slider.value(), 1, 30); 68 | } 69 | } 70 | 71 | new p5(sketch); 72 | -------------------------------------------------------------------------------- /lab/blocks3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Symmetrical Block Layouts WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/blocks3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let xdim = 10; 3 | let ydim = 8; 4 | let size = 20; 5 | 6 | let grid; 7 | let colors; 8 | 9 | p.setup = function() { 10 | p.createCanvas(1200, 850); 11 | p.noLoop(); 12 | p.noFill(); 13 | 14 | colors = [p.color(231, 94, 96), p.color(249, 190, 82), p.color(89, 180, 180), p.color(197, 149, 197)]; 15 | }; 16 | 17 | p.draw = function() { 18 | p.clear(); 19 | //p.translate(200,200); 20 | generate_grid(xdim, ydim); 21 | 22 | p.strokeWeight(6); 23 | p.stroke(89, 180, 180); 24 | 25 | display(0, 0, 9, 9); 26 | p.translate(360, 0); 27 | p.scale(-1, 1); 28 | display(0, 0, 9, 9); 29 | p.translate(0, 360); 30 | p.scale(1, -1); 31 | display(0, 0, 9, 9); 32 | p.translate(360, 0); 33 | p.scale(-1, 1); 34 | display(0, 0, 9, 9); 35 | 36 | p.strokeWeight(2); 37 | p.stroke(20, 39, 49); 38 | display(0, 0, 9, 9); 39 | p.translate(360, 0); 40 | p.scale(-1, 1); 41 | display(0, 0, 9, 9); 42 | p.translate(0, 360); 43 | p.scale(1, -1); 44 | display(0, 0, 9, 9); 45 | p.translate(360, 0); 46 | p.scale(-1, 1); 47 | display(0, 0, 9, 9); 48 | 49 | p.translate(400, 0); 50 | p.scale(-1, 1); 51 | }; 52 | 53 | function generate_grid(xd, yd) { 54 | grid = new Array(yd + 1); 55 | for (var i = 0; i < grid.length; i++) { 56 | grid[i] = new Array(xd + 1); 57 | for (var j = 0; j < grid[i].length; j++) { 58 | if (i == 0 || j == 0) grid[i][j] = { h: false, v: false }; 59 | else if (i == 1 && j == 1) grid[i][j] = { h: true, v: true }; 60 | else grid[i][j] = generate_cell(grid[i][j - 1].h, grid[i - 1][j].v); 61 | } 62 | } 63 | } 64 | 65 | function generate_cell(west, north) { 66 | if (!west && !north) return { h: false, v: false }; 67 | if (!west) return { h: flip_coin(), v: true }; 68 | if (!north) return { h: true, v: flip_coin() }; 69 | let h = flip_coin(); 70 | let v = h ? flip_coin() : true; 71 | return { h: h, v: v }; 72 | } 73 | 74 | function display(x1, y1, sx, sy) { 75 | //p.rect(size,size, (sx-1) * size, (sy-1) * size); 76 | for (var i = 1; i < sy; i++) { 77 | for (var j = 1; j < sx; j++) { 78 | if (grid[y1 + i][x1 + j].h) p.line(j * size, i * size, (j + 1) * size, i * size); 79 | if (grid[y1 + i][x1 + j].v) p.line(j * size, i * size, j * size, (i + 1) * size); 80 | } 81 | } 82 | } 83 | 84 | function flip_coin() { 85 | return p.random() < 0.8 ? false : true; 86 | } 87 | 88 | function dist(n, m) { 89 | return p.max(n - m, m - n); 90 | } 91 | }; 92 | 93 | new p5(sketch); 94 | -------------------------------------------------------------------------------- /lab/cross-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Cross Grid 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/cross-grid/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let tick; 3 | 4 | let cross_dim = 6; 5 | let grid_size = 30; 6 | let cell_dim = 22; 7 | let nheight = 1.6; 8 | let nzoom = 20; 9 | 10 | p.setup = function() { 11 | p.createCanvas(1000, 1000); 12 | p.stroke(255); 13 | tick = 0; 14 | }; 15 | 16 | p.draw = function() { 17 | p.background('#f44'); 18 | p.translate(p.width / 2, p.height / 2); 19 | draw_grid(); 20 | tick += 0.005; 21 | }; 22 | 23 | function draw_grid() { 24 | for (let j = 0; j < grid_size; j++) { 25 | for (let i = 0; i < grid_size; i++) { 26 | p.push(); 27 | p.scale(p.map(p.noise(i / nzoom + tick, j / nzoom), 0, 1, 1 / nheight, nheight)); 28 | draw_cross((i - grid_size / 2) * cell_dim, (j - grid_size / 2) * cell_dim); 29 | p.pop(); 30 | } 31 | } 32 | } 33 | 34 | function draw_cross(x, y) { 35 | p.push(); 36 | p.translate(x, y); 37 | p.line(-cross_dim / 2, 0, cross_dim / 2, 0); 38 | p.line(0, -cross_dim / 2, 0, cross_dim / 2); 39 | p.pop(); 40 | } 41 | }; 42 | new p5(sketch); 43 | -------------------------------------------------------------------------------- /lab/fall/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Fall WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/fall/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | 3 | let rings = 90; 4 | let dim_init = 0; 5 | let dim_delta = 20; 6 | 7 | let chaos_init = 0; 8 | let chaos_delta = .2; 9 | let chaos_mag = 100; 10 | 11 | let colors = []; 12 | 13 | let ox = p.random(10000); 14 | let oy = p.random(10000); 15 | 16 | p.setup = function(){ 17 | p.createCanvas(800, 800); 18 | p.colorMode(p.HSB); 19 | //p.blendMode(p.OVERLAY); 20 | p.strokeWeight(58); 21 | p.smooth(); 22 | p.noFill(); 23 | p.noLoop(); 24 | 25 | colors.push(p.random(360)); 26 | colors.push(p.random(360)); 27 | colors.push(p.random(360)); 28 | 29 | } 30 | 31 | p.draw = function() { 32 | p.clear(); 33 | p.translate(-50, -50); 34 | display(); 35 | } 36 | 37 | function display(){ 38 | for(let i = 0; i < rings; i ++){ 39 | p.stroke(colors[p.floor(p.random(colors.length))],70,85,.9); 40 | p.beginShape(); 41 | for(let angle = 0; angle < 900; angle++){ 42 | let radius = (chaos_mag * p.noise(angle /300, chaos_delta * i)) + (dim_delta * i); 43 | p.vertex(angle, radius); 44 | } 45 | p.endShape(); 46 | } 47 | } 48 | 49 | function getNoise (radian, dim){ 50 | let r = radian % p.TWO_PI; 51 | if(r < 0.0){r += p.TWO_PI;} 52 | return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim); 53 | } 54 | } 55 | 56 | new p5(sketch); 57 | -------------------------------------------------------------------------------- /lab/gaussian2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Splatter 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/gaussian2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let n = 10; 3 | let r = 300; 4 | 5 | let points; 6 | let current; 7 | 8 | p.setup = function() { 9 | var canvas = p.createCanvas(1400, 900); 10 | p.fill(0, 22, 65, 6); 11 | p.noStroke(); 12 | //p.frameRate(2); 13 | p.colorMode(p.HSB); 14 | p.blendMode(p.SCREEN); 15 | p.noLoop(); 16 | 17 | current = []; 18 | points = init(n, r, points); 19 | }; 20 | 21 | p.draw = function() { 22 | p.background('#0a0a0a'); 23 | for (var i = 0; i < 5; i++) { 24 | p.push(); 25 | p.translate(p.randomGaussian(p.width / 2, 350), p.randomGaussian(p.height / 2, 250)); 26 | p.fill(p.random(360), 100, 100, 0.012); 27 | points = init(n, p.random(100, 500), points); 28 | run(current, points); 29 | p.pop(); 30 | } 31 | }; 32 | 33 | function init(n, r, points) { 34 | points = []; 35 | for (let i = 0; i < n; i++) { 36 | let rads = i / n * p.TWO_PI; 37 | let vec = p.createVector(p.cos(rads) * r, p.sin(rads) * r, p.random(1.2)); 38 | move_nearby(vec, 100); 39 | points.push(vec); 40 | } 41 | for (let b = 0; b < 5; b++) { 42 | interpolate(points); 43 | } 44 | return points; 45 | } 46 | 47 | function run(current, points) { 48 | for (var i = 0; i < 60; i++) { 49 | current = update(current, points); 50 | display(current); 51 | } 52 | } 53 | 54 | function update(current, points) { 55 | current = deep_copy(points); 56 | for (let b = 0; b < 5; b++) { 57 | for (let i = 0; i < current.length; i++) { 58 | move_nearby(current[i], 100); 59 | } 60 | } 61 | return current; 62 | } 63 | 64 | function interpolate(points) { 65 | for (var i = points.length - 1; i > 0; i--) { 66 | points.splice(i, 0, generate_midpoint(points[i - 1], points[i])); 67 | } 68 | points.splice(0, 0, generate_midpoint(points[points.length - 1], points[0])); 69 | } 70 | 71 | function generate_midpoint(p1, p2) { 72 | let p3 = p.createVector((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2 * 0.7 * p.random(0.3, 1.8)); 73 | move_nearby(p3, 100); 74 | return p3; 75 | } 76 | 77 | let move_nearby = function(pnt, sd) { 78 | pnt.x = p.randomGaussian(pnt.x, pnt.z * sd); 79 | pnt.y = p.randomGaussian(pnt.y, pnt.z * sd); 80 | }; 81 | 82 | function display(current) { 83 | //p.clear(); 84 | p.beginShape(); 85 | for (let i = 0; i < current.length; i++) { 86 | p.vertex(current[i].x, current[i].y); 87 | } 88 | p.endShape(p.CLOSE); 89 | } 90 | 91 | let deep_copy = function(arr) { 92 | let narr = []; 93 | for (var i = 0; i < arr.length; i++) { 94 | narr.push(arr[i].copy()); 95 | } 96 | return narr; 97 | }; 98 | }; 99 | 100 | new p5(sketch); 101 | -------------------------------------------------------------------------------- /lab/gradient/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gradient 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/gradient/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | var resolution = 10; 3 | var gradient_collection = []; 4 | 5 | p.setup = function() { 6 | p.createCanvas(800, 800); 7 | p.colorMode(p.HSB); 8 | p.noLoop(); 9 | p.noStroke(); 10 | }; 11 | p.draw = function() { 12 | p.scale(resolution); 13 | make_gradient(150, 250, 10, true, p.DARKEST); 14 | make_gradient(0, 50, 10, true, p.DARKEST); 15 | }; 16 | 17 | function make_gradient(color_from, color_to, zoom, transparent, blend_mode) { 18 | for (var j = 0; j < p.height; j++) { 19 | for (var i = 0; i < p.width; i++) { 20 | //p.blend_mode(blend_mode); 21 | let value = p.noise(i / zoom, j / zoom); 22 | if (transparent) p.fill(p.map(value, 0, 1, color_from, color_to), 100, 100, value); 23 | else p.fill(p.map(value, 0, 1, color_from, color_to), 100, 100, 1); 24 | p.rect(i, j, 1, 1); 25 | } 26 | } 27 | } 28 | }; 29 | new p5(sketch); 30 | -------------------------------------------------------------------------------- /lab/growth5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Growth WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/growth5/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let number_of_trees = 45; 3 | let columns = 9; 4 | let trees = []; 5 | let radius = 400; 6 | let initial_boundary_size = 6; 7 | let number_of_tries = 7; 8 | let terminated = false; 9 | let colors; 10 | 11 | p.setup = function() { 12 | p.createCanvas(1000, 1000); 13 | p.noStroke(); 14 | p.fill(255, 100, 90); 15 | p.background('#252525'); 16 | 17 | p.stroke(0); 18 | p.strokeWeight(1); 19 | colors = [p.color('#ce3830'), p.color('#1c8b94'), p.color('#de980f'), p.color('#d8d8be'), p.color('#454545')]; 20 | 21 | for (var i = 0; i < number_of_trees; i++) { 22 | let tree = [ 23 | { 24 | pos: p.createVector( 25 | (i % columns + 0.5) * (p.width / columns), 26 | p.floor(i / columns + 1) * (p.height / columns) 27 | ), 28 | dir: -p.PI / 2, 29 | parent: 0, 30 | boundary: initial_boundary_size, 31 | exhausted: false 32 | } 33 | ]; 34 | trees.push(tree); 35 | } 36 | }; 37 | 38 | p.draw = function() { 39 | if (!terminated) { 40 | terminated = grow_all(); 41 | trees.forEach(display); 42 | } 43 | }; 44 | 45 | function grow_all() { 46 | return trees.map(grow).every(x => x); 47 | } 48 | 49 | function grow(tree) { 50 | //Breadth first 51 | for (var index = 0; index < tree.length; index++) { 52 | //Depth first 53 | //for (var index = tree.length-1; index >= 0; index--) { 54 | let current = tree[index]; 55 | if (!current.exhausted) { 56 | let dir = p.randomGaussian(current.dir - 0.5, p.PI / 5); 57 | let u = create_neighbour(current.pos, dir, current.boundary); 58 | 59 | for (var t = 0; t < number_of_tries; t++) { 60 | let new_node = { 61 | pos: u, 62 | dir: dir, 63 | parent: index, 64 | boundary: current.boundary, 65 | exhausted: current.boundary <= 3 66 | }; 67 | if (ok_position(new_node)) { 68 | tree.push(new_node); 69 | return false; 70 | } 71 | dir = dir = p.randomGaussian(current.dir - 0.5, p.PI / 5); 72 | u = create_neighbour(current.pos, current.dir, current.boundary); 73 | } 74 | current.exhausted = true; 75 | } 76 | } 77 | return true; 78 | } 79 | 80 | function display(tree, col) { 81 | let last_index = tree.length - 1; 82 | let v = tree[last_index]; 83 | let u = tree[v.parent]; 84 | 85 | p.stroke(colors[col % colors.length]); 86 | p.line(v.pos.x, v.pos.y, u.pos.x, u.pos.y); 87 | } 88 | 89 | function too_close_to_vertex(v, u) { 90 | return p5.Vector.dist(v.pos, u.pos) < p.max(v.boundary, u.boundary); 91 | } 92 | 93 | function too_close_to_trees(new_node) { 94 | return trees.some(function(tree) { 95 | return tree.some(function(t) { 96 | return too_close_to_vertex(new_node, t); 97 | }); 98 | }); 99 | } 100 | function inside_canvas(v) { 101 | return v.x > 0 && v.x < p.width && v.y > 0 && v.y < p.height; 102 | } 103 | 104 | function ok_position(node) { 105 | return !too_close_to_trees(node) && inside_canvas(node.pos); 106 | } 107 | 108 | function create_neighbour(v, dir, dist) { 109 | let x = v.x + p.cos(dir) * (dist + 1); 110 | let y = v.y + p.sin(dir) * (dist + 1); 111 | return p.createVector(x, y); 112 | } 113 | 114 | p.keyPressed = function() { 115 | if (p.keyCode === 80) { 116 | p.saveCanvas('roses', 'jpeg'); 117 | } 118 | }; 119 | }; 120 | 121 | new p5(sketch); 122 | -------------------------------------------------------------------------------- /lab/horizon_line/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Gaussian Lines WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/horizon_line/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let initial_size = 5; 3 | let initial_deviation = 700; 4 | let deviation = 120; 5 | let number_of_interpolations = 5; 6 | 7 | let points; 8 | let current; 9 | 10 | p.setup = function() { 11 | p.createCanvas(2000, 1200); 12 | //p.background("#111"); 13 | p.noFill(); 14 | p.colorMode(p.HSB); 15 | p.blendMode(p.SOFT_LIGHT); 16 | p.strokeWeight(2); 17 | p.noLoop(); 18 | 19 | } 20 | 21 | p.draw = function() { 22 | for (var h = -100; h < p.height; h+=250) { 23 | init(p.height/2); 24 | p.stroke(p.random(160)+ 150,100,80, .005); 25 | for (var i = 0; i < 100; i++) { 26 | current = update(); 27 | display(); 28 | } 29 | } 30 | } 31 | 32 | function init (ypos) { 33 | points = []; 34 | for (var i = 0; i < initial_size; i++) { 35 | points.push(p.createVector((i / (initial_size - 1)) * p.width, ypos, 0.1)); 36 | } 37 | for(let b = 0; b < number_of_interpolations; b++) { 38 | interpolate(points, initial_deviation); 39 | } 40 | } 41 | 42 | function update () { 43 | let c = deep_copy(points); 44 | for(let b = 0; b < 8; b++) { 45 | for (let i = 0; i < c.length; i++) { 46 | move_nearby(c[i], deviation); 47 | } 48 | } 49 | return c; 50 | } 51 | 52 | function display () { 53 | p.beginShape(); 54 | p.vertex(0, current[0].y); 55 | for (let i = 0; i < current.length; i++) { 56 | p.vertex(current[i].x, current[i].y); 57 | } 58 | p.vertex(p.width, current[current.length-1].y); 59 | p.vertex(p.width,p.height); 60 | p.vertex(0,p.height); 61 | p.endShape(p.CLOSE); 62 | } 63 | 64 | function interpolate (points, sd) { 65 | for (var i = points.length-1; i > 0; i--) { 66 | points.splice(i, 0, generate_midpoint(points[i-1], points[i], sd)); 67 | } 68 | } 69 | 70 | function generate_midpoint (p1, p2, sd) { 71 | let p3 = p.createVector((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, ((p1.z + p2.z) / 2) * .3 * p.random(.1, 3.5)); 72 | move_nearby(p3, sd); 73 | return p3; 74 | } 75 | 76 | let move_nearby = function(pnt, sd) { 77 | pnt.x = p.randomGaussian(pnt.x, pnt.z * sd); 78 | pnt.y = p.randomGaussian(pnt.y, pnt.z * sd); 79 | } 80 | 81 | let deep_copy = function(arr) { 82 | let narr = []; 83 | for (var i = 0; i < arr.length; i++) { 84 | narr.push(arr[i].copy()); 85 | } 86 | return narr; 87 | } 88 | 89 | p.keyPressed = function () { 90 | if (p.keyCode === 80) { 91 | p.saveCanvas("landslide", "jpeg"); 92 | } 93 | } 94 | } 95 | new p5(sketch); -------------------------------------------------------------------------------- /lab/particle_network/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Particle Networks WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/randomness/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Randomness WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/randomness/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let psize = 20; 3 | let tick = 0; 4 | 5 | p.setup = function() { 6 | p.createCanvas(800,800); 7 | p.noStroke(); 8 | p.colorMode(p.HSB); 9 | } 10 | 11 | p.draw = function() { 12 | tick++ 13 | p.clear(); 14 | 15 | for (var i = 0; i < p.width / psize; i++) { 16 | for (var j = 0; j < p.height / psize; j++) { 17 | display_noise_circle_time(i, j); 18 | } 19 | } 20 | } 21 | 22 | let display_index = function(x, y) { 23 | let h = p.map(x, 0, p.width / psize, 0, 360); 24 | let s = p.map(y, 0, p.height / psize, 0, 100); 25 | p.fill(h, s, 100); 26 | p.rect(x * psize, y * psize, psize, psize); 27 | } 28 | 29 | let display_random = function(x, y) { 30 | p.fill(0, 0, p.random(100)); 31 | p.rect(x * psize, y * psize, psize, psize); 32 | } 33 | 34 | let display_noise = function(x, y) { 35 | p.fill(0, 0, p.noise(x / 10,y / 10) * 100 ); 36 | p.rect(x * psize, y * psize, psize, psize); 37 | } 38 | 39 | let display_noise_time = function(x, y) { 40 | p.fill(0, 0, p.noise(x / 10,y / 10, tick / 200) * 100 ); 41 | p.rect(x * psize, y * psize, psize, psize); 42 | } 43 | 44 | let display_noise_circle = function(x, y) { 45 | p.fill(0); 46 | let d = p.noise(x / 10, y / 10) * psize; 47 | p.ellipse(x * psize, y * psize, d); 48 | } 49 | 50 | let display_noise_circle_time = function(x, y) { 51 | p.fill(0); 52 | let d = p.noise(x / 10, y / 10, tick / 60) * psize; 53 | p.ellipse(x * psize, y * psize, d); 54 | } 55 | } 56 | 57 | new p5(sketch); 58 | -------------------------------------------------------------------------------- /lab/swirl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Color Grid 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/swirl/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let tick = 0; 4 | 5 | let points_in_stripe = 500; 6 | let stripe = []; 7 | let color1, color2; 8 | 9 | p.setup = function() { 10 | p.createCanvas(1800, 1200); 11 | THE_SEED = p.floor(p.random(9999999)); 12 | p.randomSeed(THE_SEED); 13 | 14 | p.strokeWeight(4); 15 | p.noFill(); 16 | //p.colorMode(p.HSB); 17 | 18 | color1 = p.color(255, 240, 200); 19 | color2 = p.color(0, 20, 50); 20 | 21 | for (var i = 0; i < points_in_stripe; i++) { 22 | stripe.push(p.createVector(i / (points_in_stripe - 1) * p.width, -500, 0)); 23 | } 24 | }; 25 | 26 | p.draw = function() { 27 | update(); 28 | display(); 29 | }; 30 | 31 | function update() { 32 | tick++; 33 | stripe.forEach(function(pnt, i) { 34 | pnt.y += p.noise(i / 800, tick / 700) * 4; 35 | pnt.z = p.noise(400 + i / 200, 400 + tick / 10); 36 | }); 37 | } 38 | 39 | function display() { 40 | //p.beginShape(); 41 | for (var i = 1; i < stripe.length; i++) { 42 | let col = p.lerpColor(color1, color2, stripe[i].z); 43 | p.stroke(col); 44 | p.line(stripe[i - 1].x, stripe[i - 1].y, stripe[i].x, stripe[i].y); 45 | p.point(stripe[i].x, stripe[i].y); 46 | } 47 | //p.endShape(); 48 | } 49 | 50 | p.keyPressed = function() { 51 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 52 | }; 53 | }; 54 | new p5(sketch); 55 | -------------------------------------------------------------------------------- /lab/topology4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perlin Topology WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/voronoi3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Voronoi WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lab/voronoi3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let n = 400; 3 | let points; 4 | let hue_offset; 5 | let tick; 6 | 7 | p.setup = function() { 8 | let c = p.createCanvas(1000,1000); 9 | c.style("border-radius:50%"); 10 | p.colorMode(p.HSB); 11 | //p.blendMode(p.SOFT_LIGHT); 12 | p.noStroke(); 13 | init(); 14 | } 15 | 16 | p.draw = function() { 17 | points.forEach(function(pnt) { 18 | if(tick < pnt.dim) { 19 | p.fill((100 + tick / 4) % 360, 100, 100, .1); 20 | p.ellipse(pnt.pos.x, pnt.pos.y, pnt.dim - tick); 21 | } 22 | }, this); 23 | tick++; 24 | } 25 | 26 | function init () { 27 | points = []; 28 | tick = 0; 29 | hue_offset = p.random(360); 30 | 31 | let centre = p.createVector(p.width/2, p.height/2); 32 | for (var i = 0; i < n; i++) { 33 | let pos = p.createVector( p.randomGaussian(p.width/2, p.width/4), p.randomGaussian(p.height/2, p.height/4)); 34 | let centre_dist = p5.Vector.dist(centre, pos); 35 | points.push({ 36 | pos:pos, 37 | hue:p.random(150) + centre_dist / 8, 38 | dim: 100 + centre_dist / 1.8 39 | }); 40 | } 41 | } 42 | } 43 | new p5(sketch); -------------------------------------------------------------------------------- /lab/walkers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Walkers WIP 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lab/walkers/sketch.js: -------------------------------------------------------------------------------- 1 | var sketch = function (p) { 2 | const w = 800; 3 | const h = 800; 4 | let t = 0; 5 | let n = 100; 6 | let particles = []; 7 | 8 | p.setup = function() { 9 | p.createCanvas(w, h); 10 | p.fill(0); 11 | 12 | for(var i = 0; i < n; i++) { 13 | particles.push( 14 | { 15 | pos: p.createVector(p.random(w), p.random(h)), 16 | vel: p.createVector(p.random(-1,1),p.random(-1,1)), 17 | seed: i 18 | } 19 | ) 20 | } 21 | } 22 | 23 | p.draw = function() { 24 | p.clear(); 25 | particles.forEach( function(prtcl) { 26 | display(prtcl.pos, prtcl.vel); 27 | update(prtcl.pos, prtcl.vel, prtcl.seed); 28 | }); 29 | 30 | t += 0.002; 31 | } 32 | 33 | let display = function(pos, vel) { 34 | p.ellipse(pos.x, pos.y, 2); 35 | } 36 | 37 | let update = function(pos, vel, seed) { 38 | pos.x = mod((pos.x + vel.x), w); 39 | pos.y = mod((pos.y + vel.y), h); 40 | 41 | let r = p5.Vector.fromAngle(p.noise(seed,t) * p.TWO_PI); 42 | //let r = p.createVector(p.random(-1,1),p.random(-1,1)); 43 | vel.x = r.x; 44 | vel.y = r.y; 45 | } 46 | 47 | let mod = function (x, n) { 48 | return ((x % n) + n ) % n; 49 | } 50 | } 51 | 52 | var x = new p5(sketch) 53 | -------------------------------------------------------------------------------- /layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Comic Book Layouts 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /layout/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let padding = 16; 4 | let cutoff = 72; 5 | let palette; 6 | 7 | p.setup = function() { 8 | p.createCanvas(600, 600); 9 | p.frameRate(2); 10 | THE_SEED = p.floor(p.random(9999999)); 11 | p.randomSeed(THE_SEED); 12 | 13 | p.background('#ebebe4'); 14 | p.strokeWeight(4); 15 | 16 | p.rectMode(p.CORNERS); 17 | 18 | palette = [ 19 | p.color('#dd6853'), 20 | p.color('#0aa2c0'), 21 | p.color('#e88b17'), 22 | p.color('#f7e868'), 23 | p.color('#87c6be'), 24 | p.color('#7d6b9f'), 25 | p.color('#f7f7f7') 26 | ]; 27 | }; 28 | 29 | p.draw = function() { 30 | p.background('#ebebe4'); 31 | let w = p.random(250, 400); 32 | let h = p.random(250, 400); 33 | p.translate(p.width / 2, p.height / 2); 34 | draw_block(p.createVector(-w / 2, -h / 2), p.createVector(w / 2, h / 2)); 35 | }; 36 | 37 | function draw_section(v1, v2) { 38 | if (v2.x - v1.x < cutoff || v2.y - v1.y < cutoff) { 39 | draw_block(v1, v2); 40 | return; 41 | } 42 | let decide = p.random(); 43 | 44 | if (decide < 0.5) { 45 | draw_block(v1, v2); 46 | } else if (decide < 0.95) { 47 | split_section(v1, v2); 48 | } else { 49 | //NOTHING, FOR NOW... 50 | } 51 | } 52 | 53 | function draw_block(v1, v2) { 54 | if (v2.x - v1.x < cutoff || v2.y - v1.y < cutoff) { 55 | draw_rectangle(v1, v2); 56 | return; 57 | } 58 | let decide = p.random(); 59 | 60 | if (decide < 0.4) { 61 | draw_rectangle(v1, v2); 62 | draw_section(p.createVector(v1.x + padding, v1.y + padding), p.createVector(v2.x - padding, v2.y - padding)); 63 | } else if (decide < 0.95) { 64 | split_block(v1, v2); 65 | } else { 66 | draw_rectangle(v1, v2); 67 | } 68 | } 69 | 70 | function split_section(v1, v2) { 71 | let cut_dir = get_cut_direction(v1, v2); 72 | if (cut_dir == 'H') { 73 | let pivot = get_cut_pos(v1.y, v2.y); 74 | draw_section(v1, p.createVector(v2.x, pivot - padding / 2)); 75 | draw_section(p.createVector(v1.x, pivot + padding / 2), v2); 76 | } else { 77 | let pivot = get_cut_pos(v1.x, v2.x); 78 | draw_section(v1, p.createVector(pivot - padding / 2, v2.y)); 79 | draw_section(p.createVector(pivot + padding / 2, v1.y), v2); 80 | } 81 | } 82 | 83 | function split_block(v1, v2) { 84 | let cut_dir = get_cut_direction(v1, v2); 85 | if (cut_dir == 'H') { 86 | let pivot = get_cut_pos(v1.y, v2.y); 87 | draw_block(v1, p.createVector(v2.x, pivot)); 88 | draw_block(p.createVector(v1.x, pivot), v2); 89 | } else { 90 | let pivot = get_cut_pos(v1.x, v2.x); 91 | draw_block(v1, p.createVector(pivot, v2.y)); 92 | draw_block(p.createVector(pivot, v1.y), v2); 93 | } 94 | } 95 | 96 | function draw_rectangle(v1, v2) { 97 | p.fill(palette[p.floor(p.random(palette.length))]); 98 | p.rect(v1.x, v1.y, v2.x, v2.y); 99 | } 100 | 101 | function get_cut_direction(v1, v2) { 102 | return v2.x - v1.x < v2.y - v1.y ? 'H' : 'V'; 103 | } 104 | 105 | function get_cut_pos(p1, p2) { 106 | return p.constrain(p.randomGaussian((p1 + p2) / 2, (p2 - p1) / 8), p1 + 20, p2 - 20); 107 | } 108 | 109 | p.keyPressed = function() { 110 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 111 | }; 112 | }; 113 | new p5(sketch); 114 | -------------------------------------------------------------------------------- /layout2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Comic Book Layouts 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lindenmayer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Lindenmayer Systems 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /lindenmayer/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin:0; 3 | padding:0; 4 | font-family: arial, sans-serif; 5 | font-size: 10pt; 6 | letter-spacing: .2em; 7 | font-weight: 100; 8 | color: rgba(0,0,0,0.5); 9 | box-sizing: border-box; 10 | } 11 | 12 | h1 {font-size:2em;} 13 | a {display:block; margin:15px;} 14 | 15 | input[type=text], input[type=number] { 16 | background: none; 17 | padding:5px; 18 | border: 1px solid rgba(0,0,0,0.2); 19 | outline: 0; 20 | float:right; 21 | margin-left:20px; 22 | margin-top:-6px; 23 | width:180px; 24 | } 25 | 26 | body { 27 | background-color: rgb(216, 226, 232); 28 | text-align: center; 29 | } 30 | 31 | #controller { 32 | display: inline-block; 33 | margin-top:-3px; 34 | padding:20px; 35 | padding-bottom:10px; 36 | border: 1px solid rgba(0,0,0,0.2); 37 | } 38 | 39 | #controller > div { 40 | height:25px; 41 | margin:10px 0; 42 | padding:5px 0; 43 | text-align:left; 44 | } 45 | 46 | 47 | button { 48 | width:100%; 49 | margin-bottom:15px; 50 | padding: 8px 10px; 51 | border:1px solid rgba(0,0,0,0.2); 52 | background: none; 53 | outline:0; 54 | cursor:pointer; 55 | } 56 | -------------------------------------------------------------------------------- /logo.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let number_of_lines = 20; 3 | let lines = []; 4 | let tick = 0; 5 | let radius = 50; 6 | p.setup = function() { 7 | let canvas = p.createCanvas(70,70); 8 | canvas.parent("logo-container"); 9 | p.stroke(0,0,255); 10 | p.noFill(); 11 | for (var i = 0; i < number_of_lines; i++) { 12 | let start = p.noise(i, tick) * p.PI * 10; 13 | let end = p.noise(i + number_of_lines, tick) * p.PI * 10; 14 | lines.push({start:start, end:end}); 15 | } 16 | } 17 | 18 | p.draw = function() { 19 | p.clear(); 20 | p.translate(p.width/2, p.height/2); 21 | p.strokeWeight(4); 22 | p.ellipse(0,0,radius); 23 | display(); 24 | update(); 25 | } 26 | 27 | function display () { 28 | p.strokeWeight(1); 29 | lines.forEach(function(l) { 30 | p.line( 31 | p.cos(l.start) * radius/2, p.sin(l.start) * radius/2, 32 | p.cos(l.end) * radius/2, p.sin(l.end) * radius/2 33 | ); 34 | }, this); 35 | } 36 | 37 | function update () { 38 | for (var i = 0; i < number_of_lines; i++) { 39 | let start = p.noise(i, tick) * p.PI * 10; 40 | let end = p.noise(i + number_of_lines, tick) * p.PI * 10; 41 | lines[i] = {start:start, end:end}; 42 | } 43 | tick += .0003; 44 | } 45 | } 46 | 47 | new p5(sketch); 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "p5ycho", 3 | "version": "1.0.0", 4 | "description": "Learning to master p5.js", 5 | "repository": "https://github.com/kgolid/p5ycho.git", 6 | "author": "Kjetil Midtgarden Golid", 7 | "license": "MIT", 8 | "scripts": { 9 | "watch": "webpack-dev-server --config webpack.config.js --hot", 10 | "build": "webpack -d --config webpack.config.js" 11 | }, 12 | "dependencies": { 13 | "delaunay-triangulate": "^1.1.6", 14 | "numeric": "^1.2.6", 15 | "p5": "^0.5.11", 16 | "perspective-transform": "^1.1.3", 17 | "poisson-disc-sampler": "^1.1.0" 18 | }, 19 | "devDependencies": { 20 | "acorn": "^5.0.3", 21 | "webpack": "^2.6.1", 22 | "webpack-dev-server": "^2.4.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /patchwork/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Random Patchwork 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /patchwork2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Pattern Patchwork 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /patchwork3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Mixed Patchwork 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /patchwork4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Section Patchwork 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /perlin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perlin Noise Flowfield 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /perlin/sketch.js: -------------------------------------------------------------------------------- 1 | const p5 = require('p5'); 2 | 3 | const ui = require('./ui'); 4 | 5 | var sketch = function (p) { 6 | const w = p.windowWidth; 7 | const h = p.windowHeight; 8 | let t = 0; 9 | let n = 800; 10 | let particles = []; 11 | 12 | p.setup = function() { 13 | p.createCanvas(w, h); 14 | p.stroke(0, 10); 15 | 16 | for (var i = 0; i < n; i++) { 17 | particles.push({ 18 | pos: p.createVector(p.random(w), p.random(h)), 19 | vel: p.createVector(0,0), 20 | seed: i 21 | }); 22 | } 23 | }; 24 | 25 | p.draw = function() { 26 | particles.forEach( function(prtcl) { 27 | ui.display(p, prtcl.pos, prtcl.vel); 28 | ui.update(p, t, prtcl.pos, prtcl.vel, prtcl.seed); 29 | }); 30 | t += 0.002; 31 | }; 32 | }; 33 | 34 | new p5(sketch); 35 | -------------------------------------------------------------------------------- /perlin/ui.js: -------------------------------------------------------------------------------- 1 | const p5 = require('p5'); 2 | 3 | module.exports.update = update; 4 | module.exports.display = display; 5 | 6 | function display (p, pos, vel) { 7 | //p.line(pos.x, pos.y, (pos.x + vel.x), (pos.y + vel.y)); 8 | //p.fill(0); 9 | //p.ellipse(pos.x, pos.y, 50); 10 | p.point(pos.x, pos.y); 11 | } 12 | 13 | function update (p, t, pos, vel, seed) { 14 | const w = p.windowWidth; 15 | const h = p.windowHeight; 16 | 17 | pos.x = mod((pos.x + vel.x), w); 18 | pos.y = mod((pos.y + vel.y), h); 19 | 20 | var r = p5.Vector.fromAngle(p.noise(seed, t) * p.TWO_PI); 21 | vel.x = r.x; 22 | vel.y = r.y; 23 | 24 | vel.add(flow(p, pos)).mult(3); 25 | } 26 | 27 | function flow (p, pos) { 28 | let r = p.noise(pos.x / 100, pos.y / 100) * p.TWO_PI; 29 | return p5.Vector.fromAngle(r).mult(2); 30 | } 31 | 32 | function mod (x, n) { 33 | return ((x % n) + n ) % n; 34 | } 35 | -------------------------------------------------------------------------------- /random_shapes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Random Shapes 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /random_shapes/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let size = 100; 3 | let dim = 4; 4 | 5 | let colors; 6 | p.setup = function() { 7 | p.createCanvas(900, 900); 8 | p.strokeWeight(2); 9 | p.fill(255, 100, 85); 10 | p.blendMode(p.DARKEST); 11 | p.frameRate(0.6); 12 | p.smooth(); 13 | 14 | colors = [p.color(255, 135, 95), p.color(255, 135, 95), p.color(255, 225, 95), p.color(75, 215, 225)]; 15 | 16 | let n = p.int(p.random(3, 6)); 17 | let angle = p.PI * p.random(2); 18 | display(); 19 | }; 20 | 21 | let display = function() { 22 | for (var i = 0; i < dim; i++) { 23 | for (var j = 0; j < dim; j++) { 24 | p.fill(colors[p.floor(p.random(colors.length))]); 25 | let pos = p.createVector(p.width / dim * (i + 0.5), p.height / dim * (j + 0.5)); 26 | draw_shape(pos); 27 | } 28 | } 29 | }; 30 | 31 | let draw_shape = function(pos) { 32 | let n = p.int(p.random(3, 6)); 33 | let angle = p.PI * p.random(2); 34 | 35 | p.push(); 36 | p.translate(pos.x, pos.y); 37 | p.rotate(angle); 38 | p.push(); 39 | draw_arcs(generate_string(n), create_initial_array(n)); 40 | p.pop(); 41 | p.rotate(p.PI); 42 | draw_arcs(generate_string(n), create_initial_array(n)); 43 | p.pop(); 44 | }; 45 | 46 | p.draw = function() { 47 | p.clear(); 48 | display(); 49 | }; 50 | 51 | let create_initial_array = function(n) { 52 | p.translate(-size / 2, 0); 53 | let arr = []; 54 | for (var i = 0; i <= n; i++) { 55 | var leaf = { pos: i * (size / n) }; 56 | arr.push(leaf); 57 | } 58 | return arr; 59 | }; 60 | 61 | let generate_string = function(n) { 62 | var arr = []; 63 | for (var i = 1; i <= n; i++) { 64 | arr.push(i); 65 | } 66 | return p.shuffle(arr); 67 | }; 68 | 69 | let draw_arcs = function(rstring, poslist) { 70 | var totalHeight = 0; 71 | for (var i = 0; i < rstring.length; i++) { 72 | let area = rstring[i]; 73 | let start = get_top(poslist[area - 1]); 74 | let end = get_top(poslist[area]); 75 | 76 | let center = (start.pos + end.pos) / 2; 77 | let diameter = end.pos - start.pos; 78 | let radius = diameter / 2; 79 | 80 | for (var j = 0; j < poslist.length; j++) { 81 | let top = get_top(poslist[j]); 82 | if (top != start && top != end) { 83 | p.line(top.pos, 0, top.pos, -radius); 84 | } 85 | } 86 | p.arc(center, 0, diameter, diameter, p.PI, p.TWO_PI); 87 | p.noStroke(); 88 | p.rect(start.pos, -1, diameter, totalHeight + 2); 89 | p.stroke(35); 90 | p.translate(0, -radius); 91 | 92 | let new_point = { pos: center, parent: null }; 93 | start.parent = new_point; 94 | end.parent = new_point; 95 | 96 | totalHeight += radius; 97 | } 98 | }; 99 | 100 | let get_top = function(point) { 101 | if (point.parent != null) { 102 | return get_top(point.parent); 103 | } 104 | return point; 105 | }; 106 | }; 107 | 108 | new p5(sketch); 109 | -------------------------------------------------------------------------------- /reaction_diffusion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Reaction Diffusion 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /reaction_diffusion/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | 3 | let da = 1.0; 4 | let db = 0.5; 5 | let f = 0.0367; 6 | let k = 0.0649; 7 | let t = 1.1; 8 | 9 | let grid = []; 10 | let prev = []; 11 | 12 | p.setup = function() { 13 | p.createCanvas(200,200); 14 | p.pixelDensity(1); 15 | 16 | for(let i = 0; i < p.width; i++) { 17 | grid[i] = []; 18 | for(let j = 0; j < p.height; j++) { 19 | grid[i][j] = { a:1, b:0 }; 20 | } 21 | } 22 | 23 | for (let i = 0; i < p.width; i++) { 24 | for (let j = 0; j < p.height; j++) { 25 | let r1 = p.sqrt(p.sq(i-90) + p.sq(j-90)); 26 | let r2 = p.sqrt(p.sq(i-100) + p.sq(j-100)); 27 | if(r1 < 5 || r2 < 5) 28 | grid[i][j] = { a:0, b:1 }; 29 | } 30 | } 31 | } 32 | 33 | p.draw = function() { 34 | update(); 35 | display(); 36 | } 37 | 38 | let update = function() { 39 | p.arrayCopy(grid,prev); 40 | for (let x = 1; x < p.width-1; x++) { 41 | for (let y = 1; y < p.height-1; y++) { 42 | grid[x][y] = update_cell(x,y); 43 | } 44 | } 45 | } 46 | 47 | let update_cell = function(x,y) { 48 | let a = prev[x][y].a; 49 | let b = prev[x][y].b; 50 | 51 | let an = a + (da * laplacian(x,y,"a") - (a * b * b) + f * (1 - a)) * t; 52 | let bn = b + (db * laplacian(x,y,"b") + (a * b * b) - (k + f) * b) * t; 53 | 54 | return {a:an, b:bn} 55 | } 56 | 57 | let laplacian = function(x,y,s) { 58 | var sum = 0; 59 | 60 | sum += prev[x][y][s] * -1; 61 | sum += prev[x-1][y][s] * 0.2; 62 | sum += prev[x+1][y][s] * 0.2; 63 | sum += prev[x][y-1][s] * 0.2; 64 | sum += prev[x][y+1][s] * 0.2; 65 | sum += prev[x-1][y-1][s] * 0.05; 66 | sum += prev[x-1][y+1][s] * 0.05; 67 | sum += prev[x+1][y-1][s] * 0.05; 68 | sum += prev[x+1][y+1][s] * 0.05; 69 | 70 | return sum; 71 | } 72 | 73 | let display = function() { 74 | p.loadPixels(); 75 | for (let x = 0; x < p.width; x++) { 76 | for (let y = 0; y < p.height; y++) { 77 | let pix = (x + y * p.width) * 4; 78 | let c = p.floor((grid[x][y].a - grid[x][y].b) * 255) 79 | c = p.constrain(c, 0, 255) 80 | p.pixels[pix + 0] = 255; 81 | p.pixels[pix + 1] = 240; 82 | p.pixels[pix + 2] = 230; 83 | p.pixels[pix + 3] = 255 - c; 84 | } 85 | } 86 | p.updatePixels(); 87 | } 88 | } 89 | 90 | new p5(sketch); 91 | -------------------------------------------------------------------------------- /smokerings/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Floating Ribbon 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /smokerings/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let ox = p.random(10000); 3 | let oy = p.random(10000); 4 | let oz = p.random(10000); 5 | 6 | p.setup = function(){ 7 | p.createCanvas(800, 800); 8 | p.strokeWeight(2); 9 | p.stroke(0,30); 10 | p.smooth(); 11 | p.noFill(); 12 | } 13 | 14 | p.draw = function() { 15 | p.clear(); 16 | p.translate(p.width / 2, p.height / 2); 17 | display() 18 | } 19 | 20 | function display(){ 21 | ox+=0.01; 22 | oy+=0.01; 23 | oz+=0.007; 24 | 25 | for(let i = 0; i < 50; i++){ 26 | p.beginShape(); 27 | for(let angle = 0; angle < 360; angle+=3){ 28 | let radian = p.radians(angle); 29 | let radius = 250 + p.map(getNoise(radian, 0.35, 0.02 * i), 0, 1, -150, 150); 30 | p.vertex(radius * p.cos(radian), radius * p.sin(radian)); 31 | } 32 | p.endShape(p.CLOSE); 33 | } 34 | } 35 | 36 | function getNoise (radian, dim){ 37 | let r = radian % p.TWO_PI; 38 | if(r < 0.0){r += p.TWO_PI;} 39 | return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim); 40 | } 41 | 42 | function getNoise (radian, dim, time){ 43 | let r = radian % p.TWO_PI; 44 | if(r < 0.0){r += p.TWO_PI;} 45 | return p.noise(ox + p.cos(r) * dim , oy + p.sin(r) * dim, oz + time); 46 | } 47 | } 48 | 49 | new p5(sketch); 50 | -------------------------------------------------------------------------------- /stripes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Revolving Sphere 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /stripes/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let rows = 20; 3 | let radius = 260; 4 | let min_length = 35; 5 | let max_length = 85; 6 | let space = 15; 7 | let stripes = []; 8 | let colors; 9 | 10 | p.setup = function() { 11 | p.createCanvas(850,850); 12 | p.stroke(255); 13 | p.strokeWeight(14); 14 | //p.noLoop(); 15 | 16 | colors = [ 17 | p.color(142,192,124), 18 | p.color(250,189,47), 19 | p.color(251,71,44), 20 | p.color(211,134,147), 21 | p.color(49,69,80) 22 | ]; 23 | 24 | for (var i = 0; i < rows; i++) { 25 | let ypos = ((i + .5)/rows) * (radius * 2) - radius; 26 | let row_length = get_row_length(ypos); 27 | add_stripe_row(ypos, row_length); 28 | } 29 | } 30 | 31 | p.draw = function() { 32 | p.clear(); 33 | p.translate(p.width / 2, p.height / 2); 34 | for (var row in stripes) { 35 | for(var s in stripes[row]){ 36 | var stripe = stripes[row][s]; 37 | let length = get_row_length(stripe.y); 38 | if(!is_outside_circle(stripe, length)){ 39 | p.stroke(stripe.color); 40 | p.line(p.max((stripe.start+space), -length), stripe.y, p.min((stripe.end-space), length), stripe.y); 41 | } else if (stripe.start > length){ 42 | stripes[row].splice(s,1); 43 | let s_length = p.random(min_length,max_length); 44 | let end = stripes[row][0].start; 45 | let start = end - s_length; 46 | stripes[row].unshift({y:stripe.y, start:start, end:end, color:colors[p.floor(p.random(5))]}); 47 | } 48 | let startx = p.constrain(stripe.start, -length, length); 49 | let endx = p.constrain(stripe.end, -length, length); 50 | let startspeed = p.sqrt(2) - p.sqrt(stripe.y * stripe.y + startx * startx) / radius; 51 | let endspeed = p.sqrt(2) - p.sqrt(stripe.y * stripe.y + endx * endx) / radius; 52 | stripe.start += startspeed; 53 | stripe.end += endspeed; 54 | 55 | } 56 | } 57 | } 58 | 59 | function get_row_length(ypos) { 60 | if ((radius * radius) < (ypos * ypos)) return 0; 61 | return p.sqrt((radius * radius) - (ypos * ypos)); 62 | } 63 | 64 | function is_outside_circle(stripe, length) { 65 | return stripe.end-space < -length || stripe.start+space > length; 66 | } 67 | 68 | function add_stripe_row (ypos, row_length) { 69 | let row = []; 70 | let length = p.random(min_length,max_length); 71 | let start = -1000 + p.random(min_length,max_length); 72 | let end = start + length; 73 | while (end < -row_length) { 74 | row.push({y:ypos, start:start, end:end, color:colors[p.floor(p.random(5))]}); 75 | length = p.random(min_length,max_length); 76 | start = end; 77 | end = start + length; 78 | } 79 | stripes.push(row); 80 | } 81 | 82 | } 83 | 84 | new p5(sketch); 85 | -------------------------------------------------------------------------------- /stripes2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Stripe Sphere 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /stripes2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let rows = 40; 3 | let radius = 400; 4 | let min_length = 10; 5 | let max_length = 100; 6 | let space = 19; 7 | let stripes = []; 8 | let colors; 9 | 10 | p.setup = function() { 11 | p.createCanvas(850,850); 12 | p.stroke(0); 13 | p.strokeWeight(5); 14 | p.noLoop(); 15 | 16 | colors = [ 17 | p.color(142,192,124), 18 | p.color(250,189,47), 19 | p.color(251,71,44), 20 | p.color(211,134,147), 21 | p.color(49,69,80) 22 | ]; 23 | 24 | colors2 = [ 25 | p.color(210,198,115), 26 | p.color(253,75,98), 27 | p.color(138,209,192), 28 | p.color(130,130,130) 29 | ]; 30 | 31 | for (var i = 0; i < rows; i++) { 32 | let ypos = ((i + .5)/rows) * (radius * 2) - radius; 33 | let row_length = 2 * p.sqrt((radius * radius) - (ypos * ypos)); 34 | add_stripe_row(ypos, row_length); 35 | } 36 | } 37 | 38 | p.draw = function() { 39 | //p.clear(); 40 | p.background("#4f3854"); 41 | p.translate(p.width / 2, p.height / 2); 42 | p.rotate(p.random(p.PI)); 43 | for (var s in stripes) { 44 | var stripe = stripes[s]; 45 | p.strokeWeight(14); 46 | p.stroke(colors2[p.floor(p.random(colors2.length))]); 47 | p.line(stripe.start, stripe.y, stripe.end, stripe.y); 48 | p.strokeWeight(6); 49 | p.stroke(colors2[p.floor(p.random(colors2.length))]); 50 | p.line(stripe.start, stripe.y, stripe.end, stripe.y); 51 | } 52 | } 53 | 54 | function add_stripe_row (ypos, row_length) { 55 | //let length = p.max(0, p.randomGaussian(mean_length, deviation)); 56 | let length = p.random(min_length,max_length); 57 | let start = -.5 * row_length; 58 | let end = start + length; 59 | while (end < row_length / 2 - space - min_length) { 60 | stripes.push({y:ypos, start:start, end:end}); 61 | //length = p.max(0,p.randomGaussian(mean_length, deviation)); 62 | length = p.random(min_length,max_length); 63 | start = end + space; 64 | end = start + length; 65 | } 66 | stripes.push({y:ypos, start:start, end:row_length / 2}); 67 | } 68 | 69 | p.keyPressed = function () { 70 | console.log(p.keyCode); 71 | if (p.keyCode === 80) { 72 | p.saveCanvas(); 73 | } 74 | } 75 | } 76 | 77 | new p5(sketch); -------------------------------------------------------------------------------- /stripesbw/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Black Sphere 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /stripesbw/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let rows = 40 * 2; 3 | let radius = 400 * 1.2; 4 | let min_length = 10; 5 | let max_length = 80; 6 | let space = 10; 7 | let stripes = []; 8 | let colors; 9 | let tick = 0; 10 | 11 | p.setup = function() { 12 | p.createCanvas(1000,1000); 13 | p.stroke(0); 14 | p.noFill(); 15 | //p.frameRate(10); 16 | 17 | for (var i = 0; i < rows; i++) { 18 | let ypos = ((i + .5)/rows) * (radius * 2) - radius; 19 | let row_length = 2 * p.sqrt((radius * radius) - (ypos * ypos)); 20 | add_stripe_row(ypos, row_length); 21 | } 22 | } 23 | 24 | p.draw = function() { 25 | p.clear(); 26 | p.translate(p.width / 2, p.height / 2); 27 | p.rotate(- p.PI / 12); 28 | for (var s in stripes) { 29 | var stripe = stripes[s]; 30 | p.strokeWeight(12); 31 | p.stroke(22,23,22); 32 | // if(p.noise(5000 + stripe.start/200 + tick / 20, 5000 + stripe.y/200, tick/400) > .45) 33 | // p.line(stripe.start, stripe.y, stripe.end, stripe.y); 34 | // if(p.noise(5000 + stripe.start/200 + tick / 20, 5000 + stripe.y/200, tick/400) > .4) { 35 | // //p.stroke(245,200,40); 36 | // p.stroke(22,23,22,40); 37 | // p.line(stripe.start, stripe.y, stripe.end, stripe.y); 38 | // } 39 | 40 | p.strokeWeight(p.max(0, p.noise(5000+ stripe.start/100, 5000 - tick/160 + stripe.y/100, tick/200) * 20 - 6)); 41 | p.line(stripe.start, stripe.y, stripe.end, stripe.y); 42 | 43 | } 44 | tick++; 45 | } 46 | 47 | function add_stripe_row (ypos, row_length) { 48 | //let length = p.max(0, p.randomGaussian(mean_length, deviation)); 49 | let length = p.random(min_length,max_length); 50 | let start = -.5 * row_length; 51 | let end = start + length; 52 | while (end < row_length / 2 - space - min_length) { 53 | stripes.push({y:ypos, start:start, end:end}); 54 | //length = p.max(0,p.randomGaussian(mean_length, deviation)); 55 | length = p.random(min_length,max_length); 56 | start = end + space; 57 | end = start + length; 58 | } 59 | stripes.push({y:ypos, start:start, end:row_length / 2}); 60 | } 61 | 62 | p.keyPressed = function () { 63 | console.log(p.keyCode); 64 | if (p.keyCode === 80) { 65 | p.saveCanvas(); 66 | } 67 | } 68 | } 69 | 70 | new p5(sketch); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Helvetica, Arial, sans-serif; 5 | font-size: 8pt; 6 | font-weight: 800; 7 | color: #00f; 8 | line-height: 1.3em; 9 | letter-spacing: 0.05em; 10 | text-transform: uppercase; 11 | } 12 | 13 | body { 14 | max-width: 1040px; 15 | margin: 100px auto; 16 | } 17 | 18 | header { 19 | border-bottom: 1px solid; 20 | padding-bottom: 30px; 21 | } 22 | header > div { 23 | display: inline-block; 24 | margin: 0 5px; 25 | } 26 | 27 | header .title { 28 | vertical-align: top; 29 | margin-top: 23px; 30 | width: 50px; 31 | } 32 | header .some-links { 33 | vertical-align: top; 34 | margin-top: 23px; 35 | margin-right: 15px; 36 | float: right; 37 | } 38 | header .some-links a { 39 | display: block; 40 | padding: 1px 0; 41 | text-align: right; 42 | } 43 | 44 | a { 45 | text-decoration: none; 46 | color: inherit; 47 | } 48 | a:hover { 49 | text-decoration: underline; 50 | } 51 | a span { 52 | font-weight: 400; 53 | display: block; 54 | } 55 | 56 | body > * { 57 | margin: 70px 20px 0 20px; 58 | } 59 | 60 | body > article { 61 | display: flex; 62 | flex-wrap: wrap; 63 | justify-content: space-between; 64 | } 65 | 66 | .elem { 67 | box-sizing: border-box; 68 | display: inline-block; 69 | padding: 30px 10px; 70 | width: 200px; 71 | } 72 | -------------------------------------------------------------------------------- /tectonic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Tectonic 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /tectonic/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | 4 | let width = 120; 5 | 6 | let resolution = 60; 7 | 8 | let noise_zoom = 90; 9 | let magnitude = 120; 10 | 11 | let plate_padding = 0; 12 | 13 | let number_of_blocks = 70; 14 | let blocks = []; 15 | 16 | let palette; 17 | 18 | p.setup = function() { 19 | p.createCanvas(1200, 1800); 20 | p.noLoop(); 21 | 22 | p.strokeWeight(1); 23 | 24 | palette = [ 25 | p.color(145, 172, 183), 26 | p.color(182, 32, 36), 27 | p.color(155, 80, 43), 28 | p.color(81, 82, 111), 29 | p.color(201, 179, 171), 30 | p.color(221, 226, 222) 31 | ]; 32 | 33 | THE_SEED = p.floor(p.random(9999999)); 34 | p.noiseSeed(THE_SEED); 35 | 36 | for (var i = 0; i < number_of_blocks; i++) { 37 | blocks.push(create_block(p.random(1, 10), i)); 38 | } 39 | }; 40 | 41 | p.draw = function() { 42 | p.background('#e0e1db'); 43 | let current_height = 0; 44 | p.translate(65, p.height - 65); 45 | blocks.forEach(function(block, index) { 46 | let block_height = p.abs(Math.min(...block[block.length - 1].points) - 60); 47 | 48 | if (current_height + block_height < p.height - 200) { 49 | display_block(block, index); 50 | p.translate(0, -block_height); 51 | current_height += block_height; 52 | } else { 53 | p.translate(190, current_height); 54 | display_block(block, index); 55 | p.translate(0, -block_height); 56 | current_height = block_height; 57 | } 58 | }, this); 59 | }; 60 | 61 | function create_block(number_of_plates, block_index) { 62 | let plates = []; 63 | for (var plate_index = 0; plate_index < number_of_plates; plate_index++) { 64 | let points = []; 65 | 66 | let plate_height = p.randomGaussian(0, 10); 67 | if (plate_index > 0) { 68 | for (let i = 0; i <= resolution; i++) { 69 | points.push( 70 | p.min(-plate_padding, get_noise(i, plate_index, block_index) - plate_height) + 71 | plates[plate_index - 1].points[i] 72 | ); 73 | } 74 | } else { 75 | for (let i = 0; i <= resolution; i++) { 76 | points.push(p.min(-plate_padding, get_noise(i, plate_index, block_index) - plate_height)); 77 | } 78 | } 79 | 80 | plates.push({ 81 | points: points, 82 | color: palette[p.floor(p.random(palette.length))] 83 | }); 84 | } 85 | return plates; 86 | } 87 | 88 | function display_block(block, block_index) { 89 | block.forEach(function(plate, index) { 90 | p.fill(plate.color); 91 | p.beginShape(); 92 | if (index === 0) { 93 | p.vertex(0, 0); 94 | p.vertex(width, 0); 95 | } else { 96 | for (let i = 0; i <= resolution; i++) { 97 | p.vertex(i * width / resolution, block[index - 1].points[i] - plate_padding); 98 | } 99 | } 100 | for (let i = resolution; i >= 0; i--) { 101 | p.vertex(i * width / resolution, block[index].points[i]); 102 | } 103 | p.endShape(p.CLOSE); 104 | }, this); 105 | } 106 | 107 | function get_noise(x, y, z) { 108 | return -magnitude * (p.noise(x / noise_zoom, y, z) - 0.4); 109 | } 110 | 111 | p.keyPressed = function() { 112 | if (p.keyCode === 80) p.saveCanvas('tectonic_' + THE_SEED, 'png'); 113 | }; 114 | }; 115 | new p5(sketch); 116 | -------------------------------------------------------------------------------- /tectonic2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Tectonic - Wide 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /tectonic2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | 4 | let width = 500; 5 | let resolution = 250; 6 | 7 | let noise_zoom = 180; 8 | let magnitude = 100; 9 | 10 | let plate_padding = 0; 11 | 12 | let number_of_blocks = 70; 13 | let blocks = []; 14 | 15 | let palette; 16 | 17 | p.setup = function() { 18 | p.createCanvas(1200, 1800); 19 | p.noLoop(); 20 | 21 | p.strokeWeight(1); 22 | 23 | palette = [ 24 | p.color(240, 204, 18), 25 | p.color(236, 65, 38), 26 | p.color(170, 132, 94), 27 | p.color(244, 188, 191), 28 | p.color(118, 158, 190), 29 | p.color(234, 235, 230) 30 | ]; 31 | 32 | THE_SEED = p.floor(p.random(9999999)); 33 | p.noiseSeed(THE_SEED); 34 | 35 | for (var i = 0; i < number_of_blocks; i++) { 36 | blocks.push(create_block(p.random(1, 10), i)); 37 | } 38 | }; 39 | 40 | p.draw = function() { 41 | p.background('#e0e1db'); 42 | let current_height = 0; 43 | p.translate(65, p.height - 65); 44 | blocks.forEach(function(block, index) { 45 | let block_height = p.abs(Math.min(...block[block.length - 1].points) - 60); 46 | 47 | if (current_height + block_height < p.height - 200) { 48 | display_block(block, index); 49 | p.translate(0, -block_height); 50 | current_height += block_height; 51 | } else { 52 | p.translate(570, current_height); 53 | display_block(block, index); 54 | p.translate(0, -block_height); 55 | current_height = block_height; 56 | } 57 | }, this); 58 | }; 59 | 60 | function create_block(number_of_plates, block_index) { 61 | let plates = []; 62 | for (var plate_index = 0; plate_index < number_of_plates; plate_index++) { 63 | let points = []; 64 | 65 | let plate_height = p.randomGaussian(0, 10); 66 | if (plate_index > 0) { 67 | for (let i = 0; i <= resolution; i++) { 68 | points.push( 69 | p.min(-plate_padding, get_noise(i, plate_index, block_index) - plate_height) + 70 | plates[plate_index - 1].points[i] 71 | ); 72 | } 73 | } else { 74 | for (let i = 0; i <= resolution; i++) { 75 | points.push(p.min(-plate_padding, get_noise(i, plate_index, block_index) - plate_height)); 76 | } 77 | } 78 | 79 | plates.push({ 80 | points: points, 81 | color: palette[p.floor(p.random(palette.length))] 82 | }); 83 | } 84 | return plates; 85 | } 86 | 87 | function display_block(block, block_index) { 88 | block.forEach(function(plate, index) { 89 | p.fill(plate.color); 90 | p.beginShape(); 91 | if (index === 0) { 92 | p.vertex(0, 0); 93 | p.vertex(width, 0); 94 | } else { 95 | for (let i = 0; i <= resolution; i++) { 96 | p.vertex(i * width / resolution, block[index - 1].points[i] - plate_padding); 97 | } 98 | } 99 | for (let i = resolution; i >= 0; i--) { 100 | p.vertex(i * width / resolution, block[index].points[i]); 101 | } 102 | p.endShape(p.CLOSE); 103 | }, this); 104 | } 105 | 106 | function get_noise(x, y, z) { 107 | return -magnitude * (p.noise(x / noise_zoom, y, z) - 0.3); 108 | } 109 | 110 | p.keyPressed = function() { 111 | if (p.keyCode === 80) p.saveCanvas('tectonic_' + THE_SEED, 'jpeg'); 112 | }; 113 | }; 114 | new p5(sketch); 115 | -------------------------------------------------------------------------------- /topography/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Topographic Map 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /topography/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let rings = 36; 3 | let dim_init = 0; 4 | let dim_delta = 0; 5 | 6 | let chaos_init = 0.1; 7 | let chaos_delta = 0.05; 8 | let chaos_mag = 200; 9 | 10 | let ox = p.random(10000); 11 | let oy = p.random(10000); 12 | let oz = p.random(10000); 13 | 14 | let arr = []; 15 | let spacing = -10; 16 | let magnitude = 80; 17 | let noise_delta = 17; 18 | let noise_radius = 0.3; 19 | 20 | let cols = ['#fa4', '#fb3', '#ec4', '#dd5', '#ada', '#9bc']; 21 | 22 | let cols2 = ['#fa4', '#fb4', '#fc5', '#dd5', '#ada', '#8bc']; 23 | 24 | p.setup = function() { 25 | let c = p.createCanvas(800, 800); 26 | c.style('border:4px solid #000'); 27 | c.parent('sketch'); 28 | p.strokeWeight(1); 29 | p.stroke(0, 0, 0); 30 | p.smooth(); 31 | p.noLoop(); 32 | 33 | for (let i = 0; i < 360; i++) { 34 | arr.push(dim_init); 35 | } 36 | }; 37 | 38 | p.draw = function() { 39 | p.push(); 40 | p.translate(p.randomGaussian(p.width / 2, 250), p.randomGaussian(p.height / 2, 250)); 41 | display(); 42 | p.pop(); 43 | display_crosses(); 44 | display_grid(); 45 | }; 46 | 47 | function display() { 48 | for (let i = 0; i < rings; i++) { 49 | if (i % 6 == 0) p.strokeWeight(2); 50 | else p.strokeWeight(1); 51 | 52 | p.fill(cols[p.floor(i / rings * cols.length)]); 53 | //p.fill(cols[p.floor(p.random(cols.length))]); 54 | 55 | var new_arr = []; 56 | 57 | p.beginShape(); 58 | for (const ang in arr) { 59 | let rad = p.radians(ang); 60 | let new_radius = spacing + arr[ang] + getNoise(rad, i * noise_delta) * magnitude; 61 | 62 | p.vertex(new_radius * p.cos(rad), new_radius * p.sin(rad)); 63 | new_arr[ang] = new_radius; 64 | } 65 | p.beginContour(); 66 | for (const ang in arr) { 67 | let rad = p.radians(359 - ang); 68 | p.vertex(arr[359 - ang] * p.cos(rad), arr[359 - ang] * p.sin(rad)); 69 | } 70 | p.endContour(); 71 | 72 | p.endShape(p.CLOSE); 73 | 74 | arr = new_arr; 75 | } 76 | } 77 | 78 | function display_crosses() { 79 | for (var i = 0; i < 100; i++) { 80 | p.push(); 81 | p.translate(p.random(20, p.width - 20), p.random(20, p.height - 20)); 82 | 83 | p.line(-5, 0, 5, 0); 84 | p.line(0, -5, 0, 5); 85 | p.pop(); 86 | } 87 | } 88 | 89 | function display_grid() { 90 | p.stroke(0, 80); 91 | p.strokeWeight(1); 92 | let grid_space = 160; 93 | for (var i = grid_space; i < p.height; i += grid_space) { 94 | p.line(0, i, p.width, i); 95 | } 96 | for (var j = grid_space; j < p.width; j += grid_space) { 97 | p.line(j, 0, j, p.height); 98 | } 99 | } 100 | 101 | function getNoise(radian, dim) { 102 | let r = radian % p.TAU; 103 | if (r < 0.0) { 104 | r += p.TAU; 105 | } 106 | return p.noise(ox + p.cos(r) * (noise_radius + dim / 200), oy + p.sin(r) * (noise_radius + dim / 200), dim); 107 | } 108 | 109 | function getNoiseWithTime(radian, dim, time) { 110 | let r = radian % p.TWO_PI; 111 | if (r < 0.0) { 112 | r += p.TWO_PI; 113 | } 114 | return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim, oz + time); 115 | } 116 | }; 117 | 118 | new p5(sketch); 119 | -------------------------------------------------------------------------------- /topology/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perlin Topology 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /topology2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perlin Tangles 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /topology3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perlin Topology 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /topology4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perlin Topology 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /topology5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perlin Topology 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace-perspective-big/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Pencil Trace 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /trace-perspective-big/sketch.js: -------------------------------------------------------------------------------- 1 | const perspective = require('perspective-transform'); 2 | 3 | let sketch = function (p) { 4 | let THE_SEED; 5 | const number_of_particles = 8000; 6 | const number_of_particle_sets = 6; 7 | let particle_sets; 8 | 9 | const squeeze_y = 0.45; 10 | const perspective_x = 0.75; 11 | 12 | let pTransform; 13 | 14 | let tick; 15 | const print_time = 2000; 16 | 17 | p.setup = function () { 18 | p.createCanvas(4000, 4000); 19 | p.noFill(); 20 | p.background('#e7e7db'); 21 | p.stroke(20, 15); 22 | p.strokeWeight(1.5); 23 | p.smooth(); 24 | 25 | let pad_x = (p.width - p.width * perspective_x) / 2; 26 | let pad_y = (p.height - p.height * squeeze_y) / 2; 27 | 28 | var srcCorners = [0, 0, p.width, 0, p.width, p.height, 0, p.height]; 29 | var dstCorners = [ 30 | pad_x, 31 | pad_y, 32 | p.width - pad_x, 33 | pad_y, 34 | p.width + pad_x, 35 | p.height - pad_y, 36 | -pad_x, 37 | p.height - pad_y, 38 | ]; 39 | pTransform = perspective(srcCorners, dstCorners); 40 | 41 | reset(); 42 | }; 43 | 44 | p.draw = function () { 45 | particle_sets.forEach(function (particles, index) { 46 | particles.forEach(function (particle) { 47 | particle.update(index); 48 | particle.display(index); 49 | }); 50 | }); 51 | 52 | tick++; 53 | 54 | if (tick % 100 == 0) console.log(tick, ' / ', print_time); 55 | 56 | if (tick == print_time) { 57 | p.saveCanvas('curvescape_' + THE_SEED, 'jpg'); 58 | reset(); 59 | } 60 | }; 61 | 62 | function reset() { 63 | THE_SEED = p.floor(p.random(9999999)); 64 | p.randomSeed(THE_SEED); 65 | p.noiseSeed(THE_SEED); 66 | 67 | particle_sets = []; 68 | for (var j = 0; j < number_of_particle_sets; j++) { 69 | let ps = []; 70 | for (var i = 0; i < number_of_particles; i++) { 71 | ps.push( 72 | new Particle( 73 | p.randomGaussian(p.width / 2, 600), 74 | p.randomGaussian(p.height / 2, 900), 75 | p.random(p.TWO_PI) 76 | ) 77 | ); 78 | } 79 | particle_sets.push(ps); 80 | } 81 | tick = 0; 82 | 83 | p.background('#e7e7db'); 84 | } 85 | 86 | p.keyPressed = function () { 87 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 88 | }; 89 | 90 | class Particle { 91 | constructor(x, y, phi) { 92 | this.pos = p.createVector(x, y); 93 | this.angle = phi; 94 | this.val = 0; 95 | } 96 | 97 | update(index) { 98 | this.pos.x += p.cos(this.angle); 99 | this.pos.y += p.sin(this.angle); 100 | 101 | let nx = 1.3 * p.map(this.pos.x, 0, p.width, -1, 1); 102 | let ny = 1.3 * p.map(this.pos.y, 0, p.height, -1, 1); 103 | 104 | let np = pTransform.transformInverse(nx, ny); 105 | 106 | let n = p.createVector(nx, ny); 107 | 108 | this.altitude = 109 | p.noise(n.x + 423.2, n.y - 231.1) + 110 | 0.04 * p.noise(n.x * 15 - 113.3, n.y * 8 + 261.1) + 111 | 0.02 * p.noise(n.x * 30 - 54.3, n.y * 30 + 121.1); 112 | let nval = (this.altitude + 0.065 * (index - number_of_particle_sets / 2)) % 1; 113 | 114 | this.angle += 0.8 * p.map(nval, 0, 1, -1, 1); 115 | this.val = nval; 116 | } 117 | 118 | display(index) { 119 | if (this.val > 0.47 && this.val < 0.53) { 120 | let np = pTransform.transform( 121 | this.pos.x, 122 | this.pos.y + 1500 - this.altitude * 2700 123 | ); 124 | p.point(np[0], np[1]); 125 | } 126 | } 127 | } 128 | }; 129 | new p5(sketch); 130 | -------------------------------------------------------------------------------- /trace-perspective/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Pencil Trace 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace-perspective/sketch.js: -------------------------------------------------------------------------------- 1 | const perspective = require('perspective-transform'); 2 | 3 | let sketch = function(p) { 4 | let THE_SEED; 5 | let border = 200; 6 | let number_of_particles = 3000; 7 | let number_of_particle_sets = 8; 8 | let particle_sets = []; 9 | let tick = 0; 10 | 11 | let palette; 12 | 13 | let nzoom = 10; 14 | let pTransform; 15 | 16 | p.setup = function() { 17 | p.createCanvas(1200, 1200); 18 | THE_SEED = p.floor(p.random(9999999)); 19 | p.randomSeed(THE_SEED); 20 | 21 | p.noFill(); 22 | p.background('#e7e7db'); 23 | p.stroke(20, 10); 24 | p.strokeWeight(0.7); 25 | //p.pixelDensity(5); 26 | p.smooth(); 27 | 28 | //var srcCorners = [-1, -1, 1, -1, 1, 1, -1, 1]; 29 | //var dstCorners = [-0.8, -0.5, 0.8, -0.5, 1, 0.5, -1, 0.5]; 30 | 31 | var srcCorners = [0, 0, p.width, 0, p.width, p.height, 0, p.height]; 32 | var dstCorners = [200, 300, p.width - 200, 300, p.width + 200, p.height - 300, -200, p.height - 300]; 33 | pTransform = perspective(srcCorners, dstCorners); 34 | 35 | for (var j = 0; j < number_of_particle_sets; j++) { 36 | let ps = []; 37 | for (var i = 0; i < number_of_particles; i++) { 38 | ps.push( 39 | new Particle(p.randomGaussian(p.width / 2, 140), p.randomGaussian(p.height / 2, 140), p.random(p.TWO_PI)) 40 | ); 41 | } 42 | particle_sets.push(ps); 43 | } 44 | }; 45 | 46 | p.draw = function() { 47 | particle_sets.forEach(function(particles, index) { 48 | particles.forEach(function(particle) { 49 | particle.update(index); 50 | particle.display(index); 51 | }); 52 | }); 53 | }; 54 | 55 | p.keyPressed = function() { 56 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 57 | }; 58 | 59 | class Particle { 60 | constructor(x, y, phi) { 61 | this.pos = p.createVector(x, y); 62 | this.angle = phi; 63 | this.val = 0; 64 | } 65 | 66 | update(index) { 67 | this.pos.x += p.cos(this.angle); 68 | this.pos.y += p.sin(this.angle); 69 | 70 | let nx = 1.8 * p.map(this.pos.x, 0, p.width, -1, 1); 71 | let ny = 1.8 * p.map(this.pos.y, 0, p.height, -1, 1); 72 | 73 | let np = pTransform.transformInverse(nx, ny); 74 | 75 | let n = p.createVector(nx, ny); 76 | 77 | this.altitude = p.noise(n.x + 423.2, n.y - 231.1) + 0.05 * p.noise(n.x * 15 + 113.3, n.y * 15 + 221.1); 78 | let nval = (this.altitude + 0.045 * (index - number_of_particle_sets / 2)) % 1; 79 | 80 | this.angle += 3 * p.map(nval, 0, 1, -1, 1); 81 | this.val = nval; 82 | } 83 | 84 | display(index) { 85 | if (this.val > 0.479 && this.val < 0.521) { 86 | //const pnt = pTransform.transform(this.pos.x, this.pos.y); 87 | 88 | let np = pTransform.transform(this.pos.x, this.pos.y + 150 - this.altitude * 350); 89 | p.point(np[0], np[1]); 90 | } 91 | } 92 | } 93 | }; 94 | new p5(sketch); 95 | -------------------------------------------------------------------------------- /trace-print/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perspective Trace PRINT 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Pencil Trace 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let border = 200; 4 | let number_of_particles = 3000; 5 | let number_of_particle_sets = 8; 6 | let particle_sets = []; 7 | let tick = 0; 8 | 9 | let palette; 10 | 11 | let nzoom = 10; 12 | 13 | p.setup = function() { 14 | p.createCanvas(1200, 1200); 15 | THE_SEED = p.floor(p.random(9999999)); 16 | p.randomSeed(THE_SEED); 17 | 18 | p.noFill(); 19 | p.background('#e7e7db'); 20 | p.stroke(20, 10); 21 | p.strokeWeight(0.7); 22 | p.smooth(); 23 | 24 | palette = [p.color(80, 55, 83, 20), p.color(21, 142, 121, 20)]; 25 | 26 | for (var j = 0; j < number_of_particle_sets; j++) { 27 | let ps = []; 28 | for (var i = 0; i < number_of_particles; i++) { 29 | ps.push( 30 | new Particle( 31 | p.randomGaussian(p.width / 2, 110), 32 | //border + p.random(p.width - 2 * border), 33 | //border + p.random(p.height - 2 * border), 34 | p.randomGaussian(p.height / 2, 110), 35 | p.random(p.TWO_PI) 36 | ) 37 | ); 38 | } 39 | particle_sets.push(ps); 40 | } 41 | }; 42 | 43 | p.draw = function() { 44 | particle_sets.forEach(function(particles, index) { 45 | particles.forEach(function(particle) { 46 | particle.update(index); 47 | particle.display(index); 48 | }); 49 | }); 50 | }; 51 | 52 | p.keyPressed = function() { 53 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 54 | }; 55 | 56 | class Particle { 57 | constructor(x, y, phi) { 58 | this.pos = p.createVector(x, y); 59 | this.angle = phi; 60 | this.val = 0; 61 | } 62 | 63 | update(index) { 64 | this.pos.x += p.cos(this.angle); 65 | this.pos.y += p.sin(this.angle); 66 | 67 | let nx = 1.8 * p.map(this.pos.x, 0, p.width, -1, 1); 68 | let ny = 1.8 * p.map(this.pos.y, 0, p.height, -1, 1); 69 | 70 | let n = p.createVector(nx, ny); 71 | 72 | let nval = (p.noise(n.x + 42, n.y - 23) + 0.045 * (index - number_of_particle_sets / 2)) % 1; 73 | 74 | this.angle += 3 * p.map(nval, 0, 1, -1, 1); 75 | this.val = nval; 76 | } 77 | 78 | display(index) { 79 | if (this.val > 0.482 && this.val < 0.518) { 80 | //p.stroke(palette[index % palette.length]); 81 | // if (index === 2) p.stroke(255, 25, 20, 20); 82 | // else p.stroke(20, 10); 83 | p.push(); 84 | p.translate(this.pos.x, this.pos.y); 85 | p.rotate(this.angle); 86 | p.point(0, 0); 87 | p.pop(); 88 | } 89 | } 90 | } 91 | }; 92 | new p5(sketch); 93 | -------------------------------------------------------------------------------- /trace2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Symmetric Pencil Trace 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let border = 200; 4 | let number_of_particles = 3000; 5 | let number_of_particle_sets = 8; 6 | let particle_sets = []; 7 | let tick = 0; 8 | 9 | let palette; 10 | 11 | let nzoom = 10; 12 | 13 | p.setup = function() { 14 | p.createCanvas(1200, 1200); 15 | THE_SEED = p.floor(p.random(9999999)); 16 | p.randomSeed(THE_SEED); 17 | 18 | p.noFill(); 19 | p.background('#e7e7db'); 20 | p.stroke(20, 10); 21 | p.strokeWeight(0.7); 22 | p.smooth(); 23 | 24 | palette = [p.color(80, 55, 83, 20), p.color(21, 142, 121, 20)]; 25 | 26 | for (var j = 0; j < number_of_particle_sets; j++) { 27 | let ps = []; 28 | for (var i = 0; i < number_of_particles; i++) { 29 | ps.push( 30 | new Particle( 31 | p.randomGaussian(p.width / 2, 150), 32 | //border + p.random(p.width - 2 * border), 33 | //border + p.random(p.height - 2 * border), 34 | p.randomGaussian(p.height / 2, 150), 35 | p.random(p.TWO_PI) 36 | ) 37 | ); 38 | } 39 | particle_sets.push(ps); 40 | } 41 | }; 42 | 43 | p.draw = function() { 44 | particle_sets.forEach(function(particles, index) { 45 | particles.forEach(function(particle) { 46 | particle.update(index); 47 | particle.display(index); 48 | }); 49 | }); 50 | }; 51 | 52 | p.keyPressed = function() { 53 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 54 | }; 55 | 56 | class Particle { 57 | constructor(x, y, phi) { 58 | this.pos = p.createVector(x, y); 59 | this.angle = phi; 60 | this.val = 0; 61 | } 62 | 63 | update(index) { 64 | this.pos.x += p.cos(this.angle); 65 | this.pos.y += p.sin(this.angle); 66 | 67 | let nx = 1.8 * p.map(this.pos.x, 0, p.width, -1, 1); 68 | let ny = 1.8 * p.map(this.pos.y, 0, p.height, -1, 1); 69 | 70 | let n = p.createVector(nx, ny); 71 | 72 | let nval = (p.noise(n.x, n.y - 23) + 0.045 * (index - number_of_particle_sets / 2)) % 1; 73 | 74 | this.angle += 3 * p.map(nval, 0, 1, -1, 1); 75 | this.val = nval; 76 | } 77 | 78 | display(index) { 79 | if (this.val > 0.482 && this.val < 0.518) { 80 | //p.stroke(palette[index % palette.length]); 81 | // if (index === 2) p.stroke(255, 25, 20, 20); 82 | // else p.stroke(20, 10); 83 | p.push(); 84 | p.translate(this.pos.x, this.pos.y); 85 | p.rotate(this.angle); 86 | p.point(0, 0); 87 | p.pop(); 88 | } 89 | } 90 | } 91 | }; 92 | new p5(sketch); 93 | -------------------------------------------------------------------------------- /trace3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perspective Trace 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let border = 200; 4 | let number_of_particles = 6000; 5 | let number_of_particle_sets = 6; 6 | let particle_sets = []; 7 | let tick = 0; 8 | 9 | let palette; 10 | 11 | let nzoom = 10; 12 | 13 | p.setup = function() { 14 | p.createCanvas(1500, 1000); 15 | THE_SEED = p.floor(p.random(9999999)); 16 | p.randomSeed(THE_SEED); 17 | 18 | p.noFill(); 19 | p.background('#e7e7db'); 20 | p.stroke(20, 10); 21 | p.strokeWeight(0.7); 22 | p.smooth(); 23 | 24 | palette = [p.color(80, 55, 83, 20), p.color(21, 142, 121, 20)]; 25 | 26 | for (var j = 0; j < number_of_particle_sets; j++) { 27 | let ps = []; 28 | for (var i = 0; i < number_of_particles; i++) { 29 | ps.push( 30 | new Particle( 31 | p.randomGaussian(p.width / 2, 180), 32 | //border + p.random(p.width - 2 * border), 33 | //border + p.random(p.height - 2 * border), 34 | p.randomGaussian(3 * p.height / 5, 180), 35 | p.random(p.TWO_PI) 36 | ) 37 | ); 38 | } 39 | particle_sets.push(ps); 40 | } 41 | }; 42 | 43 | p.draw = function() { 44 | particle_sets.forEach(function(particles, index) { 45 | particles.forEach(function(particle) { 46 | particle.update(index); 47 | particle.display(index); 48 | }); 49 | }); 50 | }; 51 | 52 | p.keyPressed = function() { 53 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 54 | }; 55 | 56 | class Particle { 57 | constructor(x, y, phi) { 58 | this.pos = p.createVector(x, y); 59 | this.angle = phi; 60 | this.val = 0; 61 | } 62 | 63 | update(index) { 64 | this.pos.x += p.cos(this.angle); 65 | this.pos.y += p.sin(this.angle); 66 | 67 | let nx = p.map(this.pos.y, 0, p.height, 3, 0.5) * p.map(this.pos.x, 0, p.width, -1, 1); 68 | let ny = 2 * p.map(this.pos.y, 0, p.height, 3, 0.5) * p.map(this.pos.y, 0, p.height, -1, 1); 69 | 70 | let n = p.createVector(nx, ny); 71 | 72 | let nval = (p.noise(n.x + 42, n.y - 23) + 0.045 * (index - number_of_particle_sets / 2)) % 1; 73 | 74 | this.angle += 3 * p.map(nval, 0, 1, -1, 1); 75 | this.val = nval; 76 | } 77 | 78 | display(index) { 79 | if (this.val > 0.482 && this.val < 0.518) { 80 | //p.stroke(palette[index % palette.length]); 81 | // if (index === 2) p.stroke(255, 25, 20, 20); 82 | // else p.stroke(20, 10); 83 | p.push(); 84 | p.translate(this.pos.x, this.pos.y); 85 | p.rotate(this.angle); 86 | p.point(0, 0); 87 | p.pop(); 88 | } 89 | } 90 | } 91 | }; 92 | new p5(sketch); 93 | -------------------------------------------------------------------------------- /trace4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Perspective Trace 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace4/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let border = 0; 4 | let number_of_particles = 4000; 5 | let number_of_particle_sets = 8; 6 | let particle_sets = []; 7 | let tick = 0; 8 | 9 | let palette; 10 | 11 | let nzoom = 10; 12 | 13 | p.setup = function() { 14 | p.createCanvas(1400, 900); 15 | THE_SEED = p.floor(p.random(9999999)); 16 | p.randomSeed(THE_SEED); 17 | 18 | p.noFill(); 19 | p.background('#e7e7db'); 20 | p.stroke(20, 10); 21 | p.strokeWeight(0.7); 22 | p.smooth(); 23 | 24 | palette = [p.color(80, 55, 83, 20), p.color(21, 142, 121, 20)]; 25 | 26 | for (var j = 0; j < number_of_particle_sets; j++) { 27 | let ps = []; 28 | for (var i = 0; i < number_of_particles; i++) { 29 | ps.push( 30 | new Particle( 31 | p.randomGaussian(p.width / 2, 160), 32 | //border + p.random(p.width - 2 * border), 33 | //border + p.random(p.height - 2 * border), 34 | p.randomGaussian(3 * p.height / 5, 160), 35 | p.random(p.TWO_PI) 36 | ) 37 | ); 38 | } 39 | particle_sets.push(ps); 40 | } 41 | }; 42 | 43 | p.draw = function() { 44 | particle_sets.forEach(function(particles, index) { 45 | particles.forEach(function(particle) { 46 | particle.update(index); 47 | particle.display(index); 48 | }); 49 | }); 50 | }; 51 | 52 | p.keyPressed = function() { 53 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 54 | }; 55 | 56 | class Particle { 57 | constructor(x, y, phi) { 58 | this.pos = p.createVector(x, y); 59 | this.angle = phi; 60 | this.val = 0; 61 | this.altitude = 0; 62 | } 63 | 64 | update(index) { 65 | this.pos.x += p.cos(this.angle); 66 | this.pos.y += p.sin(this.angle); 67 | 68 | let nx = p.map(this.pos.y, 0, p.height + 100, 4, 0.5) * p.map(this.pos.x, 0, p.width, -1, 1); 69 | let ny = 2 * p.map(this.pos.y, 0, p.height + 100, 4, 1) * p.map(this.pos.y, 0, p.height, -1, 1); 70 | 71 | let n = p.createVector(nx, ny); 72 | 73 | this.altitude = p.noise(n.x + 423.2, n.y - 231.1); 74 | let nval = (this.altitude + 0.045 * (index - number_of_particle_sets / 2)) % 1; 75 | 76 | this.angle += 3 * p.map(nval, 0, 1, -1, 1); 77 | this.val = nval; 78 | } 79 | 80 | display(index) { 81 | if (this.val > 0.482 && this.val < 0.518) { 82 | //p.stroke(palette[index % palette.length]); 83 | //if (index === 2) p.stroke(255, 25, 20, 20); 84 | //else p.stroke(20, 10); 85 | p.push(); 86 | p.translate(this.pos.x, this.pos.y + 10 - this.altitude * 40 * p.map(this.pos.y, 0, p.height + 100, 1, 4)); 87 | p.rotate(this.angle); 88 | p.point(0, 0); 89 | p.pop(); 90 | } 91 | } 92 | } 93 | }; 94 | new p5(sketch); 95 | -------------------------------------------------------------------------------- /trace5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Chalk Trace 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trace5/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let THE_SEED; 3 | let number_of_particles = 3500; 4 | let number_of_particle_sets = 12; 5 | let particle_sets = []; 6 | let tick = 0; 7 | 8 | let palette; 9 | 10 | p.setup = function() { 11 | p.createCanvas(1200, 1200); 12 | THE_SEED = p.floor(p.random(9999999)); 13 | p.randomSeed(THE_SEED); 14 | p.background('#111'); 15 | 16 | palette = [ 17 | p.color(254, 242, 145, 20), 18 | p.color(253, 198, 103, 20), 19 | p.color(182, 245, 200, 20), 20 | p.color(84, 146, 76, 20), 21 | p.color(221, 124, 81, 20), 22 | p.color(253, 158, 149, 20), 23 | p.color(112, 184, 214, 20) 24 | ]; 25 | 26 | for (var j = 0; j < number_of_particle_sets; j++) { 27 | let ps = []; 28 | let col = palette[p.floor(p.random(palette.length))]; 29 | for (var i = 0; i < number_of_particles; i++) { 30 | ps.push( 31 | new Particle(p.randomGaussian(p.width / 2, 150), p.randomGaussian(p.height / 2, 150), p.random(p.TAU), col) 32 | ); 33 | } 34 | particle_sets.push(ps); 35 | } 36 | }; 37 | 38 | p.draw = function() { 39 | particle_sets.forEach(function(particles, index) { 40 | particles.forEach(function(particle) { 41 | particle.update(index); 42 | particle.display(index); 43 | }); 44 | }); 45 | }; 46 | 47 | p.keyPressed = function() { 48 | if (p.keyCode === 80) p.saveCanvas('sketch_' + THE_SEED, 'jpeg'); 49 | }; 50 | 51 | class Particle { 52 | constructor(x, y, phi, col) { 53 | this.pos = p.createVector(x, y); 54 | this.altitude = 0; 55 | this.val = 0; 56 | this.angle = phi; 57 | this.col = col; 58 | } 59 | 60 | update(index) { 61 | this.pos.x += p.cos(this.angle); 62 | this.pos.y += p.sin(this.angle); 63 | 64 | let nx = 1.1 * p.map(this.pos.y, 0, p.height, 4, 0.2) * p.map(this.pos.x, 0, p.width, -1, 1); 65 | let ny = 3.1 * p.map(this.pos.y, 0, p.height, 4, 0.2) * p.map(this.pos.y, 0, p.height, -1, 1); 66 | 67 | this.altitude = p.noise(nx + 423.2, ny - 231.1); 68 | this.val = (this.altitude + 0.035 * (index - number_of_particle_sets / 2)) % 1; 69 | this.angle += 3 * p.map(this.val, 0, 1, -1, 1); 70 | } 71 | 72 | display(index) { 73 | if (this.val > 0.485 && this.val < 0.515) { 74 | p.stroke(this.col); 75 | p.push(); 76 | p.translate(this.pos.x, this.pos.y + 50 - this.altitude * 100 * p.map(this.pos.y, 0, p.height, 0.2, 4)); 77 | p.rotate(this.angle); 78 | p.point(0, 0); 79 | p.pop(); 80 | } 81 | } 82 | } 83 | }; 84 | new p5(sketch); 85 | -------------------------------------------------------------------------------- /trunk/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Melting Trunk 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trunk/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | 3 | let rings = 50; 4 | let dim_init = 50; 5 | let dim_delta = 4; 6 | 7 | let chaos_init = .2; 8 | let chaos_delta = 0.12; 9 | let chaos_mag = 20; 10 | 11 | let ox = p.random(10000); 12 | let oy = p.random(10000); 13 | let oz = p.random(10000); 14 | 15 | p.setup = function(){ 16 | p.createCanvas(800, 800); 17 | p.strokeWeight(1); 18 | p.stroke(0); 19 | p.smooth(); 20 | p.noFill(); 21 | //p.noLoop(); 22 | 23 | } 24 | 25 | p.draw = function() { 26 | p.clear(); 27 | p.translate(p.width / 2, p.height / 2); 28 | display(); 29 | } 30 | 31 | function display(){ 32 | //ox+=0.04; 33 | oy-=0.02; 34 | oz+=0.01; 35 | for(let i = 0; i < rings; i ++){ 36 | p.beginShape(); 37 | for(let angle = 0; angle < 360; angle++){ 38 | let radian = p.radians(angle); 39 | let radius = (chaos_mag * getNoiseWithTime(radian, chaos_delta * i + chaos_init, oz)) + (dim_delta * i + dim_init); 40 | p.vertex(radius * p.cos(radian), radius * p.sin(radian)); 41 | } 42 | p.endShape(p.CLOSE); 43 | } 44 | } 45 | 46 | function getNoise (radian, dim){ 47 | let r = radian % p.TWO_PI; 48 | if(r < 0.0){r += p.TWO_PI;} 49 | return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim); 50 | } 51 | 52 | function getNoiseWithTime (radian, dim, time){ 53 | let r = radian % p.TWO_PI; 54 | if(r < 0.0){r += p.TWO_PI;} 55 | return p.noise(ox + p.cos(r) * dim , oy + p.sin(r) * dim, oz + time); 56 | } 57 | } 58 | 59 | new p5(sketch); 60 | -------------------------------------------------------------------------------- /trunk2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Random Trunk 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trunk2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | 3 | let rings = 30; 4 | let dim_init = 5; 5 | let dim_delta = 5; 6 | 7 | let chaos_init = .1; 8 | let chaos_delta = 0.005; 9 | let chaos_mag = 8; 10 | 11 | let ox = p.random(10000); 12 | let oy = p.random(10000); 13 | let oz = p.random(10000); 14 | 15 | p.setup = function(){ 16 | p.createCanvas(800, 800); 17 | p.strokeWeight(1); 18 | p.stroke(0); 19 | p.noFill(); 20 | p.smooth(); 21 | //p.noLoop(); 22 | 23 | } 24 | 25 | p.draw = function() { 26 | p.clear(); 27 | p.translate(p.width / 2, p.height / 2); 28 | display(); 29 | } 30 | 31 | function display(){ 32 | ox+=0.005; 33 | oy-=0.005; 34 | oz+=0.005; 35 | for(let i = 0; i < rings; i ++){ 36 | p.beginShape(); 37 | for(let angle = 0; angle < 360; angle++){ 38 | let radian = p.radians(angle); 39 | let radius = (chaos_mag * i * getNoiseWithTime(radian, chaos_delta * i + chaos_init, oz)) + (dim_delta * i) + dim_init; 40 | p.vertex(radius * p.cos(radian), radius * p.sin(radian)); 41 | } 42 | p.endShape(p.CLOSE); 43 | } 44 | } 45 | 46 | function getNoise (radian, dim){ 47 | let r = radian % p.TWO_PI; 48 | if(r < 0.0){r += p.TWO_PI;} 49 | return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim); 50 | } 51 | 52 | function getNoiseWithTime (radian, dim, time){ 53 | let r = radian % p.TWO_PI; 54 | if(r < 0.0){r += p.TWO_PI;} 55 | return p.noise(ox + p.cos(r) * dim , oy + p.sin(r) * dim, oz + time); 56 | } 57 | } 58 | 59 | new p5(sketch); 60 | -------------------------------------------------------------------------------- /trunk3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Color Rings 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /trunk3/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let grid_size = 5; 3 | let rings = 80; 4 | let dim_init = 15; 5 | 6 | let chaos_init = 0.05; 7 | let chaos_delta = 0.01; 8 | let chaos_mag = 80; 9 | 10 | let ox,oy,oz; 11 | 12 | p.setup = function(){ 13 | p.createCanvas(800, 800); 14 | p.strokeWeight(1); 15 | p.colorMode(p.HSB); 16 | p.blendMode(p.ADD); 17 | p.stroke(250,10,20,0.5); 18 | p.noFill(); 19 | p.smooth(); 20 | p.noLoop(); 21 | } 22 | 23 | p.draw = function() { 24 | p.clear(); 25 | p.translate(-p.width/(grid_size * 2), -p.height/(grid_size * 2)); 26 | for (var i = 0; i < grid_size; i++) { 27 | p.translate(0, p.height / grid_size, 0); 28 | p.push() 29 | for (var j = 0; j < grid_size; j++) { 30 | p.translate(p.width / grid_size, 0); 31 | display(); 32 | } 33 | p.pop(); 34 | } 35 | } 36 | 37 | function display(){ 38 | ox = p.random(10000); 39 | oy = p.random(10000); 40 | oz = p.random(10000); 41 | for(let i = 0; i < rings; i+=2){ 42 | p.beginShape(); 43 | for(let angle = 0; angle < 360; angle++){ 44 | let radian = p.radians(angle); 45 | let radius = (chaos_mag * getNoiseWithTime(radian, (chaos_delta * i) + chaos_init, oz)) + dim_init; 46 | p.vertex(radius * p.cos(radian), radius * p.sin(radian)); 47 | } 48 | p.endShape(p.CLOSE); 49 | } 50 | } 51 | 52 | function getNoise (radian, dim){ 53 | let r = radian % p.TWO_PI; 54 | if(r < 0.0){r += p.TWO_PI;} 55 | return p.noise(ox + p.cos(r) * dim, oy + p.sin(r) * dim); 56 | } 57 | 58 | function getNoiseWithTime (radian, dim, time){ 59 | let r = radian % p.TWO_PI; 60 | if(r < 0.0){r += p.TWO_PI;} 61 | return p.noise(ox + p.cos(r) * dim , oy + p.sin(r) * dim, oz + time); 62 | } 63 | } 64 | 65 | new p5(sketch); 66 | -------------------------------------------------------------------------------- /utils/elementsjs/index.js: -------------------------------------------------------------------------------- 1 | // Returns distance between two points. 2 | export function distance_between_points(p1, p2) { 3 | return Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2)); 4 | } 5 | 6 | // Maps value x from interval [x0,x1] to [y0, y1]; 7 | export function map_value(x, x0, x1, y0, y1) { 8 | return y0 + (y1 - y0) * ((x - x0) / (x1 - x0)); 9 | } 10 | 11 | // Returns point at given ratio between two given points 12 | export function on_line(p1, p2, r) { 13 | let x = map_value(r, 0, 1, p1[0], p2[0]); 14 | let y = map_value(r, 0, 1, p1[1], p2[1]); 15 | return [x, y]; 16 | } 17 | 18 | // Returns an array of distances between pairs of points in order, given an array of points. 19 | function distance_array(points) { 20 | let distances = []; 21 | for (let i = 1; i < points.length; i++) { 22 | let line_length = distance_between_points(points[i - 1], points[i]); 23 | distances.push(line_length); 24 | } 25 | return distances; 26 | } 27 | 28 | // Returns points at given ratio on multi-point path. 29 | export function on_path(points, r) { 30 | let distances = distance_array(points); 31 | let total_dist = distances.reduce((sum, x) => sum + x); 32 | let r_length = total_dist * (r % 1); 33 | 34 | let acc = 0; 35 | for (let i = 0; i < distances.length; i++) { 36 | if (acc + distances[i] > r_length) { 37 | let line_r = map_value(r_length, acc, acc + distances[i], 0, 1); 38 | return on_line(points[i], points[i + 1], line_r); 39 | } 40 | acc += distances[i]; 41 | } 42 | } 43 | 44 | // Returns angle of line, given two points on line. 45 | export function angle_of_direction(p1, p2) { 46 | return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]); 47 | } 48 | 49 | // Returns point, given base point, distance and angle. 50 | export function point_at_distance_and_angle(p1, dist, rad) { 51 | return [p1[0] + dist * Math.cos(rad), p1[1] + dist * Math.sin(rad)]; 52 | } 53 | 54 | // Returns point at given distance from base point, toward direction point. 55 | export function point_at_distance_towards_direction(p1, dist, pdir) { 56 | return point_at_distance_and_angle(p1, dist, angle_of_direction(p1, pdir)); 57 | } 58 | 59 | export function intersection_of_two_circles(p1, r1, p2, r2) { 60 | let d = distance_between_points(p1, p2); 61 | 62 | // Circles are seperate. 63 | if (d > r1 + r2) return []; 64 | // One circle is contained within the other. 65 | if (d < Math.abs(r1 - r2)) return []; 66 | // Circles are coincident. 67 | if (d === 0 && r1 === r2) return []; 68 | 69 | let a = (Math.pow(r1, 2) - Math.pow(r2, 2) + Math.pow(d, 2)) / (2 * d); 70 | let b = 71 | Math.sqrt(4 * Math.pow(d, 2) * Math.pow(r1, 2) - Math.pow(Math.pow(d, 2) - Math.pow(r2, 2) + Math.pow(r1, 2), 2)) / 72 | d; 73 | 74 | let p1p2_angle = angle_of_direction(p1, p2); 75 | let ab_angle = angle_of_direction([0, 0], [a, b]); 76 | 77 | return point_at_distance_and_angle(p1, r1, p1p2_angle + ab_angle); 78 | } 79 | -------------------------------------------------------------------------------- /utils/elementsjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elementsjs", 3 | "version": "1.0.0", 4 | "description": "A collection of neat geometrical utility functions.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "geometry", 11 | "utility", 12 | "trigonometry" 13 | ], 14 | "author": "Kjetil Golid", 15 | "license": "MIT" 16 | } 17 | -------------------------------------------------------------------------------- /voronoi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Voronoi Dish 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /voronoi/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let n = 400; 3 | let points; 4 | let hue_offset; 5 | let tick; 6 | 7 | p.setup = function() { 8 | let c = p.createCanvas(1000,1000); 9 | c.style("border-radius:50%"); 10 | p.colorMode(p.HSB); 11 | p.noStroke(); 12 | init(); 13 | } 14 | 15 | p.draw = function() { 16 | points.forEach(function(pnt) { 17 | if(tick < pnt.dim) { 18 | p.fill((hue_offset + pnt.hue) % 360, 75, 90); 19 | p.ellipse(pnt.pos.x, pnt.pos.y, pnt.dim - tick); 20 | } 21 | }, this); 22 | tick++; 23 | } 24 | 25 | function init () { 26 | points = []; 27 | tick = 0; 28 | hue_offset = p.random(360); 29 | 30 | let centre = p.createVector(p.width/2, p.height/2); 31 | for (var i = 0; i < n; i++) { 32 | let pos = p.createVector( p.randomGaussian(p.width/2, p.width/4), p.randomGaussian(p.height/2, p.height/4)); 33 | let centre_dist = p5.Vector.dist(centre, pos); 34 | points.push({ 35 | pos:pos, 36 | hue:p.random(130) + centre_dist / 8, 37 | dim: 50 + centre_dist / 1.8 38 | }); 39 | } 40 | } 41 | } 42 | new p5(sketch); -------------------------------------------------------------------------------- /voronoi2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Voronoi Network 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /voronoi2/sketch.js: -------------------------------------------------------------------------------- 1 | let sketch = function(p) { 2 | let n = 1000; 3 | let points; 4 | let hue_offset; 5 | let tick; 6 | 7 | p.setup = function() { 8 | let c = p.createCanvas(1000,1000); 9 | c.style("border-radius:50%"); 10 | p.colorMode(p.HSB); 11 | p.noStroke(); 12 | init(); 13 | } 14 | 15 | p.draw = function() { 16 | points.forEach(function(pnt) { 17 | if(tick < pnt.dim) { 18 | p.fill((160 + tick/ 1.8) % 360, 90, 100 - tick / 1.9); 19 | p.ellipse(pnt.pos.x, pnt.pos.y, pnt.dim - tick); 20 | } 21 | }, this); 22 | tick++; 23 | } 24 | 25 | function init () { 26 | points = []; 27 | tick = 0; 28 | hue_offset = p.random(360); 29 | 30 | let centre = p.createVector(p.width/2, p.height/2); 31 | for (var i = 0; i < n; i++) { 32 | let pos = p.createVector( p.randomGaussian(p.width/2, p.width/2.5), p.randomGaussian(p.height/2, p.height/3)); 33 | let centre_dist = p5.Vector.dist(centre, pos); 34 | points.push({ 35 | pos:pos, 36 | dim: 60 + centre_dist / 2.5 37 | }); 38 | } 39 | } 40 | } 41 | new p5(sketch); -------------------------------------------------------------------------------- /weave/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Weave Pattern 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /weave2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Weave Pattern 2 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: { 3 | perlin: './perlin/sketch.js', 4 | gaussian: './gaussian/sketch.js', 5 | trace: './trace-perspective/sketch.js', 6 | tracebig: './trace-perspective-big/sketch.js' 7 | }, 8 | 9 | output: { 10 | path: __dirname + '/dist', 11 | filename: '[name].bundle.js' 12 | }, 13 | 14 | module: { 15 | loaders: [{ test: /\.js$/, exclude: /node_modules/, loaders: ['./hot'] }] 16 | } 17 | }; 18 | --------------------------------------------------------------------------------