# Display Basics program

**URL:** <https://discourse.processing.org/t/display-basics-program/21808>\
**Category:** Coding Questions\
**Created:** [June 12, 2020, 2:30pm UTC](https://discourse.processing.org/t/display-basics-program/21808 "2020-06-12T14:30:17Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![mike\_z](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mike\_z](https://discourse.processing.org/u/mike_z)\
**Post date:** [June 12, 2020, 2:30pm UTC](https://discourse.processing.org/t/display-basics-program/21808/1 "2020-06-12T14:30:17Z")

</div>

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

```auto
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);

}

```

---

<div class="post-metadata">

**Author:** ![PhilHaw](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philhaw/32/8221_2.png) [@PhilHaw](https://discourse.processing.org/u/PhilHaw)\
**Post date:** [June 12, 2020, 2:36pm UTC](https://discourse.processing.org/t/display-basics-program/21808/2 "2020-06-12T14:36:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mike\_z](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mike\_z](https://discourse.processing.org/u/mike_z)\
**Post date:** [June 12, 2020, 2:41pm UTC](https://discourse.processing.org/t/display-basics-program/21808/3 "2020-06-12T14:41:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PhilHaw](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philhaw/32/8221_2.png) [@PhilHaw](https://discourse.processing.org/u/PhilHaw)\
**Post date:** [June 12, 2020, 2:59pm UTC](https://discourse.processing.org/t/display-basics-program/21808/4 "2020-06-12T14:59:39Z")

</div>

I would suggest you have a look at the “Bounce” example sketch and start from that. (Look under File \> Examples in Processing).

---

<div class="post-metadata">

**Author:** ![mike\_z](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mike\_z](https://discourse.processing.org/u/mike_z)\
**Post date:** [June 12, 2020, 3:04pm UTC](https://discourse.processing.org/t/display-basics-program/21808/5 "2020-06-12T15:04:40Z")

</div>

Thanks I’ll give it try. Mike

---

<div class="post-metadata">

**Author:** ![PhilHaw](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philhaw/32/8221_2.png) [@PhilHaw](https://discourse.processing.org/u/PhilHaw)\
**Post date:** [June 12, 2020, 3:08pm UTC](https://discourse.processing.org/t/display-basics-program/21808/6 "2020-06-12T15:08:19Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![mike\_z](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mike\_z](https://discourse.processing.org/u/mike_z)\
**Post date:** [June 12, 2020, 4:37pm UTC](https://discourse.processing.org/t/display-basics-program/21808/7 "2020-06-12T16:37:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PhilHaw](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philhaw/32/8221_2.png) [@PhilHaw](https://discourse.processing.org/u/PhilHaw)\
**Post date:** [June 12, 2020, 4:57pm UTC](https://discourse.processing.org/t/display-basics-program/21808/8 "2020-06-12T16:57:00Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7fa0622506df1d3344dfeb3a04a63257f4c7f03e.png)

---

<div class="post-metadata">

**Author:** ![mike\_z](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mike\_z](https://discourse.processing.org/u/mike_z)\
**Post date:** [June 12, 2020, 5:41pm UTC](https://discourse.processing.org/t/display-basics-program/21808/9 "2020-06-12T17:41:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [June 12, 2020, 7:53pm UTC](https://discourse.processing.org/t/display-basics-program/21808/10 "2020-06-12T19:53:16Z")

</div>

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:

```auto
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); 
  }
}

```

---

<div class="post-metadata">

**Author:** ![mike\_z](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mike\_z](https://discourse.processing.org/u/mike_z)\
**Post date:** [June 12, 2020, 8:57pm UTC](https://discourse.processing.org/t/display-basics-program/21808/11 "2020-06-12T20:57:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [June 12, 2020, 9:46pm UTC](https://discourse.processing.org/t/display-basics-program/21808/12 "2020-06-12T21:46:38Z")

</div>

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

You have a [tutorial section](https://processing.org/tutorials/) that goes through the basics and the [reference page](https://processing.org/reference/) provides a lot of information.

---

<div class="post-metadata">

**Author:** ![mike\_z](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mike\_z](https://discourse.processing.org/u/mike_z)\
**Post date:** [June 12, 2020, 11:17pm UTC](https://discourse.processing.org/t/display-basics-program/21808/13 "2020-06-12T23:17:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [June 13, 2020, 11:30am UTC](https://discourse.processing.org/t/display-basics-program/21808/14 "2020-06-13T11:30:16Z")

</div>

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!