p5.Utils - Gradient Fill - OpenProcessing

mySketch
xxxxxxxxxx
 
// Ref: https://github.com/alptugan/p5.utils#beginLinearGradient
//
// Define global variable and initialize p5.Utils lib
var utils = new p5.Utils();
var props = [];
​
function setup() {
  createCanvas(1112, 834);
  
  // Gap between each shape
  var margin;
  
  // Divide canvas 4 equal piece
  // Store positions and sizes into the props array as x,y,width and height values
  for(var i = 0; i < 2; i++) {  
    for(var j = 0; j < 2; j++) {
      var sz = min(width,height);
      margin = sz * 0.05;
      props.push({"x":margin + i*sz/2,
                  "y":margin + j*sz/2,
                  "w":sz/2 - margin *2,
                  "h":sz/2 - margin * 2
                 });
    }
  }
}
​
function draw() {
​
  background(100);
  translate(150, 0);
  
  stroke(1);
  noFill();
  for(var i = 0; i < 4; i++) {  
    //rect(props[i].x,props[i].y,props[i].w,props[i].h);
    
  }
  
  noStroke();
  // TOP LEFT CIRCLE
  // Begin gradient fill for three colors in diagonal
  utils.beginLinearGradient(
    [color(34, 46, 255), "#FFAA00",  color(200, 45, 54)], // Colors
    props[0].x,   // gradient begin point x     
    props[0].y,   // gradient begin point y
    props[0].w,   // gradient end point x
    props[0].h,   // gradient end point y
    [0, 0.7, 1]    // Position of each color. Edit these values to change the color blend ratio.
  );
  ellipseMode(CORNER);
  circle(props[0].x,props[0].y, props[0].h);
  // End gradient fill
  utils.endLinearGradient();
​
  // BOTTOM LEFT SQUARE
  // Begin gradient fill for two colors in diagonal
  utils.beginLinearGradient(
    ["#FFCC00", color(239, 62, 54)], // Colors
    props[1].x,    // gradient begin point x     
    props[1].y,   // gradient begin point y
    props[1].w,    // gradient end point x
    props[1].h,   // gradient end point y
    [0, 1]           // Position of each color.
  );
​
  rect(props[1].x, props[1].y, props[1].h,props[1].h);
  // End gradient fill
  utils.endLinearGradient();
​
  // TOP RIGHT TRIANGLE
  // Begin gradient fill for four colors in horizontal
  utils.beginLinearGradient(
    ["#FFCC00", color(239, 62, 54), "#2546FF", color(70, 255, 140)], // Colors
    props[2].x,    // gradient begin point x     
    props[2].y,   // gradient begin point y
    props[2].w,    // gradient end point x
    props[2].h,   // gradient end point y
    [0, 0.1, 0.3, 1]           // Position of each color.
  );
​
  triangle(
    props[2].x + props[2].w * 0.5, props[2].y,
    props[2].x, props[2].h,
    props[2].x + props[2].w, props[2].h
  );
  // End gradient fill
  utils.endLinearGradient();
​
  // BOTTOM RIGHT SOLID FILL
  fill(70, 200, 140);
  ellipseMode(CORNER);
  circle(props[3].x,props[3].y,props[3].h);
}
​
// save jpg
let lapse = 0;    // mouse timer
function mousePressed(){
  if (millis() - lapse > 400){
    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");
    lapse = millis();
  } 
}
​