Processing Forum

background in setup() vs draw()

[4 Replies]
- 13-Apr-2013 05:48 PM
- Forum: Contributed Library Questions
I'm not sure if this is the right section. The question deals more with basic programming but it does include the controlP5 library so I put it in here. Anyways....

I'm trying to draw circles with mousePressed, so in order to get them to show up I have to put my background() in the setup portion so it doesn't redraw over the circles. The only problem is I need to draw text and a rectangle that is changed by controlP5 sliders. Also my text looks bad when you put the background in setup, not sure why...

Is there anyway to redraw the background when I change the sliders but not when click the mouse to draw ellipses?

I've tried to add background(255); to the control event section for when I move the sliders but that blocks the rectangle from being updated till I release the mouse.

I feel like I'm missing something really obvious but I can't seem to find how to do it. Thanks in advance for the help!

Here's my code:
2. import controlP5.*;
3. ControlP5 cp5;
4. int unitWidth;
5. int floorToFloor;
6. float actualWidth;
7. float actualHeight;
8. float rectX1;
9. float rectX2;
10. float rectY1;
11. float rectY2;
13. void setup() {
14. size(1024,768);
15. background(255); //With background here my circles work but when I change the sliders to change the rectangle
16. //it doesn't redraw over the old ones.
18. cp5 = new ControlP5(this);
19. cp5.setColorLabel(color(0));
20. cp5.setColorValue(color(255));
23. // sliders that animate the rectangle, I want these to show the current rectangle without showing the "after images"
24. cp5.addSlider("unitWidth")
25. .setPosition(20,20)
26. .setSize(150, 20)
27. .setValue(25)
28. .setRange(15,45)
29. .setNumberOfTickMarks(7);
30. ;
31. cp5.getController("unitWidth").getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingY(5);
33. cp5.addSlider("floorToFloor")
34. .setPosition(210,20)
35. .setSize(150,20)
36. .setValue(10)
37. .setRange(8,15)
38. .setNumberOfTickMarks(8)
39. ;
40. cp5.getController("floorToFloor").getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingY(5);
42. }
44. void draw() {
46. // If background is here the sliders and rectangle work well but the ellipses won't show up because the background redraws over them.
47. actualWidth = unitWidth*(21.866667);
48. actualHeight = floorToFloor*(21.866667);
49. rectX1 = (width/2) - (actualWidth/2);
50. rectX2 = (width/2) + (actualWidth/2);
51. rectY1 = 414 - (actualHeight/2);
52. rectY2 = 414 + (actualHeight/2);
54. fill(255);
55. strokeWeight(1);
56. stroke(0);
57. line(0,60,width,60);
59. //rectangle, I know I could use rect() but I need all the corner points for later.
60. line(rectX1, rectY1, rectX1, rectY2);
61. line(rectX1, rectY1, rectX2, rectY1);
62. line(rectX2, rectY1, rectX2, rectY2);
63. line(rectX1, rectY2, rectX2, rectY2);
64. fill(0);
65. text(unitWidth + "'", 550, 195);
66. }
68. void controlEvent(ControlEvent theEvent) {
69. println("got a control event from controller with id "+theEvent.getController().getId());
71. // tried using this section, when I did a fill() or background it wouldnt show the rectangle updating with the slider,
72. // only on release it would show the new rectangle.
73. }
75. void mousePressed() {
76. fill(125);
77. stroke(0);
78. ellipse(mouseX, mouseY, 10, 10);
79. }

controlP5 change frame visibility with a button

[0 Replies]
- 03-Apr-2013 11:55 PM
- Forum: Contributed Library Questions
I'm new to processing and trying to create a GUI interface using controlP5. So far it's been really useful but I'm stuck with this problem.

I'm trying to create a "main menu" of sorts with buttons linking to other frames. I was able to make a separate frame with this example ( http://www.sojamo.de/libraries/controlP5/examples/extra/ControlP5frame/ControlP5frame.pde) but I want to be able to change visibility of it. I see the line f.setVisible(true); but I'm not sure how to change that with a button that's on the original frame. Mostly, I'm not really sure how the controlEvents work between the main window and the PApplet control frame.

I feel like the answer is really obvious but I can't seem to find it...

linking sliders with imported data to display an image

