"Glass Type" : ["Transparent","Translucent"], 

  "Shape" : ["Pill", "Spanned", "Helmet"],

  "Feature" : ["None","Red Spot"],

  "Funnel 1" : ["True","False"],

  "Funnel 2" : ["True","False"],

}

​

let sliderDiameter = null

let sliderAngle = null

​

const posXSelect = 40

let posYSelect = 420

​

​

​

const red1 = "#FF7878"

const red2 = "#CE0901"

const green1 = "#F9FF57"

const green2 = "#70ba14"

​

const pixelD = 2;

​

let sWidth = 0.75 / pixelD;

let margin = 16 / pixelD;

​

let horizon = 0.7;

let offsetX = 0.0;

let angle = 30.0;

​

​

const mainSize = 400 / pixelD;

​

​

const currentObject = {

  type: objects["Glass Type"][0],

  shape: objects["Shape"][0],

  feature: false,

  funnel_1: true,

  diameter: 0.4,

  funnel_2: true,

  angle: 0.4

}

​

function setup() {

  createCanvas(1920/pixelD, 1080/pixelD);

  posYSelect = height + 20;

  pixelDensity(pixelD)

  let paramIndex = 0;

  for( let param in objects ){

    let sel = createSelect();

    sel.position(posXSelect, posYSelect + 20 * paramIndex);

    for( let i = 0; i < objects[param].length; i++ ){

      sel.option( objects[param][i] );

    }

    sel.selected( objects[param][0]  );

    sel.changed( (e)=>selectEvent( param, sel.value() ) )

    paramIndex++;

  }

  sliderDiameter = createSlider(0, 100, 40);

  sliderDiameter.position(posXSelect+120, posYSelect + 20*3);

  sliderDiameter.style('width', '120px');

  sliderDiameter.elt.addEventListener('change', (event) => {

    sliderEvent( "diam", sliderDiameter.value() )

  });

​

  sliderAngle = createSlider(0, 100, 40);

  sliderAngle.position(posXSelect+120, posYSelect + 20*4);

  sliderAngle.style('width', '120px');

  sliderAngle.elt.addEventListener('change', (event) => {

    sliderEvent( "angle", sliderAngle.value() )

  });

​

  noLoop()

}

​

function draw() {

  background(255);

  drawGrid();

  translate( width/4 - mainSize/2, height*0.9 - mainSize ) 

  drawShape();

}

​

const selectEvent = (group, val) => {

  console.log( group, val )

  switch( group ){

    case "Glass Type":

      currentObject.type = val

      break;

    case "Shape":

      currentObject.shape = val

      break;

    case "Feature":

      currentObject.feature = val == "None" ? false : true

      break;

    case "Funnel 1":

      currentObject.funnel_1 = val == "True" ? true : false

      break;

    case "Funnel 2":

      currentObject.funnel_2 = val == "True" ? true : false

      break;

  }

  redraw()

} 

​

const sliderEvent = (type, val) => {

  console.log( type, val )

  if( type == "diam" ){

    currentObject.diameter = val / 100

  } else {

    currentObject.angle = val / 100

  }

  redraw()

} 

​

