BrunoDumas/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Adapted from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
	function basicRandomColor() {
    return colorFromRGB(randomRGB())
  }

  function componentToHex (rgb) {
    var hex = Number(rgb).toString(16);
    if (hex.length < 2) {
         hex = "0" + hex;
    }
    return hex;
	}

  function randomRGB() {
    return {
      r: Math.round(Math.random() * 255),
      g: Math.round(Math.random() * 255),
      b: Math.round(Math.random() * 255)
    }
  }

  function colorFromRGB(rgb) {
    return '#' + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b);
  }

  function randomColor() {
    var golden_ratio_conjugate = 0.618033988749895;
    var h = Math.random();

    var hslToRgb = function (h, s, l){
        var r, g, b;

        if(s == 0){
            r = g = b = l; // achromatic
        }else{
            function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

        return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
    };

    return function(){
      h += golden_ratio_conjugate;
      h %= 1;
      return hslToRgb(h, 0.5, 0.60);
    };
  };

    var svg = d3.select("body").append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
    var background = svg.append("rect")
    background
    	.attr("x", 0)
      .attr("y", 0)
    	.attr("width", "100%")
    	.attr("height", "100%")
    	.attr("fill", "white")

    var fillColor
    var bgColor
    var strokeColor

    var baseColor

    d3.xml('motif.svg')
    .then(data => {
        d3.select('svg').node().append(data.documentElement)
        var g = svg.select("svg g")

        var svgWidth = window.innerWidth
				var svgHeight = window.innerHeight

        var svgImage = svg.select("svg")
        svgImage
        	.attr("viewBox", "0 0 " + svgWidth + "px " + svgHeight + "px")
  				.attr("preserveAspectRatio", "xMinYMin meet")

        var paths = g.selectAll("path")
        var closedPaths = paths
            .filter(function(){
            	var lastChar = this.getAttribute("d").trim().slice(-1);
            	return (lastChar == "z" || lastChar == "Z")
          	})
        var openPaths = paths
            .filter(function(){
            	var lastChar = this.getAttribute("d").trim().slice(-1);
            	return (lastChar != "z" && lastChar != "Z")
          	})
        //var filteredPaths = g.selectAll("path#path5270-9")

        paths
        	.style("stroke-width", 2)

        function animationFunction(activatedPercent){
          if (typeof activatedPercent == 'undefined') {
            activatedPercent = 0.2
          }
          /*currentColor = basicRandomColor()
        	currentBgColor = basicRandomColor()
        	currentStrokeColor = basicRandomColor()*/

          baseColor = randomRGB()
          baseColorDarker = {
            r: baseColor.r - 25,
            g: baseColor.g - 25,
            b: baseColor.b - 25
          }
          baseColorLighter = {
            r: baseColor.r + 25,
            g: baseColor.g + 25,
            b: baseColor.b + 25
          }
          baseColorOpposite = {
            r: 255 - baseColor.r,
            g: 255 - baseColor.g,
            b: 255 - baseColor.b
          }

          fillColor = colorFromRGB(baseColorDarker)
          bgColor = colorFromRGB(baseColorOpposite)
          strokeColor = colorFromRGB(baseColorLighter)

          background
            .transition()
            .delay(1)
            .duration(4000)
          	.style("fill", bgColor)

					closedPaths.filter(function(){return Math.random() > 1.0 - activatedPercent})
            .transition()
            .delay(1)
            .duration(4000)
            .style("fill", fillColor)
            .style("stroke", strokeColor)

          openPaths.filter(function(){return Math.random() > 1.0 - activatedPercent})
          	.transition()
            .delay(1)
            .duration(4000)
            .style("stroke", strokeColor)


          // https://www.guidodiepen.nl/2018/07/wrapping-my-head-around-d3-rotation-transitions/
          /*paths
            .transition()
          	.delay(1)
            .duration(1000)
          	.attrTween("d", function(d, i, a){
            	var current_value = this.getAttribute("d")
              var edited_value = editPath(current_value, 0.5, 0.1)
							return d3.interpolateString( current_value, edited_value )
            })*/
            /*.each(function(){
              this.setAttribute("d", editPath(this.getAttribute("d"), 0.5, 0.1))
            })*/
          /*var randomPaths = paths.filter(function(){return Math.random() > 0.8})
          randomPaths
            .transition()
          	.delay(1)
            .duration(2000)
          	.attrTween("transform", function(){
            	var current_path = this.getAttribute("d")
							//var mean_position = getMeanCoordinates(current_path)
              var rotate_angle = 10
              var bbox = d3.select(this).node().getBBox()
              var interpol_rotate = d3.interpolateString(
                "rotate (" + 0 + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")",
              	"rotate (" + rotate_angle + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")")
              return interpol_rotate
            })
          	.transition()
          	.delay(1)
            .duration(2000)
          	.attrTween("transform", function(){
            	//var current_path = this.getAttribute("d")
							//var mean_position = getMeanCoordinates(current_path)
              var rotate_angle = 10
              var bbox = d3.select(this).node().getBBox()
              var interpol_rotate = d3.interpolateString(
                "rotate (" + rotate_angle + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")",
              	"rotate (" + 0 + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")")
              return interpol_rotate
            })*/
        }

      	animationFunction(1.0)
        var t = setInterval(animationFunction, 5000)

    		/*g.selectAll("path")
        	.filter(function(){return this.getAttribute("d").trim().slice(-1) == "z"})
          .style("fill", randomColor)
        	.transition()
        	.delay(1)
        	.duration(1000)
          .on("start", changeColor())*/
    })

    var numberRegex = /(-?[\d]+\.[\d]+)/g;
    var coordinateRegex = /(-?[\d]+\.?[\d]*)\s*(-?[\d]+\.?[\d]*)/g;

    function editPath (pathD, maxVariation, editChance) {
      var outputPathD = pathD

      while ((match = numberRegex.exec(pathD)) != null) {
        var matchLength = match[1].length
        var matchIndex = match.index
        var variationValue = 1 + Math.random() * maxVariation - maxVariation / 2

        var originalFloatValue = parseFloat(match[1])
        var editedFloatValue = originalFloatValue + variationValue

        var editedStringValue = editedFloatValue.toString().substring(0, matchLength)

        if (Math.random() < editChance) {
        	outputPathD = outputPathD.substring(0, matchIndex) + editedStringValue + outputPathD.substring(matchIndex + matchLength)
        }
      }

      return outputPathD
    }


  </script>
</body>

## motif.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              motif.svg
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Adapted from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
	function basicRandomColor() {
	return colorFromRGB(randomRGB())
	}

	function componentToHex (rgb) {
	var hex = Number(rgb).toString(16);
	if (hex.length < 2) {
	hex = "0" + hex;
	}
	return hex;
	}

	function randomRGB() {
	return {
	r: Math.round(Math.random() * 255),
	g: Math.round(Math.random() * 255),
	b: Math.round(Math.random() * 255)
	}
	}

	function colorFromRGB(rgb) {
	return '#' + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b);
	}

	function randomColor() {
	var golden_ratio_conjugate = 0.618033988749895;
	var h = Math.random();

	var hslToRgb = function (h, s, l){
	var r, g, b;

	if(s == 0){
	r = g = b = l; // achromatic
	}else{
	function hue2rgb(p, q, t){
	if(t < 0) t += 1;
	if(t > 1) t -= 1;
	if(t < 1/6) return p + (q - p) * 6 * t;
	if(t < 1/2) return q;
	if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
	return p;
	}

	var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
	var p = 2 * l - q;
	r = hue2rgb(p, q, h + 1/3);
	g = hue2rgb(p, q, h);
	b = hue2rgb(p, q, h - 1/3);
	}

	return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
	};

	return function(){
	h += golden_ratio_conjugate;
	h %= 1;
	return hslToRgb(h, 0.5, 0.60);
	};
	};

	var svg = d3.select("body").append("svg")
	.attr("width", "100%")
	.attr("height", "100%")
	var background = svg.append("rect")
	background
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", "100%")
	.attr("height", "100%")
	.attr("fill", "white")

	var fillColor
	var bgColor
	var strokeColor

	var baseColor

	d3.xml('motif.svg')
	.then(data => {
	d3.select('svg').node().append(data.documentElement)
	var g = svg.select("svg g")

	var svgWidth = window.innerWidth
	var svgHeight = window.innerHeight

	var svgImage = svg.select("svg")
	svgImage
	.attr("viewBox", "0 0 " + svgWidth + "px " + svgHeight + "px")
	.attr("preserveAspectRatio", "xMinYMin meet")

	var paths = g.selectAll("path")
	var closedPaths = paths
	.filter(function(){
	var lastChar = this.getAttribute("d").trim().slice(-1);
	return (lastChar == "z" \|\| lastChar == "Z")
	})
	var openPaths = paths
	.filter(function(){
	var lastChar = this.getAttribute("d").trim().slice(-1);
	return (lastChar != "z" && lastChar != "Z")
	})
	//var filteredPaths = g.selectAll("path#path5270-9")

	paths
	.style("stroke-width", 2)

	function animationFunction(activatedPercent){
	if (typeof activatedPercent == 'undefined') {
	activatedPercent = 0.2
	}
	/*currentColor = basicRandomColor()
	currentBgColor = basicRandomColor()
	currentStrokeColor = basicRandomColor()*/

	baseColor = randomRGB()
	baseColorDarker = {
	r: baseColor.r - 25,
	g: baseColor.g - 25,
	b: baseColor.b - 25
	}
	baseColorLighter = {
	r: baseColor.r + 25,
	g: baseColor.g + 25,
	b: baseColor.b + 25
	}
	baseColorOpposite = {
	r: 255 - baseColor.r,
	g: 255 - baseColor.g,
	b: 255 - baseColor.b
	}

	fillColor = colorFromRGB(baseColorDarker)
	bgColor = colorFromRGB(baseColorOpposite)
	strokeColor = colorFromRGB(baseColorLighter)

	background
	.transition()
	.delay(1)
	.duration(4000)
	.style("fill", bgColor)

	closedPaths.filter(function(){return Math.random() > 1.0 - activatedPercent})
	.transition()
	.delay(1)
	.duration(4000)
	.style("fill", fillColor)
	.style("stroke", strokeColor)

	openPaths.filter(function(){return Math.random() > 1.0 - activatedPercent})
	.transition()
	.delay(1)
	.duration(4000)
	.style("stroke", strokeColor)


	// https://www.guidodiepen.nl/2018/07/wrapping-my-head-around-d3-rotation-transitions/
	/*paths
	.transition()
	.delay(1)
	.duration(1000)
	.attrTween("d", function(d, i, a){
	var current_value = this.getAttribute("d")
	var edited_value = editPath(current_value, 0.5, 0.1)
	return d3.interpolateString( current_value, edited_value )
	})*/
	/*.each(function(){
	this.setAttribute("d", editPath(this.getAttribute("d"), 0.5, 0.1))
	})*/
	/*var randomPaths = paths.filter(function(){return Math.random() > 0.8})
	randomPaths
	.transition()
	.delay(1)
	.duration(2000)
	.attrTween("transform", function(){
	var current_path = this.getAttribute("d")
	//var mean_position = getMeanCoordinates(current_path)
	var rotate_angle = 10
	var bbox = d3.select(this).node().getBBox()
	var interpol_rotate = d3.interpolateString(
	"rotate (" + 0 + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")",
	"rotate (" + rotate_angle + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")")
	return interpol_rotate
	})
	.transition()
	.delay(1)
	.duration(2000)
	.attrTween("transform", function(){
	//var current_path = this.getAttribute("d")
	//var mean_position = getMeanCoordinates(current_path)
	var rotate_angle = 10
	var bbox = d3.select(this).node().getBBox()
	var interpol_rotate = d3.interpolateString(
	"rotate (" + rotate_angle + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")",
	"rotate (" + 0 + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")")
	return interpol_rotate
	})*/
	}

	animationFunction(1.0)
	var t = setInterval(animationFunction, 5000)

	/*g.selectAll("path")
	.filter(function(){return this.getAttribute("d").trim().slice(-1) == "z"})
	.style("fill", randomColor)
	.transition()
	.delay(1)
	.duration(1000)
	.on("start", changeColor())*/
	})

	var numberRegex = /(-?[\d]+\.[\d]+)/g;
	var coordinateRegex = /(-?[\d]+\.?[\d])\s(-?[\d]+\.?[\d]*)/g;

	function editPath (pathD, maxVariation, editChance) {
	var outputPathD = pathD

	while ((match = numberRegex.exec(pathD)) != null) {
	var matchLength = match[1].length
	var matchIndex = match.index
	var variationValue = 1 + Math.random() * maxVariation - maxVariation / 2

	var originalFloatValue = parseFloat(match[1])
	var editedFloatValue = originalFloatValue + variationValue

	var editedStringValue = editedFloatValue.toString().substring(0, matchLength)

	if (Math.random() < editChance) {
	outputPathD = outputPathD.substring(0, matchIndex) + editedStringValue + outputPathD.substring(matchIndex + matchLength)
	}
	}

	return outputPathD
	}



	</script>
	</body>