block by dribnet 62f5c5cb5b8914e100c0fda3b6f9ef03

17.1.MDDN242 PS2

Full Screen

PS2 MDDN 242 2017

Color Glyphs

Describe your choice of color here and the shapes below them that are meant to represent the color (replacing this text). Be sure to use complete sentences, and you can reference your image above. The explanation should be short but compete, no more than 100 words.

Also update both images keeping their original sizes: preview.jpg (960x500) and thumbnail.png (230x120).

index.html

<head>
    <style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="preview.jpg" width="960" height="500"/>
</body>

sketch.html

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="clock.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
</table>
</body>

sketch.js

var canvasWidth = 960;
var canvasHeight = 500;

function setup () {
  // create the drawing canvas, save the canvas element
  var main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  // this means draw will only be called once
  noLoop();
}

// draw five colors and then five glyphs
function draw () {
  var size=200;
  var xdiff = (width - 4 * size) / 4;
  var xstep = size + xdiff;
  var ydiff = (height - 2 * size) / 2;
  var ystep = size + ydiff;

  background(255, 255, 220);
  noStroke();

  // red
  fill(210, 70, 50);
  rect(xdiff/2 + xstep * 0, ydiff/2 + ystep * 0, size, size);

  // yellow
  fill(245, 225, 50);
  rect(xdiff/2 + xstep * 1, ydiff/2 + ystep * 0, size, size);

  // blue
  fill(50, 120, 170);
  rect(xdiff/2 + xstep * 2, ydiff/2 + ystep * 0, size, size);

  // your own color here
  stroke(0);
  noFill();
  rect(xdiff/2 + xstep * 3, ydiff/2 + ystep * 0, size, size);

  // Represent red here
  rect(xdiff/2 + xstep * 0, ydiff/2 + ystep * 1, size, size);

  // Represent yellow here
  rect(xdiff/2 + xstep * 1, ydiff/2 + ystep * 1, size, size);

  // Represent blue here
  rect(xdiff/2 + xstep * 2, ydiff/2 + ystep * 1, size, size);

  // Represent your color here
  rect(xdiff/2 + xstep * 3, ydiff/2 + ystep * 1, size, size);
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}