Hi,
Quick simple question I’m sure but somehow I can’t manage to make it work.
This code below shows a green to red gradient background from bottom left to top right.
How can I make it go from bottom right to top left? (as if rotated 90º).
Thanks
size(400,400);
noStroke();
colorMode(RGB, 400);
for (int x = 0; x < 400; x++) {
for (int y = 0; y < 400; y++) {
stroke(x, y, 0);
point(400-x, 400-y);
}
}
Hi @Erif,
here is something to play around with…
Cheers
— mnse
int mode;
boolean automatic = true;
void setup() {
size(400, 400);
noStroke();
colorMode(RGB, 400);
mode = 0;
}
void keyPressed() {
if (!automatic)
mode = (mode + 1) % 4;
}
void draw() {
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
stroke(x, y, 0);
switch(mode) {
case 0:
point(x, y);
break;
case 1:
point(x, height-y);
break;
case 2:
point(width-x, height-y);
break;
case 3:
point(width-x, y);
break;
}
}
}
if (automatic)
mode = (mode + 1) % 4;
}
Hi @mnse. Thanks a lot! That’s even more than I was expecting 
I can definitely use one of these scenarios.
Cheers
Hello @Erif 
Or change your for-loop to:
for (int x = 400; x > 0; x--) {
for (int y = 0; y < 400; y++) {
stroke(x, y, 0);
point(x, 400-y);
}
Hi @debxyz, yeah I was trying this route before haha but I couldn’t find the right one. That does it too for sure, thanks!!
I can’t mark it as the solution as the platform only allows for one.
Hello @Erif ,
You can also fill() a vertex in a shape.
There is a cool example that comes with Processing in:
File > Examples … > Topics> Geometry > RGBCube
An example I cooked up:
// Gradient Shape
// v1.0.0
// GLV 2022-12-03
void setup()
{
size(800, 400, P2D);
noStroke();
}
void draw()
{
background(0);
colorMode(RGB);
translate(width/4, height/2);
beginShape(QUADS);
fill(0, 255, 255); vertex(-150, 150);
fill(255, 255, 255); vertex( 150, 150);
fill(255, 0, 255); vertex( 150, -150);
fill(0, 0, 255); vertex(-150, -150);
endShape();
translate(width/2, 0);
colorMode(HSB, 360, 100, 100);
beginShape(QUADS);
fill((frameCount+0)%360, 100, 100); vertex(-150, 150);
fill((frameCount+90)%360, 100, 100); vertex( 150, 150);
fill((frameCount+180)%360, 100, 100); vertex( 150, -150);
fill((frameCount+270)%360, 100, 100); vertex(-150, -150);
endShape();
}
:)
This is super cool too @glv! I’ll check them out as they open multiple possibilities.
Thanks a lot 
Hi @glv , following up on your response I tried to insert that inside a PGraphics class. This is to export later a higher resolution image.
The problem I’m encountering is that I can’t obtain the exact same looking gradients on a much larger canvas (I usually replicate the initial example before tweaking it later on).
Next step will be to change the hard coded values to renderWidth/Height fractions so when I modify printWidth/Height variables it scales up/down consistently.
PGraphics render;
int printWidth = 10;
int printHeight = 10;
int printDpi = 320;
int renderWidth = printWidth * printDpi;
int renderHeight = printHeight * printDpi;
void setup() {
size(800, 400, P2D);
render = createGraphics(renderWidth, renderHeight);
}
void draw() {
render.beginDraw();
render.background(0);
render.colorMode(RGB);
render.translate(renderWidth/4, renderHeight/2);
render.beginShape(QUADS);
render.fill(0, 255, 255); render.vertex(-600, 1200);
render.fill(255, 255, 255); render.vertex(600, 1200);
render.fill(255, 0, 255); render.vertex( 600, -1200);
render.fill(0, 0, 255); render.vertex(-600, -1200);
render.endShape();
render.colorMode(HSB, 360, 100, 100);
render.translate(renderWidth/2, 0);
render.beginShape(QUADS);
render.fill((frameCount+0)%360, 100, 100); render.vertex(-600, 1200);
render.fill((frameCount+90)%360, 100, 100); render.vertex(600, 1200);
render.fill((frameCount+180)%360, 100, 100); render.vertex( 600, -1200);
render.fill((frameCount+270)%360, 100, 100); render.vertex(-600, -1200);
render.endShape();
render.endDraw();
image(render,0,0,width,height);
}
Could it be because there are still 255 color values and now the canvas is much larger? So they gradient gets altered. Perhaps increasing the colorMode() range proportionally would do the trick?
Yes, An example of that can be seen here using the bouncing gradient example from HAPPY CODING site:
//scroll down to setup to see the 2 lines where code changed to increase range
float redX;
float redY;
float redXSpeed;
float redYSpeed;
float greenX;
float greenY;
float greenXSpeed;
float greenYSpeed;
float blueX;
float blueY;
float blueXSpeed;
float blueYSpeed;
void setup() {
size(256, 256); // ORIGINAL LINE
size(400, 400); // NEW LINE
colorMode(RGB, 400); // increase the range to match the new width, the gradation now fills the screen at larger size
noSmooth();
redX = random(width);
redY = random(height);
redXSpeed = random(-1, 1);
redYSpeed = random(-1, 1);
greenX = random(width);
greenY = random(height);
greenXSpeed = random(-1, 1);
greenYSpeed = random(-1, 1);
blueX = random(width);
blueY = random(height);
blueXSpeed = random(-1, 1);
blueYSpeed = random(-1, 1);
}
void draw() {
redX += redXSpeed;
redY += redYSpeed;
if (redX < 0 || redX > width) {
redXSpeed *= -1;
}
if (redY < 0 || redY > height) {
redYSpeed *= -1;
}
greenX += greenXSpeed;
greenY += greenYSpeed;
if (greenX < 0 || greenX > width) {
greenXSpeed *= -1;
}
if (greenY < 0 || greenY > height) {
greenYSpeed *= -1;
}
blueX += blueXSpeed;
blueY += blueYSpeed;
if (blueX < 0 || blueX > width) {
blueXSpeed *= -1;
}
if (blueY < 0 || blueY > height) {
blueYSpeed *= -1;
}
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float redDistance = dist(x, y, redX, redY);
float greenDistance = dist(x, y, greenX, greenY);
float blueDistance = dist(x, y, blueX, blueY);
stroke(redDistance, greenDistance, blueDistance);
point(x, y);
}
}
}
Though I think your code instance is more complex and so this will not be a solution as is.
Thanks for pointing that out @debxyz , actually the corner gradient from Happy Coding is a closer example to what I was looking for 
Bang on! @glv. It worked like a charm Thanks heaps.
