EIP
/
arrays-simpleimageeditor


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502
							<!DOCTYPE html><html><head><meta charset="utf-8"><style>body {
  width: 45em;
  border: 1px solid #ddd;
  outline: 1300px solid #fff;
  margin: 16px auto;
}

body .markdown-body
{
  padding: 30px;
}

@font-face {
  font-family: octicons-anchor;
  src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAYcAA0AAAAACjQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAca8vGTk9TLzIAAAFMAAAARAAAAFZG1VHVY21hcAAAAZAAAAA+AAABQgAP9AdjdnQgAAAB0AAAAAQAAAAEACICiGdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAADRAAABEKyikaNoZWFkAAACsAAAAC0AAAA2AtXoA2hoZWEAAALgAAAAHAAAACQHngNFaG10eAAAAvwAAAAQAAAAEAwAACJsb2NhAAADDAAAAAoAAAAKALIAVG1heHAAAAMYAAAAHwAAACABEAB2bmFtZQAAAzgAAALBAAAFu3I9x/Nwb3N0AAAF/AAAAB0AAAAvaoFvbwAAAAEAAAAAzBdyYwAAAADP2IQvAAAAAM/bz7t4nGNgZGFgnMDAysDB1Ml0hoGBoR9CM75mMGLkYGBgYmBlZsAKAtJcUxgcPsR8iGF2+O/AEMPsznAYKMwIkgMA5REMOXicY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+h5j//yEk/3KoSgZGNgYYk4GRCUgwMaACRoZhDwCs7QgGAAAAIgKIAAAAAf//AAJ4nHWMMQrCQBBF/0zWrCCIKUQsTDCL2EXMohYGSSmorScInsRGL2DOYJe0Ntp7BK+gJ1BxF1stZvjz/v8DRghQzEc4kIgKwiAppcA9LtzKLSkdNhKFY3HF4lK69ExKslx7Xa+vPRVS43G98vG1DnkDMIBUgFN0MDXflU8tbaZOUkXUH0+U27RoRpOIyCKjbMCVejwypzJJG4jIwb43rfl6wbwanocrJm9XFYfskuVC5K/TPyczNU7b84CXcbxks1Un6H6tLH9vf2LRnn8Ax7A5WQAAAHicY2BkYGAA4teL1+yI57f5ysDNwgAC529f0kOmWRiYVgEpDgYmEA8AUzEKsQAAAHicY2BkYGB2+O/AEMPCAAJAkpEBFbAAADgKAe0EAAAiAAAAAAQAAAAEAAAAAAAAKgAqACoAiAAAeJxjYGRgYGBhsGFgYgABEMkFhAwM/xn0QAIAD6YBhwB4nI1Ty07cMBS9QwKlQapQW3VXySvEqDCZGbGaHULiIQ1FKgjWMxknMfLEke2A+IJu+wntrt/QbVf9gG75jK577Lg8K1qQPCfnnnt8fX1NRC/pmjrk/zprC+8D7tBy9DHgBXoWfQ44Av8t4Bj4Z8CLtBL9CniJluPXASf0Lm4CXqFX8Q84dOLnMB17N4c7tBo1AS/Qi+hTwBH4rwHHwN8DXqQ30XXAS7QaLwSc0Gn8NuAVWou/gFmnjLrEaEh9GmDdDGgL3B4JsrRPDU2hTOiMSuJUIdKQQayiAth69r6akSSFqIJuA19TrzCIaY8sIoxyrNIrL//pw7A2iMygkX5vDj+G+kuoLdX4GlGK/8Lnlz6/h9MpmoO9rafrz7ILXEHHaAx95s9lsI7AHNMBWEZHULnfAXwG9/ZqdzLI08iuwRloXE8kfhXYAvE23+23DU3t626rbs8/8adv+9DWknsHp3E17oCf+Z48rvEQNZ78paYM38qfk3v/u3l3u3GXN2Dmvmvpf1Srwk3pB/VSsp512bA/GG5i2WJ7wu430yQ5K3nFGiOqgtmSB5pJVSizwaacmUZzZhXLlZTq8qGGFY2YcSkqbth6aW1tRmlaCFs2016m5qn36SbJrqosG4uMV4aP2PHBmB3tjtmgN2izkGQyLWprekbIntJFing32a5rKWCN/SdSoga45EJykyQ7asZvHQ8PTm6cslIpwyeyjbVltNikc2HTR7YKh9LBl9DADC0U/jLcBZDKrMhUBfQBvXRzLtFtjU9eNHKin0x5InTqb8lNpfKv1s1xHzTXRqgKzek/mb7nB8RZTCDhGEX3kK/8Q75AmUM/eLkfA+0Hi908Kx4eNsMgudg5GLdRD7a84npi+YxNr5i5KIbW5izXas7cHXIMAau1OueZhfj+cOcP3P8MNIWLyYOBuxL6DRylJ4cAAAB4nGNgYoAALjDJyIAOWMCiTIxMLDmZedkABtIBygAAAA==) format('woff');
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #333;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
}

.markdown-body a {
  background: transparent;
}

.markdown-body a:active,
.markdown-body a:hover {
  outline: 0;
}

.markdown-body strong {
  font-weight: bold;
}

.markdown-body h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

.markdown-body img {
  border: 0;
}

.markdown-body hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

.markdown-body pre {
  overflow: auto;
}

.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

.markdown-body input {
  color: inherit;
  font: inherit;
  margin: 0;
}

.markdown-body html input[disabled] {
  cursor: default;
}

.markdown-body input {
  line-height: normal;
}

.markdown-body input[type="checkbox"] {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

.markdown-body table {
  border-collapse: collapse;
  border-spacing: 0;
}

.markdown-body td,
.markdown-body th {
  padding: 0;
}

.markdown-body * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.markdown-body input {
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

.markdown-body a {
  color: #4183c4;
  text-decoration: none;
}

.markdown-body a:hover,
.markdown-body a:focus,
.markdown-body a:active {
  text-decoration: underline;
}

.markdown-body hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
}

.markdown-body hr:before {
  display: table;
  content: "";
}

.markdown-body hr:after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.1;
}

.markdown-body h1 {
  font-size: 30px;
}

.markdown-body h2 {
  font-size: 21px;
}

.markdown-body h3 {
  font-size: 16px;
}

.markdown-body h4 {
  font-size: 14px;
}

.markdown-body h5 {
  font-size: 12px;
}

.markdown-body h6 {
  font-size: 11px;
}

.markdown-body blockquote {
  margin: 0;
}

