Tagged with #fractal - Processing 2.x and 3.x Forum

How to progressively draw a fractal tree

Emanuele — Mon, 27 Aug 2018 09:35:39 +0000

Hi everyone, I need to do a school project and I want to build a fractal tree that progressively "grows" using the mouse. how can I do it? this is the code I built:

void setup() 
{

        fullScreen();

 }

int levelsMin = 0;
    int levelsMax = 6;
    float initialLength = 235;

    float angleMin = PI/17;
    float angleMax = PI/10;

    int pointColor = color(27, 25, 9);

   void draw() {


        background(color(245,247,232));
        stroke(88, 50, 0);
        strokeWeight(7);

        float currentAngle = map (mouseX, 0, width, angleMin, angleMax); //mouse control of the branch angle
        int currentLevels = (int)map (mouseY, height,0, levelsMin, levelsMax); //mouse control of the generations count

        pushMatrix(); //save the world transformation matrix
        translate (width/2, height); //move the origin to the middle / bottom
       albero (currentLevels, initialLength, currentAngle); //draw first two branches - stems
        popMatrix(); //return to the world coordinate system
    }

    void albero (int levels, float length, float angle){
        if (levels>0){  //check if there are any levels left to render
            //destra
            pushMatrix();           //save current transformation matrix
            rotate (angle);         //rotate new matrix to make it point to the right
            line (0,0,0,-length);   //draw line "upwards"
            pushMatrix();           //save current (e.g. new) matrix
            translate(0,-length);   //move the origin to the branch end
            scale (0.85f);          //scale down. fun fact - it scales down also the stroke weight!
           albero (levels-1, length, angle);  //call the recursive function again
            popMatrix();            //return to the matrix of the current line
            popMatrix();            //return to the original matrix
            //second branch - the same story
            pushMatrix();
            rotate (-angle/1.7);
            line (0,0,0,-length);
            pushMatrix();
            translate(0,-length);
            scale (0.85f);
            albero (levels-1, length, angle);
            popMatrix();
            popMatrix();


        }

    }

Interactive fractal tree

BjarkePedersen — Tue, 13 Mar 2018 20:50:55 +0000

Yes, it's just a regular old fractal tree. But it's pretty :)

Try dragging it with your mouse

int iterations = 14;
int treeSize = floor(pow(2, iterations)-1);
Branch[] tree = new Branch[treeSize];

float t, t2, colorT;

float angle = 45;
float startangle;
float startererangle = angle;

float wind = 1;
float startwind = wind;
float tempWind;

float r, g, b;
boolean mouseBegin = true;
PVector startMouse;
float tempAngle;

float friction = 0.98; // 0.95 for original
float tension = 0.03;  // 0.1 for original

PGraphics pg;

int noiseSeed1, noiseSeed2, noiseSeed3;

int cursorCount = 0;

void setup () {
  fill(0);
  //size(800, 800, P2D);
  fullScreen(OPENGL);
  pixelDensity(displayDensity());
  smooth(8);
  pg = createGraphics(width, height);

  for (int i=1; i 20) noCursor();

  if (!mousePressed) {
      physics();
      mouseBegin = true;
    } else {
      if (mouseBegin == true) {
        startMouse = new PVector(mouseX, mouseY);
        tempWind = wind;
        tempAngle = angle;
        mouseBegin = false;
      }
      wind = tempWind + map(mouseX-startMouse.x, -width, width, deg(-1), deg(1));
      startwind = abs(wind);
      t = abs((wind/abs(wind)+1)*PI/2);

      angle = abs(tempAngle + map(mouseY-startMouse.y, -height, height, deg(-1), deg(1)))+0.01;
      startangle = startererangle-angle;
      t2 = abs(((angle/abs(angle)+1))*PI/2);
    }
}

