2 |
3 |
4 |
5 |
6 |
7 |
8 | p5.touchgui Examples
9 | Visit the GitHub repository page for more information.
10 | Beginner
11 |
22 | Intermediate
23 |
29 | OSC
30 |
35 | Other
36 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/examples/intermediate/notes-player/sketch.js:
--------------------------------------------------------------------------------
1 | let osc, fft;
2 | let scaleArray = [60, 62, 64, 65, 67, 69, 71, 72];
3 | let note = 0;
4 | let gui;
5 | let volume = 0.5;
6 | let freqV = 0;
7 | let myVolumeSlider;
8 | let myFreqSlider;
9 |
10 | function setup() {
11 | createCanvas(710, 200);
12 | osc = new p5.SinOsc();
13 |
14 | osc.start();
15 | osc.amp(volume);
16 |
17 | fft = new p5.FFT();
18 | noStroke();
19 |
20 | gui = createGui();
21 | createControls();
22 | }
23 |
24 | function createControls() {
25 | myVolumeSlider = createSlider('VolumeSlider', 540, 10, 160, 30);
26 | myFreqSlider = createCrossfader('FreqSlider', 540, 50, 160, 30);
27 | }
28 |
29 | function draw() {
30 | background(20);
31 | drawGui();
32 |
33 | if (myVolumeSlider.isChanged) {
34 | // Print a message when myVolumeSlider is changed
35 | print(myVolumeSlider.label + " = " + myVolumeSlider.val);
36 | volume = myVolumeSlider.val;
37 | osc.amp(volume);
38 | }
39 |
40 | if (myFreqSlider.isChanged) {
41 | // Print a message when myFreqSlider is changed
42 | print(myFreqSlider.label + " = " + myFreqSlider.val);
43 | freqV = myFreqSlider.val;
44 | note = 0;
45 | }
46 |
47 | if (frameCount % 60 === 0 || frameCount === 1) {
48 | let midiValue = scaleArray[note] + 7 * freqV;
49 | let freqValue = midiToFreq(midiValue);
50 | osc.freq(freqValue);
51 | osc.start();
52 | note = (note + 1) % scaleArray.length;
53 | }
54 |
55 | // plot FFT.analyze() frequency analysis on the canvas
56 | let spectrum = fft.analyze();
57 | for (let i = 0; i < spectrum.length / 20; i++) {
58 | fill(spectrum[i], spectrum[i] / 10, 0, 100);
59 | let x = map(i, 0, spectrum.length / 20, 0, width);
60 | let h = map(spectrum[i], 0, 255, 0, height);
61 | rect(x, height, spectrum.length / 20, -h);
62 | }
63 | }
64 |
65 | /// Add these lines below sketch to prevent scrolling on mobile
66 | function touchMoved() {
67 | // do some stuff
68 | return false;
69 | }
--------------------------------------------------------------------------------
/examples/osc/buttonBank/sketch.js:
--------------------------------------------------------------------------------
1 | let gui;
2 | let b;
3 |
4 | // Slider bank settings
5 | let rows = 4;
6 | let cols = 4;
7 | let marginX = 0.05;
8 | let marginY = 0.05;
9 |
10 | // Network Settings
11 | let bridgeIp = '127.0.0.1:8081';
12 | let ipIn = '127.0.0.1';
13 | let ipOut = '127.0.0.1';
14 |
15 | function setup() {
16 | createCanvas(windowWidth-5, windowHeight-5);
17 | setupOsc(10000, 12000, bridgeIp, ipIn, ipOut);
18 | gui = createGui();
19 | gui.loadStyle('TerminalGreen');
20 |
21 | // Create button array
22 | b = createArray(rows, cols);
23 |
24 | // Calculate button sizes
25 | let bW = (width - width*marginX*2)/rows;
26 | let bH = (height - height*marginY*2)/cols;
27 |
28 | // Create sliders based on parameters
29 | for (let i = 0; i < cols; i++) {
30 | for (let j = 0; j < rows; j++) {
31 | b[j][i] = createButton(str(i*cols+j), width*marginX + bW*j, height*marginY + bH*i, bW*0.9, bH*0.9);
32 | }
33 |
34 | }
35 | }
36 |
37 | function draw() {
38 | background(0);
39 | drawGui();
40 |
41 | // Cycle through sliders and send OSC messages
42 | for (let i = 0; i < b.length; i++) {
43 | for (let j = 0; j < b[i].length; j++) {
44 | if (b[i][j].isChanged) {
45 | sendOsc('/button' + i, b[i][j].val);
46 | }
47 | }
48 | }
49 | }
50 |
51 | function receiveOsc(address, value) {
52 | // console.log("received OSC: " + address + ", " + value);
53 | }
54 |
55 | // From => https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript/966938#966938
56 | function createArray(length) {
57 | var arr = new Array(length || 0),
58 | i = length;
59 |
60 | if (arguments.length > 1) {
61 | var args = Array.prototype.slice.call(arguments, 1);
62 | while(i--) arr[length-1 - i] = createArray.apply(this, args);
63 | }
64 |
65 | return arr;
66 | }
67 |
68 | /// Add these lines below sketch to prevent scrolling on mobile
69 | function touchMoved() {
70 | // do some stuff
71 | return false;
72 | }
--------------------------------------------------------------------------------
/examples/intermediate/styling/sketch.js:
--------------------------------------------------------------------------------
1 | // Create variables for accessing GUI objects
2 | let s1, s2, s3, s4, t1, t2, t3, t4;
3 |
4 | // Create a variable for the gui context that we can use to change style
5 | let gui;
6 | let myFont;
7 |
8 | function preload() {
9 | // An example of loading a font from file into p5.touchgui
10 | myFont = loadFont('Roboto-Thin.ttf');
11 | }
12 |
13 | function setup() {
14 | createCanvas(425, 500);
15 | gui = createGui();
16 |
17 | // Create the objects
18 | s1 = createSliderV("Slider 1", 25, 25, 75, 350);
19 | s2 = createSliderV("Slider 2", 125, 25, 75, 350);
20 | s3 = createSliderV("Slider 3", 225, 25, 75, 350);
21 | s4 = createSliderV("Slider 4", 325, 25, 75, 350);
22 |
23 | t1 = createToggle("M", 25, 400, 75, 75);
24 | t2 = createToggle("M", 125, 400, 75, 75);
25 | t3 = createToggle("M", 225, 400, 75, 75);
26 | t4 = createToggle("M", 325, 400, 75, 75);
27 |
28 | //// PRESETS
29 | // You can load one of the preset styles for p5.touchGui.
30 | // Current options are:
31 | // "Gray"
32 | // "Blue"
33 | // "TerminalGreen"
34 | gui.loadStyle("TerminalGreen");
35 |
36 | //// OBJECT STYLE SETTINGS
37 | // There are two ways to setStyle() for objects.
38 |
39 | // The first method is to override each parameter individually
40 | // by string
41 | t1.setStyle("fillBgOn", color("#D00000"));
42 | t1.setStyle("fillBgOnHover", color("#F00000"));
43 | t1.setStyle("fillBgOnActive", color("#FF0000"));
44 | t1.setStyle("fillBgOffActive", color("#FF0000"));
45 |
46 | // The second method is to override multiple parameters at once
47 | // with a JavaScript object
48 | t2.setStyle({
49 | fillBgOn: color("#D00000"),
50 | fillBgOnHover: color("#F00000"),
51 | fillBgOnActive: color("#FF0000"),
52 | fillBgOffActive: color("#FF0000")
53 | });
54 |
55 | // If you have multiple objects of the same type you'd like to
56 | // style similarly, you can create one JavaScript object and
57 | // pass it to each of the objects
58 | let toggleStyle = {
59 | fillBgOn: color("#D00000"),
60 | fillBgOnHover: color("#F00000"),
61 | fillBgOnActive: color("#FF0000"),
62 | fillBgOffActive: color("#FF0000")
63 | };
64 |
65 | t3.setStyle(toggleStyle);
66 | t4.setStyle(toggleStyle);
67 |
68 | //// GLOBAL STYLE SETTINGS
69 | // You can also change global style settings by using the following
70 | // functions on your 'gui' variable:
71 |
72 | // Sets the text size, in this case to 40.
73 | // Note: p5.touchgui will limit the text size internally for each
74 | // object so that it does not go beyond the width of the object.
75 | gui.setTextSize(40);
76 |
77 | // Sets the corner rounding, in this case to 0
78 | gui.setRounding(0);
79 |
80 | // Set the p5.touchgui font from a p5.font or to a websafe
81 | // font by using the corresponding string
82 | gui.setFont(myFont);
83 | // gui.setFont('Courier New');
84 |
85 | // Sets global stroke weight for all objects, in this case 0.5
86 | // for thick lines
87 | gui.setStrokeWeight(3);
88 |
89 | // Sets slider track width as a ratio, in this case to 0.
90 | // Note: when trackWidth == 0, track is rendered as a line.
91 | gui.setTrackWidth(0);
92 | }
93 |
94 | function draw() {
95 | background(0);
96 | drawGui();
97 | }
98 |
99 | /// Add these lines below sketch to prevent scrolling on mobile
100 | function touchMoved() {
101 | // do some stuff
102 | return false;
103 | }
--------------------------------------------------------------------------------
/docs/NOTES.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md)
2 |
3 | # Development Notes
4 |
5 | ## CODE
6 |
7 | ### GuiContext
8 | * Add 'page' or 'group' property so that objects can be grouped and toggled
9 | * ~~Write *loadStyleJSON()*~~ Note: see below
10 | * ~~Implement "locked" object input.~~
11 | * ~~Add methods for copying global style parameter changes to individual objects~~
12 |
13 | ### GuiObject
14 | * Add an individual input lock toggle. May require further checking at the GuiContext scope.
15 | * Add 'page' or 'group' property so that objects can be grouped and toggled
16 | * ~~Review *setStyle()* for any additional error handling that may be needed~~
17 | * ~~Replace triggered with pressed, held, released, changed (for slider)~~
18 | * ~~Ability to update style~~
19 | * ~~Ability to change label~~
20 | * ~~Label for toggle~~
21 |
22 | ### GuiButton
23 | * Set text size
24 |
25 | ### All Sliders
26 | * Note: includes GuiSlider, GuiSliderV, GuiCrossfader, GuiCrossfaderV, GuiSlider2d, GuiJoystick
27 | * Fix hard coding of buffers (e.g. this.w-24)
28 | * Fix so that touch corresponds with handle
29 | * ~~(stretch) Add integer step mode~~ Note: omitted Joystick
30 | * ~~(stretch) add segmenting/resolution functionality~~ Note: better to do on user side for now
31 |
32 | ### GuiSlider2d (and GuiJoystick)
33 | * ~~Come up with better variable names for valX and valY~~
34 | * ~~Can now also access with .val.x and .val.y~~
35 |
36 | ### GuiRadio
37 | * Write this object class
38 |
39 | ### GuiStyle
40 | * ~~See if it's possible to simplify number of parameters~~
41 | * Develop color palettes
42 | * ~~Gray~~ ~~(get better contrast)~~
43 | * ~~Blue~~
44 | * ~~Rose~~
45 | * ~~Seafoam~~
46 | * ~~TerminalGreen~~
47 | * ~~TerminalRed~~
48 | * ~~TerminalBlue~~
49 | * ~~TerminalYellow~~
50 | * Need to rethink JSON use since it effectively would need to save layout as well.
51 | * Study material-ui implementation of colors and try to implement something similar (i.e. primary and accent color)
52 |
53 | ## DOCUMENTATION
54 |
55 | ### REFERENCE
56 | * Prototype methods
57 | * Context methods
58 | * All objects and associated methods
59 | * Style parameters for each object
60 |
61 | ### EXAMPLES
62 | * ~~One for each object~~
63 | * Interaction modes
64 | * ~~Callback example~~
65 | * ~~OSC~~
66 | * Sample layouts
67 | * Set starting value for sliders
68 | * ~~Set styles for each type of object~~
69 | * ~~Colors~~
70 | * ~~Stroke Width~~
71 | * ~~Stroke~~
72 | * ~~Fill~~
73 | * ~~Rounding~~
74 | * Get examples from other people!
75 |
76 | ## QUESTIONS:
77 | * ~~Should I make helper style prototype functions for things such as setting visibility? (i.e. *SetVisible(b1, true);*)~~
78 | * ~~Better for now to leave it under control of objects as member variables and methods~~
79 | * Should there be some kind of layout tool?
80 | * How much input parameter handling should I do?
81 | * Should GUI objects have values shown, especially for sliders?
82 | * ~~Should sliders have dead zones at the end?~~
83 | * ~~Let users process output~~
84 | * ~~"Solved" by having input lock~~
85 | * ~~Should buttons have on and off labels?~~
86 | * ~~They do now!~~
87 | * *What's the balance between simplicity and feature availability/flexibility?*
88 | * **How can p5.touchgui be made accessible to screen readers?**
89 | * ARIA
90 | * Adapted for DOM element use? Would require a massive overhaul (and change functionality/feature set).
91 | * Inclusion of shadow DOM elements specifically intended for screen readers?
92 | * There are underlying accessibility issues with p5.js being JS canvas-based that may need to be addressed in parallel.
93 |
94 | ## FUTURE IDEAS
95 | * Pages/Groups/Tabs
96 | * GuiColorpicker
97 | * GuiTextfield
98 | * Labels on sliders
99 | * Pad bank
100 |
101 |
102 |
--------------------------------------------------------------------------------
/test/sandbox/sketch.js:
--------------------------------------------------------------------------------
1 | // Create variables for accessing GUI objects
2 | let b1, b2, b3, t1, cf1, cb1, cb2, s1, s2d1;
3 |
4 | // Create a variable for the gui context that we can use to change style
5 | let gui;
6 |
7 | // For framerate testing
8 | let fps = [];
9 |
10 |
11 | function setup() {
12 | createCanvas(windowWidth, windowHeight);
13 | gui = createGui();
14 |
15 | // simpleLayout(); // <- uncomment for simple layout
16 | mobileLayout(); // <- uncomment for mobile layout
17 |
18 | // Set style to TerminalGreen!
19 | gui.loadStyle("TerminalGreen");
20 |
21 | // You can set both an on and off label for both Buttons and Toggles.
22 | // By default, they are initiated to the label specified when creating
23 | // the button.
24 | t1.labelOn = "Toggle 1 On";
25 | t1.labelOff = "Toggle 1 Off";
26 |
27 | // Change the behavior for Checkbox 1 to onRelease
28 | cb1.mode = "onRelease";
29 |
30 | // Set Crossfader 1 to not visible.
31 | cf1.visible = false;
32 |
33 | // Add callback function to Checkbox 2
34 | cb2.onPress = function() {
35 | print(cb2.label + " = " + cb2.val);
36 | }
37 | }
38 |
39 | function draw() {
40 | background(0);
41 | drawGui();
42 |
43 | // Check if GUI object have been .isPressed, .isChanged, .isHeld, or .isReleased
44 | // and act accordingly.
45 | if(b1.isPressed) { print(b1.label + " pressed."); }
46 | if(b2.isReleased) { print(b2.label + " released."); }
47 | if(s1.isChanged) { print(s1.label + " = " + s1.val); }
48 | if(s2.isChanged) { print(s2.label + " = " + s2.val); }
49 | if(cf1.isChanged) { print(cf1.label + " = " + cf1.val); }
50 |
51 | if(t1.isPressed) {
52 | print(t1.label + " = " + t1.val);
53 | cf1.visible = t1.val; // Set visibility of Crossfader 1
54 | }
55 |
56 | if(cb1.isReleased) {
57 | print(cb1.label + " = " + cb1.val); // prints "on release"
58 | }
59 |
60 | if(s2d1.isChanged) {
61 | print(s2d1.label + " = {" + s2d1.valX + ", " + s2d1.valY + "}");
62 | }
63 |
64 | drawFps(2);
65 | }
66 |
67 | // Creates a simple layout
68 | function simpleLayout() {
69 | b1 = createButton("Button 1", 50, 50);
70 | b2 = createButton("Button 2", 200, 50);
71 | t1 = createToggle("Toggle 1", 50, 100);
72 | cf1 = createCrossfader("Crossfader 1", 200, 100, 128, 32);
73 | s1 = createSlider("SliderH", 50, 150, 278, 32);
74 | s2 = createSliderV("SliderV", 50, 200, 32, 150, -100, 100); // Last two args are min and max
75 | cb1 = createCheckbox("Checkbox", 100, 200);
76 | cb2 = createCheckbox("Checkbox 2", 100, 250);
77 | s2d1 = createSlider2d("Slider2d 1", 150, 200, 178, 150);
78 | }
79 |
80 | // Creates a layout based on the resolution of the screen
81 | function mobileLayout() {
82 | let w = width;
83 | let h = height;
84 |
85 | b1 = createButton("Button 1", w*0.05, h*0.05, w*0.4375, h*0.125);
86 | b2 = createButton("Button 2", w*0.5125, h*0.05, w*0.4375, h*0.125);
87 | t1 = createToggle("Toggle 1", w*0.05, h*0.2, w*0.4375, h*0.125);
88 | cf1 = createCrossfader("Crossfader 1", w*0.5125, h*0.2, w*0.4375, h*0.125);
89 | s1 = createSlider("SliderH", w*0.05, h*0.35, w*0.9, h*0.125);
90 | s2 = createSliderV("SliderV", w*0.05, h*0.5, w*0.2, h*0.45, -100, 100); // Last two args are min and max
91 | cb1 = createCheckbox("Checkbox 1", w*0.275, h*0.5, w*0.2125, h*0.2125);
92 | cb2 = createCheckbox("Checkbox 2", w*0.275, h*0.7375, w*0.2125, h*0.2125);
93 | s2d1 = createSlider2d("Slider2d 1", w*0.5125, h*0.5, w*0.4375, h*0.45);
94 | }
95 |
96 | // TESTING ONLY - Draws an FPS averaged over a duration in seconds
97 | function drawFps(duration) {
98 | let avgFps = 0;
99 |
100 | fps.push(frameRate());
101 | if (fps.length > 60*duration) { fps.splice(0, 1); }
102 |
103 | for (let i = 0; i < fps.length; i++) {
104 | avgFps += fps[i];
105 | }
106 | avgFps = avgFps/fps.length;
107 |
108 | push();
109 | textSize(20);
110 | text(int(avgFps), 32, 32);
111 | pop();
112 | }
113 |
114 | /// Add these lines below sketch to prevent scrolling on mobile
115 | function touchMoved() {
116 | // do some stuff
117 | return false;
118 | }
--------------------------------------------------------------------------------
/docs/GuiCheckbox.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiChecbox
4 | [Example](#example) | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 | Checkbox class.
8 |
9 | 
10 |
11 | -----
12 |
13 | ## [Example](https://editor.p5js.org/L05/sketches/Kn1ecx6wv)
14 | ```javascript
15 | let gui;
16 |
17 | // Create a variable for your Toggle
18 | let t;
19 |
20 | function setup() {
21 | createCanvas(400, 400);
22 | gui = createGui();
23 |
24 | // Create Toggle
25 | t = createToggle("Toggle", 100, 50, 200, 50);
26 | }
27 |
28 | function draw() {
29 | background(220);
30 | drawGui();
31 |
32 | if (t.isPressed) {
33 | // Print a message when Toggle is pressed
34 | // that displays its value.
35 | print(t.label + " is " + t.val);
36 | }
37 |
38 | if (t.val) {
39 | // Draw an ellipse when Toggle is true.
40 | fill(255, 0, 0);
41 | ellipse(200, 300, 100);
42 | }
43 | }
44 |
45 | /// Add these lines below sketch to prevent scrolling on mobile
46 | function touchMoved() {
47 | // do some stuff
48 | return false;
49 | }
50 | ```
51 |
52 | -----
53 |
54 | ## Constructor
55 |
56 | -----
57 |
58 | ### createCheckbox()
59 | [[Back to top]](#description)
60 |
61 | ##### Example
62 | ```javascript
63 | let gui;
64 | let cb;
65 |
66 | function setup() {
67 | createCanvas(400, 400);
68 | gui = createGui();
69 | cb = createCheckbox("Checkbox", 50, 50);
70 | }
71 |
72 | ```
73 | ##### Description
74 | Creates a new `GuiCheckbox` object. This is a checkbox which functions like a toggle button.
75 |
76 | ##### Syntax
77 | ```javascript
78 | createCheckbox(label, x, y, [w], [h], [defaultVal])
79 | ```
80 |
81 | ##### Parameters
82 | * `label` String: label for the GuiCheckbox
83 | * `x` Number: x-coordinate of the GuiCheckbox
84 | * `y` Number: y-coordinate of the GuiCheckbox
85 | * `w` Number: width of the GuiCheckbox (default is 32)
86 | * `h` Number: height of the GuiCheckbox (default is 32)
87 | * `defaultVal` Number: default value for your GuiCheckbox (default is `false`)
88 |
89 | ##### Returns
90 | `GuiCheckbox`
91 |
92 | -----
93 |
94 | ## Variables
95 |
96 | -----
97 |
98 | ### val
99 | [[Back to top]](#guicheckbox)
100 | [[Back to top]](#guicheckbox)
101 |
102 | ##### Example
103 | ```javascript
104 | checkbox.val = True;
105 |
106 | print(checkbox.val)
107 | ```
108 |
109 | ##### Description
110 | Value of the `GuiCheckbox`.
111 |
112 | -----
113 |
114 | ## Functions
115 |
116 | -----
117 |
118 | ### setStyle()
119 | [[Back to top]](#guicheckbox)
120 |
121 | ##### Example
122 | ```javascript
123 | checkbox.setStyle("fillBg", color(255, 0, 0));
124 | ```
125 | ```javascript
126 | checkbox.setStyle({
127 | fillBg: color("#FF0000"),
128 | rounding: 10,
129 | textSize: 40
130 | });
131 | ```
132 |
133 | ##### Description
134 | Individual `GuiCheckbox` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
135 |
136 | ##### Syntax
137 | ```javascript
138 | setStyle(property, value)
139 | setStyle(Object)
140 | ```
141 |
142 | ##### Parameters
143 | `property` String: name of property to be set
144 | `value` Number|String|Object: value of property to be set
145 | `Object` Object: multiple propertys and values to be set
146 |
147 | ##### Returns
148 | `None`
149 |
150 | -----
151 |
152 | ## Style
153 | [[Back to top]](#guicheckbox)
154 |
155 | The `GuiCheckbox` style properties are:
156 | * `strokeWeight` Number: the weight (in pixels) of the stroke
157 | * `rounding` Number: radius of corners
158 | * `textSize` Number: the size of the letters in units of pixels
159 | * `fillBg` p5.Color: default background color
160 | * `fillBgHover` p5.Color: hover background color
161 | * `fillBgActive` p5.Color: active background color
162 | * `fillCheck` p5.Color: default check color
163 | * `fillCheckHover` p5.Color: hover check color
164 | * `fillCheckActive` p5.Color: active check color
165 | * `strokeBg` p5.Color: default stroke color
--------------------------------------------------------------------------------
/examples/intermediate/drawing-app/sketch.js:
--------------------------------------------------------------------------------
1 | const myCanvasPos = {
2 | x: 20,
3 | y: 20,
4 | width: 300,
5 | height: 300
6 | };
7 | let gui;
8 | let myStrokeWeight = 16;
9 | let myRed = 127.5, myGreen = 127.5, myBlue = 127.5;
10 |
11 | // Create variable for clear button
12 | let myClearButton;
13 | // Create variable for stroke weight slider
14 | let myWeightSlider;
15 | // Create variableS for stroke color r,g,b,a
16 | let myColorSliderR, myColorSliderG, myColorSliderB;
17 |
18 | function setup() {
19 | createCanvas(windowWidth, windowHeight);
20 | background(225);
21 | ellipseMode(CENTER);
22 |
23 | gui = createGui();
24 | // Set style to Blue!
25 | gui.loadStyle("Blue");
26 |
27 | // Create buttons, sliders...
28 | createControls();
29 | }
30 |
31 | function createControls() {
32 | strokeWeight(1);
33 | // Create drawing canvas
34 | rect(myCanvasPos.x, myCanvasPos.y, myCanvasPos.width, myCanvasPos.height);
35 |
36 | // Optional: a way to set the text size
37 | gui.setTextSize(12);
38 | // Optional: A way to change the stroke weight
39 | gui.setStrokeWeight(1);
40 | // Optional: A way to set object corners
41 | gui.setRounding(0);
42 |
43 | // Create Clear Button
44 | myClearButton = createButton("Clear", 330, 20, 195, 30);
45 |
46 | text('Stroke Weight:', 330, 65);
47 | // Create stroke weight slider
48 | myWeightSlider = createSlider("WeightSlider", 330, 70, 160, 30, 1, 30);
49 |
50 | text('Red:', 330, 115);
51 | text('Green:', 385, 115);
52 | text('Blue:', 440, 115);
53 | myColorSliderR = createSliderV("ColoSliderR", 330, 120, 30, 200, 0, 255);
54 | myColorSliderG = createSliderV("ColoSliderG", 385, 120, 30, 200, 0, 255);
55 | myColorSliderB = createSliderV("ColoSliderB", 440, 120, 30, 200, 0, 255);
56 |
57 | // Show an ellipse with myStrokeWeight and myColor on the canvas
58 | updateEllipse();
59 | }
60 |
61 |
62 | function draw() {
63 | drawGui();
64 | if (myClearButton.isPressed) {
65 | // Print a message when Clear Button is pressed.
66 | print(myClearButton.label + " pressed.");
67 | fill(255);
68 | stroke(0);
69 | strokeWeight(1);
70 | // Create drawing canvas again
71 | rect(myCanvasPos.x, myCanvasPos.y, myCanvasPos.width, myCanvasPos.height);
72 | }
73 | if (myWeightSlider.isChanged) {
74 | // Print a message when myWeightSlider Slider is changed
75 | print(myWeightSlider.label + " = " + myWeightSlider.val);
76 | // Set myStrokeWeight to the slides' value
77 | myStrokeWeight = myWeightSlider.val;
78 | // Update the myStrokeWeight value on the canvas
79 | updateEllipse();
80 | }
81 | if (myColorSliderR.isChanged) {
82 | print(myColorSliderR.label + " = " + myColorSliderR.val);
83 | myRed = myColorSliderR.val;
84 | updateEllipse();
85 | }
86 | if (myColorSliderG.isChanged) {
87 | print(myColorSliderG.label + " = " + myColorSliderG.val);
88 | myGreen = myColorSliderG.val;
89 | updateEllipse();
90 | }
91 | if (myColorSliderB.isChanged) {
92 | print(myColorSliderB.label + " = " + myColorSliderB.val);
93 | myBlue = myColorSliderB.val;
94 | updateEllipse();
95 | }
96 | // If mouse is pressed inside of the drawing canvas, draw lines
97 | if (mouseIsPressed) {
98 | if (ifMouseInCanvas(pmouseX, pmouseY, mouseX, mouseY)) {
99 | stroke(myRed, myGreen, myBlue);
100 | strokeWeight(myStrokeWeight);
101 | line(pmouseX, pmouseY, mouseX, mouseY);
102 | }
103 | }
104 | }
105 |
106 | function updateEllipse() {
107 | noStroke();
108 | fill(225);
109 | ellipse(512, 85, 30, 30);
110 | fill(myRed, myGreen, myBlue);
111 | ellipse(512, 85, myStrokeWeight, myStrokeWeight);
112 | }
113 |
114 | function ifMouseInCanvas(pmouseX, pmouseY, mouseX, mouseY) {
115 | if (mouseX > myCanvasPos.x + myStrokeWeight / 2 && mouseX < myCanvasPos.x + myCanvasPos.width - myStrokeWeight / 2 &&
116 | mouseY > myCanvasPos.y + myStrokeWeight / 2 && mouseY < myCanvasPos.y + myCanvasPos.height - myStrokeWeight / 2 &&
117 | pmouseX > myCanvasPos.x + myStrokeWeight / 2 && pmouseX < myCanvasPos.x + myCanvasPos.width - myStrokeWeight / 2 &&
118 | pmouseY > myCanvasPos.y + myStrokeWeight / 2 && pmouseY < myCanvasPos.y + myCanvasPos.height - myStrokeWeight / 2) {
119 | return true;
120 | } else return false;
121 | }
122 |
123 | /// Add these lines below sketch to prevent scrolling on mobile
124 | function touchMoved() {
125 | // do some stuff
126 | return false;
127 | }
--------------------------------------------------------------------------------
/examples/demo/sketch.js:
--------------------------------------------------------------------------------
1 | // Create variables for accessing GUI objects
2 | let b1, b2, b3, t1, cf1, cb1, cb2, s1, s2d1;
3 |
4 | // Create a variable for the gui context that we can use to change style
5 | let gui;
6 |
7 | // For framerate testing
8 | let fps = [];
9 |
10 |
11 | function setup() {
12 | createCanvas(windowWidth, windowHeight);
13 | gui = createGui();
14 |
15 | // simpleLayout(); // <- uncomment for simple layout
16 | mobileLayout(); // <- uncomment for mobile layout
17 |
18 | // Set style to Blue!
19 | gui.loadStyle("Blue");
20 |
21 | // There are two ways to change the style for an individual GUI
22 | // object, either by selecting an individual style property by name
23 | // or by providing a key/value list of multiple style properties.
24 | b1.setStyle("fillBgActive", color(100, 255, 100));
25 | b2.setStyle({
26 | fillBg: color(255, 100, 255),
27 | fillBgActive: color(255)
28 | });
29 |
30 | // You can set both an on and off label for both Buttons and Toggles.
31 | // By default, they are initiated to the label specified when creating
32 | // the button.
33 | t1.labelOn = "Toggle 1 On";
34 | t1.labelOff = "Toggle 1 Off";
35 |
36 | // Change the behavior for Checkbox 1 to onRelease
37 | cb1.mode = "onRelease";
38 |
39 | // Set Crossfader 1 to not visible.
40 | cf1.visible = false;
41 |
42 | // Add callback function to Checkbox 2
43 | cb2.onPress = function() {
44 | print(cb2.label + " = " + cb2.val);
45 | }
46 | }
47 |
48 | function draw() {
49 | background(220);
50 | drawGui();
51 |
52 | // Check if GUI object have been .isPressed, .isChanged, .isHeld, or .isReleased
53 | // and act accordingly.
54 | if(b1.isPressed) { print(b1.label + " pressed."); }
55 | if(b2.isReleased) { print(b2.label + " released."); }
56 | if(s1.isChanged) { print(s1.label + " = " + s1.val); }
57 | if(s2.isChanged) { print(s2.label + " = " + s2.val); }
58 | if(cf1.isChanged) { print(cf1.label + " = " + cf1.val); }
59 |
60 | if(t1.isPressed) {
61 | print(t1.label + " = " + t1.val);
62 | cf1.visible = t1.val; // Set visibility of Crossfader 1
63 | }
64 |
65 | if(cb1.isReleased) {
66 | print(cb1.label + " = " + cb1.val); // prints "on release"
67 | }
68 |
69 | if(s2d1.isChanged) {
70 | print(s2d1.label + " = {" + s2d1.valX + ", " + s2d1.valY + "}");
71 | }
72 |
73 | drawFps(2);
74 | }
75 |
76 | // Creates a simple layout
77 | function simpleLayout() {
78 | b1 = createButton("Button 1", 50, 50);
79 | b2 = createButton("Button 2", 200, 50);
80 | t1 = createToggle("Toggle 1", 50, 100);
81 | cf1 = createCrossfader("Crossfader 1", 200, 100, 128, 32);
82 | s1 = createSlider("SliderH", 50, 150, 278, 32);
83 | s2 = createSliderV("SliderV", 50, 200, 32, 150, -100, 100); // Last two args are min and max
84 | cb1 = createCheckbox("Checkbox", 100, 200);
85 | cb2 = createCheckbox("Checkbox 2", 100, 250);
86 | s2d1 = createSlider2d("Slider2d 1", 150, 200, 178, 150);
87 | }
88 |
89 | // Creates a layout based on the resolution of the screen
90 | function mobileLayout() {
91 | let w = width;
92 | let h = height;
93 |
94 | b1 = createButton("Button 1", w*0.05, h*0.05, w*0.4375, h*0.125);
95 | b2 = createButton("Button 2", w*0.5125, h*0.05, w*0.4375, h*0.125);
96 | t1 = createToggle("Toggle 1", w*0.05, h*0.2, w*0.4375, h*0.125);
97 | cf1 = createCrossfader("Crossfader 1", w*0.5125, h*0.2, w*0.4375, h*0.125);
98 | s1 = createSlider("SliderH", w*0.05, h*0.35, w*0.9, h*0.125);
99 | s2 = createSliderV("SliderV", w*0.05, h*0.5, w*0.2, h*0.45, -100, 100); // Last two args are min and max
100 | cb1 = createCheckbox("Checkbox 1", w*0.275, h*0.5, w*0.2125, h*0.2125);
101 | cb2 = createCheckbox("Checkbox 2", w*0.275, h*0.7375, w*0.2125, h*0.2125);
102 | s2d1 = createSlider2d("Slider2d 1", w*0.5125, h*0.5, w*0.4375, h*0.45);
103 | }
104 |
105 | // TESTING ONLY - Draws an FPS averaged over a duration in seconds
106 | function drawFps(duration) {
107 | let avgFps = 0;
108 |
109 | fps.push(frameRate());
110 | if (fps.length > 60*duration) { fps.splice(0, 1); }
111 |
112 | for (let i = 0; i < fps.length; i++) {
113 | avgFps += fps[i];
114 | }
115 | avgFps = avgFps/fps.length;
116 |
117 | push();
118 | textSize(20);
119 | text(int(avgFps), 32, 32);
120 | pop();
121 | }
122 |
123 | /// Add these lines below sketch to prevent scrolling on mobile
124 | function touchMoved() {
125 | // do some stuff
126 | return false;
127 | }
--------------------------------------------------------------------------------
/docs/GuiButton.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiButton
4 | [Example](#example) | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 | Momentary button class.
8 |
9 | 
10 |
11 | -----
12 |
13 | ## [Example](https://editor.p5js.org/L05/sketches/6ETiBjotm)
14 | ```javascript
15 | let gui;
16 |
17 | // Create variable for your Button
18 | let b;
19 |
20 | function setup() {
21 | createCanvas(400, 400);
22 | gui = createGui();
23 |
24 | // Create Button
25 | b = createButton("Button", 100, 50, 200, 50);
26 | }
27 |
28 | function draw() {
29 | background(220);
30 | drawGui();
31 |
32 | if (b.isPressed) {
33 | // Print a message when Button is pressed.
34 | print(b.label + " pressed.");
35 | }
36 |
37 | if (b.isHeld) {
38 | // Draw an ellipse when Button is held.
39 | fill(255, 0, 0);
40 | ellipse(200, 300, 100);
41 | }
42 | }
43 |
44 | /// Add these lines below sketch to prevent scrolling on mobile
45 | function touchMoved() {
46 | // do some stuff
47 | return false;
48 | }
49 | ```
50 |
51 | -----
52 |
53 | ## Constructor
54 |
55 | -----
56 |
57 | ### createButton()
58 | [[Back to top]](#description)
59 |
60 | ##### Example
61 | ```javascript
62 | let gui;
63 | let b;
64 |
65 | function setup() {
66 | createCanvas(400, 400);
67 | gui = createGui();
68 | b = createButton("Button", 50, 50);
69 | }
70 |
71 | ```
72 | ##### Description
73 | Creates a new `GuiButton` object. This is a momentary button.
74 |
75 | ##### Syntax
76 | ```javascript
77 | createButton(label, x, y, [w], [h])
78 | ```
79 |
80 | ##### Parameters
81 | * `label` String: label for the GuiButton
82 | * `x` Number: x-coordinate of the GuiButton
83 | * `y` Number: y-coordinate of the GuiButton
84 | * `w` Number: width of the GuiButton (default is 128)
85 | * `h` Number: height of the GuiButton (default is 32)
86 |
87 | ##### Returns
88 | `GuiButton`
89 |
90 | -----
91 |
92 | ## Variables
93 |
94 | -----
95 |
96 | ### val
97 | [[Back to top]](#guibutton)
98 |
99 | ##### Example
100 | ```javascript
101 | button.val = True;
102 |
103 | print(button.val)
104 | ```
105 |
106 | ##### Description
107 | Value of the `GuiButton`.
108 |
109 | -----
110 |
111 | ### label
112 | [[Back to top]](#guibutton)
113 |
114 | ```javascript
115 | button.label = "Button";
116 |
117 | print(button.label)
118 | ```
119 |
120 | ##### Description
121 | Label of the `GuiButton`. Setting the `label` will automatically set `labelOn` and `labelOff` (see below).
122 |
123 | -----
124 |
125 | ### labelOn
126 | [[Back to top]](#guibutton)
127 |
128 | ```javascript
129 | button.labelOn = "Button On";
130 |
131 | print(button.labelOn)
132 | ```
133 |
134 | ##### Description
135 | Label of the `GuiButton` when pressed or "on".
136 |
137 | -----
138 |
139 |
140 | ### labelOff
141 | [[Back to top]](#guibutton)
142 |
143 | ```javascript
144 | button.labelOff = "Button Off";
145 |
146 | print(button.labelOff)
147 | ```
148 |
149 | ##### Description
150 | Label of the `GuiButton` when unpressed or "off".
151 |
152 | -----
153 |
154 | ## Functions
155 |
156 | -----
157 |
158 | ### setStyle()
159 | [[Back to top]](#guibutton)
160 |
161 | ##### Example
162 | ```javascript
163 | button.setStyle("fillBg", color(255, 0, 0));
164 | ```
165 | ```javascript
166 | button.setStyle({
167 | fillBg: color("#FF0000"),
168 | rounding: 10,
169 | textSize: 40
170 | });
171 | ```
172 |
173 | ##### Description
174 | Individual `GuiButton` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
175 |
176 | ##### Syntax
177 | ```javascript
178 | setStyle(property, value)
179 | setStyle(Object)
180 | ```
181 |
182 | ##### Parameters
183 | `property` String: name of property to be set
184 | `value` Number|String|Object: value of property to be set
185 | `Object` Object: multiple propertys and values to be set
186 |
187 | ##### Returns
188 | `None`
189 |
190 | -----
191 |
192 | ## Style
193 | [[Back to top]](#guibutton)
194 |
195 | The `GuiButton` style properties are:
196 | * `strokeWeight` Number: the weight (in pixels) of the stroke
197 | * `rounding` Number: radius of corners
198 | * `font` Object|String: a font loaded via [loadFont()](https://p5js.org/reference/#/p5/loadFont), or a String representing a web safe font (a font that is generally available across all systems)
199 | * `textSize` Number: the size of the letters in units of pixels
200 | * `fillBg` p5.Color: default background color
201 | * `fillBgHover` p5.Color: hover background color
202 | * `fillBgActive` p5.Color: active background color
203 | * `fillLabel` p5.Color: default label color
204 | * `fillLabelHover` p5.Color: hover label color
205 | * `fillLabelActive` p5.Color: active label color
206 | * `strokeBg` p5.Color: default stroke color
207 | * `strokeBgHover` p5.Color: hover stroke color
208 | * `strokeBgActive` p5.Color: active stroke color
--------------------------------------------------------------------------------
/docs/GuiToggle.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiToggle
4 | [Example](#example) | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 | Toggle button class.
8 |
9 | 
10 |
11 | -----
12 |
13 | ## [Example](https://editor.p5js.org/L05/sketches/WUVbr_uqV)
14 | ```javascript
15 | let gui;
16 |
17 | // Create a variable for your Checkbox
18 | let cb1;
19 |
20 | function setup() {
21 | createCanvas(400, 400);
22 | gui = createGui();
23 |
24 | // Create Checkbox
25 | cb1 = createCheckbox("Checkbox", 150, 50, 100, 100);
26 | }
27 |
28 | function draw() {
29 | background(220);
30 | drawGui();
31 |
32 | if (cb1.isPressed) {
33 | // Print a message when Checkbox is pressed
34 | // that displays its value.
35 | print(cb1.label + " is " + cb1.val);
36 | }
37 |
38 | if (cb1.val) {
39 | // Draw an ellipse when Checkbox is true.
40 | fill(255, 0, 0);
41 | ellipse(200, 300, 100);
42 | }
43 | }
44 |
45 | /// Add these lines below sketch to prevent scrolling on mobile
46 | function touchMoved() {
47 | // do some stuff
48 | return false;
49 | }
50 | ```
51 |
52 | -----
53 |
54 | ## Constructor
55 |
56 | -----
57 |
58 | ### createToggle()
59 | [[Back to top]](#description)
60 |
61 | ##### Example
62 | ```javascript
63 | let gui;
64 | let t;
65 |
66 | function setup() {
67 | createCanvas(400, 400);
68 | gui = createGui();
69 | t = createToggle("Toggle", 50, 50);
70 | }
71 |
72 | ```
73 | ##### Description
74 | Creates a new `GuiToggle` object. This is a toggle button.
75 |
76 | ##### Syntax
77 | ```javascript
78 | createToggle(label, x, y, [w], [h], [defaultVal])
79 | ```
80 |
81 | ##### Parameters
82 | * `label` String: label for the GuiToggle
83 | * `x` Number: x-coordinate of the GuiToggle
84 | * `y` Number: y-coordinate of the GuiToggle
85 | * `w` Number: width of the GuiToggle (default is 128)
86 | * `h` Number: height of the GuiToggle (default is 32)
87 | * `defaultVal` Number: default value for your GuiToggle (default is `false`)
88 |
89 | ##### Returns
90 | `GuiToggle`
91 |
92 | -----
93 |
94 | ## Variables
95 |
96 | -----
97 |
98 | ### val
99 | [[Back to top]](#guitoggle)
100 |
101 | ##### Example
102 | ```javascript
103 | toggle.val = True;
104 |
105 | print(toggle.val)
106 | ```
107 |
108 | ##### Description
109 | Value of the `GuiToggle`.
110 |
111 | -----
112 |
113 | ### label
114 | [[Back to top]](#guitoggle)
115 |
116 | ```javascript
117 | toggle.label = "Toggle";
118 |
119 | print(toggle.label)
120 | ```
121 |
122 | ##### Description
123 | Label of the `GuiToggle`. Setting the `label` will automatically set `labelOn` and `labelOff` (see below).
124 |
125 | -----
126 |
127 | ### labelOn
128 | [[Back to top]](#guitoggle)
129 |
130 | ```javascript
131 | toggle.labelOn = "Toggle On";
132 |
133 | print(toggle.labelOn)
134 | ```
135 |
136 | ##### Description
137 | Label of the `GuiToggle` when pressed or "on".
138 |
139 | -----
140 |
141 |
142 | ### labelOff
143 | [[Back to top]](#guitoggle)
144 |
145 | ```javascript
146 | toggle.labelOff = "Toggle Off";
147 |
148 | print(toggle.labelOff)
149 | ```
150 |
151 | ##### Description
152 | Label of the `GuiToggle` when unpressed or "off".
153 |
154 | -----
155 |
156 | ## Functions
157 |
158 | -----
159 | ### setStyle()
160 | [[Back to top]](#guitoggle)
161 |
162 | ##### Example
163 | ```javascript
164 | toggle.setStyle("fillBgOn", color(255, 0, 0));
165 | ```
166 | ```javascript
167 | toggle.setStyle({
168 | fillBgOn: color("#FF0000"),
169 | rounding: 10,
170 | textSize: 40
171 | });
172 | ```
173 |
174 | ##### Description
175 | Individual `GuiToggle` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
176 |
177 | ##### Syntax
178 | ```javascript
179 | setStyle(property, value)
180 | setStyle(Object)
181 | ```
182 |
183 | ##### Parameters
184 | `property` String: name of property to be set
185 | `value` Number|String|Object: value of property to be set
186 | `Object` Object: multiple propertys and values to be set
187 |
188 | ##### Returns
189 | `None`
190 |
191 | -----
192 |
193 | ## Style
194 | [[Back to top]](#guitoggle)
195 |
196 | The `GuiToggle` style properties are:
197 | * `strokeWeight` Number: the weight (in pixels) of the stroke
198 | * `rounding` Number: radius of corners
199 | * `font` Object|String: a font loaded via [loadFont()](https://p5js.org/reference/#/p5/loadFont), or a String representing a web safe font (a font that is generally available across all systems)
200 | * `textSize` Number: the size of the letters in units of pixels
201 | * `fillBgOff` p5.Color: default background color when off
202 | * `fillBgOffHover` p5.Color: hover background color when off
203 | * `fillBgOffActive` p5.Color: active background color when off
204 | * `fillBgOn` p5.Color: default background color when on
205 | * `fillBgOnHover` p5.Color: hover background color when on
206 | * `fillBgOnActive` p5.Color: active background color when on
207 | * `fillLabelOff` p5.Color: default label color when off
208 | * `fillLabelOffHover` p5.Color: hover label color when off
209 | * `fillLabelOffActive` p5.Color: active label color when off
210 | * `fillLabelOn` p5.Color: default label color when on
211 | * `fillLabelOnHover` p5.Color: hover label color when on
212 | * `fillLabelOnActive` p5.Color: active label color when on
213 | * `strokeBgOff` p5.Color: default stroke color when off
214 | * `strokeBgOffHover` p5.Color: hover stroke color when off
215 | * `strokeBgOffActive` p5.Color: active stroke color when off
216 | * `strokeBgOn` p5.Color: default stroke color when on
217 | * `strokeBgOnHover` p5.Color: hover stroke color when on
218 | * `strokeBgOnActive` p5.Color: active stroke color when on
--------------------------------------------------------------------------------
/docs/GuiSlider.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiSlider / GuiSliderV
4 | [Example](#example) | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 | Slider class.
8 |
9 | *Note: vertical slider class is virtually the same, just with a different orientation.*
10 |
11 | 
12 |
13 | -----
14 |
15 | ## [Example](https://editor.p5js.org/L05/sketches/urlZ9XCsZ)
16 | ```javascript
17 | let gui;
18 |
19 | // Create a variable for your Slider
20 | let s;
21 |
22 | function setup() {
23 | createCanvas(400, 400);
24 | gui = createGui();
25 |
26 | // Create Slider.
27 | // The last two optional arguments define the min and max (minimum and maximum) values.
28 | // The default min and max values are 0 and 1, respectively.
29 | s = createSlider("Slider", 50, 50, 300, 32, 100, 300);
30 | }
31 |
32 | function draw() {
33 | background(220);
34 | drawGui();
35 |
36 | if (s.isChanged) {
37 | // Print a message when Slider is changed
38 | // that displays its value.
39 | print(s.label + " = " + s.val);
40 | }
41 |
42 | // Use Slider's value to determine where the ellipse is drawn.
43 | fill(255, 0, 0);
44 | ellipse(s.val, 300, 100);
45 | }
46 |
47 | /// Add these lines below sketch to prevent scrolling on mobile
48 | function touchMoved() {
49 | // do some stuff
50 | return false;
51 | }
52 | ```
53 |
54 | -----
55 |
56 | ## Constructor
57 |
58 | -----
59 |
60 |
61 | ### createSlider()
62 | [[Back to top]](#description)
63 |
64 | ##### Example
65 | ```javascript
66 | let gui;
67 | let s;
68 |
69 | function setup() {
70 | createCanvas(400, 400);
71 | gui = createGui();
72 | s = createSlider("Slider", 50, 50);
73 | }
74 |
75 | ```
76 | ##### Description
77 | Creates a new `GuiSlider` object. This is a horizontal slider.
78 |
79 | *Note: For a vertical slider, instead use `createSliderV()`.*
80 |
81 | ##### Syntax
82 | ```javascript
83 | createSlider(label, x, y, [w], [h], [min], [max])
84 | ```
85 |
86 | ##### Parameters
87 | * `label` String: label for the GuiSlider
88 | * `x` Number: x-coordinate of the GuiSlider
89 | * `y` Number: y-coordinate of the GuiSlider
90 | * `w` Number: width of the GuiSlider (default is 128)
91 | * `h` Number: height of the GuiSlider (default is 32)
92 | * `min` Number: lower bound of the value's range (default value is 0)
93 | * `max` Number: upper bound of the value's range (default value is 1)
94 |
95 | ##### Returns
96 | `GuiSlider`
97 |
98 | -----
99 |
100 | ## Variables
101 |
102 | -----
103 |
104 | ### val
105 | [[Back to top]](#description)
106 |
107 | ##### Example
108 | ```javascript
109 | slider.val = 0.5;
110 | ```
111 | ```javascript
112 | if (slider.isChanged) {
113 | print(slider.val);
114 | }
115 | ```
116 |
117 | ##### Description
118 | Value of the `GuiSlider`.
119 |
120 | -----
121 |
122 | ### min
123 | [[Back to top]](#description)
124 |
125 | ##### Example
126 | ```javascript
127 | slider.min = -100;
128 | ```
129 |
130 | ##### Description
131 | Lower bound of the `GuiSlider` range.
132 |
133 | -----
134 |
135 | ### max
136 | [[Back to top]](#description)
137 |
138 | ##### Example
139 | ```javascript
140 | slider.max = 100;
141 | ```
142 |
143 | ##### Description
144 | Upper bound of the `GuiSlider` range.
145 |
146 | -----
147 |
148 | ### isInteger
149 | [[Back to top]](#description)
150 |
151 | ##### Example
152 | ```javascript
153 | slider.isInteger = True;
154 | ```
155 |
156 | ##### Description
157 | Sets the mode of the `GuiSlider` so that all values are integers.
158 |
159 | -----
160 |
161 | ## Functions
162 |
163 | -----
164 |
165 | ### [setStyle()]()
166 | [[Back to top]](#description)
167 |
168 | ##### Example
169 | ```javascript
170 | slider.setStyle("fillBg", color(255, 0, 0));
171 | ```
172 | ```javascript
173 | slider.setStyle({
174 | fillBg: color("#FF0000"),
175 | rounding: 10,
176 | trackWidth: 0.1
177 | });
178 | ```
179 |
180 | ##### Description
181 | Individual `GuiSlider` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
182 |
183 | ##### Syntax
184 | ```javascript
185 | setStyle(property, value)
186 | setStyle(Object)
187 | ```
188 |
189 | ##### Parameters
190 | `property` String: name of property to be set
191 | `value` Number|String|Object: value of property to be set
192 | `Object` Object: multiple propertys and values to be set
193 |
194 | ##### Returns
195 | `None`
196 |
197 | -----
198 |
199 | ## Style
200 | [[Back to top]](#description)
201 |
202 | The `GuiSlider` style properties are:
203 | * `strokeWeight` Number: the weight (in pixels) of the stroke
204 | * `rounding` Number: radius of corners
205 | * `trackWidth` Number: width of all slider tracks between 0 (line) and 1 (full)
206 | * `fillBg` p5.Color: default background fill color
207 | * `fillBgHover` p5.Color: hover background fill color
208 | * `fillBgActive` p5.Color: active background fill color
209 | * `fillTrack` p5.Color: default track fill color
210 | * `fillTrackHover` p5.Color: hover track fill color
211 | * `fillTrackActive` p5.Color: active track fill color
212 | * `fillHandle` p5.Color: default handle fill color
213 | * `fillHandleHover` p5.Color: hover handle fill color
214 | * `fillHandleActive` p5.Color: active handle fill color
215 | * `strokeBg` p5.Color: default background stroke color
216 | * `strokeBgHover` p5.Color: hover background stroke color
217 | * `strokeBgActive` p5.Color: active background stroke color
218 | * `strokeTrack` p5.Color: default track stroke color
219 | * `strokeTrackHover` p5.Color: hover track stroke color
220 | * `strokeTrackActive` p5.Color: active track stroke color
221 | * `strokeHandle` p5.Color: default handle stroke color
222 | * `strokeHandleHover` p5.Color: hover handle stroke color
223 | * `strokeHandleActive` p5.Color: active handle stroke color
--------------------------------------------------------------------------------
/docs/GuiCrossfader.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiCrossfader / GuiCrossfaderV
4 | [Example](#example) | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 | Crossfader class.
8 |
9 | *Note: vertical crossfader class is virtually the same, just with a different orientation.*
10 |
11 | 
12 |
13 | -----
14 |
15 | ## [Example](https://editor.p5js.org/L05/sketches/MAUFHrJpg)
16 | ```javascript
17 | let gui;
18 |
19 | // Create a variable for your Crossfader
20 | let c;
21 |
22 | function setup() {
23 | createCanvas(400, 400);
24 | gui = createGui();
25 |
26 | // Create Crossfader.
27 | // The last two optional arguments define the min and max (minimum and maximum) values.
28 | // The default min and max values are -1 and 1, respectively.
29 | c = createCrossfader("Crossfader", 50, 50, 300, 32, 25, 100);
30 | }
31 |
32 | function draw() {
33 | background(72, 61, 139);
34 | drawGui();
35 |
36 | if (c.isChanged) {
37 | // Print a message when Crossfader is changed
38 | // that displays its value.
39 | print(c.label + " = " + c.val);
40 | }
41 |
42 | // Use Crossfader's value to determine where the ellipse is drawn.
43 | fill(216, 191, 216);
44 | ellipse(100, 300, 125-c.val);
45 | ellipse(300, 300, c.val);
46 | }
47 |
48 | /// Add these lines below sketch to prevent scrolling on mobile
49 | function touchMoved() {
50 | // do some stuff
51 | return false;
52 | }
53 | ```
54 |
55 | -----
56 |
57 | ## Constructor
58 |
59 | -----
60 |
61 | ### createCrossfader()
62 | [[Back to top]](#description)
63 |
64 | ##### Example
65 | ```javascript
66 | let gui;
67 | let cf;
68 |
69 | function setup() {
70 | createCanvas(400, 400);
71 | gui = createGui();
72 | cf = createCrossfader("Crossfader", 50, 50);
73 | }
74 |
75 | ```
76 | ##### Description
77 | Creates a new `GuiCrossfader` object. This is a horizontal slider with a center point.
78 |
79 | *Note: For a vertical crossfader, instead use `createCrossfaderV()`.*
80 |
81 | ##### Syntax
82 | ```javascript
83 | createCrossfader(label, x, y, [w], [h], [min], [max])
84 | ```
85 |
86 | ##### Parameters
87 | * `label` String: label for the GuiCrossfader
88 | * `x` Number: x-coordinate of the GuiCrossfader
89 | * `y` Number: y-coordinate of the GuiCrossfader
90 | * `w` Number: width of the GuiCrossfader (default is 128)
91 | * `h` Number: height of the GuiCrossfader (default is 32)
92 | * `min` Number: lower bound of the value's range (default value is -1)
93 | * `max` Number: upper bound of the value's range (default value is 1)
94 |
95 | ##### Returns
96 | `GuiCrossfader`
97 |
98 | -----
99 |
100 | ## Variables
101 |
102 | -----
103 |
104 | ### val
105 | [[Back to top]](#description)
106 |
107 | ##### Example
108 | ```javascript
109 | crossfader.val = 0.5;
110 | ```
111 | ```javascript
112 | if (crossfader.isChanged) {
113 | print(crossfader.val);
114 | }
115 | ```
116 |
117 | ##### Description
118 | Value of the `GuiCrossfader`.
119 |
120 | -----
121 |
122 | ### min
123 | [[Back to top]](#description)
124 |
125 | ##### Example
126 | ```javascript
127 | crossfader.min = -100;
128 | ```
129 |
130 | ##### Description
131 | Lower bound of the `GuiCrossfader` range.
132 |
133 | -----
134 |
135 | ### max
136 | [[Back to top]](#description)
137 |
138 | ##### Example
139 | ```javascript
140 | crossfader.max = 100;
141 | ```
142 |
143 | ##### Description
144 | Upper bound of the `GuiCrossfader` range.
145 |
146 | -----
147 |
148 | ### isInteger
149 | [[Back to top]](#description)
150 |
151 | ##### Example
152 | ```javascript
153 | crossfader.isInteger = True;
154 | ```
155 |
156 | ##### Description
157 | Sets the mode of the `GuiCrossfader` so that all values are integers.
158 |
159 | -----
160 |
161 | ## Functions
162 |
163 | -----
164 |
165 | ### [setStyle()]()
166 | [[Back to top]](#description)
167 |
168 | ##### Example
169 | ```javascript
170 | crossfader.setStyle("fillBg", color(255, 0, 0));
171 | ```
172 | ```javascript
173 | crossfader.setStyle({
174 | fillBg: color("#FF0000"),
175 | rounding: 10,
176 | trackWidth: 0.1
177 | });
178 | ```
179 |
180 | ##### Description
181 | Individual `GuiCrossfader` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
182 |
183 | ##### Syntax
184 | ```javascript
185 | setStyle(property, value)
186 | setStyle(Object)
187 | ```
188 |
189 | ##### Parameters
190 | `property` String: name of property to be set
191 | `value` Number|String|Object: value of property to be set
192 | `Object` Object: multiple propertys and values to be set
193 |
194 | ##### Returns
195 | `None`
196 |
197 | -----
198 |
199 | ## Style
200 | [[Back to top]](#description)
201 |
202 | The `GuiCrossfader` style properties are:
203 | * `strokeWeight` Number: the weight (in pixels) of the stroke
204 | * `rounding` Number: radius of corners
205 | * `trackWidth` Number: width of all crossfader tracks between 0 (line) and 1 (full)
206 | * `fillBg` p5.Color: default background fill color
207 | * `fillBgHover` p5.Color: hover background fill color
208 | * `fillBgActive` p5.Color: active background fill color
209 | * `fillTrack` p5.Color: default track fill color
210 | * `fillTrackHover` p5.Color: hover track fill color
211 | * `fillTrackActive` p5.Color: active track fill color
212 | * `fillHandle` p5.Color: default handle fill color
213 | * `fillHandleHover` p5.Color: hover handle fill color
214 | * `fillHandleActive` p5.Color: active handle fill color
215 | * `strokeBg` p5.Color: default background stroke color
216 | * `strokeBgHover` p5.Color: hover background stroke color
217 | * `strokeBgActive` p5.Color: active background stroke color
218 | * `strokeTrack` p5.Color: default track stroke color
219 | * `strokeTrackHover` p5.Color: hover track stroke color
220 | * `strokeTrackActive` p5.Color: active track stroke color
221 | * `strokeHandle` p5.Color: default handle stroke color
222 | * `strokeHandleHover` p5.Color: hover handle stroke color
223 | * `strokeHandleActive` p5.Color: active handle stroke color
224 | * `strokeCenter` p5.Color: default center line stroke color
225 | * `strokeCenterHover` p5.Color: hover center line stroke color
226 | * `strokeCenterActive` p5.Color: active center line stroke color
--------------------------------------------------------------------------------
/test/sandbox/myPreset.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Blue",
3 | "strokeWeight": 2,
4 | "rounding": 10,
5 | "font": "Arial",
6 | "maxTextSize": 30,
7 | "button": {
8 | "strokeWeight": 2,
9 | "rounding": 10,
10 | "font": "Arial",
11 | "maxTextSize": 20,
12 | "fillBg": "rgba(127,190,229,1)",
13 | "fillBgHover": "rgba(171,213,239,1)",
14 | "fillBgActive": "rgba(230,244,255,1)",
15 | "fillLabel": "rgba(16,47,63,1)",
16 | "fillLabelHover": "rgba(16,47,63,1)",
17 | "fillLabelActive": "rgba(16,47,63,1)",
18 | "strokeBg": "rgba(16,47,63,1)",
19 | "strokeBgHover": "rgba(16,47,63,1)",
20 | "strokeBgActive": "rgba(16,47,63,1)"
21 | },
22 | "toggle": {
23 | "strokeWeight": 2,
24 | "rounding": 10,
25 | "font": "Arial",
26 | "maxTextSize": 20,
27 | "fillBgOff": "rgba(105,171,204,1)",
28 | "fillBgOffHover": "rgba(136,196,226,1)",
29 | "fillBgOffActive": "rgba(243,250,255,1)",
30 | "fillBgOn": "rgba(230,244,255,1)",
31 | "fillBgOnHover": "rgba(243,250,255,1)",
32 | "fillBgOnActive": "rgba(250,250,250,1)",
33 | "fillLabelOff": "rgba(16,47,63,1)",
34 | "fillLabelOffHover": "rgba(16,47,63,1)",
35 | "fillLabelOffActive": "rgba(16,47,63,1)",
36 | "fillLabelOn": "rgba(16,47,63,1)",
37 | "fillLabelOnHover": "rgba(16,47,63,1)",
38 | "fillLabelOnActive": "rgba(16,47,63,1)",
39 | "strokeBgOff": "rgba(16,47,63,1)",
40 | "strokeBgOffHover": "rgba(16,47,63,1)",
41 | "strokeBgOffActive": "rgba(16,47,63,1)",
42 | "strokeBgOn": "rgba(16,47,63,1)",
43 | "strokeBgOnHover": "rgba(16,47,63,1)",
44 | "strokeBgOnActive": "rgba(16,47,63,1)"
45 | },
46 | "checkbox": {
47 | "strokeWeight": 2,
48 | "rounding": 10,
49 | "fillBgOff": "rgba(54,99,127,1)",
50 | "fillBgOffHover": "rgba(80,147,196,1)",
51 | "fillBgOffActive": "rgba(127,190,229,1)",
52 | "fillBgOn": "rgba(54,99,127,1)",
53 | "fillBgOnHover": "rgba(80,147,196,1)",
54 | "fillBgOnActive": "rgba(127,190,229,1)",
55 | "fillCheckOff": "rgba(230,244,255,1)",
56 | "fillCheckOffHover": "rgba(243,250,255,1)",
57 | "fillCheckOffActive": "rgba(250,250,250,1)",
58 | "fillCheckOn": "rgba(230,244,255,1)",
59 | "fillCheckOnHover": "rgba(243,250,255,1)",
60 | "fillCheckOnActive": "rgba(250,250,250,1)",
61 | "strokeBgOff": "rgba(16,47,63,1)",
62 | "strokeBgOffHover": "rgba(16,47,63,1)",
63 | "strokeBgOffActive": "rgba(16,47,63,1)",
64 | "strokeBgOn": "rgba(16,47,63,1)",
65 | "strokeBgOnHover": "rgba(16,47,63,1)",
66 | "strokeBgOnActive": "rgba(16,47,63,1)"
67 | },
68 | "slider": {
69 | "strokeWeight": 2,
70 | "rounding": 10,
71 | "fillBg": "rgba(230,244,255,1)",
72 | "fillBgHover": "rgba(230,244,255,1)",
73 | "fillBgActive": "rgba(243,250,255,1)",
74 | "fillTrack": "rgba(80,147,196,1)",
75 | "fillTrackHover": "rgba(102,166,204,1)",
76 | "fillTrackActive": "rgba(119,180,216,1)",
77 | "fillHandle": "rgba(54,99,127,1)",
78 | "fillHandleHover": "rgba(127,190,229,1)",
79 | "fillHandleActive": "rgba(250,250,250,1)",
80 | "strokeBg": "rgba(16,47,63,1)",
81 | "strokeBgHover": "rgba(16,47,63,1)",
82 | "strokeBgActive": "rgba(16,47,63,1)",
83 | "strokeTrack": "rgba(80,147,196,1)",
84 | "strokeTrackHover": "rgba(102,166,204,1)",
85 | "strokeTrackActive": "rgba(119,180,216,1)",
86 | "strokeHandle": "rgba(16,47,63,1)",
87 | "strokeHandleHover": "rgba(16,47,63,1)",
88 | "strokeHandleActive": "rgba(16,47,63,1)"
89 | },
90 | "crossfader": {
91 | "strokeWeight": 2,
92 | "rounding": 10,
93 | "fillBg": "rgba(230,244,255,1)",
94 | "fillBgHover": "rgba(230,244,255,1)",
95 | "fillBgActive": "rgba(243,250,255,1)",
96 | "fillTrack": "rgba(80,147,196,1)",
97 | "fillTrackHover": "rgba(102,166,204,1)",
98 | "fillTrackActive": "rgba(119,180,216,1)",
99 | "fillHandle": "rgba(54,99,127,1)",
100 | "fillHandleHover": "rgba(127,190,229,1)",
101 | "fillHandleActive": "rgba(250,250,250,1)",
102 | "strokeBg": "rgba(16,47,63,1)",
103 | "strokeBgHover": "rgba(16,47,63,1)",
104 | "strokeBgActive": "rgba(16,47,63,1)",
105 | "strokeTrack": "rgba(80,147,196,1)",
106 | "strokeTrackHover": "rgba(102,166,204,1)",
107 | "strokeTrackActive": "rgba(119,180,216,1)",
108 | "strokeHandle": "rgba(16,47,63,1)",
109 | "strokeHandleHover": "rgba(16,47,63,1)",
110 | "strokeHandleActive": "rgba(16,47,63,1)",
111 | "strokeCenter": "rgba(80,147,196,1)",
112 | "strokeCenterHover": "rgba(102,166,204,1)",
113 | "strokeCenterActive": "rgba(119,180,216,1)"
114 | },
115 | "slider2d": {
116 | "strokeWeight": 2,
117 | "rounding": 10,
118 | "handleRadius": 16,
119 | "fillBg": "rgba(230,244,255,1)",
120 | "fillBgHover": "rgba(230,244,255,1)",
121 | "fillBgActive": "rgba(243,250,255,1)",
122 | "fillTrack": "rgba(80,147,196,1)",
123 | "fillTrackHover": "rgba(102,166,204,1)",
124 | "fillTrackActive": "rgba(119,180,216,1)",
125 | "fillHandle": "rgba(54,99,127,1)",
126 | "fillHandleHover": "rgba(127,190,229,1)",
127 | "fillHandleActive": "rgba(250,250,250,1)",
128 | "strokeBg": "rgba(16,47,63,1)",
129 | "strokeBgHover": "rgba(16,47,63,1)",
130 | "strokeBgActive": "rgba(16,47,63,1)",
131 | "strokeTrack": "rgba(80,147,196,1)",
132 | "strokeTrackHover": "rgba(102,166,204,1)",
133 | "strokeTrackActive": "rgba(119,180,216,1)",
134 | "strokeHandle": "rgba(16,47,63,1)",
135 | "strokeHandleHover": "rgba(16,47,63,1)",
136 | "strokeHandleActive": "rgba(16,47,63,1)"
137 | },
138 | "joystick": {
139 | "strokeWeight": 2,
140 | "rounding": 10,
141 | "handleRadius": 16,
142 | "trackRatio": 0.6,
143 | "fillBg": "rgba(230,244,255,1)",
144 | "fillBgHover": "rgba(230,244,255,1)",
145 | "fillBgActive": "rgba(243,250,255,1)",
146 | "fillTrack": "rgba(80,147,196,1)",
147 | "fillTrackHover": "rgba(102,166,204,1)",
148 | "fillTrackActive": "rgba(119,180,216,1)",
149 | "fillHandle": "rgba(54,99,127,1)",
150 | "fillHandleHover": "rgba(127,190,229,1)",
151 | "fillHandleActive": "rgba(250,250,250,1)",
152 | "strokeBg": "rgba(16,47,63,1)",
153 | "strokeBgHover": "rgba(16,47,63,1)",
154 | "strokeBgActive": "rgba(16,47,63,1)",
155 | "strokeTrack": "rgba(80,147,196,1)",
156 | "strokeTrackHover": "rgba(102,166,204,1)",
157 | "strokeTrackActive": "rgba(119,180,216,1)",
158 | "strokeHandle": "rgba(16,47,63,1)",
159 | "strokeHandleHover": "rgba(16,47,63,1)",
160 | "strokeHandleActive": "rgba(16,47,63,1)"
161 | }
162 | }
163 |
--------------------------------------------------------------------------------
/docs/GuiSlider2d.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiSlider2d
4 | [Example](#example) | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 | Two-dimensional slider (trackpad) class.
8 |
9 | 
10 |
11 | -----
12 |
13 | ## [Example](https://editor.p5js.org/L05/sketches/xkA_bxh4_)
14 | ```javascript
15 | let gui;
16 |
17 | // Create a variable for your Slider2d
18 | let s;
19 |
20 | function setup() {
21 | createCanvas(400, 400);
22 | gui = createGui();
23 |
24 | // Create Slider2d.
25 | // The last four optional arguments define minimum and maximum values
26 | // for the x and y axes; minX, maxX, minY, maxY
27 | // The default min and max values for all four are -1 and 1.
28 | s = createSlider2d("Slider2d", 10, 210, 175, 175, 250, 350, 150, 50);
29 | }
30 |
31 | function draw() {
32 | background(255, 235, 205);
33 | drawGui();
34 |
35 | if (s.isChanged) {
36 | // Print a message when Slider2d is changed
37 | // that displays its value.
38 | print(s.label + " = {" + s.valX + ", " + s.valY + "}");
39 | }
40 |
41 | // Draw our ellipse using the Slider2d output values
42 | fill( 95, 158, 160);
43 | ellipse(s.valX, s.valY, 100);
44 | }
45 |
46 | /// Add these lines below sketch to prevent scrolling on mobile
47 | function touchMoved() {
48 | // do some stuff
49 | return false;
50 | }
51 | ```
52 |
53 | -----
54 |
55 | ## Constructor
56 |
57 | -----
58 |
59 | ### createSlider2d()
60 | [[Back to top]](#description)
61 |
62 | ##### Example
63 | ```javascript
64 | let gui;
65 | let s2d;
66 |
67 | function setup() {
68 | createCanvas(400, 400);
69 | gui = createGui();
70 | s2d = createSlider2d("Slider2d", 50, 50);
71 | }
72 |
73 | ```
74 | ##### Description
75 | Creates a new `GuiSlider2d` object. This is a 2 dimensional slider.
76 |
77 | ##### Syntax
78 | ```javascript
79 | createSlider2d(label, x, y, [w], [h], [minX], [maxX], [maxX], [maxY])
80 | ```
81 |
82 | ##### Parameters
83 | * `label` String: label for the GuiSlider2d
84 | * `x` Number: x-coordinate of the GuiSlider2d
85 | * `y` Number: y-coordinate of the GuiSlider2d
86 | * `w` Number: width of the GuiSlider2d (default is 256)
87 | * `h` Number: height of the GuiSlider2d (default is 256)
88 | * `minX` Number: lower bound of the value's x range (default value is -1)
89 | * `maxX` Number: upper bound of the value's x range (default value is 1)
90 | * `minY` Number: lower bound of the value's y range (default value is -1)
91 | * `maxY` Number: upper bound of the value's y range (default value is 1)
92 |
93 | ##### Returns
94 | `GuiSlider2d`
95 |
96 | -----
97 |
98 | ## Variables
99 |
100 | -----
101 |
102 | ### val
103 | [[Back to top]](#guislider2d)
104 |
105 | ##### Example
106 | ```javascript
107 | slider2d.val = {x: 0.5, y: 0.5};
108 | ```
109 | ```javascript
110 | if (slider2d.isChanged) {
111 | print(slider2d.val.x);
112 | print(slider2d.val.y);
113 | }
114 | ```
115 |
116 | ##### Description
117 | Value of the `GuiSlider2d` returned as object `{x: valX, y: valY}`.
118 |
119 | -----
120 |
121 | ### valX
122 | [[Back to top]](#guislider2d)
123 |
124 | ##### Example
125 | ```javascript
126 | slider2d.valX = 0.5;
127 | ```
128 | ```javascript
129 | if (slider2d.isChanged) {
130 | print(slider2d.valX);
131 | }
132 | ```
133 |
134 | ##### Description
135 | X value of the `GuiSlider2d`.
136 |
137 | -----
138 |
139 | ### valY
140 | [[Back to top]](#guislider2d)
141 |
142 | ##### Example
143 | ```javascript
144 | slider2d.valY = 0.5;
145 | ```
146 | ```javascript
147 | if (slider2d.isChanged) {
148 | print(slider2d.valY);
149 | }
150 | ```
151 |
152 | ##### Description
153 | Y value of the `GuiSlider2d`.
154 |
155 | -----
156 |
157 | ### minX
158 | [[Back to top]](#guislider2d)
159 |
160 | ##### Example
161 | ```javascript
162 | slider2d.minX = -100;
163 | ```
164 |
165 | ##### Description
166 | Lower x bound of the `GuiSlider2d` range.
167 |
168 | -----
169 |
170 | ### maxX
171 | [[Back to top]](#guislider2d)
172 |
173 | ##### Example
174 | ```javascript
175 | slider2d.maxX = 100;
176 | ```
177 |
178 | ##### Description
179 | Upper x bound of the `GuiSlider2d` range.
180 |
181 | -----
182 |
183 | ### minY
184 | [[Back to top]](#guislider2d)
185 |
186 | ##### Example
187 | ```javascript
188 | slider2d.minY = -100;
189 | ```
190 |
191 | ##### Description
192 | Lower y bound of the `GuiSlider2d` range.
193 |
194 | -----
195 |
196 | ### maxY
197 | [[Back to top]](#guislider2d)
198 |
199 | ##### Example
200 | ```javascript
201 | slider2d.maxY = 100;
202 | ```
203 |
204 | ##### Description
205 | Upper y bound of the `GuiSlider2d` range.
206 |
207 | -----
208 |
209 | ### isInteger
210 | [[Back to top]](#description)
211 |
212 | ##### Example
213 | ```javascript
214 | slider2d.isInteger = True;
215 | ```
216 |
217 | ##### Description
218 | Sets the mode of the `GuiSlider2d` so that all values are integers.
219 |
220 | -----
221 |
222 | ## Functions
223 |
224 | -----
225 | ### setStyle()
226 | [[Back to top]](#guislider2d)
227 |
228 | ##### Example
229 | ```javascript
230 | slider2d.setStyle("fillBg", color(255, 0, 0));
231 | ```
232 | ```javascript
233 | slider2d.setStyle({
234 | fillBg: color("#FF0000"),
235 | rounding: 10,
236 | handleRadius: 30
237 | });
238 | ```
239 |
240 | ##### Description
241 | Individual `GuiSlider2d` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
242 |
243 | ##### Syntax
244 | ```javascript
245 | setStyle(property, value)
246 | setStyle(Object)
247 | ```
248 |
249 | ##### Parameters
250 | `property` String: name of property to be set
251 | `value` Number|String|Object: value of property to be set
252 | `Object` Object: multiple propertys and values to be set
253 |
254 | ##### Returns
255 | `None`
256 |
257 | -----
258 |
259 | ## Style
260 | [[Back to top]](#guislider2d)
261 |
262 | The `GuiSlider2d` style properties are:
263 | * `strokeWeight` Number: the weight (in pixels) of the stroke
264 | * `rounding` Number: radius of corners
265 | * `handleRadius` Number: radius of handle in pixels
266 | * `fillBg` p5.Color: default background fill color
267 | * `fillBgHover` p5.Color: hover background fill color
268 | * `fillBgActive` p5.Color: active background fill color
269 | * `fillTrack` p5.Color: default track fill color
270 | * `fillTrackHover` p5.Color: hover track fill color
271 | * `fillTrackActive` p5.Color: active track fill color
272 | * `fillHandle` p5.Color: default handle fill color
273 | * `fillHandleHover` p5.Color: hover handle fill color
274 | * `fillHandleActive` p5.Color: active handle fill color
275 | * `strokeBg` p5.Color: default background stroke color
276 | * `strokeBgHover` p5.Color: hover background stroke color
277 | * `strokeBgActive` p5.Color: active background stroke color
278 | * `strokeTrack` p5.Color: default track stroke color
279 | * `strokeTrackHover` p5.Color: hover track stroke color
280 | * `strokeTrackActive` p5.Color: active track stroke color
281 | * `strokeHandle` p5.Color: default handle stroke color
282 | * `strokeHandleHover` p5.Color: hover handle stroke color
283 | * `strokeHandleActive` p5.Color: active handle stroke color
--------------------------------------------------------------------------------
/docs/GuiJoystick.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiJoystick
4 | [Example](#example) | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 | Joystick class. This is similar to `GuiSlider2d` except that the handle snaps back to the center point when input is released.
8 |
9 | 
10 |
11 | -----
12 |
13 | ## [Example](https://editor.p5js.org/L05/sketches/l-66JjVKt)
14 | ```javascript
15 | let gui;
16 |
17 | // Create a variable for your slider
18 | let j;
19 |
20 | // Create variables for tracking position and velocity
21 | let x, y, velX, velY;
22 |
23 | function setup() {
24 | createCanvas(400, 400);
25 | gui = createGui();
26 |
27 | // Create Joystick.
28 | // The last four optional arguments define minimum and maximum values
29 | // for the x and y axes; minX, maxX, minY, maxY
30 | // The default min and max values for all four are -1 and 1.
31 | j = createJoystick("Joystick", 10, 210, 175, 175, -1, 1, 1, -1);
32 |
33 | // Starting position and velocity
34 | x = 300;
35 | y = 100;
36 | velX = 0;
37 | velY = 0;
38 | }
39 |
40 | function draw() {
41 | background("#242038");
42 | drawGui();
43 |
44 | if (j.isChanged) {
45 | // Print a message when Slider 1 is changed
46 | // that displays its value.
47 | print(j.label + " = {" + j.valX + ", " + j.valY + "}");
48 | }
49 |
50 | // Use Joystick's output to change velocity
51 | velX += j.valX;
52 | velY += j.valY;
53 |
54 | // Draw our ellipse
55 | fill("#7AA0FF");
56 | stroke("#FFFFFF")
57 | ellipse(x + velX, y + velY, 100);
58 | }
59 |
60 | /// Add these lines below sketch to prevent scrolling on mobile
61 | function touchMoved() {
62 | // do some stuff
63 | return false;
64 | }
65 | ```
66 |
67 | -----
68 |
69 | ## Constructor
70 |
71 | -----
72 |
73 | ### createJoystick()
74 | [[Back to top]](#description)
75 |
76 | ##### Example
77 | ```javascript
78 | let gui;
79 | let j;
80 |
81 | function setup() {
82 | createCanvas(400, 400);
83 | gui = createGui();
84 | j = createJoystick("Joystick", 50, 50);
85 | }
86 |
87 | ```
88 | ##### Description
89 | Creates a new `GuiJoystick` object. This is a 2 dimensional slider, and the handle snaps back to the center.
90 |
91 | ##### Syntax
92 | ```javascript
93 | createJoystick(label, x, y, [w], [h], [minX], [maxX], [maxX], [maxY])
94 | ```
95 |
96 | ##### Parameters
97 | * `label` String: label for the GuiJoystick
98 | * `x` Number: x-coordinate of the GuiJoystick
99 | * `y` Number: y-coordinate of the GuiJoystick
100 | * `w` Number: width of the GuiJoystick (default is 256)
101 | * `h` Number: height of the GuiJoystick (default is 256)
102 | * `minX` Number: lower bound of the value's x range (default value is -1)
103 | * `maxX` Number: upper bound of the value's x range (default value is 1)
104 | * `minY` Number: lower bound of the value's y range (default value is -1)
105 | * `maxY` Number: upper bound of the value's y range (default value is 1)
106 |
107 | ##### Returns
108 | `GuiJoystick`
109 |
110 | -----
111 |
112 | ## Variables
113 | ### val
114 | [[Back to top]](#guijoystick)
115 |
116 | ##### Example
117 | ```javascript
118 | joystick.val = {x: 0.5, y: 0.5};
119 | ```
120 | ```javascript
121 | if (joystick.isChanged) {
122 | print(joystick.val.x);
123 | print(joystick.val.y);
124 | }
125 | ```
126 |
127 | ##### Description
128 | Value of the `GuiJoystick` returned as object `{x: valX, y: valY}`.
129 |
130 | -----
131 |
132 | ### valX
133 | [[Back to top]](#guijoystick)
134 |
135 | ##### Example
136 | ```javascript
137 | joystick.valX = 0.5;
138 | ```
139 | ```javascript
140 | if (joystick.isChanged) {
141 | print(joystick.valX);
142 | }
143 | ```
144 |
145 | ##### Description
146 | X value of the `GuiJoystick`.
147 |
148 | -----
149 |
150 | ### valY
151 | [[Back to top]](#guijoystick)
152 |
153 | ##### Example
154 | ```javascript
155 | joystick.valY = 0.5;
156 | ```
157 | ```javascript
158 | if (joystick.isChanged) {
159 | print(joystick.valY);
160 | }
161 | ```
162 |
163 | ##### Description
164 | Y value of the `GuiJoystick`.
165 |
166 | -----
167 |
168 | ### minX
169 | [[Back to top]](#guijoystick)
170 |
171 | ##### Example
172 | ```javascript
173 | joystick.minX = -100;
174 | ```
175 |
176 | ##### Description
177 | Lower x bound of the `GuiJoystick` range.
178 |
179 | -----
180 |
181 | ### maxX
182 | [[Back to top]](#guijoystick)
183 |
184 | ##### Example
185 | ```javascript
186 | joystick.maxX = 100;
187 | ```
188 |
189 | ##### Description
190 | Upper x bound of the `GuiJoystick` range.
191 |
192 | -----
193 |
194 | ### minY
195 | [[Back to top]](#guijoystick)
196 |
197 | ##### Example
198 | ```javascript
199 | joystick.minY = -100;
200 | ```
201 |
202 | ##### Description
203 | Lower y bound of the `GuiJoystick` range.
204 |
205 | -----
206 |
207 | ### maxY
208 | [[Back to top]](#guijoystick)
209 |
210 | ##### Example
211 | ```javascript
212 | joystick.maxY = 100;
213 | ```
214 |
215 | ##### Description
216 | Upper y bound of the `GuiJoystick` range.
217 |
218 | -----
219 |
220 | ## Functions
221 |
222 | -----
223 | ### setStyle()
224 | [[Back to top]](#guijoystick)
225 |
226 | ##### Example
227 | ```javascript
228 | joystick.setStyle("fillBg", color(255, 0, 0));
229 | ```
230 | ```javascript
231 | joystick.setStyle({
232 | fillBg: color("#FF0000"),
233 | rounding: 10,
234 | handleRadius: 30
235 | });
236 | ```
237 |
238 | ##### Description
239 | Individual `GuiJoystick` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
240 |
241 | ##### Syntax
242 | ```javascript
243 | setStyle(property, value)
244 | setStyle(Object)
245 | ```
246 |
247 | ##### Parameters
248 | `property` String: name of property to be set
249 | `value` Number|String|Object: value of property to be set
250 | `Object` Object: multiple propertys and values to be set
251 |
252 | ##### Returns
253 | `None`
254 |
255 | -----
256 |
257 | ## Style
258 | [[Back to top]](#guijoystick)
259 |
260 | The `GuiJoystick` style properties are:
261 | * `strokeWeight` Number: the weight (in pixels) of the stroke
262 | * `rounding` Number: radius of corners
263 | * `handleRadius` Number: radius of handle in pixels
264 | * `fillBg` p5.Color: default background fill color
265 | * `fillBgHover` p5.Color: hover background fill color
266 | * `fillBgActive` p5.Color: active background fill color
267 | * `fillTrack` p5.Color: default track fill color
268 | * `fillTrackHover` p5.Color: hover track fill color
269 | * `fillTrackActive` p5.Color: active track fill color
270 | * `fillHandle` p5.Color: default handle fill color
271 | * `fillHandleHover` p5.Color: hover handle fill color
272 | * `fillHandleActive` p5.Color: active handle fill color
273 | * `strokeBg` p5.Color: default background stroke color
274 | * `strokeBgHover` p5.Color: hover background stroke color
275 | * `strokeBgActive` p5.Color: active background stroke color
276 | * `strokeTrack` p5.Color: default track stroke color
277 | * `strokeTrackHover` p5.Color: hover track stroke color
278 | * `strokeTrackActive` p5.Color: active track stroke color
279 | * `strokeHandle` p5.Color: default handle stroke color
280 | * `strokeHandleHover` p5.Color: hover handle stroke color
281 | * `strokeHandleActive` p5.Color: active handle stroke color
--------------------------------------------------------------------------------
/docs/REFERENCE.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md)
2 |
3 | # REFERENCE
4 |
5 | [Global](#global) | [Gui](#gui) | [GuiObject](#guiobject) | [GuiButton](#guibutton) | [GuiToggle](#guitoggle) | [GuiSlider](#guislider) | [GuiCrossfader](#guicrossfader) | [GuiSlider2d](#guislider2d) | [GuiJoystick](#guijoystick)
6 |
7 | -----
8 |
9 | ## [Global](Global.md)
10 |
11 | **[createGui()](Global.md#creategui)**
12 |
13 | **[drawGui()](Global.md#drawgui)**
14 |
15 | **[createButton()](Global.md#createbutton)**
16 |
17 | **[createToggle()](Global.md#createtoggle)**
18 |
19 | **[createCheckbox()](Global.md#createcheckbox)**
20 |
21 | **[createSlider()](Global.md#createslider)**
22 |
23 | **[createSliderV()](Global.md#createsliderv)**
24 |
25 | **[createCrossfader()](Global.md#createcrossfader)**
26 |
27 | **[createCrossfaderV()](Global.md#createcrossfaderv)**
28 |
29 | **[createSlider2d()](Global.md#createslider2d)**
30 |
31 | **[createJoystick()](Global.md#createjoystick)**
32 |
33 | -----
34 |
35 | ## [Gui](Gui.md)
36 | [[Back to top]](#reference)
37 |
38 | #### [Constructor](Gui.md#constructor)
39 | * [createGui()](Gui.md#constructor)
40 |
41 | #### [Variables](Gui.md#variables)
42 | * [objects[]](Gui.md#objects)
43 |
44 | #### [Functions](Gui.md#functions)
45 | * [get()](Gui.md#get)
46 | * [loadStyle()](Gui.md#loadstyle)
47 | * [updateStyle()](Gui.md#updatestyle)
48 | * [setStrokeWeight()](Gui.md#setstrokeweight)
49 | * [setRounding()](Gui.md#setrounding)
50 | * [setFont()](Gui.md#setfont)
51 | * [setTextSize()](Gui.md#settextsize)
52 | * [setTrackWidth()](Gui.md#settrackwidth)
53 |
54 | #### [Style](Gui.md#style)
55 |
56 | -----
57 |
58 | ## [GuiObject](GuiObject.md)
59 | [[Back to top]](#reference)
60 |
61 | #### [Variables](GuiObject.md##Variables)
62 | * [val](GuiObject.md#val)
63 | * [label](GuiObject.md#label)
64 | * [x](GuiObject.md#x)
65 | * [y](GuiObject.md#y)
66 | * [w](GuiObject.md#w)
67 | * [h](GuiObject.md#h)
68 | * [mode](GuiObject.md#mode)
69 | * [isPressed](GuiObject.md#ispressed)
70 | * [isHeld](GuiObject.md#isheld)
71 | * [isReleased](GuiObject.md#isreleased)
72 | * [isChanged](GuiObject.md#ischanged)
73 | * [onPress](GuiObject.md#onpress)
74 | * [onHold](GuiObject.md#onhold)
75 | * [onRelease](GuiObject.md#onrelease)
76 | * [onChange](GuiObject.md#onchange)
77 | * [enabled](GuiObject.md#enabled)
78 | * [visible](GuiObject.md#visible)
79 |
80 | #### [Functions](GuiObject.md#functions)
81 | * [setStyle()](GuiObject.md#setstyle)
82 | * [draw()](GuiObject.md#draw)
83 |
84 | #### [Style](GuiObject.md#style)
85 |
86 | -----
87 |
88 | ## [GuiButton](GuiButton.md)
89 | [[Back to top]](#reference)
90 |
91 | #### [Constructor](GuiButton.md#constructor)
92 | * [createButton()](GuiButton.md#constructor)
93 |
94 | #### [Variables](GuiButton.md#variables)
95 | * [val](GuiButton.md#val)
96 | * [label](GuiButton.md#label)
97 | * [labelOn](GuiButton.md#labelon)
98 | * [labelOff](GuiButton.md#labeloff)
99 |
100 | #### [Functions](GuiButton.md#functions)
101 | * [setStyle()](GuiButton.md#setstyle)
102 |
103 | #### [Style](GuiButton.md#style)
104 |
105 | -----
106 |
107 | ## [GuiToggle](GuiToggle.md)
108 | [[Back to top]](#reference)
109 |
110 | #### [Constructor](GuiToggle.md#constructor)
111 | * [createToggle()](GuiToggle.md#constructor)
112 |
113 | #### [Variables](GuiToggle.md#variables)
114 | * [val](GuiToggle.md#val)
115 | * [label](GuiToggle.md#label)
116 | * [labelOn](GuiToggle.md#labelon)
117 | * [labelOff](GuiToggle.md#labeloff)
118 |
119 | #### [Functions](GuiToggle.md#functions)
120 | * [setStyle()](GuiToggle.md#setstyle)
121 |
122 | #### [Style](GuiToggle.md#style)
123 |
124 | -----
125 |
126 | ## [GuiChecbox](GuiCheckbox.md)
127 | [[Back to top]](#reference)
128 |
129 | #### [Constructor](GuiCheckbox.md#constructor)
130 | * [createCheckbox()](GuiCheckbox.md#constructor)
131 |
132 | #### [Variables](GuiCheckbox.md#variables)
133 | * [val](GuiCheckbox.md#val)
134 |
135 | #### [Functions](GuiCheckbox.md#functions)
136 | * [setStyle()](GuiCheckbox.md#setstyle)
137 |
138 | #### [Style](GuiCheckbox.md##Style)
139 |
140 | -----
141 |
142 | ## [GuiSlider](GuiSlider.md)
143 | [[Back to top]](#reference)
144 |
145 | #### [Constructor](GuiSlider.md#constructor)
146 | * [createSlider()](GuiSlider.md#constructor)
147 |
148 | #### [Variables](GuiSlider.md#variables)
149 | * [val](GuiSlider.md#val)
150 | * [min](GuiSlider.md#min)
151 | * [max](GuiSlider.md#max)
152 | * [isInteger](GuiSlider.md#isinteger)
153 |
154 | #### [Functions](GuiSlider.md#functions)
155 | * [setStyle()](GuiSlider.md#setstyle)
156 |
157 | #### [Style](GuiSlider.md#style)
158 |
159 | -----
160 |
161 | ## [GuiSliderV](GuiSlider.md)
162 | [[Back to top]](#reference)
163 |
164 | #### [Constructor](GuiSlider.md#constructor)
165 | * [createSliderV()](GuiSlider.md#constructor)
166 |
167 | #### [Variables](GuiSlider.md#variables)
168 | * [val](GuiSlider.md#val)
169 | * [min](GuiSlider.md#min)
170 | * [max](GuiSlider.md#max)
171 | * [isInteger](GuiSlider.md#isinteger)
172 |
173 | #### [Functions](GuiSlider.md#functions)
174 | * [setStyle()](GuiSlider.md#setstyle)
175 |
176 | #### [Style](GuiSlider.md#style)
177 |
178 | -----
179 |
180 | ## [GuiCrossfader](GuiCrossfader.md)
181 | [[Back to top]](#reference)
182 |
183 | #### [Constructor](GuiCrossfader.md#constructor)
184 | * [createCrossfader()](GuiCrossfader.md#constructor)
185 |
186 | #### [Variables](GuiCrossfader.md#variables)
187 | * [val](GuiCrossfader.md#val)
188 | * [min](GuiCrossfader.md#min)
189 | * [max](GuiCrossfader.md#max)
190 | * [isInteger](GuiCrossfader.md#isinteger)
191 |
192 | #### [Functions](GuiCrossfader.md#functions)
193 | * [setStyle()](GuiCrossfader.md#setstyle)
194 |
195 | #### [Style](GuiCrossfader.md#style)
196 |
197 | -----
198 |
199 | ## [GuiCrossfaderV](GuiCrossfader.md)
200 | [[Back to top]](#reference)
201 |
202 | #### [Constructor](GuiCrossfader.md#constructor)
203 | * [createCrossfaderV()](GuiCrossfader.md#constructor)
204 |
205 | #### [Variables](GuiCrossfader.md#variables)
206 | * [val](GuiCrossfader.md#val)
207 | * [min](GuiCrossfader.md#min)
208 | * [max](GuiCrossfader.md#max)
209 | * [isInteger](GuiCrossfader.md#isinteger)
210 |
211 | #### [Functions](GuiCrossfader.md#functions)
212 | * [setStyle()](GuiCrossfader.md#setstyle)
213 |
214 | #### [Style](GuiCrossfader.md#style)
215 |
216 | -----
217 |
218 | ## [GuiSlider2d](GuiSlider2d.md)
219 | [[Back to top]](#reference)
220 |
221 | #### [Constructor](GuiSlider2d.md#constructor)
222 | * [createSlider2d()](GuiSlider2d.md#constructor)
223 |
224 | #### [Variables](GuiSlider2d.md#variables)
225 | * [val](GuiSlider2d.md#val)
226 | * [valX](GuiSlider2d.md#valx)
227 | * [valY](GuiSlider2d.md#valy)
228 | * [minX](GuiSlider2d.md#minx)
229 | * [maxX](GuiSlider2d.md#maxx)
230 | * [minY](GuiSlider2d.md#miny)
231 | * [maxY](GuiSlider2d.md#maxy)
232 | * [isInteger](GuiSlider2d.md#isinteger)
233 |
234 | #### [Functions](GuiSlider2d.md#functions)
235 | * [setStyle()](GuiSlider2d.md#setstyle)
236 |
237 | #### [Style](GuiSlider2d.md#style)
238 |
239 | -----
240 |
241 | ## [GuiJoystick](GuiJoystick.md)
242 | [[Back to top]](#reference)
243 |
244 | #### [Constructor](GuiJoystick.md#constructor)
245 | * [createJoystick()](GuiJoystick.md#constructor)
246 |
247 | #### [Variables](GuiJoystick.md#variables)
248 | * [val](GuiJoystick.md#val)
249 | * [valX](GuiJoystick.md#valx)
250 | * [valY](GuiJoystick.md#valy)
251 | * [minX](GuiJoystick.md#minx)
252 | * [maxX](GuiJoystick.md#maxx)
253 | * [minY](GuiJoystick.md#miny)
254 | * [maxY](GuiJoystick.md#maxy)
255 |
256 | #### [Functions](GuiJoystick.md#functions)
257 | * [setStyle()](GuiJoystick.md#setstyle)
258 |
259 | #### [Style](GuiJoystick.md#style)
260 |
--------------------------------------------------------------------------------
/docs/Gui.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # Gui
4 | [Constructor](#constructor) | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 |
8 | `Gui` is a class that functions as the context within which all [`GuiObject`](GuiObject.md) objects are created, stored, updated, and drawn. This is automatically created when you call the global function [`createGui()`](Global.md).
9 |
10 | -----
11 |
12 | ## Constructor
13 |
14 | -----
15 |
16 | ### createGui()
17 | [[Back to top]](#description)
18 |
19 | ##### Example
20 | ```javascript
21 | let gui;
22 |
23 | function setup() {
24 | createCanvas(400, 400);
25 | gui = createGui();
26 | }
27 |
28 | ```
29 | ##### Description
30 | Creates a new `Gui` object, which retains and computes all of the information regarding your GUI, including style, user input, and object states. This should be called from within your sketch's `setup()` function.
31 |
32 | ##### Syntax
33 | ```javascript
34 | createGui()
35 | ```
36 |
37 | ##### Parameters
38 | `None`
39 |
40 | ##### Returns
41 | `Gui`
42 |
43 | -----
44 |
45 | ## Variables
46 |
47 | -----
48 |
49 |
50 | ### objects[]
51 | An array of `GuiObject` objects stored within the `Gui`.
52 |
53 | -----
54 |
55 | ## Functions
56 |
57 | -----
58 | ### get()
59 | [[Back to top]](#gui)
60 |
61 | ##### Example
62 | ```javascript
63 | let gui;
64 | let b, bCopy;
65 |
66 | function setup() {
67 | createCanvas(400, 400);
68 | gui = createGui();
69 | b = createButton("Button", 50, 50);
70 |
71 | if (gui.get("Button").length == 1) {
72 | bCopy = gui.get("Button");
73 | }
74 | }
75 | ```
76 |
77 | ##### Description
78 | Returns an array of `GuiObject` objects that match the label parameter.
79 |
80 | ##### Syntax
81 | ```javascript
82 | get(label)
83 | ```
84 |
85 | ##### Parameters
86 | `label` String: label name of the object(s) that will be returned
87 |
88 | ##### Returns
89 | `GuiObject[]`
90 |
91 | -----
92 |
93 | ### loadStyle()
94 | [[Back to top]](#gui)
95 |
96 | ##### Example
97 | ```javascript
98 | let gui;
99 |
100 | function setup() {
101 | createCanvas(400, 400);
102 | gui = createGui();
103 | gui.loadStyle("TerminalGreen");
104 | }
105 | ```
106 |
107 | ##### Description
108 | Loads a `GuiStyle` preset style based on string input. Options are:
109 | * `"Gray"`
110 | * `"Rose"`
111 | * `"Seafoam"`
112 | * `"Blue"`
113 | * `"TerminalGreen"`
114 | * `"TerminalRed"`
115 | * `"TerminalBlue"`
116 | * `"TerminalYellow"`
117 | * `"TerminalMagenta"`
118 |
119 | ##### Syntax
120 | ```javascript
121 | loadStyle(preset)
122 | ```
123 |
124 | ##### Parameters
125 | `preset` String: name of style preset
126 |
127 | ##### Returns
128 | `None`
129 |
130 | -----
131 |
132 | ### updateStyle()
133 | [[Back to top]](#gui)
134 |
135 | ##### Example
136 | ```javascript
137 | let gui;
138 | let s;
139 |
140 | function setup() {
141 | createCanvas(400, 400);
142 | gui = createGui();
143 | s = createSlider("BoxySlider", 50, 50);
144 |
145 | gui.style.slider.rounding = 0;
146 | gui.updateStyle();
147 | }
148 | ```
149 |
150 | ##### Description
151 | Copies all properties currently stored in `Gui.style` to its children `GuiObject` objects. This is useful if you've set specific parameters in `Gui.style` that you'd like to propogate to all `GuiObject` objects.
152 |
153 | ##### Syntax
154 | ```javascript
155 | updateStyle()
156 | ```
157 |
158 | ##### Parameters
159 | `None`
160 |
161 | ##### Returns
162 | `None`
163 |
164 | -----
165 |
166 | ### setStrokeWeight()
167 | [[Back to top]](#gui)
168 |
169 | ##### Example
170 | ```javascript
171 | let gui;
172 |
173 | function setup() {
174 | createCanvas(400, 400);
175 | gui = createGui();
176 | gui.setStrokeWeight(10); // Draws thick lines.
177 | }
178 | ```
179 |
180 | ##### Description
181 | Sets the stroke weight for all `GuiObjects`.
182 |
183 | ##### Syntax
184 | ```javascript
185 | setStrokeWeight(weight)
186 | ```
187 |
188 | ##### Parameters
189 | `weight` Number: the weight (in pixels) of the stroke
190 |
191 | ##### Returns
192 | `None`
193 |
194 | -----
195 |
196 | ### setRounding()
197 | [[Back to top]](#gui)
198 |
199 | ##### Example
200 | ```javascript
201 | let gui;
202 |
203 | function setup() {
204 | createCanvas(400, 400);
205 | gui = createGui();
206 | gui.setRounding(10); // Draws nice rounded corners.
207 | }
208 | ```
209 |
210 | ##### Description
211 | Sets the radius for all `GuiObject` corners. This creates a rounded corner effect.
212 |
213 | ##### Syntax
214 | ```javascript
215 | setRounding(rounding)
216 | ```
217 |
218 | ##### Parameters
219 | `rounding` Number: radius of corners
220 |
221 | ##### Returns
222 | `None`
223 |
224 | -----
225 |
226 | ### setFont()
227 | [[Back to top]](#gui)
228 |
229 | ##### Example
230 | ```javascript
231 | let gui;
232 |
233 | function setup() {
234 | createCanvas(400, 400);
235 | gui = createGui();
236 | gui.setFont("Arial");
237 | }
238 | ```
239 |
240 | ```javascript
241 | let gui;
242 | let font;
243 |
244 | function preload() {
245 | font = loadFont('assets/Regular.otf');
246 | }
247 |
248 | function setup() {
249 | createCanvas(400, 400);
250 | gui = createGui();
251 | gui.setFont(font);
252 | }
253 | ```
254 |
255 | ##### Description
256 | Sets the font that will be applied to all `GuiObject` objects.
257 |
258 | ##### Syntax
259 | ```javascript
260 | setFont(font)
261 | ```
262 |
263 | ##### Parameters
264 | `font` Object|String: a font loaded via [loadFont()](https://p5js.org/reference/#/p5/loadFont), or a String representing a web safe font (a font that is generally available across all systems)
265 |
266 | ##### Returns
267 | `None`
268 |
269 | -----
270 |
271 | ### setTextSize()
272 | [[Back to top]](#gui)
273 |
274 | ##### Example
275 | ```javascript
276 | let gui;
277 |
278 | function setup() {
279 | createCanvas(400, 400);
280 | gui = createGui();
281 | gui.setTextSize(40);
282 | }
283 | ```
284 |
285 | ##### Description
286 | Sets the textSize that will be applied to the text in all `GuiObject` objects.
287 |
288 | ##### Syntax
289 | ```javascript
290 | setTextSize(theSize)
291 | ```
292 |
293 | ##### Parameters
294 | `theSize` Number: the size of the letters in units of pixels
295 |
296 | ##### Returns
297 | `None`
298 |
299 | -----
300 | ### setTrackWidth()
301 | [[Back to top]](#gui)
302 |
303 | ##### Example
304 | ```javascript
305 | let gui;
306 |
307 | function setup() {
308 | createCanvas(400, 400);
309 | gui = createGui();
310 | gui.setTrackWidth(0.1);
311 | }
312 | ```
313 |
314 | ##### Description
315 | Sets the width of slider tracks as a ratio. For instance, `setTrackWidth(1)` sets it to full width, while `setTrackWidth(0.5)` sets it to half width. `setTrackWidth(0)` renders the track as a single line.
316 |
317 | ##### Syntax
318 | ```javascript
319 | setTrackWidth(ratio)
320 | ```
321 |
322 | ##### Parameters
323 | `ratio` Number: width of all slider tracks between 0 (line) and 1 (full)
324 |
325 | ##### Returns
326 | `None`
327 |
328 | -----
329 |
330 | ## Style
331 |
332 | These are the preset styles for **p5.touchgui**:
333 |
334 | * `"Gray"`
335 |
336 | 
337 |
338 | * `"Rose"`
339 |
340 | 
341 |
342 | * `"Seafoam"`
343 |
344 | 
345 |
346 | * `"Blue"`
347 |
348 | 
349 |
350 | * `"TerminalGreen"` (shown on `background(0)`)
351 |
352 | 
353 |
354 | * `"TerminalRed"` (shown on `background(0)`)
355 |
356 | 
357 |
358 | * `"TerminalBlue"` (shown on `background(0)`)
359 |
360 | 
361 |
362 | * `"TerminalYellow"` (shown on `background(0)`)
363 |
364 | 
365 |
366 | * `"TerminalMagenta"` (shown on `background(0)`)
367 |
368 | 
369 |
--------------------------------------------------------------------------------
/docs/GuiObject.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # GuiObject
4 | [Variables](#variables) | [Functions](#functions)
5 |
6 | ## Description
7 |
8 | `GuiObject` is the parent class for all **p5.touchgui** objects. All `GuiObject` objects have the variables and functions described below.
9 |
10 | -----
11 |
12 | ## Variables
13 |
14 | -----
15 |
16 | ### val
17 | [[Back to top]](#guiobject)
18 |
19 | ##### Example
20 | ```javascript
21 | s = createSlider("Slider", 50, 50);
22 |
23 | // Set the value.
24 | s.val = 0.25;
25 |
26 | // Reference the value.
27 | print(s.val);
28 | ```
29 |
30 | ##### Description
31 | Value of the `GuiObject`.
32 |
33 | -----
34 |
35 | ### label
36 | [[Back to top]](#guiobject)
37 |
38 | ##### Example
39 | ```javascript
40 | b = createButton("Button", 50, 50);
41 |
42 | // Set the label.
43 | b.label = "New Label";
44 |
45 | // Reference the label.
46 | print(b.label);
47 | ```
48 |
49 | ##### Description
50 | Label of the `GuiObject`.
51 |
52 | -----
53 |
54 | ### x
55 | [[Back to top]](#guiobject)
56 |
57 | ##### Example
58 | ```javascript
59 | b = createButton("Button", 50, 50);
60 |
61 | // Set the x-coordinate.
62 | b.x = 100;
63 |
64 | // Reference the x-coordinate.
65 | print(b.x);
66 | ```
67 |
68 | ##### Description
69 | x-coordinate of the `GuiObject`.
70 |
71 | -----
72 |
73 | ### y
74 | [[Back to top]](#guiobject)
75 |
76 | ##### Example
77 | ```javascript
78 | b = createButton("Button", 50, 50);
79 |
80 | // Set the y-coordinate.
81 | b.y = 100;
82 |
83 | // Reference the y-coordinate.
84 | print(b.y);
85 | ```
86 |
87 | ##### Description
88 | y-coordinate of the `GuiObject`.
89 |
90 | -----
91 |
92 | ### w
93 | [[Back to top]](#guiobject)
94 |
95 | ##### Example
96 | ```javascript
97 | b = createButton("Button", 50, 50);
98 |
99 | // Set the width.
100 | b.w = 128;
101 |
102 | // Reference the width.
103 | print(b.w);
104 | ```
105 |
106 | ##### Description
107 | Width of the `GuiObject`.
108 |
109 | -----
110 |
111 | ### h
112 | [[Back to top]](#guiobject)
113 |
114 | ##### Example
115 | ```javascript
116 | b = createButton("Button", 50, 50);
117 |
118 | // Set the height.
119 | b.h = 32;
120 |
121 | // Reference the height.
122 | print(b.h);
123 | ```
124 |
125 | ##### Description
126 | Height of the `GuiObject`.
127 |
128 | -----
129 |
130 | ### mode
131 | [[Back to top]](#guiobject)
132 |
133 | ##### Example
134 | ```javascript
135 | b = createButton("Button", 50, 50);
136 |
137 | // Set the interaction mode.
138 | b.mode = "onRelease";
139 | ```
140 |
141 | ##### Description
142 | Interaction mode of the `GuiObject`. Can be set to `"onPress"` or `"onRelease"`. This determines whether the `GuiObject` updates its value(s) when it is pressed vs. when it is released. The default setting is `"onPress"`.
143 |
144 | -----
145 |
146 | ### isPressed
147 | [[Back to top]](#guiobject)
148 |
149 | ##### Example
150 | ```javascript
151 | if (button.isPressed) {
152 | print(button.label + " was pressed!");
153 | }
154 | ```
155 |
156 | ##### Description
157 | This is a `Boolean` that is `True` when the `GuiObject` is first pressed and `False` otherwise.
158 |
159 | -----
160 |
161 | ### isHeld
162 | [[Back to top]](#guiobject)
163 |
164 | ##### Example
165 | ```javascript
166 | if (button.isHeld) {
167 | print(button.label + " was held!");
168 | }
169 | ```
170 |
171 | ##### Description
172 | This is a `Boolean` that is `True` when the `GuiObject` is held and `False` otherwise.
173 |
174 | -----
175 |
176 | ### isReleased
177 | [[Back to top]](#guiobject)
178 |
179 | ##### Example
180 | ```javascript
181 | if (button.isReleased) {
182 | print(button.label + " was released!");
183 | }
184 | ```
185 |
186 | ##### Description
187 | This is a `Boolean` that is `True` when the `GuiObject` is released and `False` otherwise.
188 |
189 | -----
190 |
191 | ### isChanged
192 | [[Back to top]](#guiobject)
193 |
194 | ##### Example
195 | ```javascript
196 | if (button.isChanged) {
197 | print(button.label + " was changed!");
198 | }
199 | ```
200 |
201 | ##### Description
202 | This is a `Boolean` that is `True` when the `GuiObject` is changed and `False` otherwise.
203 |
204 | -----
205 |
206 | ### onPress
207 | [[Back to top]](#guiobject)
208 |
209 | ##### Example
210 | ```javascript
211 | button.onPress = function() {
212 | print(button.label + " was pressed!");
213 | }
214 | ```
215 | ```javascript
216 | let gui, button;
217 |
218 | function setup() {
219 | createCanvas(400, 400);
220 | gui = createGui();
221 | button = createButton("Button", 50, 50);
222 |
223 | button.onPress = onButtonPress;
224 | }
225 |
226 | function onButtonPress() {
227 | print("Pressed!")
228 | }
229 | ```
230 |
231 | ##### Description
232 | A user-defined callback function for `onPress` events can be added to a `GuiObject` object. This is then called when a `GuiObject` is pressed.
233 |
234 | -----
235 |
236 | ### onHold
237 | [[Back to top]](#guiobject)
238 |
239 | ##### Example
240 | ```javascript
241 | button.onHold = function() {
242 | print(button.label + " was held!");
243 | }
244 | ```
245 | ```javascript
246 | let gui, button;
247 |
248 | function setup() {
249 | createCanvas(400, 400);
250 | gui = createGui();
251 | button = createButton("Button", 50, 50);
252 |
253 | button.onHold = onButtonHold;
254 | }
255 |
256 | function onButtonHold() {
257 | print("Held!")
258 | }
259 | ```
260 |
261 | ##### Description
262 | A user-defined callback function for `onHold` events can be added to a `GuiObject` object. This is then called when a `GuiObject` is held.
263 |
264 | -----
265 |
266 | ### onRelease
267 | [[Back to top]](#guiobject)
268 |
269 | ##### Example
270 | ```javascript
271 | button.onRelease = function() {
272 | print(button.label + " was released!");
273 | }
274 | ```
275 | ```javascript
276 | let gui, button;
277 |
278 | function setup() {
279 | createCanvas(400, 400);
280 | gui = createGui();
281 | button = createButton("Button", 50, 50);
282 |
283 | button.onRelease = onButtonRelease;
284 | }
285 |
286 | function onButtonRelease() {
287 | print("Released!")
288 | }
289 | ```
290 |
291 | ##### Description
292 | A user-defined callback function for `onRelease` events can be added to a `GuiObject` object. This is then called when a `GuiObject` is released.
293 |
294 | -----
295 |
296 | ### onChange
297 | [[Back to top]](#guiobject)
298 |
299 | ##### Example
300 | ```javascript
301 | button.onChange = function() {
302 | print(button.label + " was changed!");
303 | }
304 | ```
305 | ```javascript
306 | let gui, button;
307 |
308 | function setup() {
309 | createCanvas(400, 400);
310 | gui = createGui();
311 | button = createButton("Button", 50, 50);
312 |
313 | button.onChange = onButtonChange;
314 | }
315 |
316 | function onButtonRelease() {
317 | print("Changed!")
318 | }
319 | ```
320 |
321 | ##### Description
322 | A user-defined callback function for `onChange` events can be added to a `GuiObject` object. This is then called when a `GuiObject` is changed.
323 |
324 | -----
325 |
326 | ### enabled
327 | [[Back to top]](#guiobject)
328 |
329 | ##### Example
330 | ```javascript
331 | button.enabled = False;
332 | ```
333 |
334 | ##### Description
335 | A `Boolean` value that determines whether the `GuiObject` is enabled to receive input. When `True`, the `GuiObject` will receive input from mouse and touch; when `False`, the `GuiObject` will receive no input, but the value can be set. This may be useful for visualization purposes.
336 |
337 | -----
338 |
339 | ### visible
340 | [[Back to top]](#guiobject)
341 |
342 | ##### Example
343 | ```javascript
344 | button.visible = False;
345 | ```
346 |
347 | ##### Description
348 | A `Boolean` value that determines whether the `GuiObject` is visible (i.e. drawn to the canvas). When `True`, the `GuiObject` will be drawn; when `False`, the `GuiObject` will not be drawn.
349 |
350 | -----
351 |
352 | ## Functions
353 |
354 | -----
355 |
356 | ### setStyle()
357 | [[Back to top]](#guiobject)
358 |
359 | ##### Example
360 | ```javascript
361 | button.setStyle("rounding", 10);
362 | ```
363 | ```javascript
364 | button.setStyle({
365 | rounding: 10,
366 | textSize: 40
367 | });
368 | ```
369 |
370 | ##### Description
371 | Individual `GuiObject` objects can be styled using this method. There are two types of input it takes. Use an input string and value to set an individual property, and use an `Object` with key/value notation to set multiple properties at once.
372 |
373 | ##### Syntax
374 | ```javascript
375 | setStyle(property, value)
376 | setStyle(Object)
377 | ```
378 |
379 | ##### Parameters
380 | `property` String: name of property to be set
381 | `value` Number|String|Object: value of property to be set
382 | `Object` Object: multiple propertys and values to be set
383 |
384 | ##### Returns
385 | `None`
386 |
387 | -----
388 |
389 | ### draw()
390 | [[Back to top]](#guiobject)
391 |
392 | ##### Example
393 | ```javascript
394 | button.draw()
395 | ```
396 |
397 | ##### Description
398 | This can be used to draw the individual `GuiObject`. This is not recommended, as it does not also update the `GuiObject`. Please instead use global function `drawGui()` to draw all objects.
399 |
400 | ##### Syntax
401 | ```javascript
402 | draw()
403 | ```
404 |
405 | ##### Parameters
406 | `None`
407 |
408 | ##### Returns
409 | `None`
410 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [Home]() | [Reference](docs/REFERENCE.md) | [Development Notes](docs/NOTES.md)
2 |
3 | # p5.touchgui
4 |
5 | *Note: This is a work in progress that is in early stages of development.*
6 |
7 | * [Why p5.touchgui?]()
8 | * [Getting Started](#getting-started)
9 | * [Quick Start](#quick-start)
10 | * [My First Button](#my-first-button)
11 | * [Object Types](#object-types)
12 | * [Examples](#examples)
13 | * [Reference](docs/REFERENCE.md)
14 | * [Development Notes](docs/NOTES.md)
15 | * [Support](#support)
16 |
17 | ## Why p5.touchgui?
18 |
19 | 
20 |
21 | [*p5.js*](https://p5js.org) is a wonderfully accessible way for students and creative minds to both learn computer programming and create interactive art and experiences.
22 |
23 | *p5.touchgui* is intended to extend *p5.js* and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your *p5.js* sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input.
24 |
25 | If you'd like to read more about the process, please check out my [Google Summer of Code report](docs/L05_gsoc_2019.md).
26 |
27 | # Getting Started
28 |
29 | ## Quick Start
30 | [[Back to top]](#p5touchgui)
31 |
32 | There are two ways to quickly get started with p5.touchgui.
33 |
34 | ### Option 1 - p5.js editor
35 |
36 | Open this [p5.js web editor sketch with p5.touchgui.js added](https://editor.p5js.org/L05/sketches/YjR7CxKg-).
37 |
38 | ### Option 2 - index.html
39 |
40 | In an **index.html** file, copy and paste the following and open up that file in your web browser.
41 | ```html
42 |
43 |
44 |
45 | Getting Started with p5.touchgui
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
76 |
77 |
78 | ```
79 | That's all!
80 |
81 | ## My First Button
82 | [[Back to top]](#p5touchgui)
83 |
84 | *(Follow along [here](https://editor.p5js.org/L05/sketches/YjR7CxKg-).)*
85 |
86 | 1. Declare a variable named `gui` and use `createGui()` to create a new GUI context. This is where each of your GUI objects is tracked and updated.
87 | ```javascript
88 | let gui;
89 |
90 | function setup() {
91 | createCanvas(400, 400);
92 |
93 | gui = createGui();
94 | }
95 | ```
96 |
97 | 2. Declare a variable called `b` and use `createButton()` to add a new button.
98 | ```javascript
99 | let gui;
100 | let b;
101 |
102 | function setup() {
103 | createCanvas(400, 400);
104 |
105 | gui = createGui();
106 | b = createButton("myButton", 50, 50);
107 | }
108 | ```
109 | 3. Make sure to call `drawGui()` in your `draw()` loop. You can call it anywhere, but make sure to do so after you draw your `background()`.
110 |
111 | If you run your sketch now, you should see your button drawn on the screen at an *x* position of 50 and a *y* position of 50.
112 | ```javascript
113 | function draw() {
114 | background(220);
115 | drawGui();
116 | }
117 | ```
118 | 4. `if()` your button is `.isPressed`, you can choose to perform actions. In this example, we will `print()` a message using the button's `.label`.
119 | ```javascript
120 | function draw() {
121 | background(220);
122 | drawGui();
123 |
124 | if(b.isPressed) {
125 | print(b.label + " is pressed.");
126 | }
127 | }
128 | ```
129 | 5. All together your [p5.js](https://p5js.org) sketch should look like:
130 | ```javascript
131 | let gui;
132 | let b;
133 |
134 | function setup() {
135 | createCanvas(400, 400);
136 |
137 | gui = createGui();
138 | b = createButton("Button", 50, 50);
139 | }
140 |
141 | function draw() {
142 | background(220);
143 | drawGui();
144 |
145 | if(b.isPressed) {
146 | print(b.label + " is pressed.");
147 | }
148 | }
149 | ```
150 | Congratulations! You've created your first sketch using *p5.touchgui*. If you want to see what this looks like, [click here](https://editor.p5js.org/L05/sketches/YjR7CxKg-).
151 |
152 | # Object Types
153 | [[Back to top]](#p5touchgui)
154 |
155 | 
156 |
157 | * **[Button](docs/GuiButton.md)**
158 | A button with a label that highlights when touched or clicked. When released it turns off.
159 |
160 |
161 | * **[Toggle](docs/GuiToggle.md)**
162 | A button with a label that highlights when touched or clicked. When touched or clicked again, it turns off.
163 |
164 |
165 | * **[Checkbox](docs/GuiCheckbox.md)**
166 | A button with an **X** that turns on when touched or clicked. When touched or clicked again, it turns off.
167 |
168 |
169 | * **[Slider](docs/GuiSlider.md)**
170 | A horizontally oriented slider that can be touched or clicked and dragged side to side to change its value.
171 |
172 |
173 | * **[SliderV](docs/GuiSlider.md)**
174 | A vertically oriented slider that can be touched or clicked and dragged up and down to change its value.
175 |
176 |
177 | * **[Crossfader](docs/GuiCrossfader.md)**
178 | A horizontally oriented crossfader that can be touched or clicked and dragged side to side to change its value. Visually similar to a slider except the indicator extends from the center.
179 |
180 |
181 | * **[CrossfaderV](docs/GuiCrossfader.md)**
182 | A vertically oriented crossfader that can be touched or clicked and dragged up and down to change its value. Visually similar to a slider except the indicator extends from the center.
183 |
184 |
185 | * **[Slider2d](docs/GuiSlider2d.md)**
186 | A two dimensional slider that returns an X/Y pair of values depending on touch or click location.
187 |
188 |
189 | * **[Joystick](docs/GuiJoystick.md)**
190 | A two dimensional slider that returns an X/Y pair of values relative to a resetting zero point at its center.
191 |
192 |
193 | # Examples
194 | [[Back to top]](#p5touchgui)
195 |
196 | * **Beginner**
197 | * [Button](https://editor.p5js.org/L05/sketches/6ETiBjotm)
198 | * [Toggle](https://editor.p5js.org/L05/sketches/WUVbr_uqV)
199 | * [Checkbox](https://editor.p5js.org/L05/sketches/Kn1ecx6wv)
200 | * [Slider](https://editor.p5js.org/L05/sketches/urlZ9XCsZ)
201 | * [SliderV](https://editor.p5js.org/L05/sketches/-J54rzetm)
202 | * [Crossfader](https://editor.p5js.org/L05/sketches/MAUFHrJpg)
203 | * [CrossfaderV](https://editor.p5js.org/L05/sketches/uJ4pfZISu)
204 | * [Slider2d](https://editor.p5js.org/L05/sketches/xkA_bxh4_)
205 | * [Joystick](https://editor.p5js.org/L05/sketches/l-66JjVKt)
206 | * **Intermediate**
207 | * [Callbacks](https://editor.p5js.org/L05/sketches/UZ7xM-RoS)
208 | * [Styling](https://editor.p5js.org/L05/sketches/u6aqtbD3d)
209 | * Drawing App
210 | * Notes Player
211 | * **OSC (see below)**
212 | * Slider
213 | * SliderBank
214 | * ButtonBank
215 | * **[Demo](https://editor.p5js.org/L05/sketches/LWfA8lGwe)**
216 |
217 | ## Using the OSC Examples
218 | [[Back to top]](#p5touchgui)
219 |
220 | In order to run the OSC examples you'll need to do the following:
221 |
222 | 1. [Download and install node.js](https://nodejs.org/en/download/)
223 |
224 | 2. Open a terminal or command prompt (on Windows you might need to open the command prompt as admin).
225 |
226 | 3. In the terminal, navigate to your *p5.touchgui* directory using `cd`.
227 |
228 | 4. In the terminal type to install dependencies needed by *p5.touchgui* to run the OSC examples:
229 | `npm install`
230 |
231 | 5. Type the following in the terminal to install node.js `http-server`:
232 | `npm install -g http-server`
233 |
234 | 6. Then start a local server by typing in the terminal:
235 | `http-server -c-1`
236 |
237 | 7. Open a new terminal or command prompt (again, on Windows you might need to open the command prompt as admin).
238 |
239 | 8. Use `cd` to navigate to the `examples/osc` folder within your *p5.touchgui* directory.
240 |
241 | 9. Once there, type in the terminal:
242 | `node bridge.js`
243 |
244 | 10. Then point your browser to `http://localhost:8080/index.html` and use the menu to select the OSC examples.
245 |
246 |
247 | # Support
248 |
249 | Please use *p5.touchgui* and let me know if you have any feedback!
250 |
251 | * Do you **use it in a project**? What works and doesn't work?
252 | * Do you **teach it in a class**? What works and doesn't work?
253 |
254 | Any questions pertaining to this project may be communicated via Issues on the [p5.touchgui GitHub repository](https://github.com/L05/p5.touchgui). Simply create a new Issue and either assign or tag me in the conversation with [@L05](https://github.com/L05).
255 |
--------------------------------------------------------------------------------
/docs/L05_gsoc_2019.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md)
2 |
3 | # p5.touchgui
4 | ***A Mouse & Multi-Touch GUI Library for p5.js***
5 |
6 | *by [Carlos "L05" Garcia](https://github.com/L05) ([@L05_](https://twitter.com/L05_) | [L05.is](https://L05.is))*
7 |
8 | -----
9 |
10 | [*p5.js*](https://p5js.org) is a wonderfully accessible way for students and creative minds alike to learn computer programming and create interactive art and experiences.
11 |
12 | [*p5.touchgui*](https://github.com/L05/p5.touchgui) is intended to extend *p5.js* and make it easy to add canvas-based buttons, sliders, and other GUI (graphical user interface) objects to *p5.js* sketches, enabling users to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input.
13 |
14 | ## > Process
15 |
16 | ### How did this start?
17 |
18 | As an artist and immersive experience designer, I have been researching and developing multi-person interactive experiences for 8 years, experimenting with all kinds of input sensors and mechanisms to create some [pretty cool stuff](https://L05.is).
19 |
20 | A couple of years ago, as I was learning node.js and WebSockets, I started to experiment with *p5.js* as a way of creating simple, mobile touch-screen interfaces that would enable audience members to control games and installations with their phone. In this process, I created a small toolkit of p5-based GUI elements and a node.js server template for multi-person interactive games. Check out an example of one such experience [here](https://i.vimeocdn.com/video/706438411.webp?mw=1100&mh=619&q=70).
21 |
22 | *Sidenote: my next *p5.js* project is to package and release a multi-player node.js server and client template along with a tutorial!*
23 |
24 | [](https://vimeo.com/274410221)
25 |
26 | During my graduate studies at UCLA's Design Media Arts department, I had the wonderful opportunity to work as a teaching assistant for Lauren McCarthy and Casey Reas, who both taught *p5.js* in their classes. I noticed that students often had difficulty with GUI elements in their projects; building a simple button in *p5.js* is an excellent learning exercise if the primary focus of an assignment, but it can be a blocker if the assignment goals are to express some larger creative vision.
27 |
28 | Having already created my own personal toolkit of project-specific GUI elements, I realized that with some work, I could adapt it into a more generalized tool that may be useful to students, artists, and educators. And so the process began...
29 |
30 | ### Research
31 | My first step in working on *p5.touchgui* was to research GUI design methodologies and examples. I looked at the current state of UI within *p5.js*. Users must either use DOM elements via *p5.dom* or create their own canvas-based GUI objects with *p5.js*.
32 |
33 | I performed a number of preliminary tests with DOM elements and multi-touch screens, and it seemed DOM elements were not well suited to multi-touch environments: the performance was often slow and touch quality inconsistent. DOM elements seemed sufficient for simple interactions but not for more dynamic experiences such as touch-screen controllers.
34 |
35 | While *p5.dom* gives users access to DOM elements, it still feels a bit clunky to use. In my classroom experiences, *p5.dom* often seemed a pain point for many students trying to use DOM elements in their sketches.
36 |
37 | As my focus shifted towards designing canvas-based GUI tools, I became especially interested in learning about [Immediate-Mode](https://en.wikipedia.org/wiki/Immediate_Mode_GUI) and [Retained-Mode](https://en.wikipedia.org/wiki/Retained_mode) approaches to Graphical User Interfaces. I first learned of these categories from reading [Doeke Wartena](http://www.doekewartena.nl/)'s description of his Processing GUI library, and [this video](https://www.youtube.com/watch?v=Z1qyvQsjK5Y) by Casey Muratori on Immediate-Mode GUIs was particularly illuminating. I decided to dive into creating *p5.touchgui* as an Immediate-Mode GUI.
38 |
39 | ### Immediate-Mode p5.touchgui
40 |
41 | I first implemented a version of *p5.touchgui* using an Immediate-Mode approach, and in many ways, it felt simple and easy-to-use. The GUI Objects were not stored anywhere; they were fed a variable when drawn, and they modified that variable by reference based on user input.
42 |
43 | Here's what the code looked like in the Immediate-Mode version:
44 |
45 | ```javascript
46 | let x;
47 |
48 | function setup() {
49 | createCanvas(400, 400);
50 | createGui();
51 |
52 | x = {val: 0.5};
53 | }
54 |
55 | function draw() {
56 | background(220);
57 | startGui();
58 |
59 | if (button("Button 1", 50, 50)) {
60 | print("Button 1 pressed.");
61 | }
62 |
63 | endGui();
64 | }
65 | ```
66 | [See it in action here!](https://editor.p5js.org/L05/sketches/7yMYNgJyM)
67 |
68 | **Pros**
69 | * Accessing GUI object states in the `draw()` loop seemed like an exciting idea for teaching beginners.
70 | * No GUI object states had to be stored, retained, or synchronized.
71 | * It was entirely data driven.
72 |
73 | **Cons**
74 | * Required the creation of JavaScript objects in order for pass-by-reference to work. This is an advanced concept to have to introduce to beginners.
75 | * Would be difficult to offer custom styling.
76 | * Multi-touch input would not work well with a strictly Immediate-Mode GUI. This was obviously kind of a deal breaker.
77 |
78 | ### p5.touchgui as Retained-Mode GUI (that mimicks IMGUI)
79 |
80 | While I really liked some aspects of Immediate Mode GUI (IMGUI), I realized a purely IMGUI approach would not offer the functionality necessary to deliver the primary goals of *p5.touchgui*:
81 |
82 | * Easy to use
83 | * Easy to teach
84 | * Multi-touch support
85 | * Performant
86 |
87 | I began to ask myself, how can I adapt some features of IMGUI (such as having access to GUI object states) into a more flexible and comprehensive GUI system?
88 |
89 | I ended up creating a Retained-Mode GUI that mimicked some behaviors of an IMGUI. For instance, users can access GuiObject member variables such as `button.isPressed`, which returns a `Boolean` value describing if the button is in fact pressed.
90 |
91 | By creating callback event handlers specifically for the library, I was also able to account for both mouse and multi-touch input. These custom handlers not only enable expected mouse behavior such as hover states and multi-touch control of GUI objects, but they don't interfere at all with the built-in *p5.js* event callbacks (e.g. *mousePressed()*, *touchStarted()*, etc.). Building the input processing around event-based handlers also made it significantly more performant than calculating inputs during every single frame.
92 |
93 | By switching to a Retained-Mode approach, I was able to begin implementing a style system for GuiObjects, building a small set of presets, and providing user-accessible functions for modifying object styles.
94 |
95 | Here's what the code looks like now:
96 |
97 | ```javascript
98 | let gui;
99 | let b;
100 |
101 | function setup() {
102 | createCanvas(400, 400);
103 |
104 | gui = createGui();
105 | b = createButton("Button", 50, 50);
106 | }
107 |
108 | function draw() {
109 | background(220);
110 | drawGui();
111 |
112 | if(b.isPressed) {
113 | print(b.label + " is pressed.");
114 | }
115 | }
116 | ```
117 | [See it in action here!](https://editor.p5js.org/L05/sketches/YjR7CxKg-).
118 |
119 | ## > Next Steps
120 |
121 | There are a few areas in which I look forward to further developing *p5.touchgui*.
122 |
123 | ### Accessibility
124 |
125 | I learned at the *p5.js Contributors Conference 2019* that *p5.js*, and by extension *p5.touchgui*, is very inaccessible to screen readers. On further reflection, this is not surprising given that *p5.js* is essentially a Canvas object, a buffer of pixels. This pixel buffer and the elements within it inherently carry none of the data screen readers are able to access in DOM elements.
126 |
127 | I am interested in working with the *p5.js* community to find ways of making both *p5.touchgui* and *p5.js* more accessible, whether through providing off-screen shadow DOM structures or through solutions such as the Accessibility Object Model (AOM).
128 |
129 | ### Style
130 |
131 | Style is one area where *p5.touchgui* needs more work; as it turns out, it's hard to build a style system that balances customizability with simplicity! The presets are a good start, and it is possible to stylize individual objects, but the number of lines of code it would take to build out a larger interface still seem extraneous.
132 |
133 | Some features I think would help:
134 | * *Group styling* - i.e. determining the style of an entire object class. This is a high priority feature to be added to the library.
135 | * *Simplified style properties* - the properties currently get pretty granular, which on one hand gives a lot of color control and on the other means that a non-trivial number of properties need to be set. I am very interested in the simplery way Material UI has primary and secondary color choices, for instance.
136 | * More presets!
137 |
138 | ### Additional GuiObjects and Features
139 |
140 | There are a number of additional features on which I would like to work:
141 |
142 | * More GuiObjects!
143 | * Radio Button
144 | * Color Picker
145 | * Button Bank
146 | * Slider Bank
147 | * Range Slider
148 | * Text Field
149 | * Tags (grouping GuiObjects by tag)
150 | * Selective Input Lock (right now all GuiObjects default to input lock)
151 | * Migrate reference documentation to Docsify model.
152 | * More examples!
153 |
154 | You can also check out my [development notes](https://github.com/L05/p5.touchgui/blob/master/docs/NOTES.md) if you'd like to read a more informal summary of process and interests.
155 |
156 | ## > Support
157 |
158 | Please use *p5.touchgui* and give me feedback!
159 | * If you **use it in a project**, what works and doesn't work?
160 | * If you **teach it in a class**, what works and doesn't work?
161 |
162 | Any questions pertaining to this project may be communicated via Issues on the [p5.touchgui GitHub repository](https://github.com/L05/p5.touchgui). Simply create a new Issue and either assign or tag me in the conversation with [@L05](https://github.com/L05). For anything else, don't hesitate to get in touch at carlosga@gmail.com!
163 |
164 | ## > Acknowledgements
165 |
166 | I'd like to give an extra special thanks to my GSOC mentor Yining Shi for her support, guidance, understanding, and encouragement throughout the project. I'd also like to thank Lauren McCarthy for talking through some of the pedagogical applications of *p5.touchgui* with me during its development. Finally, thank you to all of the contributors and community members of *p5.js* who make it such a fantastic resource and community!
167 |
--------------------------------------------------------------------------------
/docs/Global.md:
--------------------------------------------------------------------------------
1 | [Home](../README.md) | [Reference](REFERENCE.md)
2 |
3 | # Global Functions
4 |
5 | **p5.touchgui** has a collection of core library functions that enable you to create and draw your [GUI (Graphical User Interface)](https://en.wikipedia.org/wiki/Graphical_user_interface) as well as various buttons. These can each be called from within your [p5.js](https://p5js.org) sketch similary to [p5.js](https://p5js.org)'s built-in functions (e.g. `createCanvas()`).
6 |
7 | * [createGui()](#creategui)
8 | * [drawGui()](#drawgui)
9 | * [createButton()](#createbutton)
10 | * [createToggle()](#createtoggle)
11 | * [createCheckbox()](#createcheckbox)
12 | * [createSlider()](#createslider)
13 | * [createSliderV()](#createsliderv)
14 | * [createCrossfader()](#createcrossfader)
15 | * [createCrossfaderV()](#createcrossfaderv)
16 | * [createSlider2d()](#createslider2d)
17 | * [createJoystick()](#createjoystick)
18 |
19 | -----
20 |
21 | ### createGui()
22 | [[Back to top]](#global-functions)
23 | ##### Example
24 | ```javascript
25 | let gui;
26 |
27 | function setup() {
28 | createCanvas(400, 400);
29 | gui = createGui();
30 | }
31 |
32 | ```
33 | ##### Description
34 | Creates a new `Gui` object, which retains and computes all of the information regarding your GUI, including style, user input, and object states. This should be called from within your sketch's `setup()` function.
35 |
36 | ##### Syntax
37 | ```javascript
38 | createGui()
39 | ```
40 |
41 | ##### Parameters
42 | `None`
43 |
44 | ##### Returns
45 | `Gui`
46 |
47 | -----
48 |
49 | ### drawGui()
50 | [[Back to top]](#global-functions)
51 |
52 | ##### Example
53 | ```javascript
54 | draw() {
55 | background(200);
56 | drawGui();
57 | }
58 |
59 | ```
60 | ##### Description
61 | Draws all of the objects in your `Gui`. This should be called in your `draw()` loop.
62 |
63 | ##### Syntax
64 | ```javascript
65 | drawGui()
66 | ```
67 |
68 | ##### Parameters
69 | `None`
70 |
71 | ##### Returns
72 | `None`
73 |
74 | -----
75 |
76 | ### createButton()
77 | [[Back to top]](#global-functions)
78 | ##### Example
79 | ```javascript
80 | let gui;
81 | let b;
82 |
83 | function setup() {
84 | createCanvas(400, 400);
85 | gui = createGui();
86 | b = createButton("Button", 50, 50);
87 | }
88 |
89 | ```
90 | ##### Description
91 | Creates a new `GuiButton` object. This is a momentary button.
92 |
93 | ##### Syntax
94 | ```javascript
95 | createButton(label, x, y, [w], [h])
96 | ```
97 |
98 | ##### Parameters
99 | * `label` String: label for the GuiButton
100 | * `x` Number: x-coordinate of the GuiButton
101 | * `y` Number: y-coordinate of the GuiButton
102 | * `w` Number: width of the GuiButton (default is 128)
103 | * `h` Number: height of the GuiButton (default is 32)
104 |
105 | ##### Returns
106 | `GuiButton`
107 |
108 | -----
109 |
110 | ### createToggle()
111 | [[Back to top]](#global-functions)
112 | ##### Example
113 | ```javascript
114 | let gui;
115 | let t;
116 |
117 | function setup() {
118 | createCanvas(400, 400);
119 | gui = createGui();
120 | t = createToggle("Toggle", 50, 50);
121 | }
122 |
123 | ```
124 | ##### Description
125 | Creates a new `GuiToggle` object. This is a toggle button.
126 |
127 | ##### Syntax
128 | ```javascript
129 | createToggle(label, x, y, [w], [h], [defaultVal])
130 | ```
131 |
132 | ##### Parameters
133 | * `label` String: label for the GuiToggle
134 | * `x` Number: x-coordinate of the GuiToggle
135 | * `y` Number: y-coordinate of the GuiToggle
136 | * `w` Number: width of the GuiToggle (default is 128)
137 | * `h` Number: height of the GuiToggle (default is 32)
138 | * `defaultVal` Number: default value for your GuiToggle (default is `false`)
139 |
140 | ##### Returns
141 | `GuiToggle`
142 |
143 | -----
144 |
145 | ### createCheckbox()
146 | [[Back to top]](#global-functions)
147 | ##### Example
148 | ```javascript
149 | let gui;
150 | let cb;
151 |
152 | function setup() {
153 | createCanvas(400, 400);
154 | gui = createGui();
155 | cb = createCheckbox("Checkbox", 50, 50);
156 | }
157 |
158 | ```
159 | ##### Description
160 | Creates a new `GuiCheckbox` object. This is a checkbox which functions like a toggle button.
161 |
162 | ##### Syntax
163 | ```javascript
164 | createCheckbox(label, x, y, [w], [h], [defaultVal])
165 | ```
166 |
167 | ##### Parameters
168 | * `label` String: label for the GuiCheckbox
169 | * `x` Number: x-coordinate of the GuiCheckbox
170 | * `y` Number: y-coordinate of the GuiCheckbox
171 | * `w` Number: width of the GuiCheckbox (default is 32)
172 | * `h` Number: height of the GuiCheckbox (default is 32)
173 | * `defaultVal` Number: default value for your GuiCheckbox (default is `false`)
174 |
175 | ##### Returns
176 | `GuiCheckbox`
177 |
178 | -----
179 |
180 |
181 | ### createSlider()
182 | [[Back to top]](#global-functions)
183 | ##### Example
184 | ```javascript
185 | let gui;
186 | let s;
187 |
188 | function setup() {
189 | createCanvas(400, 400);
190 | gui = createGui();
191 | s = createSlider("Slider", 50, 50);
192 | }
193 |
194 | ```
195 | ##### Description
196 | Creates a new `GuiSlider` object. This is a horizontal slider.
197 |
198 | ##### Syntax
199 | ```javascript
200 | createSlider(label, x, y, [w], [h], [min], [max])
201 | ```
202 |
203 | ##### Parameters
204 | * `label` String: label for the GuiSlider
205 | * `x` Number: x-coordinate of the GuiSlider
206 | * `y` Number: y-coordinate of the GuiSlider
207 | * `w` Number: width of the GuiSlider (default is 128)
208 | * `h` Number: height of the GuiSlider (default is 32)
209 | * `min` Number: lower bound of the value's range (default value is 0)
210 | * `max` Number: upper bound of the value's range (default value is 1)
211 |
212 | ##### Returns
213 | `GuiSlider`
214 |
215 | -----
216 |
217 | ### createSliderV()
218 | [[Back to top]](#global-functions)
219 | ##### Example
220 | ```javascript
221 | let gui;
222 | let s;
223 |
224 | function setup() {
225 | createCanvas(400, 400);
226 | gui = createGui();
227 | s = createSliderV("SliderV", 50, 50);
228 | }
229 |
230 | ```
231 | ##### Description
232 | Creates a new `GuiSliderV` object. This is a vertical slider.
233 |
234 | ##### Syntax
235 | ```javascript
236 | createSliderV(label, x, y, [w], [h], [min], [max])
237 | ```
238 |
239 | ##### Parameters
240 | * `label` String: label for the GuiSliderV
241 | * `x` Number: x-coordinate of the GuiSliderV
242 | * `y` Number: y-coordinate of the GuiSliderV
243 | * `w` Number: width of the GuiSliderV (default is 32)
244 | * `h` Number: height of the GuiSliderV (default is 128)
245 | * `min` Number: lower bound of the value's range (default value is 0)
246 | * `max` Number: upper bound of the value's range (default value is 1)
247 |
248 | ##### Returns
249 | `GuiSliderV`
250 |
251 | -----
252 |
253 | ### createCrossfader()
254 | [[Back to top]](#global-functions)
255 | ##### Example
256 | ```javascript
257 | let gui;
258 | let cf;
259 |
260 | function setup() {
261 | createCanvas(400, 400);
262 | gui = createGui();
263 | cf = createCrossfader("Crossfader", 50, 50);
264 | }
265 |
266 | ```
267 | ##### Description
268 | Creates a new `GuiCrossfader` object. This is a horizontal slider with a center point.
269 |
270 | ##### Syntax
271 | ```javascript
272 | createCrossfader(label, x, y, [w], [h], [min], [max])
273 | ```
274 |
275 | ##### Parameters
276 | * `label` String: label for the GuiCrossfader
277 | * `x` Number: x-coordinate of the GuiCrossfader
278 | * `y` Number: y-coordinate of the GuiCrossfader
279 | * `w` Number: width of the GuiCrossfader (default is 128)
280 | * `h` Number: height of the GuiCrossfader (default is 32)
281 | * `min` Number: lower bound of the value's range (default value is -1)
282 | * `max` Number: upper bound of the value's range (default value is 1)
283 |
284 | ##### Returns
285 | `GuiCrossfader`
286 |
287 | -----
288 |
289 | ### createCrossfaderV()
290 | [[Back to top]](#global-functions)
291 | ##### Example
292 | ```javascript
293 | let gui;
294 | let cf;
295 |
296 | function setup() {
297 | createCanvas(400, 400);
298 | gui = createGui();
299 | cf = createCrossfader("CrossfaderV", 50, 50);
300 | }
301 |
302 | ```
303 | ##### Description
304 | Creates a new `GuiCrossfaderV` object. This is a vertical slider with a center point.
305 |
306 | ##### Syntax
307 | ```javascript
308 | createCrossfaderV(label, x, y, [w], [h], [min], [max])
309 | ```
310 |
311 | ##### Parameters
312 | * `label` String: label for the GuiCrossfaderV
313 | * `x` Number: x-coordinate of the GuiCrossfaderV
314 | * `y` Number: y-coordinate of the GuiCrossfaderV
315 | * `w` Number: width of the GuiCrossfaderV (default is 32)
316 | * `h` Number: height of the GuiCrossfaderV (default is 128)
317 | * `min` Number: lower bound of the value's range (default value is -1)
318 | * `max` Number: upper bound of the value's range (default value is 1)
319 |
320 | ##### Returns
321 | `GuiCrossfaderV`
322 |
323 | -----
324 |
325 | ### createSlider2d()
326 | [[Back to top]](#global-functions)
327 | ##### Example
328 | ```javascript
329 | let gui;
330 | let s2d;
331 |
332 | function setup() {
333 | createCanvas(400, 400);
334 | gui = createGui();
335 | s2d = createSlider2d("Slider2d", 50, 50);
336 | }
337 |
338 | ```
339 | ##### Description
340 | Creates a new `GuiSlider2d` object. This is a 2 dimensional slider.
341 |
342 | ##### Syntax
343 | ```javascript
344 | createSlider2d(label, x, y, [w], [h], [minX], [maxX], [maxX], [maxY])
345 | ```
346 |
347 | ##### Parameters
348 | * `label` String: label for the GuiSlider2d
349 | * `x` Number: x-coordinate of the GuiSlider2d
350 | * `y` Number: y-coordinate of the GuiSlider2d
351 | * `w` Number: width of the GuiSlider2d (default is 256)
352 | * `h` Number: height of the GuiSlider2d (default is 256)
353 | * `minX` Number: lower bound of the value's x range (default value is -1)
354 | * `maxX` Number: upper bound of the value's x range (default value is 1)
355 | * `minY` Number: lower bound of the value's y range (default value is -1)
356 | * `maxY` Number: upper bound of the value's y range (default value is 1)
357 |
358 | ##### Returns
359 | `GuiSlider2d`
360 |
361 | -----
362 |
363 | ### createJoystick()
364 | [[Back to top]](#global-functions)
365 | ##### Example
366 | ```javascript
367 | let gui;
368 | let j;
369 |
370 | function setup() {
371 | createCanvas(400, 400);
372 | gui = createGui();
373 | j = createJoystick("Joystick", 50, 50);
374 | }
375 |
376 | ```
377 | ##### Description
378 | Creates a new `GuiJoystick` object. This is a 2 dimensional slider, and the handle snaps back to the center.
379 |
380 | ##### Syntax
381 | ```javascript
382 | createJoystick(label, x, y, [w], [h], [minX], [maxX], [maxX], [maxY])
383 | ```
384 |
385 | ##### Parameters
386 | * `label` String: label for the GuiJoystick
387 | * `x` Number: x-coordinate of the GuiJoystick
388 | * `y` Number: y-coordinate of the GuiJoystick
389 | * `w` Number: width of the GuiJoystick (default is 256)
390 | * `h` Number: height of the GuiJoystick (default is 256)
391 | * `minX` Number: lower bound of the value's x range (default value is -1)
392 | * `maxX` Number: upper bound of the value's x range (default value is 1)
393 | * `minY` Number: lower bound of the value's y range (default value is -1)
394 | * `maxY` Number: upper bound of the value's y range (default value is 1)
395 |
396 | ##### Returns
397 | `GuiJoystick`
398 |
399 |
--------------------------------------------------------------------------------
/lib/p5.dom.min.js:
--------------------------------------------------------------------------------
1 | /*! p5.js v0.7.3 January 20, 2019 */
2 |
3 | !function(t,e){"function"==typeof define&&define.amd?define("p5.dom",["p5"],function(t){e(t)}):"object"==typeof exports?e(require("../p5")):e(t.p5)}(this,function(d){function a(t){var e=document;return"string"==typeof t&&"#"===t[0]?(t=t.slice(1),e=document.getElementById(t)||document):t instanceof d.Element?e=t.elt:t instanceof HTMLElement&&(e=t),e}function c(t,e,i){(e._userNode?e._userNode:document.body).appendChild(t);var n=i?new d.MediaElement(t,e):new d.Element(t,e);return e._elements.push(n),n}d.prototype.select=function(t,e){d._validateParameters("select",arguments);var i=null,n=a(e);return(i="."===t[0]?(t=t.slice(1),(i=n.getElementsByClassName(t)).length?i[0]:null):"#"===t[0]?(t=t.slice(1),n.getElementById(t)):(i=n.getElementsByTagName(t)).length?i[0]:null)?this._wrapElement(i):null},d.prototype.selectAll=function(t,e){d._validateParameters("selectAll",arguments);var i,n=[],r=a(e);if(i="."===t[0]?(t=t.slice(1),r.getElementsByClassName(t)):r.getElementsByTagName(t))for(var o=0;o