import generativedesign.*;
import geomerative.*;
// List of a list of points. 1rst the numbre of phrases: 4,  the 2nd indicate the number of points
RPoint[][] myPoints = new RPoint[5][0];
RFont font;
PFont f;
Attractor attractor;

String [][] phraseSets = new String [4][0];
String [] FR1 = {
  "On me dit de te haïr et je m'y efforce", 
  "Je t'imagine cruel, violent, implacable", 
  "Mais à te voir je n'ai bientôt plus de force", 
  "Et de te blesser je suis bien incapable", 
};
String [] FR2 = {
  "Tous mes camarades combattent avec rage", 
  "Et pleurent la nuit au souvenir des supplices", 
  "Infligés à leurs frères qui sont du même âge", 
  "Et rêvent comme eux de toucher une peau lisse"
};
String [] FR3 =
  {"Et de pouvoir enfin caresser des obus", 
  "Autres que ceux produits par le pouvoir obtus", 
  "Je rêve de quitter ces boyaux infernaux"
};
String [] FR4 = {
  "De laisser ces furieux des deux bords du Rhin", 
  "Et de pouvoir embrasser ta chute de rein", 
  "Et porter notre amour sur les fonts baptismaux"
};

//TEXT
final color textColor = color(245);
int fontSize;

// TIME
int startTime;
int initTime;
int lineSpacing;
int index;
int state;
float duration;
int dur1;

//----------------SETUP---------------------------------------------------------------------------------------

void setup() {
  size(1920, 1080, JAVA2D);
  //add phrases to list
  phraseSets[0]=FR1;
  phraseSets[1]=FR2;
  phraseSets[2]=FR3;
  phraseSets[3]=FR4;

  smooth();
  RG.init(this);
  font = new RFont("FreeSans.ttf", 86, CENTER);
  stroke(textColor);
  strokeWeight(0.05);
  //INIT
  drawPhrases(phraseSets[0]);

   // TIME
  startTime=millis();
  initTime=millis();
  index=0;
  lineSpacing =150;
}

//----------------DRAW----------------------------------------------------------------------------------

void draw() {
  background(255);
  state =0;


  // TEXTS
  // draw on the center of the screen
  translate(width/2, height/2);
  // draw phrases vertically centered by moving the top up by half the line spaces
  translate(0, -1.0*lineSpacing*(phraseSets[index].length-1)/2.0);
  // loop through lines
  for (int i=0; i< myPoints.length; i++) {
    // draw a line
    for (int j=0; j< myPoints[i].length-1; j++) {
      pushMatrix(); 
      translate(myPoints[i][j].x, myPoints[i][j].y);
      noFill();
      stroke(0, 200);
      strokeWeight(0.25);
      float angle = TWO_PI*10;
      rotate(j/angle);
      bezier(-2*(noise(10)), 10, 25*(noise(10)), -5, 2*noise(5), -15, 10, -3);
      //bezier(-10*(noise(20))+mouseX/15, 30+mouseY/10, -10*(noise(10))+mouseX/15, 20+mouseY/15, -20*noise(20)+mouseX/15, -20+mouseY/5, 10+mouseX/15, -10+mouseY/15);
      popMatrix();
    }
    // move to the next line
    translate(0, lineSpacing);
  }
  //check Timer and redraw phrases if time has passed

  changePhraseTimerN();
  //changePhraseTimer(duration*4, phraseSets);

}

//----------------INITIALIZE----------------------------------------------------------------------------------------------------------------------------------------
void drawPhrases(String [] phrases) {
  myPoints = new RPoint[phrases.length][0];
  for (int j=0; j<phrases.length; j++) {
    RGroup myGroup = font.toGroup(phrases[j]);
    myGroup = myGroup.toPolygonGroup();
    myPoints[j] = myGroup.getPoints();
  }
}

//----------------TIMER----------------------------------------------------------------------------------------------------------------------------------------

/*void changePhraseTimer( float duration, String [][] phraseSets) {
 duration = sounds[0].length()-150;
 if (millis()-startTime > duration*4) {
 index =(index+1) % phraseSets.length; 
 //drawPhrases(phraseSets[index]);
 //startTime = millis();
 }
 }*/

