# Processing 2.2.1

**URL:** <https://discourse.processing.org/t/processing-2-2-1/2545>\
**Category:** Coding Questions\
**Created:** [August 11, 2018, 1:36am UTC](https://discourse.processing.org/t/processing-2-2-1/2545 "2018-08-11T01:36:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sun](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@Sun](https://discourse.processing.org/u/Sun)\
**Post date:** [August 11, 2018, 1:36am UTC](https://discourse.processing.org/t/processing-2-2-1/2545/1 "2018-08-11T01:36:15Z")

</div>

Hello,

A couple of years ago I made a clock in Processing 2.2.1.  
I want to upload my clock in my WordPress website. That isn’t possible, because of the latest new version 3.4. I get errors. I’ve no clue what I have to change to set the code right.

Can someone check the code?

Thank you.

String str1;  
float x;  
float y;

void setup () {  
size (600,600);  
smooth() ;  
noStroke() ;

}

void draw () {  
background(0);  
int s = second(); // Values from 0 - 59  
int m = minute(); // Values from 0 - 59  
int h = hour(); // Values from 0 - 23

//Blokjes  
fill(255,255,255);  
rect(0,0,60,60); //eerste rij naar beneden blokjes 0  
rect(0,120,60,60); //12  
rect(0,240,60,60);//24  
rect(0,360,60,60);//36  
rect(0,480,60,60);//48

rect (60,60,60,60); //tweede rij blokjes  
rect (60,180,60,60);  
rect (60,300,60,60);  
rect (60,420,60,60);  
rect (60,540,60,60);

rect (120,0,60,60); //derde rij blokjes  
rect (120,120,60,60);  
rect (120,240,60,60);  
rect (120,360,60,60);  
rect (120,480,60,60);

rect (240,0,60,60); //vijfde rij blokjes  
rect (240,120,60,60);  
rect (240,240,60,60);  
rect (240,360,60,60);  
rect (240,480,60,60);

rect (180,60,60,60); //vierde rij blokjes  
rect (180,180,60,60);  
rect (180, 300, 60,60);  
rect (180, 420, 60,60);  
rect (180, 540, 60,60);

rect (300,60,60,60); // zesde rij blokjes  
rect (300,180,60,60);  
rect (300,300,60,60);  
rect (300,420,60,60);  
rect (300,540,60,60);

//lijntjes  
rect (370,0,10,600);  
rect (390,0,10,600);  
rect (410,0,10,600);  
rect (430,0,10,600);  
rect (450,0,10,600);  
rect (470,0,10,600);  
rect (490,0,10,600);  
rect (510,0,10,600);  
rect (530,0,10,600);  
rect (550,0,10,600);  
rect (570,0,10,600);  
rect (590,0,10,600);

//secondeteller  
fill(0,0,255);  
rect(0,360,600,s);

//als het 0 uur is, wordt de urenteller rood  
if (h \> -1) { if (h \< 1) {fill (255,0,0);rect (360,0,10,600); }}  
//als het 1 uur is, wordt de urenteller rood  
if (h \>0) {if (h \<2) { fill (255,0,0); rect (370,0,10,600);}}  
//als het 2 uur is, wordt de urenteller rood  
if (h \>1) {if (h \<3) { fill (255,0,0); rect (380,0,10,600);}}  
//als het 3 uur is, wordt de urenteller rood  
if (h \>2) {if (h \<4) { fill (255,0,0); rect (390,0,10,600);}}  
//als het 4 uur is, wordt de urenteller rood  
if (h \>3) {if (h \<5) { fill (255,0,0); rect (400,0,10,600);}}  
//als het 5 uur is, wordt de urenteller rood  
if (h \>4) {if (h \<6) { fill (255,0,0); rect (410,0,10,600);}}  
//als het 6 uur is, wordt de urenteller rood  
if (h \>5) {if (h \<7) { fill (255,0,0); rect (420,0,10,600);}}  
//als het 7 uur is, wordt de urenteller rood  
if (h \>6) {if (h \<8) { fill (255,0,0); rect (430,0,10,600);}}  
//als het 8 uur is, wordt de urenteller rood  
if (h \>7) {if (h \<9) { fill (255,0,0); rect (440,0,10,600);}}  
//als het 9 uur is, wordt de urenteller rood  
if (h\>8){if (h \< 10) { fill(255,0,0);rect (450,0,10,600); }}  
//als het 10 uur is, wordt de urenteller rood  
if (h\>9){if (h\<11) { fill(255,0,0); rect (460,0,10,600);}}  
//als het 11 uur is, wordt de urenteller rood  
if (h \>10) {if (h \<12) { fill (255,0,0); rect (470,0,10,600);}}  
//als het 12 uur is, wordt de urenteller rood  
if (h \>11) {if (h \<13) { fill (255,0,0); rect (480,0,10,600);}}  
//als het 13uur is, wordt de urenteller rood  
if (h \>12) {if (h \<14) { fill (255,0,0); rect (490,0,10,600);}}  
//als het 14uur is, wordt de urenteller rood  
if (h \>13) {if (h \<15) { fill (255,0,0); rect (500,0,10,600);}}  
//als het 15uur is, wordt de urenteller rood  
if (h \>14) {if (h \<16) { fill (255,0,0); rect (510,0,10,600);}}  
//als het 16uur is, wordt de urenteller rood  
if (h \>15) {if (h \<17) { fill (255,0,0); rect (520,0,10,600);}}  
//als het 17 uur is, wordt de urenteller rood  
if (h \>16) {if (h \<18) { fill (255,0,0); rect (530,0,10,600);}}  
//als het 18 uur is, wordt de urenteller rood  
if (h \>17) {if (h \<19) { fill (255,0,0); rect (540,0,10,600);}}  
//als het 19 uur is, wordt de urenteller rood  
if (h \>18) {if (h \<20) { fill (255,0,0); rect (550,0,10,600);}}  
//als het 20 uur is, wordt de urenteller rood  
if (h \>19) {if (h \<21) { fill (255,0,0); rect (560,0,10,600);}}  
//als het 21 uur is, wordt de urenteller rood  
if (h \>20) {if (h \<22) { fill (255,0,0); rect (570,0,10,600);}}  
//als het 22uur is, wordt de urenteller rood  
if (h \>21) {if (h \<23) { fill (255,0,0); rect (580,0,10,600);}}  
//als het 23 uur is, wordt de urenteller rood  
if (h \>22) {if (h \<24) { fill (255,0,0); rect (590,0,10,600);}}

//MINUTEN

//0ste minuut = geel  
if (m\>-1){ if (m\<1) {fill(255,255,0);rect(0,0,60,60);}}  
//1ste minuut = geel  
if (m\>0){ if (m\<2) {fill(255,255,0);rect(60,0,60,60);}}  
//2ste minuut = geel  
if (m\>1){ if (m\<3) {fill(255,255,0);rect(120,0,60,60);}}  
//3ste minuut = geel  
if (m\>2){ if (m\<4) {fill(255,255,0);rect(180,0,60,60);}}  
//4ste minuut = geel  
if (m\>3){ if (m\<5) {fill(255,255,0);rect(240,0,60,60);}}  
//5ste minuut = geel  
if (m\>4){ if (m\<6) {fill(255,255,0);rect(300,0,60,60);}}  
//6ste minuut = geel  
if (m\>5){ if (m\<7) {fill(255,255,0);rect(0,60,60,60);}}  
//7ste minuut = geel  
if (m\>6){ if (m\<8) {fill(255,255,0);rect(60,60,60,60);}}  
//8ste minuut = geel  
if (m\>7){ if (m\<9) {fill(255,255,0);rect(120,60,60,60);}}  
//9ste minuut = geel  
if (m\>8){ if (m\<10) {fill(255,255,0);rect(180,60,60,60);}}  
//10ste minuut = geel  
if (m\>9){ if (m\<11) {fill(255,255,0);rect(240,120,60,60);}}  
//11ste minuut = geel  
if (m\>10){ if (m\<12) {fill(255,255,0);rect(300,120,60,60);}}  
//12ste minuut = geel  
if (m\>11){ if (m\<13) {fill(255,255,0);rect(0,120,60,60);}}  
//13ste minuut = geel  
if (m\>12){ if (m\<14) {fill(255,255,0);rect(60,120,60,60);}}  
//14ste minuut = geel  
if (m\>13){ if (m\<15) {fill(255,255,0);rect(120,120,60,60);}}  
//15ste minuut = geel  
if (m\>14){ if (m\<16) {fill(255,255,0);rect(180,120,60,60);}}  
//16ste minuut = geel  
if (m\>15){ if (m\<17) {fill(255,255,0);rect(240,120,60,60);}}  
//17ste minuut = geel  
if (m\>16){ if (m\<18) {fill(255,255,0);rect(300,120,60,60);}}  
//18ste minuut = geel  
if (m\>17){ if (m\<19) {fill(255,255,0);rect(0,180,60,60);}}  
//19ste minuut = geel  
if (m\>18){ if (m\<20) {fill(255,255,0);rect(60,180,60,60);}}  
//20ste minuut = geel  
if (m\>19){ if (m\<21) {fill(255,255,0);rect(120,180,60,60);}}  
//21ste minuut = geel  
if (m\>20){ if (m\<22) {fill(255,255,0);rect(180,180,60,60);}}  
//22ste minuut = geel  
if (m\>21){ if (m\<23) {fill(255,255,0);rect(240,180,60,60);}}  
//23ste minuut = geel  
if (m\>22){ if (m\<24) {fill(255,255,0);rect(300,180,60,60);}}  
//24ste minuut = geel  
if (m\>23){ if (m\<25) {fill(255,255,0);rect(0,240,60,60);}}  
//25ste minuut = geel  
if (m\>24){ if (m\<26) {fill(255,255,0);rect(60,240,60,60);}}  
//26ste minuut = geel  
if (m\>25){ if (m\<27) {fill(255,255,0);rect(120,240,60,60);}}  
//27ste minuut = geel  
if (m\>26){ if (m\<28) {fill(255,255,0);rect(180,240,60,60);}}  
//28ste minuut = geel  
if (m\>27){ if (m\<29) {fill(255,255,0);rect(240,240,60,60);}}  
//29ste minuut = geel  
if (m\>28){ if (m\<30) {fill(255,255,0);rect(300,240,60,60);}}  
//30ste minuut = geel  
if (m\>29){ if (m\<31) {fill(255,255,0);rect(0,300,60,60);}}  
//31ste minuut = geel  
if (m\>30){ if (m\<32) {fill(255,255,0);rect(60,300,60,60);}}  
//32ste minuut = geel  
if (m\>31){ if (m\<33) {fill(255,255,0);rect(120,300,60,60);}}  
//33ste minuut = geel  
if (m\>32){ if (m\<34) {fill(255,255,0);rect(180,300,60,60);}}  
//34ste minuut = geel  
if (m\>33){ if (m\<35) {fill(255,255,0);rect(240,300,60,60);}}  
//35ste minuut = geel  
if (m\>34){ if (m\<36) {fill(255,255,0);rect(300,300,60,60);}}  
//36ste minuut = geel  
if (m\>35){ if (m\<37) {fill(255,255,0);rect(0,360,60,60);}}  
//37ste minuut = geel  
if (m\>36){ if (m\<38) {fill(255,255,0);rect(60,360,60,60);}}  
//38ste minuut = geel  
if (m\>37){ if (m\<39) {fill(255,255,0);rect(120,360,60,60);}}  
//39ste minuut = geel  
if (m\>38){ if (m\<40) {fill(255,255,0);rect(180,360,60,60);}}

//40ste minuut = geel  
if (m\>39){  
if (m\<41) {  
fill(255,255,0);  
rect(240, 360,60,60);  
}  
}

//41ste minuut = geel  
if (m\>40){ if (m\<42) {fill(255,255,0);rect(300,360,60,60);}}

//42ste minuut = geel  
if (m\>41){  
if (m\<43) {  
fill(255,255,0);  
rect(0,420,60,60);  
}}

//43ste minuut = geel  
if (m\>42){  
if (m\<44) {  
fill(255,255,0);  
rect(60,420,60,60);  
}}

//44ste minuut = geel  
if (m\>43){  
if (m\<45) {  
fill(255,255,0);  
rect(120,420,60,60);  
}}

//45ste minuut = geel  
if (m\>44){  
if (m\<46) {  
fill(255,255,0);  
rect(180,420,60,60);  
}}

//46ste minuut = geel  
if (m\>45){  
if (m\<47) {  
fill(255,255,0);  
rect(240,420,60,60);  
}}

//47ste minuut = geel  
if (m\>46){  
if (m\<48) {  
fill(255,255,0);  
rect(300,420,60,60);  
}}

//48ste minuut = geel  
if (m\>47){  
if (m\<49) {  
fill(255,255,0);  
rect(0,480,60,60);  
}}

//49ste minuut = geel  
if (m\>48){  
if (m\<50) {  
fill(255,255,0);  
rect(60,480,60,60);  
}}

//50ste minuut = geel  
if (m\>49){  
if (m\<51) {  
fill(255,255,0);  
rect(120,480,60,60);  
}}

//51ste minuut = geel  
if (m\>50){  
if (m\<52) {  
fill(255,255,0);  
rect(180,480,60,60);  
}}

//52ste minuut = geel  
if (m\>51){  
if (m\<53) {  
fill(255,255,0);  
rect(240,480,60,60);  
}}

//53ste minuut = geel  
if (m\>52){  
if (m\<54) {  
fill(255,255,0);  
rect(300,480,60,60);  
}}

//54ste minuut = geel  
if (m\>53){  
if (m\<55) {  
fill(255,255,0);  
rect(0,540,60,60);  
}}

//55ste minuut = geel  
if (m\>54){  
if (m\<56) {  
fill(255,255,0);  
rect(60,540,60,60);  
}}

//56ste minuut = geel  
if (m\>55){  
if (m\<57) {  
fill(255,255,0);  
rect(120,540,60,60);  
}}

//57ste minuut = geel  
if (m\>56){  
if (m\<58) {  
fill(255,255,0);  
rect(180,540,60,60);  
}}

//58ste minuut = geel  
if (m\>57){  
if (m\<59) {  
fill(255,255,0);  
rect(240,540,60,60);  
}}

//59ste minuut = geel  
if (m\>58){  
if (m\<60) {  
fill(255,255,0);  
rect(300,540,60,60);  
}}

str1 = h +":"+ m +":"+ s ;

fill(255);  
text(str1, x, y);

if( mousePressed) {  
textSize(random(10,200));  
x = random(-200,500);  
y = random(-200,500);  
}  
}

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 11, 2018, 3:32am UTC](https://discourse.processing.org/t/processing-2-2-1/2545/2 "2018-08-11T03:32:43Z")

</div>

If you had posted the code for it here, we might have been able to tell you what needs changing.

---

<div class="post-metadata">

**Author:** ![iamtomodea](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/iamtomodea/32/1054_2.png) [@iamtomodea](https://discourse.processing.org/u/iamtomodea)\
**Post date:** [August 11, 2018, 4:51pm UTC](https://discourse.processing.org/t/processing-2-2-1/2545/3 "2018-08-11T16:51:20Z")

</div>

It runs fine on 3.4 as far as I can see.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 11, 2018, 6:28pm UTC](https://discourse.processing.org/t/processing-2-2-1/2545/4 "2018-08-11T18:28:39Z")

</div>

### _Please format your code_ 😊

It consist on these two steps:

1. In your code editor (PDE, VS code, Eclipse, etc) ensure you execute the beautifier function. This function automatically indents your code. Auto-indenting makes your code easier to read and helps catching bugs due to mismatch parenthesis, for instance. In the PDE, you use the key combination: `ctrl+t`
2. You copy and paste your code in the forum. Then you select the code and you hit the formatting button aka. the button with this symbol: `</>`

That’s it! Please notice you do not create a new post in case you need to format something you already posted. You can edit your post, copy the code to the PDE, indent the code properly there and then past it back here, format the code and \>\> **save** \<\< the edits.

## Extra info:

Formatting your code makes everybody’s life easier, your code looks much better plus it ensures your code integrity is not affected by the forum’s formatting (Do you know the forum processes markup code?) Please visit the sticky posts or the FAQ section/post to learn about this, other advantages and super powers you can get in this brand new forum.

Kf