​

​

let content = 'INBETWEEN WORLDS '; //variable for text string

//let customFont; //variable for custom font

​

​

let x1 = 1;

let y1 = 1;

let easing1 = 0.05;

​

let x2 = 1;

let y2 = 1;

let easing2 = 0.09;

​

let x3 = 1;

let y3 = 1;

let easing3 = 0.009;

​

let x4 = 1;

let y4 = 1;

let easing4 = 0.5;

​

function setup() {

  cnv = createCanvas(windowWidth, windowHeight);

  rectMode(CENTER); 

  background(200);

  textAlign(CENTER, CENTER); 

  textSize(windowWidth/20); 

}

​

​

function keyPressed(){

  if (key === 's'){

    saveCanvas("poster.jpg");

  }

}

​

​

function draw() {

​

  textFont("Josefin Sans");

  stroke(120,80,90);

  strokeWeight(1);

  fill(240);

  text(content, y3, y3, y3, y3); //display text

  //curveEasing

  let targetX4 = mouseX;

  let dx4 = targetX4 - x4;

  x4 += dx4 * easing4;

​

  let targetY4 = mouseY;

  let dy4 = targetY4 - y4;

  y4 += dy4 * easing4;

​

  //rectangleEasing 

  let targetX3 = mouseX;

  let dx3 = targetX3 - x3;

  x3 += dx3 * easing3;

​

  let targetY3 = mouseY;

  let dy3 = targetY3 - y3;

  y3 += dy3 * easing3;

  //rectangleEasing 

  let targetX = mouseX;

  let dx = targetX - x1;

  x1 += dx * easing1;

​

  let targetY = mouseY;

  let dy = targetY - y1;

  y1 += dy * easing1;

  //circleEasing

  let targetX2 = mouseX;

  let dx2 = targetX2 - x2;

  x2 += dx2 * easing2;

​

  let targetY2 = mouseY;

  let dy2 = targetY2 - y2;

  y2 += dy2 * easing2;

  //curve

  noFill();

  stroke(230, 90, 170);

  strokeWeight(1);

  curve(x4, y4, x4, y3, x3, y2, y4, x1);

      //rect

  noFill();

  stroke(150,20,20);

  strokeWeight(1);

  rect(x3, y3, width/50, height/15);

    //square

  noFill();

  stroke(50, 50, 250);

  strokeWeight(3);

  rect(x1, y1, 50, 50);

    //circle

  stroke(255, 4, 170);

  strokeWeight(2);

  circle(x2, y2, 20);

​

   //point

  stroke(255,70,0);

  strokeWeight(10);

  point(mouseX, mouseY);

}