Skip to content
Related Articles

Related Articles

p5.js | orbitControl() Function

Improve Article
Save Article
  • Last Updated : 13 Jan, 2022
Improve Article
Save Article

The orbitControl() function in p5.js is used to enable the movement around a 3D sketch using a mouse or trackpad. The left mouse button can be used to rotate the camera position about the center of the scene. The right mouse button can be used to pan the camera without any rotation. The mouse scroll wheel can be used to move the camera closer or further to the center of the scene.
The function can be given optional parameters that are used to control the sensitivity of the movement along the axes. The default sensitivity along all axes is 1. A negative value of sensitivity can be used to reverse the direction of the movement.
Syntax: 
 

orbitControl( [sensitivityX], [sensitivityY], [sensitivityZ] )

Parameters: This function accepts three parameters as mentioned above and described below: 
 

  • sensitivityX: It is a number which determines the sensitivity to mouse movement along the x-axis. It is an optional parameter.
  • sensitivityY: It is a number which determines the sensitivity to mouse movement along the y-axis. It is an optional parameter.
  • sensitivityZ: It is a number which determines the sensitivity to mouse movement along the z-axis. It is an optional parameter.

Below examples illustrate the orbitControl() function in p5.js:
Example 1: 
 

javascript




let newFont;
let orbitControlEnable = false;
 
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
 
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
 
  orbitControlCheck = createCheckbox(
       "Enable Orbit Control", false);
 
  orbitControlCheck.position(20, 60);
 
  // Toggle default light
  orbitControlCheck.changed(() => {
    orbitControlEnable = !orbitControlEnable;
  });
}
 
function draw() {
  background("green");
  text("Click on the checkbox to toggle the "
     + "orbitControl() function.", -285, -125);
  noStroke();
 
  // Enable default lights
  lights();
 
  // If checkbox is enabled
  if (orbitControlEnable) {
 
    // Enable orbit control
    orbitControl();
 
    text("Orbit Control Enabled", -285, 125);
  }
  else {
    text("Orbit Control Disabled", -285, 125);
  }
  box(100);
}


Output: 
 

orbit-comtrol-toggle

Example 2: 
 

javascript




let newFont;
let orbitControlEnable = false;
 
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
 
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
 
  xSensitivitySlider = createSlider(0, 5, 1, 0.1);
  xSensitivitySlider.position(20, 50);
 
  ySensitivitySlider = createSlider(0, 5, 1, 0.1);
  ySensitivitySlider.position(20, 80);
 
  zSensitivitySlider = createSlider(0, 5, 1, 0.1);
  zSensitivitySlider.position(20, 110);
}
 
function draw() {
  background("green");
  text("Move the sliders to modify the x, y and"
         + " z orbit sensitivity", -285, -125);
  noStroke();
 
  xSensitivity = xSensitivitySlider.value();
  ySensitivity = ySensitivitySlider.value();
  zSensitivity = zSensitivitySlider.value();
 
  text("x Sensitivity is: " + xSensitivity, -285, 100);
  text("y Sensitivity is: " + ySensitivity, -285, 120);
  text("z Sensitivity is: " + zSensitivity, -285, 140);
 
  // Enable default lights
  lights();
 
  orbitControl(xSensitivity, ySensitivity, zSensitivity);
 
  box(100);
}


Output: 
 

orbit-sensitivity-sliders

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/orbitControl
 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!