title

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

Hydrangea Glaze

I arranged 2D ellipses on the 3D cup. It seemed a piece of pottery in the oven to me.


Description of this creative coding.

This creative coding artwork was made with Processing.
I arranged 2D ellipses on the 3D cup. It seemed a piece of pottery in the oven to me. And these patterns and the color reminds me of hydrangea flower.

The flat style pattern is also interesting. It just arranges ellipses in a grid and changes ellipse size with 2D noise. It's so simple but beautiful.
How The Web Was Woven.

Many ellipses on a grid.



Processing code example.

Please feel free to use this examplse code, if you like it.
// Hydrangea Glaze.
// Processing 3.2.1
// 2017.06.25

import java.util.Random;

/* ---------------------------------------------------------------------- */
abstract class PshapeElement {

  PShape anElement;
  float elementColor, elementSaturation, elementBright, elementAlpha;
  
  PshapeElement() {
    anElement = pscreateElement();
    elementColor = 0;
    elementSaturation = 0;
    elementBright = 0;
    elementAlpha = 0;
  }

  abstract PShape pscreateElement();

  void setElementFill(float pcolor, float psaturation, float pbright, float palpha) {
    elementColor = pcolor;
    elementSaturation = psaturation;
    elementBright = pbright;
    elementAlpha = palpha;
    resetColor();
  }

  void resetColor() {
    anElement.setFill(color(elementColor, elementSaturation, elementBright, elementAlpha));
    anElement.setStroke(color(elementColor, elementSaturation, elementBright, elementAlpha));
  }

  void changeColor(float scolor) {
    elementColor = scolor;
    resetColor();
  }

  void changeBright(float sbright) {
    elementBright = sbright;
    resetColor();
  }

  void resetSize() {
    anElement.resetMatrix();
  }

  void changeSize(float scaleX, float scaleY, float scaleZ) {
    anElement.scale(scaleX, scaleY, scaleZ);
  }

  void rotate(float radX, float radY, float radZ) {
    anElement.rotateX(radX);
    anElement.rotateY(radY);
    anElement.rotateZ(radZ);
  }

  void show() {
    shape(anElement);
  }

}

/* ---------------------------------------------------------------------- */
class RoundBrush extends PshapeElement {
  
  RoundBrush() {
    super();
  }

  PShape pscreateElement() {

    stroke(0);
    noFill();
    PShape psDp = createShape(ELLIPSE, 0.0, 0.0, 10.0, 10.0);
    return psDp;

  }

}

/* ---------------------------------------------------------------------- */
class EllipseBrush extends PshapeElement {
  
  EllipseBrush() {
    super();
  }

  PShape pscreateElement() {

    noStroke();
    fill(0);
    PShape psDp = createShape(ELLIPSE, 0.0, 0.0, 10.0, 10.0);
    return psDp;

  }

}

/* ---------------------------------------------------------------------- */

PshapeElement pRound, pEllipse;

void setup() {
  size(1080, 1080, P3D);
  
  colorMode(HSB, 360, 100, 100, 100);
  blendMode(SCREEN);
  strokeWeight(0.06);
  smooth(8);
  noLoop();
  //  frameRate(1);

  pRound = new RoundBrush();
  pEllipse = new EllipseBrush();

}

void draw() {

  background(0, 0, 8);

  translate(0, 0, 0);
  camera(0, 1800, 1000,
         0, 0, 0,
         0, 1, 0);
  
  drawPottery();

  saveFrame("frames/####.png");
  exit();

}


void drawPottery() {

  PVector locateRound = new PVector(0, 0, 0);
  PVector locateEllipse = new PVector(0, 0, 0);
  
  float radiusRound = 800.0;
  float radiusEllipse = 799.0;
  float divIdo = 4.0;
  float divKdo = 0.0; // dummy
  float circleBase = 6.0;
  float circleMult = 3.0;
  //  float circleBase = 8.0;
  //  float circleMult = 2.0;

  float noiseHueIdo = random(50);
  float noiseSatIdo = random(50);
  float noiseSizIdo = random(50);

  float noiseHueKdoStarter = random(50);
  float noiseSatKdoStarter = random(50);
  float noiseSizKdoStarter = random(50);

  for (float ido = 45; ido <= 180; ido += divIdo) { // Y
    float radianIdo = radians(ido);
    divKdo = 180 / max(160 / divIdo * sin(radianIdo), 1);

    float noiseHueKdo = noiseHueKdoStarter;
    float noiseSatKdo = noiseSatKdoStarter;
    float noiseSizKdo = noiseSizKdoStarter;

    for (float kdo = 0; kdo <= 360 - divKdo; kdo += divKdo) { // Z

      float radianKdo = radians(kdo);
      locateRound.set(
                      radiusRound * cos(radianKdo) * sin(radianIdo),
                      radiusRound * sin(radianKdo) * sin(radianIdo),
                      radiusRound * cos(radianIdo)
                      );
      locateEllipse.set(
                        radiusEllipse * cos(radianKdo) * sin(radianIdo),
                        radiusEllipse * sin(radianKdo) * sin(radianIdo),
                        radiusEllipse * cos(radianIdo)
                        );

      float roundSize = map(noise(noiseSizIdo, noiseSizKdo), 0.0, 1.0, circleMult * circleBase, circleBase);
      float roundHue = map(noise(noiseHueIdo, noiseHueKdo), 0.0, 1.0, 260, 360);
      float roundSat = map(noise(noiseSatIdo, noiseSatKdo), 0.0, 1.0, 20.0, 100.0);
      float roundBri = map(noise(noiseSatIdo, noiseSatKdo), 0.0, 1.0, 60.0, 100.0);
      float roundAlp = 100;

      float ellipseSize =  roundSize;
      float ellipseHue = map(noise(noiseHueIdo, noiseHueKdo), 0.0, 1.0, 220, 320);
      float ellipseSat = map(noise(noiseSatIdo, noiseSatKdo), 0.0, 1.0, 80.0, 40.0);
      float ellipseBri = map(noise(noiseSizIdo, noiseSizKdo), 0.0, 1.0, 4.0, 12.0);
      float ellipseAlp = 100;

      float fctBri = map(locateRound.z, -radiusRound, radiusRound, 0.1, 1.2);

      // base
      pushMatrix();
      translate(locateEllipse.x, locateEllipse.y, locateEllipse.z);
      rotateZ(radianKdo); // must be this order Z -> Y
      rotateY(radianIdo);
      pEllipse.resetSize();
      pEllipse.changeSize(ellipseSize, ellipseSize, 1.0);
      pEllipse.setElementFill(ellipseHue, ellipseSat, ellipseBri * fctBri, ellipseAlp);
      pEllipse.show();
      popMatrix();

      // glaze
      pushMatrix();
      translate(locateRound.x, locateRound.y, locateRound.z);
      rotateZ(radianKdo); // must be this order Z -> Y
      rotateY(radianIdo);
      pRound.resetSize();
      pRound.changeSize(roundSize, roundSize, 1.0);
      pRound.setElementFill(roundHue, roundSat, roundBri * fctBri, roundAlp);
      pRound.show();
      popMatrix();

      noiseHueKdo += 0.05;
      noiseSatKdo += 0.12;
      noiseSizKdo += 0.10;

    }
    
    noiseHueIdo += 0.05;
    noiseSatIdo += 0.12;
    noiseSizIdo += 0.10;

  }

}

/*
Copyright (C) 2017- 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