let hintDone, easing, opacity,linkDisplayed;

​

function setup() {

  createCanvas(600, 400);

  p = loadImage("Christmas_Snowman_Red.png");

  s = loadImage("star.png");

  h = loadImage("malenerdy_blue.png");

  c = loadImage("chests.png");

  pp = new P(p);

  pppose = 0;

  noSmooth();

  sx = 210;

  sy = 235;

  ssize = 20;

  hintDone = false;

  easing = 0.005;

  opacity = 0;

  linkDisplayed=false;

}

​

function draw() {

  background(220);

  fill(200, 200, 255);

  rect(0, 0, width, height / 3);

  fill(150, 150, 255);

  rect(0, height / 3, width, height);

  fill(230, 230, 100);

  ellipse(width, height, 3 * width, 1 * height);

  if (hintDone == true) {

    ssize = 30;

    let targetX = 540;

    let dx = targetX - sx;

    sx += dx * easing;

    let targetY = 340;

    let dy = targetY - sy;

    sy += dy * easing;

  }

  image(s, sx, sy, ssize, ssize);

  textAlign(LEFT, BASELINE);

  textSize(30);

  text("🦀", 520 + 30 * noise(frameCount * 0.01), 240 + 20 * noise(frameCount * 0.02));

​

  textSize(150);

  text("🌴", 200, 220);

  text("🌴", 300, 240);

  text("🌴", 400, 220);

  textSize(100);

  text("☀️", 50, 100);

  image(h.get(32 * (9 + int(frameCount / 15) % 6), 0, 32, 32), 50, 350, 64, 64);

  canvas = get();

  if ((pp.x < 400) || (!hintDone)) {

    image(c.get(0, 0, 54, 48), 540, 340, 108, 96);

  } else if (hintDone) {

    textSize(50);

    image(c.get(53, 0, 54, 48), 540, 340, 108, 96);

    text("🌟", 510, 340);

    push();

    translate(width / 2, height / 2);

    fill(0, opacity);

    strokeWeight(3);

    stroke(255, opacity);

    opacity++;

    opacity = min(opacity, 220);

    rotate(-PI / 6);

    textSize(130);

    textAlign(CENTER, CENTER);

    text("StarDist", 0, 0);

    pop();

    if (opacity==220) {

      fill(0,0,220,opacity);

      textSize(20);

      textAlign(CENTER);

      text("visit website",width/2,height-30);

      linkDisplayed=true;

    }

  }

  pp.draw();

  if (canvas.get(pp.x, pp.y + 20) == "150,150,255,255") {

    rectMode(CENTER);

    fill(255, 80);

    rect(pp.x + 100, pp.y - 50, 150, 60, 15);

    rectMode(CORNER);

    textAlign(CENTER, CENTER);

    textSize(16);

    fill(0);

    text("Too hot for me...", pp.x + 100, pp.y - 50);

​

  }

​

  if ((dist(pp.x, pp.y, 50, 350) < 100) && (pp.y > 300)) {

    rectMode(CENTER);

    fill(255, 80);

    triangle(90, 310, 100, 310, 80, 320);

    rect(100, 280, 150, 60, 15);

    rectMode(CORNER);

    textAlign(CENTER, CENTER);

    textSize(16);

    fill(0);

    text("Follow Your Star", 100, 280);

    hintDone = true;

  }

​

​

}

function mouseClicked() {

  if (linkDisplayed) window.open("https://github.com/mpicbg-csbd/stardist/blob/master/README.md")

}

function keyPressed() {

  if (keyCode === LEFT_ARROW) pp.o = 3;

  else if (keyCode === RIGHT_ARROW) pp.o = 9;

  else if (keyCode === UP_ARROW) pp.o = 6;

  else if (keyCode === DOWN_ARROW) pp.o = 0;

}

class P {

  constructor(img) {

    this.img = img;

    this.x = width / 2;

    this.y = 2 * height / 3;

    this.o = 0;

    this.dx = [0, -5, 0, 5];

    this.dy = [5, 0, -5, 0];

  }

  draw() {

    if ((frameCount % 5 == 0) && (keyIsPressed === true)) {

      pppose = (pppose + 1) % 3;

      this.x += this.dx[this.o / 3];

      this.y += this.dy[this.o / 3];

      this.y = max(this.y, height / 2 + 10);

      this.y = min(this.y, height - 30);

      this.x = min(this.x, width - 30);

      this.x = max(this.x, 30);

    }

    imageMode(CENTER);

    image(this.img.get(32 * (this.o + pppose), 0, 32, 32), this.x, this.y, 64, 64);

  }

}