.markdown-body ul,
.markdown-body ol {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body ol ol,
.markdown-body ul ol {
  list-style-type: lower-roman;
}

.markdown-body ul ul ol,
.markdown-body ul ol ol,
.markdown-body ol ul ol,
.markdown-body ol ol ol {
  list-style-type: lower-alpha;
}

.markdown-body dd {
  margin-left: 0;
}

.markdown-body code {
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.markdown-body pre {
  margin-top: 0;
  margin-bottom: 0;
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.markdown-body .octicon {
  font: normal normal 16px octicons-anchor;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.markdown-body .octicon-link:before {
  content: '\f05c';
}

.markdown-body>*:first-child {
  margin-top: 0 !important;
}

.markdown-body>*:last-child {
  margin-bottom: 0 !important;
}

.markdown-body .anchor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding-right: 6px;
  padding-left: 30px;
  margin-left: -30px;
}

.markdown-body .anchor:focus {
  outline: none;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  position: relative;
  margin-top: 1em;
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 1.4;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
  display: none;
  color: #000;
  vertical-align: middle;
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
  padding-left: 8px;
  margin-left: -30px;
  line-height: 1;
  text-decoration: none;
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
  display: inline-block;
}

.markdown-body h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid #eee;
}

.markdown-body h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid #eee;
}

.markdown-body h3 {
  font-size: 1.5em;
  line-height: 1.43;
}

.markdown-body h4 {
  font-size: 1.25em;
}

.markdown-body h5 {
  font-size: 1em;
}

.markdown-body h6 {
  font-size: 1em;
  color: #777;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body li>p {
  margin-top: 16px;
}

.markdown-body dl {
  padding: 0;
}

.markdown-body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

.markdown-body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.markdown-body blockquote {
  padding: 0 15px;
  color: #777;
  border-left: 4px solid #ddd;
}

.markdown-body blockquote>:first-child {
  margin-top: 0;
}

.markdown-body blockquote>:last-child {
  margin-bottom: 0;
}

.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

.markdown-body table th {
  font-weight: bold;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #ddd;
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

.markdown-body img {
  max-width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.markdown-body code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

.markdown-body code:before,
.markdown-body code:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

.markdown-body pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.markdown-body .highlight {
  margin-bottom: 16px;
}

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border-radius: 3px;
}

.markdown-body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.markdown-body pre {
  word-wrap: normal;
}

.markdown-body pre code {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.markdown-body pre code:before,
.markdown-body pre code:after {
  content: normal;
}

.markdown-body .highlight {
  background: #fff;
}

.markdown-body .highlight .h {
  color: #333;
  font-style: normal;
  font-weight: normal;
}

.markdown-body .highlight .mf,
.markdown-body .highlight .mh,
.markdown-body .highlight .mi,
.markdown-body .highlight .mo,
.markdown-body .highlight .il,
.markdown-body .highlight .m {
  color: #945277;
}

.markdown-body .highlight .s,
.markdown-body .highlight .sb,
.markdown-body .highlight .sc,
.markdown-body .highlight .sd,
.markdown-body .highlight .s2,
.markdown-body .highlight .se,
.markdown-body .highlight .sh,
.markdown-body .highlight .si,
.markdown-body .highlight .sx,
.markdown-body .highlight .s1 {
  color: #df5000;
}

.markdown-body .highlight .kc,
.markdown-body .highlight .kd,
.markdown-body .highlight .kn,
.markdown-body .highlight .kp,
.markdown-body .highlight .kr,
.markdown-body .highlight .kt,
.markdown-body .highlight .k,
.markdown-body .highlight .o {
  font-weight: bold;
}

.markdown-body .highlight .kt {
  color: #458;
}

.markdown-body .highlight .c,
.markdown-body .highlight .cm,
.markdown-body .highlight .c1 {
  color: #998;
  font-style: italic;
}

.markdown-body .highlight .cp,
.markdown-body .highlight .cs,
.markdown-body .highlight .cp .h {
  color: #999;
  font-weight: bold;
}

.markdown-body .highlight .cs {
  font-style: italic;
}

.markdown-body .highlight .n {
  color: #333;
}

.markdown-body .highlight .na,
.markdown-body .highlight .nv,
.markdown-body .highlight .vc,
.markdown-body .highlight .vg,
.markdown-body .highlight .vi {
  color: #008080;
}

.markdown-body .highlight .nb {
  color: #0086B3;
}

.markdown-body .highlight .nc {
  color: #458;
  font-weight: bold;
}

.markdown-body .highlight .no {
  color: #094e99;
}

.markdown-body .highlight .ni {
  color: #800080;
}

.markdown-body .highlight .ne {
  color: #990000;
  font-weight: bold;
}

.markdown-body .highlight .nf {
  color: #945277;
  font-weight: bold;
}

.markdown-body .highlight .nn {
  color: #555;
}

.markdown-body .highlight .nt {
  color: #000080;
}

.markdown-body .highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}

.markdown-body .highlight .gd {
  color: #000;
  background-color: #fdd;
}

.markdown-body .highlight .gd .x {
  color: #000;
  background-color: #faa;
}

.markdown-body .highlight .ge {
  font-style: italic;
}

.markdown-body .highlight .gr {
  color: #aa0000;
}

.markdown-body .highlight .gh {
  color: #999;
}

.markdown-body .highlight .gi {
  color: #000;
  background-color: #dfd;
}

.markdown-body .highlight .gi .x {
  color: #000;
  background-color: #afa;
}

.markdown-body .highlight .go {
  color: #888;
}

.markdown-body .highlight .gp {
  color: #555;
}

.markdown-body .highlight .gs {
  font-weight: bold;
}

.markdown-body .highlight .gu {
  color: #800080;
  font-weight: bold;
}

.markdown-body .highlight .gt {
  color: #aa0000;
}

.markdown-body .highlight .ow {
  font-weight: bold;
}

.markdown-body .highlight .w {
  color: #bbb;
}

.markdown-body .highlight .sr {
  color: #017936;
}

.markdown-body .highlight .ss {
  color: #8b467f;
}

.markdown-body .highlight .bp {
  color: #999;
}

.markdown-body .highlight .gc {
  color: #999;
  background-color: #EAF2F5;
}

.markdown-body kbd {
  background-color: #e7e7e7;
  background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);
  background-image: linear-gradient(#fefefe, #e7e7e7);
  background-repeat: repeat-x;
  display: inline-block;
  padding: 3px 5px;
  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 10px;
  color: #000;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
}

.markdown-body .highlight .pl-coc,
.markdown-body .highlight .pl-entm,
.markdown-body .highlight .pl-eoa,
.markdown-body .highlight .pl-mai .pl-sf,
.markdown-body .highlight .pl-pdv,
.markdown-body .highlight .pl-sc,
.markdown-body .highlight .pl-sr,
.markdown-body .highlight .pl-v,
.markdown-body .highlight .pl-vpf {
  color: #0086b3;
}

.markdown-body .highlight .pl-eoac,
.markdown-body .highlight .pl-mdht,
.markdown-body .highlight .pl-mi1,
.markdown-body .highlight .pl-mri,
.markdown-body .highlight .pl-va,
.markdown-body .highlight .pl-vpu {
  color: #008080;
}

.markdown-body .highlight .pl-c,
.markdown-body .highlight .pl-pdc {
  color: #b4b7b4;
  font-style: italic;
}

.markdown-body .highlight .pl-k,
.markdown-body .highlight .pl-ko,
.markdown-body .highlight .pl-kolp,
.markdown-body .highlight .pl-mc,
.markdown-body .highlight .pl-mr,
.markdown-body .highlight .pl-ms,
.markdown-body .highlight .pl-s,
.markdown-body .highlight .pl-sok,
.markdown-body .highlight .pl-st {
  color: #6e5494;
}

.markdown-body .highlight .pl-ef,
.markdown-body .highlight .pl-enf,
.markdown-body .highlight .pl-enm,
.markdown-body .highlight .pl-entc,
.markdown-body .highlight .pl-eoi,
.markdown-body .highlight .pl-sf,
.markdown-body .highlight .pl-smc {
  color: #d12089;
}

.markdown-body .highlight .pl-ens,
.markdown-body .highlight .pl-eoai,
.markdown-body .highlight .pl-kos,
.markdown-body .highlight .pl-mh .pl-pdh,
.markdown-body .highlight .pl-mp,
.markdown-body .highlight .pl-pde,
.markdown-body .highlight .pl-stp {
  color: #458;
}

.markdown-body .highlight .pl-enti {
  color: #d12089;
  font-weight: bold;
}

.markdown-body .highlight .pl-cce,
.markdown-body .highlight .pl-enc,
.markdown-body .highlight .pl-kou,
.markdown-body .highlight .pl-mq {
  color: #f93;
}

.markdown-body .highlight .pl-mp1 .pl-sf {
  color: #458;
  font-weight: bold;
}

.markdown-body .highlight .pl-cos,
.markdown-body .highlight .pl-ent,
.markdown-body .highlight .pl-md,
.markdown-body .highlight .pl-mdhf,
.markdown-body .highlight .pl-ml,
.markdown-body .highlight .pl-pdc1,
.markdown-body .highlight .pl-pds,
.markdown-body .highlight .pl-s1,
.markdown-body .highlight .pl-scp,
.markdown-body .highlight .pl-sol {
  color: #df5000;
}

.markdown-body .highlight .pl-c1,
.markdown-body .highlight .pl-cn,
.markdown-body .highlight .pl-pse,
.markdown-body .highlight .pl-pse .pl-s2,
.markdown-body .highlight .pl-vi {
  color: #a31515;
}

.markdown-body .highlight .pl-mb,
.markdown-body .highlight .pl-pdb {
  color: #df5000;
  font-weight: bold;
}

.markdown-body .highlight .pl-mi,
.markdown-body .highlight .pl-pdi {
  color: #6e5494;
  font-style: italic;
}

.markdown-body .highlight .pl-ms1 {
  background-color: #f5f5f5;
}

.markdown-body .highlight .pl-mdh,
.markdown-body .highlight .pl-mdi {
  font-weight: bold;
}

.markdown-body .highlight .pl-mdr {
  color: #0086b3;
  font-weight: bold;
}

.markdown-body .highlight .pl-s2 {
  color: #333;
}

.markdown-body .highlight .pl-ii {
  background-color: #df5000;
  color: #fff;
}

.markdown-body .highlight .pl-ib {
  background-color: #f93;
}

.markdown-body .highlight .pl-id {
  background-color: #a31515;
  color: #fff;
}

.markdown-body .highlight .pl-iu {
  background-color: #b4b7b4;
}

.markdown-body .highlight .pl-mo {
  color: #969896;
}

.markdown-body .task-list-item {
  list-style-type: none;
}

.markdown-body .task-list-item+.task-list-item {
  margin-top: 3px;
}

.markdown-body .task-list-item input {
  float: left;
  margin: 0.3em 0 0.25em -1.6em;
  vertical-align: middle;
}</style><script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
MathJax.Hub.Config({
  config: ["MMLorHTML.js"],
  extensions: ["tex2jax.js"],
  jax: ["input/TeX"],
  tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: false
  },
  TeX: {
    extensions: ["AMSmath.js", "AMSsymbols.js"],
    TagSide: "right",
    TagIndent: ".8em",
    MultLineWidth: "85%",
    equationNumbers: {
      autoNumber: "AMS",
    },
    unicode: {
      fonts: "STIXGeneral,'Arial Unicode MS'"
    }
  },
  showProcessingMessages: false
});
</script>
<title>arrays-SimpleImageEditor</title></head><body><article class="markdown-body"><p><a href="#markdown-header-arrays-simple-image-editor">English</a> | <a href="#markdown-header-arreglos-editor-de-imagenes-simple">Español</a></p>

<h1>
<a id="user-content-arreglos---editor-de-imagenes-simple" class="anchor" href="#arreglos---editor-de-imagenes-simple" aria-hidden="true"><span class="octicon octicon-link"></span></a>Arreglos - Editor de Imagenes Simple</h1>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main1.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main1.png" alt="main1.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main2.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main2.png" alt="main2.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main3.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main3.png" alt="main3.png" style="max-width:100%;"></a></p>

<p>Los arreglos de datos (<em>arrays</em>) nos facilitan guardar y trabajar con grupos de datos del mismo tipo. Los datos se guardan en espacios de memoria consecutivos a los que se puede acceder utilizando el nombre del arreglo e índices o suscritos que indican la posición en que se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder a los datos de un arreglo. En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos simples de procesamiento de imágenes para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales. </p>

<h2>
<a id="user-content-objetivos" class="anchor" href="#objetivos" aria-hidden="true"><span class="octicon octicon-link"></span></a>Objetivos:</h2>

<ol>
<li><p>Practicar el acceder y manipular datos en un arreglo.</p></li>
<li><p>Aplicar ciclos anidados para implementar algoritmos simples de procesamiento de imágenes.</p></li>
<li><p>Utilizar expresiones aritméticas para transformar colores de pixeles.</p></li>
<li><p>Acceder pixeles en una imagen y descomponerlos en sus componentes rojo, azul y verde.</p></li>
</ol>

<h2>
<a id="user-content-pre-lab" class="anchor" href="#pre-lab" aria-hidden="true"><span class="octicon octicon-link"></span></a>Pre-Lab:</h2>

<p>Antes de llegar al laboratorio debes:</p>

<ol>
<li><p>Conseguir y tener disponible uno o más archivos con una imagen a color en alguno de los siguientes formatos: <code>tiff, jpg, png</code>.</p></li>
<li><p>Haber repasado los conceptos básicos relacionados a estructuras de repetición y ciclos anidados.</p></li>
<li><p>Conocer las funciones básicas de <code>QImage</code> para manipular los pixeles de las imágenes. </p></li>
<li><p>Haber estudiado los conceptos e instrucciones para la sesión de laboratorio.</p></li>
<li><p>Haber tomado el quiz Pre-Lab que se encuentra en Moodle.</p></li>
</ol>

<hr>

<hr>

<h2>
<a id="user-content-edición-de-imágenes" class="anchor" href="#edici%C3%B3n-de-im%C3%A1genes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Edición de imágenes</h2>

<p>En esta experiencia de laboratorio, trabajarás con varios conceptos y destrezas básicas de edición de imágenes. Te proveemos un interface gráfico (GUI) simple que le permite al usuario cargar una imagen e invertirla vertical y horizontalmente.  Tu tarea es crear e implementar una función para convertir una imagen a color a una imagen con tonos de gris, y otra función que convierta una imagen a color a una imagen en blanco y negro.</p>

<h3>
<a id="user-content-píxeles" class="anchor" href="#p%C3%ADxeles" aria-hidden="true"><span class="octicon octicon-link"></span></a>Píxeles</h3>

<p>Al elemento más pequeño de una imagen se le llama un <em>píxel</em>. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul,   se codifica como un entero sin signo cuyos bytes  representan los tonos de rojo, verde y azul del pixel  (Figura 1). A esta combinación se le llama el <em>RGB</em> del color por las siglas de "Red-Green-Blue". Por ejemplo un píxel de color rojo (puro) tiene una representación RGB <code>0x00ff0000</code>, mientras que un píxel de color blanco tiene una representación RGB de <code>0x00FFFFFF</code> (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).</p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure1.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure1.png" alt="figure1.png" style="max-width:100%;"></a></p>

<p><strong>Figura 1.</strong> Distribución de bits para las tonalidades de rojo, verde y azul dentro de la representación RGB.  Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1). </p>

