# Gravity Points with HTML, CSS, and JavaScript

Today, We want to share with you gravity points.In this post we will show you gravity point unblocked, hear for using javascript to make a game we will give you demo and example for implement.In this post, we will learn about online html, css js editor with an example.

## Create Gravity Points using HTML CSS and JavaScript

Just created gravity-points just by using plain Html, CSS & good old JavaScript. This is also an awesome best animation where the dots are created when you click on the full screen.

Free Live Chat for Any Issue

gravity point meaning?
Today’s morden Lots of web animation that can be created using the HTML, CSS and JavaScript Animation Example. Animations are always given a valuable priority in the sector of designing.

There are the bellow Futures of “gravity points”.

• Click to add gravity point.
• Particle Num.
• Interference Between Point.
• Open Controls.

Each gravity “points” are initialized as the digits to the right of the decimal point multiplied by 1000;

Simple, a particular gravity of 1.048 is 48 points.

Gravity points = grain’s extract potential (EP) x mass (lbs) = particular gravity x volume.

Calculating for Malt Extracts:

To brew 5 gal of 1.043 gravity beer, you required 215 total gravity points (5 gal x 43 points).

## 10 Gravity Points Example

### gravity simulator Example

HTML Code

```<canvas id="c"></canvas>
<div class="info">Click to any place screen to gravity point.</div>
```

JavaScript Code

