Merge pull request #111 from trifle-labs/105-face

small face change
trifle-labs · Apr 11, 2024 · 5f09d59 · 5f09d59
2 parents 00bdfb9 + 432dd2f
commit 5f09d59
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 53 deletions.
diff --git a/src/anybody.js b/src/anybody.js
@@ -42,7 +42,7 @@ export class Anybody extends EventEmitter {
       globalStyle: 'default', // 'default', 'psycho'
       timer: GAME_LENGTH * FPS,
       aimHelper: false,
-      target: 'outside', // 'outside' or 'inside'
+      target: 'inside', // 'outside' or 'inside'
       showLives: false, // true or false
       faceRotation: 'hitcycle', // 'time' or 'hitcycle' or 'mania'
       sfx: 'bubble' // 'space' or 'bubble'
@@ -483,7 +483,7 @@ export class Anybody extends EventEmitter {
     for (let i = 0; i < this.startingBodies; i++) {
       // cs.push(`hsla(${this.random(0, 360)}, 100%, 50%, ${this.opac})`)
 
-      cs.push(this.colorArrayToTxt(this.randomColor(50, 250)))
+      cs.push(this.colorArrayToTxt(this.randomColor()))
     }
 
     for (let i = 0; i < this.startingBodies; i++) {
@@ -542,7 +542,7 @@ export class Anybody extends EventEmitter {
       starLvl: b.starLvl?.toNumber(),
       maxStarLvl: b.maxStarLvl?.toNumber(),
       mintedBodyIndex: b.mintedBodyIndex.toNumber(),
-      c: this.colorArrayToTxt(this.randomColor(0, 200, bodyRNG))
+      c: this.colorArrayToTxt(this.randomColor(0, 359, bodyRNG))
     }
   }
 
@@ -551,13 +551,14 @@ export class Anybody extends EventEmitter {
     // return Math.floor(Math.random() * (upper - lower + 1)) + lower;
   }
 
-  randomColor(min = 0, max = 255, rng = this.rng) {
+  randomColor(min = 0, max = 359, rng = this.rng) {
     const color = []
+
     // let c = Math.floor(this.random(min, max, rng))
-    for (let i = 0; i < 3; i++) {
-      let c = this.random(min, max, rng)
-      color.push(c)
-    }
+    let c = this.random(min, max, rng)
+    color.push(c) // Hue
+    color.push(this.random(0, 100, rng) + '%') // Saturation
+    color.push(this.random(40, 80, rng) + '%') // Lightness
     return color
   }
   randomPosition() {

diff --git a/src/nft.js b/src/nft.js
@@ -8,7 +8,7 @@ q5.setup = () => {
   window.anybody = new Anybody(q5, {
     mode: 'game',
     // showLives: true,
-    target: 'inside',
+    // target: 'inside',
     // globalStyle: 'psycho',
     alreadyRun: Math.floor(Math.random() * 20000),
     // seed: 0n,

diff --git a/src/visuals.js b/src/visuals.js
@@ -212,7 +212,12 @@ export const Visuals = {
       this.p.blendMode(this.p.BLEND)
     }
 
-    if (this.mode == 'game' && this.target == 'inside' && !this.firstFrame) {
+    if (
+      this.mode == 'game' &&
+      this.target == 'inside' &&
+      !this.firstFrame &&
+      this.globalStyle !== 'psycho'
+    ) {
       for (let i = 0; i < this.bodies.length; i++) {
         const body = this.bodies[i]
         this.drawCenter(body)
@@ -222,7 +227,12 @@ export const Visuals = {
       this.drawBodies()
     }
 
-    if (this.mode == 'game' && this.target == 'outside' && !this.firstFrame) {
+    if (
+      this.mode == 'game' &&
+      this.target == 'outside' &&
+      !this.firstFrame &&
+      this.globalStyle !== 'psycho'
+    ) {
       for (let i = 0; i < this.bodies.length; i++) {
         const body = this.bodies[i]
         this.drawCenter(body)
@@ -852,21 +862,6 @@ export const Visuals = {
     this.p.image(this.bodiesGraphic, 0, 0)
     this.bodiesGraphic.clear()
   },
-
-  convertColor(c, isGrey = true) {
-    const cc = c.replace('rgba(', '').replace(')', '')
-    const r =
-      parseInt(cc.split(',')[0]) +
-      Math.floor((isGrey ? this.getGrey() : this.getNotGrey()) / 2)
-    const g =
-      parseInt(cc.split(',')[1]) +
-      Math.floor((isGrey ? this.getGrey() : this.getNotGrey()) / 2)
-    const b =
-      parseInt(cc.split(',')[2]) +
-      Math.floor((isGrey ? this.getGrey() : this.getNotGrey()) / 2)
-    return [r, g, b]
-    // this.bodiesGraphic.color(r, g, b)
-  },
   componentToHex(c) {
     var hex = parseInt(c).toString(16)
     return hex.length == 1 ? '0' + hex : hex
@@ -891,16 +886,17 @@ export const Visuals = {
       : null
   },
 
-  invertColor(c) {
-    let [r, g, b] = c.replace('rgba(', '').split(',').slice(0, 3)
-    const hexColor = this.rgbToHex(r, g, b)
-    const invert = (parseInt(hexColor) ^ 0xffffff).toString(16).padStart(6, '0')
-    const invertRGB = this.hexToRgb(invert)
-    // r = r - 255
-    // g = g - 255
-    // b = b - 255
-    const newColor = this.p.color(invertRGB.r, invertRGB.g, invertRGB.b)
-    return newColor
+  invertColorRGB(c) {
+    throw new Error(`invert color is not meant for HSL colors (${c})`)
+    // let [r, g, b] = c.replace('rgba(', '').split(',').slice(0, 3)
+    // const hexColor = this.rgbToHex(r, g, b)
+    // const invert = (parseInt(hexColor) ^ 0xffffff).toString(16).padStart(6, '0')
+    // const invertRGB = this.hexToRgb(invert)
+    // // r = r - 255
+    // // g = g - 255
+    // // b = b - 255
+    // const newColor = this.p.color(invertRGB.r, invertRGB.g, invertRGB.b)
+    // return newColor
   },
 
   ghostEyes(radius) {
@@ -1060,7 +1056,7 @@ export const Visuals = {
     this.bodiesGraphic.stroke(c)
     this.bodiesGraphic.text(face, -radius / 2.4, radius / 8)
 
-    const invertedC = this.invertColor(c)
+    const invertedC = this.invertColorRGB(c)
     this.bodiesGraphic.fill(invertedC)
     this.bodiesGraphic.noStroke()
     this.bodiesGraphic.text(face, -radius / 2.4, radius / 8)
@@ -1075,7 +1071,7 @@ export const Visuals = {
   getTintFromColor(c) {
     const cc = c
       .split(',')
-      .map((c) => parseFloat(c.replace(')', '').replace('rgba(', '')))
+      .map((c) => parseFloat(c.replace(')', '').replace('hsla(', '')))
     return [cc[0], cc[1], cc[2], cc[2]]
   },
 
@@ -1172,6 +1168,9 @@ export const Visuals = {
     this.bodiesGraphic.noStroke()
     this.bodiesGraphic.fill(body.c)
     this.bodiesGraphic.ellipse(0, offset, radius, radius)
+    if (this.globalStyle == 'psycho' && this.target == 'inside') {
+      this.drawCenter(body, this.bodiesGraphic, 0, offset)
+    }
   },
 
   moveAndRotate_PopAfter(graphic, x, y, v) {
@@ -1587,7 +1586,7 @@ export const Visuals = {
           const hueColor = (parseInt(c.split(',')[1]) + this.frames) % 360
           finalColor = this.p.color(hueColor, 60, 100) // Saturation and brightness at 100 for pure spectral colors
         } else {
-          finalColor = c //this.convertColor(c)
+          finalColor = c
         }
         this.p.fill(finalColor)
         // if (this.mode == 'nft') {
@@ -1639,32 +1638,43 @@ export const Visuals = {
     }
   },
 
-  drawCenter(b) {
+  brighten(c, amount = 20) {
+    let cc = c
+      .split(',')
+      .map((c) => parseFloat(c.replace(')', '').replace('hsla(', '')))
+    cc[2] = cc[2] + amount
+    cc[1] = cc[1] + '%'
+    cc[2] = cc[2] + '%'
+    return `hsla(${cc.join(',')})`
+  },
+
+  drawCenter(b, p = this.p, x, y) {
     // this.p.blendMode(this.p.DIFFERENCE)
-    this.p.noStroke()
-    const x = b.position.x
-    const y = b.position.y
+    p.noStroke()
+    x = x == undefined ? b.position.x : x
+    y = y == undefined ? b.position.y : y
     const r = b.radius * 4
     if (r == 0) return
-    const c = b.c?.replace(this.opac, '1')
+    let c = this.brighten(b.c).replace(this.opac, 1)
+
     if (this.target == 'outside') {
-      this.p.fill(c)
-      this.p.ellipse(x, y, r)
+      p.fill(c)
+      p.ellipse(x, y, r)
       const star = this.starSVG[b.maxStarLvl]
-      this.p.image(star, x - r / 2, y - r / 2, r, r)
+      p.image(star, x - r / 2, y - r / 2, r, r)
     } else {
-      this.p.fill(c)
-      this.p.strokeWeight(2)
-      this.p.stroke('white')
-      this.p.ellipse(x, y, r)
+      p.fill(c)
+      // p.strokeWeight(2)
+      // p.stroke('white')
+      p.ellipse(x, y, r)
     }
-    // this.p.blendMode(this.p.BLEND)
+    // p.blendMode(p.BLEND)
   },
 
   colorArrayToTxt(cc) {
     // let cc = baseColor.map(c => c + start + (chunk * i))
     cc.push(this.opac)
-    cc = `rgba(${cc.join(',')})`
+    cc = `hsla(${cc.join(',')})`
     return cc
   },