duangsuse::Echo

#code #cg 今天是3.14 PI 🥧 day ！我们用纯 #js+svg在200行以内，完成以下3个特效吧 🦄🌈
- 用WASD操控的网页广告炸弹， websiteasteroids.com 🔘
- 指向你鼠标的emoji 😄
- 可调节内外起伏的，转圈的加载环，多层豪华版 📍

首先，需要引入绝对的主角：表示点xy或速度av的Vec2。有方向，有质量！
https://p5.readthedocs.io/en/latest/tutorials/vector.html#vectors-more-algebra

console.log(x=N2().turn(.5,2), x.a==.5, x.a++) //回滚到0.5!

let L,P,vel, vKbd //画布L 点P 速度v
function draw() {
  background(220);
  P._p(vel); P._lim(L); if(P.x<0||P.y<0)vel.v*=-1//进1步并检测碰撞
  P.i(translate);rotate(vel.a*2*PI);text("⇨",0,0)//(1,0) 时a==0
}
function setup() {
  vKbd={w:N2(0,-1),s:N2(0,1), a:N2(-1,0),d:N2(1,0), q:-.1,e:.1}
  L=N2(400, 400), P=L.__.mm(2); vel=N2(0)
  L.i(createCanvas)
}
function keyPressed(k) {
  (k=vKbd[key]).turn? vel._p(k) : //to(k)
  k? vel.a+=k :0
}

N2=(x,y=x)=>new _N2(new Float32Array(2),x,y)
data=(kv,T)=>{
  let s=(T+''), sub=(s,f)=>s.replace(/(\w+)/g,f), kvs=kv.split(','), cg='',
  vec=(k,v)=>`${k.substr(1)}(v){let a=this._,i=${kvs.length-1};while(i-->0)a[i]${k[0]}=${v}; return this}`
  if(kvs[0]=='_') {
    '+p *pp -m /mm %lim \tto'.split(' ').forEach(k=> cg+=vec(k,'v')+'_'+vec(k,'v._[i]'))
    kvs.slice(1).forEach((k,i)=> cg+=`get ${k}(){return this._[${i}]}set ${k}(v){this._[${i}]=v}`) 
  }
  T=eval(sub(s,(m,k)=>kvs.includes(k)?`this.${k}`:k).replace('{\n',`{constructor(${kv}){${sub(kv, `this.$1=$1`)}}`+cg))(); this[T.name]=T
}

data('_,x,y', ({cos,sin,atan2,sqrt,PI}=Math,tr=2*PI)=>
class _N2 {
  get a(){return atan2(y,x)/tr}
  get v(){return sqrt(y**2+x**2)}
  turn(a,v){x=v*cos(a*tr);y=v*sin(a*tr); return this}
  get __(){return N2(x,y)}
  i(f){return f(x,y)}
  set a(a){this.turn(a,this.v)}
  set v(v){this.v1(); this.pp(v)}  v1(){let v=this.v; if(v!=0)this.mm(v)}
})

emoji矩阵

let Pa, dPtr=1
setInterval(()=>dPtr=random(10,40), 3000)
function draw(){
  clear()
  Pa.forEach(([x,P,a])=>{
    let d=N2(mouseX,mouseY)._m(P)
    push();P.i(translate);rotate((d.a+.25)*2*PI); a.x=d.v%dPtr; text(x,0,a.x); pop()})
}

function setup(){
  skins=['\u{1F3FB}', '\u{1F3FC}', '\u{1F3FD}', '\u{1F3FE}', '\u{1F3FF}'];
  emj=[['👩', skins],['👨', skins],
  ...[...'🧘🫅👷👮👰🤵🫅'].map(x=>
    [x, [...skins, '‍♀️', '‍♂️']]),   
  ['👩',  ['\u{200D}\u{1F9B0}','‍♀️']],
  ['👩', ['‍⚕️', '‍⚖️', '‍✈️']]
].map(a=>emojiVars(...a)).flat()
  let L=N2(400,400), mid=N2(.5)._pp(L), m=8
  L.i(createCanvas)
  Pa=emj.map((x,i)=> [x, N2(i/m>>0,i%m).pp(40)._p(mid).m(140), N2(1,0)] )
}

emojiVars=(base,[m, ...m1])=>!m1.length?[base]: emojiVars(base, m1).concat(/\p{Emoji_Modifier}/u.test(base) ? [] : emojiVars(base.replace(/\u200D|$/, m + '\u{200D}'), m1));

转圈的花色环

let L0=400,L, A,B, tr=P=>P.turn(random(1), L0)._p(L).mm(2)
let L1=420, cir,pt
function draw() {
  tr(A);tr(B)
  let i=2, d=(A.__._m(B));
  stroke(lerp(cir[0].value(),cir[1].value(), d.v/L0), 50, 100, 15);
  while(i-->0)line(A.x,A.y, B.x,B.y);
  P.a+=.01+pt.x; P.v=(P.v+pt.y)%L0 //习题：为何负P.v不向内扩？
  fill(random(360),100,100)
  L.__.mm(2)._p(P).i((x,y)=>ellipse(x,y, 10,10))
}
function setup() {
  L=N2(L1); A=N2(0),B=N2(0), pt=N2(.1,0)
  P=N2(0,L1/2), cir=[createSlider(0,360,15),createSlider(0,360,340)]
  L.i(createCanvas); colorMode(HSB)
}
function mousePressed() {
  pt.x=mouseX;pt.y=mouseY; pt._mm(L)
  pt.i(console.log)
}

请在 https://editor.p5js.org/ 执行，注意保留N2= 以下的库定义。 🤗
另外，对比一下 https://vorg.github.io/pex/docs/pex-geom/Vec2.html
的实现行数，本文在手机上也就是1屏
至于扩展性、调用难度上就见仁见智了
功能上推荐 http://victorjs.org/

xmas christmas 推荐: https://js1k.com/2010-xmas/demo/856 , https://github.com/duangsuse/tv/blob/main/参动之画/粒子/稿
https://github.com/PointRider/open-java https://github.com/yangjianxin1/TankBattle 打飞机/坦克大战 java
里面还放了个js colored mandelbrot

🦄1

106 viewsedited 14:04