vividsense.github.io/code.html at main · VividSense/vividsense.github.io · GitHub

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIVID SENSE</title>
    <link rel="icon" type="image/png" href="vividslogo.png">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="darkmode.js" defer></script>
</head>

<body>
    <div class="intro-overlay">
        <h1 class="intro-text">OPEN BY NATURE</h1>
    </div>

    <div class="content">
        <button id="theme-switcher" class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
                <path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
                <path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Z" />
            </svg>
        </button>

        <div class="menu-icon" onclick="toggleMenu()">☰</div>

        <div class="sidebar" id="sidebar">
            <a href="index.html" class="cypher">HOME</a>
            <a href="about-us.html" class="cypher">ABOUT</a>
            <a href="tss.html" class="cypher">PRODUCTS</a>
            <a href="finances.html" class="cypher">FINANCES</a>
            <a href="competition.html" class="cypher">COMPETITION</a>
            <a href="timeline.html" class="cypher">TIMELINE</a>
            <a href="code.html" class="cypher">CODE</a>
            <a href="job.html" class="cypher">JOIN THE TEAM</a>
        </div>
    </div>

    <div class="container" style="padding-top: 150px;">
        <div class="title">
            <h1 class="headline">CODE</h1>
            <div class="line"></div>
        </div>
        <div class="subtitle">Presition || Performance || Practicality</div>
    </div>

    <div class="content">
        <div class="scroll-space" style="height: 250px;"></div>
        <div class="info" style="width: 100%;">
            <section class="right">
                <h1 class="heading animate">HEADERS</h1>
                <div class="logos">
                    <h1 class="text hidden logo">Creates variables to store distance measurements in </h1>
                    <h1 class="text hidden logo">both centimeters and inches. It defines distance thresholds </h1>
                    <h1 class="text hidden logo">(like 20, 30, 40, 50, and 60 inches).These are used to decide how </h1>
                    <h1 class="text hidden logo">the buzzer should behave depending on how far an object is.</h1>
                </div>
            </section>

            <div class="scroll-space" style="height: 100px;"></div>

            <section class="left">
                <h1 class="heading animate">SETUP</h1>
                <div class="logos">
                    <h1 class="text hidden logo">communication with the computer starts, so you </h1>
                    <h1 class="text hidden logo">can see distance results in a serial monitor.</h1>
                    <h1 class="text hidden logo">It also gets the system ready to measure distances </h1>
                    <h1 class="text hidden logo">and make sounds (no need to worry about the wiring).</h1>
                </div>
            </section>

            <div class="scroll-space" style="height: 100px;"></div>

            <section class="right">
                <h1 class="heading animate">LOOP</h1>
                <div class="logos">
                    <h1 class="text hidden logo">The loop measures the distance with the sensor,</h1>
                    <h1 class="text hidden logo">and changes the buzzer sound based on the distance.</h1>
                    <h1 class="text hidden logo">This all happens continusly as the program loops</h1>
                    <h1 class="text hidden logo">over itself. The code loops 5-6 times per second</h1>
                </div>
            </section>

            <div class="scroll-space" style="height: 100px;"></div>

            <section class="left">
                <h1 class="heading animate">CODE EXPLANED FOR NERDS</h1>
                <div class="logos">
                    <h1 class="tinytext hidden logo">#define PIEZO_PIN 9<br>Defines pin 9 as the pin for the piezo buzzer.<br><br>
const int trigger = 6;<br>Defines pin 6 as the trigger pin for the ultrasonic sensor.<br><br>
const int echo = 7;<br>Defines pin 7 as the echo pin for the ultrasonic sensor.<br><br>
float distance;<br>Variable to store the measured distance in centimeters.<br><br>
float dist_inches;<br>Variable to store the distance in inches.<br><br>
Multiple float inch_* variables:<br>Define distance thresholds in inches for different behaviors of the buzzer:<br>
inch_maxthreshold = 60;<br>inch_secondmax = 50;<br>inch_medium = 40;<br>inch_secondmin = 30;<br>inch_min = 20;</h1>

                    <div class="scroll-space" style="height: 100px;"></div>

                    <h1 class="tinytext hidden logo">
Serial.begin(9600);<br>Starts serial communication at 9600 baud rate.<br>
pinMode(trigger, OUTPUT);<br>Sets the trigger pin as an output.<br>
pinMode(echo, INPUT);<br>Sets the echo pin as an input.<br>
pinMode(PIEZO_PIN, OUTPUT);<br>Sets the piezo pin as an output.</h1>

                    <div class="scroll-space" style="height: 100px;"></div>

                    <h1 class="tinytext hidden logo">
Distance Measurement<br>
Trigger Signal<br>
digitalWrite(trigger, LOW);<br>Ensures the trigger pin is low initially.<br>
delayMicroseconds(5);<br>Adds a short delay.<br>
digitalWrite(trigger, HIGH);<br>Sends a high signal to trigger the ultrasonic sensor.<br>
delayMicroseconds(10);<br>Keeps the trigger signal high briefly.<br>
digitalWrite(trigger, LOW);<br>Turns the trigger pin low again.<br><br>
Echo Signal and Calculation<br>
distance = pulseIn(echo, HIGH, 38000);<br>Measures the duration of the HIGH signal on the echo pin (in microseconds).<br>
distance = distance * 0.0135;<br>Converts the duration into a distance in inches.<br>
dist_inches = distance;<br>Assigns the computed distance to the dist_inches variable.<br><br>
Buzzer Control<br>Behavior Based on Distance<br>
The buzzer's tone and delay change based on the measured distance (dist_inches):<br>
Closest Range<br>
if (dist_inches > 2 && dist_inches < inch_min)<br>Produces a high-pitched tone (1725 Hz) with a short delay (50 ms).<br>
Second Closest Range<br>
else if (dist_inches >= inch_min && dist_inches < inch_secondmin)<br>Slightly lower tone (1675 Hz) with a longer delay (125 ms).<br>
Medium Range<br>
else if (dist_inches >= inch_secondmin && dist_inches < inch_medium)<br>Further reduced tone (1550 Hz) with a delay of 150 ms.<br>
Second Farther Range<br>
else if (dist_inches >= inch_medium && dist_inches < inch_secondmax)<br>Tone: 1475 Hz; delay: 175 ms.<br>
Farthest Range (Under Max Threshold)<br>
else if (dist_inches >= inch_secondmax && dist_inches < inch_maxthreshold)<br>Tone: 1400 Hz; delay: 225 ms.<br><br>
Serial Output<br>
Serial.print("Distance: ");<br>Prints "Distance: " to the serial monitor.<br>
Serial.print(dist_inches);<br>Prints the calculated distance in inches.<br>
Serial.println(" in");<br>Completes the line with " in" (indicating inches).
                    </h1>
                </div>
            </section>


            <section class="middle shifter">
                <h1 class="heading animate">FIND OUR CODE</h1>
                <div class="logos">
                <a href="https://github.com/0825eshaan/vividsense" target="_blank" class="hidden logo">
                    <img src="giticon.png" alt="giticon" class="icon">
                </a>
                <a href="https://www.tinkercad.com/things/8GJaLu0PdzS-the-surrounding-scanner-externals?sharecode=MeUskOSY0V2klqwGewo-5_0wL6vF0Ra1C9Eyv1B8suI" target="_blank" class="hidden logo">
                    <img src="tinkericon.png" alt="tinkericon" class="icon">
                </a>
                </div>
            </section>
        </div>
    </div>

    <script src="gsap.js"></script>
    <script src="cypher_animation.js"></script>
    <script src="index.js"></script>
    <script src="app.js"></script>
</body>

</html>