|
1 | | -const vertSrc = `#version 300 es |
2 | | - precision mediump float; |
3 | | - uniform mat4 uModelViewMatrix; |
4 | | - uniform mat4 uProjectionMatrix; |
5 | | -
|
6 | | - in vec3 aPosition; |
7 | | - in vec2 aOffset; |
8 | | -
|
9 | | - void main(){ |
10 | | - vec4 positionVec4 = vec4(aPosition.xyz, 1.0); |
11 | | - positionVec4.xy += aOffset; |
12 | | - gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4; |
13 | | - } |
14 | | -`; |
15 | | - |
16 | | -const fragSrc = `#version 300 es |
17 | | - precision mediump float; |
18 | | - out vec4 outColor; |
19 | | - void main(){ |
20 | | - outColor = vec4(0.0, 1.0, 1.0, 1.0); |
21 | | - } |
22 | | -`; |
23 | | - |
24 | | -let myShader; |
25 | | -function setup(){ |
26 | | - createCanvas(100, 100, WEBGL); |
| 1 | +p5.disableFriendlyErrors = true; |
| 2 | +function windowResized() { |
| 3 | + resizeCanvas(windowWidth, windowHeight); |
| 4 | +} |
27 | 5 |
|
28 | | - // Create and use the custom shader. |
29 | | - myShader = createShader(vertSrc, fragSrc); |
| 6 | +let myModel; |
| 7 | +let starShader; |
| 8 | +let starStrokeShader; |
| 9 | +let stars; |
| 10 | + |
| 11 | +function starShaderCallback() { |
| 12 | + const time = uniformFloat(() => millis()); |
| 13 | + getWorldInputs((inputs) => { |
| 14 | + inputs.position.y += instanceID() * 20 - 1000; |
| 15 | + inputs.position.x += 40*sin(time * 0.001 + instanceID()); |
| 16 | + return inputs; |
| 17 | + }); |
| 18 | + getObjectInputs((inputs) => { |
| 19 | + inputs.position *= sin(time*0.001 + instanceID()); |
| 20 | + return inputs; |
| 21 | + }) |
| 22 | +} |
30 | 23 |
|
31 | | - describe('A wobbly, cyan circle on a gray background.'); |
| 24 | +async function setup(){ |
| 25 | + createCanvas(windowWidth, windowHeight, WEBGL); |
| 26 | + stars = buildGeometry(() => sphere(20, 7, 4)) |
| 27 | + starShader = baseMaterialShader().modify(starShaderCallback); |
| 28 | + starStrokeShader = baseStrokeShader().modify(starShaderCallback) |
32 | 29 | } |
33 | 30 |
|
34 | 31 | function draw(){ |
35 | | - // Set the styles |
36 | | - background(125); |
| 32 | + background(0,200,240); |
| 33 | + orbitControl(); |
| 34 | + // noStroke(); |
| 35 | + |
| 36 | + push(); |
| 37 | + stroke(255,0,255) |
| 38 | + fill(255,200,255) |
| 39 | + strokeShader(starStrokeShader) |
| 40 | + shader(starShader); |
| 41 | + model(stars, 100); |
| 42 | + pop(); |
| 43 | + push(); |
| 44 | + shader(baseMaterialShader()); |
37 | 45 | noStroke(); |
38 | | - shader(myShader); |
39 | | - |
40 | | - // Draw the circle. |
41 | | - beginShape(); |
42 | | - for (let i = 0; i < 30; i++){ |
43 | | - const x = 40 * cos(i/30 * TWO_PI); |
44 | | - const y = 40 * sin(i/30 * TWO_PI); |
45 | | - |
46 | | - // Apply some noise to the coordinates. |
47 | | - const xOff = 10 * noise(x + millis()/1000) - 5; |
48 | | - const yOff = 10 * noise(y + millis()/1000) - 5; |
49 | | - |
50 | | - // Apply these noise values to the following vertex. |
51 | | - vertexProperty('aOffset', [xOff, yOff]); |
52 | | - vertex(x, y); |
53 | | - } |
54 | | - endShape(CLOSE); |
| 46 | + rotateX(HALF_PI); |
| 47 | + translate(0, 0, -250); |
| 48 | + plane(10000) |
| 49 | + pop(); |
55 | 50 | } |
0 commit comments