Hot dweets by u/yonatan

function u(t) {

c.width=1920 // clear the canvas
for(i=0;i<9;i++)
x.fillRect(400+i*100+S(t)*300,400,50,200) // draw 50x200 rects

} // 122/140

Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile)


    u(t) is called 60 times per second.
    t: Elapsed time in seconds.
    S: Shorthand for Math.sin.
    C: Shorthand for Math.cos.
    T: Shorthand for Math.tan.
    R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
    c: A 1920x1080 canvas.
    x: A 2D context for that canvas.

Try the new frontend: beta.dwitter.net
Current theme challenge: #Food

show FPS hide FPS share 1 remix fullscreen

yonatan

function u(t) {

c.innerHTML=`<svg><filter id=f><feTurbulence baseFrequency=.01 /><feDisplacementMap scale=${t*99}>`;x.filter="url(#f)";x.fillRect(0,0,0,1)

Oct 26 2018 12:11 PM UTC

}// 138/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

brighter on firefox

u/joeytwiddle

dude... #plasma #oil #oil_spill
u/Xen

i'm stealing this dweet and having it as an animated desktop background :-P
u/tomxor

Nice. Ahh svg filters... I have good memories, but then they were all destroyed by browser regressions.

show FPS hide FPS share 3 remixes fullscreen

yonatan

remix of d/10629 by u/yonatan

