Raphcicle - OpenProcessing

mySketch
xxxxxxxxxx
 
/*
Hey challenge birbs! This week's theme is Winter, and I've been super busy working
on p5.js 2.0 development, so I wanted something quick. Which usually means doing
something with Raph's 3D scan.
​
This one uses a new feature, p5 shader hooks, to modify the usual material and make
a material that looks like ice. In this case that means making everything transparent,
and making things more opaque the more parallel to the camera they are.
More examples of this feature here: https://p5js.org/reference/p5/baseMaterialShader/
​
Also, pretty sure this is the first time I've used spotLight(). It kinda looks really good??
I guess I'll have to use it more.
*/
​
p5.disableFriendlyErrors = true
​
let raphModel
let raphTexture
let iceShader
​
function preload() {
  raphTexture = loadImage('https://deckard.openprocessing.org/user67809/visual1934027/h0739a90929e33beb7f15e8d20632fb57/raph.jpg')
  raphModel = loadModel(
    'https://deckard.openprocessing.org/user67809/visual1934027/h0739a90929e33beb7f15e8d20632fb57/raph.obj',
    { fileType: '.obj', normalize: true }
  )
}
​
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  raphModel.computeNormals()
  
  // Make an ice material
  iceShader = baseMaterialShader().modify({
    'Inputs getPixelInputs': `(Inputs inputs) {
      float brightness = inputs.color.g;
      float facingFront = abs(inputs.normal.z);
      
      // Vary the hue a bit based on the brightness of
      // the input texture so Raph's face is still
      // sorta recognizable
      inputs.color = mix(
        vec4(133., 183., 237., 255.),
        vec4(255., 255., 255., 255.),
        facingFront * (1. - brightness)
      ) / 255.;
      inputs.ambientMaterial = inputs.color.rgb;
      
      // Make things less opaque the more parallel to the camera they are
      float opacity = 0.8 * (0.3 + 0.7 * (1. - facingFront));
      inputs.color *= opacity;
      inputs.ambientMaterial *= opacity;
      return inputs;
    }`
  })
}
​
function draw() {
  background('rgb(55,55,158)')
  noStroke()
  orbitControl()
  
  // Put Raph on a plane
  push()
  translate(0, 250, 0)
  rotateX(PI/2)
  ambientLight(color('rgb(55,55,158)'))
  spotLight(color(200), 0, -2000, 0, 0, 1, 0) //, [angle], [concentration])
  plane(2000, 2000)
  pop()
​
  // Draw snow with with POINTS mode
  push()
  strokeWeight(5)
  stroke(255)
  translate(-width/2, -height/2)
  beginShape(POINTS)
  const t = millis()
  for (let i = 0; i < 200; i++) {
    vertex(
      (noise(i * PI) * 2 * width + t * 0.01) % width + sin(t * 0.0012 + i * Math.E)*80,
      (noise(i * PI, 100) * 2 * height + t * 0.03) % height + sin(t * 0.0009 + i * Math.E)*40,
      (noise(i * PI, 200) * 2 * width) % width - width/2,
    )
  }
  endShape()
  pop()
  
  // Draw raph
  push()
  lights()
  texture(raphTexture)
  specularMaterial(255)
  ambientLight(100)
  spotLight(color(255), 0, -2000, 0, 0, 1, 0)
  shininess(300)
  shader(iceShader)
  scale(1, -1, 1)
  scale(2.5)
  drawingContext.enable(drawingContext.BLEND)
  
  // Since he's transparent, we want both his back faces
  // and front faces visible. So first we draw just the
  // back faces (by culling the front faces), and then
  // draw the front faces on top of that (by culling the
  // back faces) so they can blend on top
  drawingContext.enable(drawingContext.CULL_FACE)
  drawingContext.cullFace(drawingContext.FRONT)
  model(raphModel)
  drawingContext.cullFace(drawingContext.BACK)
  model(raphModel)
  drawingContext.disable(drawingContext.CULL_FACE)
  pop()
}