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@lemmy.ml
    link
    fedilink
    arrow-up
    1
    ·
    4 months ago

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

    • morrowind@lemmy.mlOPM
      link
      fedilink
      arrow-up
      1
      ·
      4 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

        • morrowind@lemmy.mlOPM
          link
          fedilink
          arrow-up
          2
          ·
          4 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);
                }
             }
          }