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

    • 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);
            }
         }
      }