void draw() {
  //println(frameRate);
  mouse();
  plant();

  noiseSeed(noiseSeed1);
  float r = map(noise(colorT/50), 0, 1, 0, 255);
  noiseSeed(noiseSeed2);
  float g = map(noise(colorT/75), 0, 1, 0, 255);
  noiseSeed(noiseSeed3);
  float b = map(noise(colorT/100), 0, 1, 0, 255);
  colorT--;


  // Start drawing image
  background(25);

  stroke(r, g, b);
  fill(r, g, b);
  rect(width/2-20, height-100, 40, 20, 3, 3, 40, 40);

  int level = 1;

  for (int i=0; i 6) strokeWeight(1);
      strokeWeight((iterations-level)/2);

      noiseSeed(noiseSeed1);
      r = map(noise(colorT/50+level*0.2), 0, 1, 0, 255);
      noiseSeed(noiseSeed2);
      g = map(noise(colorT/75+level*0.2), 0, 1, 0, 255);
      noiseSeed(noiseSeed3);
      b = map(noise(colorT/100+level*0.2), 0, 1, 0, 255);

      stroke(r, g, b);

      level++;
    }
    tree[i].show();
  }
}

public class Branch {
  PVector begin;
  PVector end;
  float rand;
  boolean finished = false;
  float rotation = 0;

  public Branch(PVector begin, PVector end) {
    this.begin = begin;
    this.end = end;
  }

  public void show() {
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
  }

  public void branch(int direction, Branch targetBranch) {
    PVector dir = new PVector(this.end.x-this.begin.x, this.end.y-this.begin.y);
    dir.rotate(rad(direction*angle+wind));
    dir.mult(0.6667);
    PVector newEnd = new PVector(this.end.x+dir.x, this.end.y+dir.y);
    targetBranch.begin = this.end;
    targetBranch.end = newEnd;
  }
}

static float rad(float deg) {
  return deg*PI/180;
}

static float deg(float rad) {
  return rad*180/PI;
}

Using React with p5.js (ES6+ support)

atoro — Mon, 12 Feb 2018 20:54:24 +0000

Check the online version here: http://fractal-tree-simulator.surge.sh/
Source code is available here: https://github.com/atorov/fractal-tree-simulator

Using React with p5.js

This project demonstrates the possibility of combining React, Bootstrap, p5.js and other modern technologies.
React is one of the most popular JavaScript libraries for creating single page applications.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

The basic idea is that the p5.js sketch is wrapped in a React component. The data that comes into the sketch is passed on to this component as props. Callbacks are used to return information back from the sketch to the application.

ES6+ Support

This project supports a superset of the latest JavaScript standard. In addition to ES6 syntax features, it also supports:
- Exponentiation Operator (ES2016).
- Async/await (ES2017).
- Object Rest/Spread Properties (stage 3 proposal).
- Dynamic import() (stage 3 proposal)
- Class Fields and Static Properties (part of stage 3 proposal).
-- JSX and Flow syntax.
- Syntax Highlighting and Displaying Lint Output in the Editor
- Тhe most popular editors should be covered and your editor should report the linting warnings.
- Code Splitting - allows you to split your code into small chunks which you can then load on demand. Supports code splitting via dynamic import().

Adding a Router and Redux

React Router is the most popular option. Redux is a predictable state container for JavaScript apps. React Router and Redux can easily be added to the project.

Running Tests

Jest is a Node-based runner. While Jest provides browser globals such as window thanks to jsdom, they are only approximations of the real browser behavior. Jest is intended to be used for unit tests of your logic and your components rather than the DOM quirks.

p5.js sketch

p5.Graphics for creating a graphics buffer;
p5.Vector for describing a two dimensional vectors;
p5.noise() - Perlin noise random sequence generator that produces a more natural ordered, harmonic succession of numbers compared to the standard random() function;
p5.colorMode() - both RGB and HSB color spaces;
p5.translate() and p5.rotate() matrix transformations, etc.

¿Why is my screen slowing down, is there any way to avoid this?

Sefiro10 — Sat, 02 Dec 2017 19:35:24 +0000

