Dweets awesomed by u/DaSpider

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

marquisdegeek

function u(t) {

r=typeof r=='undefined'?1:r
s=m=7
for(n=i=0;i<32;++i,m*=2){
(1<<i&r)&&x.fillRect(i*s,t*600,s,s)
n|=(126&1<<((r&m)>>i))?1<<i+1:0}r=n

Jan 17 2025 8:32 PM UTC

}// 131/140

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

Almost Automaton

u/marquisdegeek

There's no wrap around of the bits so you don't quite get the patterns shown in https://en.wikipedia.org/wiki/Elementary_cel… but it's late and I'm tired!
u/marquisdegeek

p.s. change the 1 in the first line to change the start condition, and the 126 in the last to change the rule number

show FPS hide FPS share fullscreen

cantelope

function u(t) {

eval(unescape(escape`𩡯𬠨𮀮𩡩𫁬𤡥𨱴𚀰𛀰𛁩🐨𭰽𨰮𭱩𩁴𪁼🐰𚐪𝠬𭰩𞱩𛐭𞱸𛡣𫁥𨑲𤡥𨱴𚀨𣐮𨑴𨑮𜠨𦀬𦠩𛰱𛠵𝰯𜠫𜐩𚠹𝠰𛀨𬐽𣐮𨑣𫱳𚁙𛱤𚐯𜐮𝐷𚐪𝐳𝐬𬰫𚀱𛑱𚐪𚠲𚡳𚠹𛁳𚐩𬰽𜐯𚁤🐨𣐽𣑡𭁨𚐮𪁹𬁯𭀨𦀽𪐯𝐳𝐥𜠭𜐬𦐽𪐪𚠮𞐥𜠭𜐬𦠽𜐭𚁩𚠪𜰮𜐫𭀯𝀩𙐲𚐩`.replace(/u../g,'')))

Jan 6 2025 7:49 PM UTC

}// 140/140

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

360° camera in starfield env: https://tinyurl.com/equiloop2

Show more comments…
u/magna

Sick!
u/tomxor

Wooah, hyperspeed!
u/magna

y'all need to check the link in the title to see this in 360
u/cantelope

and the previous dweet XD ( https://tinyurl.com/equiloop )
u/New_Core

I watched this in my Oculus 3s in 360. got to slow for it but works. I tried to see it linked to my computer but didnt find any setting to run it in 360. but I am new to VR. ;)
u/magna

I forked u/cantelope's repo with the hope of finding some time to doing this: https://github.com/atesgoral/HDRI_explorer/i…
u/cantelope

u/magna this issue is a feature, not a bug XD ... in seriousness, the forced "landscape" orientation is a product of years of responsive web design experience. I've chosen for my apps, instead of trying to adjust to arbitrary user viewports with inescapable problems, to just peg the dimensions, so my apps always known their environment. The 16:9 (1920 x 1080) is just the most common computer monitor full-screen resolution, which is also the "landscape" orientation for many mobile devices. so, thank you for the request, and feel free to fork/innovate/modify my github repos!
u/magna

u/cantelope yeah! I forked your repo and added a TODO note to myself to _maybe_ try adding it. But thanks for the additional background!
u/cantelope

u/magna let me know if any other stuff here is interesting to you https://boss.mindhackers.org some of it is on github, others not
u/magna

Bookmarked!

show FPS hide FPS share fullscreen

KilledByAPixel

remix of d/25992 by u/KilledByAPixel

function u(t) {

eval(unescape(escape`󭽩󭍨󚍸󚝦󫽲󚍲󟝍󨝴󪌮󬭡󫭤󫽭󚍩󟝷󟜲󩜳󚜪󭽼󜌬󩭩󫍬󤽴󮝬󩜽󨍨󬽬󚌤󮽨󟝴󟽨󚽓󚍲󚜪󝜰󞭲󯜠󞌰󙜤󮽲󙜹󞝽󙝠󛍳󪍡󩍯󭽂󫍵󬬽󝌹󛍳󪍡󩍯󭽃󫽬󫽲󟝒󚍢󩝧󪝮󤍡󭍨󚍦󪝬󫌨󚜩󚜻󪜭󛜻󚝡󟝩󛼳󜜷󛍡󬭣󚌹󝬰󛌵󝌰󛍩󟽴󙬦󭌪󝭥󜼫󬬥󝜳󚭓󚍲󙜴󝼪󨜩󞭷󛍡󛍩󟽡󞬹󚜻`.replace(/u../g,'')))

Jan 3 2025 3:20 AM UTC

}// 140/140

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

