# How to control 3D using 2D input elements?

**URL:** <https://discourse.processing.org/t/how-to-control-3d-using-2d-input-elements/10573>\
**Category:** Coding Questions\
**Created:** [April 23, 2019, 4:28pm UTC](https://discourse.processing.org/t/how-to-control-3d-using-2d-input-elements/10573 "2019-04-23T16:28:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Oliver](https://avatars.discourse-cdn.com/v4/letter/o/85f322/32.png) [@Oliver](https://discourse.processing.org/u/Oliver)\
**Post date:** [April 23, 2019, 4:28pm UTC](https://discourse.processing.org/t/how-to-control-3d-using-2d-input-elements/10573/1 "2019-04-23T16:28:48Z")

</div>

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”?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 23, 2019, 6:17pm UTC](https://discourse.processing.org/t/how-to-control-3d-using-2d-input-elements/10573/2 "2019-04-23T18:17:27Z")

</div>

Hello,

this should be straight forward

see:

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#custom-shapes--2d-drawing-in-webgl)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

Regards, Chrisir

```auto
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; 
}

```