How can I change the colour of a square when it is clicked

onlinebigbird

Hello, I am trying to change the colour of two squares when clicked. I would like to be able to change them independently of eachother. If the square clicked is black I would like it to turn yellow, and vice-versa. Just to mention, my sketchpad is embedded in a webpage, hence the 'processing.'

The coordinates for the top square are: x: 290, x:290+20, y260 and y260+20.

I think I need to insert this line of code somewhere in the function but I'm not sure how to write it correctly.
&& mouseX>290 && mouseX<290+20 && mouseY>260 && mouseY<260+20

The coordinates for the bottom square are: x: 290, x:290+20, y320 and y320+20. && mouseX>290 && mouseX<290+20 && mouseY>320 && mouseY<320+20

Also, I am not sure of the correct syntax for writing the RGB value in teh function. If I put brackets it doesn't work, but if I have no brackets it just changes between white and black.

This is what I have so far:

function doodle (processing) {
      processing.setup = function () {
      processing.size (500, 500);
     processing.background (138, 153, 245)
}

             processing.draw = function () {
            /* top window
     */
     processing.fill (top);
    processing.rect (290, 260, 20, 20);

     /* bottom window
     */
    processing.fill (bottom);   
    processing.rect (290, 320, 20, 20); 

    }

    processing.mouseClicked = function () {
        if 
            (bottom ==0) {
            bottom = (255, 183, 51);
        } else {
            bottom = 0;
        }
    }

            processing.mouseClicked = function () {
        if 
            (top ==0) {
            top = (255, 183, 51);
        } else {
            top = 0;
        }
    }

}

var top = 0; var bottom = 0; var canvas = document.getElementById('sketch'); new Processing (canvas, doodle);

---

thank you!****

GoToLoop

Your posted code is hard to read b/c it's inconsistently indented. :|
Also you're lacking some basic knowledge that you need to acquire before advancing.

I would like to be able to change them independently of each other.

You'll be able to easily pull that out once you learn OOP: Object Oriented Programming.

Since you've chosen JS + p5.js, these videos gonna help ya to get there:
https://Vimeo.com/channels/learningp5js

Also, I am not sure of the correct syntax for writing the RGB value in teh function. If I put brackets it doesn't work, but if I have no brackets it just changes between white and black.

In p5.js we've got many ways to define a color. Check it out color() function:
http://p5js.org/reference/#/p5/color

The color bug is here: bottom = (255, 183, 51); & top = (255, 183, 51);.
After those statements, bottom is 51 & top is 51 too.

You can check it out for yourself by hitting F12 in any browser, going to its "Console" tab and type in those statements there.

In JS, we don't have isolated parentheses. Instead they're always associated w/ functions and some keywords like if (), for (), while (), etc.

A sequence of , operators merely returns the latest evaluated expression.
So in 255, 183, 51, it simply returns 51.
Therefore 51 is the value assigned for both bottom & top.

In p5.js, a simple numeric value is interpreted as some gray scale color.
Instead, use color() function in order to get a proper p5.Color object to be used in fill() & stroke():
bottom = color(255, 183, 51); & top = color(255, 183, 51); :D

onlinebigbird

Hey, thanks so much! I've only just started learning so this Vimeo channel is perfect, just watched the first couple and going to keep going, they're really cool! Your clarification on the colour bit was also very helpful, I went through all the refs like you said and I get it now, thank you. Oh sorry for my messy code! I have tidied it up now so it looks all pristine. Ok...will go learn, try again and report back.. thank you! :D