let img;

let brushImg;

let flowerImg;

​

let time = 0;

​

let drawingLayer;

​

let slider;

let pressed = false;

let px, py, npx, npy;

let f;

​

function preload() {

  firstShader = loadShader('shader.vert', 'shader.frag');

​

  img = loadImage("mountain.jpg");

  flowerImg = loadImage("flowers.jpg");

  brushImg = loadImage("brush.png");

}

​

function setup() {

  createCanvas(512, 512, WEBGL);

  f = 255 / height;

  noStroke();

​

  slider = createSlider(0, 1, 0.5, 0.001);

​

  drawingLayer = createGraphics(width, height);

​

  img.resize(512, 512);

  flowerImg.resize(512, 512);

​

  drawingLayer.background(0);

​

}

​

function draw() {

  // if(mouseIsPressed){

  //   drawingLayer.fill(255, 10);

  //   drawingLayer.noStroke();

  //   drawingLayer.image(brushImg, mouseX-25, mouseY-25, 50, 50);

  // }

​

  background(220);

​

  shader(firstShader);

​

  let mx = mouseX / width;

  let my = mouseY / height;

​

  // textureWrap(REPEAT);

​

  firstShader.setUniform("slider", slider.value());

  firstShader.setUniform("mouse", [mx, my]);

  firstShader.setUniform("resolution", [width, height]);

​

  firstShader.setUniform("tex", img);

  firstShader.setUniform("flowerTex", flowerImg);

  firstShader.setUniform("drawingTex", drawingLayer);

​

  rect(0, 0, 1, 1);

​

  time += 0.01;

​

​

​

  // image(drawingLayer, -width/2, -height/2);

​

}

​

function mousePressed() {

  pressed = true;

  px = mouseX;

  py = mouseY;

  npx = mouseX;

  npy = mouseY;

}

​

mouseDragged = function() {

  // if (mouseX != npx) {

  //   for(let nx = )

  //   drawingLayer.stroke(f)

  //   // drawingLayer.stroke(255)

  //   drawingLayer.strokeWeight(1);

  //   drawingLayer.line(mouseX, 0, mouseX, height)

  // }

  let c = f;

  if (mouseX < px) {

    dir = -1 

    startX = px;

    stopX = mouseX;

    let c = f;

    for (let x = startX; x > stopX; x+=dir ){

      drawingLayer.stroke(color(c,0,0))

      drawingLayer.strokeWeight(1);

      drawingLayer.line(x, 0, x, height)

      c+=f;

      print(c)

    }

    drawingLayer.fill(color(c,0,0))

    drawingLayer.noStroke();

    drawingLayer.rect(0,0,mouseX,height)

  } else {

    dir = 1

    startX = px;

    stopX = mouseX;

    let c = f;

    for (let x = startX; x < stopX; x+=dir ){

      drawingLayer.stroke(color(c,0,0))

      drawingLayer.strokeWeight(1);

      drawingLayer.line(x, 0, x, height)

      c+=f;

      print(c)

    }

    drawingLayer.fill(color(c,0,0))

    drawingLayer.noStroke();

    drawingLayer.rect(width,0,mouseX,height)

  }

//   npx = mouseX;

};

​

function mouseReleased() {

  pressed = false;

}