title

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

Secret Garden.

Flying leaf beetles that were created with Processing programming language.


An animation of flying leaf beetles.

It's a creative coding animation made with Processing.

I wanted to make a 'Fire pencil' like this.


And I couldn't do that as always. XP
But I found some interesting shapes and moving like flying leaf beetles. So I made this animation.

Special thanks to @rokusho_7777 for nice ideas.

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

Processing code example.

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


// Secret Garden.
// @author @deconbatch
// @version 0.1
// Processing 3.2.1
// 2018.11.18

void setup() {

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

}

void draw() {

  translate(width / 2, height / 2);
  rotate(random(TWO_PI));

  int   frameCntMax = 15 * 6;
  int   leafCntMax  = 15;
  float baseHue     = random(360.0);
  float paramTrace  = random(3.0, 6.0);
         
  for (int frameCnt = 0; frameCnt < frameCntMax; ++frameCnt) {

    float frameRatio = map(frameCnt, 0, frameCntMax, 0.0, 1.0);
    background(0.0, 0.0, 0.0, 100);

    blendMode(BLEND);
    backdrop(baseHue);

    blendMode(SCREEN);
    strokeWeight(0.1);
    for (int leafCnt = 0; leafCnt < leafCntMax; ++leafCnt) {

      float leafRatio = map(leafCnt, 0, leafCntMax, 0.0, 1.0);
      float easing    = easeInOutCubic(((frameRatio + leafRatio) % 1.0) * 0.8 + 0.1);
      float radian    = TWO_PI * (easing + leafRatio * paramTrace);
      float radius    = width * (0.1 + leafRatio * 0.4);

      Float x = radius * cos(radian + sin(radian)) * sin(radian);
      float y = radius * sin(radian + cos(radian)) * cos(radian);

      drawLeaf(leafRatio, frameRatio, x, y, baseHue);

    }

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

  }

  exit();

}

/**
 * drawLeaf draw a leaf
 * @param  leafRatio  0.0 - 1.0   : leaf count ratio.
 * @param  frameRatio 0.0 - 1.0   : frame count ratio.
 * @param  baseX      0.0 - width : draw point x.
 * @param  baseY      0.0 - width : draw point y.
 * @param  baseHue    0.0 - 360.0 : leaf color.
 */
private void drawLeaf(float leafRatio, float frameRatio, float baseX, float baseY, float baseHue) {

  int   wingCntMax   = 2000;
  int   vertexCntMax = 20;
  float flapSpeed    = 30.0;
  float wingSize     = 6.0;
  
  for (int wingCnt = 0; wingCnt < wingCntMax; ++wingCnt) {

    float wingRatio     = map(wingCnt, 0, wingCntMax, 0.0, 1.0);
    float flapAnimation = (leafRatio * wingCntMax + frameRatio * flapSpeed);
    float fillHue       = (leafRatio + sin(PI * frameRatio)) * 30.0 + wingRatio * 30.0;
    
    float applyX = baseX;
    float applyY = baseY;

    beginShape();
    vertex(baseX, baseY);

    for (int vertexCnt = 0; vertexCnt < vertexCntMax; ++vertexCnt) {

      int   wingShape = wingCnt + vertexCnt;
      float divX      = map(noise(flapAnimation + wingShape * 0.06), 0.0, 1.0, -wingSize, wingSize);
      float divY      = map(noise(flapAnimation + wingShape * 0.05), 0.0, 1.0, -wingSize, wingSize);
      float fillSat   = map(wingRatio, 0.0, 1.0, 0.0, 60.0);
      float fillBri   = (wingSize * wingSize * 2.0) / (divX * divX + divY * divY);
      float strokeBri = map(wingRatio, 0.0, 1.0, 0.0, 2.0);
      float changeSiz = map(noise(sin(frameRatio * TWO_PI) + leafRatio * 10.0), 0.0, 1.0, 0.5, 1.0);

      applyX += divX * changeSiz;
      applyY += divY * changeSiz;
    
      stroke(
             (baseHue + 60.0) % 360.0,
             60.0,
             strokeBri,
             100.0
             );
      fill(
           (baseHue + fillHue) % 360.0, 
           fillSat,
           fillBri * 0.007,  // key of this code!
           100.0
           );
      vertex(applyX, applyY);

    }

    vertex(baseX, baseY);
    endShape();

  }
}

/**
 * easeInOutCubic easing function.
 * @param  t     0.0 - 1.0 : linear value.
 * @return float 0.0 - 1.0 : eased value.
 */
private float easeInOutCubic(float t) {
  t *= 2.0;
  if (t < 1.0) {
    return pow(t, 3) / 2.0;
  }
  t -= 2.0;
  return (pow(t, 3) + 2.0) / 2.0;
}

/**
 * backdrop draw backdrop.
 * @param  baseHue 0.0 - 360.0 : backdrop color.
 */
private void backdrop(float baseHue) {

  noFill();
  strokeWeight(10.0);
  float pW = width * 1.5;
  for (float radius = 10.0; radius < pW; radius += 5.0) {
    stroke(
         baseHue,
         90,
         map(radius, 10.0, pW, 0.0, 20.0),
         100
         );
    ellipse(0.0, 0.0, radius, radius);
  }
  
}

/*
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 
*/



Yet another example images.

Flying leaf beetles that were created with creative coding. 

Flying leaf beetles animation.

 

Post a Comment

0 Comments