let formatL = 500;

let formatH = formatL / ratio;

​

let fond, plot, carrousselImg, planFond, fontNeue,son;

let imgMaskZone, textMaskZone, textMaskZone1;

​

let cercles = [];

​

let clicked = false;

// let tableau_c= [];

​

​

​

function mouseClicked() {

  clicked= !clicked;

  //  

}

​

​

function preload() {

  fond = loadImage("assets/coneFond.png");

  plot = loadImage("assets/cone.png");

  carrousselImg = loadImage("assets/carrousel.png");

  fontNeue = loadFont("assets/HelveticaNeueBlack.otf");

  planFond= loadImage("assets/planFond.jpg");

  son=loadSound("assets/son.mp3")

​

​

}

​

​

function setup() {

  createCanvas(formatL, formatH);

  noSmooth();

  imgMaskZone = new ImageMaskZone(formatL, formatH, {

    x1: formatL / 2 - 180 / 2 + 2,

    y1: formatH / 2 - 300 / 2 - 50,

    x2: formatL / 2 + 180 / 2 - 4,

    y2: formatH / 2 - 300 / 2 - 50,

    x3: formatL / 2 + 180 / 2 + 65,

    y3: formatH / 2 + 300 / 2 - 50,

    x4: formatL / 2 - 180 / 2 - 65,

    y4: formatH / 2 + 300 / 2 - 50

  }, carrousselImg);

​

  textMaskZone = new TextMaskZone(formatL, formatH, {

    x1: formatL / 2 - 140 / 2,

    y1: formatH / 5 + 20,

    x2: formatL / 2 + 140 / 2,

    y2: formatH / 5 + 20,

    x3: formatL / 2 + 140 / 2 + 20,

    y3: formatH / 5 + 100,

    x4: formatL / 2 - 140 / 2 - 20,

    y4: formatH / 5 + 100

  }, "12 et 13 OCTOBRE 2024", fontNeue, 2);

​

  textMaskZone1 = new TextMaskZone(formatL, formatH, {

    x1: formatL / 2 - 180 / 2 - 65,

    y1: formatH / 2 + 300 / 2 - 30,

    x2: formatL / 2 + 180 / 2 + 65,

    y2: formatH / 2 + 300 / 2 - 30,

    x3: formatL / 2 + 180 / 2 + 65 + 20,

    y3: formatH / 2 + 400 / 2 - 10,

    x4: formatL / 2 - 180 / 2 - 65 - 20,

    y4: formatH / 2 + 400 / 2 - 10

  }, "16 spectacles de rue gratuits - Lourdes", fontNeue, 2);

  cercles.push(new LabeledCircle(132, 405, "1"));

  cercles.push(new LabeledCircle(135, 568, "2"));

  cercles.push(new LabeledCircle(259, 498, "3"));

  cercles.push(new LabeledCircle(248, 553, "4"));

  cercles.push(new LabeledCircle(173, 455, "5"));

  cercles.push(new LabeledCircle(300, 503, "6"));

  cercles.push(new LabeledCircle(338, 585, "7"));

  cercles.push(new LabeledCircle(254, 598, "8"));

  cercles.push(new LabeledCircle(260, 630, "9"));

  cercles.push(new LabeledCircle(316, 264, "10"));

  cercles.push(new LabeledCircle(462, 347, "11"));

}

​

function draw() {

  image(fond, 0, 0, formatL, formatH);

  image(plot, 0, -22, formatL, formatH);

  if (keyIsPressed === true && keyCode === 32) {

     son.loop();

  }

  if(!clicked){

    let maskedImg = imgMaskZone.createScrollingImage(frameCount);

    let maskedText = textMaskZone.createScrollingText(frameCount);

    let maskedText1 = textMaskZone1.createScrollingText(frameCount);

​

    image(maskedImg, 0, 0);

    image(maskedText, 0, 0);

    image(maskedText1, 0, 0);

  }else {

    image(planFond, 0, 0, formatL, formatH);

    for (let cercle of cercles) {

    cercle.dessiner();

  }

  }

};

​

​

​