Untitled

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tinder Simulator</title>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });
</script>
<script type="text/javascript"
  src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-3425939-7', 'auto');
  ga('send', 'pageview');
</script>
<script type="text/javascript">
"use strict";
class Graph
{
    constructor(name)
    {
        this.cvs= document.getElementById(name);
        this.ctx = this.cvs.getContext('2d');
        this.points = [];
        this.lastPoint = null;
        this.margin = 20;
    }

    clear() { this.ctx.fillStyle = "#FFFFFF"; this.ctx.fillRect(0,0,this.cvs.width,this.cvs.height); }
    setLimitsX(min, max) { this.minX = min; this.maxX = max; }
    setLimitsY(min, max) { this.minY = min; this.maxY = max; }

    map(v, min, max) { return (v-min)/(max-min); }
    lerp(t, min, max) { return t*(max-min) + min; }

    mapX(v, min, max) { return this.map(v, this.minX, this.maxX) * (this.cvs.width - 2*this.margin); }
    mapY(v, min, max) { return this.map(v, this.maxY, this.minY) * (this.cvs.height - 2*this.margin); }

    ToX(x) { return this.mapX(x) + this.margin; }
    ToY(y) { return this.mapY(y) + this.margin; }

    DrawAxis()
    {
        this.ctx.fillStyle = "#000000"

        this.ctx.beginPath();
        this.ctx.strokeStyle="#000000";
        this.ctx.moveTo(0,this.ToY(0));
        this.ctx.lineTo(this.cvs.width,this.ToY(0));
        this.ctx.moveTo(this.ToX(0),0);
        this.ctx.lineTo(this.ToX(0),this.cvs.height);
        this.ctx.stroke();

        this.ctx.font = "10px Arial";

        this.ctx.textAlign = "left";

        this.ctx.beginPath();
        for(var i=0;i<=10;i++)
        {
            var v = this.lerp(i/10, this.minX, this.maxX);
            var x = this.ToX(v);
            this.ctx.fillText(v, x+2, this.cvs.height);
            this.ctx.moveTo(x,this.cvs.height-this.margin);
            this.ctx.lineTo(x,this.cvs.height-this.margin/2);
        }

        this.ctx.textAlign = "right";
        for(var i=0;i<=10;i++)
        {
            var v = this.lerp(i/10, this.minY, this.maxY);
            var y = this.ToY(v);
            this.ctx.fillText(v, this.margin, y-2);
            this.ctx.moveTo(this.margin/2,y);
            this.ctx.lineTo(this.margin,y);
        }
        this.ctx.closePath();
        this.ctx.stroke();
    }

    addPoint(x)
    {
        this.points.push(x);
        if (this.lastPoint!=null)
        {
            this.ctx.beginPath();
            this.ctx.strokeStyle="#ff0000";
            this.ctx.moveTo(this.ToX(this.points.length-1),this.ToY(this.lastPoint));
            this.ctx.lineTo(this.ToX(this.points.length),this.ToY(x));
            this.ctx.stroke();
        }
        this.lastPoint = x;
    }

    plotLine(line)
    {
        this.ctx.strokeStyle="#ff0000";
        this.ctx.beginPath();
        this.ctx.moveTo(this.ToX(0),this.ToY(line[0]));
        for(var i=1;i<line.length;i++)
        {
            this.ctx.lineTo(this.ToX(i),this.ToY(line[i]));
        }
        this.ctx.stroke();
    }
}

function getRandomInt(max)
{
  return Math.floor(Math.random() * Math.floor(max));
}

function getGaussian()
{ // using central limit
    var nsamples = 10;
    var mu = 0.5;
    var sigma = 0.6;

    var run_total = 0
    for(var i=0 ; i<nsamples ; i++)
       run_total += Math.random()

    return sigma*(run_total - nsamples/2)/(nsamples/2) + mu
}

function print(a)
{
    document.getElementById("text").innerHTML += a;
}

function drawDistribution(dist, maxVal)
{
    var graph = new Graph("myCanvas");
    graph.setLimitsX(0, 100)
    graph.setLimitsY(0, 200)
    graph.clear();
    graph.DrawAxis()

    var bin = [];
    for(var i=0;i<dist.length;i++)
        bin[i]=0;
    for(var i=0;i<dist.length;i++)
    {
        bin[dist[i]]++;
    }

    for(var i=0;i<maxVal;i++)
        graph.addPoint(bin[i])
}