Shadow Flowers 🌸 #Genuary Day 2 - Layers upon layers upon layers.

u/cantelope

nice shading
u/magna

Lovely colors as well
u/KilledByAPixel

Thanks, I experimented with a simple palette generator for this one.

show FPS hide FPS share fullscreen

KilledByAPixel

remix of d/26352 by u/KilledByAPixel

function u(t) {

eval(unescape(escape`󡼽󚍘󛍙󚜽󟬨󨜽󦌥󜜩󚭓󚌨󦍼󟜰󚜪󚬲󧬨󦝼󟜰󚜪󚬳󚜫󤼨󛜭󦌪󚬲󧭙󚬪󜼩󚬨󜜭󨜩󒭦󫽲󚍴󚬽󝬰󛍩󟜲󩜳󞽩󛜭󞽸󛭦󪝬󫍒󩝣󭌨󪜬󭌬󨜯󜬫󛬵󛌱󚜩󒭦󫽲󚍡󟝪󟜹󞼭󛝪󞽡󟝇󚍘󟝩󛼹󞜪󬼫󤼨󨬽󨜪󜼮󜜴󜜶󚜯󬼬󦜽󭌯󞜹󚭳󚽃󚍢󚜯󬼩󚬨󜜭󦜥󜜩󚽙󙜱󚭇󚍘󛍙󚼱󚜩󬼽󜬪󚭪`.replace(/u../g,'')))

Dec 30 2024 3:56 AM UTC

}// 140/140

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

Noise Warping 〰️

u/magna

Awesome!
u/UEZ

Nice - I can see faces...

show FPS hide FPS share 2 remixes fullscreen

KilledByAPixel

remix of d/32945 by u/KilledByAPixel

function u(t) {

eval(unescape(escape`󩭯󬬨󭼽󞜹󛍳󟜲󜌬󪜽󝭥󜼻󪜻󦌫󟝡󚜫󚽔󟍷󙬦󤬼󜜶󛝓󚍘󛼹󧭔󛼹󚜪󚬸󚬨󥌾󟬵󚜪󜼸󯍘󙭒󙭔󙬱󝝼󯍃󛜱󙬦󚍡󟜮󝜬󠼽󜜩󟽒󛜽󠼺󮌮󩭩󫍬󤭥󨽴󚍩󙝷󚭳󛍩󛜭󛽷󚭳󛍳󛍳󛍸󛭦󪝬󫍓󭍹󫍥󟝠󪍳󫌨󙍻󝌪󥍽󘌤󮽔󯜥󙍻󥌯󜼭󤭽󙝠󛍡󟜱󛝩󙝷󛼵󜌬󤬽󥌽󠼽󜜭󪜯󜽥󜼬󦌽󭌪󬼩`.replace(/u../g,'')))

Dec 23 2024 5:01 PM UTC

}// 140/140

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

Bombed City Sunset 💣🌇

u/KilledByAPixel

continued improvements, many small golfs allow enough space for hsl color and full res
u/lewdev

This is amazing! So cool just to watch.

show FPS hide FPS share fullscreen

KilledByAPixel

function u(t) {

eval(unescape(escape`󩭯󬬨󫬽󪜽󜭥󜼻󪜭󛜻󮌮󩭩󫍬󤭥󨽴󚍩󛍙󛌭󜼰󛌵󚜩󫬫󟝓󚍮󚜪󞜷󛍙󟝩󚬪󝌪󭌥󜜰󞌰󛍧󟜨󦜭󝼰󜌩󚬪󜬼󫬬󬼽󦜼󝼰󜌬󩌽󣝡󭍨󛭨󮝰󫽴󚍩󛜹󝬰󛍳󟽙󛜴󝌰󞭩󚬪󝜥󝌰󜌩󛍸󛭦󪝬󫍓󭍹󫍥󟝠󪍳󫌨󙍻󩌼󜜲󞜿󝬰󞭳󟽙󛼵󚽧󚬲󞜭󝼹󞬳󜌹󛝙󛼸󯜠󞜹󙜤󮼹󞜭󩌯󜜶󛝧󚬴󞝽󙝠`.replace(/u../g,'')))

Dec 18 2024 8:15 PM UTC

}// 140/140

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

Sunset Islands 🌅

u/lewdev

