nothing: 2019

mercredi 4 décembre 2019

feColorMatrix

tiny basis

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Interesting Title</title>
<link rel="icon" href="https://image.flaticon.com/icons/png/512/71/71339.png" type="image/png">
<style>
html,body{
height:100%;
}

html,body,div,canvas,svg{
margin:0;
padding:0;
}

body{
font-family:sans-serif;
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.2)),url("https://img3.stockfresh.com/files/t/tashatuvango/m/32/3971276_stock-photo-green-grass-seamless-tileable-texture.jpg");
overflow:hidden;
}

#div1{
position:fixed;
top:0;
right:0;
background-color:rgba(0,0,0,0.5);
color:#fff;
padding:10px 20px;
text-align:right;
}

#svg1{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
</style>
</head>

<body onmousemove="coor1(event)">
<canvas id="can1"></canvas>
<div id="div1"></div>

<script>
var ww=window.innerWidth;
var wh=wh=window.innerHeight;
var mx=ww/2;
var my=wh/2;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var div1=document.getElementById("div1");
var col1="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.3)";
var sx=0;
var sy=0;

can1.width=ww;
can1.height=wh;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1;

function coor1(event){
mx=event.pageX;
my=event.pageY;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1+"<br>mouse x: "+mx+" y: "+my;
}

function drawCanvas(){
ctx.fillRect(0,0,100,100);
}

drawCanvas();
</script>
</body>
</html>

vendredi 29 novembre 2019

basis

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Interesting Title</title>
<link rel="icon" href="https://image.flaticon.com/icons/png/512/71/71339.png" type="image/png">
<style>
html,body{
height:100%
}

html,body,div,canvas,svg {
margin:0;
padding:0;
}

body{
font-family:sans-serif;
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url("https://www.transparenttextures.com/patterns/concrete-wall.png");
overflow:hidden;
}

#div1{
position:fixed;
top:0;
right:0;
background-color:rgba(0,0,0,0.5);
color:#fff;
padding:10px 20px;
text-align:right;
}

#svg1{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

</style>
</head>

<body onmousemove="coor1(event)">
<svg id="svg1"></svg>
<canvas id="can1"></canvas>
<div id="div1"></div>

<script>
var ww,wh,mx,my;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var div1=document.getElementById("div1");
var svg1=document.getElementById("svg1");
var cir1=document.createElementNS("http://www.w3.org/2000/svg","circle");
var col1="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.3)";

window.addEventListener("resize",canwh);

function canwh(){
ww=window.innerWidth;
wh=window.innerHeight;
can1.width=ww;
can1.height=wh;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1;
drawSvg();
drawCanvas();
}

function coor1(event){
mx=event.pageX;
my=event.pageY;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1+"<br>mouse x: "+mx+" y: "+my;
}

function drawSvg(){
cir1.setAttribute("cx",ww/2);
cir1.setAttribute("cy",wh/2);
cir1.setAttribute("r",ww/8);
cir1.style.fill=col1;
svg1.appendChild(cir1);
}

function drawCanvas(){
ctx.clearRect(0,0,ww,wh);
ctx.beginPath();
ctx.arc(ww/2, wh/2,ww/16,0,2*Math.PI,false);
ctx.fillStyle="rgba(0,0,0,1)";
ctx.fill();
}

canwh();
drawSvg();
drawCanvas();
</script>
</body>
</html>

jeudi 28 novembre 2019

js animation & table

<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
overflow-y:scroll;
height:100%;
}

#div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}

::-webkit-scrollbar{
width:0px;
}

table,td{
border:1px solid white;
border-collapse: collapse;
padding:2px;
}

</style>
</head>
<body>
<canvas id="can1" onmousedown="dir1()" onmousemove="coor1(event)"></canvas>
<div id="div1"></div>
<div id="div2">
<table>
<tbody>
<tr><td>squares</td><td><input type="number" id="nb1" max="100" min="1" value="5"></td></tr>
<tr><td>px</td><td><input type="number" id="nb2" max="100" min="1" value="10"></td></tr>
<tr><td>refresh</td><td><input type="checkbox" id="cle1" name="cle1"></td></tr>
</tbody>
</table>
<input type="button" value="Go" onmousedown="count1()">
</div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var nb2=document.getElementById("nb2");
var cle1=document.getElementById("cle1");
var i=0;var va2;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var col1=[];
var sp1=1;
var results1=[];
var nb=nb1.value;
var act1=0;
var side=3;
var trio=0;
var mx=Math.round(ww/side)*side;
var my=Math.round(wh/side)*side;