<hr>

<p>En <code>Qt</code> se utiliza el tipo <code>QRgb</code> para representar valores <code>RGB</code>.  Utilizando ciertas funciones que describimos abajo podemos obtener los componentes rojo, verde y azul del valor <code>QRgb</code> del píxel y así manipular imágenes.</p>

<h3>
<a id="user-content-biblioteca" class="anchor" href="#biblioteca" aria-hidden="true"><span class="octicon octicon-link"></span></a>Biblioteca</h3>

<p>La experiencia de laboratorio de hoy utilizará la clase <code>QImage</code>. Esta clase permite acceder a los datos de los pixeles de una imagen para poder manipularla. La documentación de la clase <code>QImage</code> se encuentra en <a href="http://doc.qt.io/qt-4.8/qimage.html">http://doc.qt.io/qt-4.8/qimage.html</a>.</p>

<p>El código que te proveemos contiene los siguiente objetos de la clase <code>QImage</code>:</p>

<ul>
<li>
<code>originalImage</code>   // contiene la información de la imagen original que vas a editar</li>
<li> <code>editedImage</code>  // contendrá la imagen editada</li>
</ul>

<p>Los objetos de clase <code>QImage</code> tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:</p>

<ul>
<li>
<code>width()</code>      // devuelve el valor entero del ancho de la imagen</li>
<li>
<code>height()</code>      // devuelve el valor entero de la altura de la imagen</li>
<li>
<code>pixel(i, j)</code>       // devuelve el <code>QRgb</code> del píxel en la posición <code>(i,j)</code>
</li>
<li>
<code>setPixel(i,j, pixel)</code>   // modifica el valor del píxel en la posición <code>(i, j)</code> al valor píxel <code>QRgb</code>
</li>
</ul>

