let pgWidth = 700;

let pgHeight = 800;

let pgPos = -180;

let pgPosMin

let pgPosMax 

let margin = 100; //margin de scroll

let scrollMax = 20; //velocidad de scrolling

let mousi 

​

​

// 

let postotal

let c1m

let c1f = 25;

let c2m

let c2f = 25;

let c3m

let c3f = 255;

let c3

let c4m

let c4f = 25;

let c4

​

//SOUND

let c1s

let c2s

let c3s

let c4s

​

​

​

function preload() {

  c3 = loadImage('poly620.jpg');

  c4 = loadImage('desierto-2.jpg');

    //SOUNDS

  soundFormats('mp3','m4a');

  s1 = loadSound('volumensintetico.m4a');

  s2 = loadSound('cr finland.m4a');

  s3 = loadSound('liquida.m4a');

  s4 = loadSound('dinamicas.m4a');

//  s5 = loadSound('cr bosch.m4a');

//  s6 = loadSound('liquida.m4a');

//  s7 = loadSound('escuchav.m4a');

}

​

​

function setup() {

  createCanvas(700, 800);

  pgPosMin = 0 - pgHeight + margin

  pgPosMax = height - margin

​

  // video 1

  c1 = createVideo(['volumensinteticoa1.webm'], vidLoad);

  c1.size(620, 348);

  c1.hide();

 // video 2

 c2 = createVideo(['conversationroomA1.webm'], vidLoad);

 c2.size(620, 348);

 c2.hide();

   // SOUND 

  s1.setVolume(0.5);

  s1.play();

  s1.loop();

  s2.setVolume(0.5);

  s2.play();

  s2.loop();

  s3.setVolume(0.5);

  s3.play();

  s3.loop();

  s4.setVolume(0.5);

  s4.play();

  s4.loop();

​

}

​

function draw() {

​

  translate(50, pgPos); // this is how your sketch content scrolls!

  background(20);

  fill(255);  

​

  text(c1f,100,100);

  text(c1s,100,120);

  //c1 = Volumen Sintetico

  tint(255, c1f); 

  image(c1, 0, 0);

  //c2 = Conversationroom

  tint(255, c2f); 

  image(c2,0, 200);

  //c3= polyphonic

  tint(255, c3f); 

  image(c3,0,400);

  //c4= desierto image

  tint(255, c4f); 

  image(c4,0,600);

​

//SOUND

  s1.setVolume(c1s);

  s2.setVolume(c2s);

  s3.setVolume(c3s);

  s4.setVolume(c4s);

}

​

function mouseWheel(event) {

  let scrollAmt=constrain(event.delta, -scrollMax, scrollMax) // mouse speed

  //print(pgPos);

  pgPos += scrollAmt;

  pgPos = constrain(pgPos, pgPosMin, pgPosMax) // top/bottom margin stops

  //scroll fade setup

  postotal = map(pgPos,-700,700, 0, 1000); 

  // c1 fade setup, Volumen Sintetico

  c1m = constrain(postotal,560,780);

  c1m = map(c1m,560,780,100,0);  

  if (c1m <= 50) { c1f = 2 * c1m;} else {c1f = - 2 * c1m + 200}

  c1f = map(c1f,100, 0, 255,25);

  //c1 Sound 

  c1s = map(c1f,255,25,100,0);

  c1s = (c1s/100);

​

  // c2 fade setup, CR Finland

  c2m = constrain(postotal,400,650);

  c2m = map(c2m,400,650,100,0);  

  if (c2m <= 50) {c2f = 2 * c2m;} else {c2f = - 2 * c2m + 200}

  c2f = map(c2f,100, 0, 255,25)

  //c2 Sound

  c2s = map(c2f,255,25,100,0);

  c2s = (c2s/100);

  // c3 fade setup 

  c3m = constrain(postotal,360,570);

  c3m = map(c3m,360,570,100,0);  

  //c3 Sound

  c3s = map(c3m,255,25,100,0);

  c3s = (c3s/100);

  if (c3m <= 50) {c3f = 2 * c3m;} else {c3f = - 2 * c3m + 200}

  c3f = map(c3f,100, 0, 255,25)

    // c4 fade setup 

  c4m = constrain(postotal,0,300);

  c4m = map(c4m,0,300,100,0);  

  if (c4m <= 50) {c4f = 2 * c4m;} else {c4f = - 2 * c4m + 200}

  c4f = map(c4f,100, 0, 255,25)

  //c4 sound

  c4s = map(c4f,255,25,100,0);

  c4s = (c4s/100);

}

​

​

​

​

function vidLoad() {

  c1.loop();

  c2.loop();

  c1.volume(0);

  c2.volume(0);

​

}