Merge branch 'master' of git.odin.cse.buffalo.edu:ODIn/Website

This commit is contained in:
Oliver Kennedy 2022-09-12 10:39:11 -04:00
commit 1649d73656
Signed by: okennedy
GPG key ID: 3E5F9B3ABD3FDB60
9 changed files with 4359 additions and 19 deletions

View file

@ -217,7 +217,7 @@ schedule:
special: "No Class: Labor Day"
dow: Mon
- date: 09/07/22
topic: Runtime Analysis
topic: Runtime Analysis - Intuitions
due: AI Quiz
dow: Wed
section_a:
@ -226,33 +226,44 @@ schedule:
section_b:
slides: slide/3b-FunctionAnalysis.html
- date: 09/09/22
topic: Runtime Analysis (contd...)
topic: Runtime Analysis - Formalism
dow: Fri
due: PA0
section_a:
slides: slide/4b-AsymptoticNotation.html
section_b:
slides: slide/4b-AsymptoticNotation.html
- week: 3
lectures:
- date: 09/12/22
topic: Collections, Sequences, ADTs
dow: Mon
topic: Runtime Analysis - Formalism (contd...)
topic:
section_a:
slides: slide/4b-AsymptoticNotation.html
section_b:
slides: slide/4b-AsymptoticNotation.html
- date: 09/14/22
topic: Array Lists
topic: Runtime Analysis - Examples
dow: Wed
section_b:
slides: slide/6b-AsymptoticExamples.html
- date: 09/16/22
topic: Linked Lists
topic: Collections, Sequences, ADTs
dow: Fri
due: PA1
section_b:
slides: slide/7b-ADTsandSequences.html
- week: 4
lectures:
- date: 09/19/22
topic: Recursion Intro
topic: Collections, Sequences, ADTs (contd...)
dow: Mon
- date: 09/21/22
topic: Divide and Conquer, Tail Recursion
topic: Collections, Sequences, ADTs (contd...)
dow: Wed
- date: 09/23/22
topic: Recursion (contd...)
topic: Recursion Intro
dow: Fri
due: WA0
- week: 5

View file

@ -1,7 +1,7 @@
---
template: templates/cse250_2022_slides.erb
title: Asymptotic Notation
date: Sept 7, 2022
date: Sept 7 and 12, 2022
textbook: "Ch. 7.3-7.4"
---
@ -342,6 +342,17 @@ textbook: "Ch. 7.3-7.4"
<p><b>Problem: </b> What if $g(n)$ doesn't bound $f(n)$ from <b>both</b> above and below?</p>
</section>
<section>
<pre><code>
if input = 1:
/* take 1 step */
else:
/* take n steps */
</code></pre>
<p class="fragment"><b>Schroedinger's Code: </b> Simultaneously like $f_1(n) = 1$ and $f_2(n) = n$</p>
</section>
<section>
<h4 class="slide_title">Upper, Lower Bounds</h4>

View file

