Display Basics program

Processing Coding Questions
1

I a beginner with processing, but have had experience with coding in other languages. I am attempting to make a block of cyan color walk across a blue back gound in three steps. For some reason the first two blocks will not appear and only the last block shows. I can not see what is wrong. Thanks Mike

void setup(){
  size(900,300);

  noStroke();        //no outline around small circle
  smooth();          //smooths the contour of the small circle  
  fill(#0F2EF0);    //Fill background with blue
  rect (0, 0, 900, 300);
  delay(1000);

  fill(#03FFFD);    //after 1 second color left 1/3 block with cyan
  rect(0,0,300,300);
  delay(1000);

  fill(#0F2EF0);      //Fill background with blue to erase old cyan
  rect (0, 0, 900, 300);

  fill(#03FFFD);    //fill middle block with cyan
  rect(300,0,300,300);
  delay(1000);

  fill(#0F2EF0);      //Fill background with blue to erase old cyan
  rect (0, 0, 900, 300);

  fill(#03FFFD);    //fill right block with cyan
  rect(600,0,300,300);
  delay(1000);

}
1 Like
2

setup() is only run one time when the sketch starts. Perhaps thatā€™s whatā€™s wrong?

3

That is true, but even once shouldnā€™t this code show the block of cyan move across the field of blue. Mike

4

I would suggest you have a look at the ā€œBounceā€ example sketch and start from that. (Look under File > Examples in Processing).

1 Like
5

Thanks Iā€™ll give it try. Mike

6

Let me know how it goes. I canā€™t figure out why your code doesnā€™t work but then I donā€™t do much in the way of animation in Processing!

7

I have written some code that mimics a radio dial. I want to use three of them. I have gotten the dial code to work fro one dial. Now I want to have three of them. My idea was to block out an area of the screen place the dial over that area and allow the dial to operate as needed. Then when the next dial needs to be adjusted I would tap the TAB key and the next dial would be activated. This basic code was to become a blue background and a cyan color block that indicates this dial is active. Then the active dial would change with the TAB key. I was having trouble, so I went back to something simple. I did get this code to work
<float x = -300;

void setup(){
size(900,300);

noStroke(); //no outline around small circle
smooth(); //smooths the contour of the small circle
background(#0F2EF0); //Fill background with blue
}

void draw(){
fill(#0F2EF0); //Fill background with blue //<<<<
rect(0,0,900,300);
delay(55); //<<<<

x = x + 300;
print(x);
fill(#03FFFD); //after 1 second color left 1/3 block with cyan
rect(x,0,300,300);
delay(1000);

if(x>=600){
x = -300;
}

}
/>

But if I move the three lines that erase the last cyan block into the middle of the code like this;

<float x = -300;

void setup(){
size(900,300);

noStroke(); //no outline around small circle
smooth(); //smooths the contour of the small circle
background(#0F2EF0); //Fill background with blue
}

void draw(){

x = x + 300;
print(x);
fill(#03FFFD); //after 1 second color left 1/3 block with cyan
rect(x,0,300,300);
delay(1000);

fill(#0F2EF0); //Fill background with blue //<<<<
rect(0,0,900,300);
delay(55); //<<<<

if(x>=600){
x = -300;
}

}
/>

It does not work. Another thing, I looking for a good book on the code, but have not found one that works for me. THanks Mike

8

Hi Mike,

If you want to do dials and the like you should take a look at the G4P library and the G4P GUI Builder tool. Hereā€™s a screenshot of one of my projects that I used G4P in. The ā€˜knobsā€™ in the middle can be adjusted by dragging with the mouse - maybe that would suit your app?

image
image522Ɨ577 45.4 KB

9

Wow! those look really good. My dials have small dots around a circle that light up as the dial is moved. Iā€™ll have to look into the G4p library. Thanks Mike

10

Your code is not working because the screen is refreshed only at the end of the setup() section (or the draw() section).

Even if you have some delay inside the function, it will just pause the program but not display anything on the screen.

Generally it is not a good idea to use the delay function because everything stop. Instead you might want to use the millis() function to compute how much time passed and perform action if the time passed meet your criteria.

For example, your code could be written like this:

int startTime;

void setup() {
  size(900, 300);
  startTime = millis(); // Get the intial time when we start entering the draw loop
}

void draw() {
  noStroke(); //no outline around small circle
  background(#0F2EF0); // reset screen
  
  int elapsedTime = millis() - startTime; // Computed the time since we entered the draw loop
  
  fill(#03FFFD); //Set fill color
  if (elapsedTime < 1000) { // During the first second, the cyan square is drawn left
    rect (0, 0, 300, 300);
  } else if (elapsedTime < 2000) { // During the second second, in the middle
    rect(300, 0, 300, 300);
  } else { // After 2 seconds on the right
    rect(600, 0, 300, 300); 
  }
}
1 Like
11

Thank you! Your first sentence explains it. Iā€™ve been looking for an explaination of how the screen works and could not find anything. This is just the kind of thing that is rather frustrating for me. Iā€™d really like a good book that explains things like this. Anyway, thanks again for the help. Mike

12

Not a book but the processing website is quite well done for that.

You have a tutorial section that goes through the basics and the reference page provides a lot of information.

13

Thanks for the pointers. Iā€™m an old man (emphasize on OLD). I have trouble learning this way. I did purchase a book that Reas and Fry wrote. Itā€™s OK, but there again it seem to work by example and not by ā€˜here is how this worksā€™. Examples seem to gloss over the important items. Iā€™ll keep struggling. I wrote an Arduino program that tests ignition coils. This program has a few variables that can be adjusted for different types of coils. The program works, but uses the serial monitor for control, not the neatest. So I wanted to make a GUI for it. I found Processing and it looked promising. The other day I found G4P library, which looks like it does much of the heavy lifting. But here again it is more learning. Iā€™ll get there, but it may take time. Thanks for the help.

Mike Zahorik
(414) 254-6768

1 Like
14

I think it is difficult to find any resources on just the ā€œhere how it worksā€ stuff. Most of the time, tutorial uses concrete example to teach those things.

Generally speaking, Iā€™m often using the examples to get the general idea of how everything works and whatā€™s possible to do and then go have a look in the documentation to do more advanced stuff.

There is no real in betweenā€¦ You can also have a look at the processing code directly if you really feel like exploring in detail how each function works.

Sounds like an interesting project. Good luck on the making. G4P seems indeed to be a good choice for that.

And if you have any questions, this forum is definitly the best place!