* Written by Bhaswar Chakraborty

 * With kind help of

 * Moumi Samanta and Sayan Dutta

**/

​

​

// p5.disableFriendlyErrors = true

​

const aspectRatio = Math.sqrt(2) // For A4 Pages

// const w = 1754

const w = 800

​

let m, u, angle, stripR

​

function preload() {

  scottFont = loadFont("Canterbury.ttf")

  regFontIt = loadFont('Open_Sans.ttf')

  devFont = loadFont('dev.ttf')

  boldIt = loadFont('OSBI.ttf')

  logo = loadImage("logo.png")

}

​

function setup() {

  createCanvas(w, h = w / aspectRatio);

  // Tweak ---

  u = h / 4

  m = u / 10

  angle = radians(60)

  stripR = 5

  // ---------

  ch = h - 2 * m

  cw = w - 2 * m

  fh = u

  noLoop()

  strokeCap(SQUARE)

}

​

function draw() {

  // Translate to the margin

  translate(m, m)

  // background(255)

  // Body

  fill("#1E1E1E")

  noStroke()

  rect(m, fh - m, cw - 2 * m, ch - fh + m)

  // Flaps

  drawFlap()

  // Hinge

  drawHinge()

  // Texts and borders

  push()

  translate(m, fh)

  noStroke()

  rect(2 * m, u / 2, cw - 6 * m, m / 2)

  rect(2 * m, ch - fh - u, cw - 6 * m, m / 2)

  rect((cw - 2 * m) / 4, ch - fh - u + m, m / 2, u - 2 * m + m / 2)

  rect(3 * (cw - 2 * m) / 4, ch - fh - u + m, m / 2, u - 2 * m + m / 2)

  // Logo and Title

  textFont(scottFont)

  textAlign(CENTER, CENTER)

  textSize(floor(u / 3.5355))

  text("Scottish Church College", 0, 0, cw - 2 * m, u / 2)

  image(logo, 3 * m, m, u / 3 * (3 / 4), u / 3)

  // Heads

  textFont(regFontIt)

  textSize(floor(u / 9.428))

  textAlign(LEFT, TOP)

  text("DIRECTOR:", 2 * m, ch - fh - u + m, u, u)

  text("PROD.", (cw - 2 * m) / 4 + m / 2 + m, ch - fh - u + m, u, u)

  text("DATE:", 3 * (cw - 2 * m) / 4 + m / 2 + m, ch - fh - u + m, u, u)

  textFont(devFont)

  textSize(floor(u / 2.21))

  textAlign(CENTER, CENTER)

  text("तमाशा", (cw - 2 * m) / 4 + m / 2 + m, ch - fh - u + m, (cw - 2 * m) / 2 - 2 * m, u - 2 * m)

  // Content

  textSize(floor(u / 8.388))

  textFont(regFontIt)

  textAlign(CENTER, CENTER)

  text("Hey, ______________________________________ ,\nwe are excited to have you in our department!\nGood luck on your journey ahead.", 2 * m + u, u / 2 + m / 2, cw - 6 * m - 2 * u, u + 2 * m)

  // Director and dates

  textFont(boldIt)

  textSize(floor(u / 8.388))

  textAlign(CENTER, CENTER)

  text("Dept. of\n Computer Science", 2 * m - m, ch - fh - u + m, u + 2 * m, u - 2 * m)

  // fill(255, 30)

  // rect(2 * m, ch - fh - u + m, u, u - 2 * m)

  text("26/11/22", 3 * (cw - 2 * m) / 4 + m / 2 + m, ch - fh - u + m, u, u - 2 * m)

  pop()

}

​

​

​

​

​

​

function drawFlap() {

  fill(20)

  noStroke()

  rect(m, 0, cw - m, fh / 2)

  rect(m, fh / 2, cw - m, fh / 2)

  push()

  fill(100)

  rect(m, fh / 2 - m / 8, cw - m, 3)

  pop()

  let stripeL = fh * 0.4

  let stripeH = fh / 2 - m

  let stripeUnit = stripeL + (stripeH / sin(angle)) * cos(angle)

  fill("#fff")

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

    drawUpperStripe(1.5 * fh + i * stripeUnit, m / 2, fh * 0.4, fh / 2 - m)

    drawLowerStripe(1.5 * fh + i * stripeUnit, fh - m / 2, fh * 0.4, fh / 2 - m) 

  }

}

​

function drawHinge() {

  const hingePoints = [

    createVector(0, - m / 6), 

    createVector(fh / 2, - m / 6),

    createVector(1.3 * fh, 0.65 * fh),

    createVector(1.3 * fh, fh + m / 6),

    createVector(0, fh + m / 6)

  ]

  push()

  const gradient = drawingContext.createRadialGradient(fh / 2, fh / 2, 30, fh / 2 + 2 * m, fh / 2 + 2 * m, fh)

  gradient.addColorStop(0, "#1e1e1e");

  gradient.addColorStop(1, "#010101");

  drawingContext.shadowColor = "black";

  drawingContext.shadowBlur = 20;

  drawingContext.fillStyle = gradient;

  drawRounded(hingePoints, 20)

  pop()

  fill("#ccc")

  circle(2 * m, 2 * m, m)

  circle(2 * m, fh - 2 * m, m)

  circle(1.3 * fh - 2 * m, fh - 2 * m, m)

}

​

function drawUpperStripe(x, y, l_, h_) {

  push()

  noStroke()

  translate(x, y)

  const stripePoints = [

    createVector(0, 0),

    createVector(l_, 0),

    createVector(l_ + (h_ / sin(angle)) * cos(angle), h_),

    createVector((h_ / sin(angle)) * cos(angle), h_)

  ]

  drawRounded(stripePoints, stripR)

  pop()

}

​

function drawLowerStripe(x, y, l_, h_) {

  push()

  noStroke()

  translate(x, y)

  const stripePoints = [

    createVector(0, 0),

    createVector(l_, 0),

    createVector(l_ + (h_ / sin(angle)) * cos(angle), -h_),

    createVector((h_ / sin(angle)) * cos(angle), -h_)

  ]

  drawRounded(stripePoints, stripR)

  pop()

}

​

function drawRounded(points, r) {

  beginShape()

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

    const a = points[i]

    const b = points[(i+1) % points.length]

    const c = points[(i+2) % points.length]

    const ba = a.copy().sub(b).normalize()

    const bc = c.copy().sub(b).normalize()

    // Points in the direction the corner is accelerating towards

    const normal = ba.copy().add(bc).normalize()

    // Shortest angle between the two edges

    const theta = ba.angleBetween(bc)

    // Find the circle radius that would cause us to round off half

    // of the shortest edge. We leave the other half for neighbouring

    // corners to potentially cut.

    const maxR = min(a.dist(b), c.dist(b))/2 * abs(sin(theta / 2))

    const cornerR = min(r, maxR)

    // Find the distance away from the corner that has a distance of

    // 2*cornerR between the edges

    const distance = abs(cornerR / sin(theta / 2))

    // Approximate an arc using a cubic bezier

    const c1 = b.copy().add(ba.copy().mult(distance))

    const c2 = b.copy().add(bc.copy().mult(distance))

    const bezierDist = 0.5523 // https://stackoverflow.com/a/27863181

    const p1 = c1.copy().sub(ba.copy().mult(2*cornerR*bezierDist))

    const p2 = c2.copy().sub(bc.copy().mult(2*cornerR*bezierDist))

    vertex(c1.x, c1.y)

    bezierVertex(

      p1.x, p1.y,

      p2.x, p2.y,

      c2.x, c2.y

    )

  }

  endShape(CLOSE)

}