lemonbear-LineWalk

Here is my SVG (there are very bizarre lines in some browsers; feel free to click and open in a new tab):

Here is a screenshot:

Approach: I knew I wanted to do something sort of objective and I settled on flowers! Namely, roses. I thought it would be pretty simple algorithmically to create a spiral with some jitter for the petals, and after a little more finicky work, I was able to implement leaves on the outer layer of each rose. My friend pointed out that with some color and cursive writing this could be an album cover for an extremely mediocre emo band, and I think I agree with that.

Struggles: I had a little bit of a harder time getting into this creative portion of the homework, and actually found that recreating the Molnar was the most engaging out of these offerings for me. Also, there’s this weird bug where the line connecting one flower to the next’s center overshoots the center, and I spent like 45 minutes trying to debug it before giving up. My primary issue with this is that now it looks like there’s more than one line, but I promise it’s all just one.

Learned: I learned Javascript for these offerings! I had been kind of scared to learn p5.js in the past because I had never done JS before, but I learned that it’s basically gentler C (a language I am somewhat familiar with) plus some idiosyncrasies (there are no ints? everything is just floats? what kind of type system…)

Here is my code:

function setup() {
  createCanvas(816, 1056, SVG);
  noLoop();
}

function draw() {
  noFill();
  beginShape();
  var centerX = width/2;
  var centerY = height/2;
  var finalX, finalY;
  const array = [];
  for (var k = 1; k < 4; k++){
    for(var l = 1; l < 3; l++){
      var jitter1 = Math.floor(Math.random()*101)-50;
      var jitter2 = Math.floor(Math.random()*101)-50;
      array.push([width*l/3+jitter1, height*k/4+jitter2]);
    }
  }
  for (var j = 0; j < 6; j++){
    centerX = array[j][0];
    centerY = array[j][1];
    for (var i = 0; i < TWO_PI*10; i+=HALF_PI/6) {
      var jitter3 = Math.floor(Math.random()*i/2)-i/4;
      var jitter4 = Math.floor(Math.random()*i/2)-i/4;
      if ((jitter3 < 0 && jitter4 > 0) || (jitter3 > 0 && jitter4 < 0)) { jitter3 *= -1; } var x = centerX+cos(i)*(i*2+jitter3); var y = centerY+sin(i)*(i*2+jitter4); curveVertex(x, y); var leafTipX, leafTipY; if (i >= TWO_PI*9 && Math.random()<0.5){
        curveVertex(x, y);
        endShape();
        beginShape();
        curveVertex(x, y);
        curveVertex(x, y);
        leafTipX = (x-centerX)*0.4 + x;
        leafTipY = (y-centerY)*0.4 + y;
        var slope = (y-leafTipY)/(x-leafTipX);
        slope = -1/slope;
        var midX = (x+leafTipX)/2;
        var midY = (y+leafTipY)/2;
        var leftX = midX+10;
        var leftY = midY+10*slope;
        var rightX = midX-10;
        var rightY = midY-10*slope;
        curveVertex(leftX, leftY);
        curveVertex(leafTipX, leafTipY);
        curveVertex(rightX, rightY);
        curveVertex(x, y);
        curveVertex(x, y);
        endShape();
        beginShape();
        curveVertex(x, y);
        curveVertex(x, y);
      }
      finalX = x;
      finalY = y;
    }
  }
  curveVertex(finalX, finalY);
  endShape();
  // saveSVG("line_walk_v1.svg")
}