[4 Replies]
- 01-Apr-2013 04:29 PM
- Forum: Contributed Library Questions
I'm new to processing and programming in general. I'm trying to develop an interface to display design iterations using exported screenshots and parameter values (.csv file) from Grasshopper/Rhino 3D. I've managed put together code I've found online and in tutorial examples to get pretty far. I've been able to load in all 1000 screenshots, create sliders from controlp5, and load in the .csv file fairly well. My problem is linking them together.

I have 3 sliders for X,Y,Z values in processing (integers, 1 to 10). The data exported from Grasshopper has the screenshot file name in the first column then the corresponding X,Y,Z values that apply to the screen shot. Like this: "animation0002.png, 1, 1, 3". Each line has a separate screenshot filename with its data.

What I want to do is have processing display the correct screenshot that matches the slider's inputs. I'm not sure how to go about searching or matching the string array with the sliders. I'll post my code below. Let me know if anything is unclear. Thanks!
2. import controlP5.*;
3. ControlP5 cp5;
4. Slider abc;
5. int numFrames = 1000; // The number of screenshots to cycle through
6. PImage[] images = new PImage[numFrames];
8. void setup() {
9. size(1800,1000);
10. noStroke();
11. for (int i = 0; i < numFrames; i++){
12. String imageName = "animation" + nf(i, 4) + ".png";
13. images[i] = loadImage(imageName); // Load in the screenshots
14. }
16. String[] theFile = loadStrings("animation_data.csv"); // Load data file
17. String[][] dataTable = new String[theFile.length][4];
18. for (int i = 0; i < theFile.length; i++) {
19. String[] pieces = split(theFile[i], ",");
20. for (int j = 0; j < 4; j++) {
21. dataTable[i][j] = pieces[j];
22. println("data[" + i + "][" + j + "] = " + dataTable[i][j] );
23. }
24. }
26. cp5 = new ControlP5(this);
27. PFont p = createFont("Calibri",18);
28. cp5.setControlFont(p);
29. cp5.setColorForeground(0xff7F7F7F);
30. cp5.setColorBackground(0xffBFBFBF);
31. cp5.setColorActive(0xff404040);
32. cp5.setColorLabel(0xff000000);
33. cp5.setColorValue(0xff000000);
35. cp5.addSlider("X")
36. .setPosition(50,100)
37. .setSize(400, 10)
38. .setRange(1,10)
39. .setValue(5)
40. .setNumberOfTickMarks(10)
41. .setSliderMode(Slider.FIX)
42. .setColorTickMark(0)
43. .setColorValueLabel(0)
44. ;
46. cp5.getController("X").getValueLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
47. cp5.getController("X").getCaptionLabel().setPaddingX(10);
49. cp5.addSlider("Y")
50. .setPosition(50,200)
51. .setSize(400, 10)
52. .setRange(1,10)
53. .setValue(5)
54. .setNumberOfTickMarks(10)
55. .setSliderMode(Slider.FIX)
56. .setColorTickMark(0)
57. .setColorValueLabel(0)
58. ;
60. cp5.getController("Y").getValueLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
61. cp5.getController("Y").getCaptionLabel().setPaddingX(10);
63. cp5.addSlider("Z")
64. .setPosition(50,300)
65. .setSize(400, 10)
66. .setRange(1,10)
67. .setValue(5)
68. .setNumberOfTickMarks(10)
69. .setSliderMode(Slider.FIX)
70. .setColorTickMark(0)
71. .setColorValueLabel(0)
72. ;
74. cp5.getController("Z").getValueLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE).setPaddingX(0);
75. cp5.getController("Z").getCaptionLabel().setPaddingX(10);
76. }
78. void draw() {
79. background(255);
80. float x = cp5.getController("X").getValue();
81. int intx = int(x);
82. float y = cp5.getController("Y").getValue();
83. int inty = int(y);
84. float z = cp5.getController("Z").getValue();
85. int intz = int(z);
86. image(images[intx], 700, height/6, images[5].width, images[5].height); // Displayed image, linked with "X" slider right now.
87. // I want it to link with the data to display the correct image for the slider input.
88. text(intx, 50, 800);
89. text(inty, 50, 825);
90. text(intz, 50, 850);
91. fill(0);
92. }
94. void controlEvent(ControlEvent theEvent) {
95. if(theEvent.isController()) {
96. print("control event from : "+theEvent.controller().name());
97. println(", value : "+theEvent.controller().value());
98. }
99. }

Activity Trend