–– Meeting 5 —

Introduction to Binary

​

Attendance

WELCOME!

Updates

Opportunities

AI Virtual “Fireside” Chat

• Thur. 10/16 | 2 PM

Discussion topics:

• The intersection of artificial intelligence and cybersecurity.
• Current AI legislation.
• The threat of AI-powered attacks.
• Best practices for using AI so you can protect both yourself and Miami.

Link for this will be sent to emails

​

CTF Opportunities (Spring)

BearcatCTF - Hosted at UC

State-wide CTF - At UC or virtually

Industry Events

Ross Flynn (CrowdStrike) - 11/15

• OSINT Presentation

​

​

Introduction to Binary

Tyler Stephenson

Outline

• Numeral Systems
• Base N Systems
• Binary counting
• Binary Counting Practice
• Bits vs. Bytes and sizes

—

Stenography

• What is Stenography
• Example
• Code to do it for us!

​

​

What is a Numeral system?

• A system for writing and expressing numbers

Think:

• Roman numerals IVXLCDM (Variable Base)
• Base 10 (Our system)
• Binary (Base 2)

​

​

What does it mean to be base N

Base 2:

0, 1

Base 8 (Octal):

0, 1, 2, 3, 4, 5, 6, 7

Base 10:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Base 16 (Hexadecimal):

0, 1, 2, 3, 4, 5, 6, 7, 8 , 9, A, B, C, D, E, F

​

• A base is just a count of how many symbols do we use before we reset to 0 and go up a digit.

How to Count:

Each digit is just a multiple of two. Take the sum of the digits to get things in base 10.

Think of it as:

while(has_next_digit) {

sum += Digit_Place * Digit_Value

}

How to Count:

A little practice

Solution

A Few More

Solutions

Bits vs Bytes

Bit: The smallest unit of storage on a computer.

• 1 or 0
• Each bit is a digit in Binary

Byte: A collection of 8 bits.

• Ex. 10101100
• Each character is 1 Byte
• Also known as an Octet
• 256 possible values (0-255 or -128 to 127)
• Most other measurements are based upon bits.

Sizes of Measurements

Tables Courtesy of Wikipedia (Units of Information)�https://en.wikipedia.org/wiki/Units_of_information

Two forms of measurement

Prefixes based on Metric System

Prefixes based on Powers of two

Kilo vs Kibi

Kilo

• Metric meaning 1000x
• k prefix

Kibi

• 1024 based on 2^10
• Ki Prefix

Binary In Action

Stenography (Hiding codes in images)

Stenography - The hiding of information into images without altering their visible appearance.

​

I had to label them so I knew which was which

A more obvious and visual version

We are altering the color of the image, in here

Instead of altering the image by 1 value in rgb we are doing it by 64

Notice the fraying based upon if it is a 1 or zero

An even more Obvious Version

The Example

We will assume I want to save my very important password that keeps my bank account safe.��mary_Had_a_Little_Lamb

I need to hide it well so I will use this very sneaky image

How it works

First we convert a letter into its decimal integer

In our example our first character is m, looking on the table its code is: 109

​

Our Phrase: mary_Had_a_Little_Lamb

Then turn it into binary which results in: 01101101

Primer on RGB

All colors can be stored as an RGB value

Our Phrase: mary_Had_a_Little_Lamb

That means it is just the red, green, and blue values of the pixel.

RGB(37, 74, 110)

Top Left Pixel

≈14.5%

≈29%

≈43.1%

Each value just shows how intense the color is relative to 255 which is the max.

Note: Color Percentages are independent, they don’t total to 100%

Each Color is just 1 byte of information

Each color is 0-255 which is just 1 byte of information

Thus each color can be represented in binary

37

74

110

00100101

01001010

01101110

However it's nearly impossible to notice a 1 bit change in each

00100100

01001011

01101111

Thus we can change that last bit to whatever we want and those looking at the image won’t know

Tying them together

Since we have a binary representation for numbers, and one for colors. We can combine them

m

01101101

Since the next three pixels are the same we can just use the same RGB values

Lets just replace the last bit with that of m

Our Phrase: mary_Had_a_Little_Lamb

Result

After repeating this process we can then hide our password within the image of gru.

Our Phrase: mary_Had_a_Little_Lamb

What is happening Visually Again

Here is a more obvious visualization. If the bit is 1 then the color is set to 255 otherwise the color is set to 0.

Play with it!

Go to discord and download the code, we will upload it to p5js and play with it

If you are from the future, here is the raw code

