diff --git a/Larry the snail/index.html b/Larry the snail/index.html index c4748c3..cf97691 100644 --- a/Larry the snail/index.html +++ b/Larry the snail/index.html @@ -13,18 +13,6 @@

diff --git a/Larry the snail/js/helper.js b/Larry the snail/js/helper.js index cc2201b..ea2c21e 100644 --- a/Larry the snail/js/helper.js +++ b/Larry the snail/js/helper.js @@ -135,7 +135,7 @@ const hatConfig = { }; const foodConfig = { - apple: { sizeMult: 3.5, n: 4 }, + apple: { sizeMult: 0.25, n: 4 }, nothing: { sizeMult: 2, n: 5 }, }; diff --git a/Larry the snail/js/index.js b/Larry the snail/js/index.js index f374a65..cc170a4 100644 --- a/Larry the snail/js/index.js +++ b/Larry the snail/js/index.js @@ -20,18 +20,7 @@ let drawObj = null; function createInstance(className, args) { const classMap = { Larry: Larry, - NewWave: NewWave, - PolyTwistColourWidth: PolyTwistColourWidth, - FloralPhyllo: FloralPhyllo, - Spiral1: Spiral1, - FloralAccident: FloralAccident, - FloralPhyllo_Accident: FloralPhyllo_Accident, - Nodal_expanding: Nodal_expanding, - Phyllotaxis:Phyllotaxis, - SquareTwist_angle:SquareTwist_angle, - EyePrototype:EyePrototype, - CircleExpand:CircleExpand, - MaryFace:MaryFace, + // Add more class constructors here as needed }; diff --git a/Larry the snail/js/objects.js b/Larry the snail/js/objects.js index 6727009..2e53460 100644 --- a/Larry the snail/js/objects.js +++ b/Larry the snail/js/objects.js @@ -53,7 +53,7 @@ class Larry extends BaseShape { this.headHeight = 24; this.headOffsetX = 54 - this.headWidth * this.magnitude / 2; this.headOffsetY = this.bodyHeight * this.magnitude - 7; // Bottom of the body minus 7 pixels - this.globalX = centerX; + this.globalX = Math.random() * 1000; this.globalY = centerY; this.localX = 0; this.localY = 0; @@ -80,6 +80,10 @@ class Larry extends BaseShape { this.hatXoffset = 0; this.hatYoffset = 0; + + this.foodXoffset = 0; + this.foodYoffset = 0; + this.foodSizeMuliplier = 0; this.lastTimestamp = 0; } @@ -117,11 +121,13 @@ class Larry extends BaseShape { const n = this.eatDuration console.log(adjustedTimestamp) console.log((-adjustedTimestamp + 10 * n) / 10) - console.log(Math.floor((-adjustedTimestamp + (10/(this.eatSpeed/100)) * n) / (10/(this.eatSpeed/100)))) - const frame = Math.floor((-adjustedTimestamp + (10/(this.eatSpeed/100)) * n) / (10/(this.eatSpeed/100))) - this.foodImage.src = "larry_photos/foods/" + document.getElementById('elselectedFood').value+ frame + ".png"; - ctx.drawImage(this.foodImage, centerX, centerY,200,226.5) + console.log(Math.floor((-adjustedTimestamp + (10 / (this.eatSpeed / 100)) * n) / (10 / (this.eatSpeed / 100)))) + const frame = Math.floor((-adjustedTimestamp + (10 / (this.eatSpeed / 100)) * n) / (10 / (this.eatSpeed / 100))) + this.foodImage.src = "larry_photos/foods/" + document.getElementById('elselectedFood').value + frame + ".png"; + this.drawCrosshair(bodyX + this.foodXoffset, bodyY + this.foodYoffset, 30) + ctx.drawImage(this.foodImage, bodyX + this.foodXoffset, bodyY + this.foodYoffset, this.foodImage.width * this.foodSizeMuliplier, this.foodImage.height * this.foodSizeMuliplier) } + ctx.drawImage(this.headImage, headX, headY, this.headWidth * this.magnitude, this.headHeight * this.magnitude); // Draw hat if any @@ -151,9 +157,21 @@ class Larry extends BaseShape { startEating() { console.log("Larry starts eating"); - this.foodImage.src = document.getElementById('elselectedFood').value + const foodSelection = document.getElementById('elselectedFood').value this.isEating = true; - this.eatEndTimestamp = this.lastTimestamp + (parseInt(this.eatDuration)/(6*(this.eatSpeed/100))) * 1000 / (1000 / 60); + this.eatEndTimestamp = this.lastTimestamp + (parseInt(this.eatDuration) / (6 * (this.eatSpeed / 100))) * 1000 / (1000 / 60); + + if (foodSelection === "") { + this.foodXoffset = 0; + this.foodYoffset = 0; + } else { + this.foodImage.src = "larry_photos/foods/" + document.getElementById('elselectedFood').value + 0 + ".png"; + const offsets = foodConfig[foodSelection] || { sizeMult: 0, n: 0 }; + this.foodSizeMuliplier = offsets.sizeMult; + this.foodXoffset = (this.bodyWidth * this.magnitude) ; + this.foodYoffset = bodyY + (this.bodyHeight * this.magnitude - 7 * this.magnitude) - this.headHeight * this.magnitude - (this.foodImage.height/2) ; + + } console.log(this.eatEndTimestamp) // setTimeout(() => { // this.isEating = false; @@ -205,643 +223,3 @@ class Larry extends BaseShape { } } - -class PolyTwistColourWidth extends BaseShape { - constructor(sides, width, line_width, depth, rotation, speedMultiplier, colour1, colour2) { - super(); - this.sides = sides; - this.width = width; - this.line_width = line_width; - this.depth = depth; - this.rotation = rotation; - this.speedMultiplier = speedMultiplier; - this.colour1 = colour1; - this.colour2 = colour2; - } - - draw(rotation) { - rotation *= (this.speedMultiplier / 100) - let out_angle = 0; - const innerAngle = 180 - ((this.sides - 2) * 180) / this.sides; - const scopeAngle = rotation - (innerAngle * Math.floor(rotation / innerAngle)); - - if (scopeAngle < innerAngle / 2) { - out_angle = innerAngle / (2 * Math.cos((2 * Math.PI * scopeAngle) / (3 * innerAngle))) - innerAngle / 2; - } else { - out_angle = -innerAngle / (2 * Math.cos(((2 * Math.PI) / 3) - ((2 * Math.PI * scopeAngle) / (3 * innerAngle)))) + (innerAngle * 3) / 2; - } - let minWidth = Math.sin(rad(innerAngle / 2)) * (0.5 / Math.tan(rad(innerAngle / 2))) * 2; - - let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90 + innerAngle / 2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle))); - - for (let i = 0; i < this.depth; i++) { - const fraction = i / this.depth; - const ncolour = LerpHex(this.colour1, this.colour2, fraction); - DrawPolygon(this.sides, this.width * widthMultiplier ** i, out_angle * i + this.rotation, ncolour, this.line_width); - } - } -} -class FloralPhyllo extends BaseShape { - constructor(width, depth, start, colour1, colour2) { - super(); - this.width = width; - this.depth = depth; - this.start = start; - this.colour1 = colour1; - this.colour2 = colour2; - this.speedMultiplier = 500; - } - - draw(rotation) { - rotation *= (this.speedMultiplier / 500) - rotation += this.start - // var c = 24; //something to do with width. but not width - var c = 1; //something to do with width. but not width - //dont make larger than 270 unless altering the number of colours in lerpedColours - for (let n = this.depth; n > 0; n -= 1) { - let colVal = waveNormal(n, this.depth) - let ncolour = LerpHex(this.colour1, this.colour2, n / this.depth); - const a = n * rotation / 1000; //137.5; - const r = c * Math.sqrt(n); - const x = r * Math.cos(a) + centerX; - const y = r * Math.sin(a) + centerY; - - drawEyelid(n * 2.4 + 40, x, y, ncolour); - } - } -} -class Spiral1 extends BaseShape { - constructor(sides, width, colour) { - super(); - this.sides = sides; - this.width = width; - this.colour = colour; - } - - draw(rotation) { - rotation *= (this.speedMultiplier / 100) - var rot = Math.round((this.sides - 2) * 180 / this.sides * 2) - var piv = 360 / this.sides; - var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation); - var end = 0; - var n = this.width / ((this.width / 10) * (this.width / 10)) //pixel correction for mid leaf - - 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; - ctx.stroke(); - - - 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), end - (end - stt) / 2 + rad(n) - rad(rotation), 0); - ctx.strokeStyle = this.colour; - ctx.stroke(); - - - stt = end + -(rad(rot - piv)) //+rad(30); - } - - } -} - -class FloralAccident extends BaseShape { - constructor(sides, width, colour) { - super(); - this.sides = sides; - this.width = width; - this.colour = colour; - } - - draw(rotation) { - rotation *= (this.speedMultiplier / 100) - var rot = Math.round((this.sides - 2) * 180 / this.sides * 2) - var piv = 360 / this.sides; - var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation); - var end = 0; - var n = this.width / ((this.width / 10) * (this.width / 10)) //pixel correction for mid leaf - - for (let i = 1; i < this.sides + 1; i++) { - end = stt + rad(rot); - - 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 - (stt - end + rad(rotation)) / 2, end + rad(n), 0); - ctx.strokeStyle = this.colour; - ctx.stroke(); - - - 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, end - (end - stt - rad(rotation)) / 2 + rad(n), 0); - ctx.strokeStyle = this.colour; - ctx.stroke(); - - - stt = end + -(rad(rot - piv)) //+rad(30); - } - - } -} -class FloralPhyllo_Accident extends BaseShape { - constructor(sides, width, colour1, colour2) { - super(); - this.sides = sides; - this.width = width; - this.colour1 = colour1; - this.colour2 = colour2; - } - - draw(rotation) { - rotation *= (this.speedMultiplier / 100) - var c = 24; //something to do with width. but not width - - for (let n = 0; n < 300; n += 1) { - let ncolour = LerpHex(this.colour1, this.colour2, Math.cos(rad(n / 2))); - let a = n * (rotation / 1000 + 100); //137.5; - let r = c * Math.sqrt(n); - let x = r * Math.cos(a) + centerX; - let y = r * Math.sin(a) + centerY; - - drawEyelidAccident(x, y); - - } - } -} -class Nodal_expanding extends BaseShape { - constructor(expand, points, start, line_width, colour1, colour2, colour_change) { - super(); - this.expand = expand; - this.points = points; - this.start = start; - this.line_width = line_width; - this.colour1 = colour1; - this.colour2 = colour2; - this.colour_change = colour_change - } - - draw(rotation) { - rotation *= (this.speedMultiplier / 1000) - var angle = (360 / 3000 * rotation) + this.start //2000 controls speed - - var length = this.expand; - - for (let z = 1; z <= this.points; z++) { //why specifically 2500 - ctx.beginPath(); - let ncolour = LerpHex(this.colour1, this.colour2, z / this.points); - - ctx.moveTo(centerX + (Math.cos(rad(angle * (z - 1) + 0)) * (length - this.expand)), centerY + (Math.sin(rad(angle * (z - 1) + 0)) * (length - this.expand))); - ctx.lineTo(centerX + (Math.cos(rad(angle * z + 0)) * length), centerY + (Math.sin(rad(angle * z + 0)) * length)); - length += this.expand; - ctx.lineWidth = this.line_width;//try 1 - ctx.strokeStyle = ncolour; - ctx.lineCap = "round" - // ctx.strokeStyle = colourToText(ncolour); - console.log(ncolour) - ctx.stroke(); - } - - - } -} -class Phyllotaxis extends BaseShape { - constructor(width, start, nMax, wave, colour1, colour2) { - super(); - this.width = width; - this.start = start; - this.nMax = nMax; - this.wave = wave; - this.colour1 = colour1; - this.colour2 = colour2; - } - drawWave(angle) { - angle /= 1000 - const startColor = [45, 129, 252]; - const endColor = [252, 3, 98]; - const distanceMultiplier = 3; - const maxIterations = 200; - // angle=0; - for (let n = 0; n < maxIterations; n++) { - ctx.beginPath(); - const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2))); - - // const nAngle = n* angle ; - // const nAngle = n*angle+ Math.sin(rad(n*1+angle*4000))/1 ; - const nAngle = n * angle + Math.sin(rad(n * 1 + angle * 40000)) / 2; - const radius = distanceMultiplier * n; - 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.fill(); - } - } - drawSpiral(angle) { - angle /= 5000 - const startColor = [45, 129, 252]; - const endColor = [252, 3, 98]; - const distanceMultiplier = 2; - const maxIterations = 1000; - - - for (let n = 0; n < maxIterations; n++) { - const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2))); - - const nAngle = n * angle + Math.sin(angle * n * 2); - const radius = distanceMultiplier * n; - const xCoord = radius * Math.cos(nAngle) + centerX; - const yCoord = radius * Math.sin(nAngle) + centerY; - - ctx.beginPath(); - ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI); - ctx.fillStyle = colourToText(nColor); - ctx.fill(); - } - } - - // Draw_nodal(300, 100, 31, rotation, "blue"); - draw(rotation) { - rotation *= (this.speedMultiplier / 300) - rotation += this.start - const sizeMultiplier = this.nMax / (5 - 3) - if (this.wave === 1) { - this.drawWave(rotation) - } - else if (this.wave === 2) { - this.drawSpiral(rotation) - } - else { - for (let n = 0; n < this.nMax; n += 1) { - const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax); - // const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2); - const a = n * (rotation / 1000)//137.5; - const r = this.width * Math.sqrt(n); - const x = r * Math.cos(a) + centerX; - const y = r * Math.sin(a) + centerY; - - ctx.beginPath(); - ctx.arc(x, y, (n / sizeMultiplier) + 3, 0, 2 * Math.PI); - ctx.fillStyle = ncolour; - // ctx.fillStyle = colourToText(ncolour); - ctx.fill(); - // console.log(this.c) - } - } - } -} -class SquareTwist_angle extends BaseShape { - constructor(width, line_width, colour1) { - super(); - this.width = width; - this.line_width = line_width; - this.colour1 = colour1; - } - drawSquare(angle, size, colour) { - ctx.save(); - ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX)); - ctx.rotate(rad(angle + 180)); - ctx.beginPath(); - ctx.strokeStyle = colour; - ctx.lineWidth = this.line_width; - ctx.rect(-size / 2, -size / 2, size, size); - ctx.stroke(); - ctx.restore(); - } - // DrawSquareTwist_angle(400,0,rotation,"red") - draw(rotation) { - rotation *= (this.speedMultiplier / 100) - let out_angle = rotation; - let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (130 - out_angle + 90 * Math.floor(out_angle / 90)))) + 0.5 - - for (let i = 0; i < 25; i++) { - this.drawSquare(rotation * i, this.width * widthMultiplier ** i, this.colour1) - } - - } -} - -class CircleExpand extends BaseShape { - constructor(nCircles, gap, linear, heart, colour1, colour2) { - super(); - this.nCircles = nCircles; - this.gap = gap; - this.linear = linear; - this.heart = heart; - this.colour1 = colour1; - this.colour2 = colour2 - } - lerpColor(a, b, amount) { - var ah = +a.replace('#', '0x'), - ar = ah >> 16, ag = ah >> 8 & 0xff, ab = ah & 0xff, - bh = +b.replace('#', '0x'), - br = bh >> 16, bg = bh >> 8 & 0xff, bb = bh & 0xff, - rr = ar + amount * (br - ar), - rg = ag + amount * (bg - ag), - rb = ab + amount * (bb - ab); - - return '#' + ((1 << 24) + (rr << 16) + (rg << 8) + rb | 0).toString(16).slice(1); - } - - arraySort(x, y) { - if (x.r > y.r) { - return 1; - } - if (x.r < y.r) { - return -1; - } - return 0; - } - drawHeart(w, colour) { - // var w = 200 - ctx.strokeStyle = "black"; - ctx.fillStyle = colour; - ctx.lineWidth = 1; - var x = centerX - w / 2; - let y = centerY - w / 2 - ctx.beginPath(); - ctx.moveTo(x, y + w / 4); - ctx.quadraticCurveTo(x, y, x + w / 4, y); - ctx.quadraticCurveTo(x + w / 2, y, x + w / 2, y + w / 5); - ctx.quadraticCurveTo(x + w / 2, y, x + w * 3 / 4, y); - ctx.quadraticCurveTo(x + w, y, x + w, y + w / 4); - ctx.quadraticCurveTo(x + w, y + w / 2, x + w * 3 / 4, y + w * 3 / 4); - ctx.lineTo(x + w / 2, y + w); - ctx.lineTo(x + w / 4, y + w * 3 / 4); - ctx.quadraticCurveTo(x, y + w / 2, x, y + w / 4); - ctx.stroke(); - ctx.fill(); - } - - draw(rotation) { - rotation *= (0.9) - ctx.strokeWeight = 1; - ctx.lineWidth = 1; - let arrOfWidths = [] - let arrOfco = [] - let intRot; - if (this.linear) { - intRot = Math.floor(rotation * 30) / 100 - } - else { - intRot = Math.sin(rad(Math.floor(rotation * 30) / 4)) + rotation / 4 - } - - for (let i = 0; i < this.nCircles; i++) { - const width = this.gap * ((intRot + i) % this.nCircles); - const colour = (Math.sin(rad(i * (360 / this.nCircles) - 90)) + 1) / 2 - arrOfWidths.push({ r: width, c: colour }); - } - - let newArr = arrOfWidths.sort(this.arraySort) - - for (let i = this.nCircles - 1; i >= 0; i--) { - let newColour = this.lerpColor(this.colour1, this.colour2, newArr[i].c) - - if (this.heart) { - this.drawHeart(newArr[i].r, newColour) - } - else { - ctx.beginPath(); - ctx.arc(centerX, centerY, newArr[i].r, 0, 2 * Math.PI); - ctx.fillStyle = newColour; - ctx.fill(); - ctx.stokeStyle = "black"; - ctx.stroke(); - - } - } - - } -} - - -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) { - super(); - this.x = x; - this.y = y; - this.rotate = rotate; - this.flip = flip - this.width = width; - this.blink_speed = blink_speed; - this.line_width = line_width; - this.step = 0; - this.opening = true; - this.counter = 0; - this.cooldown = 0; - this.draw_spiral = draw_spiral; - this.spiral_full = spiral_full; - this.draw_pupil = draw_pupil; - this.draw_expand = draw_expand; - this.draw_hypno = draw_hypno; - this.colourPupil = colourPupil; - this.colourSpiral = colourSpiral; - this.colourExpand = colourExpand; - this.centerPulse = new CircleExpand(10, 30, 1, 0, "#2D81FC", "#FC0362") - } - drawEyelid(rotation) { - ctx.strokeStyle = "orange"; - let relCenterX = centerX + this.x; - let relCenterY = centerY + this.y; - rotation *= (this.speedMultiplier / 100) - ctx.lineWidth = 1; - ctx.beginPath(); - let newPoint = 0 - let newPoint1 = 0 - let addedRotate = this.flip ? 90 : 0 - newPoint = rotatePoint(- this.width / 2, 0, this.rotate + addedRotate) - ctx.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]); - newPoint = rotatePoint(0, - rotation / 400 * this.width, this.rotate + addedRotate) - newPoint1 = rotatePoint(this.width / 2, 0, this.rotate + addedRotate) - ctx.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]); - - newPoint = rotatePoint(- this.width / 2, 0, this.rotate + addedRotate) - ctx.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]); - newPoint = rotatePoint(0, + rotation / 400 * this.width, this.rotate + addedRotate) - newPoint1 = rotatePoint(this.width / 2, 0, this.rotate + addedRotate) - ctx.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]); - ctx.stroke(); - } - eyelidCut(rotation) { - let relCenterX = centerX + this.x; - let relCenterY = centerY + this.y; - let newPoint = 0 - let newPoint1 = 0 - let addedRotate = this.flip ? 90 : 0 - // ctx.lineWidth = 1; - let squarePath = new Path2D(); - newPoint = rotatePoint(- this.width / 2, 0, this.rotate + addedRotate) - squarePath.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]); - newPoint = rotatePoint(0, - rotation / 400 * this.width, this.rotate + addedRotate) - newPoint1 = rotatePoint(this.width / 2, 0, this.rotate + addedRotate) - squarePath.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]); - - newPoint = rotatePoint(- this.width / 2, 0, this.rotate + addedRotate) - squarePath.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]); - newPoint = rotatePoint(0, + rotation / 400 * this.width, this.rotate + addedRotate) - newPoint1 = rotatePoint(this.width / 2, 0, this.rotate + addedRotate) - squarePath.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]); - - ctx.clip(squarePath); - } - drawGrowEye(step) { - // console.log(step) - ctx.strokeStyle = this.colourExpand - ctx.beginPath(); - ctx.lineWidth = 5; - ctx.arc(centerX + this.x, centerY + this.y, step, 0, 2 * Math.PI); - ctx.stroke(); - } - drawCircle(step) { - ctx.strokeStyle = this.colourPupil - ctx.beginPath(); - ctx.lineWidth = 5; - ctx.arc(centerX + this.x, centerY + this.y, step, 0, 2 * Math.PI); - ctx.stroke(); - } - - drawSpiral(step) { - ctx.strokeStyle = this.colourSpiral; - let a = 1 - let b = 5 - ctx.moveTo(centerX, centerY); - ctx.beginPath(); - let max = this.spiral_full ? this.width : this.width / 2 - for (let i = 0; i < max; i++) { - let angle = 0.1 * i; - let x = centerX + (a + b * angle) * Math.cos(angle + step / 2); - let y = centerY + (a + b * angle) * Math.sin(angle + step / 2); - - ctx.lineTo(x + this.x, y + this.y); - } - ctx.lineWidth = 3; - ctx.stroke(); - } - stepFunc() { - if (this.cooldown != 0) { - this.cooldown--; - } else { - if (this.opening == true) { - if (this.step >= 200) { - this.cooldown = 200; - this.opening = false; - this.step -= this.blink_speed; - } else { - this.step += this.blink_speed; - } - } else { - if (this.step <= 0) { - this.opening = true; - this.step += this.blink_speed; - } else { - this.step -= this.blink_speed; - } - } - } - } - - draw(rotation) { - let speedMult = 50 - console.log(this.blink_speed) - let waitTime = this.blink_speed - let cap = 200 - let d = waitTime * speedMult * 10 - let a = cap * 2 + d - let outputRotation = Math.min(Math.abs((Math.floor(rotation * speedMult) % a) - a / 2 - d / 2), cap) - - ctx.fillStyle = "black"; - ctx.save(); - this.drawEyelid(outputRotation); - // squareCut(); - this.eyelidCut(outputRotation); - // console.log(Math.floor(this.counter % this.width / 2)) - if (Math.floor(this.counter % (this.width / 4)) === 0) { - this.counter = 0; - } - ctx.fillStyle = "black"; - ctx.fillRect(this.x - this.width / 2 + centerX, 0, this.width, ctx.canvas.height); - if (this.draw_expand) { - this.drawGrowEye(this.width / 4 + this.counter); - } - - if (this.draw_hypno) { - this.centerPulse.draw(rotation) - } - if (this.draw_spiral) { - this.drawSpiral(rotation) - } - if (this.draw_pupil) { - this.drawCircle(this.width / 4); - } - - ctx.restore(); - - this.stepFunc(); - this.counter++; - } -} -class MaryFace extends BaseShape { - constructor(x1, y1, rotate1, width1, x2, y2, rotate2, width2) { - super(); - this.x1 = x1; - this.y1 = y1; - this.rotate1 = rotate1; - this.width1 = width1; - this.x2 = x2; - this.y2 = y2; - this.rotate2 = rotate2; - this.width2 = width2; - this.eye1 = new EyePrototype(x1, y1, rotate1, 0, width1, 10, 1, 1, 0, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb") - this.eye2 = new EyePrototype(x2, y2, rotate2, 0, width2, 10, 1, 1, 0, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb") - // this.eye3 = new EyePrototype(112, -280, rotate2+2,1, width2, 10, 1, 1, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb") - this.eye3 = new EyePrototype(110, -280, rotate2 + 2, 1, width2, 10, 1, 1, 0, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")//maybe - } - - draw(rotation) { - let img = new Image(); - img.src = "maryFace.png"; - - ctx.drawImage(img, centerX - img.width / 2, centerY - img.height / 2); - this.eye1.draw(rotation); - this.eye2.draw(rotation); - this.eye3.draw(rotation); - } -} -class NewWave extends BaseShape { - constructor(width, sides, step, lineWidth, limiter) { - super(); - this.width = width - this.sides = sides; - this.step = step; - this.lineWidth = lineWidth; - this.limiter = limiter; - } - - draw(rotation) { - rotation *= this.speedMultiplier / 400 - ctx.lineWidth = this.lineWidth - for (let j = 0; j < this.sides; j++) { - const radRotation = rad(360 / this.sides * j) - const inverter = 1 - (j % 2) * 2 - let lastX = centerX - let lastY = centerY - for (let i = 0; i < this.width; i += this.step) { - - ctx.beginPath(); - ctx.moveTo(lastX, lastY); - ctx.strokeStyle = colourToText(lerpRGB([255, 51, 170], [51, 170, 255], i / this.width)) - const x = i - const y = (Math.sin(-i * inverter / 30 + rotation * inverter) * i / (this.limiter / 100)) - - const xRotated = x * Math.cos(radRotation) - y * Math.sin(radRotation) - const yRotated = x * Math.sin(radRotation) + y * Math.cos(radRotation) - lastX = centerX + xRotated; - lastY = centerY + yRotated; - ctx.lineTo(centerX + xRotated, centerY + yRotated); - ctx.stroke(); - } - } - - } -} -