p5-atw-logo

atw-logo.js

let board = {
  x: 10,
  y: 10,
  w: 10,
  h: 10,
  min: {x: 60, y: 40},
  max: 30,
  area: function( x , y ){
    
    this.x = max( this.max, min( (width/2) -(this.min.x/2), min( x, width-x  ) ) );
    this.y = max( this.max, min( (height/2)-(this.min.y/2), min( y, height-y ) ) );
    this.w = max( this.min.x, width  - (2*this.x) );
    this.h = max( this.min.y, height - (2*this.y) );
    
    return {
      x: this.x,
      y: this.y,
      w: this.w,
      h: this.h
    };
  },
  draw: function(){
    fill(255);
    rect( board.x, board.y, board.w, board.h);
  }
};

let grid = {
  cols: 6,
  rows: 1,
  area: {},
  shape: [
    [[0,1],[0,0],[1,1]],
    [[1,0],[3,0]],
    [[2,0],[3,1]],
    [[4,0],[5,1],[5,0],[6,1],[6,0]],
  ],
  calc: function( area ){
    
    this.area = area;
    this.cW = this.area.w / this.cols;
    this.cH = this.area.h / this.rows;
    
  },
  draw: function(){
    
    for (let s of this.shape){
      beginShape();
      for( let p of s ){
        
        vertex(
          this.area.x + (this.cW * p[0]),
          this.area.y + (this.cH * p[1])
        );
        
      }
      endShape(CLOSE);
    }
  
    for( let r = 0; r <= this.rows; r++ ){
      for( let c = 0; c <= this.cols; c++ ){
        
        point(
          this.area.x + (this.cW * c),
          this.area.y + (this.cH * r)
        );  
        
      }
    }
  
  }
};

function setup() {
  createCanvas(400, 400);
  
  noFill();
  strokeWeight(6);
  strokeCap(ROUND);
  strokeJoin(ROUND);
}

function draw() {
  background(200);
  
  grid.calc( board.area( mouseX, mouseY) );
  grid.draw();
  
}