Dwitter - javascript demos in 140 characters

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

magna

function u(t) {

c.width=w=511
t?0:b=Array(8).fill(n=0).map(_=>c.cloneNode())
x.drawImage(k=b[n++&7],0,0)
k.getContext('2d').fillText('🎱',n&w,n+S(t)*120&w)

Apr 10 2017 3:20 AM UTC

}// 139/140

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

Octobuffering Infinite Balls

Show more comments…
u/magna

Got the plumbing done, but spent only a little time to try to find a nice pattern. Please remix!
u/magna

https://www.dwitter.net/d/2464
u/donbright

lol unfortunately this went way over my head... could you explain what it is?
u/magna

Rendering subsequent frames to a circular list of 8 off-screen buffers and pasting the buffers to the main canvas. Creates an "infinite sprites" effect.
u/New_Core

the effect can be visualy seen how it works at https://www.dwitter.net/d/401 ;)
u/magna

@New_Core Amazeballs!

show FPS hide FPS share fullscreen

marc8

function u(t) {

c.width|=i=0
for(b=(m=80)+(f=m+(l=5*m));i<7;i++)"}P7WZOoQ_".charCodeAt(t%10)&2**i&&x.fillRect(i<3?m:i%2?0:f,i>4?b:i>2?m:i*f,r=i<3?l:m,f-r)

Apr 7 2017 1:23 PM UTC

}// 139/140

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

u/magna

Awesome!

show FPS hide FPS share fullscreen

cantelope

function u(t) {

t?w=c.width=n:n=1
onmousemove=e=>n=e.pageY
for(i=6;i--;x.lineTo(w/2+(Z=1/(2+C(p=1.257*i*2+t)))*S(p)*w/2,Z*w/2-w/20),x.stroke());

Apr 9 2017 10:25 PM UTC

}// 128/140

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

per donbright's suggestion... :D

u/cantelope

mouse Y position controls resolution
u/donbright

lol surely there is more we can do
u/tapgiles

Cool! Some of the lines seem thicker, and some seem fainter. Is there an overdrawing issue, perhaps?

show FPS hide FPS share 1 remix fullscreen

cantelope

remix of d/2451 by u/cantelope

function u(t) {

w=(c.width|=0)/2
for(i=99;i--;x.fillStyle=`hsl(${t*99+i},99%,50%`,x.fillRect(w+1/(Z=3+C(p=i-t*2))*(i-50)*w/30,540+S(p)/Z*w,s=250/(Z*Z),s));

Apr 9 2017 4:58 AM UTC

}// 139/140

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

show FPS hide FPS share fullscreen

nystrand

function u(t) {

for(O=c.width|=Z=A=27;A--;O=.9+C(t)/Z)x.fillStyle=R(x.scale(A?O:1,A?O>1?Z:1.03:-O),Z,4*A,.2),x.fillText(u,A<2?M=7-t*4:-66,A<2?A*Z-18-S(M):Z)

Apr 7 2017 8:41 PM UTC

}// 140/140

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

u/magna

I was expecting this to happen one day...
u/magna

Wait. How the hell are you rendering the "ground"? I don't get it. Explanation please.
u/nystrand

It's the "(O" chars at the beginning of the code decreasingly scaled down from the large initial scale. I had to find a variable name that "looked good", - went with O which made coding confusing as it looks like a zero :)
u/magna

This is nuts!
u/joeytwiddle

#quine

show FPS hide FPS share fullscreen

nonce

function u(t) {

c.width|=a=t?a.map(_=>Math.random()>.999^_):new Array(920).fill(0)
for(k=920;k--;x.font="3em a")x.fillText("╲╱"[a[k]],(k%40)*48,~~(k/40)*48)

Apr 8 2017 7:03 AM UTC

}// 140/140

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

start at the top right corner, find a way through the maze

u/magna

Needs webcam + eye tracking support.
u/cantelope

sweet
u/luutifa

10 print?

show FPS hide FPS share 1 remix fullscreen

miohtama

remix of d/2455 by u/cantelope

function u(t) {

w=(c.width|=0)/2
x.fillStyle="#f00"
for(i=2e3;i--;x.fillRect(w+S(p=i+t)/(Z=4+C(p)*(h=1+S(i/99-t*4)/2))*w*h,540+1/Z*(i-999)*w/300,s=40/Z,s));

Apr 10 2017 9:22 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 FPS hide FPS share fullscreen

joeytwiddle

remix of d/1763 by u/New_Core

function u(t) {

c.onclick=_=>window.a||(a=new AudioContext,o=a.createOscillator(),o.connect(a.destination),o.start(),c.onmousemove=e=>o.frequency.value=e.x)

Apr 8 2017 8:22 PM UTC

}// 140/140

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

Starts making noise if you click on the canvas. Hopefully you can silence it by going left, but no guarantees!

u/cantelope

"woooOOOOoooOOOO" :D
u/magna

It's a dweetheremin!
u/joeytwiddle

Yes it is :) More fun with a wider frequency range: o.start());c.onmousemove=e=>o.frequency.value=5*e.x
u/lionleaf

Haha, amazing! Fullscreen gives you a wider audio range :)
u/joeytwiddle

#audio #interactive

show FPS hide FPS share fullscreen

magna

function u(t) {

with(x)
font='80px arial',
textAlign='center',
fillText('Dweet Wishlist',X=960,400),
fillText('Enter your dweet wishes as comments.',X,X)

Apr 8 2017 10:04 PM UTC

}// 137/140

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

Dweet Wishlist - enter your idea/wishes and inspire others to create those dweets!

Show more comments…
u/magna

Subpixel rendering
u/magna

https://en.wikipedia.org/wiki/Random_dot_ste…
u/magna

Quarter-circle Truchet tiles: https://en.wikipedia.org/wiki/Truchet_tiles#…
u/magna

https://en.wikipedia.org/wiki/Penrose_tiling
u/cantelope

pretty sure it's not possible in 140 bytes, but anything resembling a voronoi diagram would be peachy.
u/magna

@cantelope: There's one already: https://www.dwitter.net/d/1900
u/donbright

three body gravity system, general relativity simulation, icosahedron, geodesic dome, tesseract rotation in 4 dimensions, fractal generation of human face....
u/cantelope

@magna, I see. It is amazing!
u/joeytwiddle

Make @magna's piano keys playable: https://www.dwitter.net/d/2418 (I tried in /2453)
u/donbright

rotation using imaginary numbers instead of sin/cos, 3d rotation with quaternions, mouse driven particle system, electromagnetism simulation, delaunay triangulation
u/joeytwiddle

More games and puzzles. This road is a starting point: https://www.dwitter.net/d/2201

show FPS hide FPS share fullscreen

recursive

remix of d/2418 by u/magna

function u(t) {

c.width|=0
for(i=88;i--;(i+4)%7%4&&x.fillRect(X-25,700,54,220))x.fillRect(X=i*100-2,700,4,338)

Apr 7 2017 6:29 PM UTC

}// 94/140

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

u/magna

Nice!