const strokeColor = "#FF0C2D";

​

const length = 30

const h = length / 2 * Math.sqrt(3)

const flowerSize = length * 2 + h * 2

const flowerTranslateX = flowerSize/2 + length/2

const flowerTranslateY = length/2 + h

​

const flowerTranslateX2 = flowerSize + length

const flowerTranslateY2 = length/2 + h

​

const flowerSizeCalc = length + h / 2

​

const pointPairs = []

​

const mouseDistance = 100

​

function setup() {

  createCanvas(960, 540);

  stroke(strokeColor);  

  noFill();

  frameRate(10)

  createFlowers()

  // noLoop()

}

​

​

function createFlowers(){

​

  let pX_adjust = flowerTranslateX2 / 2

  for( let ht = 0; ht <= (height/flowerSizeCalc) + 2; ht++ ){

    for( let wh = 0; wh < (width/flowerSizeCalc ); wh++ ){

      const pX = flowerTranslateX2 * wh + pX_adjust

      const pY = flowerTranslateY2 * ht

      flower(pX,pY)

    }    

    if( ht % 2 == 0 ){

      pX_adjust = 0 // flowerTranslateX2 / -2

    }else{

      pX_adjust = flowerTranslateX2 / 2

    }

  }

}

​

// https://stackoverflow.com/questions/17410809/how-to-calculate-rotation-in-2d-in-javascript

function rotatePoints(cx, cy, x, y, angle) {

    let radians = (Math.PI / 180) * angle,

        cos = Math.cos(radians),

        sin = Math.sin(radians),

        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,

        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;

    return [nx, ny];

}

​

function flower(cX = 0, cY = 0) {

  for ( let r = 0; r < 6; r++ ){

    const lines = []    

    lines.push([

      rotatePoints( cX, cY, cX, cY, 60*r ),

      rotatePoints( cX, cY, cX + length/2, cY + h, 60*r ),

    ])

    lines.push([

      rotatePoints( cX, cY, cX + length/2, cY + h, 60*r ),

      rotatePoints( cX, cY, cX + -length/2, cY + h, 60*r )

    ])

    lines.push([

      rotatePoints( cX, cY, cX + -length/2, cY + h, 60*r ),

      rotatePoints( cX, cY, cX + -length/2, cY + h+length, 60*r ),

    ])

    pointPairs.push(

      ...lines

    ) 

  }

}

​

function draw() {

  background(255);

  let inverter = 1

  if( mouseIsPressed ){

    inverter = -1

  }

  beginShape(LINES);

  for( let i = 0; i < pointPairs.length; i++ ){

    let px1 = pointPairs[i][0][0]

    let py1 = pointPairs[i][0][1]

    let px2 = pointPairs[i][1][0]

    let py2 = pointPairs[i][1][1]

    let d1 = dist(px1, py1, mouseX, mouseY)

    let d2 = dist(px2, py2, mouseX, mouseY)

    if( d1 < mouseDistance ){

      //stroke("blue"); 

      py1 -= ( mouseDistance - d1 ) * inverter

    }

    vertex(px1,py1)

    vertex(px2,py2)

  }

  endShape() 

}