You're on a streak!
u/neimad

I can't believe something like this is possible. Amazing.
u/magna

u/KilledByAPixel stop it!
u/jellyedwards

Whoah
u/tomxor

(╯°□°)╯︵ ┻━┻

show FPS hide FPS share 4 remixes fullscreen

KilledByAPixel

remix of d/25311 by u/KilledByAPixel

function u(t) {

eval(unescape(escape`󩭯󬬨󨼮󭽩󩍴󪌽󭼽󞜹󛍩󟜶󩜳󞽩󛜭󞽸󛭦󪝬󫍓󭍹󫍥󟝒󚍺󟝚󛼮󝼭󦜪󜬬󮬭󦬬󦬩󛍸󛭦󪝬󫍒󩝣󭌨󪜥󭼬󪜯󭽼󜌬󜜬󜜩󚝦󫽲󚍡󟝩󙝷󛼵󜌭󜜬󦜽󦬽󨬽󜜭󪜯󝍥󜼬󦌽󭌪󜼰󞼫󚽚󟍷󙬦󚍙󟌶󛝓󚍘󛼹󧭚󛼹󚜪󚬸󚬨󦬾󟬵󚜪󜼳󯌨󦌦󦜫󜬦󦬩󙜸󚝼󯌨󨜭󜜿󨜽󨬽󜜺󜌩󞽙󛜽󨬩󦌫󟝡`.replace(/u../g,'')))

Dec 17 2024 2:24 AM UTC

}// 140/140

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

City Ruins 🌆

Show more comments…
u/tomxor

So toasty! and post apocolyptic. Can't believe you fit colour, this is awesome.
u/taupelink

Holy cow
u/Coalshork

insane as always!
u/cantelope

are these reboots? looks somehow familiar. great dweet!
u/KilledByAPixel

Thanks! We keep managing to fit more somehow :)
u/KilledByAPixel

2 bytes savings: |X&Y+2&Z&7
u/tomxor

u/cantelope The remix chain is quite long.. KBAP did the first raymarch cities back in 2021. The remix trees can get pretty crazy, I experimented with rendering them out in my minifront end - one day I'll release it.
u/KilledByAPixel

1 byte ||b-1&&(a=b=1)

show FPS hide FPS share fullscreen

yonatan

function u(t) {

eval(unescape(escape`𮠽𜠰𜀻𨰮𭱩𩁴𪀽𝠰𜀻𩡯𬠨𪐽𜡥𝀻𪐭𛐻𮀮𩡩𫁬𤡥𨱴𚀨𬐽𦀫𦐫𩐯𪰫𫰪𪰪𠰨𦐯𜰩𚡓𚁯𚠲𛑴𚐪𫰯𜠩𛰳𚡍𨑴𪀮𨑴𨑮𚀳𚡓𚁤👯𚡥𛰴𜀭𭀯𞀩𚐫𮠬𫰪𤰨𦀯𞐩𛑙𚡃𚁤𚐫𬐯𝀪𠰨𩀩𚱺𛀱𛀮𜰩𚑘👩𙑺𛁙👩𛰹𞐬𪰽𦀯𞀭𜐲𛠵𛁥👙𛰸𛐹𛁯🐨𪰪𪰫𩐪𩐩𚠪𛠵𛰴`.replace(/u../g,'')))

Dec 10 2024 7:15 PM UTC

}// 140/140

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

https://x.com/yuruyurau/status/1863597356786…

Show more comments…
u/UEZ

nice #creature
u/fentbiggesthater

the one above is a bit more complex and impressive, nice try
u/fentbiggesthater

the one above is a bit more complex and impressive, nice try
u/fentbiggesthater

sent twice glitch?!
u/tomxor

Interdimensional Centipede
u/skeletonNatte

this might be my new favorite dweet
u/jellyedwards

Beautiful!

show FPS hide FPS share 3 remixes fullscreen

tomxor

