Sketching With Code 2016

Problem Set 04:

Due 10-11 (7 days)

Reading:

Eloquent JavaScript 3 (functions)

Reference:

ps-04

The purpose of this weeks problem set is to get familiar with drawing with the Canvas. Also to practice working variables, loops and control structures.

2016-SWC/ps-04/index.html.
- Include your name, the date, and the problem set number (ps-04).
- Include links to each of the exercises below.
- Style this index page using CSS.
- 15 points.

b – 'broken grid':

Create a greyscale composition using HTML and JavasScript Canvas that explores the concept of a 'grid'. Grids are by definition regular, repetitive, dull, and inert. Add interest by violating the grid in unexpected ways.
Your CSS, HTML, and JavaScript should be in separate files.
If you are compelled by this assignment or make interesting discoveries provide links to up to 3 additional grid variations.

b – '33 non-intersecting lines'

Create a greyscale composition using HTML and JavasScript using exactly 33 non-intersecting line segments.
Your CSS, HTML, and JavaScript should be in separate files.
Stretch: also make a composition 333 non-intersecting lines.

c – '333 connected lines'

Create a greyscale composition using HTML and JavasScript using exactly 333 lines. The lines should be connected end-to end. Lines may intersect or not as you see fit.
Your CSS, HTML, and JavaScript should be in separate files.
Stretch: also make a composition of 3333 non-intersecting lines.

c (stretch) – 'Sketches → rules → Sketches':

Create several geometric sketches on paper using a pencil or pen.
Attempt to write the 'rules' that guided each sketch in english.
Pick one sketch-rule and attempt to render it using canvas & JavaScript.

Source of ps-03 starter:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>canvas starter document</title>
    <style media="screen">
      body {
        font-family: 'helvetica', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
      }
      canvas {
        border: 1px solid hsl(0,10%,90%);
        width: auto;
        height: 50%;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
  </body>

  <script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var drawingPad = canvas.getContext('2d');
    drawingPad.fillStyle = "hsla(0,10%,10%,1)";
    drawingPad.fillRect(0, 0, 20, 20);
  </script>

</html>