Rise and Fall - 2023 December 11

Built from Dots and Boxes, the primary purpose of this piece is to include far less unused code.

If I do enough art pieces with minimal imported code in mind, I should get my shared libraries pared down to single-purpose files.

While that's inconvenient to me, as a creator; it should be quite valuable to anyone reading along trying to learn to create art, or just understand more about JavaScript.

Edward Delaporte created this art using the P5.js JavaScript library, and the following additional code:

js/art/rise_and_fall.js:

/*

This is a Live Art work created by Edward Delaporte.

This script is Copyright Edward Delaporte 2023.

This script and the art it creates are licensed under 
a Creative Commons Attribution-ShareAlike 4.0 
International License.

http://creativecommons.org/licenses/by-sa/4.0/

You can share your own remix of this code 
as long as you display this license and attribution.

*/


var weave = {
  x: 0,
  y: 0,
  dx: 1,
  dy: 1,
  sequence: [],
  size: 10,
  color1: null,
  color2: null
};

var pulse = 0;
var beat = 30;

function draw_weave(weave) {
  fill(weave.color);
  circle(weave.x,weave.y, weave.size);
  fill(weave.color2);
  circle(weave.x + weave.size,
    weave.y + weave.size, 
    weave.size / 2);
  return weave;
}

function anim_weave(weave) { 
  weave.x += weave.dx;
  weave.y += weave.dy;
  return weave;
}

function fresh_color() {
  let c = color(random(0,10)*30,random(0,10)*30, random(0,10)*30);
  return c;
}

function setup() {

  setup_canvas(800, 400);
  background('#222222');
  starfield(800,400);

  maxline = 400;
  balls = [];
  item_count = random(3,5);

  weave_template = Object(weave);
  for(i=0;i&ltitem_count;i++){
    newb = Object.assign({}, weave_template);
    newb.x = random(0,maxline);
    newb.y = 100 + i * 40; // Make sure they each start offset a bit
    newb.color = fresh_color();
    newb.color2 = fresh_color();

    // base_path = [1,1, 1,-1, -1,-1, -1, 1]; // figure 8
    rise1 = random(.5,.9);
    base_path = [1,-1,rise1,rise1,1,-1,.8,.8,
      1,-1,1,1,.5,-.5,1,1,.5,-.5,random(.2,.9),random(.2,.9)];

    // base_path = [1,1,1,-1];
    seq1 = base_path.map( item =&gt item * choose([2,3,4]));
    seq2 = seq1.map( item =&gt item * -1); // reverse?
    newb.sequence = newb.sequence.concat(seq1);
    newb.sequence = newb.sequence.concat(seq2);

    console.debug(newb);
    balls.push(newb);
  }
  noStroke();

}

function shift_weave(item) {
  if(item.sequence.length &gt 0) {
    item.dx = item.sequence.shift();
    item.dy = item.sequence.shift();
  } else {
    item.dx = 0;
    item.dy = 0;
  }
  return item;
}

function draw() {
  if(pulse == 0) {
    balls = balls.map( item =&gt shift_weave(item) );
  }
  pulse++;
  if(pulse &gt beat) {
    pulse = 0;
  }
  balls = balls.map( item =&gt anim_weave(item) );
  balls = balls.map( item =&gt draw_weave(item) );
}

function mouseClicked() {
  pulse = 0;
  setup();
}

js/art/share/setup_canvas.js:

function setup_canvas(maxim_x=800, maxim_y=400) {
  midline = maxim_x / 2;
  myCanvas = createCanvas(maxim_x, maxim_y);
}

js/art/share/starfield.js:


function starfield(max_x, max_y, star_size=4) {
  // white stars
  noStroke();
  fill(color(255,255,255));
  
  // Randomly scatter stars.
  starcount = random(20,60);
  for(i=0;i&ltstarcount;i++){
    starx = random(0, max_x);
    stary = random(0, max_y);
    circle(starx, stary, star_size);
    if(random(0,5)==1) {
      circle(starx -4, stary -4, star_size);
    }

  }
}

js/art/share/choose.js:

/* 

Reusable random functions

*/

function get_url_seed() {
  const params = new URLSearchParams(location.search);
  seed = params.get('r');
  return seed;
}

function get_random_from_seed(seed, max_r=1) {
    rand = Math.sin(seed) * 10000;
    rand = rand - Math.floor(rand); // Get remainder
    return Math.floor(rand * max_r);
}

function choose(choices, seed) {
  // Support repeatable result.
  // so that every frame of animation re-uses the 
  // same choice as last.
  if(!seed) {
    seed = get_url_seed();
  }
  index = get_random_from_seed(seed, choices.length);
  return choices[index];
}

Share on Mastodon