cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <canvas id="canvas" width="400" height="300">No canvas. Bummer.</canvas>

<form id="controls">
  <label>
    <input id="redWall" type="checkbox" checked />
    Red Wall
  </label>
  
  <label>
    <input id="blueWall" type="checkbox" checked />
    Blue Wall
  </label>
  
  <label>
    <input id="yellowWall" type="checkbox" checked />
    Yellow Wall
  </label>
  
  <label>
    <input id="linesPerDrawing" type="range" min="3" max="149" value="31" />
    Number of Lines:
    <span id="linesPerDrawingDisplay">31</span>
  </label>
  
  <label>
    <input id="showGrid" type="checkbox" />
    Show Grid
  </label>
  
  <a href="http://jlzych.com/2017/01/08/sol-lewitt-wall-drawing-273/" target="_blank" style="float: right;">About</a>
</form>
    
            
          
!
            
              html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

#controls {
  background-color: #222;
  color: #efefef;
  border-top: 2px solid #777;
  
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 500px;
  margin: 0;
  padding: 10px;
}

label, a {
  font-family: "Proxima Nova", "Verdana", sans-serif;
  margin-right: 10px;
}

a, a:visited {
  color: #efefef;
}
            
          
!
            
              var canvas = document.getElementById("canvas"),
    controls = document.getElementById("controls"),
    linesPerDrawingInput = document.getElementById("linesPerDrawing"),
    linesPerDrawingDisplay = document.getElementById("linesPerDrawingDisplay");

if (canvas.getContext) {
  var context = canvas.getContext("2d"),
      controlValues = getControlValues(),
      defaultGridSize = 17;
  
  function getControlValues() {
    return {
      includeRedWall: document.getElementById("redWall").checked,
      includeBlueWall: document.getElementById("blueWall").checked,
      includeYellowWall: document.getElementById("yellowWall").checked,
      linesPerDrawing: linesPerDrawingInput.value,
      includeGrid: showGrid.checked
    };
  }
  
  // Re-draw walls any time the form is updated
  controls.addEventListener("change", function() {
    controlValues = getControlValues();
    drawWalls(
      controlValues.includeRedWall,
      controlValues.includeBlueWall,
      controlValues.includeYellowWall,
      controlValues.linesPerDrawing,
      defaultGridSize,
      controlValues.includeGrid
    );
  });
  
  // Show people the range input value as it's updating
  linesPerDrawing.addEventListener("input", function() {
    linesPerDrawingDisplay.textContent = linesPerDrawingInput.value;
  });
  
  drawWalls(
    controlValues.includeRedWall,
    controlValues.includeBlueWall,
    controlValues.includeYellowWall,
    controlValues.linesPerDrawing,
    defaultGridSize,
    controlValues.includeGrid
  );
  
  // window.addEventListener("resize", function() {
  //   drawWalls(1, 1, 1, 33);
  // }, false);
  
  function drawWalls(redWall, blueWall, yellowWall, totalLinesPerDrawing, gridSize, includeGrid) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - controls.offsetHeight;
    context.fillStyle = "white";
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    // Set up walls
    var numWalls = 0;
    numWalls = redWall ? numWalls + 1 : numWalls;
    numWalls = blueWall ? numWalls + 1 : numWalls;
    numWalls = yellowWall ? numWalls + 1 : numWalls;
    var numLinesPerColor = numWalls ? Math.floor(totalLinesPerDrawing / numWalls) : 0;

    // Set up the grid
    var gridSize = gridSize ? gridSize : defaultGridSize;
    var numVerticalLines = canvas.width / gridSize;
    var numHorizontalLines = canvas.height / gridSize;
    
    if (includeGrid) {
      drawGrid();
    }
    
    // Draw each wall
    if (redWall) {
      drawWall([
        {x: canvas.width / 2, y: 0},              // Top
        {x: canvas.width, y: canvas.height / 2},  // Right
        {x: canvas.width / 2, y: canvas.height},  // Bottom
        {x: 0, y: canvas.height / 2}],            // Left
        "rgba(255,0,0, 0.6)"
        // "rgba(255, 0, 255, 0.6)" // Magenta
      );
    }
    
    if (blueWall) {
      drawWall([
        {x: 0, y: 0},                         // Top left corner
        {x: canvas.width, y: 0},              // Top right corner
        {x: canvas.width, y: canvas.height},  // Bottom right corner
        {x: 0, y: canvas.height}],            // Bottom left corner
        "rgba(0,0,255, 0.6)"
        // "rgba(0, 255, 255, 0.6)" // Cyan
      ); 
    }

    if (yellowWall) {
      // Draw this wall 4 separate times because there's only one starting point
      var yellowColorString = "rgba(255,255,0, 0.6)";
      drawWall([{x: canvas.width / 2, y: canvas.height / 2}], yellowColorString);
      drawWall([{x: canvas.width / 2, y: canvas.height / 2}], yellowColorString);
      drawWall([{x: canvas.width / 2, y: canvas.height / 2}], yellowColorString);
      drawWall([{x: canvas.width / 2, y: canvas.height / 2}], yellowColorString);
    }
    
    function drawWall(startingPoints, color) {
      // Set blue lines
      context.lineWidth = 1;
      context.strokeStyle = color;

      for (var i = 0; i < numLinesPerColor; i++) {
        startingPoints.forEach(function(point) {
          drawLine(point, getGridPoint());
        });
      } 
    }

    /**
     * Helper functions
     */

    // Returns a random point on the grid
    function getGridPoint() {
      var gridPoint = new Object();
      gridPoint.x = gridSize * Math.floor(Math.random() * numVerticalLines);
      gridPoint.y = gridSize * Math.floor(Math.random() * numHorizontalLines);
      return gridPoint;
    }

    function drawLine(startPoint, endPoint) {
      context.beginPath();
      context.moveTo(startPoint.x, startPoint.y);
      context.lineTo(endPoint.x, endPoint.y);
      context.stroke();
      context.closePath();
    }

    function drawGrid() {
      context.lineWidth = 1;
      context.strokeStyle = "rgba(0,0,0,0.1)";

      for (var i = 1; i < numVerticalLines; i++) {
        drawLine({x: i*gridSize, y: 0}, {x: i*gridSize, y: canvas.height});
      }

      for (var j = 1; j < numHorizontalLines; j++) {
        drawLine({x: 0, y: j*gridSize}, {x: canvas.width, y: j*gridSize});
      }
    }
  }
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console