void changePhraseTimerN() {
  dur1=11500;

  if (millis()-startTime > dur1+1400) {
    index =(index+1) % phraseSets[1].length; 
    drawPhrases(phraseSets[index]);
    startTime= millis();
  } else if (millis()-startTime > dur1-800) {
    index =(index+1) % phraseSets[2].length; 
    drawPhrases(phraseSets[index]);
    startTime= millis();
  } else if (millis()-startTime > dur1+1000) {
    index =(index+1) % phraseSets[3].length; 
    drawPhrases(phraseSets[index]);
    startTime= millis();
  } else if (millis()-startTime > dur1*2-8000) {
    drawPhrases(phraseSets[0]);
    startTime= millis();
  }
}


//----------------TEXT ATTRACTOR INIT----------------------------------------------------------------------------------------------------------------------------------------
void initAttractor(int i) {
  if (i>=4 && i<8) {
    i-=4;
  } else if (i>=8 && i<11) {
    i-=8;
  } else if (i>=11 && i<14) { 
    i-=11;
  } else if (i>14) {
    i=0;
  }

  float x = 0;
  float y =-50; 
  // println(i); 
  attractor = new Attractor(x, y, myPoints[i]);
}


class Attractor {

  float force_radious = 100;
  float maxForce = 15;
  RPoint position;
  RPoint[] points;

  Attractor(float x, float y, RPoint[] p) {
    points = p;
    position = new RPoint(x, y);
  }

  void attract() {

    for (int i =0; i < points.length; i++) {

      float d= points[i].dist(position);
     // println ("d : "+d);
      if (d < force_radious) {   
        RPoint desired = new RPoint(points[i]);
        //points[i]= new RPoint(points[i]);
        //println( "avant x : "+ points[i].x +" y: "+points[i].y);
        desired.sub(position);
        desired.normalize();
        desired.scale(map(d, 0, force_radious, maxForce, 0));
        points[i].add(desired);
         //println( "après x : "+ points[i].x +" y: "+points[i].y);
      }
    }
  }
  void display () {
    stroke(0);
   strokeWeight(2);
  // ellipse (position.x, position.y-750, 30, 30);
  }
  void moveTo(float x, float y){
    position.x=x;
    position.y=y;

  }
}

`
//Stuff for saving stage
import processing.pdf.*;
boolean record = false;


int cols, rows;
int scl = 20;
int w = 2000;
int h = 1600;


float flying = 0;

float[][] terrain;

void setup() {
  size(600, 600, P3D);
  cols = w / scl;
  rows = h/ scl;
  terrain = new float[cols][rows];
}

void draw() {
  flying -= 0.1;


  float yoff = flying;
  for (int y = 0; y < rows; y++) {
    float xoff = 0;
    for (int x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, 0,100);
      xoff += 0.2;
    }
    yoff += 0.2;
  }



  background(220);
  stroke(255);
  noFill();

  translate(width/2, height/2+50);
  rotateX(PI/3);
  translate(-w/2, -h/2);
  for (int y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, terrain[x][y]);
      vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
    }
    endShape();
  }
}


// Trying to save a PDF
void draw() {
  PGraphics tmp = null;

  if (record) {
    tmp = beginRecord(PDF, "render-######.pdf");
  }

  if (tmp == null) {
    H.drawStage();
  } else {
    PGraphics g = tmp;
    boolean uses3D = false;
    float alpha = 1;
    H.stage().paintAll(g, uses3D, alpha);
  }

  if (record) {
    endRecord();
    record = false;
  }
}

void keyPressed() {
  if (key == 's') {
    record = true;
    draw();
  }
}
`

I'm trying to add Perlin noise to an icoSphere (icosahedron / geodesic sphere) but for some reason the terrain (noise) generated is too "homogeneous": "peaks" are allocated almost evenly and heights (vertices heights) don't vary much.

Ideally I'd like to be able to adjust the noise so as to get real random values (heterogeneous distribution and heights) like in the following pictures.

The vertices positions are stored in array list (here named "knots") and all I do is adding a variable (named "r") to the x, y, z position of each vertex:

for e in knots:
        r = noise(random(1))
        for i, f in enumerate(e):
            particles[e[i]] = Particle(particles[e[i]].x() + particles[e[i]].x() * r  , particles[e[i]].y() + particles[e[i]].y() * r, particles[e[i]].z() + particles[e[i]].z() * r)

I guess this is not an appropriate way to apply Perlin noise and would love some help to tweak the snippet above. Any tip, idea, code (both Java or Python) is welcomed !