@ -0,0 +1,241 @@
---
template: templates/cse250_2022_slides.erb
title: Asymptotic Notation Examples
date: Sept 14, 2022
textbook: "Ch. 7.3-7.4"
---
<section>
<h4 class="slide_title">Big-_ Notation Recap</h4>
<dl style="font-size: 70%">
<dt>Big-ϴ</dt>
<dd>Growth Functions in the <b>same</b> complexity class.</dd>
<dd>If $f(n) \in \Theta(g(n))$, then an algorithm that takes $f(n)$ steps is exactly as fast as one that takes $g(n)$ steps.</dd>
<dt>Big-O</dt>
<dd>Growth Functions in the <b>same or smaller</b> complexity class.</dd>
<dd>If $f(n) \in O(g(n))$, then an algorithm that takes $f(n)$ steps is as fast as or faster than one that takes $g(n)$ steps.</dd>
<dt>Big-Ω</dt>
<dd>Growth Functions in the <b>same or bigger</b> complexity class.</dd>
<dd>If $f(n) \in \Omega(g(n))$, then an algorithm that takes $f(n)$ steps is as slow as or slower than one that takes $g(n)$ steps.</dd>
</dl>
</section>
<section>
<h4 class="slide_title">Common Runtimes</h4>
<dl style="font-size: 70%;">
<dt>Constant Time: $\Theta(1)$</dt>
<dd>e.g., $T(n) = c$ (runtime is independent of $n$)</dd>
<dt>Logarithmic Time: $\Theta(\log(n))$</dt>
<dd>e.g., $T(n) = c\log(n)$ (for some constant $c$)</dd>
<dt>Linear Time: $\Theta(n)$</dt>
<dd>e.g., $T(n) = c_1n + c_0$ (for some constants $c_0, c_1$)</dd>
<dt>Quadratic Time: $\Theta(n^2)$</dt>
<dd>e.g., $T(n) = c_2n^2 + c_1n + c_0$</dd>
<dt>Polynomial Time: $\Theta(n^k)$ (for some $k \in \mathbb Z^+$)</dt>
<dd>e.g., $T(n) = c_kn^k + \ldots + c_1n + c_0$</dd>
<dt>Exponential Time: $\Theta(c^n)$ (for some $c \geq 1$)</dt>
</dl>
</section>
<section>
<h2>Constants vs Asymptotics</h2>
</section>
<section>
<h4 class="slide_title">Constant-Factor Speedups</h4>
<pre><code class="scala">
for(i ← 0 until n) { /* do work */ }
</code></pre>
<ul>
<li class="fragment">Original Body: $10$ steps <span class="fragment">(Total runtime: $10n$ steps)</span></li>
<li class="fragment">Optimized Body: $7$ steps <span class="fragment">(Total runtime: $7n$ steps)</span><ul>
</ul>
<p class="fragment"><b>Total Runtime:</b> 7/10 of original (30% faster)</p>
<p class="fragment">... but still $\Theta(n)$</p>
</section>
<section>
<h4 class="slide_title">$c$ and $n_0$</h4>
<p>Compare $T_1(n) = 100n$ vs $T_2(n) = n^2$</p>
<ul>
<li class="fragment">$100n = O(n^2)$ ($T_2$ is the slower runtime)</li>
<li class="fragment">... but $c_{high} = 1$, $n_0 = 100$</li>
<li class="fragment">Until inputs of size 100 or more, $T_2$ is the <b>faster</b> runtime</li>
</ul>
</section>
<section>
<h4 class="slide_title">$c$ and $n_0$</h4>
<p>Asymptotically slower runtimes <i>can</i> be better.</p>
<ul>
<li>An algorithm with runtime $T_2$ is better on small inputs.</li>
<li>An algorithm with runtime $T_2$ might be easier to implement or maintain</li>
<li>An algorithm with runtime $T_1$ might not exist. <ul>
<li class="fragment">(sometimes we can <i>prove</i> this, see CSE 331)</li>
</ul></li>
</ul>
</section>
<section>
<p>... but from now on, if $T_2(n)$ is in a bigger complexity class, then $T_1(n)$ is better/faster/stronger.</p>
</section>
<section>
<h2>Examples</h2>
</section>
<section>
<h4 class="slide_title">Bubble Sort</h4>
<pre><code class="scala">
bubblesort(seq: Seq[Int]):
1. n ← seq length
2. for i ← n-2 to 0, by -1:
3. for j ← i to n-1:
4. if seq(j+1) < seq(j):
5. swap seq(j) and seq(j+1)
</code></pre>
<p>What is the runtime complexity class of Bubble Sort?</p>
</section>
<section>
<h4 class="slide_title">Summation Rules</h4>
<ol style="font-size: 50%;">
<li>$\sum_{i=j}^{k}c = (k - j + 1)c$</li>
<li>$\sum_{i=j}^{k}(cf(i)) = c\sum_{i=j}^{k}f(i)$</li>
<li>$\sum_{i=j}^{k}(f(i) + g(i)) = \left(\sum_{i=j}^{k}f(i)\right) + \left(\sum_{i=j}^{k}g(i)\right)$</li>
<li>$\sum_{i=j}^{k}(f(i)) = \left(\sum_{i=\ell}^{k}(f(i))\right) - \left(\sum_{i=\ell}^{j-1}(f(i))\right)$ (for any $\ell < j$)</li>
<li>$\sum_{i=j}^{k}f(i) = f(j) + f(j+1) + \ldots + f(k-1) + f(k)$</li>
<li>$\sum_{i=j}^{k}f(i) = f(j) + \ldots + f(\ell - 1) + \left(\sum_{i=\ell}^k f(i)\right)$ (for any $j < \ell \leq k$)</li>
<li>$\sum_{i=j}^{k}f(i) = \left(\sum_{i=j}^{\ell}f(i)\right) + f(\ell+1) + \ldots + f(k)$ (for any $j \leq \ell < k$)</li>
<li>$\sum_{i=1}^{k}i = \frac{k(k+1)}{2}$</li>
<li>$\sum_{i=0}^{k}2^i = 2^{k+1}-1$</li>
<li>$n! \leq c_sn^n$ is a tight upper bound (Sterling: Some constant $c_s$ exists)</li>
</ol>
</section>
<section>
<h4 class="slide_title">Bubble Sort</h4>
<pre><code class="scala">
bubblesort(seq: Seq[Int]):
1. n ← seq length
2. for i ← n-2 to 0, by -1:
3. for j ← i to n-1:
4. if seq(j+1) < seq(j):
5. swap seq(j) and seq(j+1)
</code></pre>
<p><b>Note:</b> We can ignore the exact number of steps required by any step in the algorithm, as long as we know its complexity</p>
<p class="fragment"><b>Can we safely say this algorithm is $\Theta(n^2)$?</b></p>
</section>
<section>
<h4 class="slide_title">Bubble Sort (for Mutable Sequences)</h4>
<pre><code class="scala">
def sort(seq: mutable.Seq[Int]): Unit =
{
val n = seq.length
for(i <- n - 2 to 0 by -1; j <- i to n)
{
if(seq(n) < seq(j))
{
val temp = seq(j+1)
seq(j+1) = seq(j)
seq(j) = temp
}
}
}
</code></pre>
</section>
<section>
<h4 class="slide_title">Bubble Sort (for <b>Im</b>mutable Sequences)</h4>
<pre><code class="scala">
def sort(seq: Seq[Int]): Seq[Int] =
{
val newSeq = seq.toArray
val n = seq.length
for(i <- n - 2 to 0 by -1; j <- i to n)
{
if(newSeq(n) < newSeq(j))
{
val temp = newSeq(j+1)
newSeq(j+1) = newSeq(j)
newSeq(j) = temp
}
}
return newSeq.toList
}
</code></pre>
</section>
<section>
<h4 class="slide_title">Searching Sequences</h4>
<pre><code class="scala">
def indexOf[T](seq: Seq[T], value: T, from: Int): Int =
{
for(i <- from until seq.length)
{
if(seq(i).equals(value)) { return i }
}
return -1
}
</code></pre>
</section>
<section>
<h4 class="slide_title">Searching Sequences</h4>
<pre><code class="scala">
def count[T](seq: Seq[T], value: T): Int =
{
var count = 0;
var i = indexOf(seq, value, 0)
while(i != -1)
{
count += 1;
i = indexOf(seq, value, i+1)
}
return count
}
</code></pre>
</section>
<section>
<h4 class="slide_title">Searching Sorted Sequences</h4>
<p>... with $O(1)$ access to elements ('random access')</p>
<ul style="font-size: 80%">
<li>To search $[begin, end)$:<ul>
<li>compare $target$ to $seq[middle]$ ($middle = \frac{end+begin}{2}$</li>
<li>If $seq[middle] = target$ return $middle$</li>
<li>If $target < seq[middle]$ search $[begin, middle)$</li>
<li>If $seq[middle] < target$ search $[middle+1, end)$</li>
<li>If $begin = end$, the value doesn't exist.</li>
</ul></li>
</ul>
<p class="fragment">What if no random access is available?</p>
</section>

View file

@ -0,0 +1,196 @@
---
template: templates/cse250_2022_slides.erb
title: Asymptotic Notation Examples
date: Sept 16, 2022
textbook: "Ch. 7.1, 1.7.2"
---
<!--
<section>
<h4 class="slide_title">Types of Collections</h4>
<dl>
<dt>Iterable</dt>
<dd>Any collection of items.</dd>
<dt>Seq</dt>
<dd>A collection of items arranged in a specific order.</dd>
<dt>IndexedSeq</dt>
<dd>Like Seq, but $O(1)$ access to individual items by index.</dd>
<dt>Set</dt>
<dd>A collection of unique items.</dd>
<dt>Map</dt>
<dd>A collection of items identified by a key.</dd>
</dl>
</section>
<section>
<h4 class="slide_title">Types of Collections</h4>
<dl>
<dt>mutable.Seq</dt>
<dd>Like Seq, but can be changed.</dd>
<dt>mutable.Buffer</dt>
<dd>Like mutable.Seq, but "efficient" append.</dd>
<dt>Queue</dt>
<dd>Like Seq, but "efficient" append and remove first.</dd>
<dt>Stack</dt>
<dd>Like Seq, but "efficient" prepend and remove first.</dd>
</dl>
</section>
-->
<section>
<h4 class="slide_title">Sequences</h4>
<dl class="fragment">
<dt>The Fibonacci Sequence</dt>
<dd>1, 1, 2, 3, 5, 8, 13, 21, 34, 55</dd>
<dt>Characters of a String</dt>
<dd>'H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd'</dd>
<dt>Lines of a file.</dt>
</dl>
</section>
<section>
<h4 class="slide_title">What can you do with a Sequence?</h4>
<ul>
<li>Enumerate every element of the sequence.</li>
<li>Get the 'n'th element.</li>
<li>Modify the 'n'th element (mutable only).</li>
</ul>
</section>
<section>
<h4 class="slide_title">Abstract Data Types (ADTs)</h4>
<svg data-src="graphics/07b/adt_opaque_box.svg"/>
</section>
<section>
<h4 class="slide_title">The <tt>Seq</tt> ADT</h4>
<dl style="font-size: 70%;">
<dt><tt>apply(<b>idx</b>: Int): [A]</tt></dt>
<dd>Get the element (of type A) at position <b>idx</b>.</dd>
<dt><tt>iterator: Iterator[A]</tt></dt>
<dd>Get access to <ul>view</ul> all elements in the seq, in order, once.</dd>
<dt><tt>length: Int</tt></dt>
<dd>Count the number of elements in the seq.</dd>
</dl>
</section>
<section>
<h4 class="slide_title">The <tt>mutable.Seq</tt> ADT</h4>
<dl style="font-size: 70%;">
<dt><tt>apply(<b>idx</b>: Int): [A]</tt></dt>
<dd>Get the element (of type A) at position <b>idx</b>.</dd>
<dt><tt>iterator: Iterator[A]</tt></dt>
<dd>Get access to <ul>view</ul> all elements in the seq, in order, once.</dd>
<dt><tt>length: Int</tt></dt>
<dd>Count the number of elements in the seq.</dd>
<dt><tt>insert(<b>idx</b>: Int, <b>elem</b>: A): Unit</tt></dt>
<dd>Insert an element at position <b>idx</b> with value <b>elem</b>.</dd>
<dt><tt>remove(<b>idx</b>: Int): A</tt></dt>
<dd>Remove the element at position <b>idx</b> and return the removed value.</dd>
</dl>
</section>
<section>
<p>... so how do we implement it?</p>
</section>
<section>
<h4 class="slide_title">RAM (CSE 220 crossover)</h4>
<svg data-src="graphics/07b/ram.svg"/>
</section>
<section>
<h4 class="slide_title">RAM</h4>
<dl>
<dt><tt>new T()</tt></dt>
<dd>Find some unused part of memory big enough to fit a <tt>T</tt>, mark it used, and return the <i>address</i> of that location.</dd>
</dl>
<div class="fragment">
<pre><code>
var arr = new Array[Int](50)
</code></pre>
allocates $50 * 4 = 200$ bytes of memory (Java <tt>Int</tt> is 4 bytes).
</div>
<p class="fragment">If <tt>arr</tt> is at address $a$, where should you look for <tt>arr(19)</tt>? <span class="fragment"><tt>arr(55)</tt>?</span></p>
</section>
<section>
<h4 class="slide_title">Array[T] : Seq[T]</h4>
<p>An Array of $n$ items of type <tt>T</tt>:</p>
<ul>
<li>4 bytes for $n$ (optional)</li>
<li>4 bytes for $\textt{sizeof}(\texttt{T})$) (optional).</li>
<li>$n \times \texttt{sizeof}(\texttt{T})$ bytes of memory.</li>
</ul>
<svg data-src="graphics/07b/array.svg"/>
</section>
<section>
<h4 class="slide_title">Array[T] : Seq[T]</h4>
<p>How do we implement...</p>
<dl style="font-size: 70%;">
<dt><tt>apply(<b>idx</b>: Int): [A]</tt></dt>
<dd>Get the element (of type A) at position <b>idx</b>.</dd>
<dt><tt>length: Int</tt></dt>
<dd>Count the number of elements in the seq.</dd>
<dt><tt>insert(<b>idx</b>: Int, <b>elem</b>: A): Unit</tt></dt>
<dd>Insert an element at position <b>idx</b> with value <b>elem</b>.</dd>
<dt><tt>remove(<b>idx</b>: Int): A</tt></dt>
<dd>Remove the element at position <b>idx</b> and return the removed value.</dd>
</dl>
</section>
<section>
<p>Insert and remove don't make sense on arrays...</p>
<p class="fragment"><b>Idea</b> Reserve extra space in the array!</p>
</section>
<section>
<h4 class="slide_title">ArrayBuffer[T] : Buffer[T]</h4>
<p>An ArrayBuffer of $n$ items of type <tt>T</tt>:</p>
<ul>
<li>4 bytes for $n$ (optional)</li>
<li>4 bytes for $\textt{sizeof}(\texttt{T})$) (optional).</li>
<li style="color: red">4 bytes for the number of fields $used$</li>
<li>$n \times \texttt{sizeof}(\texttt{T})$ bytes of memory.</li>
</ul>
<svg data-src="graphics/07b/arraybuffer.svg"/>
</section>
<section>
<p>... to be continued</p>
</section>

