BORDERS

// @energy_sketch // @adnerwbell // andrewbellart.co.uk

// An attempt at recreating a drawing project with code as a learning exercise.

// Original project was a layered png project > fxhash.xyz/generative/slug/borders

// You can find the fxhash version of this project here > fxhash.xyz/generative/slug/borders-revisited

​

let col = ["#f9edd4", "#fca39c", "#ee3e3e", "#fbc569", "#6163ba", "#559272"]; 

​

function setup() {

  w = min(windowWidth, windowHeight);

  createCanvas(w, w);

  let dens = displayDensity();

  pixelDensity(dens);

  m = w/8;

  offs = w-m;

  rectMode(CENTER);

  wblAmount = random(1);

  if (wblAmount <= 0.1) { 

    wbl = m;

  } else if (wblAmount <= 0.6) {

    wbl = m/2;    

  } else {

    wbl = m/3;

  }

  noLoop(); 

  background(random(col));

  strokeWeight(w/240);

  stroke(0);

  strokeJoin(ROUND);

  border1();

  border2();

  border3();

  centr();

  dotTexture(1);

}

​

// Custom Line && Shapes

function dLine(x1, y1, x2, y2) {

  let d = dist(x1, y1, x2, y2);

  let pnts = floor(d/(m/2));

  let wb = wbl/w;

  let prevX = x1;

  let prevY = y1;

  for (let i = 0; i < pnts; i++) {

    let disX = random(-wbl, wbl);

    let disY = random(-wbl, wbl);

    let x = prevX + (x2-prevX) * (i+1)/pnts;

    let y = prevY + (y2-prevY) * (i+1)/pnts;  

    x += disX * wb;

    y += disY * wb;

    line(prevX, prevY, x, y);

    prevX = x;

    prevY = y;    

  }

}

​

function dRect(x, y, w, h) {

  dLine(x-w/2, y-h/2, x+w/2, y-h/2);

  dLine(x+w/2, y-h/2, x+w/2, y+h/2);

  dLine(x+w/2, y+h/2, x-w/2, y+h/2);

  dLine(x-w/2, y+h/2, x-w/2, y-h/2);

}

​

function dTriangle(x1, y1, x2, y2, x3, y3) {

  dLine(x1, y1, x2, y2);

  dLine(x2, y2, x3, y3);

  dLine(x3, y3, x1, y1);

}

​

function dQuad(x1, y1, x2, y2, x3, y3, x4, y4) {

  dLine(x1, y1, x2, y2);

  dLine(x2, y2, x3, y3);

  dLine(x3, y3, x4, y4);

  dLine(x4, y4, x1, y1);

}

​

function dCirc(x, y, s) {

  push();

  cirOffs = s/200;

  cw = wbl/200;

  translate(x, y);  

  beginShape();

  for (let a = 0; a < TWO_PI*2; a+=random(0.1, 0.1+cw)) {

    let xoff = map(cos(a), -1, 1, 0, 0.1);

    let yoff = map(sin(a), -1, 1, 0, 0.1);

    let r = map(noise(xoff, yoff), 0, 1, s, s+cirOffs);

    let x = r * cos(a);

    let y = r * sin(a);

    vertex(x, y);

    }

  endShape(CLOSE);

  pop();

}

​

