HSB drawings by code – Wangshu Sun

Save as png by mouse click.

function setup() {
  createCanvas(600,400);
  colorMode(HSB);
  angleMode(DEGREES);

  //rainbow
  var myAlpha;
  for(var i = 1; i < 320; i+=1) {
    if (i <= 40) { myAlpha = 0 + i/200; } else if (i >= 280) {
      myAlpha = 0.2 - (i-280)/200;
    } else {
      myAlpha = 0.2;
    }
    // stroke(i%360,97,97,myAlpha*2.5);
    // arc(300,800,1400-i/2,1400-i/2,225,315);
    translate(300,800);
    rotate(-50);
    for(var k = 220; k<320; k+=0.1) {
      fill(i%360,95,100,myAlpha*2 - abs(k-270)/120);
      noStroke();
      //stroke(i%360,100 - 2*abs(k-270),100,myAlpha - abs(k-270)/300);
      ellipse(0,-700 + i/2, 10, 10);
      rotate(0.1);
    }
    rotate(-100); 
  }
}

function mouseClicked() {
  saveCanvas("rainbow.png","png");
}

Render Online: Sea (change saturation)

Save as png by mouse click.

function setup() {
  createCanvas(800,600);
  background(255);
  colorMode(HSB,360,100,100);
  var seaS = 90;
  for(var h = -60;h<600;h+=20){
    stroke(205-h/30,seaS,100);
    for(var x1=1; x1<800; x1++) {
      y1 = 30 + 30*cos(2*PI*x1/400 + h/60 * PI/3)+h;
      line(x1,y1,x1,y1+40);
    }
    seaS -=9;
    if(seaS < 0) {
      seaS = 90;
    }
  }
}

function mouseClicked() {
  saveCanvas('sea5.png', 'png');
}

Render Online: Wall (change brightness)

Save as png by mouse click.

function setup() {
  createCanvas(600, 600);
  translate(-1,0);
  colorMode(HSB);
  for (var i = 0; i < 7; i++) {
    for (var j = 0; j < 20; j++) {
      stroke(33, 30, 93); //random(80, 87) //33,33,83//32,43,59//36,33,87//35,39,80
      fill(random(35,36), random(15,20), random(97, 100)); //33,29,100//36,30,96//33,31,92
      rect(i * 102 - (j % 2) * 51, j * 30, 102, 30); //when the line number is odd, then append some shift
    }
  }
}

function mouseClicked() {
  saveCanvas("wall3.png", "png");
}