Simulations by Maciej Matyka

Thursday, March 28, 2024

Three body problem JS implementation

My HTML JS implementation of three body problem simulation.

Use Verlet algorithm and initial condition that give interesting stable trajectory in 8 shape.

Used as base for animations rendered for my channel here:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<canvas id="mycanvas" width="1280" height="1280"></canvas>

<script type="text/javascript">

var N = 3;
// F = 1/r^2
var fx = [];
var fy = [];
var x= [],vx= [],y= [],vy= [];
var xp1= [], yp1= [];
var xm1= [], ym1= [];

var W,H;
var dt = 0.015;
var m = 1;
var G = 1;//0.001;
var step;

var d;
// przygotowanie do rysowania
var canvas = document.getElementById('mycanvas');
W=800; H=800;
canvas.width = W;
canvas.height = H;
var ctx = canvas.getContext('2d');

// inicjalizacja
function init()
{
for(var i=0; i<N; i++)
{
// x[i]=xm1[i]=xp1[i]=0.5+(0.5)*(Math.random()-0.5);
// y[i]=ym1[i]=xm1[i]=0.5+(0.5)*(Math.random()-0.5);

vx[i] = vy[i] = 0;
}

x[0] = 0.5-0.2;
y[0] = 0.5-0.2;
x[1] = 0.5+0.2;
y[1] = 0.5-0.2;
x[2] = 0.5;
y[2] = 0.5+0.2;

   x[0] = 0.97000436; y[0] = -0.24308753;
   x[1] = -0.97000436;   y[1] = 0.24308753;
   x[2] = 0;   y[2] = 0;

   vx[0] = 0.93240737/2.0;
   vy[0] = 0.86473146/2.0;
   vx[1] = 0.93240737 / 2.0;
   vy[1] = 0.86473146 / 2.0;
   vx[2] = -0.93240737;
   vy[2] = -0.86473146;

step = 0;
}

function dist(x1,y1,x2,y2) { return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) ); }
// pętla obliczeniowa i rysująca
loop=function()
{
step++;

//rysowanie punktu
ctx.clearRect(0,0,W,H);
ctx.strokeStyle = "rgb(0,0,0)";

for(var i=0; i<N; i++)
{
fx[i] = 0;
fy[i] = 0;
}

// sum forces
for(var i=0; i<N; i++)
for(var j=i+1; j<N; j++)
{
// dij
   d = dist(x[i], y[i], x[j], y[j]);

   if(d != 0)
   {
       var rx = x[i] - x[j];
       var ry = y[i] - y[j];
       var rx = rx / d; // norm
       var ry = ry / d; // norm
       var Fx = rx * G * m*m / (d*d);
       var Fy = ry * G * m*m / (d*d);

       fx[i] -= Fx;
       fy[i] -= Fy;
       fx[j] += Fx;
       fy[j] += Fy;
   }
}

// integrate
if(step==1)
{
   for(var b=0; b<N; b++)
   {
       vx[b] = vx[b] + fx[b]/m*dt;
       vy[b] = vy[b] + fy[b]/m*dt;
       xp1[b] = x[b] + vx[b]*dt;
       yp1[b] = y[b] + vy[b]*dt;
   }
}
else
{
   // VERLET
   for(var b=0; b<N; b++)
   {
       xp1[b] = 2*x[b]-xm1[b]+dt*dt*fx[b]/m;
       yp1[b] = 2*y[b]-ym1[b]+dt*dt*fy[b]/m;
   }
}

for(var b=0; b<N; b++)
{
   xm1[b] = x[b];
   ym1[b] = y[b];
   x[b] = xp1[b];
   y[b] = yp1[b];
   vx[b] = (x[b] - xm1[b]) / (2*dt);
   vy[b] = (y[b] - ym1[b]) / (2*dt);
}

for(var i=0; i<N; i++)
{
   ctx.beginPath();
   ctx.arc(98*(x[i])+W/2,98*(y[i])+H/2,6,0,2*Math.PI); // kolko
   ctx.fill(); // rysuj
}

ctx.font = '48px serif';
ctx.fillText(step.toString(), 10, 50);

//kontynuuj petle
requestAnimationFrame(loop);

};

// start
init();
loop();

</script>

<style type="text/css">
canvas { border: 1px solid rgb(0,0,0); }
</style>
<br>

</body>
</html>

Friday, September 9, 2022

Felp - new web address for kids apps

I just resigned from paying for felp.pl, and thus, the collection of physics apps for kids is now available here: http://panoramx.ift.uni.wroc.pl/~maq/felp.pl/

Tuesday, August 30, 2022

Smooth introduction to shaders talk

My introduction to shaders talk slides pdf ppt

given at Xenium 2022

Thursday, August 25, 2022

Smooth introduction to shaders - shader list with code and screenshots

This is the list of shaders I will live code and present (teach) during the Xenium2022 demo party in Katowice.

Feel free to learn and enjoy.

