homework04_greta

c1 = color(70, 160, 500)
c2 = color (200, 200, 255)

def setup():
    size(600, 600)
    stroke(155, 155, 255, 50)
    frameRate(24)
    global c1
    global c2

def draw():
    size(600, 600)
    
    lerpColor(c1, c2, .5)
    rect(0,0, 600, 317)

    
    fill(209)
    circleM = map(mouseY, 0, width-pmouseX, width-pmouseY,0)
    circle(120, circleM, 65)
  
    fill(255, 150, 0)
    circleS = map(mouseY, 0, width, width,0)
    circle(450, circleS, 65)
    
    photo = loadImage("Valley-Taurus-Mountains-Turkey.jpg")
    image(photo, 0, 315)

Hi Greta.

For lerpColor():

What you have here is a great start. One thing to understand is that lerpColor() does not actually set the color, in the way that for example fill() does. Rather, it creates a color that you can then use. So to start, modify line 14 and the following line below:

    c = lerpColor(c1, c2, .5)
    fill(c)

I used c here but that is just a variable name I made up. I could have said spaghetti. That code takes a color that lerpColor() calculates, and passes it in to fill().

OK, but if you run that, still nothing is changing. That is because .5 is a hard-coded value here. That is fine – sometimes one may actually want to use lerpColor() in this way. But I'm guessing that what you're trying to do is make this dynamic & interactive. In that case, what you need to do is replace .5 with a variable. But what? You could use mouseX, but that might generate an error since mouseX can get larger than what lerpColor() is able to use. If you check the docs, you'll remember that lerpColor() needs a third parameter that is between 0 and 1. To get that, you can use map(). Try adding this:

    n = map(mouseX,0,width,0,1)
    c = lerpColor(c1, c2, n)
    fill(c)

I am taking mouseX, whose min and max values are 0 and width respectively, and mapping that into the range of 0 to 1. Notice that I've changed the third parameter to lerpColor() now to a variable. And again, n is not a special keyword, just a name I made up. Put all that together and I think you'll see the result you're looking for.

For map()

As for your second question, I'm not sure I understand what you're asking. When I run this code, the circles do look to be moving in opposite directions to the mouse. Is that not what you are trying to achieve? Remember that you can always swap the fourth and fifth arguments to map() to invert the relationship – if it was moving with then it would move opposite, or if moving opposite then it would move with. Maybe try that a couple times to get a feel for it?

Feel free to reply here if you're still stuck.

I was trying to have only one circle go opposite to the mouse, but it seems like they are both going opposite.

I see. So then try reversing the order of the fourth and fifth arguments to map().

In other words, on line 23 for example you could change it to this:

  circleS = map(mouseY, 0, width, 0, width)

Although then map() is doing nothing and you could just use mouseY instead of circleS, and delete that map command altogether.

Ohhhh, thank you so much, yes that was a very obvious solution. Thank you Rory!

👍