View file

@ -2,9 +2,9 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="126.76643mm"
height="99.508858mm"
viewBox="0 0 126.76642 99.508857"
width="136.51051mm"
height="86.075104mm"
viewBox="0 0 136.5105 86.075103"
version="1.1"
id="svg5"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
@ -23,13 +23,13 @@
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.2810466"
inkscape:cx="506.61701"
inkscape:cy="255.26004"
inkscape:window-width="2560"
inkscape:window-height="1403"
inkscape:zoom="2.8356116"
inkscape:cx="355.47887"
inkscape:cy="93.101608"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="1080"
inkscape:window-y="289"
inkscape:window-y="352"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
@ -67,7 +67,7 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-18.4677,-24.161597)">
transform="translate(-19.088647,-26.515478)">
<path
style="fill:none;stroke:#000000;stroke-width:0.765;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#Arrow1Lstart);marker-end:url(#Arrow1Lend)"
d="m 28.315719,35.71373 v 67.83319 H 138.74638"
@ -134,5 +134,59 @@
d="M 88.355691,96.083217 H 105.10499"
id="path15823" />
</g>
<g
id="g17463"
class="fragment">
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="123.15142"
y="39.482349"
id="text4857"><tspan
sodipodi:role="line"
id="tspan4855"
style="stroke-width:0.264583"
x="123.15142"
y="39.482349">f(n)</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="96.477829"
y="49.483253"
id="text8029"><tspan
sodipodi:role="line"
id="tspan8027"
style="stroke-width:0.264583"
x="96.477829"
y="49.483253">c<tspan
style="font-size:65%;baseline-shift:sub"
id="tspan8397">high</tspan>g(n)</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="135.1517"
y="61.981133"
id="text8029-4"><tspan
sodipodi:role="line"
id="tspan8027-8"
style="stroke-width:0.264583"
x="135.1517"
y="61.981133">c<tspan
style="font-size:65%;baseline-shift:sub"
id="tspan8397-1">low</tspan>g(n)</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="83.604767"
y="29.676695"
id="text14068"><tspan
sodipodi:role="line"
id="tspan14066"
style="stroke-width:0.264583"
x="83.604767"
y="29.676695">n<tspan
style="font-size:65%;baseline-shift:sub"
id="tspan15368">0</tspan></tspan></text>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