function drawStar(x, y, points, r1, r2) {

  let angle = TWO_PI / points;

  let halfAngle = angle / 2.0;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * r2;

    let sy = y + sin(a) * r2;

    vertex(sx, sy);

    sx = x + cos(a + halfAngle) * r1;

    sy = y + sin(a + halfAngle) * r1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

​

// ********************************** BORDER 1 

​

function border1() {  

  let a = random(0, 0.19);

  let b = random(0.2, 0.69);

  let c = random(0.7, 1);

  let b1 = random(1);

  if (b1 <= a) {

    noFill();

    dRect(w/2, w/2, m*7, m*7); 

  } else if (b1 <= b) {

    push();

    strokeWeight(w/200);

    dts = random([12, 18, 24, 48]);

    for (let i=0; i < dts+1; i++) {

      t1 = m/2 + (offs/dts) * i;

      b1 = w-m/2 - (offs/dts) * i;

      push();

      rotate(random(-0.001, 0.001));

      point(t1, m/2);

      point(m/2, t1);

      point(b1, w-m/2);

      point(w-m/2, b1);

      pop();

    }

    pop();

  } else {

  }

}

​

// ********************************** BORDER 2

​

function border2() {

  fill(random(col));

  rect(w/2, w/2, m*6, m*6);

  let b2 = random(0, 1);

​

  if (b2 <= 0.25) {

    let div = random([2, 3, 4, 6, 8, 12]);

    for (let i = 0; i < div; i++) {

      x = (m*6/div) * i;

      dLine(m, m+x, m*7, m+x);

      dLine(m+x, m, m+x, m*7);

    }

  } else if (b2 <= 0.3) {

    for (let i = 0; i < 6; i++) {

      for (let j = 0; j < 6; j++) {

        x = m * i + m*1.5;

        y = m * j + m*1.5;

        dRect(x, y, m, m);

      }

    }

    dLine(m*1.5, m, m*1.5, m*7);

    dLine(m*6.5, m, m*6.5, m*7);

  } else if (b2 <= 0.35) {

    for (let i = 0; i < 6; i++) {

      for (let j = 0; j < 6; j++) {

        x = m * i + m*1.5;

        y = m * j + m*1.5;

        dRect(x, y, m, m);

      }

    }

    dLine(m, m*1.5, m*7, m*1.5);

    dLine(m, m*6.5, m*7, m*6.5);

  } else if (b2 <= 0.4) {

    dLine(m, m, m*7, m*7);

    dLine(m, m*7, m*7, m);

    dLine(m, m*4, m*7, m*4);

    dLine(m*4, m, m*4, m*7);

  } else if (b2 <= 0.45) {

    for (let i = 0; i < 9; i++) {

      pos = (m*i) * i * 0.07;

      dLine(m, pos+m, m*7, pos+m);

    }

  } else if (b2 <= 0.5) {

    for (let i = 0; i < 9; i++) {

      pos = (m*i) * i * 0.07;

      dLine(m, w-m-pos, m*7, w-m-pos);

    }

  } else if ( b2 <= 0.55) {

    for (let i = 0; i < 5; i++) {

      x = m * i + m*2;

      dLine(x, m, x, offs);      

    }

    let k = random(1);

    if (k <= 0.5) {

      for (let i = 0; i < 9; i++) {

        pos = (m*i) * i * 0.07;

        dLine(m*6, pos+m, m*7, pos+m);

      }

      for (let i = 0; i < 9; i++) {

        pos = (m*i) * i * 0.07;

        dLine(m, w-m-pos, m*2, w-m-pos);

      }

    } else {

      for (let i = 0; i < 9; i++) {

        pos = (m*i) * i * 0.07;

        dLine(m*6, w-m-pos, m*7, w-m-pos);

      }

      for (let i = 0; i < 9; i++) {

        pos = (m*i) * i * 0.07;

        dLine(m, pos+m, m*2, pos+m);

      }

    }

  } else if (b2 <= 0.6) {

    dRect(w/2, w/2, m*5, m*5);

    dLine(m,m,m*7,m*7);

    dLine(m,m*7,m*7,m);

  } else if (b2 <= 0.65) {

    dLine(w/2, m, w/2, m*7);

    dLine(m, w/2, m*7, w/2);

    dTriangle(w/2, m, m*6, m*2, m*2, m*2);

    dTriangle(w/2, m*7, m*2, m*6, m*6, m*6);

    dTriangle(m, m, m*2, w/2, m, offs);

    dTriangle(offs, m, m*6, w/2, offs, offs);

  } else if (b2 <= 0.7) {

    dRect(w/2, w/2, m*5, m*5);

    dLine(m*2, m, m*2, m*7);

    dLine(m*6, m, m*6, m*7);

    dLine(m, m*2, m*7, m*2);

    dLine(m, m*6, m*7, m*6);

  } else if (b2 <= 0.75) {

    push();

    drawingContext.clip();

    rect(w/2, w/2, m*6, m*6);

    for (let i = 0; i < 45; i++) {

      rotate(random(1));

      dRect(random(w), random(w), random(m, m*2), random(m, m*2));

    }

    pop();

  } else if (b2 <= 0.8) {

    push();

    drawingContext.clip();

    rect(w/2, w/2, m*6, m*6);

    for (let i = 0; i < 12; i++) {

      noFill();

      dCirc(random(w), random(w), random(m/4, m));

    }

    pop();

  } else if (b2 <= 0.85) {

    dRect(w/2, w/2, m*5, m*4);

    dRect(w/2, w/2, m*4, m*5);

    dRect(w/2, w/2, m*4, m*6);

    dRect(w/2, w/2, m*6, m*4);

  } else if (b2 <= 0.9) {

    cut = random(1);

    for (let i = 0; i < 6; i++) {

      x = m * i + m;

      if (cut <= 0.5) {

        dLine(x, m, x, m*7);

      } else {

        dLine(m, x, m*7, x);

      }

      for (let j = 0; j < 6; j++) {

        y = m * j + m;

        if (cut <= 0.5) {

          dLine(x, y+random(m), x+m, y+random(m));

        } else {

          dLine(x+random(m), y, x+random(m), y+m);

        }

      }

    }

  } else if (b2 <= 0.95) {

    for (let i=0; i<6; i++) {

      x = m * i;

      dLine(m*1.25, m+x, m*1.75, m*1.5+x);

      dLine(m*1.75, m*1.5+x, m*1.25, m*2+x);

      dLine(m*6.25, m*1.5+x, m*6.75, m*2+x);

      dLine(m*6.75, m+x, m*6.25, m*1.5+x);

    }

  } else {

    push();

    b2_star_points = random([12, 16]);

    noFill();

    rect(w/2, w/2, m*6, m*6);

    drawingContext.clip();

    for (let x = 0; x < 2; x++) {

      for (let y = 0; y < 2; y++) {

      drawStar(x*(m*6)+m, y*(m*6)+m, b2_star_points, m*1.25, m/2);

      }

    }

    pop();

    dLine(w/2, m, w/2, m*7);

    dLine(m, w/2, m*7, w/2);

  }

  dRect(w/2, w/2, m*6, m*6);

}

​

// ********************************** BORDER 3

​

function border3() {

  fill(random(col));

  rect(w/2, w/2, m*4, m*4);

  let b3 = random(1);

  if (b3 <= 0.25) {

    let div = random([2, 3, 4, 6, 8, 12, 16]);

    for (let i=0; i<div; i++) {

      x = (m*4/div) * i;

      dLine(m*2, m*2+x, m*6, m*2+x);

      dLine(m*2+x, m*2, m*2+x, m*6);

    }

  } else if (b3 <= 0.3) { 

    let dir = random(1);

    for (let i=0; i<4; i++) {

      for (let j=0; j<4; j++) {

        x = m * i + m*2.5;

        y = m * j + m*2.5;

        dRect(x, y, m, m);

        if (dir <= 0.49) {

          dLine(x-m/2, y-m/2, x+m/2, y+m/2);

        } else {

          dLine(x+m/2, y-m/2, x-m/2, y+m/2);

        }

      }

    }

  } else if (b3 <= 0.35) {

    for (let i=0; i<2; i++) {

      for (let j=0; j<3; j++) {

        y = (m*1.25) * j;

        push();

        rotate(random(-0.002, 0.002));

        rect(m*2.5, m*2.75+y, m/2, m/1.5, m/4, m/4, 0, 0);

        rect(m*5.5, m*2.75+y, m/2, m/1.5, m/4, m/4, 0, 0);

        pop();

      }

    }

    dLine(m*3, m*2, m*3, m*6);

    dLine(m*4, m*2, m*4, m*6);

    dLine(m*5, m*2, m*5, m*6);

  } else if (b3 <= 0.4) {

    let dir = random(1);

    for (let i = 0; i < 4; i++) {

      for (let j = 0; j < 4; j++) {

        x = (m) * i + m*2.5;

        y = (m) * j + m*2.5;

        dRect(x, y, m, m);

        }

      }

    if (dir <= 0.49) {

      dLine(m*2.5, m*2, m*2.5, m*6);

      dLine(m*5.5, m*2, m*5.5, m*6);

    } else {

      dLine(m*2, m*2.5, m*6, m*2.5);

      dLine(m*2, m*5.5, m*6, m*5.5);    

    } 

  } else if (b3 <= 0.45) {

    dLine(m*2, m*2, m*6, m*6);

    dLine(m*6, m*2, m*2, m*6);

  } else if (b3 <= 0.5) {

    dLine(m*2, m*2, m*6, m*6);

    dLine(m*6, m*2, m*2, m*6);

    noFill();

    dCirc(w/2, w/2, m*2);

    dCirc(w/2, w/2, m*1.45);

    push();

    let pnts = random(1);

    if (pnts <= 0.75) {

      push();

      translate(w/2, w/2);

      for (let a = 0; a < 360; a += 30) {

        let angle = radians(a);

        let x = 0 + cos(angle) * m*1.72;

        let y = 0 + sin(angle) * m*1.72;

        dCirc(x, y, m/16);

        }

      pop();

    } else {

      push();

      translate(w/2, w/2);

      for (let a = 0; a < 360; a += 60) {

        let angle = radians(a);

        let x = 0 + cos(angle) * m*1.72;

        let y = 0 + sin(angle) * m*1.72;

        dCirc(x, y, m/16);

      }

      pop();

    }

  } else if (b3 <= 0.55) {

    dRect(w/2, w/2, m*3, m*3);

    let rnd = random([0, m/4]);

    for (let i = 0; i < 4; i++) {

      for (let j = 0; j < 4; j++) {

        x = m * i;

        y = m * j;

        push();

        rotate(random(-0.005, 0.005));

        rect(m*2.5+x, m*2.5+y, m/4, m/4, rnd);

        pop();

      }

    }

  } else if (b3 <= 0.6) {

    dLine(m*2, m*2, m*6, m*6);

    dLine(m*6, m*2, m*2, m*6);

    push();

    noFill();

    rect(w/2, w/2, m*4, m*4);

    drawingContext.clip();

    let ran = (random([6, 8, 10, 12]));

    for (let i = 0; i < ran; i++) {

      spacing = (w/2)/ran;

      let r = spacing * i;

      dCirc(w/2, w/2, m+r);

    }

    pop();

    dRect(w/2, w/2, m*4, m*4);

  } else if (b3 <= 0.65) {

    for (let j = 0; j < 6; j++) {

      y = (m-m/3) * j;

      dCirc(m*2.25, m*2.33+y, m/12);

      dCirc(m*5.75, m*2.33+y, m/12);

    }

    dQuad(m*2.5, m*2, m*2.5, m*6, m*3, m*5, m*3, m*3);

    dQuad(m*5.5, m*2, m*5.5, m*6, m*5, m*5, m*5, m*3); 

  } else if (b3 <= 0.7) {

    dRect(w/2, w/2, m*3, m*3)

    dRect(w/2, w/2, m*2.5, m*3)

    dRect(w/2, w/2, m*2, m*3);

    for (let j = 0; j < 3; j++) {

      x = (m-m/2.25) * j;

      dCirc(m*3.45+x, m*2.75, m/12);

      dCirc(m*3.45+x, m*5.25, m/12);

    }

  } else if (b3 <= 0.75) {

    push();

    rect(w/2, w/2, m*4, m*4);

    drawingContext.clip();

    noFill();

    rotate(random(-0.5, 0.5));

    rand = random(m/3, m/1.5);

    for (let i = 0; i < 50; i++) {

      y = (rand) * i;

      dLine(0-w, y-w, w*2, y);

    }

    pop();

  } else if (b3 <= 0.8) {

    push();

    rect(w/2, w/2, m*4, m*4);

    drawingContext.clip();

    noFill();

    wav = random(m/2, m);

    wavWidth = random(0.01, 0.1);

    for (let i=0; i<16; i++) {

      beginShape();

      vertex(0, w);

      for (let x=0; x<w; x++) {

        angle = 0 + x * wavWidth;

        y = map(sin(angle), -1, 1, wav, wav*2);

        y2 = m/2 * i;

        vertex(x, y + y2);

        }

      vertex(w, w);

      endShape();

    }

    pop();

  } else if (b3 <= 0.85) {

    for (let i = 0; i < 6; i++) {

      pos = (m*i) * i * 0.11;

      dLine(m*2, (m*2)+pos, m*6, (m*2)+pos);

    }

  } else if (b3 <= 0.9) {

    for (let i = 0; i < 6; i++) {

      pos = (m*i) * i * 0.11;

      dLine(m*2, (m*6)-pos, m*6, (m*6)-pos);

    }

  } else if (b3 <= 0.95) {

    for (let i=0; i<4; i++) {

      x = m * i;

      dLine(m*2.25, m*2+x, m*2.75, m*2.5+x);

      dLine(m*2.75, m*2.5+x, m*2.25, m*3+x);

      dLine(m*5.25, m*2.5+x, m*5.75, m*3+x);

      dLine(m*5.75, m*2+x, m*5.25, m*2.5+x);

    } 

  } else {

    dRect(w/2, w/2, m*2, m*3);

    dRect(w/2, w/2, m*2, m*4);

    dRect(w/2, w/2, m*3, m*4);

  }

  dRect(w/2, w/2, m*4, m*4);

}

​

// ********************************** CENTER

​

function centr() {

  stroke(0);

  fill(random(col));

  rect(w/2, w/2, m*2, m*2);

  let C = random(1);

  // clock

  if (C <= 0.15) {

    push();

    translate(w/2, w/2);

    dCirc(0, 0, random(m/4, m/1.5));

    let num = random([1, 2, 3, 4, 5]);

    for (let i = 0; i < num; i++) {

      let radius = m-m/4;

      let angle = random(0, 2 * PI);

      let x1 = radius * cos(angle);

      let y1 = radius * sin(angle);

      line(0, 0, x1, y1);

      circle(x1, y1, m/8);

      }

    dCirc(0, 0, m/10);

    pop();

  // flower

  } else if (C <= 0.2) {

    push();

    let size = m-m/3;

    d = random([1]);

    n = random([4, 6]);

    let k = n / d;

    translate(w/2, w/2);

    cw = wbl/1000;

    beginShape();

    for (let a=0; a < TWO_PI * d; a +=random(0.01, 0.01+cw)) {

      let r = size * cos(k * a);

      let x = r * cos(a);

      let y = r * sin(a);

      fill("#f9edd4");

      vertex(x, y);

      }

    endShape(CLOSE);

    fill("#fbc569")

    dCirc(0, 0, random(m/5, m/8));

    pop();

  // cross box  

  } else if (C <= 0.3) {

    dLine(m*3, w/2, m*5, w/2);

    dLine(w/2, m*3, w/2, m*5);

    rect(w/2, w/2, m, m);

    dLine(w/2-m/2, w/2-m/2, w/2+m/2, w/2+m/2);

    dLine(w/2+m/2, w/2-m/2, w/2-m/2, w/2+m/2);

    dRect(w/2, w/2, m, m);

  // rings

  } else if (C <= 0.4) {

    let ran = (random([1, 2, 3, 4]));

    for (let i = 0; i < 2; i++) {

      for (let j = 0; j < 2; j++) {

        for (let n = 0; n < ran; n++) {

          let posX = m * i;

          let posY = m * j;

          let r = m/8 * n;

          dCirc(w/2-m/2+posX, w/2-m/2+posY, m/2-r);

        }

      }

    }

  // landscape

  } else if (C <= 0.5) {

    beginShape();

    vertex(m*3, random(m*4.5, m*4.9));

    vertex(random(m*3.25, m*4), random(m*4.5, m*4.85));

    vertex(random(m*4, m*4.8), random(m*4.5, m*4.85));

    vertex(m*5, random(m*4.5, m*4.9));

    endShape();

    dRect(w/2, m*4.94, m*2, m/8);  

    fill("#f9edd4");

    dCirc(w/2, random(w/2-m/2, w/2-m/6), random(m/3, m/4));

  // rose patterns

  } else if (C <= 0.6) {

    push();

    let size = m-m/4;

    d = random([3, 4, 8, 9]);

    n = random([6]);

    let k = n / d;

    cw = wbl/400;

    translate(w/2, w/2);

    beginShape();

    for (let a = 0; a < TWO_PI * d; a +=random(0.01, 0.01+cw)) {

      r = size * cos(k * a);

      x = r * cos(a);

      y = r * sin(a);

      vertex(x, y);

      }

    endShape(CLOSE);

    pop();

  // pyramid

  } else if (C <= 0.65) {

    dTriangle(w/2, w/2, w/2+m, w/2+m, w/2-m, w/2+m);

    dLine(w/2, w/2, w/2, w/2+m);

    fill("#f9edd4");

    dCirc(w/2, random(w/2-m/3, w/2-m/2), m/4);

  // star  

  } else if (C <= 0.7) {

    push();

    fill("#f9edd4");

    translate(w/2, w/2);

    let ran = random(m/1.25, m/4);

    points = random([8, 10, 12]);

    let angle = TWO_PI / points;

    let halfAngle = angle / 2.0;

    beginShape();

    for (let a = 0; a < TWO_PI; a += angle) {

      let sx = 0 + cos(a) * ran/2;

      let sy = 0 + sin(a) * ran/2;

      vertex(sx, sy);

      sx = 0 + cos(a + halfAngle) * ran;

      sy = 0 + sin(a + halfAngle) * ran;

      vertex(sx, sy);

    }

    endShape(CLOSE);

    pop();

  // circle pack  

  } else if (C <= 0.75) {

    push();

    rect(w/2, w/2, offs-m*5, offs-m*5);

    drawingContext.clip();

    let circles = []; 

    while (circles.length < 30) {

      let circle = {

        x: random(m*3, m*5),

        y: random(m*3, m*5),

        r: random(m/6, m/2)

      };

      let overlap = false;

      for (let j = 0; j < circles.length; j++) {

        let other = circles[j];

        let d = dist(circle.x, circle.y, other.x, other.y);

        if (d < circle.r + other.r/2) {

          overlap = true;

        }

      }

      if (!overlap) {

        circles.push(circle);

      }

    }

    for (let i = 0; i < circles.length; i++) {

      ellipse(circles[i].x, circles[i].y, circles[i].r);

    }

    noFill();

    dRect(w/2, w/2, offs-m*5, offs-m*5);

    pop();

  // burst

  } else if (C <= 0.8) {

    cnr = random(m/2, m/4);

    rect(w/2-m/2, w/2-m/2, m, m, 0, 0, cnr, 0);

    rect(w/2+m/2, w/2-m/2, m, m, 0, 0, 0, cnr);

    rect(w/2-m/2, w/2+m/2, m, m, 0, cnr, 0, 0);

    rect(w/2+m/2, w/2+m/2, m, m, cnr, 0, 0, 0);

  // balance

  } else if (C <= 0.85) {

    push();

    noFill();

    rad = random(m/8, m/4)

    dis = random(m/2, m/4);

    dLine(w/2-m, w/2, w/2+m, w/2);