朵拉 发表于 2026-8-30 21:22

慢品人间烟火气

<style>
#papa{
      position: relative;
      width: 1286px;
      height: 720px;
      margin-left:-300px;
      margin-top:30px;
      border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
      background:#000 url('https://pan.suyanw.cn/view.php/bcbd61a9939e7dd8b31c3d13539f400d.jpg')no-repeat center/cover;
      overflow: hidden;
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
#c{
mix-blend-mode: darken;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.lrc{position: absolute;z-index: 90;transform:rotate(0deg);
    width: 960px;
    height: 160px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
      overflow: hidden;
    display: block;
    margin: 360px 40px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #00fff0;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;

</style>

<div id="papa">
<canvas id="c"></canvas>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
<audio id="aud" src="https://pan.suyanw.cn/view.php/b8a8d386d4f4009aff04df03feb58694.mp3"loopautoplay ></audio>
</div>
<script>
mdiv.onclick = () => aud.paused ? aud.play(): aud.pause();
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';

</script>
<script >
c = document.querySelector('#c')
c.width = 1980
c.height = 1080
x = c.getContext('2d')
C = Math.cos
S = Math.sin
t = 0
T = Math.tan

rsz=window.onresize=()=>{
setTimeout(()=>{
   if( document.papa.clientWidth > document.papa.clientHeight*1.77777778){
      c.style.height = '100vh'
      setTimeout(()=>c.style.width = c.clientHeight*1.77777778+'px',0)
    } else{
      c.style.width = '100vw'
      setTimeout(()=>c.style.height =   c.clientWidth/1.77777778 + 'px',0)
    }
},0)
}

rsz()
async function Draw(){
if(!t){
    R=(Rl,Pt,Yw,m)=>{if(!aud.paused){
      M=Math
      A=M.atan2
      H=M.hypot
      X=S(p=A(X,Y)+Rl)*(d=H(X,Y))
      Y=C(p)*d
      Y=S(p=A(Y,Z)+Pt)*(d=H(Y,Z))
      Z=C(p)*d
      X=S(p=A(X,Z)+Yw)*(d=H(X,Z))
      Z=C(p)*d
      if(m){
      X+=oX
      Y+=oY
      Z+=oZ
      }
   } }
    Q=()=>
    I=(A,B,M,D,E,F,G,H)=>(K=((G-E)*(B-F)-(H-F)*(A-E))/(J=(H-F)*(M-A)-(G-E)*(D-B)))>=0&&K<=1&&(L=((M-A)*(B-F)-(D-B)*(A-E))/J)>=0&&L<=1?:0
   
    Rn = Math.random
   
    geoSphere = (mx, my, mz, iBc, size) => {
      let collapse=0
      let B=Array(iBc).fill().map(v=>{
      X = Rn()-.5
      Y = Rn()-.5
      Z = Rn()-.5
      return
      })
      for(let m=99;m--;){
      B.map((v,i)=>{
          X = v
          Y = v
          Z = v
          B.map((q,j)=>{
            if(j!=i){
            X2=q
            Y2=q
            Z2=q
            d=1+(Math.hypot(X-X2,Y-Y2,Z-Z2)*(3+iBc/40)*3)**4
            X+=(X-X2)*99/d
            Y+=(Y-Y2)*99/d
            Z+=(Z-Z2)*99/d
            }
          })
          d=Math.hypot(X,Y,Z)
          v=X/d
          v=Y/d
          v=Z/d
          if(collapse){
            d=25+Math.hypot(X,Y,Z)
            v=(X-X/d)/1.1
            v=(Y-Y/d)/1.1         
            v=(Z-Z/d)/1.1
          }
      })
      }
      B.map(v=>{
      v*=size
      v*=size
      v*=size
      v+=mx
      v+=my
      v+=mz
      })
      return
    }

    Cylinder = (rw,cl,ls1,ls2) => {
      let a = []
      for(let i=rw;i--;){
      let b = []
      for(let j=cl;j--;){
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
      }
      //a = [...a, b]
      for(let j=cl;j--;){
          b = []
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*(j+1)) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*(j+1)) * ls1
          Y = (1/rw*(i+1)-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*(i+1)-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          a = [...a, b]
      }
      }
      b = []
      for(let j=cl;j--;){
      X = S(p=Math.PI*2/cl*j) * ls1
      Y = ls2/2
      Z = C(p) * ls1
      b = [...b, ]
      }
      //a = [...a, b]
      return a
    }

    Tetrahedron = size => {
      ret = []
      a = []
      let h = size/0.4142/0.25
      for(i=3;i--;){
      X = S(p=Math.PI*2/3*i) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      }
      ret = [...ret, a]
      for(j=3;j--;){
      a = []
      X = 0
      Y = 0
      Z = -h
      a = [...a, ]
      X = S(p=Math.PI*2/3*j) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      X = S(p=Math.PI*2/3*(j+1)) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      ret = [...ret, a]
      }
      ax=ay=az=ct=0
      ret.map(v=>{
      v.map(q=>{
          ax+=q
          ay+=q
          az+=q
          ct++
      })
      })
      ax/=ct
      ay/=ct
      az/=ct
      ret.map(v=>{
      v.map(q=>{
          q-=ax
          q-=ay
          q-=az
      })
      })
      return ret
    }

    Cube = size => {
      for(CB=[],j=6;j--;CB=[...CB,b])for(b=[],i=4;i--;)b=[...b,[(a=)*(l=j<3?size/0.5:-size/0.5),a[(j+1)%3]*l,a[(j+2)%3]*l]]
      return CB
    }
   
    Octahedron = size => {
      ret = []
      let h = size/0.25
      for(j=8;j--;){
      a = []
      X = 0
      Y = 0
      Z = h * (j<4?-1:1)
      a = [...a, ]
      X = S(p=Math.PI*2/4*j) * size/0.25
      Y = C(p) * size/0.25
      Z = 0
      a = [...a, ]
      X = S(p=Math.PI*2/4*(j+1)) * size/0.25
      Y = C(p) * size/0.25
      Z = 0
      a = [...a, ]
      ret = [...ret, a]
      }
      return ret      
    }
   
    Dodecahedron = size => {
      ret = []
      a = []
      mind = -6e6
      for(i=5;i--;){
      X=S(p=Math.PI*2/5*i + Math.PI/5)
      Y=C(p)
      Z=0
      if(Y>mind) mind=Y
      a = [...a, ]
      }
      a.map(v=>{
      X = v
      Y = v-=mind
      Z = v
      R(0, .553573, 0)
      v = X
      v = Y
      v = Z
      })
      b = JSON.parse(JSON.stringify(a))
      b.map(v=>{
      v *= -1
      })
      ret = [...ret, a, b]
      mind = -6e6
      ret.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          if(Z>mind)mind = Z
      })
      })
      d1=Math.hypot(ret-ret,ret-ret,ret-ret)
      ret.map(v=>{
      v.map(q=>{
          q-=mind+d1/2
      })
      })
      b = JSON.parse(JSON.stringify(ret))
      b.map(v=>{
      v.map(q=>{
          q*=-1
      })
      })
      ret = [...ret, ...b]
      b = JSON.parse(JSON.stringify(ret))
      b.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          R(0,0,Math.PI/2)
          R(0,Math.PI/2,0)
          q = X
          q = Y
          q = Z
      })
      })
      e = JSON.parse(JSON.stringify(ret))
      e.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          R(0,0,Math.PI/2)
          R(Math.PI/2,0,0)
          q = X
          q = Y
          q = Z
      })
      })
      ret = [...ret, ...b, ...e]
      ret.map(v=>{
      v.map(q=>{
          q *= size/2
          q *= size/2
          q *= size/2
      })
      })
      return ret
    }
   
    Icosahedron = size => {
      ret = []
      B = [
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      ]
      for(p=,i=38;i--;)p=[...p,p+p]
      phi = p/p
      a = [
      [-phi,-1,0],
      ,
      ,
      [-phi,1,0],
      ]
      for(j=3;j--;ret=[...ret, b])for(b=[],i=4;i--;) b = [...b, ,a[(j+1)%3],a[(j+2)%3]]]
      ret.map(v=>{
      v.map(q=>{
          q*=size/1.25
          q*=size/1.25
          q*=size/1.25
      })
      })
      cp = JSON.parse(JSON.stringify(ret))
      out=[]
      a = []
      B.map(v=>{
      idx1a = v
      idx2a = v
      idx3a = v
      idx1b = v
      idx2b = v
      idx3b = v
      a = [...a, ,cp,cp]]
      })
      out = [...out, ...a]
      return out
    }
   
    stroke = (scol, fcol, lwo=0) => {
      if(scol){
      //x.closePath()
      x.globalAlpha = 0.02
      x.strokeStyle = scol
      x.lineWidth = Math.min(100,600*lwo/Z)
      x.stroke()
      x.lineWidth /= 5
      x.globalAlpha = 1
      x.stroke()
      }
      if(fcol){
      x.fillStyle = fcol
      x.fill()
      }
    }
    Rn = Math.random
   
    LsystemRecurse = (size, splits, p1, p2, stem, theta, LsystemReduction, twistFactor) => {
      if(size < .7) return
      let X1 = stem
      let Y1 = stem
      let Z1 = stem
      let X2 = stem
      let Y2 = stem
      let Z2 = stem
      let p1a = Math.atan2(X2-X1,Z2-Z1)
      let p2a = -Math.acos((Y2-Y1)/(Math.hypot(X2-X1,Y2-Y1,Z2-Z1)+.0001))+Math.PI
      size/=LsystemReduction
      for(let i=splits;i--;){
      X = 0
      Y = -size
      Z = 0
      R(0, theta, 0)
      R(0, 0, Math.PI*2/splits*i+twistFactor)
      R(0, p2a, 0)
      R(0, 0, p1a+twistFactor)
      X+=X2
      Y+=Y2
      Z+=Z2
      let newStem =
      Lshp = [...Lshp, newStem]
      LsystemRecurse(size, splits, p1+Math.PI*2/splits*i+twistFactor, p2+theta, newStem, theta, LsystemReduction, twistFactor)
      }
    }
    DrawLsystem = shp => {
      shp.map(v=>{
      x.beginPath()
      X = v
      Y = v
      Z = v
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      X = v
      Y = v
      Z = v
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      lwo = Math.hypot(v-v,v-v,v-v)
      stroke('#ff0000','#00aa00',lwo)
      })
      
    }
    Lsystem = (size, splits, theta, LsystemReduction, twistFactor) => {
      Lshp = []
      stem =
      Lshp = [...Lshp, stem]
      LsystemRecurse(size, splits, 0, 0, stem, theta, LsystemReduction, twistFactor)
      Lshp.map(v=>{
      v+=size*1.5
      v+=size*1.5
      })
      return Lshp
    }
   
    Sphere = (ls, rw, cl) => {
      a = []
      ls/=1.25
      for(j = rw; j--;){
      for(i = cl; i--;){
          b = []
          X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*j) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*j) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*(j+1)) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*(j+1)) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          a = [...a, b]
      }
      }
      return a
    }
   
    iWaveSystemc = 120
    iWsp = .1
    a = [], b = []
    for(i=iWaveSystemc;i--;){
      X = (-iWaveSystemc/2+i)*iWsp
      Y = 0
      Z = 0
      a = [...a, ]
      b = [...b, ]
    }
    base_waveSystem =
   
    cl = 3
    rw = 4
    br = 4
    sp = 8
    iBc = rw*cl*br
   
    B = Array(iBc).fill().map((v,i)=>{
      X = ((i%cl)-cl/2+.5)*sp*4.95/3
      Y = (((i/cl|0)%rw)-rw/2+.5)*sp
      Z = ((i/cl/rw|0)-br/2+.5)*sp
      return
    })
}