function u(t) {

s=c.style;s.backgroundBlendMode='difference';for(b=[i=9];i--;s.background=b)b[i]=`radial-gradient(at ${50+S(t+i)*50}%${i*9}%,#fed,#012 50%)`

Oct 24 2018 7:13 AM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Show more comments…
u/lionleaf

Wow! That's trippy and cool looking :D Looks like an oil spill or something #plasma #oil #oil_spill
u/joeytwiddle

Great!
u/tomxor

Neat, looks like #diffraction and #Interference, I guess it is litterally the later.
u/katkip

cool
u/Purpzie

Still seems to look the same without s.backgroundBlendMode='difference'
u/yonatan

Dwitter doesn't reset CSS styles when you edit the code. Try making it '' instead of 'difference'
u/lionleaf

u/yonatan Oh, I guess that's a bug.
u/DataMeta

Absolutely incredible

show FPS hide FPS share 1 remix fullscreen

yonatan

remix of d/10704 by u/yonatan

function u(t) {

eval(unescape(escape`挮楮湥版呍䰽怼獶朾㱦楬瑥爠楤㵦㸼晥呵牢畬敮捥⁢慳敆牥煵敮捹㴮〰ㄠ湵浏捴慶敳㴵 㸼晥䑩獰污捥浥湴䵡瀠獣慬攽⑻匨琩⨹㤹紾总砮晩汬呥硴⡸⹦楬瑥爽≵牬⠣昩∬〬〩`.replace(/u(..)/g,"$1%")))

Oct 26 2018 12:31 PM UTC

}// 124/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

#waitforit (unless you just see a blank canvas, then it's broken)

u/joeytwiddle

Wow that's beautiful! But #heavy on some machines #plasma #cloud #oil #oil_spill

show FPS hide FPS share fullscreen

yonatan

remix of d/10639 by u/yonatan

function u(t) {

for(i=9,j=b=[];i--;c.style=`${B=';background'}:${b+B}-blend-mode:difference`)b[i]=`radial-gradient(at ${i*9}%${S(i+t)*9}%${j+=',aqua,tan'})`

Oct 24 2018 10:54 AM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Wavy

u/katkip

#waves #art
u/joeytwiddle

I almost see water caustics in there
u/lionleaf

It does look like #caustics ! :D

show FPS hide FPS share 1 remix fullscreen

yonatan

remix of d/10685 by u/yonatan

function u(t) {

(t?j:c)[t?'outerHTML':'innerHTML']=h=`<svg id=j><filter id=f><feTurbulence baseFrequency=${t%1}>`
c.style.filter='url(#f)'

Oct 25 2018 5:53 PM UTC

}// 122/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Another SVG filter test

u/yonatan

97 chars: c.innerHTML=<svg><filter id=f><feTurbulence baseFrequency=${t%1} id=p>;c.style="filter:url(#f)"
u/yonatan

actually less, i don't know why there's an id=p in there
u/katkip

#maze

show FPS hide FPS share 2 remixes fullscreen

yonatan

function u(t) {

s=c.style;s.backgroundBlendMode='lighten';for(b=[i=20];i--;)b[i]=`radial-gradient(at ${50+S(t+i)*50}%${i*5}%,tan,#210 25%)`;s.background=b

Oct 23 2018 7:51 PM UTC

}// 138/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

More Worley noise - via https://codepen.io/supah/pen/oaEZqg

Show more comments…
u/veubeke

Amazeballs!
u/aleamb

amazing!!
u/anotherkitten

this feels gross but i like it
u/lionleaf

#organic #voronoi #cell #squishy
u/katkip

genius
u/joeytwiddle

Like bacteria in rush hour. I agree with what anotherkitten said.

show FPS hide FPS share 1 remix fullscreen

yonatan

function u(t) {

c.width|=c.innerHTML=`<svg><filter id=f><feMorphology radius=${t} >`;c.style="filter:url(#f)"
x.font='9in x'
x.strokeText('hello',0,1e3)

Oct 25 2018 9:51 PM UTC

}// 136/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

another filter, pretty useless

u/f8f82804

this is an awesome technique, i'm enjoying watching you explore it!
u/joeytwiddle

#svg #text #trick

show FPS hide FPS share 1 remix fullscreen

yonatan

function u(t) {

t||(c.innerHTML=`<svg><defs><filter id="f"><feTurbulence type="turbulence" baseFrequency=".01" numOctaves="5">`)
c.style.filter='url(#f)'

Oct 25 2018 5:32 PM UTC

}// 137/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

poc: SVG filter - https://developer.mozilla.org/en-US/docs/Web…

u/yonatan

dwitter ate my link... https://developer.mozilla.org/en-US/docs/Web… scroll down to "see also" for more filters
u/yonatan

also - try fullscreen!
u/joeytwiddle

lol fullscreen looks a bit different
u/yonatan

depends on the body's background color (canvas bg has no effect)

show FPS hide FPS share fullscreen

yonatan

remix of d/10690 by u/yonatan

function u(t) {

eval(unescape(escape`挮楮湥版呍䰽怼獶朾㱦楬瑥爠楤㵦㸼晥呵牢畬敮捥⁢慳敆牥煵敮捹㴤笱⽴素牥獵汴㴢∯㸼晥䑩獰污捥浥湴䵡瀠楮㵓潵牣敇牡灨楣⁳捡汥㴤筴紾总砮景湴㴧㥩渠砧㭸⹦楬汔數琨挮獴祬攽≦楬瑥爺畲氨⍦⤢ⰰⰱ攳⤻`.replace(/u(..)/g,"$1%")))

Oct 25 2018 10:31 PM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

#waitforit

u/yonatan

c.innerHTML=<svg><filter id=f><feTurbulence baseFrequency=${1/t} result=""/><feDisplacementMap in=SourceGraphic scale=${t}>;x.font='9in x';x.fillText(c.style="filter:url(#f)",0,1e3);
u/yonatan

Judging by the sound of my fan, I'm guessing filters use SIMD
u/yonatan

or maybe just if they can't find a working GPU
u/yonatan

firefox seems to handle this one better than chrome

show FPS hide FPS share 1 remix fullscreen

yonatan

function u(t) {

eval(unescape(escape`眽挮睩摴栽㌰〻愽漽㹻景爨瀠楮⁯⥴桩獛灛そ⭰嬶嵝㵰紻愨砩㭸孧䍝㴧摡牫敮✻景爨椽㌰㭩ⴭ㭸学捝⠰ⰰⱷⱷ⤩樽眫琪㤹ⱡ⡧㵸学祝㵸季剝⡘㵓⡩⤪樥眬夽䌨椩⩪╷ⰹ㤬堬夬〩⤬杛慯崨〬✣晦昧⤬杛慯崨ㄬ刨⤩`.replace(/u(..)/g,"$1%")))

Oct 23 2018 10:08 AM UTC

}// 140/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

Worley noise - via https://codepen.io/supah/pen/oaEZqg

u/yonatan

src: w=c.width=300;a=o=>{for(p in o)this[p[0]+p[6]]=p};a(x);x[gC]='darken';for(i=30;i--;x[fc](0,0,w,w))j=w+t*99,a(g=x[fy]=x[cR](X=S(i)*j%w,Y=C(i)*j%w,99,X,Y,0)),g[ao](0,'#fff'),g[ao](1,R())
u/lionleaf

#worley

dwitter.net | yonatan (3743)