function u(t) {

eval(unescape(escape`𩡯𬠨𨰮𭱩𩁴𪀦👙👚👩🐷𩐴𞱩𞱓𚰽𦀬𠰫👙𛁔𚰽𦠩𚀱𚱓𛰲𜑞𠰯𜐸𧡔𛰱𝠩𙐱𝑼𯀨𦀽𦐬𦐽𦠬𬠽𭑛𪰽𦱾𤰬啓𛁾𥁝𧑼👚👓𚡴𙐲𛐱𛀭𛑩🠴𩐴🱩𙐶🱵𦱫𧐫𚰺𤰽𠰽𥀽𜐸𝀺𮀮𩡩𫁬𤡥𨱴𚁘👩𙠲𝐵𛁙👩🠾𞀬𞀯𚀸𚱲𛱴𚐬𦠽𜐬𤰽𠰽𥀽𜐲𞀬𦀽𦀯𤰭𜐬𦐯👓𚐩`.replace(/u../g,'')))

Dec 9 2024 12:16 PM UTC

}// 140/140

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

Photon-Mapping using a Random-March Scattering Model

Show more comments…
u/tomxor

A (very inefficient) physically based renderer in a Dweet! :) Give it 5 mins for reasonable convergence, the longer the better, Firefox is fastest. I know this is not the most interesting visually, but I found it challenging to make, and didn't fully understand the result. So the following hand wavey write-up is more of an analysis as I attempt to understand what's going on. I am not a PBR expert so I probably don't know what I'm talking about.
u/tomxor

This approach conceptually follows Photon Mapping, where light rays are forward traced, bouncing around the scene recursively, accumulating radiance into a spatial map on each bounce. Essentially painting reachable surfaces with light. Separately a ray for each pixel is cast into the scene to retrieve the current radiance for the position it intersects. From here, implementation deviates substantially from the original algorithm. Rays are marched. The map only stores irradiance, and uses spatial hashing instead of a kd-tree. However the most interesting differences are in surface interactions. BSDFs are the standard abstractions for reflectance and transmission but they are far too large to implement. Through "experimentation", AKA messing around on Dwitter, I found a roughly Lambertian reflectance distribution to emerge from a simple random march. Lambertian meaning a perfectly diffuse surface, which causes uniform propagation through 3D space, but a necessarily non-uniform distribution of reflected angles (this is worth taking some time to understand separately if it's not immediately intuitive).
u/tomxor

With ray marching each intersection naturally ends up embedded in a surface. Instead of correcting this, a new direction is randomly chosen and the ray is sent on it's way. Depending on the surface intersection depth and angle of reflection there is a chance the ray will escape (reflect) or remain trapped (absorbed). With the chance being greatest when reflecting in line with the surface normal, and lowest when parallel to the surface. Note how the surface, depth, and reflection ray form a right-triangle. For the reflection ray to escape, the depth must be less than cos(θ) at a step size of 1. Therefore assuming a uniformly random depth between 0 and 1, the reflectance distribution follows Lambert's cosine law. Additionally unlike a BSDF this provides random absorption for free, but with the disadvantage of reflectance distribution and absorption rate being inextricably linked. Another significant difference is that BSDFs are a statistical abstraction designed to extract the most value from each ray by modulating its radiance, representing many photons; whereas this model effectively represents a single photon for each surface intersection. Absorbed rays are thrown away rather than modulated, and each irradiance accumulation is an integer increment. The implication being the random march requires far more rays to converge because each ray has a binary existence and intensity like a photon, on the other hand each intersection is far simpler computationally compared to BSDFs.
u/tomxor

There are a few more gnarly details that complicate this. For simplicity I suggested trapped rays are immediately absorbed, which is possible, but it's simpler to allow them to rattle around a bit. This "widens" the reflectance distribution and increases overall reflectance, to a degree depending on how many consecutive intersections are allowed. But it also changes the overall behaviour by producing a slight Subsurface Scattering effect like skin or paper. Surfaces soften and glow as rays traverse, and weak points like corners diffuse as some rays tunnel through. Secondly, rays with a higher angle of incidence (ωi) have a lower max surface depth, yet the reflectance step length is unaffected. This difference distorts the reflectance distribution as ωi increases. When (ωr < ωi) escape is certain, and when (ωr > ωi) the chance abruptly returns to cos(ωr)/cos(ωi). i.e min(1, cos(ωr)/cos(ωi)). At ωi=0 the distribution is perfectly Lambertian, and at ωi=π/2 it is unnaturally uniform in angle. AFAIK this is not a physically realistic reaction to ωi. It almost resembles Fresnel reflections, where transmissive surfaces reflect more at grazing angles. However Fresnel is anisotropic, like a mirror. Yet here the distribution is centered around the surface normal. This is still a simplified analysis, it ignores subsurface marching, and how adjacent ωr and ωi share pseudo random variables (see below). The chaotic nature and compounding biases means an accurate distribution can probably only be obtained empirically.
u/tomxor

Finally, the ray step/direction vector, must be randomised upon each intersection. Initialising random unit vectors takes a lot of code, so there's a few tricks going on here, but these tricks also affect the result and noticeably compromise accuracy. Rather than a unit vector I've settled for a point in a cube, where the length is anywhere between 0 and 1. This actually helps convergence by randomising depth at repeat surface intersections, however the cube shape results in non-uniform propagation so distance based shading of all the axis aligned surfaces looks a bit too flat. Doing this three times still takes a lot of code, so only Z is randomized upon each intersection, and is then reused by cycling through the XY components, which provides a pretty bad but not-terrible distribution, apparently making it harder to reflect into corners. Z's randomisation combines t with one component of the ray position, so it is effectively a kind of feedback PRNG derived from the very scene geometry the randomness is being used to traverse, which I find kind of neat.
u/Joachim

Insane! Looks sooo realistic :0
u/fentbiggesthater

wow just came back from my vacation in saudi arabia. im now back in my 10m penthouse in new york and this is the first post ive seen after coming back that has genuinely impressed me. good job!
u/UEZ

Very impressive - well done! How can I understand: k = [~S, ~C, ~v], u[k] |= Z. Array u refers to what? Associative arra? Thx.
u/tomxor

Thanks. u is the dweet function which I'm exploiting as a predefined object for the spatial map. The purpose of bitwise inverting ~ each component is to obtain a floored version of the ray position (that it happens to invert doesn't matter) e.g [~0.1,~1.2,~2.3] = [-1,-2,-3], and importantly all positions between [0,1,2] and [1,2,3] will result in [-1,-2,-3] i.e it is binning positions into an integer grid. When passed as a key to u this is coerced into a string to become '-1,-2,-3'. The idea is to count photon intersections into each grid cell with u[k]++ as a kind of frequency based irradiance, but as an object each cell must be initialised before incrementing, so u[k]|=Z uses bitwise again to coerce all values into an int, ORing with Z will convert undefined values to 0, and existing integer values will be unaffected because Z is always less than 1.
u/UEZ

