title

deconbatch's Land of 1000 Creative Codings. example codes of Processing / p5.js, how-to articles, generative art images, and much more!

Spirit In The Night.

Creative coding example code.
Creative coding example code.
Creative coding example code.

Description of this animation.

Creative coding animation made with Processing.

It's a common 'dancing ribbon' loop animation. It creates various patterns. And it's so fun!

This code does not display any images on the screen but generates image files in frames directory.
You can make an animation with these files.

Processing code example.

Please feel free to use this example code.
To see other works based on my code is my pleasure. And my honor.


// Spirit In The Night.
// Processing 3.2.1
// 2018.05.27
// 16fps x 6.25s = 200f

  void setup() {

     size(720, 720);
     colorMode(HSB, 360, 100, 100, 100);
     blendMode(SCREEN);
     smooth();
     noLoop();
     noStroke();

   }

    void draw() {

      translate(width / 2, height / 2);

      // magic numbers
      int   spotCntMax = 25 * ceil(random(5.9)) + 2;
      float paramWaveX = random(0.992, 1.008);
      float paramWaveY = random(0.992, 1.008);
      float paramBendX = random(0.1, 2.0);
      float paramBendY = random(0.1, 2.0);
      float hueBase    = random(360);

      // animation step
      int frames = 0;
      for (float step = 0.0; step < 2.0; step += 0.02) {

        background(0, 0, 0, 100);

        // calculate spot location
        for (int spotCnt = 1; spotCnt <= spotCntMax; ++spotCnt) {

          float startLoc = map(spotCnt, 1, spotCntMax, 100.0, 0.0);
          float radian   = PI * (step + startLoc);
          float radius   = sin(map(spotCnt, 1, spotCntMax, 0, PI * 0.5)) * 280 + 50;
          float hueApply = (hueBase + map(spotCnt, 1, spotCntMax, 0.0, 30.0)) % 360;

          // widen spots
          for (float radianDiv = 0; radianDiv < PI * 1.0; radianDiv += PI * 0.1) {

            float tracks   = radian + radianDiv / 5.0;
            float briApply = 60 * sin(radianDiv);

            float x = radius * cos((tracks) + sin((tracks) * paramWaveX) * paramBendX);
            float y = radius * sin((tracks) + cos((tracks) * paramWaveY) * paramBendY);

            fill(hueApply, 40, briApply, 100);
            drawEllipse(x, y , 10);

          }
        }

        // save frames step by step
        saveFrame("frames/" + String.format("%04d", frames) + ".png");
        ++frames;

      }
      
      exit();

    }

void drawEllipse(float x, float y, float size) {

  ellipse(x, y , size, size);
  ellipse(-x, -y , size, size);

}


/*
Copyright (C) 2018 deconbatch

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see 
*/





Post a Comment

0 Comments