Processing Forum

Slider Math

[3 Replies]
- 01-Apr-2013 12:11 PM
- Forum: Programming Questions
Hello,

I am making a slider that changes the tint of an image. I looked some of the code from here http://processing.org/learning/topics/scrollbar.html. However i want the slider to change according to a given min and max value in the constructor. In this case 0 to 255, and the slider needs to be relative to the screen size. This is how i did it, the screen size of 600 is the same as the max value of 255. Now 255 is the same as 100% of the width. Now i calculated this with a decrease ratio to get the same value of 255. However the calculation acts in a sort of Fibonacci style :). My question is can this be done with min() and max(). The slider need to be relative to the screen and the min, max values need to be 100%.

Thanks
2. PImage img;
3. Scroller scroll;
4. Scroller scroll1;
6. void setup(){
7. size(600, 600);
8. img = loadImage("lake.jpg");
10. scroll = new Scroller(0, 0, 32, 32);
11. scroll1 = new Scroller(0, 40, 32, 32);
12. }
14. void draw(){
15. background(255);
16. scroll.display();
17. scroll.setBackground();
18. scroll.setHover();
20. scroll1.display();
21. scroll1.setBackground();
22. scroll1.setHover();
24. tint(scroll.calculate(0, 255), scroll1.calculate(0, 255));
25. image(img, 0, 80);
26. }
29. class Scroller{
30. float xPos, yPos;
31. float sliderWidth, sliderHeight;
32. float sliderMaxBorder, sliderMinBorder;
33. boolean over;
34. boolean locked;
35. float m;
37. Scroller(float tempX, float tempY, float tempWidth,
38. float tempHeight){
39. xPos = tempX;
40. yPos = tempY;
41. sliderWidth = tempWidth;
42. sliderHeight = tempHeight;
44. sliderMaxBorder = width-sliderWidth;
45. sliderMinBorder = 0;
46. }
48. void setHover(){
49. if(overEvent()){
50. println("Hover = " + over);
51. over = true;
52. }
53. else{
54. println("Hover = " + over);
55. over = false;
56. }
57. if(mousePressed && over){
58. println("Clicked = " + locked);
59. locked = true;
60. }
61. else{
62. println("Clicked = " + locked);
63. locked = false;
64. }
65. if(locked){
66. xPos = constrain(mouseX-sliderHeight/2,
67. sliderMinBorder, sliderMaxBorder);
68. }
69. }
71. float calculate(float tempMin, float tempMax)
72. {
73. float minValue = tempMin;
74. float maxValue = tempMax;
76. float a = getPos() / 100;
77. float b = maxValue / 100;
78. float ca = a / b;
79. float aa = ((getPos() / 10) * ca) * 2;
80. println(aa);
81. return aa;
82. }
84. void setBackground(){
85. fill(80, 80, 80, 150);
86. //rectMode(CENTER);
87. rect(0, yPos + sliderHeight/3, width, sliderHeight/3);
88. }
90. boolean overEvent(){
91. if(mouseX > xPos && mouseX < xPos + sliderWidth &&
92. mouseY > yPos && mouseY < yPos + sliderHeight){
93. return true;
94. }
95. else{
96. return false;
97. }
98. }
100. void display(){
101. noStroke();
102. fill(204);
103. if(over){
104. fill(0, 0, 0);
105. }
106. else{
107. fill(102, 102, 102);
108. }
109. rect(xPos, yPos, sliderHeight, sliderHeight);
110. }
112. float getPos(){
113. return xPos;
114. }
115. }

Connect squares with mouse click

[4 Replies]
- 08-Mar-2013 06:24 AM
- Forum: Programming Questions
Hi all,

