Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot add gui in my program #12

Open
ankitnimje opened this issue Apr 27, 2018 · 1 comment
Open

Cannot add gui in my program #12

ankitnimje opened this issue Apr 27, 2018 · 1 comment

Comments

@ankitnimje
Copy link

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
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants