-----------------------------------------
Zadanie 3
-----------------------------------------
      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();
    }
    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 makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function mouseDragged() {
        drawVector(imgA, makeVector(mouseX, mouseY));
    }
-----------------------------------------
Zadanie 3.5
-----------------------------------------
          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();
    }
    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 makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function mouseDragged() {
        drawVector(imgA, makeVector(mouseX, mouseY));
    }
    function IdentityIt(){
      return [[1,0,0],[0,1,0],[0,0,1]];
    }
    function ShiftIt(tx,ty){
      return [[1,0,tx],[0,1,ty],[0,0,1]];
    }
    function ScaleIt(sx,sy){
      return [[sx,0,0],[0,sy,0],[0,0,1]];
    }
    function RotateIt(fi){
      return [[Math.cos(fi),-(Math.sin(fi)),0],[Math.sin(fi),-(Math.cos(fi)),0],[0,0,1]];
    }
    function ShearIt(shx,shy){
      return [[1,shx,0],[shy,1,0],[0,0,1]];
    }
    
    console.log(makeVector(8, 9));
    console.log(IdentityIt());
    console.log(ShiftIt(3, 5));
    console.log(ScaleIt(3, 2));
    console.log(RotateIt(60 / 180 * Math.PI));
    console.log(ShearIt(4, 4));
-----------------------------------------
Zadanie 4
-----------------------------------------

      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();
    }
    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 makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function IdentityIt(){
      return [[1,0,0],[0,1,0],[0,0,1]];
    }
    function ShiftIt(tx,ty){
      return [[1,0,tx],[0,1,ty],[0,0,1]];
    }
    function ScaleIt(sx,sy){
      return [[sx,0,0],[0,sy,0],[0,0,1]];
    }
    function RotateIt(fi){
      return [[Math.cos(fi),-(Math.sin(fi)),0],[Math.sin(fi),-(Math.cos(fi)),0],[0,0,1]];
    }
    function ShearIt(shx,shy){
      return [[1,shx,0],[shy,1,0],[0,0,1]];
    }
    function doIt(inVal,moveVec){
     out = [0,0,0];
      for (i = 0; i < 3; ++i) {
            for (j = 0; j < 3; ++j) {
              out[i] = (out[i] + (inVal[i][j] * moveVec[j]));
            }}
      return out;
    }
      function mouseDragged() {
        vecToDo =  makeVector(mouseX, mouseY);
        drawVector(imgA,vecToDo);
        drawVector(imgB,doIt(IdentityIt(),vecToDo));
        drawVector(imgB,doIt(ShiftIt(3, 5),vecToDo ));
        drawVector(imgB,doIt(ScaleIt(3, 2),vecToDo ));
        drawVector(imgB,doIt(RotateIt(60 / 180 * Math.PI),vecToDo) );
        drawVector(imgB,doIt(ShearIt(4, 4),vecToDo ));
    }
-----------------------------------------
Zadanie 4.5
-----------------------------------------
      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();
    }
    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 makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function IdentityIt(){
      return [[1,0,0],[0,1,0],[0,0,1]];
    }
    function ShiftIt(tx,ty){
      return [[1,0,tx],[0,1,ty],[0,0,1]];
    }
    function ScaleIt(sx,sy){
      return [[sx,0,0],[0,sy,0],[0,0,1]];
    }
    function RotateIt(fi){
      return [[Math.cos(fi),-(Math.sin(fi)),0],[Math.sin(fi),-(Math.cos(fi)),0],[0,0,1]];
    }
    function ShearIt(shx,shy){
      return [[1,shx,0],[shy,1,0],[0,0,1]];
    }
    function doIt(inVal,moveVec){
     out = [0,0,0];
      for (i = 0; i < 3; ++i) {
            for (j = 0; j < 3; ++j) {
              out[i] = (out[i] + (inVal[i][j] * moveVec[j]));
            }}
      return out;
    }
    function doItTwice(inOne,inTwo){
     outTriple = [[0,0,0],[0,0,0],[0,0,0]];
      for (i = 0; i < 3; ++i) {
            for (j = 0; j < 3; ++j) {
              outTriple[i][j] = inOne[i][j]*inTwo[i][j];
            }}
      return outTriple;
    }
    
      function mouseDragged() {
        vecToDo =  makeVector(mouseX, mouseY);
        drawVector(imgA,vecToDo);
     //   drawVector(imgB,doIt(IdentityIt(),vecToDo));
     //  drawVector(imgB,doIt(doItTwice(ShiftIt(3, 5),ScaleIt(3, 2)),vecToDo ));
     //   drawVector(imgB,doIt(ScaleIt(3, 2),vecToDo ));
    drawVector(imgB,doIt(doItTwice(RotateIt(50 / 180 * Math.PI),ShearIt(2, 3)),vecToDo));
     //   drawVector(imgB,doIt(ShearIt(4, 4),vecToDo ));
    }