<p>Las siguientes funciones son útiles para trabajar con datos de tipo <code>QRgb</code>:</p>

<ul>
<li>
<code>qRed(pixel)</code>   // devuelve el tono del color rojo del píxel</li>
<li>
<code>qGreen(pixel)</code> // devuelve el tono del color verde del píxel</li>
<li>
<code>qBlue(pixel)</code>  // devuelve el tono del color azul del píxel</li>
<li>
<code>qRgb(int red, int green, int blue)</code> // devuelve un píxel <code>QRgb</code> compuesto de los valores de rojo, verde y azul recibidos.</li>
</ul>

<h4>
<a id="user-content-ejemplos" class="anchor" href="#ejemplos" aria-hidden="true"><span class="octicon octicon-link"></span></a>Ejemplos:</h4>

<ol>
<li>
<p><code>QRgb myRgb = qRgb(0xff, 0x00, 0xff);</code>: Asigna a <code>myRgb</code> el valor <code>0xff00ff</code> que representa el color <a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure2.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure2.png" alt="figure2.png" style="max-width:100%;"></a></p>

<p>Nota que el valor <code>0xff00ff</code> representa los valores <code>0xff</code>, <code>0x0</code>, <code>0xff</code>, que corresponden a los componentes rojo, verde y azul de <code>myRgb</code>.</p>
</li>
<li>
<p>Si la siguiente imagen <code>4 x 4</code> de píxeles representa el objeto <code>originalImage</code>,</p>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/ejemplo.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/ejemplo.png" alt="ejemplo.png" style="max-width:100%;"></a></p>

<p>entonces <code>originalImage.pixel(2,1)</code> devuelve un valor <code>rgb</code> que representa el color azul (<code>0x0000ff</code>).</p>
</li>
<li>
<p>La siguiente instrucción asigna el color rojo al píxel en posición <code>(2,3)</code> en la imagen editada:</p>

<p><code>editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));</code>.</p>
</li>
<li>
<p>La siguiente instrucción le asigna a <code>greenContent</code> el valor del tono de verde que contiene el pixel <code>(1,1)</code> de  <code>originalImage</code>:</p>

<p><code>int greenContent = qGreen(originalImage.pixel(1,1));</code>.</p>
</li>
<li><p>El siguiente programa crea un objeto de clase <code>QImage</code> e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo <code>chuck.png</code>.</p></li>
</ol>

<hr>

<div class="highlight highlight-cpp"><pre>#<span class="pl-k">include</span> <span class="pl-s"><span class="pl-pds">&lt;</span>QImage<span class="pl-pds">&gt;</span></span>
#<span class="pl-k">include</span> <span class="pl-s"><span class="pl-pds">&lt;</span>iostream<span class="pl-pds">&gt;</span></span>

<span class="pl-k">using</span> <span class="pl-k">namespace</span> <span class="pl-en">std</span><span class="pl-k">;</span>
<span class="pl-k">int</span> <span class="pl-en">main</span>() {
    QImage <span class="pl-smi">myImage</span>(“/Users/rarce/Downloads/chuck.<span class="pl-smi">png</span>”);
    QRgb    centralPixel;

    centralPixel = myImage.<span class="pl-c1">pixel</span>(myImage.<span class="pl-c1">width</span>() / <span class="pl-c1">2</span>, myImage.<span class="pl-c1">height</span>() / <span class="pl-c1">2</span>);

    cout    &lt;&lt; hex;

    cout    &lt;&lt; “Los componentes rojo, verde y azul del pixel central son: “
        &lt;&lt; <span class="pl-c1">qRed</span>(centralPixel) &lt;&lt; “, “
        &lt;&lt; <span class="pl-c1">qGreen</span>(centralPixel) &lt;&lt; “, “
        &lt;&lt; <span class="pl-c1">qBlue</span>(centralPixel) &lt;&lt; endl;
    <span class="pl-k">return</span> <span class="pl-c1">0</span>;
}</pre></div>

<hr>

<hr>

<h2>
<a id="user-content-sesión-de-laboratorio" class="anchor" href="#sesi%C3%B3n-de-laboratorio" aria-hidden="true"><span class="octicon octicon-link"></span></a>Sesión de laboratorio:</h2>

<p>En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos simples de procesamiento de imágenes para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales. </p>

<h3>
<a id="user-content-ejercicio-1-entender-el-código-provisto" class="anchor" href="#ejercicio-1-entender-el-c%C3%B3digo-provisto" aria-hidden="true"><span class="octicon octicon-link"></span></a>Ejercicio 1: Entender el código provisto</h3>