Here´s my code. It´s a simple-animated-3D fractal. The screen, slow down while it´s running. how can I avoid that? Here´s my code.

float i=1;
void setup() {
  fullScreen(P3D);
}

void draw() {
  background(255);
  drawCircle(width/2, height/2, i++/50);
}

void drawCircle(float x, float y, float radius) {
  stroke(0);
  noFill();
  ellipse(x, y, radius, radius);
  pushMatrix();  
  translate(x, y);
  rotate(i++/50000);
  box(radius);
  popMatrix();
  if (radius > 2) {
    drawCircle(x + radius/2, y, radius/2);
    drawCircle(x - radius/2, y, radius/2);
  }
}

Sierpinski triangle/gasket

siribiriz — Fri, 29 Sep 2017 22:36:22 +0000

Greetings

I hope some one can point me in the right direction. I am attempting to recreate this fractal using a game of chaos with a random die roll. Would someone who has better knowledge of PVectors please elaborate on where my code is failing? I also would appreciate constructive critique on how to better approach this problem?

PVector pA, pB, pC, cPos, nPos;
int goal=100000;

void setup() {
  size(800,800);
  background(50);
  pA = new PVector(width/2, 100);
  pB = new PVector(100,700);
  pC = new PVector(700,700);
  cPos = new PVector();
  nPos = new PVector();
  fill(255,0,0);
  ellipse (pA.x, pA.y, 10, 10);
  fill(0,255,0);
  ellipse (pB.x, pB.y, 10, 10);
  fill(0,0,255);
  ellipse (pC.x, pC.y, 10, 10);

  fill(220);
  translate(width/2,height/2);
  for (int i=0; i<=goal; i++){
    int x = int(random(1,7));

    if (x<3) {
      nPos = PVector.sub(pA,cPos);
      nPos.div(2);
      ellipse (nPos.x, nPos.y, 10, 10);
    }else if ((x>2) && (x<5)){
      nPos = PVector.sub(pB,cPos);
      nPos.div(2);
      ellipse (nPos.x, nPos.y, 10, 10);
    }else if ((x>4) && (x<7)){
      nPos = PVector.sub(pC,cPos);
      nPos.div(2);
      ellipse (nPos.x, nPos.y, 10, 10);
    }

    cPos=nPos;
  }

Fractal zoom

Aurelian24 — Sat, 05 Aug 2017 04:26:13 +0000

So i´ve just started with fractals watching shiffman nature of code videos, and im very interesting in developing fractals with infinite zoom but i´ve haven´t figured it out,i´ve already tryd with scale and zoom in z, but with no succes.

this is my try :

float zoom;
float zoomspeed;
float zoomacel;
float size;

int counter;
void setup() {

  size(600, 600, P3D);
  zoomspeed = 1;
  zoomacel = 0;
  size = 100;
}

void draw() {
  background(255);
  zoomspeed +=zoomacel;
  zoom += zoomspeed;

  translate(0, 0, zoom);
  fill(0);
  drawcircle(width/2,height/2,600);


  fill(255, 0, 0);

}

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


  fill(255);
  ellipse(x, y, size, size);
  fill(0);
  ellipse(x, y, size*0.90, size*0.90);

  if (size > 0.1) {
    counter++;
    size*=0.75;
    drawcircle(x,y,size);
    //println("SIZE :", size);
  }
}

Chaos game

noahbuddy — Sun, 07 May 2017 10:17:26 +0000

After I saw the chaos game video from Numberphile, I recreated it that evening but spent much longer playing around with it. I am placing a basic version here thinking someone else may enjoy. * Edited with suggestions from @jeremydouglass

int N = 3; // Number of control points
int MAX_DIST = 60;
int MANY_TIMES = 2000;
float DIV = 2.0; // You can change the rules for drawing the pattern

// Control points
float[] px = new float[N];
float[] py = new float[N];

// The moving point, draws the pattern
float selx = 0;
float sely = 0;

