f = loadFont(

    "https://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/font/SourceCodePro-Bold.otf"

  );

}

​

let delta;

let fc = 0

​

function setup() {

  createCanvas(600, 400, WEBGL);

​

  s = createSlider(0, PI, PI/2, 0.01);

  delta = 0 // PI/3

  cam = createEasyCam();

  // document.oncontextmenu = function () {

  //   return false;

  // };

  textFont(f)

  textSize(20)

  cam.panX(150)

  cam.panY(-50)

//   cam.panY(-40)

  cam.rotateY(PI/3)

  cam.rotateX(PI/6)

//   cam.rotateY(-0.7)

  ttt = createP("Delta = 0.5PI")

  btn = createButton("Pause");

  paused = false;

  btn.mousePressed(() => {

    if (paused) {

      btn.html("Pause")

      paused = false;

    } else {

      btn.html("Play")

      paused = true

    }

  })

}

​

function draw() {

  background(255);

  delta = s.value()

​

  // text("Plane of polarisation", 10, -52)

​

  // lights();

  // box(100);

  strokeWeight(2)

  stroke(0)

​

  line(0, 0, 800, 0);

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

  line(0, 0, 0, 0, 0, 100);

  strokeWeight(1)

  let waveX = x =>  -cos(x * 2*PI/150 - 2*PI/100 * fc) * 50

  let waveY = x =>  -cos(x * 2*PI/150 - 2*PI/100 * fc + delta) * 50

  noFill()

  stroke("red")

  beginShape()

  let distX = []

  let distY = []

  for (let i = 0; i < 800;  i++) {

    let x = waveX(i);

    let y = waveY(i);

    vertex(i, x, y)

    distX[i] = x;

    distY[i] = y;

  }

  endShape()

  // stroke(0, 255, 0, 127)

  // beginShape()

  // for (let i = 0; i < 800;  i++) {

  //   let x = waveX(i);

  //   vertex(i, x, 0)

  // }

  // endShape()

  // stroke(0, 0, 255, 127)

  // beginShape()

  // for (let i = 0; i < 800;  i++) {

  //   let y = waveY(i);

  //   vertex(i, 0, y)

  // }

  // endShape()

  // stroke('blue')

  // beginShape()

  // for (let i = 0; i < 800;  i++) {

  //   vertex(i, 0, -wave(i))

  // }

  // endShape()

  for (let i = 0; i < 800;  i+=20) {

    // let amp = dist[i]

    let pos = createVector(i,0,0)

    let dir1 = createVector(0, distX[i], distY[i])

    // let dir2 = createVector(0, 0, -amp)

    drawArrow(pos, dir1, "red")

    // drawArrow(pos, dir2, "blue")

  }

  noStroke()

  fill(0)

  text("x", 0, -100, 1)

  translate(0, 0, 100)

  rotate(PI/2, [0, 1, 0])

  text("y", 0, 0)

  // translate(400,0,0)

  // plane(800, 100)

  renderLatex(`\\begin{aligned}

E_{x} & = E_{0}\\cos(kz - \\omega t) \\\\

E_{y} & = E_{0}\\cos(kz - \\omega t + \\delta)

\\end{aligned}`, 280, 30)

  if(!paused) fc++

  ttt.html(`Delta = ${(s.value()/PI).toFixed(2)}PI`)

}

​

​

function drawArrow(base, vec ,myColor) {

  push();

  stroke(myColor);

  strokeWeight(3);

  fill(myColor);

  translate(base.x, base.y, base.z);

  line(0, 0, 0, vec.x, vec.y, vec.z);

  // rotateX(vec.heading());

  // let arrowSize = 7;

  // translate(vec.mag() - arrowSize, 0, 0);

  // triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);

  pop();

}

​

let latexCache = new Map()

​

function renderLatex(text, x, y) {

  const align = textAlign();

  let e = 0, f = 0;

  // const { e, f } = drawingContext.getTransform();

  if (latexCache.has(text)) {

    const i = latexCache.get(text);

    // i.position(e+x, f+y);

    //

  } else {

    const i = createImg(

      `https://latex.codecogs.com/png.image?\\dpi{300}{\\color{Black}&space;${text}`,

      "",

      "",

      () => {

        const w = i.width;

        i.size(min(w*0.7, width/2), AUTO);

      }

    );

    latexCache.set(text, i);

​

    i.position(e + x, f + y);

    i.elt.classList.add(align.horizontal);

    i.elt.classList.add(align.vertical);

  }

}

​

​