Cannot add gui in my program

[ankitnimje]

I am trying to add GUI in my program for some sliders and color options. I tried with the similar code in all sample examples provided. But still, I am unable to add GUI. Please look at my code and try to give me solution ASAP if possible. A big thanks in advance.

My JavaScript code is given below.

`
// GLobal variables

let angle = 0;

let fabric;
let wood;
let floor;

var rotateXAxis = 0;
var rotateYAxis = 0;
var rotateZAxis = 0;

`
// set slider range with magic variables
var rotateXAxisMin = 0;
var rotateXAxisMax = 500;

// set angle range and step with magic variables
var rotateYAxisMin = 0;
var rotateYAxisMax = 500;

// set radius range and step with magic variables
var rotateZAxisMin = 0;
var rotateZAxisMax = 500;
//var radiusStep = 0.1;
`
var visible = true;
var gui;

function setup() {
createCanvas(1520, 640, WEBGL);

sliderRange(0, 90, 1);
gui = createGui('Function Rotate');
gui.addGlobals('myColor', 'myAngle');

noLoop();

}

function preload() {
fabric = loadImage('texture/royal_blue.jpg');
wood = loadImage('texture/wood.jpg');
floor = loadImage('texture/floor2.jpg');
}

function draw() {

clear();

background(50);

var t = translateSlider.value(); var r = rotateSlider.value(); var sc = scaleSlider.value(); var sh = sHearSlider.value();
//noStroke(); ..... I think its useful

fill(0, 102, 0);

//let camX = map(0, 0, width, -100, 0);
//let camY = map(0, 0, height, -100, 0);
//camera(0, 500, 300, 0, 1, 0, 0, 1, 0);

let camX = map(mouseX, 0, width, -1000, 0);
let camY = map(mouseY, 0, height, -1000, 0);
camera(0, -800, 500  , 0, 0, 0, 0, -1, 0);

//orbitControl();

//ambientLight(227, 232, 239);

//var dirX = (mouseX / width - 0.5) * 2;
//var dirY = (mouseY / height - 0.5) * 2;
ambientLight(200, 200, 200, 0, 100, 0);

translate(0, 0, -300);
texture(floor); 
//ambientMaterial(125);
plane(2000, 1500);

texture(fabric);
translate(0, 0, 300);
box(400, 250, 30);          //base green

//fill(77, 38, 0);
texture(wood);

translate(0, 125, 0);		//side long top 
box(425, 25, 50);			

translate(0, -250, 0);		//side long bottom
box(425, 25, 50);			

translate(200, 125, 0);		//side short right
box(25, 250, 50);

translate(-400, 0, 0);		//side short left
box(25, 250, 50);

translate(50, 80, -140);	//leg left bottom
box(30, 30, 250);

translate(0, -170, 0);		//leg left top
box(30, 30, 250);

translate(300, 0, 0);		//leg right top
box(30, 30, 250);

translate(0, 180, 0);		//leg left bottom
box(30, 30, 250);



//Snooker Balls

translate(-50, -100, 170);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(15, 0, 0);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(35, 0, 0);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(-10, 20, 0);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(-15, 10, 0);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(-15, 30, 0);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(15, 27, 0);
ambientMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(-15, 20, 0);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(-20, -20, 0);
specularMaterial(255, 0, 0);
sphere(8, 20, 20);

translate(-30, -20, 0);
specularMaterial(0, 11, 119);
sphere(8, 20, 20);

translate(-50, -40, 0);
specularMaterial(239, 4, 212);
sphere(8, 20, 20);

translate(-50, -30, 0);
specularMaterial(0, 0, 0);
sphere(8, 20, 20);

translate(-80, -30, 0);
specularMaterial(255, 255, 255);
sphere(8, 20, 20);

//Holes

translate(120, -70, -10);
specularMaterial(0, 0, 0);
sphere(12, 20, 20);

translate(0, 225, 0);
specularMaterial(0, 0, 0);
sphere(12, 20, 20);

translate(182, 0, 0);
specularMaterial(0, 0, 0);
sphere(12, 20, 20);

translate(0, -220, 0);
specularMaterial(0, 0, 0);
sphere(12, 20, 20);

translate(-360, 0, 0);
specularMaterial(0, 0, 0);
sphere(12, 20, 20);

translate(0, 220, 0);
specularMaterial(0, 0, 0);
sphere(12, 20, 20);

}

function keyPressed() {
if (keyCode === LEFT_ARROW) {
value = 255;
}
if (keyCode === RIGHT_ARROW) {
value = 0;
}
if (keyCode === UP_ARROW) {
value = 0;
}
if (keyCode === DOWN_ARROW) {
value = 0;
}
}

function windowResized() {
resizeCanvas(1520, 640);
}`

[alex-lindsay]

Are you getting any specific errors in the console?

You currently need to include both p5.gui.js and quicksettings.js in your p5.js sketch.
Did you add these both to your HTML file?