Some simple pulse equations using trig.

_vk_vk
edited November 2015 in Share Your Work

Simple example of using equations for animating.

/**
*
* Some pulsing equations 
*
**/


int eqIndex = 0;
float x;
String[] equations = {
  "sin(t)", 
  "cos(t)", 
  "cos(t)*sin(t)", 
  "sin(t)*sin(t*1.5)", 
  "sin(tan(cos(t)*1.2))", 
  "sin(tan(t)*0.05)", 
  "cos(sin(t*3))*sin(t*0.2)", 
  "sin(pow(8,sin(t)))", 
  "sin(exp(cos(t*0.8))*2)", 
  "sin(t-PI*tan(t)*0.01)", 
  "pow(sin(t*PI),12)", 
  "cos(sin(t)*tan(t*PI)*PI/8)", 
  "sin(tan(t)*pow(sin(t),10))", 
  "cos(sin(t*3)+t*3)", 
  "pow(abs(sin(t*2))*0.6,sin(t*2))*0.6"
};
PFont f;

void setup() {
  size(500, 500, P2D);
  smooth();
  f = createFont("arial", 20);
  textAlign(LEFT);
  frameRate(300);
  background(0);
}

void draw() {
  noStroke();
  fill(0, 10);
  rect(0, 0, width, height -150);
  fill(0);
  rect(0, height - 50, width, height);
  float t = millis() * 0.15;
  textFont(f, 15);
  fill(200);
  float sizeChange = getEq(eqIndex, t, 200);
  fill(220);
  ellipse(34.5, height - 37, 20, 20);
  fill(0);
  text(nf((eqIndex + 1), 2), 26, height -32);
  fill(150);
  textSize(16);
  String txt = "press any key for next equation ";
  text(txt, width - textWidth(txt), height -12);
  fill(200);
  textSize(20);
  text(equations[eqIndex], 54, height -31);
  fill(255);
  ellipse(width/2, height/2 - 100, sizeChange, sizeChange);
  stroke(220, 0, 0);
  point((x+=0.1), 400 + sizeChange/5);
  stroke(80, 0, 0);
  line(0,400,width, 400);
  if (x >= width) {
    noStroke();
    fill(0);
    rect(0, height-150, width, height);

    x=0;
  }
}

void keyReleased()
{
  eqIndex = (eqIndex+1)%15;
  noStroke();
  fill(0);
  rect(0, height -250, width, height);
  x=0;
  //println(eqIndex);
}



float getEq(int eqIndex, float value, float factor)
{
  float result = -1;
  //float factor = 100;
  float t = radians(value);
  switch (eqIndex)
  {
  case 0:
    result =  sin(t)*factor;
    break;

  case 1:
    result = cos(t)*factor;
    break;

  case 2:
    result = cos(t)*sin(t)*factor;
    break;

  case 3:
    result = sin(t)*sin(t*1.5)*factor;//
    break;

  case 4:
    result = sin(tan(cos(t)*1.2))*factor;
    break;

  case 5:
    result = sin(tan(t)*0.05)*factor;
    break;

  case 6:
    result = cos(sin(t*3))*sin(t*0.2)*factor;
    break;

  case 7:
    result = sin(pow(8, sin(t)))*factor;
    break;

  case 8:
    result = sin(exp(cos(t*0.8))*2)*factor;
    break;

  case 9:
    result = sin(t-PI*tan(t)*0.01)*factor;
    break;

  case 10:
    result = pow(sin(t*PI), 12)*factor;
    break;

  case 11:
    result = cos(sin(t)*tan(t*PI)*PI/8)*factor;
    break;

  case 12:
    result = sin(t-PI*tan(t)*0.01)*factor;
    break;

  case 13:
    result = cos(sin(t*3)+t*3)*factor;
    break;

  case 14:
    result = pow(abs(sin(t*2))*0.6, sin(t*2))*0.6*factor;
    break;
  }
  return result;
}

