lissage_optique.html

<!DOCTYPE html>  

<html>

    <head>

 <script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script> 

 <link rel="stylesheet" type="text/css" href="style.css" />

 <script src="canvas.js"></script>

    </head>

    <body>

<div id="container">

     <div class="element">

        <div class="sliders yui3-skin-sam">     <!--first square -->

    <dl>

        <dt>R: <span id="r-val" class="val"></span></dt><dd id="r-slider"></dd>

        <dt>G: <span id="g-val" class="val"></span></dt><dd id="g-slider"></dd>

        <dt>B: <span id="b-val" class="val"></span></dt><dd id="b-slider"></dd>

    </dl>

</div>

<div id="one" class="color"></div>

</div>

     <div class="element">

        <div class="sliders yui3-skin-sam">       <!--second square -->

    <dl>

        <dt>R: <span id="r-val2" class="val"></span></dt><dd id="r-slider2"></dd>

        <dt>G: <span id="g-val2" class="val"></span></dt><dd id="g-slider2"></dd>

        <dt>B: <span id="b-val2" class="val"></span></dt><dd id="b-slider2"></dd>

    </dl>

</div>

<div id="two" class="color"></div>

</div>

<br>

     <div class="element">

        <div class="sliders yui3-skin-sam">       <!--third square -->

    <dl>

        <dt>R: <span id="r-val3" class="val"></span></dt><dd id="r-slider3"></dd>

        <dt>G: <span id="g-val3" class="val"></span></dt><dd id="g-slider3"></dd>

        <dt>B: <span id="b-val3" class="val"></span></dt><dd id="b-slider3"></dd>

    </dl>

</div>

<div id="three" class="color"></div>

</div>

     <div class="element">

        <div class="sliders yui3-skin-sam">       <!--fourth square -->

    <dl>

        <dt>R: <span id="r-val4" class="val"></span></dt><dd id="r-slider4"></dd>

        <dt>G: <span id="g-val4" class="val"></span></dt><dd id="g-slider4"></dd>

        <dt>B: <span id="b-val4" class="val"></span></dt><dd id="b-slider4"></dd>

    </dl>

    </div>

<div id="four" class="color"></div>

</div>

</div>

<canvas id="canvas1" width="500" height="500">    <!--grid -->

Requiert un navigateur récent: Internet Explorer 9, Chrome, Firefox, Safari.

</canvas>

<div id="five" class="color">

        <div class="sliders yui3-skin-sam" id="last">

    <dl>

        <dt>R: <span id="r-val5" class="val"></span></dt><dd id="r-slider5"></dd>

        <dt>G: <span id="g-val5" class="val"></span></dt><dd id="g-slider5"></dd>

        <dt>B: <span id="b-val5" class="val"></span></dt><dd id="b-slider5"></dd>

    </dl>

</div>

