Skip to content

Instantly share code, notes, and snippets.

@Demonstrandum

Demonstrandum/index.html

Last active June 1, 2018 00:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Demonstrandum/310688d8668540498b0d0743d04f2641 to your computer and use it in GitHub Desktop.
Save Demonstrandum/310688d8668540498b0d0743d04f2641 to your computer and use it in GitHub Desktop.
Download ZIP
p5 Riemann sum
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Raw
sketch.js
let zoom = 0
let precision = 1;
function setup() {
createCanvas(800, 800);
frameRate(10);
}
function draw() {
background(220);
zoom = 40;
scale(zoom)
translate(width/(zoom*2) - 8, height/zoom - 2)
drawAxes();
let f = (x) => {
x = ((1/3) * x) - (4/3);
return -(2 * (Math.pow(x, 4))
+ 2 * Math.pow(x, 3)
- 3 * Math.pow(x, 2)
+ 5);
}
noFill();
stroke(0);
strokeWeight(2/zoom);
beginShape();
for (let x = -width/zoom; x < width/zoom; x+=0.1) {
vertex(x, f(x));
}
endShape();
riemannSum(f, 1/precision, 1, 5);
precision += 0.1
if (precision > 30) precision = 1;
}
function riemannSum(f, dx, from=0, to=10) {
noFill();
stroke(130);
strokeWeight(0.05);
rectMode(CORNER);
area = 0;
for (let x = from; x < to; x += dx) {
rect(x, 0, dx, f(x));
area += f(x) * dx;
}
fill(160);
noStroke();
textFont('monospaaace');
textSize(0.8);
text("Riemann Sum:\n" + roundPrecise(-area, 3), 10, -10)
}
function drawAxes() {
stroke(200);
line(-width/zoom, 0, width/zoom, 0); // x-axis
line(0, -height/zoom, 0 , height/zoom); // y-axis
fill(160);
textFont('monospaaace');
textSize(0.8);
for (let x = 0; x < width/zoom; x++) {
noStroke();
text(x, x - 0.2, 0.8);
stroke(160)
line(x+1, 0.2, x+1, -0.2)
}
for (let y = 1; y < height/zoom; y++) {
noStroke();
text(y, -1.2, -y+0.2);
stroke(160)
line(-0.2, -y, 0.2, -y)
}
}
function roundPrecise(number, precision) {
let factor = Math.pow(10, precision);
return Math.round(number * factor) / factor;
}
Raw
style.css
html, body {
margin: 0;
padding: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment