let yOff;

​

let sizeScale;

​

let phoneParts;

​

let tempColor;

​

let curAppImage;

let appTopImage;

let appBottomImage;

​

//ImageVars

let imgY;

let scroller;

let scrollSpeed;

//let bgHackC;

​

​

function setup() {

​

  //let bgHackC = color(0,255,100);

  phoneParts = [];

  createCanvas(800, 800);

  sizeScale = 1;

  rectMode(CENTER);

  noStroke();

  //these will be in an array! / they should be

  curAppImage = loadImage("assets/testAppPic.png");

  appTopImage = loadImage("assets/twitterTop.png");

  appBottomImage =loadImage("assets/twitterBottom.png");

​

​

  xOff = 0;

  yOff = 0;

​

  imgY = width/2;

  scroller = 0;

  scrollSpeed =1;

​

  tempColor = color(255, 0, 0);

  //screen

  phoneParts.push(new Part(2, width / 2, (height / 2), 160, 305, 6, 100)); //tempColor, 100));

  //body

  phoneParts.push(new Part(2, width / 2, height / 2, 200, 400, 18, 255));

​

  //screen

  //phoneParts.push(new Part(0, width / 2, (height / 2), 180, 305, 6, 100)); //tempColor, 100));

​

  //homeButton

  phoneParts.push(new Part(1, width / 2, (height / 2 + sizeScale * 175), 30, 30, 0, 80)); //0.72

​

  //top line1

  phoneParts.push(new Part(0, width / 2, (height / 2 - 175), 60, 4, 15, 80));

​

  //top circle

  phoneParts.push(new Part(1, width / 2 - 40, (height / 2 - 175), 5, 5, 3, 80));

​

  //left eye

  phoneParts.push(new Part(1, width / 2 - 40, (height / 2 - 50), 20, 20, 3, 0, 50));

​

  //right eye

  phoneParts.push(new Part(1, width / 2 + 40, (height / 2 - 50), 20, 20, 3, 0));

​

  //basicMouth

  phoneParts.push(new Part(0, width / 2, (height / 2 + 75), 75, 6, 3, 0));

​

​

}

​

function draw() {

  background(220);

  fill(0,220,200);

  // ellipse(width/2-75,height/2-175,100,100);

  // ellipse(width/2+75,height/2-175,100,100);

  // ellipse(width/2+75,height/2+175,100,100);

  // ellipse(width/2-75,height/2+175,100,100);

  rectMode(CORNER);

  //rect(0,0,width/2-100,height);

  rect(0,0,width,height);

  rectMode(CENTER);

  // xOff = mouseX - width/2;

  // yOff = mouseY - height/2;

    imageMode(CENTER);

  fill(255);

  rect(width/2,height/2,200,400,10);

  scrollImage();

  fill(0,220,200);

  rect(width/2,height/2 +300, curAppImage.width,300);

  rect(width/2,height/2 - 300, curAppImage.width,300);

  fill(50);

  rect(width/2,height/2 - 175, 200,50,30);

  rect(width/2,height/2 + 175, 200,50,30);

  rect(width/2 -90,height/2, 20,400,30);

  rect(width/2 +90,height/2, 20,400,30);

  drawPhone();

//   rect(width/2, height/2 +305, 210,200);

//   rect(width/2, height/2 -305, 210,200);

//   rect(10, 0, 600,height);

  // stroke(0);

  // strokeWeight(500);

  // fill(0,0,0,0);

  // rect(width/2,height/2,720,900,20);

  // noStroke();

}

​

function drawPhone() {

​

  //phoneParts[1] = curAppImage;

  for (let i = 0; i < phoneParts.length; i++) {

​

    //sync eyes

    phoneParts[6].timer = phoneParts[5].timer;

    phoneParts[6].time = phoneParts[5].time;

​

    phoneParts[i].display();

    phoneParts[i].blink();

​

  }

​

}

​

function Part(tShape, tX, tY, tW, tH, tR, tC, tt) {

​

  rectMode(CENTER);

  this.shape = tShape;

  this.x = tX;

  this.y = tY;

  this.width = tW;

  this.height = tH;

  this.rounding = tR;

  this.c = tC;

​

  this.timer = tt;

​

  this.oldH = this.height;

​

  this.time = 0;

​

  this.on = true;

​

  this.blinkSpeed = 4;

​

  this.display = function() {

​

​

    fill(this.c);

​

​

    if (this.shape == 0) {

      rect(this.x + xOff, this.y + yOff, this.width * sizeScale, this.height * sizeScale, this.rounding);

    }

​

    if (this.shape == 1) {

      ellipse(this.x + xOff, this.y + yOff, this.width * sizeScale, this.height * sizeScale);

    }

    //screen Shape

    if(this.shape ==2)

    {

      stroke(this.c);

        strokeWeight(8);

      fill(this.c,this.c,this.c,0);

      rect(this.x + xOff, this.y + yOff, this.width * sizeScale, this.height * sizeScale, this.rounding);

        noStroke();

    }

  }

​

  this.blink = function() {

​

    this.time++;

​

    if (this.time > this.timer) {

​

      this.on = !this.on;

      this.time = 0;

      this.timer = random(30, 100);

      // this.blinkSpeed = random(1,10);

    }

​

    if (this.on && this.height < this.oldH) {

      this.height += this.blinkSpeed;

    }

​

    if (this.on == false && this.height > 0) {

      this.height -= this.blinkSpeed;

    }

  }

}

​

​

​

function mousePressed() {

  sizeScale = 1.1;

}

​

​

function mouseReleased() {

  sizeScale = 1;

}

​

function scrollImage(){

​

  curAppImage.resize(150,300);

  appTopImage.resize(155,30);

  appBottomImage.resize(155,30);

  image(curAppImage,width/2,imgY + scroller);

  image(curAppImage, width/2,imgY + curAppImage.height  +scroller);

  print(scroller);

  image(appTopImage,width/2, height/2 -135);

  image(appBottomImage,width/2, height/2 +135);

  if(scroller < -300)

  {

   imgY = width/2; 

    scroller = 0;

  }

  scroller -= scrollSpeed;

}