2D animation with 3D noise that looks like a 3D.

An example image made with the 3D Perlin noise.


 

A 2D animation with 3D noise.

It's a creative coding animation made with the 'Processing' programming language.

I drew 2D animation with 3D noise as noise(x, y, time). And I think if I increased time value monotonously, the animation would be something boring. So I used another 2D noise to increase the time value. It worked! 👍

 

Processing example code.








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


// I Feel the Earth Move.
// Processing 3.2.1
// 2018.03.21

void setup() {

  size(900, 900);
  colorMode(HSB, 360, 100, 100, 100);
  smooth(8);
  noLoop();

}

void draw() {

  translate(width / 2, height / 2);

  float hueBase     = random(360);
  float timeXStart  = random(100);
  float timeYStart  = random(100);
  float timeZStart  = random(100);
  float spaceXStart = random(100);
  float spaceYStart = random(100);

  for (int i = 0; i < 90; ++i) { // number of image frames

    // draw land and sea
    blendMode(SCREEN);
    noStroke();
    background(0, 0, 0, 100);
  
    float spaceX = spaceXStart;
    float timeX  = timeXStart;

    for (int x = -width / 2; x <= width / 2; ++x) {

      float spaceY = spaceYStart;
      float timeY  = timeYStart;

      for (int y = -height / 2; y <= height / 2; ++y) {

        // i + 0 = land edge from smooth to rough, i + 90 = land edge from rough to rough
        float timeZ    = timeZStart + map(noise(timeX, timeY), 0, 1, 0.0001, 0.015) * (i + 90);
        float noiseVal = noise(spaceX, spaceY, timeZ);

        float hueLand = 0;
        if (noiseVal < 0.5) {
          hueLand = 90; // use different color with land between sea
        }
        float hueVal = (hueBase + hueLand + map(noiseVal, 0, 1, -30, 30)) % 360;
        float satVal = map(noiseVal, 0, 1, 80, 10);
        float briVal = map(abs(noiseVal - 0.5), 0.0, 0.5, 15.0, 50.0);
        float sizVal = map(abs(noiseVal - 0.5), 0.0, 0.5, 3.0, 1.0);

        fill(hueVal, satVal, briVal, 100);
        pushMatrix();
        translate(x, y);
        if (noiseVal < 0.5) {
          ellipse(0, 0, sizVal, sizVal); //land
        } else {
          rect(0, 0, sizVal, sizVal);    //sea
        }
        popMatrix();

        spaceY += 0.005;
        timeY  += 0.008;
        
      }

      spaceX += 0.005;
      timeX  += 0.008;

    }

    // casing
    blendMode(BLEND);
    fill(0, 0, 100, 0);
    strokeWeight(50);
    stroke(0, 0, 100, 100);
    rect(-width / 2, -height / 2, width, height);

    // save image
    saveFrame("frames/" + String.format("%05d", i) + ".png");
      
  }

  exit();

}


/*
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 <http://www.gnu.org/licenses/>
*/



 

Next Post Previous Post
2 Comments
  • Unknown
    Unknown Friday, October 12, 2018

    Hello,
    I took this code and translated it into p5.js
    Well partially for the moment (v0.01) the Earth is not moving yet ! I process into an off-screen graphics buffer and copy the result onto the canvas at the end choosing the i randomly between 0 and 90 instead of looping and saving the frames.
    Your work is great. Thank you for sharing !

    https://github.com/PhilippeMarcMeyer/EarthMove

    • deconbatch
      deconbatch Wednesday, December 12, 2018

      I thank you!
      I'm very proud of that.😊

Add Comment
comment url