EDIT: This question is a "programming question". Even though the code is in Python, the question is about Perlin noise programmation. Answers or suggestions in Java are totally fine !

full code:

add_library('peasycam')
from particle import Particle

def setup():
    global ICOSUBDIVISION, vdata, tindices,  particles
    size(800, 600, OPENGL)
    smooth(10)

    cam = PeasyCam(this, 450)


    particles = []
    ICOSUBDIVISION = 0
    X, Z = 0.525731112119133606, 0.850650808352039932
    vdata = [[-X, 0, Z], [X, 0, Z], [-X, 0, -Z], 
             [X, 0, -Z], [0, Z, X], [0, Z, -X], 
             [0, -Z, X], [0, -Z, -X], [Z, X, 0], 
             [-Z, X, 0], [Z, -X, 0], [-Z, -X, 0]]
    tindices = [[0, 4, 1], [0, 9, 4], [9, 5, 4], [4, 5, 8],
                [4, 8, 1], [8, 10, 1], [8, 3, 10], [5, 3, 8],
                [5, 2, 3], [2, 7, 3], [7, 10, 3], [7, 6, 10],
                [7, 11, 6], [11, 0, 6], [ 0, 1, 6], [ 6, 1, 10],
                [ 9, 0, 11], [ 9, 11, 2], [ 9, 2, 5], [ 7, 2, 11 ]]

    Icosahedron()

def draw():
    background(360)
    lights()

    f1, f2, f3 = PVector(), PVector(), PVector()

    for e in range(0, len(particles), 3):
        f1.x, f1.y, f1.z = particles[e].x(), particles[e].y(), particles[e].z()
        f2.x, f2.y, f2.z = particles[e+1].x(), particles[e+1].y(), particles[e+1].z()
        f3.x, f3.y, f3.z = particles[e+2].x(), particles[e+2].y(), particles[e+2].z()

        noStroke()
        colorMode(HSB, 360, 105, 100)
        fill(abs(f1.x), abs(f1.y), abs(f1.z))
        beginShape()
        vertex( f1.x, f1.y, f1.z )
        vertex( f2.x, f2.y, f2.z )
        vertex( f3.x, f3.y, f3.z )
        endShape( CLOSE )

def keyPressed():
    global ICOSUBDIVISION, particles
    if keyCode == UP:
        if ICOSUBDIVISION == 5:
            return 
        ICOSUBDIVISION += 1
        particles = []
        Icosahedron()
    elif keyCode == DOWN:
        if ICOSUBDIVISION == 0:
            return
        ICOSUBDIVISION -= 1
        particles = []
        Icosahedron() 

def Icosahedron():
    global vertexList

    vertexList =  []

    [subdivide(vdata[tindices[e][0]], vdata[tindices[e][1]], vdata[tindices[e][2]], ICOSUBDIVISION) for e in range(20)]

    for e in range(0, len(vertexList), 3):
        x, y, z = 0, 1, 2
        p = Particle(vertexList[e+x]* 200, vertexList[e+y]* 200, vertexList[e+z]* 200)
        particles.append(p)

    VertPos = set(particles)
    knots = [[] for e in VertPos]

    for i, v in enumerate(VertPos):
        for j, p in enumerate(particles):
            if p == v:
                knots[i].append(j)

    for e in knots:
        r = noise(random(1))
        for i, f in enumerate(e):
            particles[e[i]] = Particle(particles[e[i]].x() + particles[e[i]].x() * r  , particles[e[i]].y() + particles[e[i]].y() * r, particles[e[i]].z() + particles[e[i]].z() * r)

def norme(v):
    ln = 0
    for e in range(3):
        ln += (v[e] * v[e])

    ln = sqrt(ln)
    for e in range(3):
        v[e] /= ln

def addi(v):
    for e in range(3):
        vertexList.append(v[e])

def subdivide(v1, v2, v3, depth):
    if depth == 0:
        addi(v1)
        addi(v2)
        addi(v3)
        return

    v12, v23, v31 = [0,0,0], [0,0,0], [0,0,0]

    for e in range(3):
        v12[e] = (v1[e] + v2[e]) / 2
        v23[e] = (v2[e] + v3[e]) / 2
        v31[e] = (v3[e] + v1[e]) / 2

    norme(v12)
    norme(v23)
    norme(v31)

    subdivide(v1, v12, v31, depth - 1)
    subdivide(v2, v23, v12, depth - 1)
    subdivide(v3, v31, v23, depth - 1)