function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
div1.height=wh;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
col1=[];
results1=[];
nb=nb1.value;
va2=nb2.value;
side=va2;

for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/side)*side);
recty.push(Math.round(Math.random()*wh/side)*side);
rectdx.push(Math.round(Math.random()*ww/side)*side);
rectdy.push(Math.round(Math.random()*wh/side)*side);
col1.push("rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.5)");
results1.push(rectx[i]+" "+recty[i]+" "+col1[i]);
}

can1.width=ww;
can1.height=wh;

function cloud(){
results1=[];
for(var h=0;h<nb;h++){
results1.push("<tr><td>"+rectx[h]+"</td><td>"+recty[h]+"</td><td>"+col1[h]+"</td></tr>");
div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh+"<br>cursor x: "+mx+" y: "+my+"<br><table><tbody>"+results1.join("</tr><tr>")+"</tbody></table>";
}

if(cle1.checked){ctx.clearRect(0,0,ww,wh);}

trio++;
for(var i=0;i<nb;i++){
ctx.beginPath();
ctx.fillStyle=col1[i];
ctx.fillRect(rectx[i],recty[i],side,side);

if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+side/sp1;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-side/sp1;}

if(recty[i]<rectdy[i]){recty[i]=recty[i]+side/sp1;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-side/sp1;}
if(rectx[i]==rectdx[i]&&recty[i]==rectdy[i]){
rectdx[i]=Math.round(Math.random()*ww/side)*side;rectdy[i]=Math.round(Math.random()*wh/side)*side;}
}}

if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,40);
act1++;
}

count1();

function coor1(event){
mx=Math.round(event.pageX/side)*side;
my=Math.round(event.pageY/side)*side;
}

function dir1(){
ww=window.innerWidth;
wh=window.innerHeight;
rectdx=[];
rectdy=[];
for(i=0;i<nb;i++){
rectdx.push(mx);
rectdy.push(my);
}}
</script>
</body>
</html>

mardi 26 novembre 2019

rect[i]

<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
overflow-y:scroll;
height:100%;
}

#div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}

::-webkit-scrollbar{
width:0px;
}

#span1{
font-size:14px;
}
</style>
</head>
<body>
<canvas id="can1" onmousedown="dir1()" onmousemove="coor1(event)"></canvas>
<div id="div1"></div>
<div id="div2">
number of squares: <input type="number" id="nb1" min="1" max="1000" value="1" onmouseup="count1()" onkeyup="count1()">
size: <input type="number" id="nb2" min="1" max="100" value="10" onmouseup="count1()" onkeyup="count1()">
refresh: <input type="checkbox" id="cle1" name="cle1">
</div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var nb2=document.getElementById("nb2");
var cle1=document.getElementById("cle1");
var i=0;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var col1=[];
var sp1=1;
var results1=[];
var nb=nb1.value;
var act1=0;
var side=3;
var trio=0;
var mx=Math.round(ww/side)*side;
var my=Math.round(wh/side)*side;

function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
div1.height=wh;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
col1=[];
results1=[];
nb=nb1.value;
va2=nb2.value;
side=va2;

for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/side)*side);
recty.push(Math.round(Math.random()*wh/side)*side);
rectdx.push(Math.round(Math.random()*ww/side)*side);
rectdy.push(Math.round(Math.random()*wh/side)*side);
col1.push("rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.5)");
results1.push(rectx[i]+" "+recty[i]+" "+col1[i]);
}

can1.width=ww;
can1.height=wh;