<h4>
<a id="user-content-instrucciones" class="anchor" href="#instrucciones" aria-hidden="true"><span class="octicon octicon-link"></span></a>Instrucciones</h4>

<ol>
<li><p>Carga a Qt el proyecto <code>SimpleImageEditor</code>  haciendo doble "click" en el archivo <code>SimpleImageEditor.pro</code> en el directorio <code>Documents/eip/Arrays-SimpleImageEditor</code> de tu computadora. También puedes ir a <code>http://bitbucket.org/eip-uprrp/arrays-simpleimageeditor</code> para descargar la carpeta <code>Arrays-SimpleImageEditor</code> a tu computadora.</p></li>
<li>
<p>El código que te proveemos crea la interface de la Figura 2. </p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure3.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure3.png" alt="figure3.png" style="max-width:100%;"></a></p>

<p><strong>Figura 2.</strong> Interface del editor de imágenes.</p>

<hr>
</li>
<li>
<p>Estarás trabajando con el archivo <code>filter.cpp</code>. Estudia la función <code>HorizontalFlip</code> del archivo <code>filter.cpp</code> para que entiendas su operación.</p>

<p>En los ejercicios siguientes estarás usando mayormente los objetos <code>originalImage</code> y <code>editedImage</code> de clase <code>QImage</code>. ¿Cuál crees que es el propósito la variable <code>pixel</code>?</p>
</li>
<li>
<p>El código que te proveemos ya tiene programado el funcionamiento de los botones de la interface gráfica. NO tienes que cambiar nada en este código pero te incluimos las siguientes explicaciones para que conozcas un poco del funcionamiento de los botones. En el archivo <code>mainwindow.cpp</code>, las etiquetas <code>lblOriginalImage</code> y <code>lblEditedImage</code> corresponden a las partes de la interface que identifican la imagen original y la imagen procesada. Los botones</p>

<ul>
<li><code>btnLoadImage</code></li>
<li><code>btnSaveImage</code></li>
<li><code>btnInvertThreshold</code></li>
<li><code>btnFlipImageHorizontally</code></li>
<li><code>btnFlipImageVertically</code></li>
<li><code>btnGreyScaleFilter</code></li>
<li>
<code>btnRevertImage</code> </li>
</ul>

<p>están conectados a  funciones de modo que cuando se presione el botón de la interface se haga alguna tarea. Por ejemplo, cuando se presiona <code>LoadImage</code>, saldrá una ventana para seleccionar el archivo con la imagen para editar, al seleccionar el archivo, se lee y se asigna la imagen al objeto <code>originalImage</code>. El deslizador <code>thresholdSlider</code> puede asumir valores entre 0 y 255.</p>
</li>
<li><p>Compila y corre el programa. Prueba los botones <code>Load New Image</code> y <code>Flip Image Horizontally</code> con las imágenes que trajiste para que valides las operaciones de los botones.</p></li>
</ol>

<h3>
<a id="user-content-ejercicio-2-convertir-una-imagen-a-colores-a-una-imagen-en-tonos-de-gris" class="anchor" href="#ejercicio-2-convertir-una-imagen-a-colores-a-una-imagen-en-tonos-de-gris" aria-hidden="true"><span class="octicon octicon-link"></span></a>Ejercicio 2: Convertir una imagen a colores a una imagen en tonos de gris</h3>

<p>El "image grayscale" es una operación que se usa para convertir una imagen a color a una imagen que solo tenga tonalidades de gris. Para hacer esta conversión se usa la siguiente fórmula en cada uno de los píxeles:</p>

<p><code>gray = (red * 11 + green * 16 + blue * 5)/32 ;</code></p>

<p>donde <code>red</code>, <code>green</code> y <code>blue</code> son los valores para los tonos de los colores rojo, verde y azul en el píxel de la imagen original a color, y <code>gray</code> será el color asignado a los colores rojo, verde y azul en el píxel de la imagen editada. Esto es,</p>

<p><code>editedImage.setPixel( i, j, qRgb(gray, gray, gray) )</code>.</p>

<h4>
<a id="user-content-instrucciones-1" class="anchor" href="#instrucciones-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Instrucciones</h4>

<ol>
<li><p>Utilizando pseudocódigo, expresa el algoritmo para convertir una imagen a color a una imagen solo con tonalidades de gris. El apéndice de este documento contiene algunos consejos sobre buenas prácticas al hacer pseudocódigos. </p></li>
<li>
<p>Completa la función <code>GreyScale</code> en el archivo <code>filter.cpp</code> para implementar el algoritmo de tonalidades de gris. La función debe producir un resultado similar al de la Figura 3, en donde la imagen de la izquierda es la imagen original y la de la derecha es la imagen editada.</p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" alt="chuck-color.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-gris.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-gris.png" alt="chuck-gris.png" style="max-width:100%;"></a></p>

<p><strong>Figura 3.</strong> Imagen original e imagen luego de aplicar la función <code>GreyScale</code>.</p>

<hr>
</li>
</ol>

<h3>
<a id="user-content-ejercicio-3-convertir-una-imagen-a-colores-a-una-imagen-en-blanco-y-negro-thresholding" class="anchor" href="#ejercicio-3-convertir-una-imagen-a-colores-a-una-imagen-en-blanco-y-negro-thresholding" aria-hidden="true"><span class="octicon octicon-link"></span></a>Ejercicio 3: Convertir una imagen a colores a una imagen en blanco y negro ("Thresholding")</h3>

<p>"Thresholding" es una operación que se puede utilizar para convertir una imagen a color a una imagen en blanco y negro. Para hacer esta conversión debemos decidir cuáles colores de la imagen original van a convertirse en píxeles blancos y cuáles serán negros. Una manera sencilla de decidir esto es computando el promedio de los componentes rojo, verde y azul de cada píxel. Si el promedio es menor que el valor umbral ("threshold"), entonces cambiamos el píxel a negro; de lo contrario se cambia a blanco.</p>

<h4>
<a id="user-content-instrucciones-2" class="anchor" href="#instrucciones-2" aria-hidden="true"><span class="octicon octicon-link"></span></a>Instrucciones</h4>

<ol>
<li><p>Utilizando pseudocódigo, expresa el algoritmo para "thresholding". Presume que utilizarás el valor del deslizador como umbral.</p></li>
<li><p>En el programa, si la caja <code>chkboxThreshold</code> está marcada, se hace una invocación a la función <code>applyThresholdFilter</code>. La función <code>applyThresholdFilter</code> también es invocada cada vez que se cambia el valor del deslizador.</p></li>
<li><p>Completa la función <code>ThresholdFilter</code> de modo que implemente el algoritmo de "threshold" en la imagen a color utilizando el valor del deslizador como umbral. Si se implementa correctamente, la imagen de la derecha debe ser la imagen original pero en blanco y negro. El valor umbral es un parámetro de la función <code>ThresholdFilter</code>. El código provisto en <code>mainwindow.h</code> tiene definidas las constantes <code>BLACK</code> y <code>WHITE</code> con el valor hexadecimal de los colores negro y blanco respectivamente; puedes aprovechar esto y utilizarlas en tu código.</p></li>
<li><p>El parámetro booleano <code>invertColor</code> tendrá el valor <code>true</code> si la opción de invertir los colores fue seleccionada. Escribe código de modo que los colores blanco y negro se inviertan en la imagen si <code>invertColor</code> asume el valor <code>true</code>.</p></li>
<li>
<p>Prueba tu programa con distintas imágenes y distintos valores de umbral.</p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" alt="chuck-color.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-threshold.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-threshold.png" alt="chuck-threshold.png" style="max-width:100%;"></a></p>

