loop complete
This commit is contained in:
Sam
parent
8928173f84
commit
7ef6afb922
|
|
@ -12,11 +12,11 @@
|
|||
<div id="toolbar">
|
||||
<br>
|
||||
<select id="shape-selector">
|
||||
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
|
||||
<option value="EyePrototype">EyePrototype</option>
|
||||
<option value="Nodal_expanding">Nodal_expanding</option>
|
||||
<option value="MaryFace">MaryFace</option>
|
||||
<option value="CircleExpand">CircleExpand</option>
|
||||
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
|
||||
<option value="FloralPhyllo">FloralPhyllo</option>
|
||||
<option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
|
||||
<option value="Spiral1">Spiral1</option>
|
||||
|
|
@ -45,9 +45,9 @@
|
|||
</div>
|
||||
<button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div>
|
||||
<button onclick="manualToggleSettings()" class="button">Show/hide</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</body>
|
||||
<script src="./js/helper.js" type="text/javascript"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ async function fetchConfig(className) {
|
|||
Spiral1: [
|
||||
{ type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
|
||||
{ type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
|
||||
{ type: "range", min: 1, max: 10, defaultValue: 2, property: "lineWidth" },
|
||||
{ type: "color", defaultValue: "#4287f5", property: "colour" },
|
||||
],
|
||||
FloralAccident: [
|
||||
|
|
@ -68,11 +69,12 @@ async function fetchConfig(className) {
|
|||
{ type: "range", min: 0, max: 1, defaultValue: 0, property: "draw_pupil" },
|
||||
{ type: "range", min: 0, max: 1, defaultValue: 0, property: "draw_expand" },
|
||||
{ type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_hypno" },
|
||||
{ type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_eyelid" },
|
||||
{ type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" },
|
||||
{ type: "color", defaultValue: "#00fffb", property: "colourPupil" },
|
||||
{ type: "color", defaultValue: "#ff0000", property: "colourSpiral" },
|
||||
{ type: "color", defaultValue: "#00fffb", property: "colourExpand" },
|
||||
{ type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_eyelid" },
|
||||
{ type: "color", defaultValue: "#00fffb", property: "colourEyelid" },
|
||||
],
|
||||
CircleExpand: [
|
||||
{ type: "range", min: 1, max: 70, defaultValue: 21, property: "nCircles" },
|
||||
|
|
@ -176,7 +178,7 @@ function drawEyelid(width, x1, y1, colour) {
|
|||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawEyelidAccident(x1, y1) {
|
||||
function drawEyelidAccident(x1, y1, colour) {
|
||||
let leafWidth = 120;
|
||||
let leafHeight = 60;
|
||||
x1 -= centerX;
|
||||
|
|
@ -232,7 +234,7 @@ function drawEyelidAccident(x1, y1) {
|
|||
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.quadraticCurveTo(x4, y4, x2, y2);
|
||||
ctx.strokeStyle = "orange";
|
||||
ctx.strokeStyle = colour;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@ let paused = true;
|
|||
render_clear();
|
||||
|
||||
let drawObj = null;
|
||||
|
||||
|
||||
|
||||
function createInstance(className, args) {
|
||||
const classMap = {
|
||||
PolyTwistColourWidth: PolyTwistColourWidth,
|
||||
|
|
@ -24,11 +27,11 @@ function createInstance(className, args) {
|
|||
FloralAccident: FloralAccident,
|
||||
FloralPhyllo_Accident: FloralPhyllo_Accident,
|
||||
Nodal_expanding: Nodal_expanding,
|
||||
Phyllotaxis:Phyllotaxis,
|
||||
SquareTwist_angle:SquareTwist_angle,
|
||||
EyePrototype:EyePrototype,
|
||||
CircleExpand:CircleExpand,
|
||||
MaryFace:MaryFace,
|
||||
Phyllotaxis: Phyllotaxis,
|
||||
SquareTwist_angle: SquareTwist_angle,
|
||||
EyePrototype: EyePrototype,
|
||||
CircleExpand: CircleExpand,
|
||||
MaryFace: MaryFace,
|
||||
// Add more class constructors here as needed
|
||||
};
|
||||
|
||||
|
|
@ -42,30 +45,146 @@ function createInstance(className, args) {
|
|||
|
||||
|
||||
async function updateDrawObj() {
|
||||
const shapeSelector = document.getElementById("shape-selector");
|
||||
const selectedShape = shapeSelector.value;
|
||||
const config = await fetchConfig(selectedShape);
|
||||
if (drawObj) {
|
||||
drawObj.remove(); // Remove the previous instance
|
||||
}
|
||||
// Extract default values from the configuration
|
||||
const defaultValues = config
|
||||
// .filter((item) => item.type !== "color") // Exclude color inputs
|
||||
.map((item) => item.defaultValue);
|
||||
|
||||
drawObj = createInstance(selectedShape, defaultValues);
|
||||
|
||||
// drawObj = await createShapeWithRandomProperties(813311281, config1);
|
||||
console.log(drawObj)
|
||||
drawObj.initialise(config);
|
||||
deg_per_sec = animationList[currentAnimationIndex].speed;
|
||||
drawObj = createInstance(animationList[currentAnimationIndex].name, animationList[currentAnimationIndex].args);
|
||||
}
|
||||
|
||||
let animationList = []
|
||||
|
||||
animationList.push({
|
||||
name: "PolyTwistColourWidth",
|
||||
args: [4, 400, 5, 14, -90, 100, "#e0ba10", "#e01044"],
|
||||
speed: 10,
|
||||
duration: 9*8
|
||||
})
|
||||
|
||||
animationList.push({
|
||||
name: "FloralPhyllo",
|
||||
args: [300, 180, 1000, "#e0ba10", "#e01044"],
|
||||
speed: 5,
|
||||
duration: 60*10
|
||||
})
|
||||
animationList.push({
|
||||
name: "EyePrototype",
|
||||
args: [0, 0, 0, 1, 800, 10, 1, 1, 0, 0, 0, 0, 1, "#e0ba10", "#e01044", "#e0ba10", "blue"],
|
||||
speed: 10,
|
||||
duration: 60 * 3
|
||||
})
|
||||
animationList.push({
|
||||
name: "Spiral1",
|
||||
args: [6, 240, 5, "#e0ba10",],
|
||||
speed: 10,
|
||||
duration: 60*5
|
||||
})
|
||||
animationList.push({
|
||||
name: "PolyTwistColourWidth",
|
||||
args: [8, 400, 5, 65, -90, 100, "black","#e0ba10"],
|
||||
speed: 5,
|
||||
duration: 9*8
|
||||
})
|
||||
animationList.push({
|
||||
name: "FloralPhyllo_Accident",
|
||||
args: [20, 240, "#e01044", "#e0ba10"],
|
||||
speed: 4,
|
||||
duration: 60
|
||||
})
|
||||
animationList.push({
|
||||
name: "Nodal_expanding",
|
||||
args: [5, 120, 56, 6, "#e01044", "#e0ba10", 5],
|
||||
speed: 20,
|
||||
duration: 60 * 5
|
||||
})
|
||||
animationList.push({
|
||||
name: "Spiral1",
|
||||
args: [50, 240, 3, "#e01044"],
|
||||
speed: 8,
|
||||
duration: 60 * 5
|
||||
})
|
||||
animationList.push({
|
||||
name: "Phyllotaxis",
|
||||
args: [13, 1000, 6650, 0, "#e01044", "#e0ba10"],
|
||||
speed: 2,
|
||||
duration: 60 * 5
|
||||
})
|
||||
animationList.push({
|
||||
name: "MaryFace",
|
||||
args: [-110, -140, 18, 160, 195, -30, 18, 160],
|
||||
speed: 10,
|
||||
duration: 3
|
||||
})
|
||||
animationList.push({
|
||||
name: "FloralAccident",
|
||||
args: [20, 240, "#e01044"],
|
||||
speed: 8,
|
||||
duration: 60
|
||||
})
|
||||
animationList.push({
|
||||
name: "Phyllotaxis",
|
||||
args: [13, 500, 200, 1, "#e01044", "#e0ba10"],
|
||||
speed: 15,
|
||||
duration: 60 * 10
|
||||
})
|
||||
animationList.push({
|
||||
name: "SquareTwist_angle",
|
||||
args: [400, 3, "#e0ba10", "#e01044"],
|
||||
speed: 10,
|
||||
duration: 40
|
||||
})
|
||||
animationList.push({
|
||||
name: "Phyllotaxis",
|
||||
args: [13, 0, 600, 2, "#e0ba10", "#e01044"],
|
||||
speed: 15,
|
||||
duration: 60 * 10
|
||||
})
|
||||
animationList.push({
|
||||
name: "EyePrototype",
|
||||
args: [0, 0, 0, 0, 1000, 10, 0, 0, 0, 0, 1, 1, 1, "#e0ba10", "#e01044", "#e0ba10", "black"],
|
||||
speed: 10,
|
||||
duration: 60 * 3
|
||||
})
|
||||
animationList.push({
|
||||
name: "MaryFace",
|
||||
args: [-110, -140, 18, 160, 195, -30, 18, 160],
|
||||
speed: 10,
|
||||
duration: 3
|
||||
})
|
||||
animationList.push({
|
||||
name: "EyePrototype",
|
||||
args: [0, 0, 0, 0, 1000, 15, 1, 0, 1, 0, 0, 1, 1, "#e01044", "#e0ba10", "#e01044", "#e01044"],
|
||||
speed: 10,
|
||||
duration: 60
|
||||
})
|
||||
animationList.push({
|
||||
name: "CircleExpand",
|
||||
args: [21, 150, 1, 1, "#e01044", "#e0ba10"],
|
||||
speed: 10,
|
||||
duration: 60
|
||||
})
|
||||
|
||||
let totalTime = 0;
|
||||
for (let i = 0; i < animationList.length; i++) {
|
||||
totalTime += animationList[i].duration;
|
||||
}
|
||||
console.log("Total time: " + totalTime / 60)
|
||||
|
||||
let currentAnimationIndex = 0;
|
||||
|
||||
updateDrawObj();
|
||||
|
||||
function render() {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
render_clear();
|
||||
console.log(rotation)
|
||||
if (rotation / deg_per_sec >= animationList[currentAnimationIndex].duration) {
|
||||
currentAnimationIndex += 1;
|
||||
if (currentAnimationIndex === animationList.length) {
|
||||
currentAnimationIndex = 0;
|
||||
}
|
||||
rotation = 0
|
||||
updateDrawObj();
|
||||
}
|
||||
|
||||
if (drawObj) {
|
||||
drawObj.draw(rotation);
|
||||
}
|
||||
|
|
@ -86,7 +205,8 @@ document
|
|||
let toolbarShowing = true;
|
||||
document.addEventListener("keydown", toggleSettings);
|
||||
|
||||
function manualToggleSettings(){
|
||||
manualToggleSettings();
|
||||
function manualToggleSettings() {
|
||||
console.log("hi")
|
||||
toolbarShowing = !toolbarShowing;
|
||||
let tb = document.getElementById("toolbar");
|
||||
|
|
@ -105,6 +225,29 @@ function toggleSettings(e) {
|
|||
paused = !paused;
|
||||
}
|
||||
|
||||
if (e.keyCode == '37') {
|
||||
// left arrow
|
||||
if (currentAnimationIndex === 0) {
|
||||
currentAnimationIndex = animationList.length - 1
|
||||
}
|
||||
else {
|
||||
currentAnimationIndex -= 1
|
||||
}
|
||||
updateDrawObj();
|
||||
rotation = 0
|
||||
}
|
||||
else if (e.keyCode == '39') {
|
||||
// right arrow
|
||||
if (currentAnimationIndex === animationList.length - 1) {
|
||||
currentAnimationIndex = 0
|
||||
}
|
||||
else {
|
||||
currentAnimationIndex += 1
|
||||
}
|
||||
updateDrawObj();
|
||||
rotation = 0
|
||||
}
|
||||
|
||||
let tb = document.getElementById("toolbar");
|
||||
if (toolbarShowing) {
|
||||
tb.style.display = "flex";
|
||||
|
|
|
|||
|
|
@ -98,10 +98,11 @@ class FloralPhyllo extends BaseShape {
|
|||
}
|
||||
}
|
||||
class Spiral1 extends BaseShape {
|
||||
constructor(sides, width, colour) {
|
||||
constructor(sides, width, lineWidth, colour) {
|
||||
super();
|
||||
this.sides = sides;
|
||||
this.width = width;
|
||||
this.lineWidth = lineWidth;
|
||||
this.colour = colour;
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +116,7 @@ class Spiral1 extends BaseShape {
|
|||
|
||||
for (let i = 1; i < this.sides + 1; i++) {
|
||||
end = stt + rad(rot);
|
||||
|
||||
ctx.lineWidth = this.lineWidth;
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width, this.width, stt + rad(rotation) - (stt - end) / 2, end + rad(rotation) + rad(n), 0);
|
||||
ctx.strokeStyle = this.colour;
|
||||
|
|
@ -190,7 +191,7 @@ class FloralPhyllo_Accident extends BaseShape {
|
|||
let x = r * Math.cos(a) + centerX;
|
||||
let y = r * Math.sin(a) + centerY;
|
||||
|
||||
drawEyelidAccident(x, y);
|
||||
drawEyelidAccident(x, y, this.colour1);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -246,11 +247,12 @@ class Phyllotaxis extends BaseShape {
|
|||
const startColor = [45, 129, 252];
|
||||
const endColor = [252, 3, 98];
|
||||
const distanceMultiplier = 3;
|
||||
const maxIterations = 200;
|
||||
const maxIterations = this.nMax;
|
||||
// angle=0;
|
||||
for (let n = 0; n < maxIterations; n++) {
|
||||
ctx.beginPath();
|
||||
const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
|
||||
// const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
|
||||
const nColor = LerpHex(this.colour1, this.colour2, n / this.nMax);
|
||||
|
||||
// const nAngle = n* angle ;
|
||||
// const nAngle = n*angle+ Math.sin(rad(n*1+angle*4000))/1 ;
|
||||
|
|
@ -259,20 +261,23 @@ class Phyllotaxis extends BaseShape {
|
|||
const xCoord = radius * Math.cos(nAngle) + centerX;
|
||||
const yCoord = radius * Math.sin(nAngle) + centerY;
|
||||
ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = colourToText(nColor);
|
||||
// ctx.fillStyle = colourToText(nColor);
|
||||
ctx.fillStyle = nColor;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
drawSpiral(angle) {
|
||||
angle /= 5000
|
||||
const startColor = [45, 129, 252];
|
||||
const endColor = [252, 3, 98];
|
||||
const startColor = [224, 186, 16];
|
||||
const endColor = [224, 16, 68];
|
||||
const distanceMultiplier = 2;
|
||||
const maxIterations = 1000;
|
||||
const maxIterations = this.nMax;
|
||||
|
||||
|
||||
for (let n = 0; n < maxIterations; n++) {
|
||||
const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
|
||||
// const nColor = lerpHex(this.colour1, this.colour2, Math.cos(rad(n / 2)));
|
||||
// const nColor = LerpHex(this.colour1, this.colour2, n / this.nMax);
|
||||
|
||||
const nAngle = n * angle + Math.sin(angle * n * 2);
|
||||
const radius = distanceMultiplier * n;
|
||||
|
|
@ -281,6 +286,7 @@ class Phyllotaxis extends BaseShape {
|
|||
|
||||
ctx.beginPath();
|
||||
ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
|
||||
// ctx.fillStyle = nColor;
|
||||
ctx.fillStyle = colourToText(nColor);
|
||||
ctx.fill();
|
||||
}
|
||||
|
|
@ -290,7 +296,7 @@ class Phyllotaxis extends BaseShape {
|
|||
draw(rotation) {
|
||||
rotation *= (this.speedMultiplier / 300)
|
||||
rotation += this.start
|
||||
const sizeMultiplier = this.nMax/(5-3)
|
||||
const sizeMultiplier = this.nMax / (5 - 3)
|
||||
if (this.wave === 1) {
|
||||
this.drawWave(rotation)
|
||||
}
|
||||
|
|
@ -307,7 +313,7 @@ class Phyllotaxis extends BaseShape {
|
|||
const y = r * Math.sin(a) + centerY;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, (n/sizeMultiplier)+3, 0, 2 * Math.PI);
|
||||
ctx.arc(x, y, (n / sizeMultiplier) + 3, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = ncolour;
|
||||
// ctx.fillStyle = colourToText(ncolour);
|
||||
ctx.fill();
|
||||
|
|
@ -443,7 +449,7 @@ class CircleExpand extends BaseShape {
|
|||
|
||||
|
||||
class EyePrototype extends BaseShape {
|
||||
constructor(x, y, rotate, flip, width, blink_speed, draw_spiral, spiral_full, draw_pupil, draw_expand, draw_hypno, line_width, colourPupil, colourSpiral, colourExpand) {
|
||||
constructor(x, y, rotate, flip, width, blink_speed, draw_spiral, spiral_full, draw_pupil, draw_expand, draw_hypno, draw_eyelid, line_width, colourPupil, colourSpiral, colourExpand, colourEyelid) {
|
||||
super();
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
|
|
@ -461,13 +467,15 @@ class EyePrototype extends BaseShape {
|
|||
this.draw_pupil = draw_pupil;
|
||||
this.draw_expand = draw_expand;
|
||||
this.draw_hypno = draw_hypno;
|
||||
this.draw_eyelid = draw_eyelid;
|
||||
this.colourPupil = colourPupil;
|
||||
this.colourSpiral = colourSpiral;
|
||||
this.colourExpand = colourExpand;
|
||||
this.centerPulse = new CircleExpand(10, 30, 1, 0, "#2D81FC", "#FC0362")
|
||||
this.colourEyelid = colourEyelid;
|
||||
this.centerPulse = new CircleExpand(20, 40, 0, 0, "#2D81FC", "#FC0362")
|
||||
}
|
||||
drawEyelid(rotation) {
|
||||
ctx.strokeStyle = "orange";
|
||||
ctx.strokeStyle = this.colourEyelid;
|
||||
let relCenterX = centerX + this.x;
|
||||
let relCenterY = centerY + this.y;
|
||||
rotation *= (this.speedMultiplier / 100)
|
||||
|
|
@ -578,7 +586,9 @@ class EyePrototype extends BaseShape {
|
|||
|
||||
ctx.fillStyle = "black";
|
||||
ctx.save();
|
||||
this.drawEyelid(outputRotation);
|
||||
if (this.draw_eyelid) {
|
||||
this.drawEyelid(outputRotation);
|
||||
}
|
||||
// squareCut();
|
||||
this.eyelidCut(outputRotation);
|
||||
// console.log(Math.floor(this.counter % this.width / 2))
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ class Spiral1 extends BaseShape {
|
|||
|
||||
for (let i = 1; i < this.sides + 1; i++) {
|
||||
end = stt + rad(rot);
|
||||
|
||||
ctx.lineWidth = 5
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width, this.width, stt + rad(rotation) - (stt - end) / 2, end + rad(rotation) + rad(n), 0);
|
||||
ctx.strokeStyle = this.colour;
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
// Get a reference to the canvas element
|
||||
const canvas = document.getElementById('canvas');
|
||||
|
||||
// Set up WebGL context
|
||||
const gl = canvas.getContext('webgl');
|
||||
// Set the canvas size and WebGL viewport
|
||||
canvas.width = 800;
|
||||
canvas.height = 800;
|
||||
// let centerX = canvas.width / 2;
|
||||
// let centerY = canvas.height / 2;
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
// Create vertex shader
|
||||
const vertexShaderSource = `
|
||||
attribute vec2 position;
|
||||
void main() {
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
// Create fragment shader using the code you wrote
|
||||
const fragmentShaderSource = `
|
||||
precision mediump float;
|
||||
uniform vec2 iResolution;
|
||||
uniform float iTime;
|
||||
|
||||
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
||||
vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
|
||||
vec2 uv0 = uv;
|
||||
vec3 colour = vec3(1.0, 1.5, 2.0);
|
||||
vec3 colour2 = vec3(0.2, 0.2, 1.0);
|
||||
float pi = 3.1415926;
|
||||
|
||||
for (float i = 0.0; i < 2.0; i++) {
|
||||
uv = fract(uv * 1.5) - 0.5;
|
||||
float distance = length(uv);
|
||||
|
||||
distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
|
||||
distance = abs(distance);
|
||||
distance = 0.02 / distance;
|
||||
|
||||
colour = mix(colour, colour2, length(uv));
|
||||
|
||||
colour *= distance;
|
||||
}
|
||||
|
||||
float distance = length(uv0);
|
||||
distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
|
||||
distance = abs(distance);
|
||||
distance = 0.02 / distance;
|
||||
|
||||
colour = mix(colour, colour2, length(uv0));
|
||||
colour *= distance;
|
||||
|
||||
fragColor = vec4(colour, 1.0);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
vec2 iResolution = vec2(${canvas.width.toFixed(1)}, ${canvas.height.toFixed(1)});
|
||||
float iTime = ${performance.now().toFixed(3)} / 1000.0;
|
||||
vec4 fragColor;
|
||||
mainImage(fragColor, fragCoord);
|
||||
gl_FragColor = fragColor;
|
||||
}
|
||||
`;
|
||||
|
||||
// Compile and link shaders
|
||||
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
|
||||
gl.shaderSource(vertexShader, vertexShaderSource);
|
||||
gl.compileShader(vertexShader);
|
||||
|
||||
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(fragmentShader, fragmentShaderSource);
|
||||
gl.compileShader(fragmentShader);
|
||||
|
||||
const program = gl.createProgram();
|
||||
gl.attachShader(program, vertexShader);
|
||||
gl.attachShader(program, fragmentShader);
|
||||
gl.linkProgram(program);
|
||||
gl.useProgram(program);
|
||||
|
||||
// Create vertex buffer
|
||||
const positionBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
|
||||
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
|
||||
gl.enableVertexAttribArray(positionAttributeLocation);
|
||||
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
// Set uniforms
|
||||
const iResolutionLocation = gl.getUniformLocation(program, 'iResolution');
|
||||
gl.uniform2f(iResolutionLocation, canvas.width, canvas.height);
|
||||
|
||||
// Render the shader
|
||||
function render() {
|
||||
gl.uniform1f(gl.getUniformLocation(program, 'iTime'), performance.now() / 1000.0);
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
render();
|
||||
|
|
@ -71,11 +71,11 @@ class EyePrototype extends BaseShape {
|
|||
vec3 colour = vec3(1.0, 1.5, 2.0);
|
||||
vec3 colour2 = vec3(0.2, 0.2, 1.0);
|
||||
float pi = 3.1415926;
|
||||
float pie = iVal1/10.0;
|
||||
float val1Div = iVal1/10.0;
|
||||
|
||||
|
||||
for (float i = 0.0; i < 2.0; i++) {
|
||||
uv = fract(uv * pie) - 0.5;
|
||||
uv = fract(uv * val1Div) - 0.5;
|
||||
float distance = length(uv);
|
||||
|
||||
distance = sin(distance * pi * 5.0 - iTime) / (pi * 5.0);
|
||||
|
|
|
|||
Loading…
Reference in New Issue