Fractal Triangles - 2023 September 24

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

js/art/share/canvas.js:

brickwall
function setup_canvas(maxim_x=800, maxim_y=400) {
  midline = maxim_x / 2;

  myCanvas = createCanvas(maxim_x, maxim_y);

}

function zippy() {
  /// Dark Striped Background
  noStroke();
  stripe_w = 60;
  for(i=0; i&lt400; i++) {
    fill(fresh_color(.3)); // darker fill color
    x = i * stripe_w;
    // triangle(x, y, x+30, y-random(80), x, y+i+30);
    rect(x,0, stripe_w, 400);
  }
}

function setup_background_circles(centerx, max_diam){
  xo = centerx;
  yo = centerx;
  for(var i=0; i&lt9; i++){
    ccolor = fresh_color();
    diam = max_diam -i*20;
    fill(ccolor);
    circle(xo, yo, diam);
  }
}

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/random.js:

/* 

Reusable random functions

*/

function rando_url(){
  if(get_url_seed() == null) {
    new_random(Date.now());
  }
}

function random_plus_minus(low, high){
  // Return a random number with a random sign
  var plus_minus = Math.random() &lt 0.5 ? -1 : 1;
  var sel_val = low + Math.random()*(high-low);
  return sel_val * plus_minus;
}

function new_random(seed=null) {
  seed = get_random_seed(seed);
  window.location.search = "?r=" + seed;
}

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

function get_random_between(low, high, seed) {
  if(!seed) {
    seed = get_url_seed();
  }
  return low + get_random_from_seed(seed, high);
}

function get_random_seed(seed=200) {

  rand = Math.random();
  rand = Math.sin(seed) * 10000;
  seed = rand - Math.floor(rand);
  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);
}

var color_shift = 0;
function fresh_color(warmth=.7, seed) {
  if(!seed) {
    seed = get_url_seed();
    color_shift+=1;
    seed = seed^color_shift;
  }
  r1 = get_random_from_seed(seed, 255);
  r2 = get_random_from_seed(seed*r1, 255);
  r3 = get_random_from_seed(seed*r2, 255);
  return color(r1*warmth,r2*warmth,r3*warmth);
}


function fresher_color(warmth=.7, seed) {
  if(!seed) {
    seed = get_url_seed();
    color_shift+=1;
    seed = seed^color_shift;
  }
  r1 = 85 + get_random_from_seed(seed^color_shift, 170);
  color_shift+=random();
  r2 = 85 + get_random_from_seed(seed^color_shift, 170);
  color_shift+=random();
  r3 = 85 + get_random_from_seed(seed^color_shift, 170);
  color_shift+=random();
  return color(r1*warmth,r2*warmth,r3*warmth);
}



function remove_item(choices, item) {
  index = choices.indexOf(item);
  if (index &gt -1) { 
    choices.splice(index, 1); 
  }
  return choices;
}

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

js/art/share/draw_kit.js:



function toRadians (angle) {
  return angle * (Math.PI / 180);
}

function add_degrees(angle, degrees) {
  updated = angle + degrees;
  if(updated &gt 360) {
    updated = updated - 360;
  }
  return updated;
}

var line_segment = {
  x: 0,
  y: 0,
  weight: 4,
  degrees: 0,
  length: 20,
  history: 0,
  color: null,
  color_seq: [],
};

function draw_line_segment(line_seg, hide=0) {
  seg = structuredClone(line_seg);
  seg.history+=1;
  // stroke(seg.color.red, seg.color.green, seg.color.blue);
  strokeWeight(seg.weight);
  angleRad = toRadians(seg.degrees);
  endx = seg.x + seg.length*Math.cos(angleRad);
  endy = seg.y + seg.length*Math.sin(angleRad);
  if(hide==0) {
    line(seg.x, seg.y, endx, endy);
  }
  next_seg = structuredClone(seg);
  next_seg.x = endx;
  next_seg.y = endy;
  return next_seg;
}

function draw_line_cross(line_seg, dx, dy, hide=0) {
  seg = structuredClone(line_seg);
  seg.history+=1;
  strokeWeight(seg.weight);
  angleRad = toRadians(seg.degrees + 90);
  endx = seg.x + .5*seg.length*Math.cos(angleRad);
  endy = seg.y + .5*seg.length*Math.sin(angleRad);
  startx = seg.x - .5*seg.length*Math.cos(angleRad);
  starty = seg.y - .5*seg.length*Math.sin(angleRad);
  if(hide==0) line(startx+dx, starty+dy, 
    endx+dx, endy+dy);
  /*
  next_seg = structuredClone(seg);
  next_seg.x = endx;
  next_seg.y = endy;
  return next_seg;
  */
}



function draw_line_with_kite_shadow(line_seg, color_seq) {

  // prep
  seg = structuredClone(line_seg);
  angleRad = toRadians(seg.degrees);
  endx = seg.x + seg.length*Math.cos(angleRad);
  endy = seg.y + seg.length*Math.sin(angleRad);

  if(line_seg.history &gt 0) { // skip first line

  // draw shadow
  shadow_idx = (seg.history % color_seq.length);
  sha_c = color_seq[shadow_idx];
  stroke(sha_c.red, sha_c.green, sha_c.blue);
  fill(sha_c);
  swe = seg.weight*16;
  quad(
    seg.x,seg.y, 
    seg.x+swe,seg.y+swe, 
    endx,endy,
    endx+swe,endy+swe
    );

  // draw line
  stroke(seg.color.red, seg.color.green, seg.color.blue);
  strokeWeight(seg.weight);
  line(seg.x, seg.y, endx, endy);

  } else {
    endx = seg.x;
    endy = seg.y;
  }

  // house keeping
  seg.history+=1;
  next_seg = structuredClone(seg);
  next_seg.x = endx;
  next_seg.y = endy;
  return next_seg;
}


function new_line_segment(color_seq) {
  seg = structuredClone(line_segment);
  seg.color_seq = color_seq;
  seg.color = seg.color_seq[0];
  return seg;
}

js/art/fractal_triangles.js:

/*

This is a Live Art work created by Edward Delaporte.

This script is Copyright Edward Delaporte 2021.

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.

*/



balls = [];

function start_fractal() {
  line_bit = new_line_segment(color(0,0,0));
  line_bit.y = 250;
  line_bit.length = 80;
  line_bit.x = 300;
  line_bit.degrees = 0; 
  roty = random(15, 170);
  do_fractal(line_bit);
  line_bit.degrees += roty; 
  do_fractal(line_bit);
  line_bit.degrees += roty; 
  do_fractal(line_bit);
  line_bit.degrees += roty; 
  do_fractal(line_bit);
  line_bit.degrees += roty; 
  do_fractal(line_bit);
}

var first_angle = 60;
var second_angle = -120;

async function do_fractal(bit) {
  const next_bit = structuredClone(draw_line_segment(bit));

  // extra line
  /*
  bit.length = bit.length * .67;
  bit.x += bit.weight * 5;
  bit.y += bit.weight * 5;
  draw_line_segment(bit);
  */

  next_bit.length = next_bit.length*.67;
  next_bit.weight = next_bit.weight*.67;
  next_bit.degrees = add_degrees(bit.degrees, first_angle);

  if(next_bit.length &gt 1) {

    await do_fractal(next_bit);
    const bit2 = structuredClone(next_bit);
    bit2.degrees = add_degrees(bit.degrees, second_angle);
    await do_fractal(bit2);

  }
}

function setup() {
  rando_url();
  maxim_x = 600;
  maxim_y = 500;
  midline = maxim_y / 2;
  myCanvas = createCanvas(maxim_x, maxim_y);
  circle(maxim_x/2, maxim_y/2, maxim_y*.8);
  fill(55,55,55);
  // circle(maxim_x/2, maxim_y/2, maxim_y*.7);
  start_fractal();
  console.log("setup done");
}

function draw() {
}

function mouseClicked() {
  new_random(get_url_seed());
}