View file

@ -0,0 +1,175 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="190.04921mm"
height="94.972168mm"
viewBox="0 0 190.04921 94.972168"
version="1.1"
id="svg17502"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="adt_opaque_box.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview17504"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.81716208"
inkscape:cx="95.4523"
inkscape:cy="216.6033"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="1080"
inkscape:window-y="352"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs17499">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="34.394546 : 19.403142 : 1"
inkscape:vp_y="0 : 999.99999 : 0"
inkscape:vp_z="202.16837 : 20.644422 : 1"
inkscape:persp3d-origin="134.67728 : -128.24454 : 1"
id="perspective17675" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-6.5907795,-23.020932)">
<g
id="g18119"
transform="translate(18.066831,-23.077925)">
<path
d="m 96.424634,77.617915 24.267746,0.801577 V 105.85362 L 96.424634,97.337312 Z"
style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="path17873" />
<path
d="M 73.756543,78.323222 V 102.26983 L 96.424634,97.337312 V 77.617915 Z"
style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="path17875" />
<path
d="m 73.756543,102.26983 20.412474,13.84659 26.523363,-10.2628 -24.267746,-8.516308 z"
style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="path17877" />
<path
d="m 73.756543,78.323222 20.412474,1.42828 26.523363,-1.33201 -24.267746,-0.801577 z"
style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="path17879" />
<path
d="m 94.169017,79.751502 v 36.364918 l 26.523363,-10.2628 V 78.419492 Z"
style="fill:#b3b3b3;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="path17881" />
<path
d="m 73.756543,78.323222 20.412474,1.42828 V 116.11642 L 73.756543,102.26983 Z"
style="fill:#4d4d4d;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="path17883" />
</g>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="13.048262"
y="49.845692"
id="text19509"><tspan
sodipodi:role="line"
id="tspan19507"
style="font-weight:bold;stroke-width:0.264583"
x="13.048262"
y="49.845692">Read 'n'th item</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="9.0381718"
y="71.738815"
id="text21625"><tspan
sodipodi:role="line"
id="tspan21623"
style="font-weight:bold;stroke-width:0.264583"
x="9.0381718"
y="71.738815">Read Everything</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="6.0726376"
y="94.726097"
id="text26603"><tspan
sodipodi:role="line"
id="tspan26601"
style="font-weight:bold;stroke-width:0.264583"
x="6.0726376"
y="94.726097">Update 'n'th item</tspan></text>
<path
style="fill:none;stroke:#000000;stroke-width:0.865;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 91.823372,76.546072 63.51067,92.76095"
id="path27560"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.865;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 91.823372,68.079404 63.51067,70.486279"
id="path27642"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.865;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 91.823372,57.49607 63.51067,49.319612"
id="path27895"
sodipodi:nodetypes="cc" />
<g
id="g38467"
class="fragment">
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="121.7354"
y="27.309383"
id="text29768"><tspan
sodipodi:role="line"
id="tspan29766"
style="stroke-width:0.264583"
x="121.7354"
y="27.309383">Data are in an opaque box</tspan><tspan
sodipodi:role="line"
style="stroke-width:0.264583"
x="121.7354"
y="34.364933"
id="tspan29770">(no specified layout)</tspan></text>
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 131.44043,36.361695 119.13335,66.735814"
id="path38379" />
</g>
<g
id="g38473"
class="fragment">
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="81.55249"
y="109.76346"
id="text38174"><tspan
sodipodi:role="line"
id="tspan38172"
style="stroke-width:0.264583"
x="81.55249"
y="109.76346">Access goverened by semantics (what)</tspan><tspan
sodipodi:role="line"
style="stroke-width:0.264583"
x="81.55249"
y="116.81901"
id="tspan38176">not implementation (how)</tspan></text>
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 112.75516,104.9034 73.204601,73.931454"
id="path38381" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.3 KiB

