cs-3843: add initial hw and slides

Fall-2024/CS-3843/Assignments/HW-1/Assignment.typ

@@ -0,0 +1,188 @@
+#show link: set text(blue)
+#show raw: set text(font: "Fira Code")
+#import "@preview/tablex:0.0.4": tablex, rowspanx, colspanx, hlinex, vlinex
+#set page(margin: (x: .5in, y: .5in))
+#let solve(solution) = [
+  #let solution = align(
+    center,
+    block(
+      inset: 5pt,
+      stroke: blue + .3pt,
+      fill: rgb(0, 149, 255, 15%),
+      radius: 4pt,
+    )[#align(left)[#solution]],
+  )
+  #solution
+]
+
+#let note(content) = [
+  #align(
+    center,
+    block(
+      inset: 5pt,
+      stroke: luma(20%) + .3pt,
+      fill: luma(95%),
+      radius: 4pt,
+    )[#align(left)[#content]],
+  )
+]
+
+#align(center)[
+  = CS 3843 Computer Organization
+  HW 1\
+  #underline[Price Hiller] *|* #underline[zfp106]
+]
+#line(length: 100%, stroke: .25pt)
+*[1][9 points]* One useful feature of C is that it supports bitwise Boolean operations. In fact, the symbols we have used for the Boolean operations are exactly those used by C: | for or, & for and, \~ for not, and ^ for exclusive-or. These can be applied to any “integral” data type. Fill in the blanks for each C expression. Follow the first example for clarification. Show your work.
+
+#solve[#table(
+    inset: (
+      x: 15pt,
+    ),
+    columns: (auto, auto, auto, auto),
+    stroke: (x, y) => (
+      left: none,
+      top: if y > 0 {
+        0.5pt
+      },
+    ),
+    table.header(
+      [C expression],
+      [Binary expression],
+      [Binary result],
+      [Hexadecimal result],
+    ),
+
+    [\~0x41], [\~[0100 0001]], [[1011 1110]], [0xBE],
+    [\~0x00], [\~[0000 0000]], [[1111 1111]], [0xFF],
+    [0x69 & 0x55], [[0110 1001] & [0101 0101]], [[0100 0001]], [0x41],
+    [0x69 | 0x55], [[0110 1001] | [0101 0101]], [[0111 1101]], [0x7D],
+  )]
+
+#note[
+  #table(
+    columns: (auto, auto, auto),
+    [
+      #underline[Work for \~0x00 below]
+
+      `0x00` in binary is `0000 0000`.
+
+      Solving `~0000 0000`:
+      #table(
+        stroke: none,
+        align: right,
+        [`~ 0000 0000`],
+        table.hline(),
+        [`1111 1111`]
+      )
+    `1111 1111` to hex is `0xFF`
+    ],
+    [
+      #underline[Work for 0x69 & 0x55 below]:
+
+      `0x69` in binary is `0110 1001`
+
+      `0x55` in binary is `0101 0101`
+
+      Solving `0x69 & 0x55`:
+      #table(
+        stroke: none,
+        align: right,
+        [`0110 1001`],
+        [`& 0101 0101`],
+        table.hline(),
+        [`0100 0001`]
+      )
+    `0100 0001` to hex is `0x41`
+    ],
+    [
+      #underline[Work for 0x69 | 0x55 below]:
+
+      `0x69` in binary is `0110 1001`
+
+      `0x55` in binary is `0101 0101`
+
+      Solving `0x69 | 0x55`:
+      #table(
+        stroke: none,
+        align: right,
+        [`0110 1001`],
+        [`| 0101 0101`],
+        table.hline(),
+        [`0111 1101`]
+      )
+    `0111 1101` to hex is `0x7D`
+    ],
+  )
+]
+
+#v(1em)
+*[2][16 points]* Fill in the table below showing the effects of the different shift operations on single byte quantities. The best way to think about shift operations is to work with binary representations. Convert the initial values to binary, perform the shifts, and then convert back to hexadecimal. Each of the answers should be 8 binary digits or 2 hexadecimal digits.
+
+Here, *a* means 0xD4 for the first line, *a* means 0x64 for the second line etc.
+
+#solve[#tablex(
+  columns: 8,
+  column-gutter: 15pt,
+  align: center + bottom,
+  auto-vlines: false,
+  auto-hlines: false,
+  stroke: .5pt,
+  header-rows: 2,
+
+  /* --- header --- */
+  colspanx(2)[*a*], (), colspanx(2)[*a << 2*], (), colspanx(2)[*Logical\ a >> 3*], (), colspanx(2)[*Arithmetic\ a >> 3*],
+  hlinex(start: 0, end: 2, stop-pre-gutter: true, stroke: 1pt),
+  hlinex(start: 2, end: 4, stop-pre-gutter: true, stroke: 1pt),
+  hlinex(start: 4, end: 6, stop-pre-gutter: true, stroke: 1pt),
+  hlinex(start: 6, end: 8, stop-pre-gutter: true, stroke: 1pt),
+  [*Hex*], [*Binary*], [*Binary*], [*Hex*],[*Binary*], [*Hex*],[*Binary*], [*Hex*],
+  hlinex(start: 0, stroke: 1pt),
+  /* -------------- */
+  [0xD4], [1101 0100], "0101 00" + [_00_], [0x50], [_000_\1 1010], [0x1A], [_111_\1 1010], [0xFA], // Good
+  hlinex(start: 0),
+  [0x64], [0110 0100], "1001 00" + [_00_], [0x90], [_000_\0 1100], [0x0C], [_000_\0 1100], [0x0C], // Good
+  hlinex(start: 0),
+  [0x72], [0111 0010], "1100 10" + [_00_], [0xC8], [_000_\0 1110], [0x0E], [_000_\0 1110], [0x0E], // Good
+  hlinex(start: 0),
+  [0x44], [0100 0100], "0001 00" + [_00_], [0x10], [_000_\0 1000], [0x08], [_000_\0 1000], [0x08],
+  hlinex(start: 0),
+)]
+
+#note[The italicized bits shows the shifts.]
+
+#v(1em)
+*[3][12 points]* Colors on web pages are specified using 24 bits: 8 bits for red, 8 green, and 8 blue. Hex is a convenient way to specify those 24 bits. Thus 0xFF0000 is bright red, 990000 is a darker red, 0xFF00FF is a bright purple, and 000000 is black.
+
+#text(red)[#underline(stroke: 2pt)[*What do you need to do?*]]
+
+#enum(
+  [Go to this website for HTML code run online\ https://htmledit.squarefree.com],
+  [Go to this website to get more html color codes\ https://htmlcolorcodes.com/],
+  [Paste the code in that online editor, then change the hex encoding for generating different colors such as Cyan, Orange, Yellow. You can choose your own choice of colors. After you generate the colors, then attach the screenshot as your answer],
+)
+
+#v(1em)
+#solve[
+  HTML used (and yes, the below is _technically_ valid as the browser will automatically resolve all other tags):
+  #note[```html
+    <p style="background-color: #957fb8">Line1</p>
+    <p style="background-color: #7e9cd8">Line2</p>
+    <p style="background-color: #a3d4d5">Line3</p>
+    <p style="background-color: #e6c384">Line4</p>
+    <p style="background-color: #ffa066">Line5</p>
+    <p style="background-color: #ff5d62">Line6</p>
+    ```]
+  #align(center)[#image(width: 65%, "./assets/rendered-html-colors.png")]]
+
+
+#v(1em)
+#text(red)[*Instructions:*]
+#enum(
+  [Show your work],
+  [You should solve all the problems manually. Then you can use calculator to check your answers.],
+  [You can submit a typed version of your HW or handwritten (scan it/take a photo, then convert it to pdf version. But you need to submit a pdf file.)],
+  [This is an individual HW.],
+  [Late submissions are not allowed.],
+  [Please include your Full Name and abc123 in your HW.],
+)