How to control 3D using 2D input elements?

p5.js Coding Questions
1

Hello all! I’m writing a program for visualising data in 3D (using WEBGL) and I would like to control some parameters in the scene with 2D elements like sliders, buttons and text fields. Is there any way one can combine these 3D and 2D things in a single canvas or how would one “connect” a 3D canvas and a 2D canvas so that they can “exchange data”?

1 Like
2

Hello,

this should be straight forward

see:

Regards, Chrisir

let a1=0.0; // angle 
let colFlag=false; 
let myFont;

function preload() {
  //myFont = loadFont('assets/AvenirNextLTPro-Demi.otf');
}

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(255);
  
  push();
  fill(255,0,0); 
  ellipse(-123,-123,10,10); 
  pop();
  
  push();
  //quad
  translate(-122, 0, -20);
  let i = 100;
  fill(255,0,0); // red 
  quad(-100, i, 0,
    100, i, 0,
    -100, 100, i,
    100, 100, i );
  pop();
  
  push();
  if(colFlag)
    fill(255,0,0);
  else 
    fill(0,0,255);
  translate(width/2-140,height/2-130, -30); //moves our drawing origin to the top left corner
  rotateY(a1, [1,1,0]);
  box();
  pop();
  a1+=0.03; 
}

function mousePressed() {
if(dist(mouseX,mouseY, 23+44, 23+12) < 44) 
  colFlag=true; 
}
1 Like