subdivide(v12, v23, v31, depth - 1)

This is my code:

float inc = 0.04;

void setup() {
  size(640, 500);
}

void draw() {
  background(255);

  float xoff=0;
  float xoff2=0;

  xoff2 += inc;

  stroke(245, 10, 100);
  strokeWeight(1.5);

  for (float x = 0; x < width; x++) {

    float y = noise(xoff) * 200;
    point(x, y);

    float t = noise(xoff2) * 400;

    //i+=5 = the space between the points vertically
    for (float i = y; i < t; i+=5) {
      point(x, i);
    }

    xoff += inc;
    x = x + xoff + 4;
  }
}

I am working on this project which requires perlin noise values around arbitrary values so that the the resulting sequences of perlin noise values have those values at their predefined locations and generate smooth transitions when visualized. Here is the code :

import peasy.PeasyCam;

PeasyCam cam;
float rotAngle = 0;
float frame = 0;

void setup() {
  size(480, 640, P3D);
  background(255);
  frameRate(120);
  cam = new PeasyCam(this, 1000);
}

void draw() {
  background(255);
  stroke(0);
  translate(0, -height/2, 0);
  float yoff = 0;
  for (int i = 0; i < 14; i++) {
    pushMatrix();
    yoff = 50*i;
    translate(0, yoff, 0);
    rotAngle = map(noise(yoff/500, frame), 0, 1, -PI/3, PI/3);
    rotateZ(rotAngle);
    line(-200, 0, 200, 0);
    popMatrix();
  }
  frame += .001;
}

This creates a column of horizontal lines which are rotated PI/3 radians clockwise to PI/3 radians anticlockwise, mapped by the 2D Perlin noise values generated using frame number and y location of line as inputs.

What if, say, the problem is to have the center line to be always perfectly horizontal and the other lines rotating around it with a smooth transition in harmony with that constant horizontal line in the center. I need a solution which allows me to give more than one arbitrary values and get perlin noise around those values.

Thanks !!

I'm having a hard time trying to display points pseudo-randomly on the screen using Perlin noise. Ideally I would like those points to form small clusters as they get close to each other (higher density). Quite like the dark areas of a texture generated by noise.

Do you have an idea how I could do that ?

My failed attempt:

def setup():
    size(800, 600)
    background(255)

    t = 0


    for x in range(0, width, 10):
        for y in range(0, height, 10):
            t += .001
            p = PVector(x, y)
            n = map(noise(p.x + t, p.y + t), 0, 1, 0, 10)
            p.mult(n)
            strokeWeight(2)
            point(p.x, p.y)

Please note that I'm writing in Python here but the question is open to everyone and any help (ideas, suggestions, Java code) is welcomed.

import processing.pdf.*;

float inc = 0.05;
float scl= 20;
int cols, rows;
float zoff = 0;
PVector[] flowField;

void setup(){
  //size(1020,600, PDF, "mesh.pdf");
  size(1020,600);
  cols = floor(width/scl);
  rows = floor(height/scl);
  flowField = new PVector[cols * rows];
}

void draw(){
  background(255);
  float yoff = 0;
  for (int y = 0; y < rows; y++){
    float xoff = 0;
    for (int x = 0; x < cols; x++){
      float angle = noise(xoff, yoff, zoff) * TWO_PI;
      PVector v = PVector.fromAngle(angle);
      xoff += inc;
      stroke(0);
      strokeWeight(3);
      pushMatrix();
      translate(x * scl +(scl/2), y * scl+(scl/2));
      rotate(v.heading());
      line(-scl/3.5, 0, scl/3.5, 0);
      popMatrix();
    }
    yoff += inc;
    zoff += 0.0002;
  }
  //exit();
}

When trying to draw a noisy circle I'm facing the following problem: the last vertex and the first vertex don't share the same position (due to the applied noise) so "closing" the circle becomes impossible:

How can I fix this ?

def setup():
    size(600, 600)

def draw():
    background(255)

    n_points = 300
    angle = radians(360) / n_points
    radius = 300

    beginShape()
    strokeWeight(4)
    for e in range(n_points):
        n = noise(map(e, 0, n_points, 0, 3))
        x = cos(angle * e) * radius * n
        y = sin(angle * e) * radius * n
        vertex(width / 2 + x, height / 2 + y)
    endShape(CLOSE)

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.
  

