Functions that create cascades of points

General
1 
/*
Hello friends !
This is my first post and i don't know if this is the right way 
to share code, if i'm wrong i apologize!
This program draws the points of a function in such a way
that they look like "waterfalls". It is a sequence of "intervals" 
of the same function which however create different scenes
*/
var fr = 30;
var col = 3;
var rig = 4;
var lin = false;
var j = 0;//-40
var cic = 0;
//var addj = 0.00001;
var addj = 0.0001;

function setup() {
  createCanvas(600, 600);
  background(0);
  var h = height;
  var w = width;

  textSize(30);
  frameRate(fr);
}

function draw() {
  background(0, 0, 0, 10);

  var angad = 0;
  var kmd;
  var y = 0;
  cic++;
  //change parameter for the "show"
  sequence();
  //equation
  j += addj;
  var ini = -300;
  var preX = 0;
  var preY = 0;
  let r = 155; //255
  let g = 250; //155
  let b = 255; //200
  for (var k = -300; k < 0; k = k + 0.2) {
    /*
    let r = random(0, 155); //255
    let g = random(0, 250); //155
    let b = random(0, 255); //200
    */
    stroke(r, g, b);
    angad += 0.0001;
    kmd = k + k * sin(angad);
    y = pow(kmd, 3) * (sin(j * kmd) / cos(j * kmd));
    if (abs(y) < 100000000) {
      var xx;
      var yy;
      xx = kmd * 15 + 5000;
      yy = y / 10000 + 5000;
      point(-400 + (2 * xx) / 10, -200 + yy / 10);
      preX = (2 * xx) / 10;
      preY = yy / 10;
    }
  }
  fill(255);
  //text(j, 170, 50);
}

function sequence() {
  switch (cic) {
    case 400:
      j = -3.9;//0
      break;
    case 600:
      j = 4.93;
      break;
    case 800:
      j = 3.9;
      break;
    case 1000:
      j = -40;
      break;
    case 1200:
      j = 0;
      cic = 0;
      break;
    default:
    // code block
  }
}
1 Like
2

This is great! It definitely looks like a waterfall, or maybe a music visualization. What was your inspiration for creating this sketch?

3

This first feedback makes me very happy!
My code usually doesn’t generate much
attention :slight_smile:
I wanted to draw beautiful and original graphics
based on trigonometric functions and i
noticed that using the terms
third degree, the charts are a lot
confused.
But using only the following points,
without connecting them, they are obtained
neat graphics.
Also by varying the increment of the function
trigonometric (in this case the parameter “j”),
different “scenarios” are obtained.
I would be VERY happy if someone improved
and extended this “menu” of functions and parameters.
Thank you again.
Hi!

1 Like
4

I found myself using a lot of trigonometry during Genuary. It’s amazing what you can do with it, but I needed a break from all that math after I was done!

5

“Genuary” intrigued me a lot and I didn’t quite understand how it worked (the things I don’t understand I like even more).
I think that trigonometry is elegant and practical (let’s think about the topography) and its elegance is reflected in the beautiful graphs that can be made with it, but making graphs that don’t “look too” trigonometric, using sine and cosine functions instead, seems fun to me…
Hi Kevin!

6

Nice. The way Genuary worked was, every day in January you got a different “prompt” that you used as inspiration. I only started halfway through, but I had a lot of fun with it. You can see what other people created on Twitter at the #genuary hashtag.

7

https://editor.p5js.org/mare/present/9sLwhhuMp

it’s a better version

/*
New version
Hello friends !
This program draws the points of a function in such a way
that they look like “waterfalls”. It is a sequence of “intervals”
of the same function which however create different scenes
*/
let fr = 30;
let j = 0;
let sequ_count = 0;
let plus_j = 0.0001;
let plus_degr = 0.0001;
let trasp = 10;

function setup() {
createCanvas(600, 600);
background(0);
let h = height;
let w = width;
stroke(155, 250, 255);
textSize(24);
textStyle(BOLD);

frameRate(fr);

}

function draw() {
background(0, 0, 0, trasp);
text(‘press the button to fade or not’, 10, 580);

push()
translate(600, 300);
let degr = 0;

sequ_count++;

//change parameter for the “show”
sequence();

j += plus_j;

let ini = -300;
for (let stp = ini; stp < 0; stp = stp + 0.2) {

degr += plus_degr;

//equation
let x = stp + stp * sin(degr);
let y = pow(x, 3) * (sin(j * x) / cos(j * x));

//draw
let x_for_canvas = x * 3;
let y_for_canvas = y / 100000;

//cut y range for draw
if (abs(y_for_canvas) < 300) {
  point(x_for_canvas, y_for_canvas);
}

}
fill(255);
pop();
}

function sequence() {
switch (sequ_count) {
case 400:
j = -40;
break;
case 600:
j = 3.9;
break;
case 800:
j = 1;
break;
case 1000:
j = 0;
sequ_count = 0;
break;
default:
}
}

function mousePressed() {
if (trasp == 10) {
trasp = 255;
} else {
trasp = 10;
}
}