Page Comparison

int gridWidthvar img;
var drawMode = 1001;

int gridHeightfunction preload() {
  img = 100; 
float pointDistX = 5; 
float pointDistY = 5; 
ArrayList<Integer> imageGreyScaleList = new ArrayList<Integer>();
PImage baseImage;  

void setuploadImage("2.png");
}

function setup() {
  createCanvas(img.width*2, img.height*2); //size should be multiple of img width and height
  // smooth(); // active by default in p5.js

  print(img.width+" x "+img.height);
}


function draw() {
  size(700, 700background(255);

  var mouseXFactor = smooth(map(mouseX, 0, width,  0.05, 1);
  var baseImagemouseYFactor = loadImage("data/image.jpg");
  baseImage.loadPixels();
  int loc;
map(mouseY, 0, height, 0.05, 1);
// noprotect
   for (intvar igridX = 0; igridX < baseImageimg.width; igridX++) {
      for (intvar jgridY = 0; jgridY < baseImageimg.height; jgridY++) {
         // grid position + tile size
         var loctileWidth = iwidth +/ j*baseImageimg.width;
         var tileHeight = height / println(baseImage.pixels[loc]);img.height;
         var posX = tileWidth*gridX;
         var posY = tileHeight*gridY;

         // get current color pixel
         var c = baseImage.pixels[loc];img.get(gridX, gridY);
         // greyscale conversion
        int var greyScalegreyscale = floorround(red(pixelc)*0.222+green(pixelc)*0.707+blue(pixel)/3);(c)*0.071);

         switch(drawMode) {
            case 1:
               // greyscale to stroke weight
               var w1 = map(greyscale, 0,255, 15,0.1);
               stroke(0);
               strokeWeight(w1 * mouseXFactor);
               imageGreyScaleList.add(greyScale);line(posX, posY, posX+5, posY+5); 
               break;
            case 2:
              // greyscale to ellipse area
         }    } };fill(0);
             void drawnoStroke() {
  background(255);
  pushMatrix(); 
  // translate graphic to the center of the screen  
  translate((width-(pointDistX*gridWidth))/2, (height-(pointDistY*gridHeight))/2);
  int loc;
  for (int i = 0; i<gridHeight; i++ ) {
    beginShape();
    for (int j = 0; j<gridWidth; j++) {
      loc = i + j*baseImage.width;
      float posX =  j*pointDistX;
      float posY =  i*pointDistY+map(imageGreyScaleList.get(loc), 0, 255, 0, 10); // offset y coordinate based on the pixels colour
      curveVertex(posX, posY);
    };
    endShape();
  };
  popMatrix();
};

;
              var r2 = 1.1284 * sqrt(tileWidth*tileWidth*(1-greyscale/255.0));
              r2 = r2 * mouseXFactor * 3;
              ellipse(posX, posY, r2, r2);
              break;
            case 3:
               // greyscale to line length
               var l3 = map(greyscale, 0,255, 30,0.1);
               l3 = l3 * mouseXFactor;   
               stroke(0);
               strokeWeight(10 * mouseYFactor);
               line(posX, posY, posX+l3, posY+l3);
               break;
            case 4:
               // greyscale to rotation, line length and stroke weight
               stroke(0);
               var w4 = map(greyscale, 0,255, 10,0);
               strokeWeight(w4 * mouseXFactor + 0.1);
               var l4 = map(greyscale, 0,255, 35,0);
               l4 = l4 * mouseYFactor;
               push();
               translate(posX, posY);
               rotate(greyscale/255.0 * PI);
               line(0, 0, 0+l4, 0+l4);
               pop();
               break;
            case 5:
               // greyscale to line relief
               var w5 = map(greyscale,0,255,5,0.2);
               strokeWeight(w5 * mouseYFactor + 0.1);
               // get neighbour pixel, limit it to image width
               var c2 = img.get(min(gridX+1,img.width-1), gridY);
               stroke(c2);
               var greyscale2 = int(red(c2)*0.222 + green(c2)*0.707 + blue(c2)*0.071);
               var h5 = 50 * mouseXFactor;
               var d1 = map(greyscale, 0,255, h5,0);
               var d2 = map(greyscale2, 0,255, h5,0);
               line(posX-d1, posY+d1, posX+tileWidth-d2, posY+d2);
               break;
            case 6:
               // pixel color to fill, greyscale to ellipse size
               var w6 = map(greyscale, 0,255, 25,0);
               noStroke();
               fill(c);
               ellipse(posX, posY, w6 * mouseXFactor, w6 * mouseXFactor); 
               break;
            case 7:
               stroke(c);
               var w7 = map(greyscale, 0,255, 5,0.1);
               strokeWeight(w7);
               fill(255,255* mouseXFactor);
               push();
               translate(posX, posY);
               rotate(greyscale/255.0 * PI* mouseYFactor);
               rect(0,0,15,15);
               pop();
               break;
            case 8:
               noStroke();
               fill(greyscale,greyscale * mouseXFactor,255* mouseYFactor);
               rect(posX,posY,3.5,3.5);
               rect(posX+4,posY,3.5,3.5);
               rect(posX,posY+4,3.5,3.5);
               rect(posX+4,posY+4,3.5,3.5);
               break;
            case 9:
               stroke(255,greyscale,0);
               noFill();
               push();
               translate(posX, posY);
               rotate(greyscale/255.0 * PI);
               strokeWeight(1);
               rect(0,0,15* mouseXFactor,15* mouseYFactor);
               var w9 = map(greyscale, 0,255, 15,0.1);
               strokeWeight(w9);
               stroke(0,70);
               ellipse(0,0,10,5);
               pop();
               break;
         }
      }
   }

   // if (savePDF) {
   //    savePDF = false;
   //    endRecord();
   // }

}


function keyReleased() {
   if (key == 's' || key == 'S') img.save(timestamp()+"_##.png");
   // if (key == 'p' || key == 'P') savePDF = true;

   if (key == '1') drawMode = 1;
   if (key == '2') drawMode = 2;
   if (key == '3') drawMode = 3;
   if (key == '4') drawMode = 4;
   if (key == '5') drawMode = 5;
   if (key == '6') drawMode = 6;
   if (key == '7') drawMode = 7;
   if (key == '8') drawMode = 8;
   if (key == '9') drawMode = 9;
}


// timestamp
function timestamp() {
   var now = new Date();
   return  now.toISOString();
}