Some simple pulse equations using trig.

_vk

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;
}

Chrisir

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

_vk

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

Chrisir

I was confused...

thanks for sharing!

;-)

quark

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.

_vk

Good idea, I'll give it a try.

quark

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.

GoToLoop

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;
  }
}

GoToLoop

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

/**
 * Pulsing Equations (v2.2.3)
 * by _vk (2014/Sep)
 * mod GoToLoop
 *
 * Forum.Processing.org/two/discussion/7147/
 * some-simple-pulse-equations-using-trig-#Item_8
 */

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(3);
  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);
  }
}

_vk

Cool! ;)

GoToLoop

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;
}

GoToLoop

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

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

lmccart

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

GoToLoop

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

Stanlepunk

Thanks for the sharing and the improvement.

Semi

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.

GoToLoop

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.

quark

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.

Chrisir

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

@gotoloop ?

GoToLoop

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);
  }
}

Chrisir

Thanks....

GoToLoop

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;
}