#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Some simple pulse equations using trig.

edited November 2015

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;
}
``````
Tagged:

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

• 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!

;-)

• 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.

• 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;
}
}
``````
• 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) {

try {
return ((Double) js.eval(equation)).floatValue() * factor;
}

catch (ScriptException cause) {
throw new RuntimeException(cause);
}
}
``````
• Cool! ;)

• 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;
}
``````
• 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
``````
• 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(.....?

• 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....

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