I've copied and pasted the code i have for this project at the end of this question. the coding website is p$5.$js:$)$

$1.$ how do i fix it so that when the mouse is pressed above the y axis midline $(0\mathrm{.}5*$width$,$ or $250),$ only the stars are drawn, and when the mouse is pressed below the y axis midline, only the grass is drawn? i$\text{'}$m pretty sure this involves an if and $\}$else$\{$ statement, but nothing that i put has worked.

$2.$ how do i fix it so grass isnt drawn on top of the fox and stars arent drawn on top of the moon when the mouse is pressed? if an ellipse were to be drawn around the fox, it would be approximately ellipse$(355,370,100,170).$ The moon is drawn at $(100,100,80).$

i really am awful with computers so i REALLY need the help, thx$!!$

the entire code is currently:

let stars $=[]$;

let grassBlades $=[]$;

function setup$()\{$

createCanvas$(500,500)$;

$\}$

function draw$()\{$

background$(0,0,128)$;

fill$(0,100,0)$

rect$(0,250,500)$

fill$(255,204,0)$

circle$(100,100,80)$

$//$fox head and face

strokeWeight$(0)$

fill$(255,100,0)$

ellipse$(355,325,60,75)$

fill$(255)$

ellipse$(345,310,7,9)$

ellipse$(365,310,7,9)$

strokeWeight$(5)$

stroke$(0)$

point$(345,313)$

point$(365,313)$

$//$right fox ear

strokeWeight$(2)$

stroke$(255,100,0)$

fill$(255)$

triangle$(362,290,374,295,372,275)$

strokeWeight$(0)$

fill$(0)$

triangle$(364,289,372,295,370,283)$

$//$left fox ear

strokeWeight$(2)$

stroke$(255,100,0)$

fill$(255)$

triangle$(353,290,337,294,340,275)$

strokeWeight$(0)$

fill$(0)$

triangle$(350,290,340,294,341,283)$

$//$fox body

strokeWeight$(0)$

fill$(255,100,0)$

ellipse$(355,375,83,95)$

fill$(255)$

ellipse$(355,383,63,72)$

$//$fox paws

strokeWeight$(14)$

stroke$(0)$

point$(337,418)$

point$(378,418)$

drawStars$()$;

drawGrass$()$;

$\}$

$//$ Function to draw stars

function drawStars$()\{$

fill$(255,255,0)$; $//$ Yellow stars

noStroke$()$;

for $($let i $=0$; i $$ stars.length; i$++)\{$

let star $=$ stars$[$i$]$;

let distance $=$ abs$($star$.$y $-$ height $/2)$; $//$ Distance from horizon $($middle of canvas$)$

let size $=$ map$($distance$,0,$ height $/2,1,10)$; $//$ Size scales based on distance

ellipse$($star$.$x$,$ star.y$,$ size, size$)$;

$\}$

$\}$

$//$ Function to draw grass blades

function drawGrass$()\{$

fill$(34,139,34)$; $//$ Green grass

noStroke$()$;

for $($let i $=0$; i $$ grassBlades.length; i$++)\{$

let blade $=$ grassBlades$[$i$]$;

let distance $=$ abs$($blade$.$y $-$ height $/2)$; $//$ Distance from horizon

let size $=$ map$($distance$,0,$ height $/2,1,20)$; $//$ Size scales based on distance

rect$($blade$.$x$,$ blade.y$,2,$ size$)$; $//$ Drawing grass as simple rectangles

$\}$

$\}$

function mousePressed$()\{$

let numStars $=$ int$($random$(5,10))$; $//$ Random number of stars between

let numBlades $=$ int$($random$(5,10))$; $//$ Random number of grass blades

$//$ Adding stars in the upper half of the canvas

for $($let i $=0$; i $$ numStars; i$++)\{$

let x $=$ random$(0,$ width$)$;

let y $=$ random$(0,$ height $/2)$; $//$ Stars only in the upper half

stars.push$(\{$ x: x$,$ y: y $\})$;

$\}$

$//$ Adding grass blades in the lower half of the canvas

for $($let i $=0$; i $$ numBlades; i$++)\{$

let x $=$ random$(0,$ width$)$;

let y $=$ random$($height $/2,$ height$)$; $//$ Grass only in the lower half

grassBlades.push$(\{$ x: x$,$ y: y $\})$;

$\}$

$\}$

$//$ Function to clear the canvas when $\text{'}$r$\text{'}$ key is pressed

function keyPressed$()\{$

if $($key $===\text{'}$r$\text{'}||$ key $===\text{'}$R$\text{'})\{$

stars $=[]$; $//$ Clear all stars

grassBlades $=[]$; $//$ Clear all grass blades

$\}$

$\}$