From 122def0c23b3cc10108beb328707f5ca10419efd Mon Sep 17 00:00:00 2001 From: Steve Mutuura Date: Fri, 26 Jul 2024 21:55:28 +0300 Subject: [PATCH 1/7] Built a nice border --- src/processing/sketches/Main.java | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/processing/sketches/Main.java b/src/processing/sketches/Main.java index b3bf393..d4dc47b 100644 --- a/src/processing/sketches/Main.java +++ b/src/processing/sketches/Main.java @@ -44,7 +44,17 @@ public void drawSamples() { * Draw a few rectangles, each with different colors at different parts of the screen. */ public void drawRectangles() { - + //Choose a color with fill + fill(200.0f, 88.0f, 30.0f); + + //Draw a rectangle. + rect(0, 0, width, height); + + //Choose a color for second rectangle with fill + fill(700.0f, 120.0f, 70.0f); + + //Draws second rectangle + rect(25, 25, width - 50, height -50); } /** From 4622eb5869a17139d05f8fcb6310ca61fb2c4429 Mon Sep 17 00:00:00 2001 From: Steve Mutuura Date: Sat, 27 Jul 2024 00:27:57 +0300 Subject: [PATCH 2/7] Added a circle touching the sides of the smaller square --- src/processing/sketches/Main.java | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/processing/sketches/Main.java b/src/processing/sketches/Main.java index d4dc47b..1d6f6b0 100644 --- a/src/processing/sketches/Main.java +++ b/src/processing/sketches/Main.java @@ -61,6 +61,11 @@ public void drawRectangles() { * Draw a few ellipses, each with different colors at different parts of the screen. */ public void drawEllipses() { + //Choose a color with fill + fill(100.0f, 150.0f, 80.0f); + + //Draw an ellipse + ellipse(width / 2, height / 2, width-50, height-50); } From a382e9208eec0a67a22f2346a75ba795e7c7976d Mon Sep 17 00:00:00 2001 From: Steve Mutuura Date: Sat, 27 Jul 2024 03:39:57 +0300 Subject: [PATCH 3/7] Added a circle with a rotating square inside it --- src/processing/sketches/Main.java | 50 +++++++++++++++++++++++++------ 1 file changed, 41 insertions(+), 9 deletions(-) diff --git a/src/processing/sketches/Main.java b/src/processing/sketches/Main.java index 1d6f6b0..265f453 100644 --- a/src/processing/sketches/Main.java +++ b/src/processing/sketches/Main.java @@ -4,6 +4,9 @@ public class Main extends PApplet { + float angle = 0; + float squareSize; + public void settings() { size(600, 600); } @@ -12,21 +15,50 @@ public void setup() { // Sets the color mode to HSB, 360 being the max Hue, // 100 the max Saturation, and 100 the max Brightness colorMode(HSB, 360, 100, 100); + squareSize = (width - 50) * sqrt(2) / 2; + rectMode(CENTER); } public void draw() { // Recreates the background to be black each 'draw' background(0, 0, 0); - // Look at the code in this method for some sample uses of rect and ellipse - drawSamples(); - // Create a branch to allow you to work on the new feature of rectangles drawRectangles(); // Create a branch to allow you to work on the new feature of ellipses - drawEllipses(); + drawGreenCircle(); + + // Look at the code in this method for some sample uses of rect and ellipse + //drawSamples(); + + //Add the rotating square inside the existing circle + drawRotatingSquare(); + } + + /** + * Draw a rotating square that touches the sides of the existing ellipse + * which itself touches the sides of the inner square. + */ + public void drawRotatingSquare() { + //Calculate the rotating angle + angle += radians(1); + + //Push and pop matrix to isolate transformation + pushMatrix(); + + //Translate to the center of the circle + translate(width / 2, height / 2); + + //Rotate by the current angle + rotate(angle); + + //Draw the square + stroke(0, 0, 100); + fill(70.0f, 80.0f, 80.0F); + rect(0, 0, squareSize, squareSize); + popMatrix(); } public void drawSamples() { @@ -45,22 +77,22 @@ public void drawSamples() { */ public void drawRectangles() { //Choose a color with fill - fill(200.0f, 88.0f, 30.0f); + fill(20.0f, 88.0f, 30.0f); //Draw a rectangle. - rect(0, 0, width, height); + rect(0, 0, 600, 600); //Choose a color for second rectangle with fill - fill(700.0f, 120.0f, 70.0f); + fill(650.0f, 100.0f, 100.0f); //Draws second rectangle - rect(25, 25, width - 50, height -50); + rect(25, 25, width -50 , width - 50); } /** * Draw a few ellipses, each with different colors at different parts of the screen. */ - public void drawEllipses() { + public void drawGreenCircle() { //Choose a color with fill fill(100.0f, 150.0f, 80.0f); From fe10af7741b537696a4d987834a2ca1494fc4efb Mon Sep 17 00:00:00 2001 From: Steve Mutuura Date: Sat, 27 Jul 2024 10:53:06 +0300 Subject: [PATCH 4/7] Implemented a completely new mandala with processing --- src/processing/sketches/Main.java | 84 +++++++++++++++++++++---------- 1 file changed, 57 insertions(+), 27 deletions(-) diff --git a/src/processing/sketches/Main.java b/src/processing/sketches/Main.java index 265f453..7fd1dbd 100644 --- a/src/processing/sketches/Main.java +++ b/src/processing/sketches/Main.java @@ -5,7 +5,10 @@ public class Main extends PApplet { float angle = 0; + float reverseAngle = 0; float squareSize; + float circleSize; + float innerSquareSize; public void settings() { size(600, 600); @@ -16,24 +19,29 @@ public void setup() { // 100 the max Saturation, and 100 the max Brightness colorMode(HSB, 360, 100, 100); squareSize = (width - 50) * sqrt(2) / 2; + circleSize = squareSize; + innerSquareSize = circleSize * sqrt(2) / 2; rectMode(CENTER); } public void draw() { // Recreates the background to be black each 'draw' - background(0, 0, 0); + background(93, 0, 0); - // Create a branch to allow you to work on the new feature of rectangles + //Look at the code in this method for some sample uses of rect and ellipse drawRectangles(); // Create a branch to allow you to work on the new feature of ellipses drawGreenCircle(); - // Look at the code in this method for some sample uses of rect and ellipse - //drawSamples(); - //Add the rotating square inside the existing circle drawRotatingSquare(); + + // Draw the navy blue circle inside the rotating square + drawWhiteStripe(); + + // Draw the reverse rotating blue square inside the white stripe + drawReverseRotatingBlueSquare(); } /** @@ -54,39 +62,29 @@ public void drawRotatingSquare() { rotate(angle); //Draw the square - stroke(0, 0, 100); + stroke(78.0f, 80.0f, 80.0f); fill(70.0f, 80.0f, 80.0F); rect(0, 0, squareSize, squareSize); popMatrix(); } - public void drawSamples() { - // Fill changes the color to shade in the following drawn shapes - fill(300.0f, 80.0f, 85.0f); - // Rect draws a rect with the given parameters - rect(100, 100, 400, 400); - - fill(100.0f, 100.0f, 100.0f); - // Ellipse draws an ellipse with the given parameters - ellipse(300, 150, 200, 100); - } - /** - * Draw a few rectangles, each with different colors at different parts of the screen. + * Draw the navy blue circle inside the rotating square. */ - public void drawRectangles() { - //Choose a color with fill - fill(20.0f, 88.0f, 30.0f); + public void drawWhiteStripe() { + //Push and pop matrix to isolate transformations + pushMatrix(); - //Draw a rectangle. - rect(0, 0, 600, 600); + //Translate to the center of the circle + translate(width / 2, height / 2); - //Choose a color for second rectangle with fill - fill(650.0f, 100.0f, 100.0f); + // Draw the navy blue circle + noFill(); + stroke(48, 12, 100); + ellipse(0, 0, circleSize, circleSize); - //Draws second rectangle - rect(25, 25, width -50 , width - 50); + popMatrix(); } /** @@ -101,6 +99,38 @@ public void drawGreenCircle() { } + public void drawRectangles() { + //Draw a red square at (0, 0) with 25% width and height + fill(0, 100, 100); //Red color in HSB + noStroke(); + rect(0, 0, width + 0.25f, height + 0.25f); + } + + /** + * Draw a blue square that rotates in the opposite direction (anticlockwise) + * inside the white stripe, touching its sides. + */ + public void drawReverseRotatingBlueSquare() { + // Calculate the reverse rotation angle + reverseAngle -= radians(2); + + //Push and pop matrix to isolate transformations + pushMatrix(); + + //Translate to the center of the circle + translate(width / 2, height / 2); + + //Rotate by the reverse angle + rotate(reverseAngle); + + //Draw the blue square + stroke(197, 92, 46); + noFill(); + rect(0, 0, innerSquareSize, innerSquareSize); + + popMatrix(); + } + public static void main(String[] args) { PApplet.main("processing.sketches.Main"); } From 887fea2171503664c1089c803cbffdec71041fcf Mon Sep 17 00:00:00 2001 From: Steve Mutuura Date: Sun, 28 Jul 2024 05:17:54 +0300 Subject: [PATCH 5/7] A completely overengineered overkill, implented a color changing mandala --- src/processing/sketches/Main.java | 173 +++++++++++++++++++++++++++--- 1 file changed, 157 insertions(+), 16 deletions(-) diff --git a/src/processing/sketches/Main.java b/src/processing/sketches/Main.java index 7fd1dbd..9df1087 100644 --- a/src/processing/sketches/Main.java +++ b/src/processing/sketches/Main.java @@ -6,9 +6,19 @@ public class Main extends PApplet { float angle = 0; float reverseAngle = 0; + float thirdReverseAngle = 0; + float fourthReverseAngle = 0; float squareSize; float circleSize; float innerSquareSize; + float newCircleSize; + float newSquareSize; + float thirdCircleSize; + float thirdSquareSize; + float fourthCircleSize; + float fourthSquareSize; + float hueShift = 0; + public void settings() { size(600, 600); @@ -21,6 +31,12 @@ public void setup() { squareSize = (width - 50) * sqrt(2) / 2; circleSize = squareSize; innerSquareSize = circleSize * sqrt(2) / 2; + newCircleSize = innerSquareSize * sqrt(2) / 2 ; + newSquareSize = newCircleSize * sqrt(2) / 2; + thirdCircleSize = newCircleSize * sqrt(2) / 2; + thirdSquareSize = thirdCircleSize * sqrt(2) / 2; + fourthCircleSize = thirdSquareSize * sqrt(2) / 2; + fourthSquareSize = fourthCircleSize * sqrt(2) / 2; rectMode(CENTER); } @@ -28,8 +44,8 @@ public void draw() { // Recreates the background to be black each 'draw' background(93, 0, 0); - //Look at the code in this method for some sample uses of rect and ellipse - drawRectangles(); + // Increment hue shift + hueShift = (hueShift + 0.5f) % 360; // Create a branch to allow you to work on the new feature of ellipses drawGreenCircle(); @@ -38,10 +54,23 @@ public void draw() { drawRotatingSquare(); // Draw the navy blue circle inside the rotating square - drawWhiteStripe(); + drawBlueStripe(); // Draw the reverse rotating blue square inside the white stripe drawReverseRotatingBlueSquare(); + + // Draw the red circle inside the blue square + drawRedCircle(); + + //Draw rotating red square inside the red circle + drawRotatingRedSquare(); + + // Draw the fourth blue circle inside the rotating red square + drawFourthBlueCircle(); + + // Draw the final blue square rotating on the circumference of the fourth blue square + drawRotatingBlueSquare(); + } /** @@ -62,8 +91,8 @@ public void drawRotatingSquare() { rotate(angle); //Draw the square - stroke(78.0f, 80.0f, 80.0f); - fill(70.0f, 80.0f, 80.0F); + stroke(60.0f, 96.3f, 96.43f); + fill(60.0f, 96.3f, 96.3f); rect(0, 0, squareSize, squareSize); popMatrix(); @@ -72,7 +101,7 @@ public void drawRotatingSquare() { /** * Draw the navy blue circle inside the rotating square. */ - public void drawWhiteStripe() { + public void drawBlueStripe() { //Push and pop matrix to isolate transformations pushMatrix(); @@ -81,7 +110,7 @@ public void drawWhiteStripe() { // Draw the navy blue circle noFill(); - stroke(48, 12, 100); + stroke((197 + hueShift) % 360, 100, 100); ellipse(0, 0, circleSize, circleSize); popMatrix(); @@ -92,20 +121,14 @@ public void drawWhiteStripe() { */ public void drawGreenCircle() { //Choose a color with fill - fill(100.0f, 150.0f, 80.0f); + fill((120 + hueShift) % 360, 100, 80); + noStroke(); //Draw an ellipse ellipse(width / 2, height / 2, width-50, height-50); } - public void drawRectangles() { - //Draw a red square at (0, 0) with 25% width and height - fill(0, 100, 100); //Red color in HSB - noStroke(); - rect(0, 0, width + 0.25f, height + 0.25f); - } - /** * Draw a blue square that rotates in the opposite direction (anticlockwise) * inside the white stripe, touching its sides. @@ -124,14 +147,132 @@ public void drawReverseRotatingBlueSquare() { rotate(reverseAngle); //Draw the blue square - stroke(197, 92, 46); + stroke((240 + hueShift) % 360, 100, 100); noFill(); rect(0, 0, innerSquareSize, innerSquareSize); popMatrix(); } + /** + * Draw the red circle inside the blue square. + */ + public void drawRedCircle() { + // Push and pop matrix to isolate transformation + pushMatrix(); + + //Translate to the center of the circle + translate(width / 2, height / 2); + + // Draw the red circle + noFill(); + stroke((0 + hueShift) % 360, 100, 100); + ellipse(0, 0, newCircleSize * sqrt(2), newCircleSize * sqrt(2)); + + popMatrix(); + } + + /** + * Draw the rotating red square inside the red circle. + */ + public void drawRotatingRedSquare() { + // Calculate the third reverse rotation angle + thirdReverseAngle += radians(4); + + // Push and pop matrix to isolate transformation + pushMatrix(); + + // Translate to the center of the circle + translate(width / 2, height / 2); + + // Rotate by the third reverse angle + rotate(thirdReverseAngle); + + // Draw the red square + stroke((0 + hueShift) % 360, 100, 100); + noFill(); + rect(0, 0, newSquareSize * sqrt(2), newSquareSize * sqrt(2)); + + popMatrix(); + } + + /** + * Draw the fourth blue circle inside the rotating red square. + */ + public void drawFourthBlueCircle() { + // Push and pop matrix to isolate transformations + pushMatrix(); + + //Translate to the center of the circle + translate(width / 2, height / 2); + + // Draw the fourth blue circle + noFill(); + stroke((240 + hueShift) % 360, 100, 100); + ellipse(0, 0, newSquareSize * sqrt(2), newSquareSize * sqrt(2)); + + popMatrix(); + } + + /** + * Draw the new rotating blue square inside the new blue circle. + */ + public void drawRotatingBlueSquare() { + // Calculate the fourth reverse angle + fourthReverseAngle -= radians(8); + + //Push and pop matrix to isolate transformations + pushMatrix(); + + // Translate to the center of the circle + translate(width / 2, height / 2); + + //Rotate by the new reverse angle + rotate(fourthReverseAngle); + + //Draw the new blue square + stroke((240 + hueShift) % 360, 100, 100); + noFill(); + rect(0, 0, newSquareSize, newSquareSize); + + popMatrix(); + } + public static void main(String[] args) { PApplet.main("processing.sketches.Main"); } } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 486987bb2408df71514609aecd0db240e5c52b69 Mon Sep 17 00:00:00 2001 From: Steve Mutuura Date: Sun, 28 Jul 2024 05:35:24 +0300 Subject: [PATCH 6/7] Made a few changes to the color scheme --- src/processing/sketches/Main.java | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/processing/sketches/Main.java b/src/processing/sketches/Main.java index 9df1087..7c94dd8 100644 --- a/src/processing/sketches/Main.java +++ b/src/processing/sketches/Main.java @@ -91,8 +91,8 @@ public void drawRotatingSquare() { rotate(angle); //Draw the square - stroke(60.0f, 96.3f, 96.43f); - fill(60.0f, 96.3f, 96.3f); + stroke((60 + hueShift) % 360, 100, 100); + fill((60 + hueShift) % 360, 80, 80); rect(0, 0, squareSize, squareSize); popMatrix(); From 96d0472c4e592984049bdf67cb1d7304473fffa8 Mon Sep 17 00:00:00 2001 From: Steve Mutuura Date: Tue, 30 Jul 2024 06:10:59 +0300 Subject: [PATCH 7/7] Added a full blend of color to shapes and smoother hue shifts to change color as the shapes rotate --- src/processing/sketches/Main.java | 152 ++++++++++++++++-------------- 1 file changed, 81 insertions(+), 71 deletions(-) diff --git a/src/processing/sketches/Main.java b/src/processing/sketches/Main.java index 7c94dd8..35e0964 100644 --- a/src/processing/sketches/Main.java +++ b/src/processing/sketches/Main.java @@ -2,8 +2,12 @@ import processing.core.PApplet; +//import controlP5.*; To add a few sliders/buttons for increasing rotation speeds and hue incrementing cycles + + public class Main extends PApplet { + //ControlP5 cp5; float angle = 0; float reverseAngle = 0; float thirdReverseAngle = 0; @@ -18,6 +22,15 @@ public class Main extends PApplet { float fourthCircleSize; float fourthSquareSize; float hueShift = 0; + float saturationShift = 100; + float brightnessShift = 100; + boolean darkening = true; + float baseHue = 0; + //float colorIncrement = 0.2f; + //float rotationSpeedMultiplier1 = 1; + //float rotationSpeedMultiplier2 = 1; + //float rotationSpeedMultiplier3 = 1; + //float rotationSpeedMultiplier4 = 1; public void settings() { @@ -38,6 +51,8 @@ public void setup() { fourthCircleSize = thirdSquareSize * sqrt(2) / 2; fourthSquareSize = fourthCircleSize * sqrt(2) / 2; rectMode(CENTER); + + //cp5 = new ControlP5(this); } public void draw() { @@ -45,31 +60,55 @@ public void draw() { background(93, 0, 0); // Increment hue shift - hueShift = (hueShift + 0.5f) % 360; + //hueShift = (hueShift + 100.5f) % 360; - // Create a branch to allow you to work on the new feature of ellipses - drawGreenCircle(); + // Handle color transition + if (darkening) { + saturationShift -= 0.2f; + brightnessShift -= 0.2f; + if (brightnessShift <= 20) { + darkening = false; + } + } else { + saturationShift += 0.2f; + brightnessShift += 0.2f; + if (brightnessShift >= 100) { + darkening = true; + baseHue = (baseHue + 20) % 360; + } + } - //Add the rotating square inside the existing circle - drawRotatingSquare(); + drawFirstCircle(); - // Draw the navy blue circle inside the rotating square - drawBlueStripe(); + drawFirstRotatingSquare(); - // Draw the reverse rotating blue square inside the white stripe - drawReverseRotatingBlueSquare(); + drawSecondCircle(); - // Draw the red circle inside the blue square - drawRedCircle(); + drawSecondRotatingSquare(); - //Draw rotating red square inside the red circle - drawRotatingRedSquare(); + drawThirdCircle(); - // Draw the fourth blue circle inside the rotating red square - drawFourthBlueCircle(); + drawThirdRotatingSquare(); - // Draw the final blue square rotating on the circumference of the fourth blue square - drawRotatingBlueSquare(); + drawFourthCircle(); + + drawFourthRotatingSquare(); + } + + /** + * Method to get color based on current shifts. + */ + public int getColor(float hue, float saturation, float brightness) { + return color((baseHue + hue) % 360, constrain(saturation, 0, 100), constrain(brightness, 0, 100)); + } + + public void drawFirstCircle() { + //Choose a color with fill + fill(getColor(0, saturationShift, brightnessShift)); + noStroke(); + + //Draw an ellipse + ellipse(width / 2, height / 2, width-50, height-50); } @@ -77,11 +116,11 @@ public void draw() { * Draw a rotating square that touches the sides of the existing ellipse * which itself touches the sides of the inner square. */ - public void drawRotatingSquare() { + public void drawFirstRotatingSquare() { //Calculate the rotating angle angle += radians(1); - //Push and pop matrix to isolate transformation + //Push and pop matrix to isolate pushMatrix(); //Translate to the center of the circle @@ -91,17 +130,14 @@ public void drawRotatingSquare() { rotate(angle); //Draw the square - stroke((60 + hueShift) % 360, 100, 100); - fill((60 + hueShift) % 360, 80, 80); + stroke(getColor(10, saturationShift, brightnessShift)); + fill(getColor(10, saturationShift, brightnessShift)); rect(0, 0, squareSize, squareSize); popMatrix(); } - /** - * Draw the navy blue circle inside the rotating square. - */ - public void drawBlueStripe() { + public void drawSecondCircle() { //Push and pop matrix to isolate transformations pushMatrix(); @@ -109,31 +145,15 @@ public void drawBlueStripe() { translate(width / 2, height / 2); // Draw the navy blue circle - noFill(); - stroke((197 + hueShift) % 360, 100, 100); + //noFill(); + fill(getColor(20, saturationShift, brightnessShift)); + stroke(getColor(20, saturationShift, brightnessShift)); ellipse(0, 0, circleSize, circleSize); popMatrix(); } - /** - * Draw a few ellipses, each with different colors at different parts of the screen. - */ - public void drawGreenCircle() { - //Choose a color with fill - fill((120 + hueShift) % 360, 100, 80); - noStroke(); - - //Draw an ellipse - ellipse(width / 2, height / 2, width-50, height-50); - - } - - /** - * Draw a blue square that rotates in the opposite direction (anticlockwise) - * inside the white stripe, touching its sides. - */ - public void drawReverseRotatingBlueSquare() { + public void drawSecondRotatingSquare() { // Calculate the reverse rotation angle reverseAngle -= radians(2); @@ -147,17 +167,14 @@ public void drawReverseRotatingBlueSquare() { rotate(reverseAngle); //Draw the blue square - stroke((240 + hueShift) % 360, 100, 100); - noFill(); + stroke(getColor(30, saturationShift, brightnessShift)); + fill(getColor(30, saturationShift, brightnessShift)); rect(0, 0, innerSquareSize, innerSquareSize); popMatrix(); } - /** - * Draw the red circle inside the blue square. - */ - public void drawRedCircle() { + public void drawThirdCircle() { // Push and pop matrix to isolate transformation pushMatrix(); @@ -165,17 +182,15 @@ public void drawRedCircle() { translate(width / 2, height / 2); // Draw the red circle - noFill(); - stroke((0 + hueShift) % 360, 100, 100); + //noFill(); + stroke(getColor(40, saturationShift, brightnessShift)); + fill(getColor(40, saturationShift, brightnessShift)); ellipse(0, 0, newCircleSize * sqrt(2), newCircleSize * sqrt(2)); popMatrix(); } - /** - * Draw the rotating red square inside the red circle. - */ - public void drawRotatingRedSquare() { + public void drawThirdRotatingSquare() { // Calculate the third reverse rotation angle thirdReverseAngle += radians(4); @@ -189,17 +204,14 @@ public void drawRotatingRedSquare() { rotate(thirdReverseAngle); // Draw the red square - stroke((0 + hueShift) % 360, 100, 100); - noFill(); + stroke(getColor(50, brightnessShift, saturationShift)); + fill(getColor(50, brightnessShift, brightnessShift)); rect(0, 0, newSquareSize * sqrt(2), newSquareSize * sqrt(2)); popMatrix(); } - /** - * Draw the fourth blue circle inside the rotating red square. - */ - public void drawFourthBlueCircle() { + public void drawFourthCircle() { // Push and pop matrix to isolate transformations pushMatrix(); @@ -207,17 +219,15 @@ public void drawFourthBlueCircle() { translate(width / 2, height / 2); // Draw the fourth blue circle - noFill(); - stroke((240 + hueShift) % 360, 100, 100); + //noFill(); + stroke(getColor(60, saturationShift, brightnessShift)); + fill(getColor(60, saturationShift, brightnessShift)); ellipse(0, 0, newSquareSize * sqrt(2), newSquareSize * sqrt(2)); popMatrix(); } - /** - * Draw the new rotating blue square inside the new blue circle. - */ - public void drawRotatingBlueSquare() { + public void drawFourthRotatingSquare() { // Calculate the fourth reverse angle fourthReverseAngle -= radians(8); @@ -231,8 +241,8 @@ public void drawRotatingBlueSquare() { rotate(fourthReverseAngle); //Draw the new blue square - stroke((240 + hueShift) % 360, 100, 100); - noFill(); + stroke(getColor(70, saturationShift, brightnessShift)); + fill(getColor(70, saturationShift, brightnessShift)); rect(0, 0, newSquareSize, newSquareSize); popMatrix();