​

problem: how do we map points from one plane of size Q * W to another plane of size E * T

whatever

 I have no clue

 these numbers are breaking my brain I have no clue what I'm doing REEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

 update

 I think I need? Linear transformations? how does that work on a circle radius

 update

 nope nope nope nope nope 

 update

 OKAY I GOT IT

 (*YR*()WYF(*WFYWE(F*YWE(FY(WEYF F)))))

 but its bad

*/

​

var sizeSlider;

var xslid, yslid, wslid, hslid;

​

​

const MAXTHING = 10**9;

const sliderMIN = 0.1;

const sliderMAX = 10;

​

const MARG = 50;

​

var ACROSS = 100;

var LENGTH = 100;

​

​

function setup() {

  createCanvas(400, 400);

  sizeLabel = createDiv("Size")

  sizeSlider= createSlider(sliderMIN, sliderMAX, 1);

  sizeLabel.position(10,410);

  sizeSlider.parent(sizeLabel);

  xslidLabel = createDiv("X ")

  xslid=createSlider(MARG, width-MARG);

  xslidLabel.position(10,440);

  xslid.parent(xslidLabel);

  yslidLabel = createDiv("Y ")

  yslid=createSlider(MARG, height-MARG);

  yslidLabel.position(10,460);

  yslid.parent(yslidLabel);

  wslidLabel = createDiv("W ")

  wslid=createSlider(1, 400,150);

  wslidLabel.position(10,480);

  wslid.parent(wslidLabel);

  hslidLabel = createDiv("H ")

  hslid=createSlider(1, 400,150);

  hslidLabel.position(10,500);

  hslid.parent(hslidLabel);

  exl = createDiv("Ex ")

  exs =createSlider(1, 400);

  exl.position(210,410);

  exs.parent(exl);

  eyl = createDiv("Ey")

  eys=createSlider(1, 400);

  eyl.position(210,440);

  eys.parent(eyl);

  erl = createDiv("Er")

  ers=createSlider(1, 100);

  erl.position(210,470);

  ers.parent(erl);

}

​

function mouseClicked(){

  ACROSS = round(random(1, 10**9));

  LENGTH = round(random(1, 10**9));

}

​

function mapByWidth(w){

  return map(w,

            0, LENGTH,

             0, wslid.value()

            )

}

​

function mapByHeight(h){

  return map(h,

            0, ACROSS,

             0, hslid.value()

            )

}

​

function mapX(x) {

  return map(x,

             0, LENGTH,

             xslid.value(), wslid.value()+xslid.value());

}

​

function mapY(y) {

  return map(y,

             0, ACROSS,

             hslid.value()+yslid.value(), yslid.value());

}

​

function calcLog(value, minp, maxp, minv, maxv) {

  /* amazing.

  https://stackoverflow.com/a/846249/6934388

  */

  var scale = (maxv-minv) / (maxp-minp);

  minv = Math.log(minv);

  maxv = Math.log(maxv);

  return (Math.log(value)-minv) / scale + minp;

}

​

function draw() {

  background(220);

  textSize(20);

  textAlign(LEFT);

  text("IM GOING CRAZY \nWHY DOESNT THE LINE \nDO WHAT I WANT REEEEEEEEEEEE\nnvm its fixed",150,320);

  textSize(12);

  strokeWeight(0);

  text(`size:${round(sizeSlider.value())}`,15,350);

  text(`ACROSS: ${ACROSS}`,15,370);

  text(`LENGTH: ${LENGTH}`,15,390);

  stroke('black');

  var x1 = xslid.value();

  var y1 = yslid.value();

  var x2 = x1 + wslid.value();

  var y2 = y1 + hslid.value();

  strokeWeight(1);

  // original pos where I want everything to be

  line(x1,y1,x2,y1);

  line(x1,y1,x1,y2);

  line(x1,y2,x2,y2);

  line(x2,y1,x2,y2);

  textAlign(CENTER);

  // text thingies around initial stuff

  strokeWeight(0);

  text(`(${round(x1)}, ${round(y1)})`,x1,y1-7)

  text(`(${round(x2)}, ${round(y2)})`,x2,y2+12)

  var wCentre = (x2+x1)/2;

  var hCentre = (y2+y1)/2;

  text(`width:${wslid.value()}`,wCentre,y2+15)

  textAlign(LEFT);

  text(`height:\n(${hslid.value()})`,x2+10,hCentre)

  textAlign(CENTER);

  text(`(0, ${ACROSS})`,x1,y1-27)

  text(`(${LENGTH},0)`,x2,y2+32)

  text(`new:${LENGTH}`,wCentre,y2+45)

  textAlign(LEFT);

  text(`new:\n(${ACROSS})`,x2+50,hCentre+10)

  // manual rectangle.

  var rx =  LENGTH/10;

  var ry =  ACROSS/10;

  var rx2 = rx+rx;

  var ry2 = ry+ry;

​

  strokeWeight(1);

  textSize(5);

  line(mapX(rx),mapY(ry),mapX(rx2),mapY(ry2));

  line(mapX(rx2),mapY(ry),mapX(rx),mapY(ry2));

  line(mapX(rx2),mapY(ry),mapX(rx),mapY(ry));

  line(mapX(rx),mapY(ry),mapX(rx),mapY(ry2));

  line(mapX(rx2),mapY(ry),mapX(rx2),mapY(ry2));

  line(mapX(rx2),mapY(ry2),mapX(rx),mapY(ry2));

  strokeWeight(0);

  textAlign(CENTER)

  text(`(${round(rx)}\n${round(ry)})`, mapX(rx),mapY(ry)+6)

  // 'automatic' rectangle

  rx =  (LENGTH/10);

  ry =  (ACROSS/10)*3;

  rx2 = rx+(LENGTH/10);

  ry2 = ry+(ACROSS/10);

  var distX = (rx2-rx);

  var distY = (ry2-ry);

  strokeWeight(1);

​

  rect(mapX(rx),mapY(ry), mapByWidth(distX), -mapByHeight(distY) );

  strokeWeight(0);

  strokeWeight(0);

  text(`(${round(rx)}\n ${round(ry)})`,mapX(rx),mapY(ry)+7)

  text(`(${round(rx2)}\n ${round(ry2)})`,mapX(ry2),mapY(ry2)+7)

​

  // the circle benchmark

  rx =  (LENGTH/10)*6;

  ry =  (ACROSS/10)*6;

  rx2 = rx+(LENGTH/10);

  ry2 = ry+(ACROSS/10);

  distX = (rx2-rx);

  distY = (ry2-ry);

  strokeWeight(1);

  ellipse(mapX(rx),mapY(ry), mapByWidth(distX*2), -mapByHeight(distY*2) );

  line(

    mapX(rx), mapY(ry),

    mapX(rx), mapY(ry2));

​

}