GRK TUT4 Task1,2

by linoskoczek

HTML

<style>
  body {
    background-color: #ccc;
  }

</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<body>
  <script type="text/javascript">
    var imgA;
    var imgB;

    function setup() {
      createCanvas(512, 512);
      background(255);

      imgA = createImage(512, 512);
      imgB = createImage(512, 512);
      imgA.loadPixels();
      imgB.loadPixels();
      var d = pixelDensity();
      for (var i = 0; i < 512 * 512 * 4 * d; i += 4) {
        imgA.pixels[i] = 240;
        imgA.pixels[i + 1] = 250;
        imgA.pixels[i + 2] = 240;
        imgA.pixels[i + 3] = 255;
        imgB.pixels[i] = 240;
        imgB.pixels[i + 1] = 240;
        imgB.pixels[i + 2] = 250;
        imgB.pixels[i + 3] = 255;
      }
      imgA.updatePixels();
      imgB.updatePixels();

			console.log("identity:");
			showMatrix(makeIdentity(3, 5, 5));
      console.log("translation:");
			showMatrix(makeTranslation(3, 5, 5));
      console.log("scaling:");
			showMatrix(makeScale(3, 5, 5));
      console.log("rotation:");
			showMatrix(makeRotation(3, 5));
      console.log("shear:");
			showMatrix(makeShear(3, 5, 5));
    }

    function draw() {
      if (!keyIsDown(32)) {
        image(imgA, 0, 0);
        text('Image A', 10, 20);
      } else {
        image(imgB, 0, 0);
        text('Image B', 10, 20);
      }
    }

    function showMatrix(m) {
      for (let i = 0; i < 3; i++) {
        let str = "";
        for (let j = 0; j < 3; j++) {
          str += m[i][j] + " ";
        }
        console.log(str);
      }
    }

    function makeIdentity(n) {
      let matrix = [];
      for (let i = 0; i < n; i++) {
        let temp = [n];
        for (let j = 0; j < n; j++) {
          if (i == j) {
            temp[j] = 1;
          } else {
            temp[j] = 0;
          }
        }
        matrix.push(temp);
      }
      return matrix;
    }

    function makeScale(n, sx, sy) {
			m = makeIdentity(n);
      m[0][0] = sx;
      m[1][1] =...