function cloud(){
results1=[];
for(var h=0;h<nb;h++){
results1.push(rectx[h]+" "+recty[h]+" "+col1[h]);
div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh+"<br>cursor x: "+mx+" y: "+my+"<br><span id=\"span1\">"+results1.join("<br>")+"</span>";
}

if(cle1.checked){ctx.clearRect(0,0,ww,wh);}

trio++;
for(var i=0;i<nb;i++){
ctx.beginPath();
//ctx.arc(rectx[i],recty[i],Math.random()*side/2,0,2*Math.PI);
////ctx.arc(rectx[i],recty[i],side/2,0,2*Math.PI);
ctx.fillStyle=col1[i];
ctx.fillRect(rectx[i],recty[i],side,side);
/*ctx.lineWidth=2;
ctx.strokeStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
ctx.stroke();*/
//ctx.fillStyle="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*100)/100+")";
////ctx.fill();

if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+side/sp1;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-side/sp1;}

if(recty[i]<rectdy[i]){recty[i]=recty[i]+side/sp1;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-side/sp1;}
if(rectx[i]==rectdx[i]&&recty[i]==rectdy[i]){
rectdx[i]=Math.round(Math.random()*ww/side)*side;rectdy[i]=Math.round(Math.random()*wh/side)*side;}
}}

if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,40);
act1++;
}

count1();

function coor1(event){
mx=Math.round(event.pageX/side)*side;
my=Math.round(event.pageY/side)*side;
}

function dir1(){
ww=window.innerWidth;
wh=window.innerHeight;
rectdx=[];
rectdy=[];
for(i=0;i<nb;i++){
rectdx.push(mx);
rectdy.push(my);
}
}
</script>
</body>
</html>

jeudi 21 novembre 2019

sparks

<!doctype html>
<html lang="fr">
<head
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:fixed;
text-align:right;
top:0;
right:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}

#div2{
position:fixed;
text-align:left;
bottom:0;
left:0;
padding:10px;
background-color:rgba(0,0,0,0.5);
color:#fff;
font-family:arial;
font-size:14px;
}
</style>
</head>
<body>
<canvas id="can1" onmousedown="dir1()" onmousemove="coor1(event)"></canvas>
<div id="div1"></div>
<div id="div2">number of circles: <input type="number" id="nb1" min="1" max="1000" value="1" onmouseup="count1()"></div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var can1=document.getElementById("can1");
var nb1=document.getElementById("nb1");
var i=0;
var ctx=can1.getContext("2d");
var rectx=[];
var recty=[];
var rectdx=[];
var rectdy=[];
var nb=nb1.value;
var act1=0;
//var side=Math.round(Math.random()*100);
var side=10;
var trio=0;
var mx=Math.round(ww/20)*10;
var my=Math.round(wh/20)*10;

function count1(){
ww=window.innerWidth;
wh=window.innerHeight;
div1=document.getElementById("div1");
div2=document.getElementById("div2");
can1=document.getElementById("can1");
nb1=document.getElementById("nb1");
i=0;
ctx=can1.getContext("2d");
rectx=[];
recty=[];
rectdx=[];
rectdy=[];
nb=nb1.value;

for(i=0;i<nb;i++){
rectx.push(Math.round(Math.random()*ww/side)*side);
recty.push(Math.round(Math.random()*wh/side)*side);
rectdx.push(Math.round(Math.random()*ww/side)*side);
rectdy.push(Math.round(Math.random()*wh/side)*side);
}
can1.width=ww;
can1.height=wh;

function cloud(){

div1.innerHTML="window.innerWidth: "+ww+"<br>window.innerHeight: "+wh+"<br>cursor x: "+mx+" y: "+my;

ctx.clearRect(0,0,ww,wh);
trio++;
for(var i=0;i<nb;i++){
ctx.beginPath();
ctx.arc(rectx[i],recty[i],Math.random()*side/2,0,2*Math.PI);
ctx.lineWidth=0.5;
ctx.strokeStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
ctx.stroke();
ctx.fillStyle="rgba(255,255,255,"+Math.round(Math.random()*100)/100+")";
//ctx.fillStyle="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*100)/100+")";
ctx.fill();

if(rectx[i]<rectdx[i]){rectx[i]=rectx[i]+side/4;}
if(rectx[i]>rectdx[i]){rectx[i]=rectx[i]-side/4;}

if(recty[i]<rectdy[i]){recty[i]=recty[i]+side/4;}
if(recty[i]>rectdy[i]){recty[i]=recty[i]-side/4;}
if(rectx[i]==rectdx[i]&&recty[i]==rectdy[i]){
rectdx[i]=Math.round(Math.random()*ww/side)*side;rectdy[i]=Math.round(Math.random()*wh/side)*side;}
}}

if(act1>0){clearIntervarl(int1);}
var int1=setInterval(cloud,40);
act1++;
}

