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