oX=0, oY=0, oZ=14
Rl = t/3, Pt = -t, Yw = C(t/8)*10

x.globalAlpha = 2
x.fillStyle='#44aa88'
x.fillRect(0,0,c.width,c.height)
x.lineJoin = x.lineCap = 'round'

for(m=2;m--;) base_waveSystem.map((v, i)=>{ if(!aud.paused){
    v=(m?-1:1)*iWsp + Math.max(0, ((S(p=Math.PI*8/iWaveSystemc*i+(v>0?1:-1)*C(t/4)*5)*4)**16/10000000000)+S((v>0?1:-1)*Math.PI*4/iWaveSystemc*i+t*5)+S((v>0?1:-1)*Math.PI*(S(t/4+t/2)*4)**3/iWaveSystemc*i+t*10)+S((v>0?1:-1)*Math.PI/iWaveSystemc*i+t*20))*(m?-1:1)
} })

B.map(v=>{
    tx = v
    ty = v
    tz = v
   
    for(m=2;m--;){
      x.beginPath()
      v.map(q=>{
      X = q
      Y = q
      Z = q
      p = Math.atan2(ty,tz)+Math.PI/2
      R(0,p,0)
      X += tx
      Y += ty
      Z += tz
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      })
      stroke(m?'#ff0000':'#000078')
    }
})

