|
| 1 | +var config = { |
| 2 | + scl: 30, |
| 3 | +}; |
| 4 | +const one = (Math.PI * 2) / 6; |
| 5 | + |
| 6 | +const colors = [ |
| 7 | + '#ff7b00', |
| 8 | + '#ff8800', |
| 9 | + '#ff9500', |
| 10 | + '#ffa200', |
| 11 | + '#ffaa00', |
| 12 | + '#ffb700', |
| 13 | + '#ffc300', |
| 14 | + '#ffd000', |
| 15 | + '#ffdd00', |
| 16 | + '#ffea00' |
| 17 | +]; |
| 18 | + |
| 19 | +const spacing = config.scl / 13 * 6; |
| 20 | + |
| 21 | +function setup() { |
| 22 | + const canvas = document.querySelector('canvas'); |
| 23 | + if (canvas) canvas.remove(); |
| 24 | + createCanvas(window.innerWidth, window.innerHeight); |
| 25 | + frameRate(30); |
| 26 | + background(random(colors)); |
| 27 | + |
| 28 | + const cols = (width / config.scl) + 1; |
| 29 | + const rows = (height / config.scl) + (config.scl * 2); |
| 30 | + |
| 31 | + for (let col = 0; col < cols; col++) { |
| 32 | + for (let row = 0; row < rows; row++) { |
| 33 | + if (row % 2 === 0) { |
| 34 | + //rect(col * config.scl - config.scl / 2, row * config.scl, config.scl); |
| 35 | + hexagon(col, row, config.scl, true); |
| 36 | + } else { |
| 37 | + //rect(col * config.scl, row * config.scl, config.scl); |
| 38 | + hexagon(col, row, config.scl, false); |
| 39 | + } |
| 40 | + } |
| 41 | + } |
| 42 | +} |
| 43 | + |
| 44 | +function hexagon(col, row, scl, odd) { |
| 45 | + fill(random(colors)); |
| 46 | + noStroke(); |
| 47 | + const offset = odd ? -scl / 2 : 0; |
| 48 | + push(); |
| 49 | + translate(col * scl + offset, row * scl - row * scl / 8); |
| 50 | + rotate(map(30, 0, 360, 0, TWO_PI)); |
| 51 | + beginShape(); |
| 52 | + for (let i = 0; i < 6; i++) { |
| 53 | + const angle = i * one; |
| 54 | + const x = cos(angle) * (spacing); |
| 55 | + const y = sin(angle) * (spacing); |
| 56 | + vertex(x, y); |
| 57 | + } |
| 58 | + endShape(); |
| 59 | + pop(); |
| 60 | +} |
| 61 | + |
| 62 | +function keyPressed() { |
| 63 | + if (keyCode === 32) { |
| 64 | + saveCanvas("print.png"); |
| 65 | + } |
| 66 | +} |
0 commit comments