const drawShape = () => {

  noStroke()

  if( currentObject.type == "Transparent" ){

    fill("#FFD7D3aa")

  }else{

    fill(240,220)

  }

  switch( currentObject.shape ){

    case "Spanned":

      beginShape();

      curveVertex(0, mainSize);

      curveVertex(0, mainSize);

      curveVertex(0, mainSize*0.3);

      curveVertex(mainSize*0.4, 0);

      curveVertex(mainSize*0.8, mainSize*0.3);

      curveVertex(mainSize*0.8, mainSize);

      curveVertex(mainSize*0.8, mainSize);

      endShape();

      break;

    case "Helmet":

      rect(0, mainSize*0.2, mainSize*0.6, mainSize*0.8, mainSize*0.3, mainSize*0.3, 2, 2);

      ellipse( mainSize*0.3, mainSize, mainSize, mainSize*0.2 )

      break;

    case "Pill":

    default:

      rect(0, 0, mainSize*0.8, mainSize, mainSize*0.4, mainSize*0.4, 2, 2);

      break;

  } 

  if( currentObject.feature ){

    push()

    fill(red2)

    ellipse( mainSize*0.5, mainSize*0.5, mainSize*0.2, mainSize*0.15 )

    pop()

  }

  if( currentObject.funnel_1 ){

    push()

    fill(red2)

    let maxDiam = mainSize*0.6

    let fr = map( currentObject.diameter, 0, 1, 0, maxDiam )

    let frLength = map( currentObject.diameter, 0, 1, maxDiam*0.6, 0 )

    rect( mainSize*0.1, mainSize*0.67, frLength * -1, mainSize*0.06 )

    ellipse( mainSize*0.1 - frLength, mainSize*0.7, fr*0.8, fr )

    pop()

  }

  if( currentObject.funnel_2 ){

    push()

    translate(mainSize*0.6, mainSize*0.6)

    let fS = mainSize * 0.3

    // fill('red')

    stroke(0,50)

    let fsY = map( currentObject.angle, 0, 1, 0, fS*0.6 )

    beginShape();

    vertex(0, 0);

    vertex(0, fS/2);

    vertex(fS, fS/2 + fsY);

    vertex(fS, 0 - fsY);

    vertex(0, 0);

    endShape();

    pop()

  }

}

​

const drawGrid = () => {

  /*push()

  let xOffset = 30

  let yOffset = 20

  stroke(red1)

  let xOffest2 = 0

  if( currentObject.funnel_1 ){

    xOffest2 = map( currentObject.diameter, 0, 1, 0, xOffset*2 )

  }

  if( currentObject.type == "Transparent" ){

    for( let x = 0; x < width/xOffset; x++ ){

​

      translate( xOffset, 0 )

​

      line(0,0,0,height);

      line(0,0,0+xOffest2,height);

​

    }

  }else{

    for( let y = 0; y < height/yOffset; y++ ){

      translate( 0, yOffset )

​

      line(0,0,width,0);

​

    }

  }

  pop()*/

  if( currentObject.type == "Transparent" ){

    stroke(green2)

  }else{

    stroke(red1)

  }

  noFill()

  strokeWeight(sWidth);

  offsetX = ( height * ( 1 - horizon ) ) / sin(radians(angle));

  let printMargin = margin + map( currentObject.diameter, 0, 1, 0, 20 )

  // if( currentObject.funnel_2 ){

    push();

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

​

      translate( printMargin, 0 );

​

      // straight line

      line( 0, 0, 0, height * horizon );

​

      // other line

      line( 0, height * horizon, offsetX * -1, height );

​

    }

    pop()

  // }

  if( currentObject.funnel_1 ){

    push();

    for( let y = 0; y < height/printMargin; y++ ){

      translate( 0, printMargin )

      line(0,0,width,0);

​

    }

    pop()

  }

  if( currentObject.shape == "Helmet" ){

    push();

    translate( -width/2, 0 )

    for( let y = 0; y < width / printMargin*2; y++ ){

      translate( printMargin*2, 0 )

      line(0,0,width,width);

​

    }

    pop()

  }else if( currentObject.shape == "Spanned"  ){

    let tPM = printMargin * 2

    push();

    for( let x = 0; x < width / tPM; x++ ){

      for( let y = 0; y < height / tPM; y++ ){

        beginShape()

        vertex(tPM*x,tPM*y)

        vertex(tPM*x + tPM/2, tPM*y+tPM)

        vertex(tPM*x + tPM,  tPM*y)

        endShape()

        // triangle( tPM*x,tPM*y, tPM*x + tPM,  tPM*y, tPM*x + tPM/2, tPM*y+tPM )

      }

    }

    pop()

  }

}

​

​