Gif is very small due to lemmy.ml size restrictions. I can probably put a higher res one on youtube if ppl want to see.

edit: made it reasonable size by changing it to mp4

  • wisha
    1·
    2 months ago

    Awesome! Do you plan on publicly sharing the source code? I’d like to make a white on black background version.

    • morrowindOPM
      1·
      2 months ago

      sure, if you want. It’s based on a a tutorial by “gorilla sun”. I can link you to that if you prefer, or give you my code to modify directly

        • morrowindOPM
          2·
          2 months ago

          tutorial: https://www.gorillasun.de/blog/making-of-gateway/

          code:

          let N = 18;


function setup() {
   w = min(windowWidth, windowHeight);
   createCanvas(w, w);
   strokeWeight(6);

   compps = [];
   for (n = 0; n < N; n++) {
      rateOffset = map(n, 0, N, 0, 1);
      compps.push(rateOffset);
   }
   frameRate(20);

}

let div = 6;
let radius = 100;
let rmax = 300;
let compp = 0;
let rate = 0.033;

function draw() {
   // clear();
   background(255, 0, 0, 40);
   translate(w / 2, w / 2);

   for (n = 0; n < N; n++) {
      compps[n] += rate * (round(1 - compps[n], 1) + 0.05);
      if (compps[n] > 1) {
         compps[n] = 0;
      }

      shift = n*TAU / N;

      radius = map(compps[n], 0, 1, 0, rmax);
      for (b = shift; b < TAU + shift; b += TAU / div) {
         let a = b;// * compps[n];
         x = radius * cos(a);
         y = radius * sin(a);
         strokeLength = 20;
         maxStrokeWeight = 5;
         maxStrokeLength = 10;
         minDist = maxStrokeLength * maxStrokeWeight;
         if (radius < minDist) {
            dWeight = map(radius, 0, minDist, 0, maxStrokeWeight);
            strokeWeight(dWeight);
            strokeLength = dWeight*maxStrokeLength;
         } else {
            dWeight = map(radius, minDist, rmax, maxStrokeWeight, 0);
            strokeWeight(dWeight);
            strokeLength = dWeight * maxStrokeLength;
         }

         point(x, y);


         vRight = createVector(
            radius * cos(a + TAU / div),
            radius * sin(a + TAU / div)
         );

         angleRight = atan2(vRight.x - x, vRight.y - y);


         vecRight = createVector(
            x + strokeLength * sin(angleRight),
            y + strokeLength * cos(angleRight)
         );

         line(x, y, vecRight.x, vecRight.y);

         vLeft = createVector(
            radius * cos(a - TAU / div),
            radius * sin(a - TAU / div)
         );

         angleLeft = atan2(vLeft.x - x, vLeft.y - y);

         vecLeft = createVector(
            x + strokeLength * sin(angleLeft),
            y + strokeLength * cos(angleLeft)
         );

         line(x, y, vecLeft.x, vecLeft.y);
      }
   }
}