<p><strong>Figura 4.</strong> Imagen original e imagen luego de aplicar la función <code>ThresholdFilter</code>.</p>
</li>
</ol>

<hr>

<hr>

<h2>
<a id="user-content-entrega" class="anchor" href="#entrega" aria-hidden="true"><span class="octicon octicon-link"></span></a>Entrega</h2>

<p>Utiliza "Entrega" en Moodle para entregar el archivo <code>filter.cpp</code> que contiene las funciones  <code>GreyScale</code> y <code>Threshold</code>. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.</p>

<hr>

<hr>

<h2>
<a id="user-content-apéndice-buenas-prácticas-al-escribir-pseudocódigos" class="anchor" href="#ap%C3%A9ndice-buenas-pr%C3%A1cticas-al-escribir-pseudoc%C3%B3digos" aria-hidden="true"><span class="octicon octicon-link"></span></a>Apéndice: Buenas prácticas al escribir pseudocódigos</h2>

<ol>
<li>Provee una descripción de los datos de entrada y salida</li>
<li>Enumera los pasos</li>
<li>Usa estructuras de repetición y decisión comunes: <code>if, else, for, while</code>
</li>
<li>Indenta los bloques de pasos que están dentro de una estructura de repetición o decisión, "Python-style"</li>
<li>No necesitas declarar los tipos de las variables pero si debes inicializarlas. Esto es especialmente importante para contadores y acumuladores</li>
<li>Recuerda que el propósito de un pseudocódigo es que un humano lo pueda entender.</li>
</ol>

<p><strong>Ejemplo:</strong></p>

<pre><code>Input: n, a positive integer
Output: true if n is prime, false otherwise
---------------------------------------------------------
1. for i = 3 to n / 2
2.   if n % i == 0:
3.      return false
4. return true
</code></pre>

<hr>

<hr>

<h2>
<a id="user-content-referencias" class="anchor" href="#referencias" aria-hidden="true"><span class="octicon octicon-link"></span></a>Referencias</h2>

<p>[1] <a href="http://www.willamette.edu/%7Egorr/classes/GeneralGraphics/imageFormats/24bits.gif">http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif</a></p>

<p>[2] <a href="http://doc.qt.io/qt-4.8/qimage.html">http://doc.qt.io/qt-4.8/qimage.html</a>.</p>

<hr>

<hr>

<hr>

<p><a href="#markdown-header-arrays-simple-image-editor">English</a> | <a href="#markdown-header-arreglos-editor-de-imagenes-simple">Español</a></p>

<h1>
<a id="user-content-arrays---simple-image-editor" class="anchor" href="#arrays---simple-image-editor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Arrays - Simple Image Editor</h1>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main1.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main1.png" alt="main1.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main2.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main2.png" alt="main2.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main3.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/main3.png" alt="main3.png" style="max-width:100%;"></a></p>

<p>Arrays help us to store and work with groups of data of the same type. The data is stored in consecutive memory spaces which can be accessed by using the name of the array and indexes or subscripts that indicate the position where the data is stored. Repetition structures provide us a simple way of accessing the data within an array. In today's laboratory experience you will design and implement simple algorithms for image processing to practice the use of nested loops to manipulate bi-dimensional arrays.</p>

<h2>
<a id="user-content-objectives" class="anchor" href="#objectives" aria-hidden="true"><span class="octicon octicon-link"></span></a>Objectives</h2>

<ol>
<li><p>Practice the access and manipulation of data in an array.</p></li>
<li><p>Apply nested loops to implement simple image processing algorithms.</p></li>
<li><p>Use arithmetic expressions to transform colors in pixels.</p></li>
<li><p>Access pixels in an image and break them down into their red, blue, and green components.</p></li>
</ol>

<h2>
<a id="user-content-pre-lab-1" class="anchor" href="#pre-lab-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Pre-Lab:</h2>

<p>Before coming to the laboratory session you should have:</p>

<ol>
<li><p>Acquired one or more files with a colored image in one of the following formats: <code>tiff, jpg, png</code>.</p></li>
<li><p>Reviewed the basic concepts related to repetition structures and nested loops.</p></li>
<li><p>Become familiar with the basic functions in <code>QImage</code> to manipulate the pixels in the images.</p></li>
<li><p>Studied the concepts and instructions for the laboratory session.</p></li>
<li><p>Taken the Pre-Lab quiz available through the course’s Moodle portal.</p></li>
</ol>

<hr>

<hr>

<h2>
<a id="user-content-image-editing" class="anchor" href="#image-editing" aria-hidden="true"><span class="octicon octicon-link"></span></a>Image editing</h2>

<p>In this laboratory experience, you will work with various concepts and basic skills of image editing. We have provided a simple graphical user interface that allows the user to load an image and invert it vertically and horizontally. Your task is to create and implement a function to convert the colored image into an image with gray tones, and another function that converts the colored image into a black and white image.</p>

<h3>
<a id="user-content-pixels" class="anchor" href="#pixels" aria-hidden="true"><span class="octicon octicon-link"></span></a>Pixels</h3>

<p>The smallest element in an image is called a <em>pixel</em>. This unit consists of a single color. Since each color is a combination of tones for the primary red, green and blue colors, it is coded as an unsigned integer whose bytes represent the tones of red, green and blue of the pixel (Figure 1). This combination is called the color's <em>RGB</em> which is an acronym for "Red-Green-Blue". For example, a pure red pixel has an RGB representation of <code>0x00ff0000</code>, while a white pixel has an RGB representation of <code>0x00FFFFFF</code> (since the color white is a combination of tones of red, green and blue in all of their intensity).</p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure1.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure1.png" alt="figure1.png" style="max-width:100%;"></a></p>

