Life is pretty hectic right now, sorry for the delay in getting to this!

Here’s a sketch that explores the rotate and translate functions:

https://editor.p5js.org/nicoleannevella/sketches/C_zaN7RZk

JS Code:

let d, a = 0; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); noStroke(); background(0); colorMode(HSB, 360, 100, 100); } function draw() { rotateX(a/QUARTER_PI); rotateY(a/HALF_PI); rotateZ(a/PI); fill(frameCount % 360, 35, 100, 100); translate(cos(a)*250, sin(a)*250); d=tan(a)*(width/12); sphere(d); a+= 0.015; }

Here’s a sketch that attempts to do the same but with moving a camera object:

https://editor.p5js.org/nicoleannevella/sketches/CE3m6hUmo

JS Code:

// camera object and position let cam; let camPos; // set min and max depth of field let maxdof = 1500; let mindof = 1; let a = 0; // angle used for cos/sin animations function setup() { createCanvas(windowWidth, windowHeight, WEBGL); // use the HSB coloe mode because it makes most sense to me colorMode(HSB, 360, 100, 100); // init our camera and use a vector for its position cam = createCamera(); camPos = createVector(); // strokes can be ugly sometimes, lets not use one noStroke(); } function draw() { // animate the fov with cos() by an increasing angle value let fov = cos(a)*2; let aspect = width / height; // animate the camera look at positions using the same // increasing angle value and some cos/sin functions // if we divide the angle by some number we can add // a sense of "randomness" to it let camLookX = cos(a) * sin(a / HALF_PI) * maxdof * 0.1; let camLookY = cos(a) * sin(a / PI) * maxdof * 0.1; let camLookZ = cos(a) * sin(a / QUARTER_PI) * maxdof * 0.1; // set the perspective, position, and lookAt for our 3D camera cam.perspective(fov, aspect, mindof, maxdof); cam.setPosition(cos(a) * maxdof, 0, -10); cam.lookAt(camLookX, camLookY, camLookZ); // animate that fill nicely with the Hue based on framecount fill(frameCount % 360, 35, 100, 100); // draw a sphere sphere(10); // the magic value used to caluclate cos/sin that's resposible for all our animations a += 0.015; }

Here’s a sketch where I add my liquid gold frag shader to the blob obj file that Jeremy made in Blender. Hope it’s ok that I stole your .obj (obviously I am going to try to get my delicious gold involved somehow).

Getting my gold fragment shader to map onto the 3D object was not trivial. I had to try out all the possible mappings like vEyePosition, vModelView, etc … I set the st to **vScreenPosition.xy/vNormal.xy** and that showed progress.

The larger issue was how to get my circles drawn in the right place. As it’s no longer a vec2, but a vec3. So, in the drawCircle function, I had to add the three xyz values of vNormal to get it to draw correctly onto the shape.

#define drawCircle(st,pos,size)smoothstep(0.,5./(**vNormal.x+vNormal.y+vNormal.z**),size-length(pos-st))

https://editor.p5js.org/nicoleannevella/sketches/sEj2HwGv3

Frag Shader Code:

#ifdef GL_ES precision mediump float; #endif uniform float uTime; varying vec3 vScreenPosition; varying vec3 vNormal; #define drawCircle(st,pos,size)smoothstep(0.,5./(vNormal.x+vNormal.y+vNormal.z),size-length(pos-st)) #define PI 3.14159265358979323846 #define TWO_PI 6.283185307179586 #define BUTTER TWO_PI/TWO_PI/TWO_PI/TWO_PI/TWO_PI/TWO_PI vec3 permute(vec3 x){return mod(((x*34.)+1.)*x,289.);} float snoise(vec2 v){ const vec4 C=vec4(.211324865405187,.366025403784439, -.577350269189626,.024390243902439); vec2 i=floor(v+dot(v,C.yy)); vec2 x0=v-i+dot(i,C.xx); vec2 i1; i1=(x0.x>x0.y)?vec2(1.,0.):vec2(0.,1.); vec4 x12=x0.xyxy+C.xxzz; x12.xy-=i1; i=mod(i,289.); vec3 p=permute(permute(i.y+vec3(0.,i1.y,1.)) +i.x+vec3(0.,i1.x,1.)); vec3 m=max(.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)),0.); m=m*m; m=m*m; vec3 x=2.*fract(p*C.www)-1.; vec3 h=abs(x)-.5; vec3 ox=floor(x+.5); vec3 a0=x-ox; m*=1.79284291400159-.85373472095314*(a0*a0+h*h); vec3 g; g.x=a0.x*x0.x+h.x*x0.y; g.yz=a0.yz*x12.xz+h.yz*x12.yw; return 130.*dot(m,g); } void main() { vec2 st=vScreenPosition.xy/vNormal.xy; st.y=vScreenPosition.x/vScreenPosition.y; st.x/=snoise(st+vec2(uTime*BUTTER,0.))*.5+.5; float cs=snoise(st+uTime*BUTTER)*.5+.5; float circ=drawCircle(st,vec2(.5),cs*TWO_PI); vec3 red =vec3(1.0,0.0,0.0); vec3 green=vec3(0.0,1.0,0.0); vec3 blue =vec3(0.0,0.0,1.0); vec3 color = vec3(0.0); color+=mix(color,red,circ); color+=mix(color,green,circ); color+=mix(color,blue,circ); gl_FragColor = vec4(color, 1.0); }

As a bonus, I added audio reactivity:

https://nicolevella.com/_beta/shaders/goldblob/