let funcLeft = 0.15

let funcTop = 0.85

let euler;

​

function preload() {

  euler = createImg('https://todayinsci.com/E/Euler_Leonhard/EulerLeonhard300px.jpg')

  euler.hide()

}

​

function setup() {

  createCanvas(600, 600);

  xSlider = createSlider(0, 2, 0, 0.01)

  xSlider.position(width*0.4, width*funcTop*0.85)

}

​

function draw() {

  background(240);

  push();

  translate(100, 125)

  rotate(-xSlider.value()*PI)

​

  image(euler, -100,-125,200, 250)

​

  pop();

  line(width/2, 0, width/2, width)

  line(0, width/2, width, width/2)

  textFont('monospace')

​

  textSize(12)

  let xval = (xSlider.value()*PI).toFixed(2)

  push()

  fill(220)

  rect(0, width*funcTop*0.75, width, height-width*funcTop*0.75)

  pop()

  push();

  translate(width/2, width/2)

  rotate(3*PI/2)

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

    text("imaginary"[i], 

         width*0.2+i*8, 15 + 3*sin((PI*frameCount + 50*i)/100))

  }

  pop();

  push();

  textAlign(CENTER)

  text("Real", 

       width*0.8, width/2 + 15)

  text('"Real" input value = ' + xSlider.value().toFixed(2) + "×π", 

       xSlider.position().x + 50, xSlider.position().y - 10)

  pop();

  text("i×"+xval, 

       width*funcLeft+12, width*funcTop-12)

  push();

  textSize(20)

  text("e", 

       width*funcLeft, width*funcTop)

  text(` = cos(${xval}) + i×sin(${xval})`, 

       width*funcLeft+48, width*funcTop)

  let calcX = cos(xval)

  let calcY = sin(xval)

  text(` = ${calcX.toFixed(2)} + i×${calcY.toFixed(2)}`, 

       width*funcLeft+48, width*funcTop+25)

  pop();

  push();

  translate(width/2, width/2)

  noFill()

  strokeWeight(0.1)

  circle(0, 0, 100)

  strokeWeight(8)

  stroke(0, 0, 255)

  point(calcX*50, -calcY*50)

  pop();

}