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<treeSize; i++) {
    tree[i] = new Branch(new PVector(0,0),new PVector(0,0));
  }
  seed();
  plant();

  noiseSeed1 = day() + hour() + minute() + second();
  noiseSeed2 = int(noiseSeed1 * 1.41421356237);
  noiseSeed3 = int(noiseSeed2 * 3.14159265358);

}

void seed() {
  PVector dir = new PVector(0, -300);
  dir.rotate(rad(wind));

  PVector a = new PVector(width/2, height-100) ;
  PVector b = new PVector(width/2+dir.x, height+dir.y-100);
  tree[0] = new Branch(a, b);
}


void plant() {
  seed();

  for (int i=1; i<treeSize; i++) {
    int n = floor((i-1)/2);
    if (i % 2 == 0) {
      tree[n].branch(-1, tree[i]);
    } else {
      tree[n].branch(1, tree[i]);
    }
  }
}

void physics() {
  wind = startwind*(cos(t))*-1;
  startwind *= friction;
  noiseSeed(1337);
  startwind += map(noise(t/51-100), 0, 1, -0.2, 0.2);
  t -= tension;

  angle = startererangle + startangle*(cos(t2));
  startangle *= friction;
  noiseSeed(42);
  startangle += map(noise(t2/50), 0, 1, -0.2, 0.2);
  t2 -= tension;
}

PVector prevMouse, mouse;