<p><strong>Figure 1.</strong> Bit distribution for the tones of red, green and blue in an RGB representation. Each tone can have values between 0x00 (the eight bits in 0) and (0xFF (the 8 bits in 1).</p>

<hr>

<p><code>Qt</code> uses the <code>QRgb</code> type to represent <code>RGB</code> values. Using certain functions that are described below we can obtains the red, green and blue components of the <code>QRgb</code> value of the pixel and manipulate the images.</p>

<h3>
<a id="user-content-library" class="anchor" href="#library" aria-hidden="true"><span class="octicon octicon-link"></span></a>Library</h3>

<p>In today's laboratory experience you will use the <code>QImage</code> class. This class permits access to the data in the pixels of an image to manipulate it. The documentation for the <code>QImage</code> class can be found in <a href="http://doc.qt.io/qt-4.8/qimage.html">http://doc.qt.io/qt-4.8/qimage.html</a>.</p>

<p>The code provided in this project contains the following objects of the <code>QImage</code> class:</p>

<ul>
<li>
<code>originalImage</code>   // contains the information of the original image that you will edit</li>
<li> <code>editedImage</code>  // will contain the edited image</li>
</ul>

<p>The objects of the <code>QImage</code> class have the following methods that will be useful for today's laboratory experience:</p>

<ul>
<li>
<code>width()</code>      // returns the integer value for the image's width</li>
<li>
<code>height()</code>      // returns the integer value for the image's height</li>
<li>
<code>pixel(i, j)</code>       // returns the <code>QRgb</code> for the pixel in position <code>(i,j)</code>
</li>
<li>
<code>setPixel(i,j, pixel)</code>   // modifies the value for the pixel in position <code>(i,j)</code> to the value of pixel <code>QRgb</code>
</li>
</ul>

<p>The following functions are useful to work with data of type <code>QRgb</code>:</p>

<ul>
<li>
<code>qRed(pixel)</code>   // returns the tone for the pixel's red color</li>
<li>
<code>qGreen(pixel)</code> // returns the tone for the pixel's green color</li>
<li>
<code>qBlue(pixel)</code>  // returns the tone for the pixel's blue color</li>
<li>
<code>qRgb(int red, int green, int blue)</code> // returns the <code>QRgb</code> pixel composed of the red, green and blue values received.</li>
</ul>

<h4>
<a id="user-content-examples" class="anchor" href="#examples" aria-hidden="true"><span class="octicon octicon-link"></span></a>Examples:</h4>

<ol>
<li>
<p><code>QRgb myRgb = qRgb(0xff, 0x00, 0xff);</code>: Assigns the value <code>0xff00ff</code> to <code>myRgb</code> which represents the color <a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure2.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure2.png" alt="figure2.png" style="max-width:100%;"></a></p>

<p>Notice that the value <code>0xff00ff</code> represents the values <code>0xff</code>, <code>0x0</code>, and <code>0xff</code>, that correspond to the red, green and blue components in <code>myRgb</code>.</p>
</li>
<li>
<p>If the following <code>4 x 4</code> image of pixels represents the object <code>originalImage</code>,</p>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/ejemplo.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/ejemplo.png" alt="ejemplo.png" style="max-width:100%;"></a></p>

<p>then <code>originalImage.pixel(2,1)</code> returns the  <code>rgb</code> value that represents the color blue ( <code>0x0000ff</code>).</p>
</li>
<li>
<p>The following instruction assigns the color red to the pixel in position <code>(2,3)</code> in the edited image:</p>

<p><code>editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));</code>.</p>
</li>
<li>
<p>The following instruction assigns to <code>greenContent</code> the value of the green tone that is contained in the pixel <code>(1,1)</code> of <code>originalImage</code>:</p>

<p><code>int greenContent = qGreen(originalImage.pixel(1,1));</code>.</p>
</li>
<li><p>The following program creates an object of the <code>QImage</code> class and prints the red, green and blue components of the pixel in the center of the image. The image used is the one specified within the parenthesis during the creation of the object, that is, the file <code>chuck.png</code></p></li>
</ol>

<hr>

<div class="highlight highlight-cpp"><pre>#<span class="pl-k">include</span> <span class="pl-s"><span class="pl-pds">&lt;</span>QImage<span class="pl-pds">&gt;</span></span>
#<span class="pl-k">include</span> <span class="pl-s"><span class="pl-pds">&lt;</span>iostream<span class="pl-pds">&gt;</span></span>

<span class="pl-k">using</span> <span class="pl-k">namespace</span> <span class="pl-en">std</span><span class="pl-k">;</span>
<span class="pl-k">int</span> <span class="pl-en">main</span>() {
    QImage <span class="pl-smi">myImage</span>(“/Users/rarce/Downloads/chuck.<span class="pl-smi">png</span>”);
    QRgb    centralPixel;

    centralPixel = myImage.<span class="pl-c1">pixel</span>(myImage.<span class="pl-c1">width</span>() / <span class="pl-c1">2</span>, myImage.<span class="pl-c1">height</span>() / <span class="pl-c1">2</span>);

    cout    &lt;&lt; hex;

    cout    &lt;&lt; “The red, green <span class="pl-k">and</span> blue components of the middle pixel are: “
        &lt;&lt; <span class="pl-c1">qRed</span>(centralPixel) &lt;&lt; “, “
        &lt;&lt; <span class="pl-c1">qGreen</span>(centralPixel) &lt;&lt; “, “
        &lt;&lt; <span class="pl-c1">qBlue</span>(centralPixel) &lt;&lt; endl;
    <span class="pl-k">return</span> <span class="pl-c1">0</span>;
}</pre></div>

<hr>

<hr>

<h2>
<a id="user-content-laboratory-session" class="anchor" href="#laboratory-session" aria-hidden="true"><span class="octicon octicon-link"></span></a>Laboratory Session:</h2>

<p>In today's laboratory experience you will design and implement simple image processing algorithms to practice the use of nested loops and the manipulation of bi-dimensional arrays.</p>

<h3>
<a id="user-content-exercise-1-understand-the-provided-code" class="anchor" href="#exercise-1-understand-the-provided-code" aria-hidden="true"><span class="octicon octicon-link"></span></a>Exercise 1: Understand the provided code</h3>

<h4>
<a id="user-content-instructions" class="anchor" href="#instructions" aria-hidden="true"><span class="octicon octicon-link"></span></a>Instructions</h4>

<ol>
<li><p>Load the Qt project called <code>SimpleImageEditor</code> by double-clicking on the <code>SimpleImageEditor.pro</code> file in the <code>Documents/eip/Arrays-SimpleImageEditor</code> folder of your computer. You may also go to <code>http://bitbucket.org/eip-uprrp/arrays-simpleimageeditor</code> to download the <code>Arrays-SimpleImageEditor</code> folder to your computer.</p></li>
<li>
<p>The code that we provide creates the interface in Figure 2.</p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure3.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/figure3.png" alt="figure3.png" style="max-width:100%;"></a></p>

<p><strong>Figura 2.</strong> Interface del editor de imágenes.</p>

<hr>
</li>
<li>
<p>You will be working with the <code>filter.cpp</code> file. Study the <code>HorizontalFlip</code> function in the <code>filter.cpp</code> file so you understand how it operates.</p>

<p>In the following exercises you will be mainly using the objects <code>originalImage</code> and <code>editedImage</code> of the <code>QImage</code> class. What do you think is the purpose for the <code>pixel</code> variable?</p>
</li>
<li>
<p>The provided code already has the the functionality of the buttons in the graphical user interface programmed. You do NOT have to change anything in this code but we provide the following explanations so you can know a little about how the buttons work. In the <code>mainwindow.cpp</code> file, the <code>lblOriginalImage</code> and <code>lblEditedImage</code> objects correspond to the parts of the interface that identify the original image and the processed image. The buttons</p>

