!!ラインアートを背景にする
html5にてCanvasがサポートされました。CanvasとJavaScriptで アニメーションを実現できます。アニーメーションをWEBの背景に出来ます。 あちこちのサイトを参照し[サンプル|http://www21051ue.sakura.ne.jp/lineArt/lineArt.html]を作ってみました。
[sample.html]
Line Art
!参照サイト
*[HTML5.jp - 次世代 HTML 標準 HTML5 情報サイト|http://www.html5.jp/]
*[背景をCanvasにする|https://qiita.com/mohayonao/items/e96e68aedc04a37f0c6d]
*[LINE ART|http://jsdo.it/overflowfl/uqxo]
!背景をCanvasにする
https://qiita.com/mohayonao/items/e96e68aedc04a37f0c6d
[lineArt.css]
#canvas {
display: block;
position:fixed; top:0; left:0; width:100%; height: 100%;
}
#body { position:absolute; top:20; left:20; color: #FFF;}
!ラインアート
[lineArt.js]
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
var W2 = W * 0.5; // LINEを描画する範囲（最下）
var H2 = H * 0.4; // （右端)
canvas.width = W;
canvas.height = H;
var particles = [];
for(var i = 0; i < 4; i++){ // 頂点の数
particles.push(new particle());
}
function particle(){
//location on the canvas
this.location = {
x: Math.random()*W2, y: Math.random()*H2
};
this.radius = 0;
this.speed = 2;
this.count = 0;
this.random = 0;
this.angle = Math.random()*360;
this.rgba = randomColor();
}
function randomColor(){
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);
var a = Math.random();
return "rgba("+r+", "+g+", "+b+", "+a+")";
}
function draw(){
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(20, 20, 20, 0.2)";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++){
var p = particles[i];
p.count = (p.count + 1) % (Math.round(Math.random()*5) + 8);
if(p.count == 0){
p.random = Math.random()*8 - 4;
p.rgba =randomColor();
}
ctx.fillStyle = "black";
ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
for(var n = i+1; n < particles.length; n++){
var p2 = particles[n];
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(p.location.x, p.location.y);
ctx.lineTo(p2.location.x, p2.location.y);
ctx.strokeStyle = p.rgba;
ctx.stroke();
}
p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180) + p.random;
p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180) + p.random;
if(p.location.x < 0) {
p.location.x = 0;
if(p.angle<180){
p.angle = 180 - p.angle;
} else {
p.angle = 360 - (p.angle - 180);
}
}
if(p.location.x > W2) {
p.location.x = W2;
if(p.angle<180){
p.angle = 180 - p.angle;
} else {
p.angle = 180 + (360 - p.angle);
}
}
if(p.location.y < 0) {
p.location.y = 0;
if(p.angle<180){
p.angle = 180 - p.angle;
} else {
p.angle = 180 + (180 - p.angle);
}
}
if(p.location.y > H2) {
p.location.y = H2;
if(p.angle>270){
p.angle = 360 - p.angle;
} else {
p.angle = 180 - (p.angle - 180);
}
}
}
}
setInterval(draw, 50);
};
![正七角形を描画する|http://www21051ue.sakura.ne.jp/lineArt/polygon.html]メモ
[デモ|http://www21051ue.sakura.ne.jp/lineArt/polygon.html]
*多角形を書くために頂点の位置を計算する。
**半径１の円を考えると、座標 ( Cos(radian) , Sin(radian) ) が頂点になる([【Unity】Texture2Dに多角形を描く|https://blog.narumium.net/2017/02/03/%E3%80%90unity%E3%80%91texture2d%E3%81%AB%E5%A4%9A%E8%A7%92%E5%BD%A2%E3%82%92%E6%8F%8F%E3%81%8F/]より)
*ラジアン
**180°= π[rad]
**正n角形の各頂点は、単位円の中心をn等分しているので、等分した1コ当りの中心角は
***中心角 = 2π÷n
*図形の回転
**radian分回転する 1°= π ÷ 180
***x1 = x * cos(radian) - y * sin(radian);
***y1 = x * sin(radian) + y * cos(radian);
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
var W2 = W * 0.5; // LINEを描画する範囲（最下）
var H2 = H * 0.4; // （右端)
canvas.width = W;
canvas.height = H;
var cx = W2/2;
var cy = H2/2;
var r = W2/5;
var pi = 3.141592;
var particles = [];
let n = 7;
for(var i = 0; i < n; i++){ // 頂点の数
particles.push(new particle(i,n));
}
function particle(i,n){
//頂点の座標 (頂点を天辺から始めたい場合は90°= (π / 2)引く
// x = cos(i * 2 * π / n - (π / 2))
// y = sin(i * 2 * π / n - (π / 2))
this.location = {
x: r*Math.cos(i*2*pi/n),
y: r*Math.sin(i*2*pi/n)
};
this.count = 0;
this.random = 0;
this.angle = Math.random()*360;
this.rgba = randomColor();
}
function randomColor(){
let r = Math.round(Math.random()*255);
let g = Math.round(Math.random()*255);
let b = Math.round(Math.random()*255);
let a = Math.random();
return "rgba("+r+", "+g+", "+b+", "+a+")";
}
function draw(){
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(20, 20, 20, 0.2)";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++){
var p = particles[i];
p.count = (p.count + 1) % (Math.round(Math.random()*5) + 8);
if(p.count == 0){
p.random = Math.random()*8 - 4;
p.rgba =randomColor();
}
ctx.fillStyle = "black";
ctx.fillRect(p.location.x, p.location.y, 0, 0);
for(var n = i+1; n < particles.length; n++){
var p2 = particles[n];
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(p.location.x + cx, p.location.y + cy);
ctx.lineTo(p2.location.x + cx, p2.location.y + cy);
ctx.strokeStyle = p.rgba;
ctx.stroke();
}
// 1°分時計回りに回転する
let rd = 1 * pi / 180.0;
let x1 = p.location.x * Math.cos(rd) - p.location.y * Math.sin(rd);
let y1 = p.location.x * Math.sin(rd) + p.location.y * Math.cos(rd);
p.location.x = x1;
p.location.y = y1;
}
}
setInterval(draw, 50);
};
!perl de canvas
perl de Heptagon (七角形)