Description:
Gravity Patterns are a curious thing. On an everyday level, almost all of us experience it in such a steady, unchanging way that it vanishes from our conscious attention. From time to time we notice the change – the sudden acceleration of a lift in a tall building, or a ride in a theme park. A few people fly aircraft in such a way as to handle serious g-forces, and an even smaller handful have been in the microgravity of Earth’s orbit (or a very specific aircraft trajectory intended to mimic conditions in space). But for most of us, most of the time, it is just there as a constant part of our environment.
HTML:
<canvas id="canvas"></canvas>CSS:
body,
html {
margin: 0px;
padding: 0px;
position: fixed;
}JavaScript:
window.onload = function() {
let c = init("canvas").c,
canvas = init("canvas").canvas,
w = (canvas.width = window.innerWidth),
h = (canvas.height = window.innerHeight);
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
//initiation
function calcMass(obj) {
return 4 * Math.PI * obj.s * obj.s * obj.s / 3;
}
class body {
constructor(x, y, s, v, a) {
this.a0 = a;
this.x = x;
this.y = y;
this.tail = [{
x: this.x,
y: this.y
}];
this.s = s;
this.v0 = v;
this.v = this.v0;
this.ang = this.a0;
this.ax = this.v * Math.cos(this.ang);
this.ay = this.v * Math.sin(this.ang);
this.vx = this.ax;
this.vy = this.ay;
this.tomove = true;
}
reset() {
// this.x = w/2;
// this.y = h/2;
// this.tail = [{
// x: this.x,
// y: this.y
// }];
// this.s = 2;
// this.v = this.v0;
// this.ang = this.a0;
// this.ax = this.v * Math.cos(this.ang);
// this.ay = this.v * Math.sin(this.ang);
// this.vx = this.ax;
// this.vy = this.ay;
this.tomove = false;
}
attract(o) {
this.dist = Math.sqrt(
Math.pow(o.x - this.x, 2) + Math.pow(o.y - this.y, 2)
);
if (this.dist > this.s + o.s) {
this.f =
G *
calcMass(this) *
calcMass(o) /
(Math.pow(o.x - this.x, 2) + Math.pow(o.y - this.y, 2));
this.ang = Math.atan2(o.y - this.y, o.x - this.x);
} else {
this.reset();
}
this.addForce(this.f, this.ang);
}
move() {
this.ax *= 0.9991;
this.ay *= 0.9991;
this.vx += this.ax * t;
this.vy += this.ay * t;
this.vx *= 0.9991;
this.vy *= 0.9991;
this.x += this.vx * t;
this.y += this.vy * t;
this.tail.push({
x: this.x,
y: this.y
});
// if (this.tail.length > 400) {
// this.tail.splice(0, 1);
// }
this.ax = 0;
this.ay = 0;
// if (this.x > w || this.x < 0 || this.y > h || this.y < 0) {
// this.reset();
// }
}
addForce(f, a) {
this.ax += f * Math.cos(a);
this.ay += f * Math.sin(a);
}
show() {
if(this.tomove){
this.move();
c.beginPath();
c.arc(this.x, this.y, this.s, 0, 2*Math.PI);
c.fillStyle = "rgba(255,255,255,0.75)";
c.fill();
}
this.len = this.tail.length;
c.beginPath();
for (let k = 0; k < this.len; k++) {
c.lineTo(this.tail[k].x, this.tail[k].y);
}
c.lineWidth = 0.2;
c.strokeStyle = "rgba(255,255,255,0.75)";
c.stroke();
}
}
let universe = [],
i = 0,
G = 6.7 * Math.pow(10,1),
t = 0.01,
atractors = [],
n = Math.floor(Math.random()*9)+1,
num = 90,
r0 = 200;
// for (let j = 0; j < 0; j++) {
// atractors.push({
// x: Math.random() * w,
// y: Math.random() * h,
// s: Math.random() * 10 + 5
// });
// }
for (let j = 0; j < n; j++) {
atractors.push({
x: w/2+r0*Math.cos(j*2*Math.PI/n),
y: h/2+r0*Math.sin(j*2*Math.PI/n),
s: 10.2
});
}
// for (i = 0; i < num; i++) {
// universe.push(new body(1, i * h / num+h/(2*num), 2, 300, 0));
// }
for (i = 0; i < num; i++) {
universe.push(new body(w/2, h/2, 2, 300, i*2*Math.PI/num+Math.PI/num));
}
function draw() {
//animation
for(let k = 0; k < 1; k++){
for (let i = 0; i < num; i++) {
for (let j = 0; j < atractors.length; j++) {
universe[i].attract(atractors[j]);
}
}
for (let j = 0; j < atractors.length; j++) {
c.beginPath();
c.arc(atractors[j].x, atractors[j].y, atractors[j].s, 0, 2 * Math.PI);
c.fillStyle = "red";
c.fill();
}
for (let i = 0; i < num; i++) {
if (atractors.length == 0) {
universe[i].move();
}
universe[i].show();
}
}
}
let mouse = {};
let last_mouse = {};
canvas.addEventListener(
"mousemove",
function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
},
false
);
canvas.addEventListener(
"click",
function(e) {
atractors.push({ x: mouse.x, y: mouse.y, s: Math.random() * 10 + 5 });
},
false
);
function init(elemid) {
let canvas = document.getElementById(elemid),
c = canvas.getContext("2d");
return { c: c, canvas: canvas };
}
window.requestAnimFrame = function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback);
}
);
};
function loop() {
window.requestAnimFrame(loop);
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
draw();
}
window.addEventListener("resize", function() {
(w = canvas.width = window.innerWidth),
(h = canvas.height = window.innerHeight);
loop();
});
loop();
setInterval(loop, 1000 / 60);
};HTML,CSS and JavaScript Code Snippets On, AllWebCodes.com
Done! And Enjoy Gravity patterns Snippets
Gravity Patterns in HTML, CSS And JavaScript