• fullscreen
  • FlexiLine.pde
  • float[] x;
    float[] y;
    float[] dx;
    float[] dy;
    int num = 20000;
    int a;
    float ang;
    float pow = 1;
    //static final int sWidth = 500,
    //sHeight = 500;, inset = 100;
    //PGraphics colorArray;
    
    static final color white = 0xFFFFFFFF, black = 0xFF000000;
    //color c0 = color(255, 255, 255), c1 = color(0, 0, 0), cCurrent = c0;
    //float lerp = 0;
    
    //void initColorArray() {
    //  
    //}
    
    void setup() {
    //  size(sWidth, sHeight+inset);
      size(500, 500);
    //  initColorArray();
      x = new float[num];
      y = new float[num];
      dx = new float[num];
      dy = new float[num];
      for( a = 0 ; a < num; a++) {
        x[a] = a*float(width)/num;
        y[a] = height/2;
      }
      background(0);
    }
    
    
    void mousePressed() {
      if(mouseButton == CENTER)
      setup();
    }
    
    void draw() {
      if(mouseX > 0 & mouseX < width & mouseY > 0 & mouseY < height) {
      if(mousePressed & mouseButton != CENTER) {
        float k = pow;
        if(mouseButton == LEFT) k *= pow;
        else if(mouseButton == RIGHT) k *= -pow;
        for(a = 0; a < num; a++) {
          ang = atan2(mouseY-y[a], mouseX-x[a]);
          dx[a] += k*cos(ang);
          dy[a] += k*sin(ang);
        }
      }
      }
      loadPixels();
      //uncolor your previous places
      for(a = 0; a < num; a++) {
        setAt(x[a], y[a], black);
      }
      //color new places
      for(a = 0; a < num; a++) {
        x[a] += dx[a] *= .98;
        y[a] += dy[a] *= .98;
        setAt(x[a], y[a], white);
      }
      updatePixels();
      stroke(white);
    //  line(0, sHeight, sWidth, sHeight);
    //  line(sWidth / 2, sHeight, sWidth/2, height);
    //  showColorArray(0, sHeight, width/2, inset);
    }
    
    void keyPressed() {
      if(key == ' ') {
        for(a = 0 ;a < num; a++) {
          dx[a] = dy[a] = 0;
        }
      }
      else if(key == 'r') {
        setup();
      }
    }
    
    //void showColorArray(int x, int y, int w, int h) {
    //}
    
    void setAt(int x, int y, int c) {
      if(x < 0 | x > width-1 | y < 0 | y > height-1) return;
      pixels[y*width+x] = c;
    }
    
    void setAt(float x, float y, int c) {
      setAt(int(x), int(y), c);
    }
    

    code

    tweaks (1)

    about this sketch

    This sketch is running as Java applet, exported from Processing.

    license

    advertisement


    Xiaohan Zhang

    Flexi Line

    Add to Faves Me Likey@! 16
    You must login/register to add this sketch to your favorites.

    Flexible stretching "line". Very simple, but it's given me a lot of entertainment. Working on making color changes.
    Left-click to attract the line
    Right-click to repel the line
    Press space to stop the line
    Middle-click or press 'r' to reset

    simply elegant!
    very nice things happen.
    true north
    29 Aug 2008
    beautiful stuff! Do you do commissioned work, meaning, can I ask you to build something for money?
    Xiaohan Zhang
    1 Sep 2008
    Not officially, but I'm always open to it. Feel free to email me at hellocharlien@hotmail.com, we'll set something up
    tacit dynamite
    13 Sep 2008
    I like this. I wish that openprocessing let you add comments to other people's code; it seems like the community could help explain lines like ang = atan2(mouseY-y[a], mouseX-x[a]);
    Cameron Cundiff
    22 Sep 2008
    Looks like you are working on colors! I'm eager to see what you come up with.
    SunziWu
    2 Apr 2009
    Argh, this one is sooooo great! It's so simple and so beautiful.
    I can't stop playing with it :D

    I've copied the source code to fiddle around with it while learning processing, hope you don't mind :)
    Rob Mayer
    12 Oct 2009
    This is great.
    If you hold down the mouse and spin it around until the entire line orbits the mouse in a clump, then wait for it to coalesce at the location of the mouse, then release, it resembles a fractal flame - which is awesome.

    regarding coloring - there was a paper I saw were someone created a procedural nebula (for gaming) by way of a pickover. The way they colored it is that they had a "chart" the X axis was the angle between vertex n and vertex n-1 the Y axis was the distance between vertex N and vertex N-1 - using those coordinates it grabbed the color of vertex N from the chart.
    Eduardo Cavazos
    21 Feb 2010

    Here's a port of Flexi Line to R6RS Scheme:

    http://github.com/dharmatech/agave/blob/master/demos/flexi-line.scm

    Ed
    Eduardo Cavazos
    21 Feb 2010
    Here's a port of Flexi Line to the Pure programming language:

    http://gist.github.com/310793

    More info on the Pure language:

    http://code.google.com/p/pure-lang

    Ed
    jodejohn
    13 May 2010

    Hi!
    Nice work

    A small hint: Trigonometric functions are usually quite expensive to do and in your case can be avoided:

    deltaX = mouseX-x[a]
    deltaY = mouseY-y[a]
    deltaLength = sqrt(deltaX^2 + deltaY^2)
    dx[a] += k*delta_x/deltaLength
    dy[a] += k*delta_y/deltaLength
    well this is seriously amazing. took me a few seconds to get tons of different and beautiful patterns
    qdiiibp
    24 Dec 2012
    Added a mod of this sketch my "best of OpenProcessing" Android Live Wallpaper:

    https://play.google.com/store/apps/details?id=glesii.prozessing.android&feature=search_result#
    You need to login/register to comment.