Comments

  • I think there is a script lib outthere by quark which could deliver the same...

  • _vk_vk
    edited September 2014

    I think it delivers much more : ), my point is more the visualisation of some equations that delivers cool effects :)

  • I was confused...

    thanks for sharing!

    ;-)

  • edited September 2014

    Really nice, just shows you can have fun with maths.

    I think my favourite was number 6 (case 5).

    You don't need QScript for this, but if used it would enable users to try out their own functions without changing the source code.

  • Good idea, I'll give it a try.

  • If you intend to use QScript I strongly recommend you look at my website because the library and how to use it is fully explained there.

  • edited September 2014

    A more compact switch/case: =:)

    static final float getEq(int eqIndex, float value, float factor) {
      float t = radians(value);
    
      switch (eqIndex) {
      case 0:
        return sin(t) * factor;
      case 1:
        return cos(t) * factor;
      case 2:
        return cos(t)*sin(t) * factor;
      case 3:
        return sin(t)*sin(t*1.5) * factor;
      case 4:
        return sin(tan(cos(t)*1.2)) * factor;
      case 5:
        return sin(tan(t)*.05) * factor;
      case 6:
        return cos(sin(t*3.0))*sin(t*.2) * factor;
      case 7:
        return sin(pow(8.0, sin(t))) * factor;
      case 8:
        return sin(exp(cos(t*.8))*2.0) * factor;
      case 9:
        return sin(t - PI*tan(t)*.01) * factor;
      case 10:
        return pow(sin(t*PI), 12.0) * factor;
      case 11:
        return cos(sin(t)*tan(t*PI)*PI/8.0) * factor;
      case 12:
        return sin(tan(t)*pow(sin(t), 10.0)) * factor;
      case 13:
        return cos(sin(t*3.0) + t*3.0) * factor;
      case 14:
        return pow(abs(sin(t*2.0))*.6, sin(t*2.0)) * factor*.6;
      default: 
        return MIN_FLOAT;
      }
    }
    
  • edited February 2016

    ScriptEngine "javascript" version replacing switch/case: (*)

    /**
     * Pulsing Equations (v2.2.2)
     * by _vk (2014/Sep)
     * mod GoToLoop
     *
     * forum.processing.org/two/discussion/7147/
     * some-simple-pulse-equations-using-trig-
     */
    
    import javax.script.ScriptEngine;
    import javax.script.ScriptEngineManager;
    import javax.script.ScriptException;
    
    final ScriptEngine js = new ScriptEngineManager()
      .getEngineByName("js");
    
    static final String TXT = "press any button for next equation";
    static final short  ADJUST = 20;
    static final float  FPS = 120, STEP = .2, AMP = 5, FACTOR = 200;
    
    int idx;
    float x, txtW;
    
    static final String[] EQUATIONS = {
      "sin(t)", 
      "cos(t)", 
      "cos(t)*sin(t)", 
      "sin(t)*sin(t*1.5)", 
      "sin(tan(cos(t)*1.2))", 
      "sin(tan(t)*.05)", 
      "cos(sin(t*3.0))*sin(t*.2)", 
      "sin(pow(8.0, sin(t)))", 
      "sin(exp(cos(t*.8))*2.0)", 
      "sin(t - PI*tan(t)*.01)", 
      "pow(sin(t*PI), 12.0)", 
      "cos(sin(t)*tan(t*PI)*PI/8.0)", 
      "sin(tan(t)*pow(sin(t), 10.0))", 
      "cos(sin(t*3.0) + t*3.0)", 
      "pow(abs(sin(t*2.0))*.6, sin(t*2.0)) * .6"
    };
    
    void setup() {
      size(500, 500, JAVA2D);
      frameRate(FPS);
      smooth(4);
      background(0);
    
      ellipseMode(CENTER);
      rectMode(CORNERS);
    
      textFont(createFont("DejaVu Sans", 15));
      textAlign(LEFT, BASELINE);
      txtW = ADJUST + textWidth(TXT);
    
      js.put("p", this);
    
      try {
        js.eval("for each (var i in Object.getOwnPropertyNames(Math))"
          + "this[i] = Math[i]");
      }
    
      catch (ScriptException cause) {
        throw new RuntimeException(cause);
      }
    }
    
    void draw() {
      frame.setTitle("FPS: " + round(frameRate));
    
      noStroke();
      fill(0, 50);
      rect(0, 0, width, height - 150);
    
      fill(0);
      rect(0, height - 50, width, height);
    
      fill(220);
      ellipse(35, height - 37, 20, 20);
    
      fill(0);
      textSize(14);
      text(nf(idx+1, 2), 26, height - 32);
    
      fill(150);
      textSize(15);
      text(TXT, width - txtW, height - 12);
    
      fill(200);
      textSize(20);
      text(EQUATIONS[idx], 54, height - 32);
    
      float change = getEquation(EQUATIONS[idx], millis()*.15, FACTOR);
    
      fill(-1);
      ellipse(width>>1, (height>>1) - 100, change, change);
      set(round(x), height - 100 + round(change/AMP), #D00000);
    
      stroke(80, 0, 0);
      line(0, height - 100, width, height - 100);
    
      if ((x += STEP) > width) {
        noStroke();
        fill(x = 0);
        rect(0, height - 150, width, height);
      }
    }
    
    void keyTyped() {
      idx = (idx+1) % EQUATIONS.length;
      noStroke();
      fill(x = 0);
      rect(0, height - 250, width, height);
    }
    
    void mouseClicked() {
      keyTyped();
    }
    
    float getEquation(String equation, float value, float factor) {
      js.put("t", radians(value));
    
      try {
        return ((Double) js.eval(equation)).floatValue() * factor;
      }
    
      catch (ScriptException cause) {
        throw new RuntimeException(cause);
      }
    }
    
  • Cool! ;)

  • edited October 2014

    Made the conversion for p5js: http://p5js.org/reference/

    Had some bugs though:

    • Function ellipse() can't have negative dimensions.
    • And angleMode(DEGREES) is buggy and doesn't work w/ the same precision
      as explicitly converting to radians()!
    • Function set() is now bound to loadPixels() + updatePixels().
    • We can't use whole colors like 0xff0080F0 or -1 for example. Gotta be 3 arguments or an array!
    • textFont() doesn't seem to work at all!

    In order to run it, just go to some of those reference functions and click "edit" and paste there! :bz

    /**
     * Pulsing Equations (v2.2.2)
     * by _vk (2014/Sep)
     * mod GoToLoop
     *
     * forum.processing.org/two/discussion/7147/
     * some-simple-pulse-equations-using-trig-
     */
    
    const TXT = 'press any button for next equation';
    const FPS = 60, STEP = .5, AMP = 5, FACTOR = 200, ADJUST = 20;
    
    const EQUATIONS = Object.freeze([
      "sin(t)", 
      "cos(t)", 
      "cos(t)*sin(t)", 
      "sin(t)*sin(t*1.5)", 
      "sin(tan(cos(t)*1.2))", 
      "sin(tan(t)*.05)", 
      "cos(sin(t*3.0))*sin(t*.2)", 
      "sin(pow(8.0, sin(t)))", 
      "sin(exp(cos(t*.8))*2.0)", 
      "sin(t - PI*tan(t)*.01)", 
      "pow(sin(t*PI), 12.0)", 
      "cos(sin(t)*tan(t*PI)*PI/8.0)", 
      "sin(tan(t)*pow(sin(t), 10.0))", 
      "cos(sin(t*3.0) + t*3.0)", 
      "pow(abs(sin(t*2.0))*.6, sin(t*2.0)) * .6"
    ]);
    
    idx = x = txtW = 0;
    
    function setup() {
      Object.freeze(createCanvas(500, 500));
    
      frameRate(FPS).smooth(4).background(0);
      ellipseMode(CENTER).rectMode(CORNERS);
    
      textFont('DejaVu Sans'), textAlign(LEFT);
      textSize(15), txtW = ADJUST + textWidth(TXT);
    }
    
    function draw() {
      fill(0, 50), noStroke();
      rect(0, 0, width, height - 150);
    
      fill(0);
      rect(0, height - 50, width, height);
    
      fill(220);
      ellipse(35, height - 37, 20, 20);
    
      fill(0), textSize(14);
      text(nf(idx+1, 2), 26, height - 32);
    
      fill(150), textSize(15);
      text(TXT, width - txtW, height - 12);
    
      fill(200), textSize(20);
      text(EQUATIONS[idx], 54, height - 32);
    
      var change = getEquation(EQUATIONS[idx], millis()*.15, FACTOR);
      var diam = abs(change);
    
      fill(255);
      ellipse(width>>1, (height>>1) - 100, diam, diam);
    
      stroke(0xd0, 0, 0);
      point(x, height - 100 + change/AMP);
    
      stroke(80, 0, 0);
      line(0, height - 100, width, height - 100);
    
      if ((x += STEP) > width) {
        fill(x = 0), noStroke();
        rect(0, height - 150, width, height);
      }
    }
    
    function keyTyped() {
      fill(x = 0), noStroke();
      rect(0, height - 250, width, height);
    
      idx = (idx+1) % EQUATIONS.length;
    }
    
    function mouseClicked() {
      keyTyped();
    }
    
    function getEquation(equation, value, factor) {
      var t = radians(value);
      return eval(equation) * factor;
    }
    
  • edited July 2015

    Well, nothing to do... made the CS version too: ~:>

    ###
     * Pulsing Equations (v2.2.2)
     * by _vk (2014/Sep)
     * mod GoToLoop
     *
     * forum.processing.org/two/discussion/7147/
     * some-simple-pulse-equations-using-trig-
    ###
    
    
    `const TXT = 'press any button for next equation';`
    `const FPS = 60, STEP = .5, AMP = 5, FACTOR = 200, ADJUST = 20;`
    
    `const EQUATIONS = Object.freeze([
      "sin(t)",
      "cos(t)",
      "cos(t)*sin(t)",
      "sin(t)*sin(t*1.5)",
      "sin(tan(cos(t)*1.2))",
      "sin(tan(t)*.05)",
      "cos(sin(t*3.0))*sin(t*.2)",
      "sin(pow(8.0, sin(t)))",
      "sin(exp(cos(t*.8))*2.0)",
      "sin(t - PI*tan(t)*.01)",
      "pow(sin(t*PI), 12.0)",
      "cos(sin(t)*tan(t*PI)*PI/8.0)",
      "sin(tan(t)*pow(sin(t), 10.0))",
      "cos(sin(t*3.0) + t*3.0)",
      "pow(abs(sin(t*2.0))*.6, sin(t*2.0)) * .6",
    ]);`
    
    idx = x = txtW = 0
    
    
    setup: ->
    
      size 500, 500, JAVA2D
      frameRate FPS; smooth 4; background 0
      ellipseMode CENTER; rectMode CORNERS
    
      textFont Object.freeze createFont 'DejaVu Sans', 15
      textAlign LEFT, BASELINE
      txtW = ADJUST + textWidth TXT
    
    
    draw: ->
    
      fill 0, 50; do noStroke
      rect 0, 0, width, height - 150
    
      fill 0
      rect 0, height - 50, width, height
    
      fill 220
      ellipse 35, height - 37, 20, 20
    
      fill 0; textSize 14
      text nf(idx+1, 2), 26, height - 32
    
      fill 150; textSize 15
      text TXT, width - txtW, height - 12
    
      fill 200; textSize 20
      text EQUATIONS[idx], 54, height - 32
    
      change = getEquation EQUATIONS[idx], do millis*.15, FACTOR
      diam = abs change
    
      fill -1
      ellipse width>>1, (height>>1) - 100, diam, diam
      set x, height - 100 + change/AMP, 0xffD00000
    
      stroke 80, 0, 0
      line 0, height - 100, width, height - 100
    
      if (x += STEP) > width
    
        fill x = 0; do noStroke
        rect 0, height - 150, width, height
    
    
    keyTyped: ->
    
      idx = (idx+1) % EQUATIONS.length
      fill x = 0; do noStroke
      rect 0, height - 250, width, height
    
    
    mouseClicked: -> do keyTyped
    
    
    getEquation = (equation, value, factor) ->
    
      t = radians value; factor*eval equation
    
  • _vk_vk
    edited September 2014

    That's really cool. Thanks for sharing. It's a shame that there is no syntax highlight for CS mode...

  • hey @GoToLoop good finds with the bugs, do you mind posting them here for any that aren't already logged? will try to fix as soon as we can. https://github.com/lmccart/p5.js/issues

  • Just to let every1 know that the mystery surrounding the discrepancy between angleMode() RADIANS & DEGREES was solved here: https://github.com/lmccart/p5.js/issues/383

  • Thanks for the sharing and the improvement.

  • Hey there, I'm pretty new to processing but is there any possibility of getting one of the disered animations at it's own to put it into another sketch? That would be great.

  • Comment out Java Mode's line #108 within keyTyped(): idx = (idx+1) % EQUATIONS.length;
    Then @ line #21, initialize idx to a chosen equation's index.

  • Since this discussion was first posted I have released the Jasmine library and this would be better than Qscript in this scenario, at least for Java mode.

  • Would js.eval be able to do rect(.....?

    @gotoloop ?

  • edited February 2016

    From: https://forum.Processing.org/two/discussion/15151/how-to-convert-string-to-a-line-of-code

    Indeed, that's a good question, given that in order to invoke rect() we need sketch's PApplet reference!
    But I guess if we use method put() the same way I did for variable t: js.put("t", radians(value));

    http://docs.Oracle.com/javase/8/docs/api/javax/script/ScriptEngine.html#put-java.lang.String-java.lang.Object-

    We can also pass sketch's reference to the ScriptEngine: *-:)
    WARNING: Not tested yet!!!

    import javax.script.ScriptEngine;
    import javax.script.ScriptEngineManager;
    import javax.script.ScriptException;
    
    static final void evalJS(PApplet pa, ScriptEngine js, String expression) {
      js.put("p", pa);
    
      try {
        js.eval("p." + expression);
      }
    
      catch (ScriptException cause) {
        throw new RuntimeException(cause);
      }
    }
    
  • Thanks....

  • edited February 2016

    Gonna re-post my Nashorn JS + P5 Integration in this thread as well: :-j
    https://forum.Processing.org/two/discussion/15151/how-to-convert-string-to-a-line-of-code

    /**
     * Processing Nashorn JS Integration (v1.04)
     * GoToLoop (2016-Feb-28)
     *
     * forum.Processing.org/two/discussion/15151/
     * how-to-convert-string-to-a-line-of-code
     *
     * forum.Processing.org/two/discussion/7147/
     * some-simple-pulse-equations-using-trig
     */
    
    import javax.script.ScriptEngine;
    import javax.script.ScriptEngineManager;
    import javax.script.ScriptException;
    
    final ScriptEngine js = new ScriptEngineManager().getEngineByName("js");
    
    static final String[] SENTENCES = {
      "Nashorn JS is cool!", 
      "We can draw on the canvas inside JS too!", 
      "Let's program is JS now!!!"
    };
    
    void setup() {
      size(400, 150);
      smooth(4);
      frameRate(.5);
    
      js.put("p", this); // puts sketch's PApplet as p into JS.
    
      js.put("w", width);  // puts width's  current value as w into JS.
      js.put("h", height); // puts height's current value as h into JS.
    
      js.put("SENTENCES", SENTENCES); // puts String[] SENTENCES.
      js.put("idx", 0); // creates global variable idx into JS.
    
      evalJS(js, // transfers all PConstants to JS global scope.
        "var PConstants = Packages.processing.core.PConstants", 
        "for each (var f in PConstants.class.getFields()) {", 
        "  var field = f.getName()", 
        "  this[field] = PConstants[field] }");
    
      evalJS(js, // transfers all JS' Math methods to global scope.
        "for each (var prop in Object.getOwnPropertyNames(Math))"
        + "this[prop] = Math[prop]");
    
      evalP5(js, // calls P5's canvas API from JS.
        "textFont(p.createFont('DejaVu Sans', 18))", 
        "textAlign(CENTER, BASELINE)", 
        "stroke(0), p.strokeWeight(1.5), p.fill(~~0xffFFFF00)");
    }
    
    void draw() {
      println(evalP5(js, // calls P5's canvas API from JS.
        "background(~~p.random(0x1000000))", 
        "text(SENTENCES[idx = (idx+1) % SENTENCES.length], w>>1, h>>1)", 
        "frame.setTitle('Idx: ' + idx + '   Frame: ' + p.frameCount)"), ENTER);
    }
    
    static final String evalP5(final ScriptEngine js, final String... phrases) {
      for (int i = 0; i < phrases.length; phrases[i] = "p." + phrases[i++]);
      return evalJS(js, phrases);
    }
    
    static final String evalJS(final ScriptEngine js, final String... phrases) {
      final String expression = join(phrases, ENTER);
    
      try {
        js.eval(expression);
      }
      catch (final ScriptException cause) {
        System.err.println(expression);
        throw new RuntimeException(cause);
      }
    
      return expression;
    }
    
Sign In or Register to comment.