View file

@ -0,0 +1,185 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="129.14798mm"
height="20.093582mm"
viewBox="0 0 129.14798 20.093582"
version="1.1"
id="svg65178"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="array.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview65180"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.5266337"
inkscape:cx="129.04209"
inkscape:cy="4.5852518"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="1080"
inkscape:window-y="352"
inkscape:window-maximized="1"
inkscape:current-layer="g54345" />
<defs
id="defs65175" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-52.537237,-92.806901)">
<g
id="g54345"
transform="translate(44.828291,27.38247)"
class="fragment">
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54335"
width="19.094"
height="19.09358"
x="27.613897"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54337"
width="19.09358"
height="19.09358"
x="46.707478"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54339"
width="19.09358"
height="19.09358"
x="65.801056"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54341"
width="19.09358"
height="19.09358"
x="84.894638"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54343"
width="19.09358"
height="19.09358"
x="103.98822"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#26a269;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect65382"
width="9.7024746"
height="19.093582"
x="17.911421"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#26a269;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect65382-1"
width="9.7024746"
height="19.093582"
x="8.2089462"
y="65.924431" />
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="11.254955"
y="77.051834"
id="text67192"><tspan
sodipodi:role="line"
id="tspan67190"
style="stroke-width:0.264583"
x="11.254955"
y="77.051834">n</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="19.137043"
y="76.962257"
id="text68054"><tspan
sodipodi:role="line"
id="tspan68052"
style="stroke-width:0.264583"
x="19.137043"
y="76.962257">|T|</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="37.233932"
y="76.962257"
id="text69216"><tspan
sodipodi:role="line"
id="tspan69214"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="37.233932"
y="76.962257">a[0]</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="56.327305"
y="76.962257"
id="text70768"><tspan
sodipodi:role="line"
id="tspan70766"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="56.327305"
y="76.962257">a[1]</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="75.420883"
y="76.962257"
id="text70772"><tspan
sodipodi:role="line"
id="tspan70770"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="75.420883"
y="76.962257">a[2]</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="94.514465"
y="76.962257"
id="text70776"><tspan
sodipodi:role="line"
id="tspan70774"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="94.514465"
y="76.962257">a[3]</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="113.60805"
y="76.962257"
id="text70780"><tspan
sodipodi:role="line"
id="tspan70778"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="113.60805"
y="76.962257">a[4]</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="134.77472"
y="76.962257"
id="text81584"><tspan
sodipodi:role="line"
id="tspan81582"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="134.77472"
y="76.962257">...</tspan></text>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

