A Pen By
youya66

` ````
<main class="main">
<canvas id="canvas"></canvas>
</main>
```

` ````
(function(){
let $ = {
width: 0,
height: 0
};
// dispach add removeを追加
let store = [];
let width = $.width = 480;
let height = $.height = 480;
let canvas;
let ctx;
let temp_canvas = document.createElement("canvas");
let temp_ctx = temp_canvas.getContext("2d");
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
const NUMBER_OF_LARD = 10;
const MAX_RADIUS = 98 / 0.7;
const MIN_RADIUS = 21 / 0.7;
const THRESHOLD = 150;
document.addEventListener("DOMContentLoaded", function() {
setup();
});
function setup() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = temp_canvas.width = width;
canvas.height = temp_canvas.height = height;
init();
draw();
}
function init(){
for(let i = 0; i < NUMBER_OF_LARD; i+=1){
let radius = Math.floor(Math.random()*(MAX_RADIUS+1-MIN_RADIUS)+MIN_RADIUS);
let x = Math.floor(Math.random()*(width+1-(radius*2))+radius);
let y = Math.floor(Math.random()*(height+1-(radius*2))+radius);
let lard = new Lard({x:x, y:y},radius, temp_ctx);
store.push(lard);
}
}
function draw(){
requestAnimationFrame(draw);
temp_ctx.clearRect(0,0, width, height);
for(let i = 0, iz = store.length; i < iz; i += 1){
store[i].draw();
}
let imageData = temp_ctx.getImageData(0,0,width,height);
let pix = imageData.data;
for(let i = 0, iz = pix.length; i < iz; i+=4){
if(pix[i+3] < THRESHOLD){
pix[i+3] = 0;
}else{
pix[i+3] = 255
}
}
ctx.putImageData(imageData, 0, 0);
}
function rotate_to_point(n, m){
let distance_x = n.x - m.x;
let distance_y = n.y - m.y;
let angle = Math.floor(Math.atan2(distance_x, distance_y) * 100) / 100;
return angle;
}
class Lard{
constructor(position, radius, ctx){
this.position = position;
this.radius = radius;
this.ctx = ctx;
this.is_graunding = false;
this.is_separating = false;
this.is_independent = true;
this.vx = ((Math.random() * 2 - 1) >= 0)? 1: -1;
this.vx *= Math.floor((Math.random() * 3) + 1);
this.vy = ((Math.random() * 2 - 1) >= 0)? 1: -1;
this.vy *= Math.floor((Math.random() * 3) + 1);
}
draw(){
let p = this.position;
let colors = this.colors;
let radius = this.radius;
// グラデーション
this.ctx.beginPath();
this.grad = this.ctx.createRadialGradient(
p.x, p.y, 0,
p.x, p.y, this.radius
);
this.grad.addColorStop(0, "rgba(211,47,47,1)");
this.grad.addColorStop(1, "rgba(211,47,47,0)");
this.ctx.fillStyle = this.grad;
this.ctx.arc(p.x, p.y, this.radius, 0, Math.PI*2);
this.ctx.fill();
p.x += this.vx;
p.y += this.vy;
if(p.x < this.radius || p.x > $.width - this.radius){
this.vx *= -1;
}
if(p.y < this.radius || p.y > $.height - this.radius){
this.vy *= -1;
}
}
}
}())
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers