nothing: novembre 2019

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>