HokuSurf's Up

//you can see the various ways I tested different ways to code the shapes

//resource: http://printingcode.runemadsen.com/examples/form/path_curve_quad/

var r = new Rune({
  container: "#canvas",
  width: 1185,
  height: 800,
  debug: false
});

var width = r.width;
var height = r.height;
var spacing = 40;

var tideSpace = 237; //width/5
var tideHeight = -100;
var tideDist = tideSpace/0.77
var boardLength = 400;

//background
r.rect (0,0, width, height)
.fill (0,0,0)



//wave
for (var i = 0; i<7; i++){

//good one
var wave = r.path(0, height)
	.curveTo (391.05-(i*spacing),-536, 711-(i*spacing), -536, 888.75-(i*spacing), -360)
	.curveTo (948-(i*spacing), -304, 900.6-(i*spacing), -320, 829.5-(i*spacing), -355)
	.curveTo (500-(i*spacing), -525, 391-(i*spacing), -200, 725-(2*(i*spacing)), 0)
	.fill (0,0,0)
	.strokeWidth(3)
	.stroke(255, 255, 255)

//modulo color
// 	if (i % 6==0)
// 	{

// 	wave.fill (0,0,0)
// 	wave.stroke (255, 255, 255)
// } else {

// 	wave.fill (255,255,255)
// 	wave.stroke (0,0,0)
// }


}

//tide


for (var j = 0; j<7; j++) {	
	// var x = Math.cos(Rune.radians(j*tideSpace)) * tideDist;
	// var y = Math.sin(Rune.radians(j*tideSpace)) * tideDist;
	
	//good one
	var tide = r.path (0+(tideDist/2*j), height)
 		.curveTo(100, tideHeight, tideSpace, tideHeight/0.67)
 		.curveTo(260, tideHeight/0.65, 250, tideHeight/0.70)
		.curveTo (170, -75, 300, 0)
		.stroke (false)
		.fill (255, 255, 255)

	//testing randomization CHANGES inner curves
	// var tide = r.path (0+(tideDist/2*j), height)
 // 		.curveTo(Rune.random (60,130), tideHeight, tideSpace, tideHeight/0.67)
 // 		.curveTo(260, tideHeight/0.65, 250, tideHeight/0.70)
	// 	.curveTo (Rune.random(130, 200), -75, 300, 0)
	// 	.stroke (false)
	// 	.fill (255, 255, 255)

	// 	tide.moveTo (0, Rune.random(height, -30))

//resting randomization CHANGES inner curves & height (not yet)
	// var tide = r.path (0+(tideDist/2*j), height)
 // 		.curveTo(Rune.random (60,130), tideHeight, tideSpace, tideHeight/0.67)
 // 		.curveTo(260, tideHeight/0.65, 250, tideHeight/0.70)
	// 	.curveTo (Rune.random(130, 200), -75, 300, 0)
	// 	.stroke (false)
	// 	.fill (255, 255, 255)

	// 	tide.moveTo (0, Rune.random(height, -30))


}

//Surf Board
r.path (tideSpace+50, height/2.5)

  .lineTo (0, 0)
  .lineTo (boardLength, 0)
  .curveTo (boardLength*.40, 30, boardLength*.60, 30, 0,0)
  .lineTo (boardLength*.40, 0)
  .lineTo (boardLength*.30, 40)
  .lineTo (boardLength*.20, 0)
  .fill(255, 255, 255)
  .stroke (false)
  .rotate(359,tideSpace+50, height/2.5)


r.draw();