count1();

function coor1(event){
mx=Math.round(event.pageX/side)*side;
my=Math.round(event.pageY/side)*side;
}

function dir1(){
ww=window.innerWidth;
wh=window.innerHeight;
rectdx=[];
rectdy=[];
for(i=0;i<nb;i++){
rectdx.push(mx);
rectdy.push(my);
}
}
</script>
</body>
</html>

canvas array for coordinates

samedi 16 novembre 2019

RGB snow

mercredi 13 novembre 2019

RGB circles

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>RGB circles</title>
<style>
html,body{
height:100%;
margin:0;
}
#div1{
border-radius: 10px;
position:fixed;
top:0;
right:0;
margin:10px;
padding:10px;
text-align:right;
font-family:monospace;
background-color:rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<canvas id="can1"></canvas>
<div id="div1"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var r=Math.round(Math.random()*255);
var g=Math.round(Math.random()*255);
var b=Math.round(Math.random()*255);
var nr=Math.round(Math.random()*255);
var ng=Math.round(Math.random()*255);
var nb=Math.round(Math.random()*255);

function kulr(){
if(r<nr){r++};if(r>nr){r--};
if(g<ng){g++};if(g>ng){g--};
if(b<nb){b++};if(b>nb){b--};
if(r==nr&&g==ng&&b==nb){nr=Math.round(Math.random()*255);ng=Math.round(Math.random()*255);nb=Math.round(Math.random()*255);};
ww=window.innerWidth;
wh=window.innerHeight;
can1.width=ww;
can1.height=wh;
ctx.fillStyle="rgb("+r+","+g+","+b+")";
ctx.fillRect(0,0,ww,wh);
ctx.strokeStyle="rgb(255,0,0)";
ctx.beginPath();
ctx.arc(ww/2, wh/2,r,0,2*Math.PI);
ctx.stroke();
ctx.strokeStyle="rgb(0,255,0)";
ctx.beginPath();
ctx.arc(ww/2, wh/2,g,0,2*Math.PI);
ctx.stroke();
ctx.strokeStyle="rgb(0,0,255)";
ctx.beginPath();
ctx.arc(ww/2, wh/2,b,0,2*Math.PI);
ctx.stroke();
div1.innerHTML="canvas width: "+ww+" height: "+wh+"<br>current colour red: "+r+" green: "+g+" blue: "+b+"<br>target colour red: "+nr+" green: "+ng+" blue: "+nb;
}

setInterval(kulr,100);
</script>
</body>
</html>

vendredi 8 novembre 2019

walk²

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Walk</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
background-color:royalblue;
overflow:hidden;
}
#div1{
position:absolute;
top:0;
right:0;
}
</style>
</head>

<body>
<canvas id="can1"></canvas>
<div id="div1"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var div1=document.getElementById("div1");
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var img=new Image();
var x1=0;
var x2=0;
var y1=0;
var y2=Math.round(wh/2)-70;
var step=10;

can1.setAttribute("width",ww);
can1.setAttribute("height",wh);
img.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPtF102cho3tEC4eoPtdA0Cj7AfssN6TWJAMMX77uAZG_FPv9Hi7HwDKHQQ0R3mTpKH5eoRUKnLFXu3fumfr27RtWIIkqapCbaHEpue7RMsbPB4OReNU8ZhslBGAnxvkF-Yz9Iq4q-A/s1600/sprite.png";

img.addEventListener("load",function(){
ctx.drawImage(img,0,0,90,140,x2,y2,90,140);

document.addEventListener('keydown', function(event){
if(event.keyCode==39){

y1=0;
if(x1>630){x1=0};
if(x2>ww+90){x2=-90};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,90,140,x2,y2,90,140);
x1=x1+90;
x2=x2+step;
};

if(event.keyCode==37){
y1=140;
if(x1<0){x1=630};
if(x2<-90){x2=ww+90};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,90,140,x2,y2,90,140);
x1=x1-90;
x2=x2-step;
};

});

},false);

function display(){
div1.innerHTML=x1+" "+y1+" "+x2+" "+y2+" "+step;
}

setInterval(display,100)
</script>
</body>
</html>

mercredi 6 novembre 2019