Thanks tomxor. The math / physics behind is too high for me ^^. My question is more related to understand JS what u[k] is. k is an array which is passed to u. When k=[10, 20, 30], what is the result in u[k]++?
u/magna

u/UEZ The property accessor [key] coerces key to a string. So, when you do obj[a] and a is [1,2] it will be obj['1,2'] because [1,2].toString() implicitly called.
u/magna

u/tomxor Another epic one!
u/UEZ

Thx magna :-) More or less what tomxor wrote. Just for my understand, does u[k]++ mean, when k=[1,2,3], u is u['2,3,4']?
u/fentbiggesthater

hm coll
u/tomxor

I think you're getting hung up on the array like key notation, but it's not being used as an array. Think of -1,-2,-3 as an abitrary property name on an object, the u.-1,-2,-3 property syntax would be equivalent if not for the invalid chars. u[k]++ simply increments a number stored for the property k, ++ only works because that property value has been previously initialised using u[k]|=0 which will convert undefined values to 0.
u/jellyedwards

Holy crap! They need to add a dwitter category to the Nobel awards for stuff like this!
u/0x61

[insert image of dribbling cat] We're not worthy. This is endgame
u/KilledByAPixel

https://www.reddit.com/r/tinycode/comments/1…

show FPS hide FPS share fullscreen

384.cz

remix of d/29375 by u/384.cz

function u(t) {

eval(unescape(escape`𩡯𬠨𢐽𫡥𭰠𢑭𨑧𩑄𨑴𨐨𩠽𨰮𭱩𩁴𪀽𜠵𝠬𩠩𛁩🐲𩐵𞱩𛐭𞰩𢐮𩁡𭁡𦱩𧐽𪐥𝀽🐳🱦𞡦𚠨𚁓𚁩𛱦𙡩𙡓𚁩𛱦𚐪𩠦𭀪𤰨𭀫𪐯𩠪𜰮𜐴𜠩𚐫𤰨𩠯𪐩𚱓𚁩𙑦𛰨𪐯𩠯𭀩𚐩𙑦𚐻𮀮𬁵𭁉𫑡𩱥𡁡𭁡𚁉𛀰𛀰𚐠`.replace(/u../g,'')))

Dec 6 2024 3:14 PM UTC

}// 120/140

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

dwitter.net | DaSpider (11616)