I just started learning processing (again), and now i have some questions. I have one class called Square and it draws squares when clicked and it stores them in an ArrayList. The ArrayList adds it's elements dynamically. Now i wanted to add PVector lines from one point to another. When i create two squares on different coordinates i want them to connect with a line. When i create three squares i want them all to be connected. So by my logic i stored the coordinates in point1 and point2. But i don't know how to do this, so help :). Here is the code:
2. float size;
3. float speedX;
4. float speedY;
7. Square(float tempX, float tempY, float tempSize){
8. posX = tempX;
9. posY = tempY;
10. size = tempSize;
11. }
13. void display(){
14. rectMode(CENTER);
15. fill(0);
16. noStroke();
17. rect(posX, posY, size, size);
18. }
19. }
And the main sketch
2. ArrayList square;
3. PVector[] point1;
4. PVector[] point2;
6. float randomX = random(0, 600);
8. void setup(){
9. size(600, 600);
10. background(255);
11. smooth();
13. square = new ArrayList();
15. point1 = new PVector[100];
16. point2 = new PVector[100];
17. }
19. void draw(){
20. background(255);
21. for(int i=0; i < square.size(); i++){
22. Square s = (Square) square.get(i);
23. s.display();
24. }
25. }
27. void mouseReleased(){
28. if(mouseButton == LEFT){
29. square.add(new Square(mouseX, mouseY, random(10, 25)));
30. for(int i=0; i < square.size(); i++){
31. point1[i] = new PVector(mouseX, mouseY);
32. println("First" + point1[i].get());
33. }
34. for(int y=0; y < square.size(); y++){
35. point2[y] = new PVector(mouseX, mouseY);
36. println("Second" + point2[y].get());
37. }
38. }
39. }

Split screen

[1 Reply]
- 05-Aug-2012 11:45 AM
- Forum: General Discussion
Hello all members,

Is there a way to split the size() into different panes just like the JSplitPane in java to two or more parts? Sorry for not having code to offer.

Thanks

Screen buttons

[3 Replies]
- 02-Aug-2012 06:26 AM
- Forum: Programming Questions
Hello to all users,

This is my first post and as you might guess i am sort of new to processing. I made this code which has a array for storing values of 0 and 1 when the rectangle is clicked with the left or right mouse button. Values are added only if the arraylist is empty, but changed if the position has a value. As you might have noticed the rectangle is the entire 640, 480 screen. Here is the code:
1. import java.util.Collections;
  
  int value;
  int cols = 13;
  int rows = 3;
  int sizeX, sizeY;
  boolean light = false;
  
  ArrayList ledArray;
  
  void setup() {
  size(640, 480);
  background(255);
  smooth();
  ledArray = new ArrayList();
  sizeX = width/cols;
  sizeY = height/rows;
  println(sizeX);
  }
  
  void draw() {
  rect(0, 0, width, height);
  }
  
  void mousePressed() {
  if (mouseButton == LEFT) {
      value = 1;
      if (ledArray.isEmpty()) {
        ledArray.add(0, value);
      }
      else {
        ledArray.set(0, value);
      }
      println("Light is on " + value);
      fill(255, 0, 0);
  }
  if (mouseButton == RIGHT) {
      value = 0;
      if (ledArray.isEmpty()) {
        ledArray.add(0, value);
      }
      else {
        ledArray.set(0, value);
      }
      println("Light is off " + value);
      fill(0);
  }
  else {
  }
  //inverts the array list
  //Collections.reverse(ledArray);
  println("Array list:" + ledArray);
  println("Array size:" + ledArray.size());
  println("------------------------");
  }
This works fine (so far), but what i want to do is divide the screen. It must have 13 columns and 3 rows on screen. SizeX and sizeY give the distance needed between the rectangles. There are two things that i don't know how to do:
1. Even if i change the screen to another resolution the rectangles should divide across the screen (that's why i added sizeX and sizeY).
2. Each of the rectangles must store a value of 0 or 1 in the arraylist. So in total 39 values for the 39 rectangles. I really don't know how to do this.(if i go with a separate mouseX and mouseY postions i lose the dynamic sizing of the rectangles).
Rectangles == buttons :)

Thank you for your time.

Activity Trend