123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581 |
- /**
- * Prototype functions to make library
- * method calls more like p5.js.
- */
- // Create GUI context
- let imgui;
- p5.prototype.createGui = function() {
- imgui = new ImGui();
- }
- // Start GUI
- p5.prototype.startGui = function() {
- imgui.start();
- }
- // End GUI
- p5.prototype.endGui = function() {
- imgui.end();
- }
- // Prototype functions for GUI elements
- p5.prototype.button = function(label, x, y, w=128, h=32) {
- return imgui.button(label, x, y, w, h);
- }
- p5.prototype.checkbox = function(label, value, x, y, w=32, h=32) {
- return imgui.checkbox(label, value, x, y, w, h);
- }
- p5.prototype.slider = function(label, value, x, y, w=256, h=32, min=0, max=1) {
- return imgui.slider(label, value, x, y, w, h, min, max);
- }
- p5.prototype.sliderV = function(label, value, x, y, w=32, h=256, min=0, max=1) {
- return imgui.sliderV(label, value, x, y, w, h, min, max);
- }
- /**
- * Generates hash code from a string.
- * @see http://stackoverflow.com/q/7616461/940217
- * @return {number}
- */
- String.prototype.hashCode = function(){
- if (Array.prototype.reduce){
- return this.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
- }
- var hash = 0;
- if (this.length === 0) return hash;
- for (var i = 0; i < this.length; i++) {
- var character = this.charCodeAt(i);
- hash = ((hash<<5)-hash)+character;
- hash = hash & hash; // Convert to 32bit integer
- }
- return hash;
- }
- /*******************
- * IMGUI
- *
- *
- */
- class ImGui {
- constructor() {
- this.hotItem = 0;
- this.activeItem = 0;
-
- this.style = new ImGuiStyle();
- // this.style.StyleColorsClassic();
- }
-
- // Check whether current mouse position
- // is within a rectangle
- regionHit(x, y, w, h) {
- if (mouseX < x ||
- mouseY < y ||
- mouseX >= x + w ||
- mouseY >= y + h) {
- return false;
- }
- return true;
- }
-
- setHit(id) {
- this.hotItem = id;
- if (this.activeItem == 0 && mouseIsPressed) {
- this.activeItem = id;
- }
- }
-
- /// Simple checkbox IMGUI widget
- checkbox(label, value, x, y, w=32, h=32) {
- // Create hashed id from label
- let id = label.hashCode();
- // let id = new Error().stack;
-
- // Check whether the button should be 'hot' or 'active'
- if (this.regionHit(x, y, w, h)) {
- this.hotItem = id;
- if (this.activeItem == 0 && mouseIsPressed) {
- this.activeItem = id;
- value.val = !value.val;
- }
- }
-
- // Render button
- let x8 = x+w/6;
- let y8 = y+h/6;
- let w16 = w-w/3;
- let h16 = h-h/3;
- let xw = x8+w16;
- let yh = y8+h16;
- let strokeMult = map(((w > h) ? w : h), 32, 1000, 2, 20);
-
- push();
- rectMode(CORNER);
- stroke(this.style.col_checkOuterStroke);
- strokeWeight(this.style.checkStrokeWt);
- fill(this.style.col_checkOuterFill);
- rect(x, y, w, h, this.style.rounding);
-
-
- if (this.hotItem == id && !value.val) {
- // Button is 'hot' and 'false'
- fill(this.style.col_checkOuterFillHover);
- rect(x, y, w, h, this.style.rounding);
- }
- else if (this.hotItem == id && value.val) {
- // Button is 'hot' and 'true'
- push();
- stroke(this.style.col_checkInnerStrokeHover);
- strokeWeight(this.style.checkStrokeWt*strokeMult);
- line(x8, y8, xw, yh);
- line(xw, y8, x8, yh);
- pop();
-
- if (this.activeItem == id) {
- // Button is also 'active'
- fill(this.style.col_checkOuterFillActive);
- rect(x, y, w, h, this.style.rounding);
-
- push();
- stroke(this.style.col_checkInnerStrokeActive);
- strokeWeight(this.style.checkStrokeWt*strokeMult);
- line(x8, y8, xw, yh);
- line(xw, y8, x8, yh);
- pop();
- }
- }
- else if (value.val) {
- // Button is 'true' but not 'hot'
- push();
- stroke(this.style.col_checkInnerStroke);
- strokeWeight(this.style.checkStrokeWt*strokeMult);
- line(x8, y8, xw, yh);
- line(xw, y8, x8, yh);
- pop();
- }
-
- pop();
-
- // If button is 'hot' and 'active', but mouse button
- // is not down, the user must have clicked the button.
- if (mouseIsPressed &&
- this.hotItem == id &&
- this.activeItem == id) {
- return true;
- }
-
- // Otherwise, no clicky.
- return false;
- }
-
- /// Simple button IMGUI widget
- button(label, x, y, w=128, h=32) {
- // Create hashed id from stack
- let id = label.hashCode();
-
- // Check for 'hot' or 'active'
- if (this.regionHit(x, y, w, h)) {
- this.setHit(id);
- }
-
- // Render button
- push();
- stroke(this.style.col_buttonStroke);
- strokeWeight(this.style.buttonStrokeWt);
- rectMode(CORNER);
-
- if (this.hotItem == id) {
- if (this.activeItem == id) {
- // Button is both 'hot' and 'active'
- fill(this.style.col_buttonFillActive);
- rect(x, y, w, h, this.style.rounding);
- }
- else {
- // Button is merely 'hot'
- fill(this.style.col_buttonFillHover);
- rect(x, y, w, h, this.style.rounding);
- }
- }
- else {
- // Button is not hot, but it may be active
- fill(this.style.col_buttonFill);
- rect(x, y, w, h, this.style.rounding);
- }
-
- // Label rendering.
- push();
- fill(this.style.col_buttonLabel);
- noStroke();
- textAlign(CENTER, CENTER);
- textFont(this.style.labelFont);
- let size = w/10;
- if (size > this.style.labelFontMaxSize) {
- size = this.style.labelFontMaxSize;
- }
- textSize(size);
- text(label, x + w/2, y + h/2);
- pop();
-
- pop();
-
- // If button is 'hot' and 'active', but mouse button
- // is not down, the user must have clicked the button.
- if (mouseIsPressed &&
- this.hotItem == id &&
- this.activeItem == id) {
- return true;
- }
-
- // Otherwise, no clicky.
- return false;
- }
-
- /// Simple slider IMGUI widget
- slider(label, value, x, y, w=256, h=32, min=0, max=1) {
- // Create hashed id from label
- let id = label.hashCode();
-
- // Calculate mouse cursor's relative x offset
- let xpos = map(value.val, min, max, 0, w-32);
-
- // Check for 'hot' or 'active'
- if (this.regionHit(x, y, w, h)) {
- this.setHit(id);
- }
-
- // Render the slider
- if (this.activeItem == id) {
- this.drawSlider(xpos, x, y, w, h,
- this.style.col_sliderBgFillActive,
- this.style.col_sliderIndctrFillActive,
- this.style.col_sliderGrabFillActive,
- this.style.col_sliderGrabStroke);
- }
- else if (this.hotItem == id) {
- this.drawSlider(xpos, x, y, w, h,
- this.style.col_sliderBgFillHover,
- this.style.col_sliderIndctrFillHover,
- this.style.col_sliderGrabFillHover,
- this.style.col_sliderGrabStroke);
- }
- else {
- this.drawSlider(xpos, x, y, w, h,
- this.style.col_sliderBgFill,
- this.style.col_sliderIndctrFill,
- this.style.col_sliderGrabFill,
- this.style.col_sliderGrabStroke);
- }
-
- // Update widget value
- if (this.activeItem == id) {
-
- let mousePos = mouseX - x;
- let v = map(mousePos, 0, w, min, max, true);
-
- if (v != value.val) {
- value.val = v;
- return true;
- }
- }
- return false;
- }
-
- /// Simple vertical slider IMGUI widget
- sliderV(label, value, x, y, w=32, h=256, min=0, max=1) {
- // Create hashed id from label
- let id = label.hashCode();
-
- // Calculate mouse cursor's relative y offset
- let ypos = map(value.val, min, max, 0, h-32);
-
- // Check for 'hot' or 'active'
- if (this.regionHit(x, y, w, h)) {
- this.setHit(id);
- }
-
- // Render the slider
- if (this.activeItem == id) {
- this.drawSliderV(ypos, x, y, w, h,
- this.style.col_sliderBgFillActive,
- this.style.col_sliderIndctrFillActive,
- this.style.col_sliderGrabFillActive,
- this.style.col_sliderGrabStroke);
- }
- else if (this.hotItem == id) {
- this.drawSliderV(ypos, x, y, w, h,
- this.style.col_sliderBgFillHover,
- this.style.col_sliderIndctrFillHover,
- this.style.col_sliderGrabFillHover,
- this.style.col_sliderGrabStroke);
- }
- else {
- this.drawSliderV(ypos, x, y, w, h,
- this.style.col_sliderBgFill,
- this.style.col_sliderIndctrFill,
- this.style.col_sliderGrabFill,
- this.style.col_sliderGrabStroke);
- }
-
- // Update widget value
- if (this.activeItem == id) {
-
- let mousePos = mouseY - y;
- let v = map(mousePos, 0, h, min, max, true);
-
- if (v != value.val) {
- value.val = v;
- return true;
- }
- }
- return false;
- }
-
- /// Draw function for slider
- drawSlider(xpos, x, y, w, h, bgFill, indctrFill, grabFill, grabStroke) {
- push();
- stroke(this.style.col_sliderStroke);
- strokeWeight(this.style.sliderStrokeWt);
- rectMode(CORNER);
- // Render bg
- fill(bgFill);
- rect(x, y, w, h, this.style.rounding);
- // Render indicator
- push();
- noStroke();
- fill(indctrFill);
- // rect(x+0.2*h, y+0.2*h, xpos+0.*h, h-0.4*h,
- // this.style.rounding, 0, 0, this.style.rounding);
- rect(x+10, y+10, xpos+12, h-20,
- this.style.rounding, 0, 0, this.style.rounding);
- pop();
- // Render grab
- push();
- stroke(grabStroke);
- fill(grabFill);
- rect(x+8+xpos, y+8, 16, h-16, this.style.rounding);
- pop();
- pop();
- }
-
- /// Draw function for vertical slider
- drawSliderV(ypos, x, y, w, h, bgFill, indctrFill, grabFill, grabStroke) {
- push();
- stroke(this.style.col_sliderStroke);
- strokeWeight(this.style.sliderStrokeWt);
- rectMode(CORNER);
- // Render bg
- fill(bgFill);
- rect(x, y, w, h, this.style.rounding);
- // Render indicator
- push();
- noStroke();
- fill(indctrFill);
- // rect(x+0.2*w, y+ypos+0.1*w, w-0.4*w, h-ypos-0.3*w,
- // 0, 0, this.style.rounding, this.style.rounding);
- rect(x+10, y+ypos+12, w-20, h-ypos-20,
- 0, 0, this.style.rounding, this.style.rounding);
- pop();
- // Render grab
- push();
- stroke(grabStroke);
- fill(grabFill);
- rect(x+8, y+8+ypos, w-16, 16, this.style.rounding);
- pop();
- pop();
- }
-
- /// Prepare for start IMGUI code
- start() {
- this.hotItem = 0;
- }
-
- /// Finish at end IMGUI code
- end() {
- if (!mouseIsPressed) {
- this.activeItem = 0;
- }
- else {
- if (this.activeItem == 0) {
- this.activeItem = -1;
- }
- }
- }
- }
- /*******************
- * IMGUI STYLE
- *
- *
- */
- class ImGuiStyle {
- constructor() {
- // Global pars
- this.rounding = 10;
- this.labelFont = 'Arial';
- this.labelFontMaxSize = 30;
- this.strokeWt = 2;
- // Button pars
- this.buttonStrokeWt = this.strokeWt;
- this.col_buttonStroke = color(0);
- this.col_buttonFill = color(160);
- this.col_buttonFillHover = color(196);
- this.col_buttonFillActive = color(220);
- this.col_buttonLabel = color(0);
-
- // Checkbox pars
- this.checkStrokeWt = this.strokeWt;
- this.col_checkOuterStroke = color(0);
- this.col_checkOuterStrokeHover = color(0);
- this.col_checkOuterStrokeActive = color(0);
- this.col_checkOuterFill = color(128);
- this.col_checkOuterFillHover = color(144);
- this.col_checkOuterFillActive = color(160);
- this.col_checkInnerFill = color(200);
- this.col_checkInnerStroke = color(200);
- this.col_checkInnerFillHover = color(220);
- this.col_checkInnerStrokeHover = color(220);
- this.col_checkInnerFillActive = color(240);
- this.col_checkInnerStrokeActive = color(240);
-
- // Slider pars
- this.sliderStrokeWt = this.strokeWt;
- this.col_sliderStroke = color(0);
- this.col_sliderBgFill = color(160);
- this.col_sliderBgFillHover = color(175);
- this.col_sliderBgFillActive = color(175);
- this.col_sliderBgStroke = color(0);
- this.col_sliderBgStrokeHover = color(0);
- this.col_sliderBgStrokeActive = color(0);
- this.col_sliderIndctrFill = color(128);
- this.col_sliderIndctrFillHover = color(144);
- this.col_sliderIndctrFillActive = color(144);
- this.col_sliderIndctrStroke = color(128);
- this.col_sliderIndctrStrokeHover = color(144);
- this.col_sliderIndctrStrokeActive = color(144);
- this.col_sliderGrabFill = color(64);
- this.col_sliderGrabFillHover = color(96);
- this.col_sliderGrabFillActive = color(240);
- this.col_sliderGrabStroke = color(64);
- this.col_sliderGrabStrokeHover = color(0);
- this.col_sliderGrabStrokeActive = color(0);
- }
-
- StyleColorsGrayscale() {
- this.rounding = 10;
- this.labelFont = 'Arial';
- this.labelFontMaxSize = 30;
- this.strokeWt = 2;
- // Button pars
- this.buttonStrokeWt = this.strokeWt;
- this.col_buttonStroke = color(0);
- this.col_buttonFill = color(160);
- this.col_buttonFillHover = color(196);
- this.col_buttonFillActive = color(220);
- this.col_buttonLabel = color(0);
-
- // Checkbox pars
- this.checkStrokeWt = this.strokeWt;
- this.col_checkOuterStroke = color(0);
- this.col_checkOuterStrokeHover = color(0);
- this.col_checkOuterStrokeActive = color(0);
- this.col_checkOuterFill = color(128);
- this.col_checkOuterFillHover = color(144);
- this.col_checkOuterFillActive = color(160);
- this.col_checkInnerFill = color(200);
- this.col_checkInnerStroke = color(200);
- this.col_checkInnerFillHover = color(220);
- this.col_checkInnerStrokeHover = color(220);
- this.col_checkInnerFillActive = color(240);
- this.col_checkInnerStrokeActive = color(240);
-
- // Slider pars
- this.sliderStrokeWt = this.strokeWt;
- this.col_sliderStroke = color(0);
- this.col_sliderBgFill = color(160);
- this.col_sliderBgFillHover = color(175);
- this.col_sliderBgFillActive = color(175);
- this.col_sliderBgStroke = color(0);
- this.col_sliderBgStrokeHover = color(0);
- this.col_sliderBgStrokeActive = color(0);
- this.col_sliderIndctrFill = color(128);
- this.col_sliderIndctrFillHover = color(144);
- this.col_sliderIndctrFillActive = color(144);
- this.col_sliderIndctrStroke = color(128);
- this.col_sliderIndctrStrokeHover = color(144);
- this.col_sliderIndctrStrokeActive = color(144);
- this.col_sliderGrabFill = color(64);
- this.col_sliderGrabFillHover = color(96);
- this.col_sliderGrabFillActive = color(240);
- this.col_sliderGrabStroke = color(64);
- this.col_sliderGrabStrokeHover = color(96);
- this.col_sliderGrabStrokeActive = color(0);
- }
-
- StyleColorsClassic() {
- this.rounding = 10;
- this.labelFont = 'Arial';
- this.labelFontMaxSize = 30;
- this.strokeWt = 5;
- // Button pars
- this.buttonStrokeWt = this.strokeWt;
- this.col_buttonStroke = color('#D5CAD6');
- this.col_buttonFill = color('#EFEFF0');
- this.col_buttonFillHover = color('#F7F7F7');
- this.col_buttonFillActive = color('#C9F0FF');
- this.col_buttonLabel = color('#6B5E62');
-
- // Checkbox pars
- this.checkStrokeWt = this.strokeWt;
- this.col_checkOuterStroke = color('#D5CAD6');
- this.col_checkOuterStrokeHover = color('#D5CAD6');
- this.col_checkOuterStrokeActive = color('#D5CAD6');
- this.col_checkOuterFill = color('#EFEFF0');
- this.col_checkOuterFillHover = color('#F7F7F7');
- this.col_checkOuterFillActive = color('#C9F0FF');
- this.col_checkInnerFill = color('#6B5E62');
- this.col_checkInnerStroke = color('#6B5E62');
- this.col_checkInnerFillHover = color('#7A6B70');
- this.col_checkInnerStrokeHover = color('#7A6B70');
- this.col_checkInnerFillActive = color('#7A6B70');
- this.col_checkInnerStrokeActive = color('#7A6B70');
-
- // Slider pars
- this.sliderStrokeWt = this.strokeWt;
- this.col_sliderStroke = color('#D5CAD6');
- this.col_sliderBgFill = color('#EFEFF0');
- this.col_sliderBgFillHover = color('#F7F7F7');
- this.col_sliderBgFillActive = color('#F7F7F7');
- this.col_sliderBgStroke = color(0);
- this.col_sliderBgStrokeHover = color(0);
- this.col_sliderBgStrokeActive = color(0);
- this.col_sliderIndctrFill = color('#D5CAD6');
- this.col_sliderIndctrFillHover = color('#D5CAD6');
- this.col_sliderIndctrFillActive = color('#D5CAD6');
- this.col_sliderIndctrStroke = color(128);
- this.col_sliderIndctrStrokeHover = color(144);
- this.col_sliderIndctrStrokeActive = color(144);
- this.col_sliderGrabFill = color('#6B5E62');
- this.col_sliderGrabFillHover = color('#7A6B70');
- this.col_sliderGrabFillActive = color('#C9F0FF');
- this.col_sliderGrabStroke = color('#6B5E62');
- this.col_sliderGrabStrokeHover = color('#7A6B70');
- this.col_sliderGrabStrokeActive = color('#7A6B70');
- }
- }
|