記録

勉強したことに関するのノート。見返して分かるようにしてます。

4回目のp5.js

function setup() {
  createCanvas(400, 400);
  // colorMode(HSB,360,100,100,100);
}

function draw() {
  
  background(220,20);
  fill(0,0,mouseY%255,random(100));
  stroke(255,0,255,random(100));
  strokeWeight(random(50));
  ellipse(200,200,mouseX+random(10),mouseX+random(10));
}

RGBとHSBのカラーモードの差のプログラム

function setup() {
  createCanvas(400, 400);
}

function draw() {
  // background(220);
  //print(random(255));
  noStroke();
  fill(random(255),random(255),random(255),random(50));
  ellipse(mouseX,mouseY,50,50);
}
function setup() {
  createCanvas(400, 400);
  colorMode(HSB,360,100,100,100);
}

function draw() {
  background(0,0,frameCount*0.1%100,50);
  
  strokeWeight(random(10));
  stroke(0,0,100,random(10));
  
  fill((frameCount%360),100,100);
  ellipse(200,200,200,200);
  quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4);
  
  //sita
  push();
  translate(0,height/2);
  fill(((frameCount%360)+180)%360,100,100);
  quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4);
  pop();
  
  //migi
    push();
  translate(width/4,height/4);
  fill(((frameCount%360)+90)%360,100,100);
  quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4);
  pop();
  
  //hidari
  push();
  translate(-width/4,height/4);
  fill(((frameCount%360)-90)%360,100,100);
  quad(width/2,0,width/4,height/4,width/2,height/2,width*3/4,height/4);
  pop();
}

色がくるくる循環するものを作りたくて作りました。