var buttoncolor1 = 255;

// changing the button2 for the background color

var buttoncolor2 = 255;

// changing the button for the background color

var buttoncolor1 = 255;

// changing the background color of the logo

var backgroundcolorlogo = 255;

// change one of the logo numbers

var pointchangelogo = 31;

//background will not change

var state1 = false;

var state2 = false;

​

//declaring colors to make random color for logo

var shapecolorR = 0;

var shapecolorG = 255;

var shapecolorB = 0;

​

//declaring lenght of sender information for random lenght

​

var lenght3 = 20;

var lenght2 = 40;

var lenght1 = 70;

​

​

​

// ------------------------------------------------------------

​

​

// slider

​

var dragging = false; // Is the slider being dragged?

​

// Rectangle variables for slider

var sliderx = 300;

var slidery = 120;

var sliderw = 10;

var sliderh = 30;

​

// Start and end of slider

var sliderStart = 300;

var sliderEnd = 540;

// Offset for dragging slider

var offsetX = 0;

​

// start point of the lenght of the rows

var lengthrows = 150;

var lengthrows1 = 70;

​

​

​

var tryx = 250;

var tryy = 150;

var trys = 100;

​

// ------------------------------------------------------------

​

​

var rollover = false; // Is the mouse over the rolloverearea?

​

// Rectangle variables for rollover

var rolloverx = 300;

var rollovery = 160;

var rolloverw = 60;

var rolloverh = 250;

​

​

// Start and end of rollover

var rolloverStart = 300;

var rolloverEnd = 540;

// Offset for dragging rollover

var rolloveroffsetX = 0;

​

// ------------------------------------------------------------

​

​

function setup() {

  createCanvas(550, 420);

}

​

function draw() {

  background(220);

  fill(255);

  rect(10,10, 280, 400); //letter background

​

  fill(255);

  rect(20,20, 70, 50); //logo background

​

  fill(backgroundcolorlogo); // logo color

  quad(38, 31, 86, pointchangelogo, 42, 63, 30, 31); // logo shape

  noFill();

  rect(210,20, lenght1, 10); //sender information - row1

    rect(210,35, lenght2, 10);  //sender information - row2

  rect(210,50, lenght3, 10);    //sender information - row3

// is button1 on?

  if (state1) {

  buttoncolor1 =0;

  } else {

  buttoncolor1 = 255;

  }

  // draw the button1

  fill(buttoncolor1);

  rect(300,10, 115,100) ; // button1 

  // is button2 on?

    if (state2) {

  buttoncolor2 =0;

  } else {

  buttoncolor2 = 255;

  }

  // draw the button1

  fill(buttoncolor2);

  rect(425,10, 115,100) ; // button2

​

​

  fill(255);

    rect(20,110, 120, 10); //text row1

  rect(20,125, 110, 10);    // text row2

  rect(20,140, lengthrows, 10); //text row3

  rect(20,155, 140, 10);    //text row4

  rect(20,170, lengthrows, 10); //text row5

  rect(20,185, 125, 10);    //text row6

  rect(20,200, lengthrows, 10); //text row7

  rect(20,215, 155, 10);    //text row8

  rect(20,230, 172, 10);    //text row9

  rect(20,245, 179, 10);    //text row10

  rect(20,260, lengthrows, 10); //text row11

  rect(20,275, 155, 10);    //text row12

  rect(20,290, 172, 10);    //text row13

​

​

//  slider is work?

  if (dragging) {

    sliderx = mouseX + offsetX;

  }

    // Keep rectangle within limits of slider

  sliderx = constrain(sliderx, sliderStart, sliderEnd-sliderw);

​

  // Draw a line for slider

  stroke(0);

  line(sliderStart, 135, sliderEnd, 135);

​

  // Draw rectangle for slider

  fill(255);

  rect(sliderx, slidery, sliderw, sliderh);

    //map the movment of the slider to the smile

  var b = map(sliderx,sliderStart,sliderEnd-sliderw,100,255);

  lengthrows = b;

  //----------------------------------------------

    // Is it being rollover?

  if (rollover) {

    rolloverx = mouseX + rolloveroffsetX;

  }

    if (mouseX > rolloverx && mouseX < rolloverx + rolloverw && mouseY > rollovery && mouseY < rollovery + rolloverh) {

    rollover = true;

    // If so, keep track of relative location of click to corner of rectangle

    rolloveroffsetX = rolloverx-mouseX;

  } else {  rollover = false;

  }

  // Keep rectangle within limits of rollover

  rolloverx = constrain(rolloverx, rolloverStart, rolloverEnd-rolloverw);

​

  // Fill according to state

  if (rollover) {

    noStroke();

    fill (255);

  } else {

    fill(255);

  }

  // Draw rectangle for rollover + bezier movment

  noStroke();

  rect(rolloverx, rollovery, rolloverw, rolloverh);

  noFill();

  stroke(1);

​

  //movment of the mouse will change the 

  var e = map(rolloverx,rolloverStart,rolloverEnd-rolloverw,255,0);

  fill(e);

    rect(rolloverStart, 160, rolloverEnd-rolloverStart, 250);

  noFill(1);

  bezier(85, 350, 100, 320, e, 300, 35, 370);

  bezier(140, 370, e, 300, e, 300, 85, 350);

  bezier(40, 380, 20, e, 100, 420, 35, 370);

​

}

​

​

  function mousePressed() {

​

// when button1 is pressed, change the background to random shades of black

// and make the color of the logo between green or black depending on where the mouse 

// is inside the button

    if (mouseX>=300 && mouseX<=415 && mouseY>=10 && mouseY <=110 ) {

    state1 = !state1;

    backgroundcolorlogo = random(255);

    }

// when button2 is pressed, change the background lenght of lines 

// randomly

  if (mouseX>=425 && mouseX<=width-10 && mouseY>=10 && mouseY <=110 ) {

       state2 = !state2;

             lenght3 = random(20,70);

             lenght2 = random(20,70);

             lenght1 = random(20,70);

  }

​

    // Did I click on slider?

  if (mouseX > sliderx && mouseX < sliderx + sliderw && mouseY > slidery && mouseY < slidery + sliderh) {

    dragging = true;

    // If so, keep track of relative location of click to corner of rectangle

    offsetX = sliderx-mouseX;

  }

    // 

  }

​

function mouseReleased() {

  // Stop dragging

  dragging = false;

}

​

​

  //rect(300,10, 115,50) ; //logo shape

  //rect(425,10, 115,110); // sender information

​