walk

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#div1{
position:absolute;
top:0;
right:0;
}
</style>
</head>

<body>
<canvas id="can1"></canvas>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var img=new Image();
var x1=0;
var x2=0;
var y1=256;
var y2=0;
var step=6;

can1.setAttribute("width",ww);
can1.setAttribute("height",wh);
img.src="https://opengameart.org/sites/default/files/platformer_sprites_base.png";

img.addEventListener("load",function(){
ctx.drawImage(img,0,512,64,64,x2,y2,64,64);

document.addEventListener('keydown', function(event){
if(event.keyCode==39){
if(x1>448){x1=0};
if(x2>ww){x2=0};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,64,64,x2,y2,64,64);
x1=x1+64;
x2=x2+step;
};

if(event.keyCode==37){
if(x1>448){x1=0};
if(x2>ww){x2=0};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x1,y1,64,64,x2,y2,64,64);
x1=x1+64;
x2=x2-step;
};

});
},false);
</script>
</body>
</html>

jeudi 31 octobre 2019

halloween bookmarklet

halloween!

samedi 26 octobre 2019

jeudi 24 octobre 2019

Run!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#div1{
position:absolute;
top:0;
right:0;
}
</style>
</head>

<body>
<canvas id="can1"></canvas>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var img=new Image();
var x=0;
var x2=0;
can1.setAttribute("width",ww);
can1.setAttribute("height",wh);
img.addEventListener("load",function(){
setInterval(run,50);
},false);
img.src="http://social.msdn.microsoft.com/Forums/getfile/167649";
function run(){
if(x>275){x=0};
if(x2>ww){x2=0};
ctx.clearRect(0,0,ww,wh);
ctx.drawImage(img,x,0,55,76,x2,wh/2-76,110,152);
x=x+55;
x2=x2+18;
};
</script>
</body>
</html>
</html>

mercredi 9 octobre 2019

Pumpkin

<!doctype html>

<head>

<style>

html,body{

height:100%;

margin:0;

}

#svg1{

width:100%;

height:100%;

}

body{

background:grey;

}

#div1{

position:absolute;

top:0;

right:0;

font-family:sans-serif;

font-size:16px;

}

</style>

</head>

<body>

</svg>

var ww=window.innerWidth;

var wh=window.innerHeight;

var div1=document.getElementById("div1");

var svg1=document.getElementById("svg1");

var cit=document.getElementById("cit");

var mx=Math.round(ww/2);

var my=Math.round(wh/2);

var cx=Math.round(ww/2)-25;

var cy=Math.round(wh/2)-30;

cit.setAttribute("x",cx);

cit.setAttribute("y",cy);

function Mmov(e){

mx=e.clientX;

my=e.clientY;

div1.innerHTML=ww+" "+wh+"<br>"+mx+" "+my+"<br>"+cx+" "+cy;

}

document.body.onmousemove=Mmov;

function Cmov(){

if(cx+25<mx){cx++};

if(cx+25>mx){cx--};

if(cy+30<my){cy++};

if(cy+30>my){cy--};

cit.setAttribute("x",cx);

cit.setAttribute("y",cy);

}

setInterval(Cmov,10);

function Ceat(){

}

</script>

</body>

</html>

samedi 5 octobre 2019

Dark Tower

<html lang="fr">
<head>
<meta charset="utf-8">
<title>The Dark Tower</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow-x:hidden;
}
#svg1{
width:100%;
height:6000px;
}
#title{
font-family:sans-serif;
font-size:20px;
fill:white;
}
#div1{
font-family:sans-serif;
font-size:20px;
color:#fff;
position:fixed;
top:10;
right:10;
}

</style>
</head>
<body>

<svg id="svg1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="black" />
<stop offset="25%" stop-color="darkblue" />
<stop offset="75%" stop-color="royalblue" />
<stop offset="100%" stop-color="lightblue" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="green" />
<stop offset="2%" stop-color="saddlebrown" />
<stop offset="90%" stop-color="black"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
<pattern id="pat1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrI5TySUtyjBIxOuyk-yYEKtML3euVqIDQg16-0GsqPuYokT0YnktXJgVM1UF5NYyLIYM7-9zb-7_dqY-NOnX3mhBNpMTSP9yIJTp3fdi4fV0nlA7r84XjTCkNqj7-QY8TzMSoVcvg3A/s1600/stones.png" x="0" y="0" width="100" height="100"></image>
</pattern>
</defs>

