Isometricism

function setup() {

  createCanvas(windowWidth, windowHeight);

  noLoop();

​

}

​

function draw() {

  background('black');

  noStroke();

  blendMode(SCREEN);

  textSize(16);

let allcolours = ['Gray', 'Tomato', 'Coral', 'OrangeRed', 'DarkOrange', 'Orange', 

                    'Purple', 'Maroon', 'CadetBlue', 'PowderBlue', 'DeepSkyBlue', 

                    'LightBlue', 'SkyBlue', 'LightSkyBlue', 'SteelBlue', 'DodgerBlue', 

                    'LightSteelBlue', 'CornflowerBlue', 'RoyalBlue', 'Blue', 'DarkBlue', 'MediumBlue', 

                    'MidnightBlue', 'NavyBlue', 'Brown', 'WebMaroon', 'RosyBrown', 

                    'Sienna', 'Chocolate', 'SaddleBrown', 'SandyBrown', 'Peru', 'Bisque', 

                    'Burlywood', 'Tan', 'BlanchedAlmond', 'NavajoWhite', 'Wheat', 'DarkGoldenrod', 

                    'Goldenrod', 'Cornsilk', 'Olive', 'Aquamarine', 'Turquoise', 'MediumTurquoise', 'Aqua', 

                    'Cyan', 'LightCyan', 'PaleTurquoise', 'DarkTurquoise', 'OliveDrab', 'YellowGreen', 

                    'DarkOliveGreen', 'GreenYellow', 'Chartreuse', 'LawnGreen', 'DarkGreen', 'DarkSeaGreen', 

                    'ForestGreen', 'Green', 'WebGreen', 'LightGreen', 'Lime', 'LimeGreen', 'PaleGreen', 

                    'SeaGreen', 'MediumSeaGreen', 'SpringGreen', 'MediumSpringGreen', 'MediumAquamarine', 

                    'LightSeaGreen', 'DarkCyan', 'Teal', 'Black', 'DarkGray', 'DimGray', 'Gainsboro', 

                    'WebGray', 'LightGray', 'Silver', 'DarkSlateGray', 'LightSlateGray', 'SlateGray', 

                    'DarkRed', 'Firebrick', 'IndianRed', 'LightCoral', 'Red', 'Salmon', 'DarkSalmon', 

                    'LightSalmon', 'Crimson', 'MediumVioletRed', 'DeepPink', 'HotPink', 'PaleVioletRed', 

                    'Pink', 'LightPink', 'Lavender', 'DarkSlateBlue', 'SlateBlue', 'MediumSlateBlue', 'MediumPurple', 

                    'RebeccaPurple', 'BlueViolet', 'Indigo', 'DarkOrchid', 'DarkViolet', 'MediumOrchid', 

                    'DarkMagenta', 'Fuchsia', 'Magenta', 'Plum', 'WebPurple', 'Thistle', 'Violet', 'Orchid', 

                    'Snow', 'White', 'WhiteSmoke', 'MistyRose', 'Seashell', 'Linen', 'AntiqueWhite', 'OldLace', 

                    'FloralWhite', 'Beige', 'Ivory', 'Honeydew', 'MintCream', 'Azure', 'AliceBlue', 'GhostWhite', 

                    'LavenderBlush', 'PeachPuff', 'PapayaWhip', 'Moccasin', 'Gold', 'Khaki', 'LemonChiffon', 

                    'PaleGoldenrod', 'DarkKhaki', 'LightGoldenrod', 'LightYellow', 'Yellow'];

  let iso;

  let v;

  let vx; let vy;

  let cubesize = 58;

  let trax = 100; //horizontal spacing via translate

  let tray = 100; //translate y value

  let cols = 10; //number of cube columns

  let lines = 8; //number of cube rows

  let row = 100; //starting row

  let rowoff= (2*cubesize); //row offset - vertical spacing

​

​

​

function cubemaker (csize) { // first function! csize is cube size

beginShape ();  //left face

  iso=210;

  fill(random(allcolours));

  vertex(0, 0);

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

      v = p5.Vector.fromAngle(radians(iso), csize);

      vx = v.x; vy = v.y;

      vertex(vx, vy);

      iso=iso-60;

      }

vertex(0, 0); 

endShape ()

​

beginShape ();  //right face

  iso=90;

  fill(random(allcolours));

  vertex(0, 0);

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

      v = p5.Vector.fromAngle(radians(iso), csize);

      vx = v.x; vy = v.y;

      vertex(vx, vy);

      iso=iso-60;

      }

  vertex(0, 0); 

  endShape ()

beginShape ();   //top face

      iso=210

      fill(random(allcolours));

      vertex(0, 0);

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

          v = p5.Vector.fromAngle(radians(iso), csize);

          vx = v.x; vy = v.y; //point created from vector

          vertex(vx, vy); //first vertex

          iso=iso+60

          }

      vertex(0, 0); 

    endShape ();

​

} //defines the cubemaking function

for (let r = 0; r<lines; r++) {

      push();

      tray=row;

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

            translate(trax, tray);

            cubemaker (cubesize); //cube size

            tray=0;

          }

      pop();  

      row=row+rowoff;

  } 

​

}