Estimating Pi using the Monte Carlo Method
How do I make an estimating pi using the monte carlo method?
To celebrate Pi Day, here is a demo of how to estimate the value of Pi using the Monte Carlo method - generate a large number of random points and see how many fall in the circle enclosed by the unit square.This demo is originally from https://academo.org.. What is a estimating pi using the monte carlo method? How do you make a estimating pi using the monte carlo method? This script and codes were developed by Ed Ball on 12 November 2022, Saturday.
Estimating Pi using the Monte Carlo Method - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Estimating Pi using the Monte Carlo Method</title> <link rel='stylesheet prefetch' href='https://academo.org/scss/main.css?v=1457985409494'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="demo">
</div>
<div id="ui-container">
</div>
<a id="academo-banner" href="https://academo.org/demos/estimating-pi-monte-carlo/" target="_blank">Find out more at Academo.org</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://academo.org/js/demoConcat.js?v=1457985409494'></script>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<script src='https://academo.org/js/lib/d3.v3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Estimating Pi using the Monte Carlo Method - Script Codes CSS Codes
canvas { position:absolute; left:50%; margin-left:-250px; top:50%; margin-top:-250px; display:block;
}
Estimating Pi using the Monte Carlo Method - Script Codes JS Codes
/* This code comes from Academo.org */
var demo = new Demo({ ui: { addOne: { title: "Add points one-by-one", type: "button" }, animate: { title: "Animate", value: false, }, speed: { title: "Speed", value: 1, range: [5, 100], resolution: 1, input: "hidden", }, reset: { title: "Reset", type: "button" }, }, animateID: null, totalPoints: 0, innerPoints: 0, radius: 250, init: function(){ $('<canvas>').attr({ id: "my-canvas", height: "500px", width: "500px", }).css({ width: "500px", "height": "500px", "display": "block", "border": "solid 1px #CCC" }).appendTo('#demo'); this.scale = d3.scale.linear() .domain([-1, 1]) .range([0, 500]); this.canvas = document.getElementById("my-canvas"); this.context = this.canvas.getContext("2d"); this.initCanvas(); $("#ui-container").prepend("<div class='interface' id='js-points-data'></div>"); $("#js-points-data").append("Total Number of points: <span class='js-total-points'>0</span><br />"); $("#js-points-data").append("Points within circle: <span class='js-inner-points'>0</span><br />"); $("#js-points-data").append("Pi estimation: <span class='js-pi-estimation'></span><br />"); }, initCanvas: function(){ this.context.clearRect(0,0,500,500); this.context.strokeStyle = "#999"; this.context.beginPath(); this.context.arc(this.scale(0), this.scale(0), this.radius, 0, 2 * Math.PI); this.context.stroke(); }, animate: function(){ this.animateID = window.requestAnimationFrame(this.animate.bind(this)); this.update(); }, reset: function(){ this.totalPoints = 0; this.innerPoints = 0; this.updateDisplay(); }, updateDisplay: function(){ $(".js-inner-points").html(this.innerPoints); $(".js-total-points").html(this.totalPoints); var piEstimate = (4 * this.innerPoints / this.totalPoints).toFixed(5); if (this.totalPoints == 0){ piEstimate = ""; } $(".js-pi-estimation").html(piEstimate); }, update: function(e){ if (e == "speed"){ } else if (e == "animate" && this.ui.animate.value == true) { this.animate(); } else if (e == "animate" && this.ui.animate.value == false) { window.cancelAnimationFrame(this.animateID); } else if (e == "reset") { this.initCanvas(); this.reset(); } else { if (e == "addOne"){ var numberToAdd = 1; } else { var numberToAdd = this.ui.speed.value; } for (var i = 0 ; i < numberToAdd ; i++){ var randomX = Math.random() * 2 - 1; var randomY = Math.random() * 2 - 1; this.context.beginPath(); if (Math.pow(this.scale(randomX) - this.scale(0), 2) + Math.pow(this.scale(randomY) - this.scale(0), 2) > Math.pow(this.radius, 2)){ this.context.fillStyle = "blue"; } else { this.context.fillStyle = "red"; this.innerPoints++; } this.context.fillRect(this.scale(randomX),this.scale(randomY),1,1); this.totalPoints++; this.updateDisplay(); } } }
});
Developer | Ed Ball |
Username | edball |
Uploaded | November 12, 2022 |
Rating | 3 |
Size | 3,025 Kb |
Views | 32,384 |
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!
Name | Size |
Happypillar | 3,181 Kb |
Web Audio TR-808 electronic cowbell | 2,424 Kb |
Planetary Gear System | 2,340 Kb |
Ringback tone in Web Audio | 2,851 Kb |
DTMF Tones in Web Audio | 2,938 Kb |
Purple Rain | 2,783 Kb |
Stylibrary | 3,200 Kb |
Lilac Chaser Illusion | 3,167 Kb |
NASA Quindar tones in Web Audio | 2,787 Kb |
Dial Tone in Web Audio | 2,364 Kb |
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!
Name | Username | Size |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!