tomshanley/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Trying out gradient fills on an angle
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  	<script src="triangleEquations.js"></script>

    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          	background: DarkSlateBlue;
        }

        g.tick > line {
            stroke: lightgrey;
        }

        g.tick > text {
            fill: lightgrey;
        }

    </style>
</head>

<body>
    <script>

				let width = 100;
        let height = 300;

      	let gradientAngleDegrees = 30;
      	let gradientAngle = 30 * (Math.PI/180);

        const gradientColours = [
            { "offset": "0%", "stopColor": "yellow" },
          { "offset": "19%", "stopColor": "yellow" },
            { "offset": "20%","stopColor": "MediumVioletRed" },
          { "offset": "69%","stopColor": "MediumVioletRed" },
            { "offset": "70%", "stopColor": "Indigo" },
            { "offset": "100%", "stopColor": "Indigo" }
        ];

      	const margin = { "top": 50, "right": 50, "bottom": 50, "left": 50 };

        let svg = d3.select("body")
            .append("svg")
            .attr("width", 500 + margin.left + margin.right)
            .attr("height", 500 + margin.top + margin.bottom);

      	let defs = svg.append("defs");

      	let offset = 0;

				let series = [1,2,3];

        series.forEach(function(d){

         let g = svg.append("g")
            .attr("transform", "translate(" + (d * 120) +"," + (d * offset + 10) + ")");

          let rectHeight = (height * d/3);

          let bottom = (height * d/3) + (height * (3 - d)/3);

          let x1 = width;
          let y1 = bottom;
          let x2 = -(oppositeSin(gradientAngle, height));
          let y2 = height - (adjacentCos(gradientAngle, height));

          	let gradient = defs.append("linearGradient")
                .attr("id", "gradient" + d)
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 1)
                .attr("y2", 0)
            		.attr("gradientUnits", "userSpaceOnUse")
            		.attr("gradientTransform","rotate(45,0,300)")

            gradient.selectAll("stop")
                .data(gradientColours)
                .enter()
                .append("stop")
                .attr("offset", function (d) { return d.offset; })
                .attr("stop-color", function (d) { return d.stopColor; });

            let rect = g.append("rect")
                .attr("x", 0)
                .attr("y", height - rectHeight)
            		.attr("width", width)
            		.attr("height", rectHeight)
                .style("fill", "url(#gradient" + d + ")")
            		//.attr("transform", "skewY(-45)")


                })


    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## triangleEquations.js
//returns the length of the opposite side to the angle, using the adjacent side's length
function oppositeTan(angle, adjacent) {
	return Math.tan(angle) * adjacent;
};

//returns the length of the adjacent side to the angle, using the hypotenuse's length
function adjacentCos(angle, hypotenuse) {
	return Math.cos(angle) * hypotenuse;
}

//returns the length of the opposite side to the angle, using the adjacent's length
function oppositeTan(angle, adjacent) {
	return Math.tan(angle) * adjacent;
}

//returns the length of the adjacent side to the angle, using the opposite's length
function adjacentTan(angle, opposite) {
	return opposite / Math.tan(angle);
}

//returns the length of the opposite side to the angle, using the hypotenuse's length
function oppositeSin(angle, hypotenuse) {
	return Math.sin(angle) * hypotenuse;
}

//returns the length of the unknown side of a triangle, using the other two sides' lengths
function triangleSide(sideA, sideB) {
  var hypothenuse, shorterSide;
  if (sideA > sideB) {
    hypothenuse = sideA;
    shorterSide = sideB;
  } else {
    hypothenuse = sideB;
    shorterSide = sideA;
  };
  return Math.sqrt(Math.pow(hypothenuse, 2) - Math.pow(shorterSide, 2))
};

