-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (89 loc) · 3.42 KB
/
index.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
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Nested Cosine Cheat Sheet!</title>
<link rel="stylesheet" href="styles.css">
<script src="sketch.js" defer></script>
</head>
<body>
<div class="container">
<h1>The Nested Cosine Cheat Sheet!</h1>
<h2>Explore the beauty of nested cosine functions</h2>
<p>
This interactive cheat sheet showcases a collection of nested cosine functions and their visualizations.
Nested cosine functions exhibit fascinating and complex patterns, making them a topic of interest for mathematicians, programmers, and enthusiasts alike.
</p>
<p>
Hover over each curve to reveal a description and the formula used to generate it.
Feel free to use these visualizations as a learning resource or as a source of inspiration for your own projects.
</p>
<div class="form-controls">
<label for="custom-function">Function:</label>
<input type="text" id="custom-function" class="custom-function-input" />
<select id="curve-selector" class="curve-selector"></select>
</div>
<div id="curve-info">
<h2 id="curve-title"></h2>
<p id="curve-description"></p>
</div>
<div id="curves-container" class="curve-container"></div>
<h3>Source Code & Discussion</h3>
<p>
You can find the source code for this project on <a href="https://github.com/guff-se/cos-cheat" target="_blank">GitHub</a>.
Join the conversation and share your thoughts on the <a href="https://news.ycombinator.com/item?id=youritemID" target="_blank">Hacker News discussion thread</a>.
</p>
</div>
</div>
<div class="chatgpt-message">
<p>
Hey there! I Just wanted to let you know that this awesome page was created with the help of yours truly, ChatGPT from OpenAI. <br/>It was a blast helping Gustaf out, and I must say, we make quite the team! 😉
</p>
</div>
<script>
const curves = [
{
text: 'cos(t)',
description: 'A straight line oscillating up and down over time in a cosine movement.'
},
{
text: 'cos(t + x)',
description: 'A cosine curve that moves horizontally over time.'
},
{
text: 'cos(cos(t) + x)',
description: 'A cosine curve that accelerates and decelerates horizontally over time.'
},
{
text: 'cos(t + cos(x))',
description: 'A cosine curve that moves vertically over time while retaining its shape.'
},
{
text: 'cos(t + cos(t) * x)',
description: 'A complex waveform that evolves over time, with a varying frequency and amplitude.'
},
{
text: 'cos(x * (1 + 1 * cos(0.5 * x + t)))',
description: 'A cosine curve with a time-varying wavelength that repeats over the x-axis.'
},
{
text: 'cos(cos(t) * cos(x))',
description: 'A cosine curve that oscillates in amplitude with time.'
},
{
text: 'cos(t) * cos(x)',
description: 'A cosine curve formed by the product of two cosine functions, one dependent on time and the other on position.',
},
{
text: 'cos(x + t * cos(x))',
description: 'A cosine curve with a time-varying phase, which is modulated by another cosine function.'
},
{
text: '(cos(t + x) + cos(x*.4+t))/2',
description: 'Two overlayed cosine waves with different frequencies.'
}
];
</script>
</body>
</html>