View file

@ -0,0 +1,253 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="138.85046mm"
height="20.093582mm"
viewBox="0 0 138.85046 20.093582"
version="1.1"
id="svg65178"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="arraybuffer.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview65180"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.5266337"
inkscape:cx="165.7241"
inkscape:cy="4.5852518"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="1080"
inkscape:window-y="352"
inkscape:window-maximized="1"
inkscape:current-layer="g54345" />
<defs
id="defs65175" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-42.834763,-92.806901)">
<g
id="g54345"
transform="translate(44.828291,27.38247)"
class="fragment">
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54335"
width="19.094"
height="19.09358"
x="27.613478"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54337"
width="19.09358"
height="19.09358"
x="46.707478"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54339"
width="19.09358"
height="19.09358"
x="65.801056"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54341"
width="19.09358"
height="19.09358"
x="84.894638"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#666666;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect54343"
width="19.09358"
height="19.09358"
x="103.98822"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#26a269;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect65382"
width="9.7024746"
height="19.093582"
x="8.2089462"
y="65.924431" />
<rect
style="fill:#ffffff;stroke:#26a269;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect65382-1"
width="9.7024746"
height="19.093582"
x="-1.4935284"
y="65.924431" />
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="1.5524807"
y="77.051834"
id="text67192"><tspan
sodipodi:role="line"
id="tspan67190"
style="stroke-width:0.264583"
x="1.5524807"
y="77.051834">n</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="9.4345684"
y="76.962257"
id="text68054"><tspan
sodipodi:role="line"
id="tspan68052"
style="stroke-width:0.264583"
x="9.4345684"
y="76.962257">|T|</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:0.95;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="37.233932"
y="72.213264"
id="text69216"><tspan
sodipodi:role="line"
id="tspan69214"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="37.233932"
y="72.213264">a[0]</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="37.233932"
y="77.575485"
id="tspan83565">or</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="37.233932"
y="82.937698"
id="tspan83567">None</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="134.77472"
y="76.962257"
id="text81584"><tspan
sodipodi:role="line"
id="tspan81582"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="134.77472"
y="76.962257">...</tspan></text>
<rect
style="fill:#ffffff;stroke:#26a269;stroke-width:1;stroke-linejoin:round;stroke-dashoffset:26.1543"
id="rect82704"
width="9.7024746"
height="19.093582"
x="17.911423"
y="65.924431" />
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="20.990503"
y="76.962257"
id="text82708"><tspan
sodipodi:role="line"
id="tspan82706"
style="stroke-width:0.264583"
x="20.990503"
y="76.962257">u</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:0.95;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="56.327305"
y="72.213264"
id="text85837"><tspan
sodipodi:role="line"
id="tspan85831"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="56.327305"
y="72.213264">a[1]</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="56.327305"
y="77.575485"
id="tspan85833">or</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="56.327305"
y="82.937698"
id="tspan85835">None</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:0.95;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="75.420883"
y="72.213264"
id="text85845"><tspan
sodipodi:role="line"
id="tspan85839"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="75.420883"
y="72.213264">a[2]</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="75.420883"
y="77.575485"
id="tspan85841">or</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="75.420883"
y="82.937698"
id="tspan85843">None</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:0.95;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="94.514465"
y="72.213264"
id="text85865"><tspan
sodipodi:role="line"
id="tspan85859"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="94.514465"
y="72.213264">a[3]</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="94.514465"
y="77.575485"
id="tspan85861">or</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="94.514465"
y="82.937698"
id="tspan85863">None</tspan></text>
<text
xml:space="preserve"
style="font-size:5.64444px;line-height:0.95;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.264583"
x="113.60805"
y="72.213264"
id="text85873"><tspan
sodipodi:role="line"
id="tspan85867"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="113.60805"
y="72.213264">a[4]</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="113.60805"
y="77.575485"
id="tspan85869">or</tspan><tspan
sodipodi:role="line"
style="text-align:center;text-anchor:middle;stroke-width:0.264583"
x="113.60805"
y="82.937698"
id="tspan85871">None</tspan></text>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.8 KiB

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 95 KiB