<ul>
<li><code>btnLoadImage</code></li>
<li><code>btnSaveImage</code></li>
<li><code>btnInvertThreshold</code></li>
<li><code>btnFlipImageHorizontally</code></li>
<li><code>btnFlipImageVertically</code></li>
<li><code>btnGreyScaleFilter</code></li>
<li>
<code>btnRevertImage</code> </li>
</ul>

<p>are connected to functions so when a button in the interface is pressed, a certain task is carried out. For example, when you press the <code>LoadImage</code> button, a window will appear for you to select the file with the image you want to edit, which when read, the image is assigned to <code>originalImage</code>. The slider <code>thresholdSlider</code> can assume values between 0 and 255.</p>
</li>
<li><p>Compile and run the program. Test the buttons for <code>Load New Image</code> and <code>Flip Image Horizontally</code> with the images that you brought so you can validate if the buttons are working.</p></li>
</ol>

<h3>
<a id="user-content-exercise-2-convert-a-colored-image-to-an-image-with-gray-tones" class="anchor" href="#exercise-2-convert-a-colored-image-to-an-image-with-gray-tones" aria-hidden="true"><span class="octicon octicon-link"></span></a>Exercise 2: Convert a colored image to an image with gray tones</h3>

<p>Image grayscale is an operation that is used to convert a colored image to an image with only tones of gray. To make this conversion the following formula is used in each pixel:</p>

<p><code>gray = (red * 11 + green * 16 + blue * 5)/32 ;</code></p>

<p>where <code>red</code>, <code>green</code> and <code>blue</code> are the values for the tones of the red, green and blue colors in the pixel of the original colored image, and <code>gray</code> will be the assigned color to the red, green, and blue colors in the pixel of the edited image. That is,</p>

<p><code>editedImage.setPixel( i, j, qRgb(gray, gray, gray) )</code>.</p>

<h4>
<a id="user-content-instructions-1" class="anchor" href="#instructions-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Instructions</h4>

<ol>
<li><p>Using pseudocode, express the algorithm to convert a colored image to an image with only gray tones. The appendix in this document contains some advice about good techniques for writing pseudocode.</p></li>
<li>
<p>Complete the <code>GreyScale</code> function in the <code>filter.cpp</code> file to implement the grayscale algorithm. The function should produce a result similar to that in Figure 3, where the image on the left is the original image and the one on the right is the edited image.</p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" alt="chuck-color.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-gris.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-gris.png" alt="chuck-gris.png" style="max-width:100%;"></a></p>

<p><strong>Figure 3.</strong> Original image and image after applying the <code>GreyScale</code> function.</p>

<hr>
</li>
</ol>

<h3>
<a id="user-content-exercise-3-convert-a-colored-image-to-a-black-and-white-image-thresholding" class="anchor" href="#exercise-3-convert-a-colored-image-to-a-black-and-white-image-thresholding" aria-hidden="true"><span class="octicon octicon-link"></span></a>Exercise 3: Convert a colored image to a black and white image ("Thresholding")</h3>

<p>Thresholding es an operation that can be used to convert a colored image to an image in black and white. To make this conversion we must decide which colors of the original image will be converted to white pixels and which to black. One simple way of deciding this is to compute the average of the red, green and blue components of each pixel. If the average is smaller than the threshold value, then we change the pixel to black; if not, it's changed to white.</p>

<h4>
<a id="user-content-instructions-2" class="anchor" href="#instructions-2" aria-hidden="true"><span class="octicon octicon-link"></span></a>Instructions</h4>

<ol>
<li><p>Using pseudocode, express the thresholding algorithm. Assume that you will use the slider's value as the threshold.</p></li>
<li><p>In the program, if the <code>chkboxThreshold</code> box is marked, the <code>applyThresholdFilter</code> function is invoked. The <code>applyThresholdFilter</code> function is also invoked each time that the value of the slider is changed.</p></li>
<li><p>Complete the <code>ThresholdFilter</code> function so it implements the threshold algorithm in the colored image using the slider's value as the threshold. If the implementation is correct, the image on the right should be the original image but in black and white. The threshold value is a parameter of the <code>ThresholdFilter</code> function. The code provided in <code>mainwindow.h</code> has the constants <code>BLACK</code> and <code>WHITE</code> defined with their hexadecimal values; you can take advantage of this and use them in your code.</p></li>
<li><p>The boolean parameter <code>invertColor</code> will be <code>true</code> if the option to invert the colors has been selected. Write the code so that the white and black colors are inverted if <code>invertColor</code> is <code>true</code>.</p></li>
<li>
<p>Test the program with different images and different threshold values.</p>

<hr>

<p><a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-color.png" alt="chuck-color.png" style="max-width:100%;"></a>
<a href="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-threshold.png" target="_blank"><img src="/Users/Ivelisse/Dropbox/eip/EIP-REVISION-VERANO/Arrays/SimpleImageEditor/simpleimageeditor-Edited-NO-Solutions-July-2015/images/chuck-threshold.png" alt="chuck-threshold.png" style="max-width:100%;"></a></p>

<p><strong>Figure 4.</strong> Original image and image after applying the <code>ThresholdFilter</code> function.</p>

<hr>

<hr>
</li>
</ol>

<h2>
<a id="user-content-deliverables" class="anchor" href="#deliverables" aria-hidden="true"><span class="octicon octicon-link"></span></a>Deliverables</h2>

<p>Use "Deliverables" in Moodle to upload the <code>filter.cpp</code> file that contains the <code>GreyScale</code> and <code>Threshold</code> functions. Remember to use good programming techniques, include the names of the programmers involved, and to document your program.</p>

<hr>

<hr>

<h2>
<a id="user-content-appendix-good-techniques-for-writing-pseudocode" class="anchor" href="#appendix-good-techniques-for-writing-pseudocode" aria-hidden="true"><span class="octicon octicon-link"></span></a>Appendix: Good techniques for writing pseudocode</h2>

<ol>
<li>Provide a description of the input and output data</li>
<li>Enumerate the steps</li>
<li>Use common repetition and decision structures: <code>if, else, for, while</code>
</li>
<li>Indent the blocks of steps that are inside of a decision or repetition structure, "Python-style"</li>
<li>You do not need to declare the types of variables but you should initialize them. This is especially important for counters and accumulators</li>
<li>Remember that the purpose of pseudocode is so a human can understand it.</li>
</ol>

<p><strong>Example:</strong></p>

<pre><code>Input: n, a positive integer
Output: true if n is prime, false otherwise
---------------------------------------------------------
1. for i = 3 to n / 2
2.   if n % i == 0:
3.      return false
4. return true
</code></pre>

<hr>

<hr>

<h2>
<a id="user-content-references" class="anchor" href="#references" aria-hidden="true"><span class="octicon octicon-link"></span></a>References</h2>

<p>[1] <a href="http://www.willamette.edu/%7Egorr/classes/GeneralGraphics/imageFormats/24bits.gif">http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif</a></p>

<p>[2] <a href="http://doc.qt.io/qt-4.8/qimage.html">http://doc.qt.io/qt-4.8/qimage.html</a>.</p>
</article></body></html>