samedi 4 novembre 2017

Random feColorMatrix


0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0

0




<style>
td {
border: 1px solid black;
text-align: center;
}
</style>
<div style="text-align:center">
<button onclick="myFunctionC()">Color</button><br/>
<table align="center">
<tr>
<td><p id="c00">0</p></td>
<td><p id="c01">0</p></td>
<td><p id="c02">0</p></td>
<td><p id="c03">0</p></td>
<td><p id="c04">0</p></td>
</tr>
<tr>
<td><p id="c05">0</p></td>
<td><p id="c06">0</p></td>
<td><p id="c07">0</p></td>
<td><p id="c08">0</p></td>
<td><p id="c09">0</p></td>
</tr>
<tr>
<td><p id="c10">0</p></td>
<td><p id="c11">0</p></td>
<td><p id="c12">0</p></td>
<td><p id="c13">0</p></td>
<td><p id="c14">0</p></td>
</tr>
<tr>
<td><p id="c15">0</p></td>
<td><p id="c16">0</p></td>
<td><p id="c17">0</p></td>
<td><p id="c18">0</p></td>
<td><p id="c19">0</p></td>
</tr>
</table>

<svg id="svgColor" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect x="0" y="0" width="500" height="500" fill="none" stroke="black" stroke-width="2"/>
</svg>
</div>


<script>
function myFunctionC() {

var num00 = Math.random()*2;
var round00 = Math.round( num00 * 10 ) / 10;
round00 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num01 = Math.random()*2;
var round01 = Math.round( num01 * 10 ) / 10;
round01 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num02 = Math.random()*2;
var round02 = Math.round( num02 * 10 ) / 10;
round02 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num03 = Math.random()*2;
var round03 = Math.round( num03 * 10 ) / 10;
round03 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num04 = Math.random()*2;
var round04 = Math.round( num04 * 10 ) / 10;
round04 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num05 = Math.random()*2;
var round05 = Math.round( num05 * 10 ) / 10;
round05 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num06 = Math.random()*2;
var round06 = Math.round( num06 * 10 ) / 10;
round06 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num07 = Math.random()*2;
var round07 = Math.round( num07 * 10 ) / 10;
round07 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num08 = Math.random()*2;
var round08 = Math.round( num08 * 10 ) / 10;
round08 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num09 = Math.random()*2;
var round09 = Math.round( num09 * 10 ) / 10;
round09 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num10 = Math.random()*2;
var round10 = Math.round( num10 * 10 ) / 10;
round10 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num11 = Math.random()*2;
var round11 = Math.round( num11 * 10 ) / 10;
round11 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num12 = Math.random()*2;
var round12 = Math.round( num12 * 10 ) / 10;
round12 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num13 = Math.random()*2;
var round13 = Math.round( num13 * 10 ) / 10;
round13 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num14 = Math.random()*2;
var round14 = Math.round( num14 * 10 ) / 10;
round14 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num15 = Math.random()*2;
var round15 = Math.round( num15 * 10 ) / 10;
round15 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num16 = Math.random()*2;
var round16 = Math.round( num16 * 10 ) / 10;
round16 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num17 = Math.random()*2;
var round17 = Math.round( num17 * 10 ) / 10;
round17 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num18 = Math.random()*2;
var round18 = Math.round( num18 * 10 ) / 10;
round18 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var num19 = Math.random()*2;
var round19 = Math.round( num19 * 10 ) / 10;
round19 *= Math.floor(Math.random()*2) == 1 ? 1 : -1;

var defs = document.createElementNS(svgColor.namespaceURI, 'defs');

var filter = document.createElementNS(svgColor.namespaceURI, 'filter');
    filter.setAttributeNS(null, 'id', 'color');

var feColorMatrix = document.createElementNS(svgColor.namespaceURI, 'feColorMatrix');
    feColorMatrix.setAttributeNS(null, 'type', 'matrix');
    feColorMatrix.setAttributeNS(null, 'values',  ''+round00+' '+round01+' '+round02+' '+round03+' '+round04+' '+round05+' '+round06+' '+round07+' '+round08+' '+round09+' '+round10+' '+round11+' '+round12+' '+round13+' '+round14+' '+round15+' '+round16+' '+round17+' '+round18+' '+round19+'');

var image0 = document.createElementNS(svgColor.namespaceURI, 'image');
    image0.setAttributeNS(null, 'x', 0);
    image0.setAttributeNS(null, 'y', 0);
    image0.setAttributeNS(null, 'width', 500);
    image0.setAttributeNS(null, 'height', 500);
    image0.setAttributeNS(null, 'filter', 'url(#color)');
    image0.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKshQbKMPDHPtz-WL6C5RqywuKwinqxAOI7JqIJz3EVCn0VhvEzeZ1oCZ-xUnSI7rCrTE5Dn4OTAuL6bhznXxiT2HQ6sW1dW4EHjbFqG8aRNUu2qt_H0JcY-yNoBieMgmHjXuJUofo_ibG/s1600/paint+4.jpeg');

var rect0 = document.createElementNS(svgColor.namespaceURI, 'rect');
    rect0.setAttributeNS(null, 'x', 0);
    rect0.setAttributeNS(null, 'y', 0);
    rect0.setAttributeNS(null, 'width', 500);
    rect0.setAttributeNS(null, 'height', 500);
    rect0.setAttributeNS(null, 'fill', 'white');

svgColor.appendChild(rect0);
svgColor.appendChild(defs);
filter.appendChild(feColorMatrix);
defs.appendChild(filter);
svgColor.appendChild(image0);

document.getElementById("c00").innerHTML = round00;
document.getElementById("c01").innerHTML = round01;
document.getElementById("c02").innerHTML = round02;
document.getElementById("c03").innerHTML = round03;
document.getElementById("c04").innerHTML = round04;
document.getElementById("c05").innerHTML = round05;
document.getElementById("c06").innerHTML = round06;
document.getElementById("c07").innerHTML = round07;
document.getElementById("c08").innerHTML = round08;
document.getElementById("c09").innerHTML = round09;
document.getElementById("c10").innerHTML = round10;
document.getElementById("c11").innerHTML = round11;
document.getElementById("c12").innerHTML = round12;
document.getElementById("c13").innerHTML = round13;
document.getElementById("c14").innerHTML = round14;
document.getElementById("c15").innerHTML = round15;
document.getElementById("c16").innerHTML = round16;
document.getElementById("c17").innerHTML = round17;
document.getElementById("c18").innerHTML = round18;
document.getElementById("c19").innerHTML = round19;

}
</script>