I Feel the Earth Move.


About this creative coding animation.

It's a creative coding animation made with 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.
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 
*/










2 comments :

  1. 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

    ReplyDelete