// The grey rectangle and the white line is drawn using some transformations.

// The positions of the ends of the white line are calculated using the screenPosition-Function

// from my little addon to p5js. The red circles are drawn using these positions instead of the 

// 

​

p5.disableFriendlyErrors = true;

​

var mode = "3D";

​

function setup() {

  if (mode == "2D") createCanvas(windowWidth, windowHeight);

  else createCanvas(windowWidth, windowHeight, WEBGL);

​

  // Init the functionality calling this function: 

  addScreenPositionFunction();

​

  angleMode(DEGREES);

  rectMode(CENTER);

  stroke(255);

}

​

function draw() {

  // resetTransformationTracker();

​

  background(0);

​

  push();

​

  // Some transformations:

  if (mode == "2D") translate(width / 2, height / 2);

​

  if (mode == "2D") rotate(frameCount);

  else rotateY(frameCount);

​

  shearX(sin(frameCount) * 25);

  shearY(cos(frameCount * 0.73) * 25);

​

  scale(1 + sin(frameCount) * 0.5, 1.5, 0.8);

​

  line(-100, -100, 100, 100);

​

  // get the screen positions of the ends of the line:

  var p1 = screenPosition(-100, -100, 0);

  var p2 = screenPosition(100, 100, 0);

​

  if (mode != "2D") rotateY(90);

​

  fill(128);

  rect(0, 0, 100, 100);

​

  pop();

​

  fill(255, 0, 0);

  circle(p1.x, p1.y, 10);

  circle(p2.x, p2.y, 10);

}

​

function mousePressed() {

  noLoop();

}