I would like to give particles a repulsion force from each other that is proportionnal to distance (inverted gravity) using toxiclibs. How can I do so ?

Consider the code below:

add_library('toxiclibscore')
add_library('verletphysics')

from toxi.physics2d import VerletPhysics2D

from particle import Particle


def setup():
    global particules, n_particle, physics
    size(800, 600)


    physics = VerletPhysics2D()
    particules = []
    n_particle = 10


    for e in range(n_particle):
        radius = 100
        angle = TWO_PI  / n_particle
        x = radius * sin(angle * e) + map(noise(random(-20, 20)), 0, 1, -20, 120) 
        y = radius * cos(angle * e) 
        particules.append(Particle(width / 2 + x, height / 2 + y))

    for e in particules:
        physics.addParticle(e) 

    for e in range(n_particle - 1):
        a = particules[e]
        b = particules[e+1]
        s = VerletSpring2D(a, b, 40, .2)
        physics.addSpring(s)

    a = particules[-1]   //// connect the last particle to the first making a loop
    b = particules[0]
    s = VerletSpring2D(a, b, 40, .2)
    physics.addSpring(s)




def draw():
    global particules
    background(0)


    for e in particules:
        e.display()

    physics.update()

In setup() if I add something like:

for e in particules:
    for f in particules:
        if e != f:
            force = PVector.sub(e.location, f.location)
            distance = force.mag()
            physics.addBehavior(AttractionBehavior(f, 10, -1 / distance ))

... the behavior will be fixed and won't change over time. What I need is a repulsive force that constantly changes depending on the varying distance between 2 particles. I tried to put that snippet in draw() but the forces kept accumulating and I couldn't figure out how to cancel them at each iteration.

Any idea how I can implement this kind of adaptative behavior with toxiclibs ?

int x;
float pn;
float xoff = 0.0;
void setup(){
  size(500,500);
  background(0);
}
void draw() {
  xoff = xoff + .02;
  float n = noise(xoff);
  if(xoff>=2){
    xoff=0;
  }
  println(n + " " + xoff);
  n *= height;
  stroke(255);
  line(x,pn,x,n);
  pn = n;
  x++;
  if(x>=width){
    x=0;
    background(0);
  }
}

float x;
float y;
float[][] points;
float amplitude = 150.0;
int num_waves = 15;
int[][] grid;
float increment = 0.02;


void setup()
{
  size(640,640);
}

void draw()
{
  background(0);
  float yoff=0.0;
  loadPixels();
  for(int y=0; y<height; y++)
  {
    float xoff = 0.0;
    for (int x=0; x<width; x++)
    {
      int index = (x+y*width);
      float r = noise(xoff,yoff)*100;
      pixels[index]= color(r,0,r,140);
      xoff+=.01;
    }
    yoff+=.01;
  }
  updatePixels();
  noLoop();
  println(randomGaussian()*pixels.length);

    float b=0;
  while (b < width)
  {
    point(b, height*noise(b));
    b=b+1;
  }

translate(0,height/2);

for(int j=0; j<num_waves; j++)
{
  strokeWeight(1);
  stroke(0,120,120);
  translate(-2,4);
  sineWave();
}
}

float[][] Points()
{
  points = new float[width*3][2];
  x = 0.0;
  for(int j=0; j<points.length; j++)
  {
    y = amplitude*pow(sin(.015*x),5)*cos(.015*x);
    for(int i=0; i<2; i++)
    {
      switch(i)
      {
        case 0:
        points[j][i]=x;
        break;
        case 1:
        points[j][i]=y;
        break;
      }
    }
    x+=PI/4;
  }
  return(points);
}


void sineWave()
{
  float[][] points = Points();
  beginShape();
  vertex(0,0);
  noFill();
  for(int n=0; n<points.length; n++)
  {
    vertex(points[n][0],points[n][1]);
  }

  endShape();
}

Sorry that it's not the cleanest of code, I need to go back and clean it up later. But anyway, inside of the draw function, I've used the noise function to create a simple purple and black texture that fits the whole screen. What I would like to do is have the texture only take up a specified shape within the screen, such as in this image:

https://cnet4.cbsistatic.com/img/p2JgkXzoNDuAakOloAly3fIdYl4=/fit-in/970x0/2013/05/09/8d21444e-cc2e-11e2-9a4a-0291187b029a/sine_1.jpg