//CreatedbyTylerStephensonstephetd@miamioh.eduonOct8th2025//(C)copywright//Feelfreetoreachoutwithquestions!letimg;letmaxSize=800;//Justsomep5.jsstufftoloadanimage.functionpreload(){//*******************************************************************************/*Thereare4Filescurrentlyloadedbutfeelfreetoaddmore-steve.png-steveCrypto.png-harold.png-haroldCrypto.pngToaddmorejusthittheleftpointingarrowinthetopleft,thenhitplusthenuploadanimagefromyourcomputer,perferablypngandjpg,Idon'tknowifotherformatswillwork*/img=loadImage('steve.png');//*******************************************************************************}//----------------------------------------------//MAINFUNCTION(EDITHERE)//----------------------------------------------//Setupisthefunctionthatwillactuallyrunwhenthecodeisstartedfunctionsetup(){//Codetoscaletheimagetobeatmax800x800pixels.letmultiplier=autoscale(img.width,img.height,maxSize)letimgWidth=img.width*multiplierletimgHeight=img.height*multiplier//Codetosetupthedisplaytomakesureitisproperlyloaded.createCanvas(imgWidth,imgHeight);pixelDensity(1)image(img,0,0,imgWidth,imgHeight)//*******************************************************************************/*Therearetwofunctionshere,thefirstishideText,thefunctiontakesinaaphrasewrappedinquotationsmarksEx."SuperSecretPhrase"Thentheimagetotheleftwillbeupdatedtoencodethatmessage.Rightclick/twofingerclicktosavetheimage.ThesecondfunctionrevealText()willsearchthecurrentimageandoutputanyhiddentextinit,ifthereisnoneallyouwillseeisabunchofrandomcharacters.Thisfunctiondecryptswhateverimagewasloadedabove.*///AddthefollowingtextintotheimagehideText("Steveismygoat,Ilovefamilyfeud.")//Functionprintsthehiddenmessagebelow,revealText();//*******************************************************************************}/*ThehidetextfunctionisresponsibleforencryptingtheimageusingleastsignificantbitstenographyFeelfreetolookitupformoredetails,theshortversionisbelowSinceeachpixelismadeupofabunchofRGBvaluesthatrangefrom0-255thereisalotofinformationstored.Whatwecandoischangethatlastbitsince(255,255,255)and(254,255,254)areverysimilarandsomethingmostpeoplewillnotbeabletonotice.Sowhatwedoismakethelastbitofafewpixelsspecific0sand1stoencodeabyteofdata.Thenthatsmallchangeisspreadamong10,000'sofpixels.Think1111111Xwherexis1or0.*/functionhideText(text){loadPixels();letcurrentIndex=0;//Looptocontinuouslytraversetheimageuntileachcharacterhasbeenencoded.for(letindex=0;index<text.length;index++){letcharCode=text.charCodeAt(index)//sinceeachcharacteris1byteor8bitsweloop8timeswitheachonechangingasinglergbvalue.inpractice//thismeanswearechanging8rgbvaluesor22/3pixels.for(leti=0;i<8;i++){pixels[currentIndex]=((pixels[currentIndex]>>1)<<1)|extractBit(charCode,i+1);currentIndex=nextValidDataIndex(currentIndex);}}//adds8zerosinarowattheendtomarkendofmessage.for(letk=0;k<8;k++){pixels[currentIndex]=(pixels[currentIndex]>>1)<<1;currentIndex=nextValidDataIndex(currentIndex);}updatePixels();}/*FunctiontogatherandrecollectthedatahiddenintheimageWhathappensisweloopthroughthepixelsandtakethelastbitofeachrgandbvalueforeachpixel,thenwecombinethemtogethertofindthecharacteritisassociatedwith.ExRGB(254,255,255)RGB(128,46,57)RGB(37,50,~~~)(~~~valueisirrelevant)Wecanlookatodd/eventofigureout1and0'switheven=0andodd=1Puttogetherthisis01100110=102orthecharacter"f"*/functionrevealText(){//listtocontaineachcharactercode,thesecharactercodesarederivedfromtheASCIItableletnumberList=[];loadPixels();letbitIndex=0;//Loopthatkeepsrunninguntileitherwehavechecked20,000charactersworthofpixels,foundthe0byteor//goneoutofbounds.while(true){//Checksforboundsif(bitIndex+10>pixels.length){break;}//currentcharactercodewearebuildingletcharCode=0;//loopsthrough1byte/8bitsworthofvaluesandaddsthemtothecharactercodefor(leti=0;i<8;i++){charCode=charCode<<1;letlastBit=pixels[bitIndex]&1;charCode=charCode|lastBit;bitIndex=nextValidDataIndex(bitIndex);}if(charCode==0){break;}if(bitIndex>20000){break;}//addsthenewcharactercodetothelistforlaternumberList.push(charCode);}//convertsthelistofcharactercodesintoastringtoprint.print(String.fromCodePoint(...numberList));}//------------------------------------------------------------//HELPERFUNCTIONS//------------------------------------------------------------//Thesearethefunctionsthatassistotherpartsofthecode//Thisfunctionhelpsusskipoverthealphavaluesinargb//BasicallyalphaisjusttransparencyfunctionnextValidDataIndex(index){index+=1;if(index%4==3){index+=1;}returnindex}//Thisfunctionisinchargeofgettingthebitinaspecificpositionofthecode//Ex.10110110getbit2////12345678//10110110////Wouldreturn0functionextractBit(number,bitPosition){return(number>>(8-bitPosition))&1;}//Thisfunctionautoscalestheimagetomakesureitisunder800x800pxotherwisethingscangetslowfunctionautoscale(img_width,img_height,maxSize){letlargestSide=max(img_width,img_height);if(largestSide<=maxSize){return1}else{returnmaxSize/largestSide;}}

Sorry but to fit it on the slides no formatting can be had