//returns the length of the hypotenuse, using the other two sides' lengths
function triangleHypotenuse(sideA, sideB) {
  return Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2))
};
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="triangleEquations.js"></script>

	<style>
	body {
	margin: 0;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: DarkSlateBlue;
	}

	g.tick > line {
	stroke: lightgrey;
	}

	g.tick > text {
	fill: lightgrey;
	}

	</style>
	</head>

	<body>
	<script>

	let width = 100;
	let height = 300;

	let gradientAngleDegrees = 30;
	let gradientAngle = 30 * (Math.PI/180);

	const gradientColours = [
	{ "offset": "0%", "stopColor": "yellow" },
	{ "offset": "19%", "stopColor": "yellow" },
	{ "offset": "20%","stopColor": "MediumVioletRed" },
	{ "offset": "69%","stopColor": "MediumVioletRed" },
	{ "offset": "70%", "stopColor": "Indigo" },
	{ "offset": "100%", "stopColor": "Indigo" }
	];

	const margin = { "top": 50, "right": 50, "bottom": 50, "left": 50 };

	let svg = d3.select("body")
	.append("svg")
	.attr("width", 500 + margin.left + margin.right)
	.attr("height", 500 + margin.top + margin.bottom);

	let defs = svg.append("defs");

	let offset = 0;

	let series = [1,2,3];

	series.forEach(function(d){

	let g = svg.append("g")
	.attr("transform", "translate(" + (d * 120) +"," + (d * offset + 10) + ")");

	let rectHeight = (height * d/3);

	let bottom = (height * d/3) + (height * (3 - d)/3);

	let x1 = width;
	let y1 = bottom;
	let x2 = -(oppositeSin(gradientAngle, height));
	let y2 = height - (adjacentCos(gradientAngle, height));

	let gradient = defs.append("linearGradient")
	.attr("id", "gradient" + d)
	.attr("x1", 0)
	.attr("y1", 0)
	.attr("x2", 1)
	.attr("y2", 0)
	.attr("gradientUnits", "userSpaceOnUse")
	.attr("gradientTransform","rotate(45,0,300)")

	gradient.selectAll("stop")
	.data(gradientColours)
	.enter()
	.append("stop")
	.attr("offset", function (d) { return d.offset; })
	.attr("stop-color", function (d) { return d.stopColor; });

	let rect = g.append("rect")
	.attr("x", 0)
	.attr("y", height - rectHeight)
	.attr("width", width)
	.attr("height", rectHeight)
	.style("fill", "url(#gradient" + d + ")")
	//.attr("transform", "skewY(-45)")





	})




	</script>
	</body>
	//returns the length of the opposite side to the angle, using the adjacent side's length
	function oppositeTan(angle, adjacent) {
	return Math.tan(angle) * adjacent;
	};

	//returns the length of the adjacent side to the angle, using the hypotenuse's length
	function adjacentCos(angle, hypotenuse) {
	return Math.cos(angle) * hypotenuse;
	}

	//returns the length of the opposite side to the angle, using the adjacent's length
	function oppositeTan(angle, adjacent) {
	return Math.tan(angle) * adjacent;
	}

	//returns the length of the adjacent side to the angle, using the opposite's length
	function adjacentTan(angle, opposite) {
	return opposite / Math.tan(angle);
	}

	//returns the length of the opposite side to the angle, using the hypotenuse's length
	function oppositeSin(angle, hypotenuse) {
	return Math.sin(angle) * hypotenuse;
	}

	//returns the length of the unknown side of a triangle, using the other two sides' lengths
	function triangleSide(sideA, sideB) {
	var hypothenuse, shorterSide;
	if (sideA > sideB) {
	hypothenuse = sideA;
	shorterSide = sideB;
	} else {
	hypothenuse = sideB;
	shorterSide = sideA;
	};
	return Math.sqrt(Math.pow(hypothenuse, 2) - Math.pow(shorterSide, 2))
	};

	//returns the length of the hypotenuse, using the other two sides' lengths
	function triangleHypotenuse(sideA, sideB) {
	return Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2))
	};