Transcript Storage. Binary numbers. Images homework.

Computer Science I
Storing data. Binary numbers.
Shapes.
Classwork/homework: Catch up. Do
analysis of image types.
Overview
• Representation of information. How is
everything/anything represented 'in' the
computer (in storage)?
– ANSWER: everything is represented using 1s and 0s.
What the 1s and 0s mean depends on what the
information is, for example, the datatype
• whole number, number with fraction, true/false value,
character string, other…
Storage
• Everything (data and programs) is stored in the
circuitry of 'the computer'.
• The circuitry includes transistors that are
switches: on or off states, 0 or 1. Each switch is
called a bit.
• So….numbers are stored using the binary (base
2) system
• Symbols (characters, letters, etc.) are stored
using agreed upon systems of encoding
– ASCII: 8 bits per character
– UNICODE: 16 bits per character
Why?
• Why not use circuits that can directly
represent numbers using the decimal
(base 10) system?
• Answer: Easier to make on/off switches
than something with 10 states. Easier to
build circuitry for calculations for the base
2 addition and base 2 times tables than
the ones you remember…
What is stored?
•
•
•
•
Numbers: binary number system
Characters: ASCII or UNICODE encoding
Machine instructions
Composite datatypes, for example String
of characters representing text
– Will get to arrays
• Images
• More…
Recall base 10
• Recall 1s column, 10s column, 100s
column
• Recall borrowing (re-grouping) and
carrying
• Do problem(s)
Base 2
• Same principle
– 1s column, 2s column, 4s column, ????
• Your age? My age?
• Addition
– Subtraction? Multiplication?
Joke
Explain joke on shirt
Bits
• A bit is a one or a zero (1 or 0).
• 3 bits can hold how many different
patterns?
000, 001, 010, 011, 100, 101, 110, 111
4 bits can hold how many different
patterns?
• What is the formula?
Byte
• A byte is 8 bits.
• See in specs for computers, memory, etc.
KB, Kb, Gb, GB, other.
• So, how many patterns, what is the
biggest number, held by a byte?
Another Joke
Addition
• Remember base 10 "carry" aka "re-group"
• Let's do problems in base 10.
• Now, let's do problems in base 2.
– First, write the addition table. Note this is much
smaller than the addition table for base 10.
– Basic procedure is the same
• But the circuitry is much simpler
Base 16
• Hexadecimal: used for quick way to describe
bits, mostly commonly for color coding
• Symbols used are 0, 1, 2, …, 9, A, B, C, D, E,
F
• Convert to and from binary relatively easy
– Problems?
• You have seen color coding: RGB (red, green
blue) in hexadecimal
FF0000 is red
00FF00 is green
??
Numbers with fraction part
Aka numbers with a decimal point
• How to represent?
• ANSWER: floating point numbers
aka scientific notation
– 3.4521 * 102 is the same as 345.21 * 100
– Terminology: 3.4521 (or 345.21) is the mantissa or
significand and the 2 (or 0) is the exponent.
• Computer format: use 2 or 16 in place of 10
• Example using 32 bits:
– 1 bit for the sign (0 for +, 1 for -)
– 8 bits for the exponent
– 23 bits for the mantissa (width, i.e., 23, is the
precision)
Characters
• ASCII coding
The character A
The character a
The character 1
The character 2
….
is represented by 01000001
is represented by 01100001
is represented by 00110001
is represented by 00110010
• Unicode is a 16 bit format big enough
(hopefully) for all the world's languages
String of characters
…such as a name or a label or a piece of
text
• Fixed length: allocate 1 byte (8 bits) for
each character
– UNICODE 2 bytes
• Variable length: store string in two parts
– One part holds length as a number and
pointer (address) of the whole string
– String itself
Boolean
• Named after George Boole
• True / False
• Theoretically: 1 bit, 0 for false, 1 for true
but
• The addressability requirement means it
could be 1 byte or even bigger
• String of Booleans can be combined.
– A byte can represent the answer to 8
true/false questions.
Images
• There are several different ways to represent
images.
• Consider this simple way:
– For each pixel, have 3 bytes of information: the
bytes representing the level of red, green and
blue.
• Actually, typically there is a 4th byte of information: the
alpha level for transparency.
– So, for an image 400 by 300 pixels, how many
bytes required for storage?
Question
• Is a picture worth 1000 words?
– How many bytes in a 1000 words?
• Need to make some assumptions, say words average 5
letters, stored in ASCII (double for UNICODE), one byte
for space in between…. Ignore punctuation?
– How many bytes in a picture (without
compression)
• Need to make some assumptions, say 800 by 600, 3
bytes for color
– Do the calculation
Machine instructions: back up
• Processing code is translated, multi-stage
process, to basic language of the computer.
• Very, very basic instructions:
– LR Load a register (part of the Central Processing
Unit (CPU) with contents at particular address
– AR add values in register
– JUMP to a new instruction
– Etc.
• Contains machine instruction command and
other information, such as storage
addresses, in binary.
Shapes
beginShape();
vertex( );
….
endShape();
alternate: endShape(CLOSE);
Example
• Attempt to display a piece of an origami fold
involving hexagons
– Ended up NOT using polygon program.
– Did copy, at least was inspired, by coin toss.
• Demonstrate
Transformations
• Change coordinate system and then put things
on the screen. They will appear transformed…
• So scale can be used to make everything larger
or smaller OR change one dimension and not
the other.
• Rotate and translate can work as expected…
Planning
•
Methods:
– setup, draw, mouseReleased, keyPressed
– hexCombo
• hexLayer
– hexShape
•
Make use of coordinate transformations
pushMatrix();
translate, rotate,
popMatrix();
restores last coordinate system saved (pushed)
•
Need to determine the change in size from layer to layer?
– Answer: divide by sqrt(2)
•
(Later) added modification to create hole (fudge)
void setup() {
size(1000,900);
fill(255,0,0);
textSize(18);
text("Click on screen, press any key to clear the screen",20,20);
fill(0);
}
void draw() {
fill(200,0,100);
//hexShape(400,400,300);
//hexLayer(500,400,300);
// hexCombo(500,500,300); //draws a bigger combo
}
void mouseReleased() {
//draw a combo at mouse location
hexCombo(mouseX,mouseY,200);
}
Improvement from Prof. Shablinsky
• Problem: screen gets cluttered
void keyPressed()
{
background(200,200,200);
text("Click on screen, press any key to clear the
screen",20,20);
}
void hexShape(float cx, float cy, float hexSize)
{
//cx and cy are center of circle for which this is
//an inscribed NOT regular hexagon
beginShape();
vertex(cx+hexSize,cy);
vertex(cx+hexSize*.5,cy-hexSize*.5);
vertex(cx-hexSize*.5,cy-hexSize*.5);
vertex(cx-hexSize,cy);
vertex(cx-hexSize*.5,cy+hexSize*.5);
vertex(cx+hexSize*.5,cy+hexSize*.5);
endShape(CLOSE);
}
void hexLayer(float cx, float cy,float layerSize) {
float pctrx, pctry;
float hexSize = layerSize;
fill(200,0,100);
for (int i=0;i<4;i++){
pushMatrix();
translate(cx,cy);
rotate(HALF_PI*i);
pctrx =.5*hexSize+fudge;
pctry = 0;
hexShape(pctrx,pctry,.5*hexSize);
popMatrix();
}
}
void hexCombo(float cx, float cy, float startSize) {
float curSize = startSize;
hexLayer(cx,cy,curSize);
pushMatrix();
translate(cx,cy);
rotate(PI/4);
curSize = curSize/sqrt(2);
hexLayer(0,0,curSize);
rotate(PI/4);
curSize = curSize/sqrt(2);
hexLayer(0,0,curSize);
popMatrix();
}
Classwork / Homework
• Assignment using Random and Animation due
earlier in the week. Will accept today.
• Homework: Examine images and compare
different types in quality and size. Make posting on
forum. You can read about the different image
types but also try to use your own observations.
– Note: jpg typically used for photographs, gif for line
drawings
• Experiment using shapes.
– Look at examples in Processing documentation.