ctv Final Project

You are able to type in the box, click it to expand, and move the text box up and down!

sketch

var CONTAINERS;
var img;
var img2;
var img3;

function preload(){
    img = loadImage("https://i.imgur.com/SiATbai.png");
    img2 = loadImage("https://i.imgur.com/g9q8qO8.png");
    img3 = loadImage("https://i.imgur.com/zFUnlLi.png");
}

function setup() {
    createCanvas(800, 800);
    CONTAINERS = new aContainer();
}

function draw(){
    background('#165fa8');
    CONTAINERS.display();
}

//////Design and functionality of the text container
function aContainer() {
//////Properties for the individual container
  var state = 0;
  var txt = "";
  this.pos = 0;
  this.h = 100;
  this.color = color('#e2f0fb');
  this.shadow = 1;
  this.r = 20;
  this.txtSize = 34;

//////Save Button Dimensions
      var buttonX = 80;
      var buttonY = 40;
      var buttonX2 = 200;
      var buttonX3 = 500;
      var buttonW = 100;
      var buttonH = 40;

//////Execute the shapes and text when this is called,
//////Calls properties in the section right above
  this.display = function() {
        if(this.pos <= 0){this.pos = 0}
        if(this.pos >= 5){this.pos = 5}
        fill(this.color);
        strokeWeight(0);
        rect(80, this.pos*100+120, 640, this.h, this.r);
        fill(60);
        textSize(this.txtSize);
        textFont("Avenir");
        text(txt, 110, this.pos*100+180);
        fill(240);
        rect(buttonX, buttonY, buttonW, buttonH, 20);
        image(img, buttonX+buttonW/2-17.5, buttonY+2.5, 35, 35);
        rect(buttonX2, buttonY, buttonW, buttonH, 20);
        image(img2, buttonX2+buttonW/2-17.5, buttonY+2.5, 35, 35);
        rect(buttonX3, buttonY, buttonW, buttonH, 20);
        image(img3, buttonX3+buttonW/2-17.5, buttonY+2.5, 35, 35);
  }

//////Function is called when mouse is pressed
//////Only executes if cursor is over the container
  this.pressed = function() {
      if (mouseX > 80 & 
          mouseX < 720 && 
          mouseY > this.pos*100+120 && 
          mouseY < this.pos*100+this.h+120) {
          if(state%2 == 0){
              this.h = 500;
              state++;
          } else if(state%2 == 1){
              this.h = 100;
              state++;      
          }
     }
  }
//////Add the typed key to the string variable 'txt'
  this.keys = function(){
//////If text goes beyond specified width, put text on new line
      txt = txt + key;
      txtWid = textWidth(txt)%500;
      if(txtWid>475){
          txt+= "\n"
      }
//////If the enter key is pressed, put text on new line
      if(keyCode == 13){
          txt += "\n";
      }
//////Ability to delete a letter that is typed
        if(keyCode == 8 & txt.length>0){
            txt = txt.substring(0, txt.length - 2);
        }
  }
///////Adds abbility to press save button
  this.downButton = function(){
      if (mouseX > buttonX & 
          mouseX < buttonX + buttonW && 
          mouseY > buttonY && 
          mouseY < buttonY + buttonH) {
            this.pos++;
     } else if (mouseX > buttonX2 & 
          mouseX < buttonX2 + buttonW && 
          mouseY > buttonY && 
          mouseY < buttonY + buttonH) {
            this.pos--;
     }
  }
//////Make the text box larger
    this.expand = function(){
        if(this.h == 100){
        }
    }
}

function mousePressed(){
    CONTAINERS.pressed();  
    CONTAINERS.downButton();
}

function keyPressed() {
    CONTAINERS.keys();
}