var img2;

var img3;

var imgClone;

var imgClone2;

​

var mousexpos = 0;

var mouseypos = 0;

var mk;

var mk2;

var i = 0;

var x = 0;

var a = 0;

​

var angle = 0;

var offset = 0;

var speed = 20;

​

var colorsArona = ["#00afac" , "#ee7d05", '#fcc446'] 

​

function preload() {

  img = loadImage('arona.png');

  img2 = loadImage('arona2.png');

  img3 = loadImage('arona3.png');

}

function setup() {

    let myCanvas = createCanvas(970, 250);

    //myCanvas.parent('myContainer');

    //background(colorsArona[2]);

    mk = createGraphics(970, 250);

    mk2 = createGraphics(970, 250);

}

function draw() {

  background(colorsArona[2]);

​

    image(img3, 0, 0);

​

    mk.clear();

    mk2.clear();

    //first model

    mk.rect(970, 0, i - offset, 125);

    //fill(colorsArona[0]);

    //noStroke();

    //rect(970, 0, i, 125);

    ( imgClone = img.get() ).mask( mk.get() );

    image(imgClone, -1 * offset, 0);

​

    //second mdoel

    mk2.rect(0, 125, a + offset, 125);

    //fill(colorsArona[1]);

    //noStroke();

    //rect(0, 125, a, 250);

    ( imgClone2 = img2.get() ).mask( mk2.get() );

    image(imgClone2, -1 * offset, 0);

​

    a = sin(angle) * 500;

    i -= 1 * speed;

​

    angle += 0.03;

}