The ColorPicker from cp5 is hardcoded and I can not resize the shapes of the sliders. So I extended the ColorPicker class and made a new one called MyColorPicker.
I have several groups and I want to add my new class to one of them.
Earlier, I could do it by cp5.addColorPicker("") .moveTo("") But in this case there is a new class and I couldn't move it to the group. Here is the code pieces:
import controlP5.*;
ControlP5 cp5;
MyColorPicker cp;
void setup() {
size(500, 300);
noStroke();
cp5 = new ControlP5(this);
cp = new MyColorPicker(cp5, "MYPICKER");
cp.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
Group SetupGroup = cp5.addGroup("SETUP")
.setPosition(90,100)
.setWidth(150)
.setHeight(30)
.setFont(font2);
background(0); //For transparency
noStroke();
;
Group ColorGroup = cp5.addGroup("COLOR-BRIGHTNESS")
.setPosition(30,240)
.setWidth(300)
.setHeight(30)
.setFont(font2)
.moveTo(SetupGroup);
background(0);
noStroke();
;
//I want to move my own color picker to the colorGroup instead of this one.
/*
cp5.addColorPicker("PICKER")
.setPosition(40, 10)
.moveTo(ColorGroup);
; */
.
.
.
.
.
.
.}
class MyColorPicker extends ColorPicker {
MyColorPicker(ControlP5 cp5, String theName) {
super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
}
void setItemSize(int w, int h) {
sliderRed.setSize(w, h);
sliderGreen.setSize(w, h);
sliderBlue.setSize(w, h);
sliderAlpha.setSize(w, h);
sliderRed.setPosition(10,10);
sliderGreen.setPosition(10,100);
sliderBlue.setPosition(10,180);
sliderAlpha.setPosition(10,260);
}
}
I would recommend fixing syntax errors before posting and also removing any code that may not be related to the issue. Trying to cleanup / minimise code that way made the solution obvious for me so many times in the past.
I'm not sure you can group groups within groups. I might be wrong and hopefully someone more experienced with cp5 can correct me if I'm wrong.
If you use a single group and fix the syntax errors you could run something like this:
import controlP5.*;
ControlP5 cp5;
MyColorPicker cp;
PFont font, font2;
void setup() {
size(500, 300);
noStroke();
font = createFont ("Georgia Bold", 20);
font2 = createFont ("Georgia Bold",15);
cp5 = new ControlP5(this);
Group SetupGroup = cp5.addGroup("SETUP")
.setPosition(90,100)
.setWidth(150)
.setHeight(30)
.setFont(font2);
cp = new MyColorPicker(cp5, "MYPICKER");
cp.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
cp.moveTo(SetupGroup);
}
void draw(){
background(0);
}
class MyColorPicker extends ColorPicker {
MyColorPicker(ControlP5 cp5, String theName) {
super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
}
void setItemSize(int w, int h) {
sliderRed.setSize(w, h);
sliderGreen.setSize(w, h);
sliderBlue.setSize(w, h);
sliderAlpha.setSize(w, h);
sliderRed.setPosition(10,10);
sliderGreen.setPosition(10,100);
sliderBlue.setPosition(10,180);
sliderAlpha.setPosition(10,260);
}
}
Well done on extending the colour picker, not noobie after all ;)
If you want two colour pickers for two LED rings but not display both at the same time perhaps you could use an accordion ?
import controlP5.*;
ControlP5 cp5;
MyColorPicker cp1, cp2;
PFont font, font2;
void setup() {
size(500, 300);
noStroke();
font = createFont ("Georgia Bold", 20);
font2 = createFont ("Georgia Bold",15);
cp5 = new ControlP5(this);
Group ring1Group = cp5.addGroup("ring 1")
.setPosition(90,100)
.setWidth(150)
.setHeight(30)
.setFont(font2);
cp1 = new MyColorPicker(cp5, "ring 1 picker");
cp1.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
cp1.moveTo(ring1Group);
Group ring2Group = cp5.addGroup("ring 2")
.setPosition(90,240)
.setWidth(150)
.setHeight(30)
.setFont(font2);
cp2 = new MyColorPicker(cp5, "ring 2 picker");
cp2.setPosition(50, 50).setColorValue(color(000, 255, 000, 255));
cp2.moveTo(ring2Group);
cp5.addAccordion("ring colors")
.setPosition(40,40)
.setWidth(200)
.addItem(ring1Group)
.addItem(ring2Group)
;
}
void draw(){
background(0);
}
class MyColorPicker extends ColorPicker {
MyColorPicker(ControlP5 cp5, String theName) {
super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
}
void setItemSize(int w, int h) {
sliderRed.setSize(w, h);
sliderGreen.setSize(w, h);
sliderBlue.setSize(w, h);
sliderAlpha.setSize(w, h);
sliderRed.setPosition(10,10);
sliderGreen.setPosition(10,100);
sliderBlue.setPosition(10,180);
sliderAlpha.setPosition(10,260);
}
}
I'm not sure multiple nested levels a supported with the accordion component either. I would expect it to support a flat hierarchy.
Related
I’m trying to add a feature where you can click on different parts of the sketch and have an image randomly generated. It worked for the first time, but when I add another if mouse pressed function, it triggers all the mouse pressed code and all of the sets of images go off at the same time. I’m not sure how to isolate it so that just one goes off if it’s in the right spot.
Here is my code for the last attempt, I tried to isolate the mouse pressed function with a push and pop Matrix, which didn’t work.
PImage stage;
PImage model;
PImage [] hat = new PImage [5];
PImage [] pants = new PImage [4];
PImage [] shirt = new PImage [5];
int choice = 0;
int page = 0;
void setup() {
size (800, 800);
stage = loadImage("background.png");
background(255);
image(stage, 0, 0);
hat[0] = loadImage ("hat1.png");
hat[1] = loadImage ("hat2.png");
hat[2] = loadImage ("hat3.png");
hat[3] = loadImage ("hat4.png");
pants[0] = loadImage ("pant1.png");
pants[1] = loadImage ("pant2.png");
pants[2] = loadImage ("pant3.png");
pants[3] = loadImage ("pant4.png");
}
void draw() {
println(mouseX, mouseY); //398, 237 for hats.
image(stage, 0, 0);
pushMatrix();
if (dist(398, 237, mouseX, mouseY) <90 && mousePressed) choice = floor(random(4));
image(hat[choice], 349, 98);
popMatrix();
pushMatrix();
if (dist(404, 363, mouseX, mouseY) <90 && mousePressed) choice = floor(random(4));
image(pants[choice], 228, 263);
popMatrix();
}
The issue is that you're using the same variable for all the clothing items. So when you click on the hat button, it sets choice to a random number (let's say 2). Then you display hat[choice] and then you also display pants[choice]. One way around this is to have multiple different choice variables, hatChoice and pantsChoice. When you click on the hat button, it randomizes hatChoice, and when you click on the pants button, it randomizes pantsChoice. Something like this:
if (dist(398, 237, mouseX, mouseY) <90 && mousePressed) hatChoice = floor(random(4));
image(hat[hatChoice], 349, 98);
if (dist(404, 363, mouseX, mouseY) <90 && mousePressed) pantsChoice = floor(random(4));
image(pants[pantsChoice], 228, 263);
I also second #rjw1428's recommendation of using mouseClicked() instead of if (mousePressed). You can do something like this:
//your global variables...
int hatChoice = 0;
int pantsChoice = 0;
void setup() {
//your setup stuff...
}
void draw() {
image(stage, 0, 0);
image(hat[hatChoice], 349, 98);
image(pants[pantsChoice], 228, 263);
}
void mouseClicked() {
if (dist(mouseX, mouseY, 398, 237) < 90) {
hatChoice = floor(random(4));
}
if (dist(mouseX, mouseY, 404, 363) < 90) {
pantsChoice = floor(random(4));
}
}
This isn't a perfect solution, but to implement what you're trying to do, i might do this
PImage stage;
PImage model;
PImage [] hat = new PImage [5];
PImage [] pants = new PImage [4];
PImage [] shirt = new PImage [5];
int selectedHat = -1;
int selectedPants = -1;
int selectedShirt = -1;
int choice = 0;
int page = 0;
void setup(){
size (800,800);
stage = loadImage("background.png");
background(255);
image(stage,0,0);
initializeImages()
}
void draw(){
println(mouseX, mouseY); //398, 237 for hats.
image(stage,0,0);
if (selectedHat > 0) {
image(hat[selectedHat], 349,98);
}
if (selectedPants > 0) {
image(pants[choice], 228,263);
}
}
void mouseClicked() {
if(dist(404,363, mouseX, mouseY) <90 && mousePressed) {
selectedPants = floor(random(4));
}
if(dist(398,237, mouseX, mouseY) <90 && mousePressed) {
selectedHat = floor(random(4));
}
}
void initializeImages() {
hat[0] = loadImage ("hat1.png");
hat[1] = loadImage ("hat2.png");
hat[2] = loadImage ("hat3.png");
hat[3] = loadImage ("hat4.png");
pants[0] = loadImage ("pant1.png");
pants[1] = loadImage ("pant2.png");
pants[2] = loadImage ("pant3.png");
pants[3] = loadImage ("pant4.png");
}
Then if you wanted to clear, have an IF check for the location (button) that you want to select to clear, and your function could return all the 'selected' values back to -1
I already made a custom shape (myFunction), and I also made patterns using simpler shapes. I want to know how to replace those simple shapes with my custom shape while maintaining the pattern drawn on processing...
You're already calling functions such as noFill(), noStroke(), etc.
It's the same for your function: call it by simply using it's name and () (because it has no arguments): myFunction();
Let's say you want to draw it in pattern 1, you could do something like:
if (pattern==1) {
for (int x=50; x<width; x+=100) {
for (int y=20; y<height; y+=100) {
myFunction();
}
}
}
You will need to pay attention to rendering though.
Running the above will not display anything you call in noFill() in myFunction() and also noStroke() in draw(), right after background(): you won't be able to see a shape with no fill and no stroke :)
One suggestion is to add a stroke:
void myFunction() {
noFill();
stroke(255);
ellipse(300, 300, 200, 400);
ellipse(300, 300, 400, 200);
translate(300, 300);
rotate(radians(130));
ellipse(0, 0, 200, 400);
translate(0, 0);
rotate(radians(0));
ellipse(0, 0, 400, 200);
}
Of course feel free to experiment and make this look nicer.
Here's a modified version of your sketch that uses a few key presses to change the pattern type and shape type at runtime:
int pattern = 1;
// 0 = pluseEllipseCluser, 1 = blobs, 2= myFunction spirograph circles
int shape = 0;
void setup() {
size(600, 600);
println("press 1,2 to change pattern");
println("press p/b/c to change shapes");
}
void draw() {
background(30);
noStroke();
if (pattern==1) {
for (int x=50; x<width; x+=100) {
for (int y=20; y<height; y+=100) {
drawSelectedShapes(x, y);
}
}
}
if (pattern==2) {
float rando = random(10, 90);
for (float x= rando; x >= 0; x-=random(2.5)) {
for (float y= rando; y >= 0; y-=random(2.5)) {
drawSelectedShapes(x, y);
}
}
}
}
void drawSelectedShapes(float x, float y){
if(shape == 0){
plusEllipseCluser(x, y);
}
if(shape == 1){
blobs();
}
if(shape == 2){
myFunction();
}
}
void plusEllipseCluser(float x, float y){
fill(random(255), random(255), random(255), random(255));
ellipse(x, y+30, 50, 20); //plus ellipse cluster
ellipse(x, y+30, 20, 50);
}
void blobs(){
noStroke();
fill(random(250), random(120), random(100));
ellipse(random(width), random(height), 20, 50);
noFill();
stroke(random(255));
ellipse(random(width), random(height), 50, 20);
}
void myFunction() {
noFill();
stroke(255);
ellipse(300, 300, 200, 400);
ellipse(300, 300, 400, 200);
translate(300, 300);
rotate(radians(130));
ellipse(0, 0, 200, 400);
translate(0, 0);
rotate(radians(0));
ellipse(0, 0, 400, 200);
}
void keyPressed(){
if(key == '1') {
pattern = 1;
}
if(key == '2') {
pattern = 2;
}
if(key == 'p'){
shape = 0;
}
if(key == 'b'){
shape = 1;
}
if(key == 'c'){
shape = 2;
}
}
Notice that the example above also calls plusEllipseCluser() passing two arguments: it's a basic example of defining and calling a function that takes two arguments. Of course you've already called functions with arguments before (e.g. random(min,max), ellipse(x,y,w,h), etc.)
Have fun with shapes and patterns.
I'd like to rotate a cube in P3D and my code uses live sensor data to do that.
The problem is the previous orientations of the cube are always visible and overlap (as you can see in this image: http://i.stack.imgur.com/txXw6.jpg), which I don't want. I already tried the functions "hint(DISABLE_OPTIMIZED_STROKE)" and "hint(ENABLE_DEPTH_TEST)", which did nothing. Besides the hint functions I found nothing on a similar issue.
How can I render ONLY the current orientation?
import processing.serial.*;
import toxi.geom.*;
Serial myPort;
float qW;
float qX;
float qY;
float qZ;
float[] axis = new float[4];
Quaternion quat = new Quaternion(1, 0, 0, 0);
void setup()
{
size(600, 400, P3D);
myPort = new Serial(this, "COM3", 9600);
background(0);
lights();
}
void draw()
{
serialEvent();
quat.set(qW, qX, qY, qZ);
axis = quat.toAxisAngle();
pushMatrix();
translate(width/2, height/2, -100);
rotate(axis[0], axis[1], axis[2], axis[3]);
noFill();
stroke(255);
box(330, 200, 40);
popMatrix();
}
void serialEvent()
{
int newLine = 13; // new line character in ASCII
String message;
do
{
message = myPort.readStringUntil(newLine); // read from port until new line
if (message != null)
{
String[] list = split(trim(message), " ");
if (list.length >= 4)
{
qW = float(list[0]);
qX = float(list[1]);
qY = float(list[2]);
qZ = float(list[3]);
}
}
} while (message != null);
}
It looks like you're not clearing the frame buffer. Try adding background(0); as the first line in draw();:
void draw()
{
//clear background
background(0);
serialEvent();
quat.set(qW, qX, qY, qZ);
axis = quat.toAxisAngle();
pushMatrix();
translate(width/2, height/2, -100);
rotate(axis[0], axis[1], axis[2], axis[3]);
noFill();
stroke(255);
box(330, 200, 40);
popMatrix();
}
Off topic, it might worth checking out serialEvent().
You could do something like this in setup()
myPort = new Serial(this, "COM3", 9600);
myPort.bufferUntil('\n');
you shouldn't need to call serialEvent() in draw(), the serial library will do that, as it's buffering.
Then in serialEvent() hopefully you can get away with just:
String message = myPort.readString();
if(message !=null){
String[] list = split(trim(message), " ");
if (list.length >= 4)
{
qW = float(list[0]);
qX = float(list[1]);
qY = float(list[2]);
qZ = float(list[3]);
}
}
I'm trying to program an intro. I want the canvas to erase itself after it. I already have the trigger, but I do not know how to clear the canvas. Would just changing the background work? I still want to make stuff after it.
Here is the code:
void setup () {
frameRate(10);
stroke(255, 255, 255);
noFill();
rect(100,155,300,300);
size(500, 500);
}
void square () {
for (int x = 100; x <= 300; x += 100) {
for (int y = 155; y <= 355; y += 100) {
fill(random(0, 255), random(0, 255), random(0, 255));
rect(x, y,100,100);
}
}
};
void draw () {
int time = 0;
int logoLength = 100;
if (time < logoLength) {
fill(255, 255, 255);
background(0, 0, 0);
textFont(createFont("Lucida console", 19));
textAlign(CENTER,CENTER);
text("Ghost Cube Games presents",250,59);
time++;
print(time);
square();
} else if (time == logoLength) {
background(255, 255, 255);
}
}
You can simply call the background() function.
background(0); draws a black background.
background(255); draws a white background.
background(255, 0, 0); draws a red background.
More info can be found in the reference.
For a more specific example, if you want to show an intro screen, you can simply keep track of whether the intro screen is showing in a boolean variable. If that variable is true, then draw the intro screen. If not, then draw whatever else you want to draw. If you do this from the draw() function, then you don't really have to worry about clearing the screen, since calling the background() function will do that for you:
boolean showingIntro = true;
void draw() {
background(0);
if (showingIntro) {
text("INTRO", 20, 20);
} else {
ellipse(50, 50, 25, 25);
}
}
void mouseClicked() {
showingIntro = false;
}
I am trying to get my gif to do something similar to this gif.
I have been able to get the line to draw, and the 'planets' to orbit, but can't figure out how to keep the line connecting the two circles, like the gif does.
Here's the basic code:
int x = 500;
int y = 500;
int radius = y/2;
int cX = x/2;
int cY = y/2;
String text1;
int lg_xBall;
int lg_yBall;
int sm_xBall;
int sm_yBall;
void setup() {
size(x, y);
smooth();
colorMode(RGB);
}
void draw() {
background(0);
stroke(255);
float t = millis()/1000.0f;
drawSmBallOrbit(100);
drawLgBallOrbit(100);
moveSmBall(t);
moveLgBall(t);
sun();
// showMouse();
connectingLines();
}
void drawCircle() { // This will draw a simple circle
stroke(1);
// x1=a+r*cos t, y1=b+r*sin t
ellipse(x/2, y/2, x/2, y/2);
}
void drawLines() { // This will draw lines from the center of the circle.
stroke(1);
line(x/2, y/2, radius/2, radius); // line from 6 to center
line(x/2, y/2, x/2, y/4); // line from 12 to center
for (int i = 0; i <= 5; i+=2.5) {
float x1 = x/2+radius/2*cos(i);
float y1 = y/2+radius/2*sin(i);
line(x/2, y/2, x1, y1);
}
}
void moveSmBall(float ky) { // This will create, and move, a small 'planet'
pushStyle();
stroke(100);
sm_xBall = (int)(cX+radius*cos(ky));
sm_yBall = (int)(cY+radius*sin(ky));
fill(190, 0, 0);
// background(0);
ellipse(sm_xBall, sm_yBall, 10, 10);
popStyle();
}
void drawSmBallOrbit(float opacity) {
pushStyle();
stroke(255, opacity);
strokeWeight(1);
noFill();
ellipse(x/2, y/2, cX+radius, cY+radius);
popStyle();
}
void moveLgBall(float kx) {
kx = kx/.7;
pushStyle();
lg_xBall = (int)(cX+radius*cos(kx)*.6);
lg_yBall = (int)(cY+radius*sin(kx)*.6);
fill(0, 0, 230);
ellipse(lg_xBall, lg_yBall, 30, 30);
popStyle();
}
void drawLgBallOrbit(float opacity) {
pushStyle();
stroke(255, opacity);
strokeWeight(1);
noFill();
ellipse(x/2, y/2, (cX+radius)*.6, (cY+radius)*.6);
popStyle();
}
void sun() {
pushStyle();
fill(250, 250, 0);
ellipse(cX, cY, 40, 40);
popStyle();
}
void connectingLines() {
line(sm_xBall, sm_yBall, lg_xBall, lg_yBall);
}
void showMouse() {
text("X: " + mouseX, x/2, y/2-30);
text("Y: " + mouseY, x/2, y/2-50);
}
Thanks for any help/advice!
The problem is that you're calling background() during every frame, which will clear away anything you've already drawn.
So you either need to stop calling background(), or you need to redraw the old lines every frame.
If you simply move the call to background() out of your draw() function and into your setup() function, you're about 50% there already:
void setup() {
size(x, y);
smooth();
colorMode(RGB);
background(0);
}
void draw() {
// background(0);
stroke(255);
float t = millis()/1000.0f;
drawSmBallOrbit(100);
drawLgBallOrbit(100);
moveSmBall(t);
moveLgBall(t);
sun();
// showMouse();
connectingLines();
}
However, the original animation does not show the previous positions of the ellipses. So you need to clear away the previous frame by calling the background() function, and then redraw previous line positions. You'd do that by having an ArrayList that holds those previous positions.
Here's a simple example that uses an ArrayList to redraw anywhere the mouse has been:
ArrayList<PVector> points = new ArrayList<PVector>();
void setup() {
size(500, 500);
}
void draw() {
background(0);
stroke(255);
points.add(new PVector(mouseX, mouseY));
for(PVector p : points){
ellipse(p.x, p.y, 10, 10);
}
}
You would need to do something very similar, but you'd have to keep track of two points at a time instead of one, since you're tracking two ellipses and not just the mouse position.