loop complete

This commit is contained in:
Sam 2023-09-09 17:19:22 +12:00
parent 8928173f84
commit 7ef6afb922
7 changed files with 201 additions and 147 deletions

View File

@ -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>

View File

@ -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();
}

View File

@ -16,6 +16,9 @@ let paused = true;
render_clear();
let drawObj = null;
function createInstance(className, args) {
const classMap = {
PolyTwistColourWidth: PolyTwistColourWidth,
@ -42,23 +45,129 @@ 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
deg_per_sec = animationList[currentAnimationIndex].speed;
drawObj = createInstance(animationList[currentAnimationIndex].name, animationList[currentAnimationIndex].args);
}
// 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);
let animationList = []
// drawObj = await createShapeWithRandomProperties(813311281, config1);
console.log(drawObj)
drawObj.initialise(config);
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();
@ -66,6 +175,16 @@ 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,6 +205,7 @@ document
let toolbarShowing = true;
document.addEventListener("keydown", toggleSettings);
manualToggleSettings();
function manualToggleSettings() {
console.log("hi")
toolbarShowing = !toolbarShowing;
@ -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";

View File

@ -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();
}
@ -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();
if (this.draw_eyelid) {
this.drawEyelid(outputRotation);
}
// squareCut();
this.eyelidCut(outputRotation);
// console.log(Math.floor(this.counter % this.width / 2))

View File

@ -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;

View File

@ -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();

View File

@ -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);