<rect width="100%" height="50%" fill="url(#grad1)"/>
<rect y="50%" width="100%" height="50%" fill="url(#grad2)"/>
<text x="10" y="30" id="title">The Dark Tower</text>

<g id="gf" transform="translate(0 0)">
<rect x="0" y="2700" width="400" height="300" fill="url(#pat1)" stroke-width="2" stroke="black" rx="20" ry="20"/>
<rect x="20" y="2720" width="360" height="260" fill="black" rx="20" ry="20" opacity="0.9"/>
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4rK8cYKmZTZJLK-8r_2VPSxE6p1pkLYwQ_UKcI2wazcVleEvg5SEAvsN_UOxfdIzSV-GNOOyv3ZRz6SoMFeyDWMxHusrRiX_58UmeFy7NzwBYaQu4cUDP59tAkS1PjBan0N8jMKI_HQ/s1600/gob1.gif" width="200" height="200" x="100" y="2780" id="gob1"/>
</g>

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gf" transform="translate(0 -300)" id="1f" opacity="0"/>
</svg>

<div id="div1"></div>

<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var mx,my;
var i=0;
var gob1=document.getElementById("gob1");
var div1=document.getElementById("div1");
var gf=document.getElementById("gf");
gf.setAttribute("transform","translate("+((ww/2)-200)+" 0)");

function mouseClick(e){
mx=e.clientX;
my=e.clientY;
div1.innerHTML=mx+" "+my;
if(i==1){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzKBzDlW1BaLA5TdNtrmqcYbALbmxjamZ-pYT0RNQGtzftAFNFEdKRIPXmUSAO5ymCaw8AxH7p7i589uSJiompyIS15zNTXOx4YSiCNEJdiMQXxQSKv_OQZQsP1ScBEeHEJJZTCZBKg/s1600/gob3.gif");i++}
if(i==0){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9mNT3P4H5z5HPLKPSNfP288qwcwMVSoLT1BbRQWal6JIrl5p_IaRrkTf5vwfo3D0qX4_cgce4RiFZTRWjnlzfjX6P9-ogDG_MUoXPLJwAKa6zfjRPHjVdZcqyCrls3fnSTEtyVS-Ng/s1600/gob2.gif");i++}
}

gob1.onclick=mouseClick;
</script>
</body>
</html>

samedi 21 septembre 2019

rotations

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Demo</title>

<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
}
#svg1{
width:100%;
height:100%;
}
#div1{
position:absolute;
top:0;
left:0;
font-family:sans-serif;
font-size:8px;
}
</style>

<body>
<div id="div1"></div>
<svg id="svg1">
</svg>

<script>
var ww=Math.round(window.innerWidth);
var wh=Math.round(window.innerHeight);
var svg1=document.getElementById("svg1");
var div1=document.getElementById("div1");
var i;

ww=Math.round(window.innerWidth);
wh=Math.round(window.innerHeight);
div1.innerHTML="window size : "+ww+" x "+wh;

for(i=0;i<Math.round(ww/20);i++){
var c=document.createElementNS(svg1.namespaceURI,"circle");
c.setAttributeNS(null,"cx",Math.round(ww/2)+(i*10));
c.setAttributeNS(null,"cy",Math.round(wh/2));
c.setAttributeNS(null,"r",10);
c.setAttributeNS(null,"fill","#"+Math.round(0xFFFFFF * Math.random()).toString(16));
c.setAttributeNS(null,"id","c"+i);

var a=document.createElementNS(svg1.namespaceURI,"animateTransform");
a.setAttributeNS(null,"attributeName","transform");
a.setAttributeNS(null,"attributeType","xml");
a.setAttributeNS(null,"type","rotate");
a.setAttributeNS(null,"values","0 "+Math.round(ww/2)+" "+Math.round(wh/2)+";360 "+Math.round(ww/2)+" "+Math.round(wh/2));
a.setAttributeNS(null,"dur",(100-i)+"s");
a.setAttributeNS(null,"repeatCount","indefinite");

svg1.appendChild(c);
c.appendChild(a);
}

</script>
</body>
</head>
</html>