let ourMode = 1;

let str = 'Tripping';

​

function preload(){

   font = loadFont("Lysergic-Regular.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  buffer = createGraphics(400, 400);

  buffer.background(0);

  buffer.fill(255);

  buffer.noStroke();

  // buffer.ellipse(100, 100, 100, 100);

  // buffer.ellipse(200, 200, 30, 30);

  // buffer.ellipse(20, 20, 40, 40);

  background(0);

}

​

function draw() {

  texts();

   changeBufferFor(buffer);

  background('#010044');

  if(ourMode == 0) {

    image(buffer,0,0,mouseX,mouseY);

  } else if (ourMode == 1) {

    blendMode(DIFFERENCE);

    for (let i = 0; i < 10; i++) {

      for (let j = 0; j < 10; j++) {

        let x = sin((frameCount + j * 4 + i * 30) * 0.01) * 1000;

        let y = tan((frameCount + i * 3) * 0.01) * 100;

        push();

        rotate(cos(frameCount*0.01)*i);

        rotate(sin(frameCount*0.01)*i);

        translate(i * 150, j * 150);

        image(buffer, 0, y, 100 + x, 100);

        pop();

      }

    }

    //blendMode(BLEND);

  }

​

  for (let m = 0; m < 10; m++) {

    for (let e = 0; e < 10; e++) {

  blendMode(DIFFERENCE);

    translate(e*5,e*5)

    rotate(frameCount*0.001);

    fill('#FFB200')

    noStroke();

    ellipse(height/2,width/2, 30,30);

  }

  }

  //blendMode(BLEND);

}

​

  function texts() {

    // fill(255);

    blendMode(DIFFERENCE);

    textFont(font)

    push();

    fill(255)

    textSize(100);

    translate(width/2, height/2-100)

    textAlign(CENTER, CENTER);

    text("Trippy", 50, 50);

    pop();

     push();

    textSize(100);

    translate(width/2, height/2-100)

    textAlign(CENTER, CENTER);

    text("Trippy", 50, 50);

    pop();

    push();

    fill(255);

    textSize(150);

    translate(width/2, height/2+30)

    textAlign(CENTER, CENTER);

    text("world", 50, 50);

    pop();

     push();

    textSize(150);

    translate(width/2, height/2+30)

    textAlign(CENTER, CENTER);

    text("world", 50, 50);

    pop();

  }

​

​

​

 function changeBufferFor(theBuffer) {

  let x = tan(frameCount*0.02)*100;

  theBuffer.background(0,10);

  // theBuffer.clear();

  theBuffer.push();

  theBuffer.translate(theBuffer.width/2, theBuffer.height/2);

  theBuffer.translate(x,0);

  theBuffer.ellipse(50,50,30,30);

  theBuffer.ellipse(0,0,20,20);

  theBuffer.pop();

}

​

function mousePressed() {

  ourMode = ourMode == 1 ? 0:1;

}

​

​

// go to fullscreen

// copy lines below to add fullscreen toggle to

// your sketch. Notice that if you are already using

// the keyPressed function, add lines 20-22 to it.

​

function keyPressed() {

  if (key === "o" || key === "O") {

    enterFullscreen();

  }

}

​

/* enter fullscreen-mode via

 * https://editor.p5js.org/kjhollentoo/sketches/H199a0c-x

 */

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

/* prevents the mobile browser from processing some default

 * touch events, like swiping left for "back" or scrolling

 * the page.

 */

document.ontouchmove = function (event) {

  event.preventDefault();

};

​

​