(For example in this image the noise is not really applied in any of the four corners of the image) I think I might be able to accomplish this by first drawing the shape that I want with bezier vertices, and then choose a fill color such as white, and then go through each of the pixels and testing to see if the color of the pixel is white, and then if so then apply the noise function to those pixels. I'm not sure if that would work though, and even if it does, it seems like it would be extremely tedious. Also an added bonus would be to be able to make the outer edges of the noise have a lower color saturation but that's not my primary concern.

Thanks for the help!

I just tried to alter Shiffmans Perlin Noise Terrain Example in P5.js and add Material and Lightning.

What i experience are some weird Stripes on the Terrain.

video

Anybody has an idea why this happens?

Can it be related to the order the vertex are created?

I hope you can help me! :)

Shiffmans Example: https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_11_PerlinNoiseTerrain_p5.js

var cols;
var rows;
var scl = 20;
var w = 560;
var h = 560;
var terrain = [];
var flying = 0;
var img;

function setup() {
  createCanvas(560,560, WEBGL);

  cols = w/scl;
  rows = h/scl;

  for (var x = 0; x < cols; x++) {
    terrain[x] = [];
    for (var y = 0; y < rows; y++) {
      terrain[x][y] = 0;
    }
  }
}

function draw() {
  background(255);
  var locX = mouseX - width / 2;
  var locY = mouseY - height / 2;
  pointLight(250, 250, 250, locX, locY, 50);
  ambientMaterial(250);

  translate(0,0,-240);
  rotateX(PI/3);
  translate(-width/2,-height/2,0);



  flying -= 0.005;
  var yoff = flying;

  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -80, 80);
      xoff += 0.2;
    }
    yoff += 0.2;
  }


  stroke(0,0);

  for (var y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (var x = 0; x < cols; x++) {
      push();
        vertex(x*scl, y*scl, terrain[x][y]);
        vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
        pop();
    }
    endShape(CLOSE);
  }
}

float[][] vectorSlopes;
float xOff, yOff, slope, speed, speedi;
float xOffi, yOffi;
float wGap = 30;
float hGap = 30;
float space = 5;

void setup() {
  size(1200, 800);
  speed = .1;
  speedi = .01;
  vectorSlopes = new float[(int)(width/wGap)][(int)(height/hGap)];
  rectMode(CENTER);
  xOff = random(10000);
  yOff = random(10000);
  xOffi = xOff;
  yOffi = yOff;
}

void draw() {
  xOffi += speedi;
  xOff = xOffi;
  background(110);
  yOffi += speedi;  
  for (int x = 0; x < vectorSlopes.length; x++) {
    xOff += speed;
    yOff = yOffi;
    for (int y = 0; y < vectorSlopes[x].length; y++) {      
      yOff += speed;        
      float xPos = x * wGap;
      float yPos = y * hGap;
      float lwidth = (wGap - space)/2;
      float lheight = (hGap - space)/2;  
      slope = map(noise(xOff, yOff), 0, 1, -lheight / 2, lheight / 2);
      line(xPos - lwidth, yPos + (slope * lwidth), xPos + lwidth, yPos - (slope * lwidth));
    }
  }
}

There's an issue where the slopes from the botton right becme the slopes of the top left, probably as a consequence of my x and y off initial variables that I used. It kinda ruins the randomness of it, and if you zoom out by setting the wGap and hGap to like 5 with a space of 1 or 2 it becomes really obvious and annoying to look at. Any help is appreciated. Thanks!

I created a box out of planes. I'm trying to find a way to click on each plane (creating like a cube navigation).

How do i do it while using translate for location? Thanks

`let moveX; let moveY; let varx; let vary; let varinc;

function setup() { createCanvas(windowWidth, windowHeight, WEBGL);

}

function moveCube(){ moveX= map(mouseX, 0,width, 0,360); moveY= map(mouseY,0,height,0,360); rot(); thebox();

}

function rot(){ rotateX(-moveY * 0.01); rotateY(-moveX * 0.01); rotateZ(frameCount*0.007); }

function cubeNoise(){ varx = map(noise(varinc),0,1,-150,150); vary = map(noise(varinc),0,1,-150,150);

varinc+=0.003;

}

function draw() { background(250); orbitControl();

//cubeNoise(); push(); //translate(varx,vary); moveCube(); pop(); }

function thebox(){ fill(250,0,0);//red plane(250);

push();
translate(-125,0,-125);
rotateY(radians(90));
fill(0,250,0);//green
plane(250);
pop();

push();
translate(125,0,-125);
rotateY(radians(90));
fill(0,0,250);//blue
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push(); translate(0,125,-125); rotateX(radians(90)); fill(150,150,150);//gray plane(250); pop();

push(); translate(0,0,-250);

fill(0);//gray
plane(250);
pop();

}

function screens{ var trx; var try; translate(-width/2, -height/2); for (var i = 0; i<9; i++){ push(); translate(

`

