13回目のp5.js

3Dを扱うプログラミング

function setup() {
  createCanvas(400, 400, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
}

function draw() {
  background(0, 0, 20);

  push();
  translate(0, sin(frameCount)*100, 0);
  rotateX((frameCount * 0.1) % 360);
  rotateY((frameCount * 0.1) % 360);
  rotateZ((frameCount * 0.1) % 360);
  rectMode(CENTER);
  fill((frameCount * 0.1) % 360, 100, 100);
  box(150);
  pop();

}

function setup() {
  createCanvas(400, 400, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
}

function draw() {
  background(0, 0, 20);

  push();
  translate(0, 0, 0);
  rotateX((frameCount * 0.1) % 360);
  rotateY((frameCount * 0.1) % 360);
  rotateZ((frameCount * 0.1) % 360);
  rectMode(CENTER);
  stroke((frameCount * 0.1 + 180) % 360, 100, 100);
  fill((frameCount * 0.1) % 360, 100, 100);
    
    //ここから先が図形に関するプログラム
  // box(150);
  //sphere(100,8,3);
  // plane(100,200);
  // cylinder(50,200);
   cone(50,200);
  // ellipsoid(50,100,50);
  // torus(80,10);
  pop();
}

3Dに光沢などの加工を施す

function setup() {
  createCanvas(400, 400, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
}

function draw() {
  background(0, 0, 20);
  orbitControl();

  let x = mouseX - width / 2;
  let y = mouseY - height / 2;

  ambientLight(0, 100, 100); //色
  pointLight(0, 0, 100, x, y, sin(frameCount) * 80); //色、光源の場所

  push();
  translate(0, 0, 0);
  specularMaterial(0,0,100);//色、つやつや
  // ambientMaterial(180, 100, 100); //色、マット
  // normalMaterial();//中には何もいれない、サイバーなものに合う
  torus(80, 20, 64, 64);
  pop();
}

課題制作

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  background(0, 0, 0);
  angleMode(DEGREES);
}

function draw() {
  orbitControl();
  pointLight(0, 0, 100, 0, 0, map(sin(frameCount), -1, 1, 0, 500)); //色、光源の場所
  ambientLight(0, 0, 10); //色
  rotateX(frameCount);
  rotateY(frameCount);
  rotateZ(frameCount);

  push();
  translate(random(-width / 2, width / 2), random(-height / 2, height / 2), random(-200, 200));
  specularMaterial(0, 0, 100);
  let x1 = random(10, 30);
  stroke(0, 0, 80);
  box(x1, 10, 10);
  pop();

  //if(frameCount==1000){
  //  noLoop();
  //  save();
  //}
}