void mouse(){
  // Hide / show cursor
  prevMouse = mouse!=null ? mouse : new PVector(mouseX, mouseY);
  mouse = new PVector(mouseX, mouseY);
  cursorCount ++;
  if (mouse.x != prevMouse.x || mousePressed) {cursorCount = 0; cursor();};
  if (cursorCount > 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<treeSize; i++) {
    if ((i % (pow(2, level)-1)) == 0) {
      //if (level > 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;
}

link project in problem version

So any idea are very very welcome !

shader frag

/**
ROPE - Romanesco processing environment – 
* Copyleft (c) 2014-2017 
* Stan le Punk > http://stanlepunk.xyz/

Shader to warp texture

Render fluid
v 0.0.2
*/
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

#define PI 3.1415926535897932384626433832795

varying vec4 vertTexCoord;
uniform sampler2D texture;

uniform int mode;
uniform float roof_component_colour;

uniform sampler2D vel_texture;
uniform sampler2D dir_texture;
uniform vec2 grid_wh;

float map(float value, float start1, float stop1, float start2, float stop2) {
  float result = start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
  return result;
}  
vec2 cartesian_coord(float angle) {
  float x = cos(angle);
  float y = sin(angle);
  return vec2(x,y);
}

void main() {

  vec2 ratio = gl_FragCoord.xy / grid_wh;
  // vec2 ratio = vertTexCoord.st / grid_wh;

  vec4 vel = texture2D(vel_texture, ratio);
  vec4 dir = texture2D(dir_texture, ratio);


  // rendering picture ;
  if(mode == 0 ) {

    float angle_rad = map(dir.x, 0, roof_component_colour, -PI, PI);
    vec2 dir_cart = cartesian_coord(angle_rad) ;

    // float gap = max(grid_wh.x, grid_wh.y);
    // vec2 translate_pix = dir_cart.xy *vel.x / gap;
    vec2 translate_pix = dir_cart.xy *vel.x ;

    vec2 coord_dest = vertTexCoord.st +translate_pix ;
    vec4 tex_colour = texture2D(texture, coord_dest);

    gl_FragColor = tex_colour;
  }
  // velocity
  if(mode == 1 ) {
    gl_FragColor = texture2D(vel_texture, vertTexCoord.st);;
  }
  // direction force field
  if(mode == 2) {
    gl_FragColor = texture2D(dir_texture, vertTexCoord.st);;
  }

}

Processing

PImage tex_velocity, tex_direction ;
PShader warping;
PImage img ;
int grid_w, grid_h ;
void setup() {
  size(600,375,P2D);
  img = loadImage("pirate_small.jpg");
  grid_w = 60 ;
  grid_h = 37 ;
  tex_velocity = createImage(grid_w,grid_h,RGB);
  tex_direction = createImage(grid_w,grid_h,RGB);  
  warping = loadShader("shader/warp/rope_warp_fluid.glsl");
  noise_img(tex_velocity, 20, .1, .1); // max translate for the pixel
    noise_img(tex_direction, 360, .1, .1); // degree direction
}

void draw() {
    if(frameCount%60 == 0) {
        noise_img(tex_velocity, 20, .1, .1); // max translate for the pixel
        noise_img(tex_direction, 360, .1, .1); // degree direction
    }

    warping.set("mode", 0) ;
    warping.set("texture",img);
    warping.set("roof_component_colour",g.colorModeX);
    warping.set("grid_wh",grid_w,grid_h);

  warping.set("vel_texture",tex_velocity);
  warping.set("dir_texture",tex_direction);
  shader(warping);

  image(img,0,0);
  resetShader();
  image(tex_velocity,5,5);
  image(tex_direction,grid_w +15 ,5 );
}


float x_offset, y_offset ;
void noise_img(PImage dst, int max, float ratio_x, float ratio_y) {
    noiseSeed((int)random(10000));
    for(int x = 0 ; x < dst.width ; x++) {
        x_offset += ratio_x ;
        for(int y = 0 ; y < dst.height ; y++) {
            y_offset += ratio_y ;
            float v = map(noise(x_offset,y_offset),0,1,0,max);
            v = (int)map(v,0,max,0,g.colorModeX);
            int c = color(v,v,v,g.colorModeA) ;
            dst.set(x,y,c);
        }
    }
}

My tessting code is:

float x;  
float y;

void setup() {
  size(800,600);  
  fill(255);
  noStroke();
  getRandom();
}  

void draw() {
  background(240,168,128);  
  ellipse(x, y, 20, 20);
}

void mouseClicked() {
  getRandom();
  println(x, y);
}

void getRandom() {
  x = noise(0) *200 + width/2;  
  y = noise(0) *200 + height/2; 
}

So, first time i run the sketh I get, let's say:

(565.2674, 465.2674)

And even clicking on screen the value stays the same. But as soon as I run the sketch again I get something else, like:

(494.57538, 394.57538)

Why is so?

// *** Physical Map Generator (phmg_a2x1) by Atoro 
// *** Maps should look realistic with distinguishable geographic features, 
// *** such as mountains, valleys, lakes, seas, bays, peninsulas, etc.
// *** Whenever the keyboard button is pressed, the new map is generating.
color[] cp = {
  color(0, 126, 192), 
  color(24, 154, 208), 
  color(58, 168, 214), 
  color(94, 186, 220), 
  color(128, 199, 228), 
  color(163, 216, 235), 
  color(197, 229, 243), 
  color(232, 244, 250), 
  color(135, 209, 63), 
  color(203, 227, 107), 
  color(255, 227, 153), 
  color(255, 205, 127), 
  color(234, 136, 70), 
  color(209, 104, 47), 
  color(187, 76, 15), 
  color(148, 56, 0)
}; 
void setup() {
  size(1024, 768);
}
void draw() {
  noiseSeed(int(random(10000000))); 
  loadPixels(); 
  float d0 = random(100, 200);   
  float d1 = random(25, 75); 
  for (int j = 0; j < height; j++) {
    for (int i = 0; i < width; i++) {
      float n0 = noise(i/d0, j/d0, 0); 
      float n1 = noise(i/d1, j/d1, 10); 
      float n = 1 - (n0*0.75 + n1*0.25); 
      int k = int(n*cp.length); 
      pixels[j*width + i] = cp[k];
    }
  } 
  updatePixels();
  noLoop();
  // save("maps/Map_a2x1_ID" + int(random(10000000)) + ".png");
}
void keyPressed() {
  loop();
}

I wrote this :

var col = [],a,b,c,n0,n1,d0,d1,n,k ;


function preload() {
  background = loadImage("test.jpg");
}
function setup() {
  createCanvas(windowWidth, windowHeight);
  image(background, 0, 0,windowWidth,windowHeight);
  colorMode(RGB);
   alf = 128;
col [color(255,255,255,alf), color(197,193,185,alf),color(151,158,163,alf),color(87,103,116,alf),color(233,227,208,alf),color(200,170,111,alf),color(143,127,70,alf),color(86,95,37,200),color(47,66,16,200),color(8,8,56,200),color(255,255,255,0)];

  a=0;
  b=0;
}


function draw() {
   
 noiseSeed(int(random(10000000))); 
  loadPixels(); 
  d0 = random(100, 200);   
 d1 = random(25, 75); 
  for ( a = 0; b < height; b++) {
    for ( a = 0; a < width; b++) {
      n0 = noise(a/d0, b/d0, 0); 
      n1 = noise(a/d1, b/d1, 10); 
      n = 1 - (n0*0.75 + n1*0.25); 
      k = n*col.length; 
      pixels[b*width + a] = col[k];
    }
  } 
  updatePixels();
  noLoop();
  
}

The console shows nothing wrong but when I run the program, the window is frozen on the "loading" page and I have to force my computer to end the p5.js application.

Could you explain me why ?

I'm not a great programmer but I need to use this small part of code from processing in a bigger program that is in p5.js.

Thank you for your help

On JavaScript mode, though, if I keep the same trigonometric equation, it will always generate the same pattern, independently of the noiseSeed.

I first thought that JavaScript doesn't allow changing noiseSeed while the sketch is running, but even setting the noiseSeed to a constant or not setting it and letting it be chosen randomly, it always generates the same pattern.

noiseSeed is documented on the Processing JS reference so I thought the pattern would change, even if noise doesn't look the same way on Java and JavaScript modes. Does anyone have an idea of why it isn't working?

Here a code example:

int hue_;
int seed;

void setup()
{
  size(600, 600);
  colorMode(HSB);

  newPattern();  
}

void draw()
{  
  showPattern(); 
}


void mousePressed()
{
  newPattern();
}

void newPattern()  
{
  hue_ = (int) (random(255));  
  seed = (int) (random(10000));  
  noiseSeed(seed);
  println(seed);
}

void showPattern()
{
  loadPixels();
    float dx = 0;
    for(int x = 0; x < width; x += 1)
    {
      float dy = 0;
      for(int y = 0; y < height; y += 1)
      {
        float bright = noise(cos(dx), cos(dy));
        bright = map(bright, 0, 1, 0, 255);
        pixels[x + y*width] = color(hue_, 127, bright);
        dy += 0.02;
      }
      dx += 0.02;
    }
  updatePixels();
}

Within an array of squares forming a grid, points passing through the individual squares are intended to change the square's colour (grid.highlight();). The x/y position of the points is used to determine wether they have passed through or not.

When a single point is used, the code works and the square it is passing through will change colour. I cannot, however, figure out how to make multiple points work.

//Array of Boxes
Box[][] grid;
//Array of points
Point[] points;

void setup(){
  size(800,800);
  colorMode(HSB,360,100,100);

  //Initialise Points
  points = new Point[1]; //MORE THAN 1 DOES NOT WORK
  for (int i=0; i < points.length; ++i){
    points[i] = new Point();
  }

  //Initialise Grid
  grid = new Box[20][20];
  for (int i=0; i<grid.length; ++i){
    for (int j=0; j<grid.length; ++j){
        grid[i][j] = new Box(i*(width/grid.length),
                             j*(width/grid.length),
                             (width/grid.length)-5);
          }
        }
}

void draw(){
  background(0);

  //Draw points
  for (int i=0; i<points.length; ++i){
        points[i].move();
        points[i].colorcyc();
        points[i].display();
      }

  //Draw Grid
  for (int i=0; i<grid.length; ++i){
    for (int j=0; j<grid.length; ++j){

        //Check intersection -- PROBLEM ARISES HERE
        for (int k=0; k<points.length; ++k){
            if (points[k].inside(grid[i][j])) {
              grid[i][j].highlight(points[k].col);
            } else {
              grid[i][j].highlight(0);
            }
          }

        //display grid
        grid[i][j].display();
      }
    }
}

//Individual box

class Box{
  float x,y,w;
  color c;

  Box (float x_, float y_, float w_) {
    x=x_; //X Location
    y=y_; //Y Location
    w=w_; //Size
  }

  //Color changer
  void highlight(color c_){
    c=c_;
  }


  void display() {
    stroke(255);
    fill(c);

    pushMatrix();
      translate(x,y);
      rect(0,0,w,w);
    popMatrix();
  }
}

// Random xy point

class Point{
  float x,y;
  float xoff;
  float yoff;
  float increment;

  int c;
  color col;

  Point(){
    x = width/2;
    y = height/2;

    xoff = random(10);
    yoff = random(10);
    increment = random(10)*0.01;
  }

  void move(){
        x += ( (noise(xoff)-0.5)*20 );
        y += ( (noise(yoff)-0.5)*20 );

        if (x > width || x < 0){
         x = width/2;
         y = height/2;
        }

        if (y > height || y < 0){
          x = width/2;
          y = height/2;
        }

        xoff += increment;
        yoff += increment;
  }

  //Cycle HSB colors
  void colorcyc(){
    c += 3;
        if (c > 360){
          c = 0;
        }
    col = color(c,100,100);
  }

  void display(){
        noStroke();
        fill(col);

        ellipse(x,y,12,12);
  }

  //check if inside a box
  boolean inside(Box b) {
    if (x > b.x && x < (b.x + b.w) &&
        y > b.y && y < (b.y + b.w)) {
      return true;
    } else {
      return false;
    }
  }
}

The point.inside(grid[i][j]) call works for an array of 1 point, but not for multiple. Any help would be appreciated!