Below is the Random Walker code from the book altered to use Perlin noise for the movements. No matter how I fiddle with the time, it seems the walker always heads to the top left, i.e, it generally moves -x and -y. Is there some bug in this code or does the noise method have some sort of bias?

// Daniel Shiffman
// The Nature of Code
// http://www.shiffman.net/

Walker w;

void setup() {
  size(600,600);
  // Create a walker object
  w = new Walker();
  background(255);
}

void draw() {
  // Run the walker object
  w.step();
  w.render();
}
// A random walker object!
class Walker {
  float x,y,time,timeInc;


  Walker() {
    x = width/2;
    y = height/2;
    time = 0;
    timeInc = 20;

  }

  void render() {
    stroke(0);
    point(x,y);
  }

  // Randomly move to any neighboring pixel (or stay in the same spot)
  void step() {
    float stepX = noise(time);
//    stepX = stepX * 2 -1;
    stepX = map(stepX,0,1,-1,1);    
    time+=timeInc;
    float stepY = noise(time);
//    stepY =stepY *2 -1;
    stepY = map(stepY,0,1,-1,1);
    time+=timeInc;
    x += stepX;
    y += stepY;
    x = constrain(x,0,width-1);
    y = constrain(y,0,height-1);
  }
}

I'm thinking there's something I'm not seeing in the code because this short test shows no bias:

void setup(){
     for(int i = 0;i <20;i++){
          float x = (float)noise(i);
          x = map(x,0,1,-1,1);
          println(x);
     }
}

I want to print my sketch as a somewhat large poster (11x17in). What's the best way to save it so it won't get pixelated?

I tried adding the pdf library but when I search for it in libraries it doesn't show up. I also tried taking a screenshot and changing the ppi to 300 but that made the image too small.

Thanks a lot, Annika

Here's my sketch

ArrayList<Walker> walkers;

int NUMWALKERS = 10;
Walker a;
import processing.pdf.*;
float steps = 0;
boolean record = false;

void setup(){
  a = new Walker();
  size(500,500);
  background(255);
  textSize(32);
  beginRecord(PDF, "PerlinNoiseWalker-####.pdf");

}

void draw(){
  fill(255);
  noStroke();
  fill(0, 102, 153, 60);
    a.walkPerl();
    a.render();
}

void mousePressed(){
  record = true;
  endRecord();
  println("Saving PDF");
}

