├── .gitattributes ├── README.md ├── square_grid ├── img.png └── square_grid.pde └── square_grid_sliders ├── img.png ├── square_grid_sliders.pde └── ControlFrame.pde /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # intro to processing 2 | Files for the tutorial: https://youtu.be/wghDDYnIFM0 3 | -------------------------------------------------------------------------------- /square_grid/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hapiel/intro_to_processing/HEAD/square_grid/img.png -------------------------------------------------------------------------------- /square_grid_sliders/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hapiel/intro_to_processing/HEAD/square_grid_sliders/img.png -------------------------------------------------------------------------------- /square_grid/square_grid.pde: -------------------------------------------------------------------------------- 1 | int squareSize = 40; 2 | int gridSize = 10; 3 | 4 | size(800, 800); 5 | background(0); 6 | blendMode(ADD); 7 | 8 | int i = 0; 9 | while ( i < 10) { 10 | i += 1; 11 | println(i); 12 | int j = 0; 13 | while (j < 10) { 14 | print(j + " "); 15 | j += 1; 16 | int posX = i * 70; 17 | int posY = j * 70; 18 | //float dist = random(20); 19 | float dist = 10; 20 | //float col = random(255); 21 | float col = 255; 22 | float sqSz = random(60); 23 | fill(col, 0, 0); 24 | rect(posX, posY, sqSz, sqSz); 25 | fill(0, col, 0); 26 | rect(posX + 10, posY + dist, sqSz, sqSz); 27 | fill(0, 0, col); 28 | rect(posX + 20, posY + dist * 2, sqSz, sqSz); 29 | } 30 | println(); 31 | } 32 | 33 | save("img.png"); 34 | -------------------------------------------------------------------------------- /square_grid_sliders/square_grid_sliders.pde: -------------------------------------------------------------------------------- 1 | import controlP5.*; 2 | 3 | ControlFrame cf; 4 | 5 | int squareSizeMin = 0; 6 | float squareSizeRandom = 40; 7 | int gridSize = 10; 8 | int myBlendMode = 2; 9 | int distanceMin = 10; 10 | float distanceRandom = 0; 11 | int colorMin = 255; 12 | float colorRandom = 0; 13 | int border = 50; 14 | int bgCol = 0; 15 | 16 | int strokeWMin = 3; 17 | float strokeWRandom = 0; 18 | int alph = 255; 19 | 20 | float rainbow = 0; 21 | 22 | void settings(){ 23 | size(800, 800); 24 | } 25 | 26 | void setup() { 27 | 28 | cf = new ControlFrame(this, 400, 800, "Controls"); 29 | surface.setLocation(420, 10); 30 | } 31 | 32 | void draw() { 33 | 34 | randomSeed(0); 35 | 36 | 37 | float totalDist = (distanceMin + distanceRandom); 38 | background(bgCol); 39 | blendMode(myBlendMode); 40 | 41 | 42 | int i = 0; 43 | while ( i < gridSize) { 44 | 45 | int j = 0; 46 | while (j < gridSize) { 47 | 48 | strokeWeight(strokeWMin + random(strokeWRandom)); 49 | float posX = border + (i * (width - (border * 2 ) - totalDist)/gridSize); 50 | float posY = border + (j * (height - (border * 2 ) - totalDist)/gridSize); 51 | float dist = distanceMin + random(distanceRandom); 52 | float col = colorMin + random(colorRandom); 53 | float sqSz = squareSizeMin + random(squareSizeRandom); 54 | fill(col, 0, 0, alph); 55 | rect(posX + rainbow * cos(millis() / 100 * rainbow) * 4, posY, sqSz, sqSz); 56 | fill(0, col, 0, alph); 57 | rect(posX + dist, posY + dist + rainbow * sin(millis() / 100 * rainbow) * 5, sqSz, sqSz); 58 | fill(0, 0, col, alph); 59 | rect(posX + rainbow * cos(millis() / 100 * rainbow + PI) * 4 * 2, posY + dist * 2, sqSz, sqSz); 60 | j += 1; 61 | } 62 | i += 1; 63 | } 64 | } 65 | 66 | //void mouseClicked(){ 67 | // save("img.png"); 68 | //} 69 | -------------------------------------------------------------------------------- /square_grid_sliders/ControlFrame.pde: -------------------------------------------------------------------------------- 1 | 2 | class ControlFrame extends PApplet { 3 | 4 | int w, h; 5 | PApplet parent; 6 | ControlP5 cp5; 7 | 8 | public ControlFrame(PApplet _parent, int _w, int _h, String _name) { 9 | super(); 10 | parent = _parent; 11 | w=_w; 12 | h=_h; 13 | PApplet.runSketch(new String[]{this.getClass().getName()}, this); 14 | } 15 | 16 | public void settings() { 17 | size(w, h); 18 | } 19 | 20 | public void setup() { 21 | surface.setLocation(10, 10); 22 | cp5 = new ControlP5(this); 23 | 24 | 25 | //int squareSizeMin = 0; 26 | //float squareSizeRandom = 40; 27 | //int gridSize = 10; 28 | //int blendMode = 2; 29 | //int distanceMin = 10; 30 | //float distanceRandom = 0; 31 | //int colorMin = 255; 32 | //float colorRandom = 0; 33 | //int border = 50; 34 | 35 | cp5.addSlider("square Size Min") 36 | .plugTo(parent, "squareSizeMin") 37 | .setRange(0, 100) 38 | .setValue(0) 39 | .setPosition(80, 50) 40 | .setSize(200, 20); 41 | 42 | 43 | cp5.addSlider("square Size Random") 44 | .plugTo(parent, "squareSizeRandom") 45 | .setRange(0, 100) 46 | .setValue(40) 47 | .setPosition(80, 80) 48 | .setSize(200, 20); 49 | 50 | 51 | cp5.addSlider("grid Size") 52 | .plugTo(parent, "gridSize") 53 | .setRange(0, 50) 54 | .setValue(10) 55 | .setPosition(80, 130) 56 | .setSize(200, 20); 57 | 58 | cp5.addSlider("distance Min") 59 | .plugTo(parent, "distanceMin") 60 | .setRange(0, 30) 61 | .setValue(10) 62 | .setPosition(80, 180) 63 | .setSize(200, 20); 64 | 65 | cp5.addSlider("distance Random") 66 | .plugTo(parent, "distanceRandom") 67 | .setRange(0, 50) 68 | .setValue(0) 69 | .setPosition(80, 210) 70 | .setSize(200, 20); 71 | 72 | cp5.addSlider("color Min") 73 | .plugTo(parent, "colorMin") 74 | .setRange(0, 255) 75 | .setValue(255) 76 | .setPosition(80, 260) 77 | .setSize(200, 20); 78 | 79 | cp5.addSlider("color Random") 80 | .plugTo(parent, "colorRandom") 81 | .setRange(0, 255) 82 | .setValue(0) 83 | .setPosition(80, 290) 84 | .setSize(200, 20); 85 | 86 | cp5.addSlider("alpha") 87 | .plugTo(parent, "alph") 88 | .setRange(0, 255) 89 | .setValue(255) 90 | .setPosition(80, 320) 91 | .setSize(200, 20); 92 | 93 | cp5.addSlider("stroke min") 94 | .plugTo(parent, "strokeWMin") 95 | .setRange(0, 20) 96 | .setValue(3) 97 | .setPosition(80, 370) 98 | .setSize(200, 20); 99 | 100 | cp5.addSlider("stroke random") 101 | .plugTo(parent, "strokeWRandom") 102 | .setRange(0, 20) 103 | .setValue(0) 104 | .setPosition(80, 400) 105 | .setSize(200, 20); 106 | 107 | cp5.addSlider("border") 108 | .plugTo(parent, "border") 109 | .setRange(0, 200) 110 | .setValue(50) 111 | .setPosition(80, 450) 112 | .setSize(200, 20); 113 | 114 | cp5.addSlider("bg col") 115 | .plugTo(parent, "bgCol") 116 | .setRange(0, 255) 117 | .setValue(0) 118 | .setPosition(80, 500) 119 | .setSize(200, 20); 120 | 121 | cp5.addSlider("blend Mode") 122 | .plugTo(parent, "myBlendMode") 123 | .setRange(1, 4) 124 | .setValue(2) 125 | .setPosition(80, 550) 126 | .setSize(200, 20); 127 | 128 | cp5.addSlider("Subscribe") 129 | .plugTo(parent, "rainbow") 130 | .setRange(0, 1) 131 | .setValue(0) 132 | .setPosition(80, 600) 133 | .setSize(200, 30); 134 | } 135 | void draw() { 136 | background(0); 137 | } 138 | } 139 | --------------------------------------------------------------------------------