Advertisement
Guest User

Untitled

a guest
Sep 13th, 2019
455
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.54 KB | None
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Tinder Simulator</title>
  6. <script type="text/x-mathjax-config">
  7.     MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });
  8. </script>
  9. <script type="text/javascript"
  10.  src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  11. </script>
  12. <script>
  13.   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  14.   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  15.   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  16.   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  17.   ga('create', 'UA-3425939-7', 'auto');
  18.   ga('send', 'pageview');
  19. </script>
  20. <script type="text/javascript">
  21. "use strict";
  22. class Graph
  23. {    
  24.     constructor(name)
  25.     {
  26.         this.cvs= document.getElementById(name);
  27.         this.ctx = this.cvs.getContext('2d');
  28.         this.points = [];
  29.         this.lastPoint = null;
  30.         this.margin = 20;
  31.     }
  32.    
  33.     clear() { this.ctx.fillStyle = "#FFFFFF"; this.ctx.fillRect(0,0,this.cvs.width,this.cvs.height); }    
  34.     setLimitsX(min, max) { this.minX = min; this.maxX = max; }
  35.     setLimitsY(min, max) { this.minY = min; this.maxY = max; }
  36.  
  37.     map(v, min, max) { return (v-min)/(max-min); }
  38.     lerp(t, min, max) { return t*(max-min) + min; }
  39.    
  40.     mapX(v, min, max) { return this.map(v, this.minX, this.maxX) * (this.cvs.width - 2*this.margin); }
  41.     mapY(v, min, max) { return this.map(v, this.maxY, this.minY) * (this.cvs.height - 2*this.margin); }
  42.    
  43.     ToX(x) { return this.mapX(x) + this.margin; }
  44.     ToY(y) { return this.mapY(y) + this.margin; }
  45.    
  46.     DrawAxis()
  47.     {
  48.         this.ctx.fillStyle = "#000000"
  49.        
  50.         this.ctx.beginPath();
  51.         this.ctx.strokeStyle="#000000";    
  52.         this.ctx.moveTo(0,this.ToY(0));
  53.         this.ctx.lineTo(this.cvs.width,this.ToY(0));
  54.         this.ctx.moveTo(this.ToX(0),0);
  55.         this.ctx.lineTo(this.ToX(0),this.cvs.height);
  56.         this.ctx.stroke();
  57.        
  58.         this.ctx.font = "10px Arial";
  59.  
  60.         this.ctx.textAlign = "left";
  61.        
  62.         this.ctx.beginPath();            
  63.         for(var i=0;i<=10;i++)        
  64.        {
  65.            var v = this.lerp(i/10, this.minX, this.maxX);
  66.            var x = this.ToX(v);
  67.            this.ctx.fillText(v, x+2, this.cvs.height);
  68.            this.ctx.moveTo(x,this.cvs.height-this.margin);
  69.            this.ctx.lineTo(x,this.cvs.height-this.margin/2);
  70.        }
  71.  
  72.        this.ctx.textAlign = "right";
  73.        for(var i=0;i<=10;i++)
  74.        {
  75.            var v = this.lerp(i/10, this.minY, this.maxY);
  76.            var y = this.ToY(v);
  77.            this.ctx.fillText(v, this.margin, y-2);
  78.            this.ctx.moveTo(this.margin/2,y);
  79.            this.ctx.lineTo(this.margin,y);
  80.        }
  81.        this.ctx.closePath();
  82.        this.ctx.stroke();
  83.    }
  84.    
  85.    addPoint(x)
  86.    {
  87.        this.points.push(x);
  88.        if (this.lastPoint!=null)
  89.        {
  90.            this.ctx.beginPath();
  91.            this.ctx.strokeStyle="#ff0000";    
  92.            this.ctx.moveTo(this.ToX(this.points.length-1),this.ToY(this.lastPoint));
  93.            this.ctx.lineTo(this.ToX(this.points.length),this.ToY(x));      
  94.            this.ctx.stroke();      
  95.        }
  96.        this.lastPoint = x;
  97.    }
  98.    
  99.    plotLine(line)
  100.    {
  101.        this.ctx.strokeStyle="#ff0000";    
  102.        this.ctx.beginPath();
  103.        this.ctx.moveTo(this.ToX(0),this.ToY(line[0]));
  104.        for(var i=1;i<line.length;i++)
  105.        {
  106.            this.ctx.lineTo(this.ToX(i),this.ToY(line[i]));
  107.        }
  108.        this.ctx.stroke();      
  109.    }
  110. }
  111.  
  112. function getRandomInt(max)
  113. {
  114.  return Math.floor(Math.random() * Math.floor(max));
  115. }
  116.  
  117. function getGaussian()
  118. { // using central limit
  119.    var nsamples = 10;
  120.    var mu = 0.5;
  121.    var sigma = 0.6;
  122.  
  123.    var run_total = 0
  124.    for(var i=0 ; i<nsamples ; i++)
  125.       run_total += Math.random()
  126.  
  127.    return sigma*(run_total - nsamples/2)/(nsamples/2) + mu
  128. }
  129.  
  130. function print(a)
  131. {
  132.    document.getElementById("text").innerHTML += a;
  133. }
  134.  
  135. function drawDistribution(dist, maxVal)
  136. {
  137.    var graph = new Graph("myCanvas");
  138.    graph.setLimitsX(0, 100)
  139.    graph.setLimitsY(0, 200)
  140.    graph.clear();
  141.    graph.DrawAxis()
  142.    
  143.    var bin = [];
  144.    for(var i=0;i<dist.length;i++)
  145.        bin[i]=0;
  146.    for(var i=0;i<dist.length;i++)
  147.    {
  148.        bin[dist[i]]++;
  149.    }
  150.  
  151.    for(var i=0;i<maxVal;i++)
  152.        graph.addPoint(bin[i])
  153. }
  154.  
  155. class Tinder
  156. {
  157.    constructor()
  158.    {
  159.    }
  160.    
  161.    simulateDay(myScore, scoreDist)
  162.    {
  163.        var likes = 0;
  164.        for(var people=0;people<this.activePeoplePerDay;people++)
  165.        {
  166.            //pick a random person, get their score
  167.            var theirScore = scoreDist[getRandomInt(scoreDist.length)];
  168.            // if their score is bigger than mine, they wont like me
  169.            if (theirScore>myScore)
  170.                 continue;
  171.  
  172.             // simulate the chances of finding me
  173.             /*
  174.             for(var swipes=0;swipes<this.swipesPerDay;swipes++)
  175.            {
  176.                //chances of finding me
  177.                var ratingMe = getRandomInt(this.competitorsCount) == 0;
  178.                
  179.                if (ratingMe)
  180.                {
  181.                    likes++;
  182.                    break;
  183.                }
  184.            }
  185.            */
  186.            if (getRandomInt(this.competitorsCount)<this.swipesPerDay)
  187.                likes++;
  188.            
  189.        }
  190.        return likes;
  191.    }
  192.  
  193.    //generate a gaussian distribution of scores
  194.    generateScoreDistribution(genderCountA)
  195.    {
  196.        this.genderCountA = genderCountA;
  197.        this.scoreA = [];
  198.        for(var i=0;i<this.genderCountA;i++)
  199.            this.scoreA[i] = Math.floor(getGaussian()*100);
  200.  
  201.        drawDistribution(this.scoreA, 100)
  202.    }
  203.  
  204.    simulate(competitorsCount, activePeoplePerDay, swipesPerDay)
  205.    {
  206.        this.competitorsCount = competitorsCount;
  207.        this.activePeoplePerDay = activePeoplePerDay;
  208.        this.swipesPerDay = swipesPerDay;
  209.        
  210.        var graph = new Graph("myRes");
  211.        graph.setLimitsX(0, 100)
  212.        graph.setLimitsY(0, 150)
  213.        graph.clear();
  214.        graph.DrawAxis()
  215.        var data=[]
  216.        for(var myScore=0;myScore<100;myScore++)
  217.        {
  218.            var likes = 0;
  219.            for(var day=0;day<31;day++)
  220.            {
  221.                likes += this.simulateDay(myScore, this.scoreA)
  222.            }
  223.            data[myScore] = likes;
  224.        }
  225.        
  226.        graph.plotLine(data)
  227.    }
  228. }
  229.  
  230. var t = new Tinder()
  231.  
  232. function init()
  233. {
  234.  
  235.    var swipesPerDay=100;
  236.    var activePeoplePerDay=200;
  237.    var genderCountA = 5000;
  238.    var competitorsCount = 5000;
  239.    
  240.    document.getElementById('potentialPartners').value = 5001;
  241.    document.getElementById("activePeoplePerDay").value = 200;
  242.    updateDistribution()
  243. }
  244.  
  245. function updateDistribution()
  246. {
  247.    var potentialPartners = document.getElementById("potentialPartners").value;
  248.    var activePeoplePerDay = document.getElementById("activePeoplePerDay").value;
  249.    document.getElementById('partners').innerHTML = potentialPartners;
  250.    document.getElementById('actives').innerHTML = activePeoplePerDay;
  251.    
  252.    t.generateScoreDistribution(potentialPartners)
  253.    t.simulate(potentialPartners, activePeoplePerDay, 100);
  254. }
  255.  
  256. function updateSimulation()
  257. {
  258.    var potentialPartners = document.getElementById("potentialPartners").value;
  259.    var activePeoplePerDay = document.getElementById("activePeoplePerDay").value;
  260.    document.getElementById('partners').innerHTML = potentialPartners;
  261.    document.getElementById('actives').innerHTML = activePeoplePerDay;
  262.    t.simulate(potentialPartners, activePeoplePerDay, 100);
  263. }
  264. </script>
  265.  
  266. <style type="text/css">
  267. <!--
  268. body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
  269. 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; }
  270. #container { width:600px; margin:0 auto; }
  271. #container input{  float:left;}
  272. #nav { display:block; width:100%; text-align:center; }
  273. #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; }
  274. #nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
  275. .slider {  width: 100%; height: 25px; }
  276. -->
  277. </style>
  278. </head>
  279. <body onload="init()">
  280. <h1>Tinder Simulator</h1>
  281. <div id="container">
  282. Beauty score distribution of your potential partners
  283. <canvas id="myCanvas" width="600" height="200"></canvas>
  284. </br></br>
  285. likes accumulated in a month VS personal score
  286. <canvas id="myRes" width="600" height="200"></canvas>
  287. <h3>Settings:</h3>
  288. - Amount of potential partners (and competitors): <span id='partners'></span>
  289. <input type="range" min="1" max="5000" value="5000" class="slider" id="potentialPartners" onchange="updateDistribution(); "></br></br>
  290. - Active people per day: <span id='actives'></span>
  291. <input type="range" min="1" max="400" value="200" class="slider" id="activePeoplePerDay" onchange="updateSimulation(); "></br></br>
  292. <p>- Number of swipes per person: <span id='swipes'>100</span></p>
  293. <div id="text"></div>
  294. </div>
  295. </body>
  296. </html>
Advertisement
RAW Paste Data Copied
Advertisement