And the walker class }`

class Walker{
  private float x = width/2;
  private float y = height/2;
  public static final float step = 10.0;

  float t = 0;
  float t2 = 0;

  public Walker(){
    //give each walker a random 'seed' for the perlin noise;
    t = 0.01;
    t2 = t+10;
  }

  public void walkPerl(){
    t += 0.01;
    t2 += 0.01;
    float xN = noise(t);
    xN = map(xN,0,1,-step,+step);
    x += xN;
    x = constrain(x,0,width);

    float yN = noise(t2);
    yN = map(yN,0,1,-step,+step);
    y += yN;
    y = constrain(y,0,height);
  }

  public void render(){
    //stroke(#9E07E0);
    //point(x,y);
    ellipse(x,y,5,5);
  }
}

The effect is somewhat subtle but it's there:

float zOff = 0;

void setup() {
  colorMode(HSB);
  size(700, 500);
}

void draw() {
  loadPixels();
  float yOff = 0;
  for (int y = 0; y < height; y ++) {
    float xOff = 0;
    for (int x = 0; x < width; x ++) {
      int index = y * width + x;
      pixels[index] = color(map(noise(xOff, yOff, zOff), 0, 1, -50, 300), 255, 255);
      xOff += 0.15;
    }
    yOff += 0.15;
  }
  updatePixels();
  zOff += 0.01;
}

I'm trying to export some PDF pictures from this code :

import processing.pdf.*;

boolean record;
int cols, rows;
int scale = 15;
int w = 1200; 
int h = 900;

float flying = 0;
float[][] terrain;


//-------------------------------------------------------//


void setup() {

  size(600, 600, P3D);
  cols = w / scale; 
  rows = h / scale;
  terrain = new float[cols][rows];
}


//-------------------------------------------------------//


void draw() {
  if(record) {
    beginRecord(PDF, "Visuel-####.pdf");
  }

  flying -= 0.005;

  float yoff = flying;
  for (int y = 0; y < rows; y++) {
    float xoff = 0;
    for (int x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -50, 50);
      xoff += 0.1;
    }
    yoff += 0.1;
  }

  background(255); 
  stroke(0);
  noFill();

  translate(width/2, height/2);
  rotateX(PI/2.05);
  translate(-w/2, -h/2);

  for (int y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      vertex(x*scale, y*scale, terrain[x][y]);
      vertex(x*scale, (y+1)*scale, terrain[x][y+1]);
    }
    endShape();
  }
  if(record) {
    endRecord();
    record=false;
  }
}

void mousePressed() {
  record = true;
}

But I have some problems : the files are created but they are empty white pictures ! Is this link to the fact the code is including P3D ? Someone can help ?

Thanks !

Tanguy

Today am I working on a file where I have to create mountains using the noise function. I made this finally work but now am I struggeling with the fact that the class is slowing my program down a lot.

Mountains mountains = new Mountains();

void setup(){
 mountains.drawMountain();
size(1200,800);

void draw(){

 mountains.drawMountains();
}


class Mountains {
  float m[] = new float[1200];
  float yoff = 0;
  float yincrement = 0.005;
  float noiseVar = 1;
  color mountaincolor = color(51, 153, 51);


  Mountains() {
  }

  void drawMountain() {

    for (int i=0; i<width; i++) {
      m[i] = noise(yoff)*height;
      yoff += yincrement;
    }
  }

  void drawMountains() {
    for (int i=0; i<width; i++) {
      stroke(mountaincolor);
      fill(mountaincolor);
      line(i, m[i], i, height);
    }
  }
}

Is there a way to get rid of this?

Greetings Niek Boersen

Is there a more elegant and/or more efficient solution in Processing to do this? Hues, saturation ??

Thanks,

Ken

void applyColor() {  // Generate the heat map

  color c1 = color(0, 0, 255);      // Blue color
  color c2 = color(0, 255, 255);    // color Cyan
  color c3 = color(0, 255, 0);      // Green color
  color c4 = color(255, 255, 0);    // Yellow color
  color c5 = color(240, 150, 5);   // Orange color
  color c6 = color(255, 0, 0);      // Red color

  loadPixels();
  int p = 0;
  color c;
  float fraction;

  for (int i = 0; i < rows; i++) {
    for (int j = 0; j < cols; j++) {
      float value = interp_array[i][j];

      if (value>= 25 && value<26) {
        fraction = value;
        c = lerpColor(c1, c2, fraction);
      } else if (value>=26 && value<27) {
        fraction = value;
        c = lerpColor(c2, c3, fraction);
      } else if (value>=27 && value<28) {
        fraction = value;
        c = lerpColor(c3, c4, fraction);
      } else if (value>=28 && value<29) {
        fraction = value;
        c = lerpColor(c4, c5, fraction);
      } else if (value>=29 && value<30) {
        fraction = value;
        c = lerpColor(c5, c6, fraction);
      } else
        c = c6;
      pixels[p++] = c;
    }
  }
  updatePixels();

a while ago I followed this Coding Challenge video by Daniel Shiffman to create a moving 3D terrain:

I now want to map a 2D shape onto the terrain. Unfortunately I am a complete noob to programming and have no idea how to do this so I would really appreciate some help.

Can someone please point me in the right direction? :)

Many thanks and best regards!

inc = 0.01
def setup():
    size(6, 5)

def draw():
    # background(50)
    global inc
    yoff = 0
    loadPixels()
    for y in range(height-1):
        xoff = 0
        for x in range(width):
            idx = (x + y * width) * 4
            r = noise(xoff, yoff) * 255
            pixels[idx+0] = r
            pixels[idx+1] = r
            pixels[idx+2] = r
            pixels[idx+3] = 255
            xoff += inc
        yoff += inc
    updatePixels()

The error appears here: pixels[idx+2] = r

Thanks for any help!

~dallas_borealis