boolean held = false;
int nearest = -1;

void setup()
{
  size(800,600,P2D);

  // Initial points, anywhere you like
  px[0] = width/4;
  py[0] = height/4;
  px[1] = width - (width/4);
  py[1] = height/4;
  px[2] = width - (width/4);
  py[2] = height - (height/4);

  noFill();
  frameRate(60);
  background(0);
}

void mouseMoved()
{
  float neardist = width + height;
  for (int i=0; i



Julia Set with Quaternions
MrGonao — Thu, 14 Apr 2016 10:03:37 +0000
Hello. Fractals have been what I enjoy programming the most.  This last time I've done some work with Julia Sets and quaternions. 
For those who don't know what Julia sets are they are some sort of iterative function using complex numbers, I will leave a like to the wiki page here: https://en.wikipedia.org/wiki/Julia_set

For those who don't know what Quaternions are they are sort of complex number, but with 4 dimensions instead of 2, and here is the link if you want to do some reading : https://en.wikipedia.org/wiki/Quaternion

To explain my work: I use the normal f(z)=z^2+c to iterate over z, but instead of it being a complex number now it is a quaternion, which gives me a 4d object instead of a 2d one that you normally get using the normal julia iteration. Next I fix the w coordinate and the z coordinate, having now a 2d slice of the 4d object. With the "a" and "d" keys you can slide along the z axis, but not the w. C also has 4 coordinates, let's call them a,b,c,d, and the values are displaying along side de drawing. You can change them by moving the mouse to the top, the bottom or the sides, and pressing. You can see how it works easily, basically the top changes the a coordinate, the bottom changes b, right changes c and left changes d.

If anyone has some ideas on how to draw the set straight to 3d and wants to discuss some maths I would gladly appreciate it; any improvements on my code are also welcome.

I leave the code here: http://pastebin.com/E532V1GJ

Have a nice day and thanks for your time.



Designing fractals
pacoruiz — Sat, 05 Sep 2015 18:20:42 +0000
Hi. Im trying to make sketches to design fractals. There are several ways to draw one, but all of them are based on transformations. I´ve made one to generate sierspinsky triangle, and it works. Ive change the parameters to make a Barnsley Fern, and the result has nothing to do with it. I´ve taken the parameters from this page. home.aone.net.au/~byzantium/ferns/fractal.html . Im not drawing the central line.

This is the code for sierpinsky

    class Forma{
      float[] x = new float[4];
      float[] y = new float [4];
      Forma(float x0, float x1, float x2, float x3, float y0, float y1, float y2, float y3){
        x[0]=x0;x[1]=x1;x[2]=x2;x[3]=x3; y[0]=y0;y[1]=y1;y[2]=y2;y[3]=y3;

      }

      void render(){
        quad(x[0]*escala,y[0]*escala,x[1]*escala,y[1]*escala,x[3]*escala,y[3]*escala,x[2]*escala,y[2]*escala);
      }
    }

    int n = 3; //número de transformaciones
    ArrayList formas= new ArrayList();
    int iterando = 0;
    int escala =300;


    void setup() {
      size(500, 500, P2D);
      background(250);
      formas.add ( new Forma(0.0, 1.0,0.0, 1.0, 0.0,0.0,1.0,1.0));
      noLoop();
    }
    int iterations = 4;
    float x=0.5;
    float y=0.5;
    color col = color(100, 50,255);
    int maxiterations = 1000000;

    void draw() {
    background(255);
    fill(255,100,100);
    for(int i = 0; i=0;i--){
       Forma form = (Forma) formas.get(i);
       println("erasing "+i);
       muestra(form);
       formas.remove(i);
      } 

      /**for(int i=0;i=0;i--){
   Forma form = (Forma) formas.get(i);
   println("erasing "+i);
   muestra(form);
   formas.remove(i);
  } 

  /**for(int i=0;ihttps://github.com/nikolajRoager/windyTree.git