lissage_optique.html

lissage_optique.html

Par Lilla 9000 dans experience.html le 1 Mai 2022 à 18:26

<!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"> 

<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"> 

<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"> 

<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"> 

<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"> 

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>
Commentaires

Aucun commentaire pour le moment

Suivre le flux RSS des commentaires

Ajouter un commentaire

Nom / Pseudo :

E-mail (facultatif) :

Site Web (facultatif) :

Commentaire :

Me prévenir par mail en cas de réponse

lissage_optique.html

Commentaires