t+=1/60
requestAnimationFrame(Draw)
}

Draw()
</script>

<script >
var lrc = `慢品人间烟火气(微醺版)-涂一乐
词：郭伟文
曲：廉山
制作人：涂涂
出品：声芽音乐
制作：朵 拉
望轻舟千帆过 雁归来
去年灯火今年在
不等烟雨没楼台
食一碗烟火 添新柴
慢品人间烟火气
闲观万事岁月长
雪落白头故人探窗
一城风雨有寒霜
一程山水路还长
心事无痕似水温凉
我与旧事归于尽
来年依旧有花开
望轻舟千帆过雁归来
去年灯火今年在
不等烟雨没楼台
食一碗烟火 添新柴
我与旧事归于尽
来年依旧有花开
望轻舟千帆过 雁归来
去年灯火今年在
不等烟雨没楼台
食一碗烟火 添新柴
食一碗烟火 添新柴
2026—08—30`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便

function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}

var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 50, lrc_ul_height = 50;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("aud").ontimeupdate = setPosition;

</script >

红影 发表于 2026-8-30 22:24

很奇妙的线条效果，欣赏朵宝好帖{:4_187:}
那些线条最好不要感谢人物面部才好。

小辣椒 发表于 2026-8-30 22:38

欣赏朵拉的精彩制作，{:4_199:}

小辣椒 发表于 2026-8-30 22:38

要线条在人物后面，朵拉要加人物的png，图层在线条的上面

小九 发表于 2026-8-31 11:20

线条的展示最好不要占空间太大，整个画面

小九 发表于 2026-8-31 11:30

图片是很有意境的{:4_187:}
页: [1]
查看完整版本: 慢品人间烟火气