Hoi hoi

Developer
Sergey
Size
7,248 Kb
Views
18,207
  1. Hoi hoi Previews
  2. Hoi hoi HTML Codes
  3. Hoi hoi CSS Codes
  4. Hoi hoi JS Codes

How do I make an hoi hoi?

Canvas physics experement. What is a hoi hoi? How do you make a hoi hoi? This script and codes were developed by Sergey on 14 November 2022, Monday.

Hoi hoi Previews
IQ Test

Hoi hoi - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hoi hoi</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas></canvas> <script src="js/index.js"></script>
</body>
</html>

Hoi hoi - Script Codes CSS Codes

@background = #000;
html,
body { width: 100%; height: 100%; -ms-touch-action: none; touch-action: none;
}
body { background: ;
}
canvas { width: 100%; height: 100%; background: ; -ms-touch-action: none; touch-action: none; cursor: crosshair;
}

Hoi hoi - Script Codes JS Codes

'use strict';
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Vector = function () { function Vector() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; _classCallCheck(this, Vector); this.x = parseFloat(x); this.y = parseFloat(y); } Vector.add = function add(a, b) { return new Vector(a.x + b.x, a.y + b.y); }; Vector.sub = function sub(a, b) { return new Vector(a.x - b.x, a.y - b.y); }; Vector.scale = function scale(vector, size) { return vector.clone().scale(size); }; Vector.random = function random() { return new Vector(Math.random() * 2 - 1, Math.random() * 2 - 1); }; Vector.prototype.set = function set() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0.0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0.0 : arguments[1]; this.x = x; this.y = y; return this; }; Vector.prototype.setX = function setX() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0.0 : arguments[0]; this.x = x; return this; }; Vector.prototype.setY = function setY() { var y = arguments.length <= 0 || arguments[0] === undefined ? 0.0 : arguments[0]; this.y = y; return this; }; Vector.prototype.invertX = function invertX() { this.x = -this.x; return this; }; Vector.prototype.invertY = function invertY() { this.y = -this.y; return this; }; Vector.prototype.add = function add(vector) { this.x += vector.x; this.y += vector.y; return this; }; Vector.prototype.sub = function sub(vector) { this.x -= vector.x; this.y -= vector.y; return this; }; Vector.prototype.scale = function scale() { var size = arguments.length <= 0 || arguments[0] === undefined ? 1.0 : arguments[0]; size = parseFloat(size); this.x *= size; this.y *= size; return this; }; Vector.prototype.distanceTo = function distanceTo(vector) { var dx = vector.x - this.x; var dy = vector.y - this.y; return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); }; Vector.prototype.length = function length() { return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)); }; Vector.prototype.normalize = function normalize() { var m = this.length(); if (m) { this.x /= m; this.y /= m; } return this; }; Vector.prototype.angle = function angle() { return Math.atan2(this.y, this.x); }; Vector.prototype.clone = function clone() { return new Vector(this.x, this.y); }; return Vector;
}();
var Point = function () { function Point() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0.0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0.0 : arguments[1]; var color = arguments.length <= 2 || arguments[2] === undefined ? '#fff' : arguments[2]; _classCallCheck(this, Point); var drp = window.devicePixelRatio || 1; this.position = new Vector(x, y); this.radius = 5 * drp; this.color = color; this.maxSpeed = 11 * drp; this.minSpeed = 0; this.maxAcceleration = 4 * drp; this.friction = 0.03; this.weight = 1 + Math.random(); this.acceleration = new Vector(); this.velocity = new Vector(); this.defaultPointOfAttraction = new Vector(x, y); } Point.prototype.update = function update(canvas, attractionPoint, attractionPointWeight) { var position = this.position; var maxAcceleration = this.maxAcceleration; var attraction = undefined; if (attractionPoint) { attraction = this.getAttraction(attractionPoint, attractionPointWeight); } else { attraction = this.getStableAttraction(this.defaultPointOfAttraction, attractionPointWeight); } if (Math.abs(attraction.x) > maxAcceleration) { attraction.x = maxAcceleration * Math.sign(attraction.x); } if (Math.abs(attraction.y) > maxAcceleration) { attraction.y = maxAcceleration * Math.sign(attraction.y); } this.acceleration.set(attraction.x, Math.min(attraction.y, this.maxAcceleration)); if (this.position.x <= 0 || this.position.x >= canvas.width) { if (this.position.x < 0) { this.position.x = 0; } else { this.position.x = canvas.width; } this.velocity.invertX(); } if (this.position.y <= 0 || this.position.y >= canvas.height) { if (this.position.y < 0) { this.position.y = 0; } else { this.position.y = canvas.height; } this.velocity.invertY(); } this.velocity.add(this.acceleration); var speed = this.velocity.length(); if (speed > this.minSpeed) { this.velocity.scale(1 - this.friction); } if (speed > this.maxSpeed) { this.velocity.normalize().scale(this.maxSpeed); } this.position.add(this.velocity); return this; }; Point.prototype.getAttraction = function getAttraction(attractionPoint, attractionPointWeight) { var pointPosition = this.position; var force = UNIVERSAL_GRAVITATIONAL_CONSTANT * this.weight * attractionPointWeight / attractionPoint.distanceTo(pointPosition); return Vector.sub(attractionPoint, pointPosition).normalize().scale(force); }; Point.prototype.getStableAttraction = function getStableAttraction(attractionPoint) { var force = Math.pow(attractionPoint.distanceTo(this.position), 2) * this.weight / 2000; return Vector.sub(attractionPoint, this.position).normalize().scale(force); }; Point.prototype.draw = function draw(ctx) { var _position = this.position; var x = _position.x; var y = _position.y; ctx.beginPath(); ctx.arc(x, y, this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = this.color; ctx.fill(); }; return Point;
}();
var Scene = function () { function Scene(element) { _classCallCheck(this, Scene); this.element = element; this.ctx = element.getContext('2d'); this.dpr = window.devicePixelRatio || 1; this.ctx.scale(this.dpr, this.dpr); this.isPlaying = false; this.draw = this.draw.bind(this); } Scene.prototype.clear = function clear() { var element = this.element; this.ctx.clearRect(0, 0, element.width, element.height); }; Scene.prototype.resize = function resize() { var element = this.element; var _window = window; var innerWidth = _window.innerWidth; var innerHeight = _window.innerHeight; element.width = innerWidth * this.dpr; element.height = innerHeight * this.dpr; element.style.width = innerWidth + 'px'; element.style.height = innerHeight + 'px'; this.clear(); }; Scene.prototype.draw = function draw(renderer) { if (!this.isPlaying) { return; } window.requestAnimationFrame(this.draw); renderer(); }; Scene.prototype.stop = function stop() { this.isPlaying = false; }; Scene.prototype.play = function play() { this.isPlaying = true; this.draw(); }; Scene.prototype.init = function init() { var _this = this; this.resize(); window.addEventListener('resize', function () { _this.resize(); }); }; return Scene;
}();
var ParticleScene = function (_Scene) { _inherits(ParticleScene, _Scene); function ParticleScene(element, count) { _classCallCheck(this, ParticleScene); var _this2 = _possibleConstructorReturn(this, _Scene.call(this, element)); _this2.count = count; _this2.points = []; _this2.cursor = new Vector(); _this2.cursorIsActive = false; _this2.renderFrame = _this2.renderFrame.bind(_this2); return _this2; } ParticleScene.prototype.resize = function resize() { _Scene.prototype.resize.call(this); this.points = this.emit(this.count); }; ParticleScene.prototype.emit = function emit() { var count = arguments.length <= 0 || arguments[0] === undefined ? 100 : arguments[0]; var points = new Array(count); var width = this.element.width; var height = this.element.height; var size = Math.min(width, height) * HEART_SIZE / 36; for (var index = 0; index < count; index++) { var _x12 = heart.x(index, size) + width / 2; var _y = heart.y(index, -size) + height / 2; var colorIndex = parseInt((_x12 + _y) % colors.length, 10); points[index] = new Point(_x12, _y, colors[colorIndex]); } return points; }; ParticleScene.prototype.clear = function clear() { var element = this.element; this.ctx.fillStyle = BACKGROUND_COLOR; this.ctx.fillRect(0, 0, element.width, element.height); }; ParticleScene.prototype.renderFrame = function renderFrame() { this.clear(); var points = this.points; var cursor = undefined; if (this.cursorIsActive) { cursor = this.cursor; } for (var index = 0, pointsCount = points.length; index < pointsCount; index++) { points[index].update(this.element, cursor, CURSOR_WEIGHT).draw(this.ctx); } }; ParticleScene.prototype.draw = function draw() { _Scene.prototype.draw.call(this, this.renderFrame); }; ParticleScene.prototype.init = function init() { var _this3 = this; _Scene.prototype.init.call(this); this.points = this.emit(this.count); var removePoint = function removePoint() { return _this3.cursorIsActive = false; }; var activateCursor = function activateCursor(x, y) { var dpr = _this3.dpr; _this3.cursor.set(x * dpr, y * dpr); _this3.cursorIsActive = true; }; this.element.addEventListener('mousemove', function (e) { activateCursor(e.clientX, e.clientY); }); this.element.addEventListener('touchmove', function (e) { var touch = e.touches[0]; e.preventDefault(); activateCursor(touch.pageX, touch.pageY); }); this.element.addEventListener('touchend', removePoint); this.element.addEventListener('mouseleave', removePoint); return this; }; return ParticleScene;
}(Scene);
var _Math = Math;
var cos = _Math.cos;
var sin = _Math.sin;
var x = function x(t, scale) { return 16 * Math.pow(sin(t), 3) * scale;
};
var y = function y(t, scale) { return (13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)) * scale;
};
var heart = { x: x, y: y
};
var colors = ['#FB6066', '#FFEFC1', '#FDD86E', '#FFA463', '#F66B40'];
var BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.35)';
var HEART_SIZE = 0.8;
var POINTS_COUNT = 1000;
var CURSOR_WEIGHT = 2000;
var UNIVERSAL_GRAVITATIONAL_CONSTANT = 6.674 * Math.pow(10, -3); //fuck physics
var canvas = document.querySelector('canvas');
var scene = new ParticleScene(canvas, POINTS_COUNT);
scene.init().play();
Hoi hoi - Script Codes
Hoi hoi - Script Codes
Home Page Home
Developer Sergey
Username JohnTheCat
Uploaded November 14, 2022
Rating 3.5
Size 7,248 Kb
Views 18,207
Do you need developer help for Hoi hoi?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sergey (JohnTheCat) Script Codes
Name
Checkbox ios 7-8 style
Particles attraction
A Pen by Sergey
Switch from Google Material Design
Checkbox sony xperia style
BMTH logo mask test
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!