class Tinder
{
    constructor()
    {
    }

    simulateDay(myScore, scoreDist)
    {
        var likes = 0;
        for(var people=0;people<this.activePeoplePerDay;people++)
        {
            //pick a random person, get their score
            var theirScore = scoreDist[getRandomInt(scoreDist.length)];
            // if their score is bigger than mine, they wont like me
            if (theirScore>myScore)
                continue;

            // simulate the chances of finding me
            /*
            for(var swipes=0;swipes<this.swipesPerDay;swipes++)
            {
                //chances of finding me
                var ratingMe = getRandomInt(this.competitorsCount) == 0;

                if (ratingMe)
                {
                    likes++;
                    break;
                }
            }
            */
            if (getRandomInt(this.competitorsCount)<this.swipesPerDay)
                likes++;

        }
        return likes;
    }

    //generate a gaussian distribution of scores
    generateScoreDistribution(genderCountA)
    {
        this.genderCountA = genderCountA;
        this.scoreA = [];
        for(var i=0;i<this.genderCountA;i++)
            this.scoreA[i] = Math.floor(getGaussian()*100);

        drawDistribution(this.scoreA, 100)
    }

    simulate(competitorsCount, activePeoplePerDay, swipesPerDay)
    {
        this.competitorsCount = competitorsCount;
        this.activePeoplePerDay = activePeoplePerDay;
        this.swipesPerDay = swipesPerDay;

        var graph = new Graph("myRes");
        graph.setLimitsX(0, 100)
        graph.setLimitsY(0, 150)
        graph.clear();
        graph.DrawAxis()
        var data=[]
        for(var myScore=0;myScore<100;myScore++)
        {
            var likes = 0;
            for(var day=0;day<31;day++)
            {
                likes += this.simulateDay(myScore, this.scoreA)
            }
            data[myScore] = likes;
        }

        graph.plotLine(data)
    }
}

var t = new Tinder()

function init()
{

    var swipesPerDay=100;
    var activePeoplePerDay=200;
    var genderCountA = 5000;
    var competitorsCount = 5000;

    document.getElementById('potentialPartners').value = 5001;
    document.getElementById("activePeoplePerDay").value = 200;
    updateDistribution()
}

function updateDistribution()
{
    var potentialPartners = document.getElementById("potentialPartners").value;
    var activePeoplePerDay = document.getElementById("activePeoplePerDay").value;
    document.getElementById('partners').innerHTML = potentialPartners;
    document.getElementById('actives').innerHTML = activePeoplePerDay;

    t.generateScoreDistribution(potentialPartners)
    t.simulate(potentialPartners, activePeoplePerDay, 100);
}

function updateSimulation()
{
    var potentialPartners = document.getElementById("potentialPartners").value;
    var activePeoplePerDay = document.getElementById("activePeoplePerDay").value;
    document.getElementById('partners').innerHTML = potentialPartners;
    document.getElementById('actives').innerHTML = activePeoplePerDay;
    t.simulate(potentialPartners, activePeoplePerDay, 100);
}
</script>

<style type="text/css">
<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }
#container { width:600px; margin:0 auto; }
#container input{  float:left;}
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
.slider {  width: 100%; height: 25px; }
-->
</style>
</head>
<body onload="init()">
<h1>Tinder Simulator</h1>
<div id="container">
Beauty score distribution of your potential partners
<canvas id="myCanvas" width="600" height="200"></canvas>
</br></br>
likes accumulated in a month VS personal score
<canvas id="myRes" width="600" height="200"></canvas>
<h3>Settings:</h3>
- Amount of potential partners (and competitors): <span id='partners'></span>
<input type="range" min="1" max="5000" value="5000" class="slider" id="potentialPartners" onchange="updateDistribution(); "></br></br>
- Active people per day: <span id='actives'></span>
<input type="range" min="1" max="400" value="200" class="slider" id="activePeoplePerDay" onchange="updateSimulation(); "></br></br>
<p>- Number of swipes per person: <span id='swipes'>100</span></p>
<div id="text"></div>
</div>
</body>
</html>