Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

addButton & setRangeValue functions #9

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

addButton & setRangeValue functions #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1fdf2d0
addButton function added, setRangeValue function added
kabrio Jul 27, 2017
b006851
button & setRangeValue example
kabrio Jul 27, 2017
1fd6bc2
added setDropDownIndex, added ";"
kabrio Jul 28, 2017
c608be0
add Math.round(index) to setDropDownIndex
kabrio Jul 30, 2017
5d6fa70
addHTML
kabrio Sep 23, 2017
d51d14a
setRangeValue -> setValue
kabrio Sep 29, 2017
8e3208d
setBoolean() added
kabrio Jan 24, 2018
6596b5a
updated to quicksettings version 3
kabrio Mar 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions examples/button-setValue/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../libraries/p5.js" type="text/javascript"></script>
<script src="../../libraries/quicksettings.js" type="text/javascript"></script>
<script src="../../libraries/p5.gui.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>
152 changes: 152 additions & 0 deletions examples/button-setValue/sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@

// gui params
var numShapes = 20;
var strokeWidth = 4;
var strokeColor = '#00ddff';
var fillColor = [180, 255, 255];
var drawStroke = true;
var drawFill = true;
var radius = 20;
var shape = ['circle', 'triangle', 'square', 'pentagon', 'star'];
var label = 'label';

// gui
var visible = true;
var gui;

// dynamic parameters
var bigRadius;

function setup() {

createCanvas(windowWidth, windowHeight);

// Calculate big radius
bigRadius = height / 3.0;

// Create Layout GUI
gui = createGui('P5 GUI');
gui.addGlobals('numShapes', 'bigRadius', 'shape', 'label', 'radius',
'drawFill', 'fillColor', 'drawStroke', 'strokeColor', 'strokeWidth');

gui.addButton("randomize", function() {
randomize();
});

// Don't loop automatically
noLoop();

}


function draw() {

// clear all
clear();

// set fill style
if(drawFill) {
fill(fillColor);
} else {
noFill();
}

// set stroke style
if(drawStroke) {
stroke(strokeColor);
strokeWeight(strokeWidth);
} else {
noStroke();
}

// draw circles arranged in a circle
for(var i = 0; i < numShapes; i++) {

var angle = TWO_PI / numShapes * i;
var x = width / 2 + cos(angle) * bigRadius;
var y = height / 2 + sin(angle) * bigRadius;
var d = 2 * radius;

// pick a shape
switch(shape) {

case 'circle':
ellipse(x, y, d, d);
break;

case 'square':
rectMode(CENTER);
rect(x, y, d, d);
break;

case 'triangle':
ngon(3, x, y, d);
break;

case 'pentagon':
ngon(5, x, y, d);
break;

case 'star':
star(6, x, y, d/sqrt(3), d);
break;

}

// draw a label below the shape
push();
noStroke();
fill(0);
textAlign(CENTER);
text(label, x, y + radius + 15);
pop();

}

}

function randomize() {
gui.setValue('numShapes', random(0, 100));
gui.setValue("bigRadius", random(0, height/3.0))
gui.setValue('radius', random(0, 100));
gui.setValue('shape', round(random(4)));
gui.setValue('strokeWidth', random(0, 100));
}

// check for keyboard events
function keyPressed() {
switch(key) {
// type [F1] to hide / show the GUI
case 'p':
visible = !visible;
if(visible) gui.show(); else gui.hide();
break;
}
}


// draw a regular n-gon with n sides
function ngon(n, x, y, d) {
beginShape();
for(var i = 0; i < n; i++) {
var angle = TWO_PI / n * i;
var px = x + sin(angle) * d / 2;
var py = y - cos(angle) * d / 2;
vertex(px, py);
}
endShape(CLOSE);
}


// draw a regular n-pointed star
function star(n, x, y, d1, d2) {
beginShape();
for(var i = 0; i < 2 * n; i++) {
var d = (i % 2 === 1) ? d1 : d2;
var angle = PI / n * i;
var px = x + sin(angle) * d / 2;
var py = y - cos(angle) * d / 2;
vertex(px, py);
}
endShape(CLOSE);
}
Loading