Skip to content

Alt text updated #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mroxas04 merged 1 commit into from
Mar 12, 2026
Merged

Alt text updated #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions book/labs/1_Color_Labs/1_Color_Vector/lab01.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"id": "729da6bd",
"metadata": {},
"source": [
"<h3 style=\"background-color:lightblue\"> Write your name and email below: </h3>\n",
"<h3 style=\"background-color:#6994a2\"> Write your name and email below: </h3>\n",
"\n",
"**Name:** me \n",
"\n",
Expand Down Expand Up @@ -188,7 +188,7 @@
"\n",
"What are the RGB values of the color in the lower left square of the random $2\\times 2$ image?\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 1 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 1 Below </h3>"
]
},
{
Expand All @@ -211,7 +211,7 @@
"4. Purdue Old Gold square (RGB = (206, 184, 136))\n",
"5. square that is half red and half yellow\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 2 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 2 Below </h3>"
]
},
{
Expand Down Expand Up @@ -290,7 +290,7 @@
"\n",
"Write a function to manually compute the dot product between two vectors of length $n$. Compare the CPU time for your function vs numpy's dot function.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 3 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 3 Below </h3>"
]
},
{
Expand All @@ -311,7 +311,7 @@
"\n",
"Write a function to manually compute the cross product between two 3-dimensional vectors. Compare the CPU time for your function vs numpy's cross function.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 4 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 4 Below </h3>"
]
},
{
Expand All @@ -331,7 +331,7 @@
"\n",
"Write a function with a parameter $n$ to manually compute a randomly generated $n\\times n$ matrix multiplied by a randomly-generated $n\\times 1$ vector. Compare the CPU time for your function vs the `@` operator. How do the times differ when $n$ is large?\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 5 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 5 Below </h3>"
]
},
{
Expand Down Expand Up @@ -362,7 +362,7 @@
"\n",
"*Hint: If you haven't seen negative indexing before, check out [this page](https://thedatasciencelabs.github.io/DSLab_Calculus/labs/1_intro_to_notebooks/lab1.html#span-style-color-orange-8-numpy-arrays-span).*\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 6 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 6 Below </h3>"
]
},
{
Expand Down Expand Up @@ -397,7 +397,7 @@
"\n",
"Look up the work of artist Piet Mondrian. In your own style, recreate a Mondrian-esqe painting using vectorized operations instead of mainly for loops. \n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 7 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 7 Below </h3>"
]
},
{
Expand Down Expand Up @@ -464,7 +464,7 @@
"Recreate the three images above without using the `np.tile` function. You can use any other methods you've seen previously.\n",
"Compare the CPU times to generate the set of images with your own function and the tile method given above.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 8 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 8 Below </h3>"
]
},
{
Expand Down Expand Up @@ -535,7 +535,7 @@
"3. Are there any topics that could use more clarification? <br>\n",
"4. Do you have any suggestions on parts of the lab to improve?__\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for the Reflection Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for the Reflection Below </h3>"
]
},
{
Expand Down
38 changes: 18 additions & 20 deletions book/labs/1_Color_Labs/1_Color_Vector/lab02.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"<h3 style=\"background-color:lightblue\"> Write your name and email below: </h3>\n",
"<h3 style=\"background-color:#6994a2\"> Write your name and email below: </h3>\n",
"\n",
"**Name:** me \n",
"\n",
Expand All @@ -68,29 +68,28 @@
"\n",
"### Raspberry Pi Pico\n",
"\n",
"![img](pictures/pico.jpg)\n",
"![Raspberry Pi Pico microcontroller board with USB connector and GPIO pins](pictures/pico.jpg)\n",
"\n",
"We will be displaying color using LEDs and a microcontroller. A microcontroller is a very small general purpose computer good at communicating with electronic sensors. The specific microcontroller we will use is called the Raspberry Pi Pico. The Raspberry Pi Pico runs a different version of Python called Micropython. Micropython is designed specifically for microcontrollers. It does not have many of the modules you are used to, like numpy, since the Pico does not have enough memory or processing power to make good use of them. Instead, it has libraries for interfacing with hardware, like the machine library we will use to control the pins on the Pico. Also, the time library in Micropython supports millisecond and microsecond sleep functions, which can count out much more precise units of time than you can in normal Python.\n",
"\n",
"We will be using Thonny to run code on the Pico and manage files on the Pico itself. \n",
"\n",
"Inspect the [datasheet](https://github.com/TheDataScienceLabs/DataLab_Multivariate_Calculus/blob/main/book/labs/1_Color_Labs/1_Color_Vector/pictures/pico_datasheet.png) for the Pico.\n",
"It may be helpful to save the image in the main folder you’re using since it’ll continue to be referenced throughout this course.\n",
"It may be helpful to save the image in the main folder you're using since it'll continue to be referenced throughout this course.\n",
"The full datasheet for the Pico can be found [here](https://datasheets.raspberrypi.com/pico/pico-datasheet.pdf).\n",
"\n",
"![img](pictures/pico_datasheet.png)\n"
"![Raspberry Pi Pico pinout diagram showing GPIO pin assignments and electrical specifications](pictures/pico_datasheet.png)\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"### Breadboard\n",
"\n",
"![img](pictures/breadboard.jpg)\n",
"![White solderless breadboard with tie points and power rails for prototyping electronic circuits](pictures/breadboard.jpg)\n",
"\n",
"The name “breadboard” comes from the old days of electronics when people would prototype their projects by nailing them to a cutting board. With a modern breadboard, you don’t need nails. \n",
"The name \"breadboard\" comes from the old days of electronics when people would prototype their projects by nailing them to a cutting board. With a modern breadboard, you don't need nails. \n",
"By inserting the entire Pico into your bread board, we can easily connect electrical wires to each of the pins of the Pico. \n",
"Plug the Pico into the breadboard so that the USB plug is at the end of the breadboard."
]
Expand All @@ -101,7 +100,7 @@
"source": [
"### NeoPixels (WS2812)\n",
"\n",
"![img](pictures/led.jpg)\n",
"![Individual NeoPixel LED with four pins: DIN, VDD, GND, and DOUT for chaining addressable RGB LEDs](pictures/led.jpg)\n",
"\n",
"NeoPixels are a brand of individually addressable LEDs. From a single pin, you can individually control however many LEDs are connected on the strip whether it be a single LED, a few in a line, or more complex configurations. There are tons of projects out there people have built using NeoPixels, from lightsabers to music synchronized light shows. **From left to right the pins are DIN, VDD, GND, DOUT** with GND (ground) being the longest pin. You will have to fan out the pins a bit so they fit firmly into the breadboard."
]
Expand All @@ -110,10 +109,9 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"### Level Shifter\n",
"\n",
"![img](pictures/level_shifter.jpg)\n",
"![Bi-directional logic level shifter circuit board for converting between 3.3V and 5V signal levels](pictures/level_shifter.jpg)\n",
"\n",
"The Raspberry Pi Pico runs all its circuits at 3.3 volts, while the NeoPixels runs at 5 volts. Luckily, we do have 5 volts available for it (the USB standard includes a 5 volt pin) so we can drive the LEDs as long as the Pico is connected to a computer. The level shifter is in charge of translating between the voltage levels, which is why it has a low voltage side connected to 3V3, and a high voltage side connected to VBUS (which refers to the USB cable). We only need to do level shifting to two pins, and it is good practice to connect pins you are not using to ground."
]
Expand Down Expand Up @@ -190,7 +188,7 @@
"peach\n",
"mango\n",
"```\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for the Warm Up Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for the Warm Up Below </h3>"
]
},
{
Expand Down Expand Up @@ -221,7 +219,7 @@
"\n",
"*Hint:* Try the Warm Up activity and reference `neoexample.py` on how to show colors on the LED.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 1 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 1 Below </h3>"
]
},
{
Expand All @@ -243,7 +241,7 @@
"\n",
"In a few sentences describe how the color coordinates displayed here in a Jupyter notebook compare to the color coordinates of the NeoPixels. For example, does red look the same on the NeoPixel as it does in the Jupyter notebook.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 2 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 2 Below </h3>"
]
},
{
Expand All @@ -261,7 +259,7 @@
"\n",
"So how do the NeoPixels work? The NeoPixels use something called pulse-width modulation to display different colors, which means that the LEDs within the NeoPixel are actually switching on and off at a very fast pace (about 400 times per second). Since these pulses of light alternate on and off so quickly, we only see a uniform brightness. The time between pulses determines the intensity of the color. For a half-strength red (127,0,0), the LEDs are still switching from off to full red (255,0,0), but the LED is on for an equal amount of time that it is off. \n",
"\n",
"![img](pictures/dutycycle.png)\n",
"![PWM duty cycle timing diagrams showing different percentages of on-time versus off-time in each cycle](pictures/dutycycle.png)\n",
"\n",
"The length of a cycle in the NeoPixel is about 2.5 ms. To further interpret the graphs above (from [here](https://learn.adafruit.com/led-tricks-gamma-correction?view=all)), let's pretend that the length of a cycle is 1 second. We can simulate a 50% duty cycle by creating an animation with the library Matplotlib. It may pop up with an error message but if you give it some time to load, the interactive animation should appear. Once it pops up, play around with the buttons and watch what happens."
]
Expand Down Expand Up @@ -328,7 +326,7 @@
"\n",
"__Part 1:__ Write a script called `pico_flash.py` that flashes the Pico's __onboard LED__ with a 30% duty cycle where a cycle is 1 second long. Run the cell below the print the code you wrote.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 3 Part 1 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 3 Part 1 Below </h3>"
]
},
{
Expand All @@ -347,7 +345,7 @@
"source": [
"__Part 2:__ Write a script called `green_flash.py` that flashes the color green on the connected NeoPixels with a 10% duty cycle where a cycle is 1 second long. Run the cell below the print the code you wrote.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 3 Part 2 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 3 Part 2 Below </h3>"
]
},
{
Expand Down Expand Up @@ -412,7 +410,7 @@
"\n",
"If we think about RGB values being in a 3D cube with R on the $x$-axis, G on the $y$-axis, and B on the $z$-axis, then the gradient animation follows what kind of path?\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 4 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 4 Below </h3>"
]
},
{
Expand Down Expand Up @@ -470,7 +468,7 @@
"\n",
"Write a script called `neopixel_gradient.py` to recreate the first gradient animation example from the beginning of Section 2 on the NeoPixels and run the cell below to print the code you wrote.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 5 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 5 Below </h3>"
]
},
{
Expand All @@ -490,7 +488,7 @@
"\n",
"Find and download a colorful image online. Try to match a color in the image by adjusting the red, green, and blue channel values and display the matched color using the `plt.imshow()` function as in Lab 1. Don't choose black or white because that's no fun. In a markdown cell, type the command ```![img](my_image.jpg)``` to display your chosen image and specify which color you want to match in the image.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 6 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 6 Below </h3>"
]
},
{
Expand Down Expand Up @@ -589,7 +587,7 @@
"3. Are there any topics that could use more clarification? <br>\n",
"4. Do you have any suggestions on parts of the lab to improve?__\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for the Reflection Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for the Reflection Below </h3>"
]
},
{
Expand Down
22 changes: 11 additions & 11 deletions book/labs/1_Color_Labs/2_Human_Perception/lab03.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"<h3 style=\"background-color:lightblue\"> Write your name and email below: </h3>\n",
"<h3 style=\"background-color:#6994a2\"> Write your name and email below: </h3>\n",
"\n",
"**Name:** me \n",
"\n",
Expand Down Expand Up @@ -80,7 +80,7 @@
"\n",
"Plot $Q_L(\\lambda),Q_M(\\lambda)$, and $Q_S(\\lambda)$ all on one graph. See [matplotlib's documentation](https://matplotlib.org/3.5.0/tutorials/introductory/usage.html#sphx-glr-tutorials-introductory-usage-py) on how to add a legend to your plot. The $x$-axis label should be wavelength in nanometers. The $y$-axis label should be spectral sensitivity. Download [cone_responses.csv](https://github.com/TheDataScienceLabs/DataLab_Multivariate_Calculus/blob/main/book/labs/1_Color_Labs/2_Human_Perception/cone_responses.csv) for the data.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 1 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 1 Below </h3>"
]
},
{
Expand All @@ -107,7 +107,7 @@
"*Hint: Define a function that calculates the mean squared error for an interpolant and use a loop to find the degree of interpolant with low enough error.*\n",
"\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 2 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 2 Below </h3>"
]
},
{
Expand Down Expand Up @@ -178,7 +178,7 @@
"\n",
"Not all values of $(R_S,G_S,B_S)$ are possible. Give two such examples and explain your choices.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 3 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 3 Below </h3>"
]
},
{
Expand Down Expand Up @@ -220,7 +220,7 @@
"The bounds of the integral and trapezoidal sum will be 450 to 650 because that is where $S(\\lambda)$ is 1.\n",
"For the symbolic integration, see the example below using `Polynomial.integ`.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 4 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 4 Below </h3>"
]
},
{
Expand Down Expand Up @@ -250,7 +250,7 @@
"1. Using the trapezoidal rule to estimate the three integrals (bounds are 390 to 700 because $S(\\lambda)$ has non zero values in this range)\n",
"1. Approximating the spectral power distribution of the illuminant with a high enough degree polynomial and using your polynomial interpolants of $Q_R,Q_G,$ and $Q_B$ to integrate symbolically. Justify your choice of a \"high enough degree polynomial\" for the D65 illuminant.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 5 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 5 Below </h3>"
]
},
{
Expand All @@ -273,7 +273,7 @@
" \\end{cases}.$\n",
"What is the result when $n=20$? $n=2$? $n=0.2$? Does is look like the resulting vector is approaching any specific values?\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 6 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 6 Below </h3>"
]
},
{
Expand All @@ -298,7 +298,7 @@
"\\end{cases}$\n",
"for different values of $\\Delta$. What happens when $\\Delta$ is very small?\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 7 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 7 Below </h3>"
]
},
{
Expand Down Expand Up @@ -408,7 +408,7 @@
"\n",
"Fill in the code below to implement gradient descent for $f(\\vec{x})$ to find a metamer for the D65 illuminant. Plot the spectrum of the D65 illuminant and the metamer you've found. What is the value of $f(\\vec{x})$ when the gradient descent algorithm terminates?\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 8 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 8 Below </h3>"
]
},
{
Expand Down Expand Up @@ -446,7 +446,7 @@
"1. $f$ is injective.\n",
"1. $f$ is surjective.\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for Exercise 9 Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for Exercise 9 Below </h3>"
]
},
{
Expand All @@ -465,7 +465,7 @@
"3. Are there any topics that could use more clarification? <br>\n",
"4. Do you have any suggestions on parts of the lab to improve?__\n",
"\n",
"<h3 style=\"background-color:lightblue\"> Write Answers for the Reflection Below </h3>"
"<h3 style=\"background-color:#6994a2\"> Write Answers for the Reflection Below </h3>"
]
},
{
Expand Down
Loading