Xenium01, simple gradient

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    float c = uv.x;

    vec3 col = vec3(c, c, c);

    // Output to screen
    fragColor = vec4(col,1.0);
}

Open it here: https://www.shadertoy.com/view/NtGyDW

Xenium02, light

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    vec2 m= vec2(0.25+0.2*sin(iTime*2.0),0.5+0.2*sin(iTime));
    float d=1.0-length(uv-m);

    // Time varying pixel color
    vec3 col = vec3(d,d,d);

    // Output to screen
    fragColor = vec4(col,1.0);
}

Open it here: https://www.shadertoy.com/view/NlycWW

Xenium03, texture zoom

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    uv = (uv-vec2(0.5,0.5))*20.0*(0.5+0.45*sin(sin(0.2*iTime)*0.9));
    vec4 col = texture(iChannel0, uv);
    fragColor = col;
}

Open it here: https://www.shadertoy.com/view/flGyDW

Xenium04, texture zoom motion blur

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    vec2 uv1 = (uv-vec2(0.5,0.5))*10.0*(0.5+0.2*sin(3.0*iTime));
    vec2 uv2 = (uv-vec2(0.5,0.5))*10.0*(0.5+0.22*sin(3.0*iTime));
    vec4 col = texture(iChannel0, uv1);
    vec4 col2 = texture(iChannel0, uv2);
    fragColor = (col+col2)/2.0;
}

Open it here: https://www.shadertoy.com/view/NlGyDW

Xenium05, planar deformation 1

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 c = vec2(0.2*sin(iTime),0.23*cos(iTime));
    vec2 uv = fragCoord/iResolution.xy-vec2(0.5,0.5);
    vec2 uv1 = (uv*uv-c)*(uv*uv-c);
    vec4 col = texture(iChannel0, uv1);
    fragColor = col;
}

Open it here: https://www.shadertoy.com/view/NlyyDW

Xenium06, planar deformation 2 (star)

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 c = vec2(0.2*sin(iTime),0.23*cos(iTime));
    vec2 uv = fragCoord/iResolution.xy-vec2(0.5,0.5);
    float d = length(uv);
    vec2 uv1 = (uv)/d;//*uv-c)*(uv*uv-c);
    vec4 col = texture(iChannel0, uv1+c);
    fragColor = col;
}

Open it here: https://www.shadertoy.com/view/flGcDW

Xenium07, planar deformation 3 (deform)

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 q = fragCoord.xy / iResolution.xy;
    vec2 p = (-1.0+2.0*q)*vec2(iResolution.x/iResolution.y,1.0);
    // 0-1 aspect ratio, iq

    // deform
    vec2 uv;
    float d = length(p)+0.5;
    uv=vec2(p)/d;

    vec3 col = texture(iChannel0, uv+iTime*0.5 ).rgb;

    col*=d*0.90;

   fragColor = vec4(col, 1.0);

}

Open it here: https://www.shadertoy.com/view/NlGcDW

Xenium08, planar walls

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   vec2 q = fragCoord.xy / iResolution.xy;
   vec2 p = (-1.0+2.0*q)*vec2(iResolution.x/iResolution.y,1.0);
   // 0-1 aspect ratio, IQ

    // deform
    p.y-=0.75+0.35*sin(iTime*0.3);
    vec2 uv;
    float d = abs(p.y+0.8);                     //+0.2*sin(iTime));
    uv=vec2(p)/(d);                                   ///sin(phi);

    uv.y-=iTime*0.01;

    vec3 col = texture(iChannel0, uv+iTime*0.5 ).rgb;
    //vec3 col = texture(iChannel0, uv ).rgb;

    col*=d*2.90;

   fragColor = vec4(col, 1.0);
}

Open it here: https://www.shadertoy.com/view/NtycDW

Xenium09, ball (deformation)

Code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   vec2 c = vec2(4.5*sin(iTime*1.0),3.53*cos(iTime*1.0));
    vec2 uv = fragCoord/iResolution.xy-vec2(0.5,0.5);
    uv += c*0.07;
    uv.y*=0.66;

    float d = length(uv);

    vec2 uv1;
    float R=0.17+0.05*sin(iTime*2.2);

    if(d>R) uv1 = (uv)/(d*d);
    if(d<R) uv1 = (1.5/R)*1.5*(uv)*(1.0+pow(d,0.5));

    vec4 col = texture(iChannel0, uv1+c);

    if(d<R) col*=(1.0-d/R)*3.0;
    if(d>R) col*=(1.0-(2.0-d/R)*1.0);

    fragColor = col;

}

Open it here: https://www.shadertoy.com/view/flycDW

Simulations by Maciej Matyka

Thursday, March 28, 2024

Three body problem JS implementation

Friday, September 9, 2022

Felp - new web address for kids apps

Tuesday, August 30, 2022

Smooth introduction to shaders talk

Thursday, August 25, 2022

Smooth introduction to shaders - shader list with code and screenshots

Soda Constructor (Revisited)

Search This Blog