Two point perspective | KTBYTE Student Projects

The showcase player uses a modified version of Processing.js in combination with jsweet to let students program their apps in Java code while still allowing for browser support.

Content created by students is scaled to fit the showcase frame while maintaining aspect ratio and cursor position. This is why some projects may appear blurry in fullscreen, or why some small details may not be visible on a small screen

Embed HTML:

<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#95881' allowfullscreen></iframe>

class Cube
{
  float y1, y2, y3, y4, x1, x2, x3, x4, y5, y6;
  float pt1, pt2, midpoint;
  float mX, mY;
  float amt;

  color light, darkLeft, darkRight; 
  color left, right;

  Cube(float mouse_X, float mouse_Y, float amount, float point1, float point2, float midPoint)
  {
    amt = amount;
    mX = mouse_X;
    mY = mouse_Y;
    pt1 = point1;
    pt2 = point2;
    midpoint = midPoint;
  }

  void cubeMath()
  {  
    y1 = lerp(0, mY, amt); //change this amount 0.8
    y2 = lerp(400, mY, amt);

    y3 = lerp(y1, midpoint, 0.3);
    y4 = lerp(y2, midpoint, 0.3);

    x1 = lerp(mX, pt1, 0.3);
    x2 = lerp(mX, pt2, 0.3);

    float XYdiff = lerp(x1, x2, 0.5);
    x3 = lerp(mX, XYdiff, 1.52);
    y5 = lerp(y1, midpoint, 0.46);
    y6 = lerp(y2, midpoint, 0.46);

    float diff = mX/2.35; //scale mouse to RGB range
    float diffDiff = 255 - diff;

    //println(diff + " " + diffDiff);

    darkLeft = color(diff);
    light = color(255);
    left = lerpColor(darkLeft, light, 0.5);

    darkRight = color(diffDiff);
    right = lerpColor(darkRight, light, 0.5);
  }

  void display()
  {

    stroke(200);
    strokeWeight(0.5);

    line(x1, 0, x1, height);
    line(x2, 0, x2, height);
    line(0, y1, 600, y1);
    line(0, y2, 600, y2);

    line(0, y5, 600, y5);
    line(0, y6, 600, y6);

    //front
    line(mX, 0, mX, height);
    line(x3, 0, x3, height);

    stroke(0);
    strokeWeight(1);

    //left
    line(pt1, midpoint, mX, y1);
    line(pt1, midpoint, mX, y2);

    //right
    line(pt2, midpoint, mX, y1);
    line(pt2, midpoint, mX, y2);

    //top
    line(pt1, midpoint, x2, y3);
    line(pt2, midpoint, x1, y3);

    //bottom
    line(pt1, midpoint, x2, y4);
    line(pt2, midpoint, x1, y4);

    stroke(255, 0, 0);
    strokeWeight(1);
    line(mX, y1, mX, y2);

    fill(right, 150);

    //TOP Counter clockwise
    beginShape();
    vertex(x1, y3);
    vertex(mX, y1);
    vertex(x2, y3);
    vertex(x3, y5);
    vertex(x1, y3);
    endShape();

    fill(left, 150);

    //BOTTOM Clockwise
    beginShape();
    vertex(x1, y4);
    vertex(mX, y2);
    vertex(x2, y4);
    vertex(x3, y6);
    vertex(x1, y4);
    endShape();

    line(x3, y5, x3, y6);

    //LEFT SIDE Counter clockwise
    beginShape();
    vertex(mX, y1);
    vertex(x1, y3);
    vertex(x1, y4);
    vertex(mX, y2);
    vertex(mX, y1);
    endShape();

    fill(right, 100);

    //RIGHT SIDE Clockwise
    beginShape();
    vertex(mX, y1);
    vertex(x2, y3);
    vertex(x2, y4);
    vertex(mX, y2);
    vertex(mX, y1);
    endShape();

    //  fill(0);
    //  //Clockwise
    //  text(int(x1) + ", " + int(y3), x1, y3); //point 1
    //  text(int(x2) + ", " + int(y3), x2, y3); //point 2
    //  text(int(x2) + ", " + int(y4), x2, y4); //point 3
    //  text(int(x1) + ", " + int(y4), x1, y4); //point 4
    //  
    //  text(mX + ", " + int(y1), mX, y1); 
    //  text(mX + ", " + int(y2), mX, y2);
  }
}

Cube cube;
PFont font;
float mX, mY;
float pt1, pt2;
float amt;
float midpoint;

void setup()
{
  size(600, 600);
  smooth();
  //String[] fontlist = PFont.list();
  //println(fontlist);
  //font = loadFont("ITC.vlw");
  amt = 1.4;
  pt1 = 3;
  pt2 = 597;
  midpoint = 300;
}

void draw()
{
  background(235, 255, 255, 255);
  fill(0);
  //textFont(font, 18);
  text("Two Point Perspective", 9, 20);
  fill(100);
  //textFont(font, 12);
  text("Drag the points to change width", 9, 40);
  text("Use the UP and DOWN arrows to change height", 9, 60);

  mX = mouseX;
  mY = mouseY;
  println(mouseX + " " + mouseY);

  fill(255, 0, 0);
  stroke(0);
  strokeWeight(1);

  line(0, midpoint, 600, midpoint); //horizon line

  ellipse(pt1, midpoint, 6, 6);
  ellipse(pt2, midpoint, 6, 6);  

  cube = new Cube(mX, mY, amt, pt1, pt2, midpoint);
  cube.cubeMath();
  cube.display();

  fill(0);
  //textFont(font, 10);
  if (pt1 < 250)
  {
    text(pt1 + ", " + midpoint, pt1, midpoint-10);
  }
  if (pt1 > 250)
  {
    text(pt1 + ", " + midpoint, pt1-50, midpoint-10);
  }

  if (pt2 > 550)
  {
    text(pt2 + ", " + midpoint, pt2-55, midpoint-10);
  }
  if (pt2 < 550)
  {
    text(pt2 + ", " + midpoint, pt2, midpoint-10);
  }
}

void mouseDragged()
{
  if ((mX > pt1-10) && (mX < (pt1+10)) && (mY > midpoint-10) && (mY < midpoint+10))
  {
    pt1 = mouseX;

    if (pt1 < 3)
    {
      pt1 = 3;
    }
    if (pt1 > 294)
    {
      pt1 = 294;
    }
  }

  if ((mX > pt2-10) && (mX < (pt2+10)) && (mY > midpoint-10) && (mY < midpoint+10))
  {
    pt2 = mouseX;

    if (pt2 > 597)
    {
      pt2 = 597;
    }
    if (pt2 < 306)
    {
      pt2 = 306;
    }
  }
}

void keyReleased()
{
  if (keyCode == UP)
  {
    amt = amt + 0.1;
    if (amt > 2.0)
    {
      amt = 2.0;
    }
  }

  if (keyCode == DOWN)
  {
    amt = amt - 0.1;
    if (amt < 1.0)
    {
      amt = 1.0;
    }
  }

  println(amt);
}

DESCRIPTION