├── .gitattributes ├── images ├── poster_01@2x.png ├── poster_02@2x.png ├── poster_03@2x.png ├── poster_04@2x.png ├── poster_05@2x.png ├── poster_06@2x.png ├── poster_07@2x.png └── poster_08@2x.png ├── js ├── poster_02.js ├── poster_01.js ├── poster_03.js ├── poster_06.js ├── poster_07.js ├── poster_04.js ├── poster_08.js └── poster_05.js └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /images/poster_01@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_01@2x.png -------------------------------------------------------------------------------- /images/poster_02@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_02@2x.png -------------------------------------------------------------------------------- /images/poster_03@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_03@2x.png -------------------------------------------------------------------------------- /images/poster_04@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_04@2x.png -------------------------------------------------------------------------------- /images/poster_05@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_05@2x.png -------------------------------------------------------------------------------- /images/poster_06@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_06@2x.png -------------------------------------------------------------------------------- /images/poster_07@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_07@2x.png -------------------------------------------------------------------------------- /images/poster_08@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Volorf/Processing-Posters/HEAD/images/poster_08@2x.png -------------------------------------------------------------------------------- /js/poster_02.js: -------------------------------------------------------------------------------- 1 | let itter = 1; 2 | let step = 0.1; 3 | 4 | function setup() { 5 | pixelDensity(2); 6 | createCanvas(400, 400); 7 | } 8 | 9 | function draw() { 10 | background(0); 11 | stroke(255); 12 | noFill(); 13 | for (let i = 0; i < itter; i += step) { 14 | let decay = exp(-pow(i, 2)); 15 | strokeWeight(1 * decay); 16 | let radius = 300 * decay; 17 | ellipse(width / 2, height / 2, radius, radius); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /js/poster_01.js: -------------------------------------------------------------------------------- 1 | let margin = 40 2 | let itter = 10 3 | let radius 4 | let step 5 | 6 | function setup() { 7 | pixelDensity(2) 8 | createCanvas(400, 400) 9 | step = (width - margin * 2) / (itter - 1) 10 | noLoop() 11 | } 12 | 13 | function draw() { 14 | background(0) 15 | fill(255); 16 | noStroke(); 17 | for (let y = 0; y < itter; y++) { 18 | for (let x = 0; x < itter; x++) { 19 | radius = random(0, 10); 20 | ellipse(margin + x * step, margin + y * step, radius, radius); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /js/poster_03.js: -------------------------------------------------------------------------------- 1 | let itter = 10000; 2 | let offset = 0; 3 | 4 | function setup() { 5 | pixelDensity(2); 6 | createCanvas(400, 400); 7 | noLoop(); 8 | } 9 | 10 | function draw() { 11 | background(0); 12 | fill(0); 13 | stroke(255); 14 | for (let i = 0; i < itter; i++) { 15 | let x = random(offset, width - offset); 16 | let y = random(offset, height - offset); 17 | let d = dist(width / 2, height / 2, x, y); 18 | let decay = exp(-pow(d / 100, 2)) / sin(d); 19 | ellipse(x, y, decay * 10); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /js/poster_06.js: -------------------------------------------------------------------------------- 1 | let itter = 20 2 | let step 3 | let offset 4 | let strokeOffsetMin = 1 5 | let strokeOffsetMax = 40 6 | 7 | function setup() { 8 | pixelDensity(2) 9 | createCanvas(595, 691) 10 | step = width / (itter - 1) 11 | offset = step / 2 12 | noLoop() 13 | } 14 | 15 | function draw() { 16 | background(0) 17 | for (let x = 0; x < itter; x++) { 18 | stroke(255) 19 | strokeWeight(random(strokeOffsetMin, strokeOffsetMax)) 20 | let offsetX = random(-offset, offset) 21 | let lX = x * step + offsetX 22 | line(lX, 0, lX, height) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /js/poster_07.js: -------------------------------------------------------------------------------- 1 | let itter = 1000 2 | let r = 150 3 | let cX = [] 4 | let cY = [] 5 | let step 6 | 7 | function setup() { 8 | pixelDensity(2) 9 | step = TWO_PI / itter 10 | createCanvas(400, 400) 11 | background(0); 12 | for (let i = 0; i < itter; i++) { 13 | cX.push(cos(step * i) * r) 14 | cY.push(sin(step * i) * r) 15 | } 16 | noLoop() 17 | } 18 | 19 | function draw() { 20 | translate(width / 2, height / 2) 21 | for (let i = 0; i < itter; i++) {} 22 | beginShape() 23 | for (let i = 0; i < itter; i += 1) { 24 | strokeCap(ROUND) 25 | strokeJoin(ROUND) 26 | strokeWeight(0.5) 27 | stroke(255) 28 | noFill() 29 | let rI1 = round(randomGaussian(20, itter)) 30 | let rI2 = round(random(0, itter)) 31 | vertex(cX[rI1], cY[rI1]) 32 | push() 33 | fill(245) 34 | pop() 35 | } 36 | endShape() 37 | } 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Processing Posters I 2 | 3 | Here are p5.js sketches for my posters project. 4 | I used [p5.js](https://p5js.org) to generate a pattern and [Figma](https://www.figma.com) to compose it to a poster. 5 | The project on [Dribbble](https://dribbble.com/Volorf) and [Behance](https://behance.com/Volorf). 6 | 7 | ## How to use the p5.js sketches 8 | Copy/paste [a p5.js sketch](/js) to [the p5.js web editor](https://editor.p5js.org/) to play around with. 9 | 10 | ## Poster I 11 | ![Processing Poster I](/images/poster_01@2x.png) 12 | ## Poster II 13 | ![Processing Poster II](/images/poster_02@2x.png) 14 | ## Poster III 15 | ![Processing Poster III](/images/poster_03@2x.png) 16 | ## Poster IV 17 | ![Processing Poster IV](/images/poster_04@2x.png) 18 | ## Poster V 19 | ![Processing Poster V](/images/poster_05@2x.png) 20 | ## Poster VI 21 | ![Processing Poster VI](/images/poster_06@2x.png) 22 | ## Poster VII 23 | ![Processing Poster VII](/images/poster_07@2x.png) 24 | ## Poster VIII 25 | ![Processing Poster VIII](/images/poster_08@2x.png) 26 | 27 | ## Contacts 28 | * [Dribbble](https://dribbble.com/Volorf) 29 | * [Linkedin](https://www.linkedin.com/in/oleg-frolov-6a6a4752/) 30 | * [Twitter](https://twitter.com/Volorf) 31 | -------------------------------------------------------------------------------- /js/poster_04.js: -------------------------------------------------------------------------------- 1 | let arr = [] 2 | let margin = 40 3 | let col = 32 4 | let gapX = 8 5 | let gapY = 5 6 | let minH = 5 7 | let maxH = 30 8 | let rectWidth 9 | let yLimit 10 | let workHeight 11 | 12 | function setup() { 13 | createCanvas(400, 400) 14 | pixelDensity(2) 15 | workHeight = height - margin * 2 16 | yLimit = height - margin 17 | rectWidth = ((width - margin * 2) - (gapX * (col - 1))) / col 18 | for (let i = 0; i < col; i++) { 19 | arr.push([]) 20 | } 21 | noLoop() 22 | } 23 | 24 | function draw() { 25 | background(0) 26 | noStroke() 27 | fill(255) 28 | 29 | for (let i = 0; i < col; i++) { 30 | let loop = true 31 | let count = 0 32 | while (loop) { 33 | let rH = random(minH, maxH) 34 | arr[i].push(rH) 35 | let controlSum = (arr[i].reduce((a, b) => a + b) + margin + count * gapY) 36 | count++ 37 | if (controlSum > yLimit) { 38 | loop = false 39 | if (rH >= gapY) { 40 | arr[i].pop() 41 | arr[i][arr[i].length - 1] += rH + gapY 42 | } 43 | arr[i][arr[i].length - 1] = arr[i][arr[i].length - 1] - controlSum + yLimit 44 | } 45 | } 46 | } 47 | 48 | for (let _col = 0; _col < col; _col++) { 49 | let sumRects = 0; 50 | for (let _row = 0; _row < arr[_col].length; _row++) { 51 | rect((margin + _col * (rectWidth + gapX)), margin + sumRects + _row * gapY, rectWidth, arr[_col][_row]) 52 | sumRects += arr[_col][_row] 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /js/poster_08.js: -------------------------------------------------------------------------------- 1 | let itter = 16 2 | let margin = 40 3 | let step 4 | 5 | function setup() { 6 | createCanvas(640, 640) 7 | noLoop() 8 | step = (width - margin * 2) / itter 9 | } 10 | 11 | function draw() { 12 | background(0) 13 | for (let y = 0; y < itter; y++) { 14 | for (let x = 0; x < itter; x++) { 15 | push() 16 | translate(x * step + margin, y * step + margin) 17 | let pat = new Pattern(step) 18 | // 0 - half oval, 1 - straight, 2 - diagonal 19 | pat.create(0) 20 | pop() 21 | } 22 | } 23 | 24 | } 25 | 26 | class Pattern { 27 | constructor(step) { 28 | this.width = step 29 | this.height = step 30 | this.step = step 31 | this.arr0 = [0, HALF_PI, PI, PI + HALF_PI] 32 | this.arr1 = [[0,0,this.step,0],[this.step,0,this.step,this.step],[this.step,this.step,0,this.step],[0,this.step,0,0]] 33 | this.arr2 = [[0,0,this.step,this.step],[0,this.step, this.step,0]] 34 | } 35 | create(type) { 36 | noStroke() 37 | fill(255) 38 | push() 39 | switch (type) { 40 | case 0: 41 | let rRot = random(this.arr0) 42 | translate(this.width / 2, this.height / 2) 43 | rotate(rRot) 44 | arc(0, 0, this.width, this.height, 0, PI) 45 | break 46 | case 1: 47 | let rPar = random(this.arr1) 48 | stroke(255) 49 | strokeCap(PROJECT) 50 | strokeWeight(this.step/5) 51 | line(rPar[0], rPar[1], rPar[2], rPar[3]) 52 | break 53 | case 2: 54 | let rPos = random(this.arr2) 55 | stroke(255) 56 | strokeCap(PROJECT) 57 | strokeWeight(this.step/5) 58 | line(rPos[0], rPos[1], rPos[2], rPos[3]) 59 | break 60 | default: 61 | console.log("the switch is broken") 62 | } 63 | pop() 64 | 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /js/poster_05.js: -------------------------------------------------------------------------------- 1 | let cols = 10 2 | let rows = 10 3 | let boxSize = 20 4 | let gap 5 | let rotStep 6 | let angle = 0 7 | let fCubes = [] 8 | 9 | function setup() { 10 | pixelDensity(2) 11 | createCanvas(800, 800, WEBGL) 12 | background(0) 13 | stroke(255) 14 | strokeWeight(2) 15 | noFill() 16 | 17 | gap = (width - boxSize * 3 - (boxSize * cols)) / (cols - 1) 18 | ortho() 19 | rotStep = PI / 120 20 | for (let y = 0; y < rows; y++) { 21 | for (let x = 0; x < cols; x++) { 22 | push() 23 | translate(-width / 2 + boxSize * 2 + boxSize * x + gap * x, 0, 0) 24 | translate(0, -height / 2 + boxSize * 2 + boxSize * y + gap * y, 0) 25 | let fCube = new FCube(boxSize) 26 | fCube.randomize() 27 | fCube.create() 28 | fCubes.push(fCube) 29 | pop() 30 | } 31 | } 32 | } 33 | 34 | function draw() { 35 | background(0) 36 | for (let y = 0; y < rows; y++) { 37 | for (let x = 0; x < cols; x++) { 38 | push() 39 | translate(-width / 2 + boxSize * 2 + boxSize * x + gap * x, 0, 0) 40 | translate(0, -height / 2 + boxSize * 2 + boxSize * y + gap * y, 0) 41 | fCubes[y * cols + x].animate(angle) 42 | pop() 43 | } 44 | } 45 | angle += rotStep 46 | } 47 | 48 | class FCube { 49 | constructor(size) { 50 | this.size = size 51 | this.rotX = random(-PI, PI) 52 | this.rotY = random(-PI, PI) 53 | this.rotZ = random(-PI, PI) 54 | this.cdX = random([-1, 1]) 55 | this.cdY = random([-1, 1]) 56 | this.cdZ = random([-1, 1]) 57 | } 58 | 59 | create() { 60 | box(this.size) 61 | } 62 | 63 | randomize() { 64 | rotateX(this.rotX) 65 | rotateY(this.rotY) 66 | rotateZ(this.rotZ) 67 | } 68 | 69 | animate(step) { 70 | rotateX(this.rotX + step * this.cdX) 71 | rotateY(this.rotY + step * this.cdY) 72 | rotateZ(this.rotZ + step * this.cdZ) 73 | box(this.size) 74 | } 75 | } 76 | --------------------------------------------------------------------------------