-
Notifications
You must be signed in to change notification settings - Fork 0
/
primeary.html
85 lines (59 loc) · 4.49 KB
/
primeary.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AnneMarie Torresen -- Prime-ary colors</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="images/icon.ico">
</head>
<body style="background: white">
<div class="banner">
<a href="index.html" style="color: white">ᐊ Back</a> This website is a work in progress :)
</div>
<h1 style="margin-top: 20px">How two-y is the number 42?</h1>
<img src="images/primeary_rgb.png" alt="primeary_rgb">
<p style="margin-left: 0">This piece was part of the <a href="https://gallery.bridgesmathart.org/exhibitions/bridges-2024-exhibition-of-mathematical-art">Bridges 2024 Exhibition of Mathematical Art, Craft, and Design</a>.</p>
<br><br>
<div class="accordion-toggle collapsed" data-toggle="collapse" href="#explanation">
<h3 id="explain" onclick="toggleArrow('explain')">Explanation (if you want it) ▽</h3>
</div>
<div class="row collapse in p-3" id="explanation">
<h4>Definitions:</h4>
<p>Prime numbers -- like 2, 3, 5, 7, 11, etc. -- are numbers that cannot be further divided into other whole numbers.</p>
<p>Prime numbers can be used as the building blocks of all other whole numbers. The blueprint for building a number from prime numbers is called a "prime factorization".</p>
<p>The prime factorization of a number, <em>n</em>, tells you which prime numbers, and how many of each of them, need to be multiplied to create a value equal to <em>n</em>.</p>
<h4>Examples:</h4>
<p>‣ 10 = 2 * 5. 2 and 5 are both prime numbers, so the prime factorization of 10 is 2 * 5.</p>
<p>‣ 12 = 2 * 6. 2 is a prime number. 6 is not a prime number, so decompose further into 6 = 2 * 3.
2 and 3 are both prime numbers, so the prime factorization of 12 is 2 * 2 * 3.</p>
<p>Now that we see the blueprints for building the numbers 10 and 12... which of those numbers is more "two-y"?</p>
<p>‣ 10 is built of one 5 and one 2. You could say that 10 is 50% made of 5 and 50% made of 2.</p>
<p>‣ 12 is built of one 3 and two 2's. You could say that 12 is 33% made of 3's and 66% made of 2's.</p>
<p>So I think that 12 is two-y-er than 10.</p>
<h4>Visualization:</h4>
<p>The visualization above shows the numbers from 0 to 100 as bars whose heights represent the numbers' values (i.e., 50 is half as tall as 100).</p>
<p>Each <em>prime number</em> has been assigned its own color: 2 is red, 3 is green, 5 is blue, and the remaining
prime numbers less than 100 are each their own shade of gray.</p>
<p>Each <em>non-prime number</em> gets colored by blending the colors of the prime numbers in its prime factorization.</p>
<p>For example, 10 = 2 * 5 is a blend of one part 2 (red) and one part 5 (blue), which gives bar number 10 a purple-y color.</p>
<p>As we saw above, 12 = 2 * 2 * 3, so bar number 12 is colored as a blend of two parts 2 and one part green. This combination gives a reddish brown.</p>
<h4 style="margin-left: 30px">What colors on the visualization correspond to the two-y-er numbers?</h4>
</div>
<div class="accordion-toggle collapsed" data-toggle="collapse" href="#colorSchemes">
<h3 id="more" onclick="toggleArrow('more')">Other color schemes ▽</h3>
</div>
<div class="row collapse in p-3" id="colorSchemes">
<img class="otherEntries" src="images/Cyan_Magenta_Yellow.png" alt="Cyan_Magenta_Yellow">
<p></p>
<img class="otherEntries" src="images/Red_Blue_Yellow.png" alt="Red_Blue_Yellow">
<p></p>
<img class="otherEntries" src="images/Red_Cyan_Yellow.png" alt="Red_Cyan_Yellow">
</div>
<script src="collapse.js" type="text/javascript"></script>
</body>
</html>