dribnet · April 1, 2022 12:02
diff --git a/.block b/.block
 height: 540
diff --git a/README.md b/README.md
diff --git a/background.png b/background.png
diff --git a/draw_segment.js b/draw_segment.js
 // set to true to test resizing canvas
 var allowResize = false;

 /* draw a single segment given the endpoints, height of canvas, and segment depth */
 function draw_segment(x1, x2, y1, y2, box_height, cur_segment, num_segments, is_left) {
  // min and max line weight is a function of the canvas size
  let startWeight = box_height / 100;
  let endWeight = startWeight / 2;

  // set strokeWeight based on how far down the segment we are (gets thinner)
  let w = map(cur_segment, 0, num_segments-1, startWeight, endWeight);
  strokeWeight(int(w));

  // set color based on how far down the segment we are (gets less black)
  let c = map(cur_segment, 0, num_segments-1, 0, 48);
  stroke(c, c, c, 200);

  line(x1, x2, y1, y2);
 }

 /* draw a connected line segment starting at (x,y)
   each segment is length l and there are steps number of segments in all
   the vector grid is provided as well as the bounding box
   */
 function draw_multi_segment(x, y, l, steps, canvas_grid, min_x, max_x, min_y, max_y) {
  noFill();
  let box_height = (max_y - min_y);
  let is_left = true;
  if (x > width/2) {
    is_left = false;
  }

  let cur_x = x;
  let cur_y = y;
  for(let i=0; i<steps; i++) {
    let v = get_interpolated_vector(cur_x, cur_y, canvas_grid, min_x, max_x, min_y, max_y);
    let next_x = constrain(cur_x + v[0] * l, min_x+1, max_x-1);
    let next_y = constrain(cur_y + v[1] * l, min_y+1, max_y-1);
    draw_segment(cur_x, cur_y, next_x, next_y, box_height, i, steps, is_left);
    cur_x = next_x;
    cur_y = next_y;
  }
 }
diff --git a/index.html b/index.html
 <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
 </head>
 <body style="background-color:white">
    <div id="canvasContainer"></div><p>
    <script language="javascript" type="text/javascript" src="draw_segment.js"></script>
    <script language="javascript" type="text/javascript" src="the_argument.js"></script>
    <pre>
 </pre>    	
 </body>
diff --git a/preview.jpg b/preview.jpg
diff --git a/preview.png b/preview.png
diff --git a/sketch1_08_04.json b/sketch1_08_04.json
diff --git a/the_argument.js b/the_argument.js
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/z_purview_helper.js b/z_purview_helper.js
	// set to true to test resizing canvas
	var allowResize = false;

	/* draw a single segment given the endpoints, height of canvas, and segment depth */
	function draw_segment(x1, x2, y1, y2, box_height, cur_segment, num_segments, is_left) {
	// min and max line weight is a function of the canvas size
	let startWeight = box_height / 100;
	let endWeight = startWeight / 2;

	// set strokeWeight based on how far down the segment we are (gets thinner)
	let w = map(cur_segment, 0, num_segments-1, startWeight, endWeight);
	strokeWeight(int(w));

	// set color based on how far down the segment we are (gets less black)
	let c = map(cur_segment, 0, num_segments-1, 0, 48);
	stroke(c, c, c, 200);

	line(x1, x2, y1, y2);
	}

	/* draw a connected line segment starting at (x,y)
	each segment is length l and there are steps number of segments in all
	the vector grid is provided as well as the bounding box
	*/
	function draw_multi_segment(x, y, l, steps, canvas_grid, min_x, max_x, min_y, max_y) {
	noFill();
	let box_height = (max_y - min_y);
	let is_left = true;
	if (x > width/2) {
	is_left = false;
	}

	let cur_x = x;
	let cur_y = y;
	for(let i=0; i<steps; i++) {
	let v = get_interpolated_vector(cur_x, cur_y, canvas_grid, min_x, max_x, min_y, max_y);
	let next_x = constrain(cur_x + v[0] * l, min_x+1, max_x-1);
	let next_y = constrain(cur_y + v[1] * l, min_y+1, max_y-1);
	draw_segment(cur_x, cur_y, next_x, next_y, box_height, i, steps, is_left);
	cur_x = next_x;
	cur_y = next_y;
	}
	}
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
	<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
	</head>
	<body style="background-color:white">
	<div id="canvasContainer"></div><p>
	<script language="javascript" type="text/javascript" src="draw_segment.js"></script>
	<script language="javascript" type="text/javascript" src="the_argument.js"></script>
	<pre>
	</pre>
	</body>