Witam,
próbuję coś robić w JS korzystając z biblioteki P5. Mam kanwę o rozmiarach 800px x 600px. Przedzieliłem ją na pół dwoma prostokątami. Chciałbym 1 i 2 prostokąt wypełnić dwoma różnymi gradientami (określonymi kolorystycznie przeze mnie). W necie znalazłem pewną funkcję, ale ona nie wypełnia 1 i 2 prostokąta. Wypełnia kanwę w zależności jakie się poda parametry, m.in. dot. for-a. Ogólnie są dwie funkcje o dwóch trochę różnych parametrach. Jednak zrozumiałem, że ten gradient "nie przykleja" się do prostokąta. On po prostu działa sobie niezależnie od tych rect.
fill(setGradient1(c1, c2)); - myślałem, że tak można wywołać funkcję i wypełnić wynikiem działania tej funkcji prostokąt, ale chyba tak to nie działa :(
Być może jest jakieś prostsze rozwiązanie, by wypełnić prostokąt 1 i 2 gradientem..?
Czy mógłby ktoś z Was napisać mi jak to zrobić? Podać kod itp? Z góry serdecznie dziękuję.
PLIK INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="p5.js"></script>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
PLIK SCRIPT.JS
var c1, c2;
var c3, c4;
function setup()
{
createCanvas(800, 600);
background(255);
//noStroke();
c2 = color(42, 116, 227);
c1 = color(255);
c3 = color(255);
c4 = color(255, 0, 0);
}
function draw()
{
fill(setGradient1(c1, c2));
rect(0, 0, width, height / 2); //górny prostokąt
fill(setGradient2(c3, c4));
rect(0, 350, width, height); //dolny prostokąt
}
function setGradient1(c1, c2)
{
// noprotect
//noFill();
for (var y = 0; y < height / 2; y++)
{
var inter = map(y, 0, height / 2, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, y, width, y);
}
}
function setGradient2(c3, c4)
{
// noprotect
noFill();
for (var y = 300; y < 600; y++)
{
var inter = map(y, 0, height, 0, 1);
var c = lerpColor(c3, c4, inter);
stroke(c);
line(0, y, width, y);
}
}