```window.requestAnimationFrame = (function(){
return  window.requestAnimationFrame       ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame    ||
window.oRequestAnimationFrame      ||
window.msRequestAnimationFrame     ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

function Vector(x, y) {
this.x = x || 0;
this.y = y || 0;
}

return new Vector(a.x + b.x, a.y + b.y);
};

Vector.sub = function(a, b) {
return new Vector(a.x - b.x, a.y - b.y);
};

Vector.scale = function(v, s) {
return v.clone().scale(s);
};

Vector.random = function() {
return new Vector(
Math.random() * 2 - 1,
Math.random() * 2 - 1
);
};

Vector.prototype = {
set: function(x, y) {
if (typeof x === 'object') {
y = x.y;
x = x.x;
}
this.x = x || 0;
this.y = y || 0;
return this;
},

this.x += v.x;
this.y += v.y;
return this;
},

sub: function(v) {
this.x -= v.x;
this.y -= v.y;
return this;
},

scale: function(s) {
this.x *= s;
this.y *= s;
return this;
},

length: function() {
return Math.sqrt(this.x * this.x + this.y * this.y);
},

lengthSq: function() {
return this.x * this.x + this.y * this.y;
},

normalize: function() {
var m = Math.sqrt(this.x * this.x + this.y * this.y);
if (m) {
this.x /= m;
this.y /= m;
}
return this;
},

angle: function() {
return Math.atan2(this.y, this.x);
},

angleTo: function(v) {
var dx = v.x - this.x,
dy = v.y - this.y;
return Math.atan2(dy, dx);
},

distanceTo: function(v) {
var dx = v.x - this.x,
dy = v.y - this.y;
return Math.sqrt(dx * dx + dy * dy);
},

distanceToSq: function(v) {
var dx = v.x - this.x,
dy = v.y - this.y;
return dx * dx + dy * dy;
},

lerp: function(v, t) {
this.x += (v.x - this.x) * t;
this.y += (v.y - this.y) * t;
return this;
},

clone: function() {
return new Vector(this.x, this.y);
},

toString: function() {
return '(x:' + this.x + ', y:' + this.y + ')';
}
};

function GravityPoint(x, y, radius, targets) {
Vector.call(this, x, y);

this._targets = {
particles: targets.particles || [],
gravities: targets.gravities || []
};
this._speed = new Vector();
}

GravityPoint.interferenceToPoint = true;

GravityPoint.prototype = (function(o) {
var s = new Vector(0, 0), p;
for (p in o) s[p] = o[p];
return s;
})({
gravity:       0.05,
isMouseOver:   false,
dragging:      false,
destroyed:     false,
_dragDistance: null,
_collapsing:   false,

hitTest: function(p) {
},

startDrag: function(dragStartPoint) {
this._dragDistance = Vector.sub(dragStartPoint, this);
this.dragging = true;
},

drag: function(dragToPoint) {
this.x = dragToPoint.x - this._dragDistance.x;
this.y = dragToPoint.y - this._dragDistance.y;
},

endDrag: function() {
this._dragDistance = null;
this.dragging = false;
},

},

collapse: function(e) {
this._collapsing = true;
},

render: function(ctx) {
if (this.destroyed) return;

var particles = this._targets.particles,
i, len;

for (i = 0, len = particles.length; i < len; i++) {
}

if (this._collapsing) {
if (this.currentRadius < 1) this.destroyed = true;
this._draw(ctx);
return;
}

var gravities = this._targets.gravities,
g, absorp,

for (i = 0, len = gravities.length; i < len; i++) {
g = gravities[i];

if (g === this || g.destroyed) continue;

if (
) {
g.destroyed = true;
this.gravity += g.gravity;

this.currentRadius = Math.sqrt((area + garea * 3) / Math.PI);
this.radius = Math.sqrt((area + garea) / Math.PI);
}

}

if (GravityPoint.interferenceToPoint && !this.dragging)

this._speed = new Vector();

this._draw(ctx);
},

_draw: function(ctx) {
var grd, r;

ctx.save();

ctx.beginPath();
ctx.arc(this.x, this.y, this.radius * 5, 0, Math.PI * 2, false);
ctx.fillStyle = grd;
ctx.fill();

grd.addColorStop(1, Math.random() < 0.2 ? 'rgba(255, 196, 0, 0.15)' : 'rgba(103, 181, 191, 0.75)');
ctx.beginPath();
ctx.arc(this.x, this.y, this.currentRadius, 0, Math.PI * 2, false);
ctx.fillStyle = grd;
ctx.fill();
ctx.restore();
}
});

Vector.call(this, x, y);

this._latest = new Vector();
this._speed  = new Vector();
}

var s = new Vector(0, 0), p;
for (p in o) s[p] = o[p];
return s;
})({
},

update: function() {
if (this._speed.length() > 12) this._speed.normalize().scale(12);

this._latest.set(this);
}
});

(function() {

var BACKGROUND_COLOR      = 'rgba(11, 51, 56, 1)',

var canvas, context,
bufferCvs, bufferCtx,
screenWidth, screenHeight,
mouse = new Vector(),
gravities = [],
particles = [],
gui, control;

function resize(e) {
screenWidth  = canvas.width  = window.innerWidth;
screenHeight = canvas.height = window.innerHeight;
bufferCvs.width  = screenWidth;
bufferCvs.height = screenHeight;
context   = canvas.getContext('2d');
bufferCtx = bufferCvs.getContext('2d');

var cx = canvas.width * 0.5,
cy = canvas.height * 0.5;

}

function mouseMove(e) {
mouse.set(e.clientX, e.clientY);

var i, g, hit = false;
for (i = gravities.length - 1; i >= 0; i--) {
g = gravities[i];
if ((!hit && g.hitTest(mouse)) || g.dragging)
g.isMouseOver = hit = true;
else
g.isMouseOver = false;
}

canvas.style.cursor = hit ? 'pointer' : 'default';
}

function mouseDown(e) {
for (var i = gravities.length - 1; i >= 0; i--) {
if (gravities[i].isMouseOver) {
gravities[i].startDrag(mouse);
return;
}
}
particles: particles,
gravities: gravities
}));
}

function mouseUp(e) {
for (var i = 0, len = gravities.length; i < len; i++) {
if (gravities[i].dragging) {
gravities[i].endDrag();
break;
}
}
}

function doubleClick(e) {
for (var i = gravities.length - 1; i >= 0; i--) {
if (gravities[i].isMouseOver) {
gravities[i].collapse();
break;
}
}
}

var i, p;
for (i = 0; i < num; i++) {
);
particles.push(p);
}
}

if (particles.length < num) num = particles.length;
for (var i = 0; i < num; i++) {
particles.pop();
}
}

control = {
particleNum: 100
};

canvas  = document.getElementById('c');
bufferCvs = document.createElement('canvas');

resize(null);

gui = new dat.GUI();
var n = (control.particleNum | 0) - particles.length;
if (n > 0)
else if (n < 0)
});
gui.close();

var loop = function() {
var i, len, g, p;

context.save();
context.fillStyle = BACKGROUND_COLOR;
context.fillRect(0, 0, screenWidth, screenHeight);
context.fillRect(0, 0, screenWidth, screenHeight);
context.restore();

for (i = 0, len = gravities.length; i < len; i++) {
g = gravities[i];
if (g.dragging) g.drag(mouse);
g.render(context);
if (g.destroyed) {
gravities.splice(i, 1);
len--;
i--;
}
}

bufferCtx.save();
bufferCtx.globalCompositeOperation = 'destination-out';
bufferCtx.globalAlpha = 0.35;
bufferCtx.fillRect(0, 0, screenWidth, screenHeight);
bufferCtx.restore();

len = particles.length;
bufferCtx.save();
bufferCtx.fillStyle = bufferCtx.strokeStyle = '#fff';
bufferCtx.lineCap = bufferCtx.lineJoin = 'round';
bufferCtx.beginPath();
for (i = 0; i < len; i++) {
p = particles[i];
p.update();
bufferCtx.moveTo(p.x, p.y);
bufferCtx.lineTo(p._latest.x, p._latest.y);
}
bufferCtx.stroke();
bufferCtx.beginPath();
for (i = 0; i < len; i++) {
p = particles[i];
bufferCtx.moveTo(p.x, p.y);
bufferCtx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false);
}
bufferCtx.fill();
bufferCtx.restore();

// バッファをキャンバスに描画
context.drawImage(bufferCvs, 0, 0);

requestAnimationFrame(loop);
};
loop();

})();

```

CSS Code

```body {
font-family: Helvetica sans-serif;
margin: 0;
background-color: #222;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}

canvas {
position: absolute;
top: 0;
left: 0;
}

.info {
position: absolute;
top: 0;
left: 0;