</div>

        <script>

            YUI().use('slider', 'color', function(Y){

 window.onload=rectangle;

     // square1

                // sliders

    var rSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        gSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        bSlider = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        // slider values

        rVal = Y.one('#r-val'),

        gVal = Y.one('#g-val'),

        bVal = Y.one('#b-val'),

        // color chip

        color = Y.one('.color');

    // render sliders

    rSlider.render('#r-slider');

    gSlider.render('#g-slider');

    bSlider.render('#b-slider');

                // register update events

    rSlider.after('thumbMove', function(e) {

        rVal.set('text', rSlider.get('value'));

        updateColors();

    });

    gSlider.after('thumbMove', function(e) {

        gVal.set('text', gSlider.get('value'));

        updateColors();

    });

    bSlider.after('thumbMove', function(e) {

        bVal.set('text', bSlider.get('value'));

        updateColors();

    });

    // update the colors strings

    function updateColors() {

 test=0;

        var r = rSlider.get('value'),

            g = gSlider.get('value'),

            b = bSlider.get('value');

        rgbStr = Y.Color.fromArray([r,g,b], Y.Color.TYPES.RGB);

        color.setStyle('backgroundColor', rgbStr);

    }

            rectangle()

    rVal.set('text', rSlider.get('value'));

    gVal.set('text', gSlider.get('value'));

    bVal.set('text', bSlider.get('value'));

 updateColors();

 // square2

                // sliders

    var rSlider2 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        gSlider2 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        bSlider2 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        // slider values 

        rVal2 = Y.one('#r-val2'),

        gVal2 = Y.one('#g-val2'),

        bVal2 = Y.one('#b-val2'),

        // color chip  

        color2 = Y.one('.color2');

    // render sliders  

    rSlider2.render('#r-slider2');

    gSlider2.render('#g-slider2');

    bSlider2.render('#b-slider2');

                // register update events

    rSlider2.after('thumbMove', function(e) {

        rVal2.set('text', rSlider2.get('value'));

        updateColors2();

    });

    gSlider2.after('thumbMove', function(e) {

        gVal2.set('text', gSlider2.get('value'));

        updateColors2();

    });

    bSlider2.after('thumbMove', function(e) {

        bVal2.set('text', bSlider2.get('value'));

        updateColors2();

    });

    // update the colors strings

    function updateColors2() {

        var r2 = rSlider2.get('value'),

            g2 = gSlider2.get('value'),

            b2 = bSlider2.get('value');

 var bgColor = "rgb(" + r2 + "," + g2 + "," + b2 + ")";

           // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

 document.getElementById("two").style.backgroundColor = bgColor;

        //color2.setStyle('backgroundColor', rgbStr2);

    }

    rVal2.set('text', rSlider2.get('value'));

    gVal2.set('text', gSlider2.get('value'));

    bVal2.set('text', bSlider2.get('value'));

    updateColors2();

 // square3

                // sliders

    var rSlider3 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        gSlider3 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        bSlider3 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        // slider values 

        rVal3 = Y.one('#r-val3'),

        gVal3 = Y.one('#g-val3'),

        bVal3 = Y.one('#b-val3'),

        // color chip 

        color3 = Y.one('.color3');

    // render sliders 

    rSlider3.render('#r-slider3');

    gSlider3.render('#g-slider3');

    bSlider3.render('#b-slider3');

                // register update events

    rSlider3.after('thumbMove', function(e) {

        rVal3.set('text', rSlider3.get('value'));

        updateColors3();

    });

    gSlider3.after('thumbMove', function(e) {

        gVal3.set('text', gSlider3.get('value'));

        updateColors3();

    });

    bSlider3.after('thumbMove', function(e) {

        bVal3.set('text', bSlider3.get('value'));

        updateColors3();

    });

    // update the colors strings

    function updateColors3() {

        var r3 = rSlider3.get('value'),

            g3 = gSlider3.get('value'),

            b3 = bSlider3.get('value');

 var bgColor3 = "rgb(" + r3 + "," + g3 + "," + b3 + ")";

           // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

 document.getElementById("three").style.backgroundColor = bgColor3;

        //color2.setStyle('backgroundColor', rgbStr2);

    }

    rVal3.set('text', rSlider3.get('value'));

    gVal3.set('text', gSlider3.get('value'));

    bVal3.set('text', bSlider3.get('value'));

    updateColors3();

     // square4

                // sliders 

    var rSlider4 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        gSlider4 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        bSlider4 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        // slider values 

        rVal4 = Y.one('#r-val4'),

        gVal4 = Y.one('#g-val4'),

        bVal4 = Y.one('#b-val4'),

        // color chip  

        color4 = Y.one('.color4');

    // render sliders  

    rSlider4.render('#r-slider4');

    gSlider4.render('#g-slider4');

    bSlider4.render('#b-slider4');

                // register update events

    rSlider4.after('thumbMove', function(e) {

        rVal4.set('text', rSlider4.get('value'));

        updateColors4();

    });

    gSlider4.after('thumbMove', function(e) {

        gVal4.set('text', gSlider4.get('value'));

        updateColors4();

    });

    bSlider4.after('thumbMove', function(e) {

        bVal4.set('text', bSlider4.get('value'));

        updateColors4();

    });

    // update the colors strings

    function updateColors4() {

        var r4 = rSlider4.get('value'),

            g4 = gSlider4.get('value'),

            b4 = bSlider4.get('value');

 var bgColor4 = "rgb(" + r4 + "," + g4 + "," + b4 + ")";

           // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

 document.getElementById("four").style.backgroundColor = bgColor4;

        //color2.setStyle('backgroundColor', rgbStr2);

    }

    rVal4.set('text', rSlider4.get('value'));

    gVal4.set('text', gSlider4.get('value'));

    bVal4.set('text', bSlider4.get('value'));

    updateColors4();

     // square5

                // sliders 

    var rSlider5 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        gSlider5 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        bSlider5 = new Y.Slider({ min: 0, max: 255, value: Math.round(Math.random()*255) }),

        // slider values 

        rVal5 = Y.one('#r-val5'),

        gVal5 = Y.one('#g-val5'),

        bVal5 = Y.one('#b-val5'),

        // color chip 

        color5 = Y.one('.color5');

    // render sliders  (fctne)

    rSlider5.render('#r-slider5');

    gSlider5.render('#g-slider5');

    bSlider5.render('#b-slider5');

                // register update events

    rSlider5.after('thumbMove', function(e) {

        rVal5.set('text', rSlider5.get('value'));

        updateColors5();

    });

    gSlider5.after('thumbMove', function(e) {

        gVal5.set('text', gSlider5.get('value'));

        updateColors5();

    });

    bSlider5.after('thumbMove', function(e) {

        bVal5.set('text', bSlider5.get('value'));

        updateColors5();

    });

    // update the colors strings

    function updateColors5() {

        var r5 = rSlider5.get('value'),

            g5 = gSlider5.get('value'),

            b5 = bSlider5.get('value');

 var bgColor5 = "rgb(" + r5 + "," + g5 + "," + b5 + ")";

           // rgbStr2 = Y.Color.fromArray([155,22,32], Y.Color.TYPES.RGB);

 document.getElementById("five").style.backgroundColor = bgColor5;

        //color2.setStyle('backgroundColor', rgbStr2);

    }

    rVal5.set('text', rSlider5.get('value'));

    gVal5.set('text', gSlider5.get('value'));

    bVal5.set('text', bSlider5.get('value'));

    updateColors5();

            });

 document.write(test); 

function rectangle()

{

for (let i = 0; i < 500; i++) {

 for (let j = 0; j<500; j++){

  var canvas = document.getElementById("canvas1"); 

  var context = canvas.getContext("2d");

  context.beginPath();

  if (i%2 == 0 && j%2 == 0) {

     context.fillStyle=  document.getElementById("one").style.backgroundColor ;   

  }

  if (i%2 == 1 && j%2 == 0) {

     context.fillStyle=document.getElementById("two").style.backgroundColor ;   ;   

  }

    if (i%2 == 0 && j%2 == 1) {

     context.fillStyle=document.getElementById("three").style.backgroundColor ;   ;   

  }

    if (i%2 == 1 && j%2 == 1) {

     context.fillStyle=document.getElementById("four").style.backgroundColor ;   ; 

  }

  context.lineWidth="2";   

  context.rect(i,j,1,1);

  context.fill();

   var inter = setInterval(draw, 1);    

 function draw() {

 rectangle();

         }

}

}

}

        </script>

    </body>

</html>