Binary Logic CPT Warmup
Plans
(DONE) complete both demonstrations of binary, add more interactives like a javascript graph/chart that when you type in a 0 or a 1, there will be some result. This could represent one of the types of logic gates, like an XOR gate.
possibly add pop ups to describe how the emojies are understood and displayed by the computer
Add functional rock paper scissors game using logic gates.
Make page look nice, change theme, use CSS and SASS to make tic tac toe and RPS look pleasing
Store Binary as Text
We know that binary is written with two numbers, 0 and 1, which allows computers to understand text we enter into them. However, a question arises: how will a computer understand all of this with just zeroes and ones?
- 26 Capital letters
- 26 lowercase letters
- all special characters (e.g. @ # $ *).
A language called ASCII was developed, or American Standard Code for Information Interchange, which were unique 8 digit strings of binary that represented a character.
For example, the character “.” is represented as a decimal “46.” The character “.” can be coverted from ASCII to binary and would have a binary value of 00101110. ASCII is not really in use anymore because of its limitations concerning other languages like chinese, japanese, arabic, etc, which have their own unique characters.
Nowadays, we use Unicode, which is 4 times more flexible than ASCII, as it uses a 32 bit system rather than an 8 bit system. Languages such as Latin and even Heiroglyphic can fit in Unicode.
Boolean Algebra
AND
The AND of two values will return True if both value are True, otherwise it will return False.
| A | B | A AND B |
|---|---|---|
| 1 | 1 | 1 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 0 | 0 | 0 |
A = False
B = False
if A and B:
print("It's True")
else:
print("It's False")
%%HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clickable Button</title>
</head>
<body>
<!-- Button with a link -->
<a href="https://onecompiler.com/html/3zvep33nh" target="_blank">
<button type="button">Give an AND logic gate a try!</button>
</a>
</body>
</html>
<!DOCTYPE html>
OR
The OR of two values will return True if either one is True.
| A | B | A OR B |
|---|---|---|
| 1 | 1 | 1 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 0 | 0 | 0 |
A = True
B = False
if A or B:
print("It's True")
else:
print("It's False")
%%HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clickable Button</title>
</head>
<body>
<!-- Button with a link -->
<a href="https://onecompiler.com/html/3zvmzvxb2" target="_blank">
<button type="button">Give an OR logic gate a try!</button>
</a>
</body>
</html>
<!DOCTYPE html>
NOT
The NOT of a value will return its opposite; If value A is true, then it will return false.
| A | NOT A |
|---|---|
| 0 | 1 |
| 1 | 0 |
A = True
if not A:
print("It's true")
else:
print("It's false")
XOR
The XOR of two values is true whenever the values are different. The XOR in python is this “^”
| A | B | A XOR B |
|---|---|---|
| 1 | 1 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 0 | 0 | 0 |
A = True
B = False
if A ^ B:
print("It's true")
else:
print("It's False")
NAND
NAND is the NOT of the result of AND. If one value is False and it will return True.
| A | B | A NAND B |
|---|---|---|
| 0 | 0 | 1 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |
A = True
B = False
if not (A and B):
print("True")
else:
print("It's false")
DEMONSTRATIONS
%%HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clickable Button</title>
</head>
<body>
<!-- Button with a link -->
<a href="https://rliao569.github.io/Tri2Repo/c4.4/2023/12/04/lightbulbs.html" target="_blank">
<button type="button">Click here for Lightbulbs</button>
</a>
</body>
</html>
<!DOCTYPE html>
%%HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Button on Hover</title>
<link rel="stylesheet" href="https://onecompiler.com/html/3zvenfggp">
</head>
<style>
.body{
display: flex;
height: 100vh;
background: black;
align-items: center;
justify-content: center;
}
.button{
position: relative;
height: 60px;
width: 200px;
border: none;
outline: none;
color: white;
background: #111;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
font-family: 'Raleway', sans-serif;
}
.button:before{
position: absolute;
content: '';
top: -2px;
left: -2px;
height: calc(100% + 4px);
width: calc(100% + 4px);
border-radius: 5px;
z-index: -1;
opacity: 0;
filter: blur(5px);
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
background-size: 400%;
transition: opacity .3s ease-in-out;
animation: animate 20s linear infinite;
}
.button:hover:before{
opacity: 1;
}
.button:hover:active{
background: none;
}
.button:hover:active:before{
filter: blur(2px);
}
@keyframes animate {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
</style>
<body>
<!-- Button with a link -->
<a href="https://onecompiler.com/html/3zvenfggp" target="_blank">
<button type=".button">Tic Tac Toe</button>
</a>
</body>
</html>
<!DOCTYPE html>
HOW ARE THE EMOJIS RENDERED ON YOUR SCREEN USING UNICODE?
Rock Paper Scissors Game
from random import choice
def display_choices(player_choice, computer_choice):
print(f"Player chooses: {valid_choices[player_choice]}")
print(f"Computer chooses: {valid_choices[computer_choice]}")
def display_game_winner(player_wins, computer_wins):
if player_wins > computer_wins:
print(f"{player_name} wins the series!")
print("You Win!")
elif computer_wins > player_wins:
print("Computer wins the series!")
print("Computer Win!")
else:
print("The series tied!")
def find_round_winner(player_choice, computer_choice):
if player_choice not in valid_choices:
return "Try again"
elif (
player_choice == "rock"
and computer_choice == "scissors"
or player_choice == "paper"
and computer_choice == "rock"
or player_choice == "scissors"
and computer_choice == "paper"
):
return "Player"
elif player_choice == computer_choice:
return "Tie"
else:
return "Computer"
def display_scoreboard(player_wins, computer_wins, num_games_played):
num_tie = num_games_played - (player_wins + computer_wins)
scoreboard = f"""
PLAYER_WINS: {player_wins}
COMPUTER_WINS: {computer_wins}
NUM_TIE: {num_tie}
NUM_GAME_PLAYED: {num_games_played}
"""
print(scoreboard)
num_games_played = 0
player_wins = 0
computer_wins = 0
valid_choices = {"rock": "✊",
"paper": "📜",
"scissors": "✂"
}
print("Welcome to Rock, Paper, Scissors!")
player_name = input("What is your name? ")
print("Your valid choices are:")
for valid_choice, emoji in valid_choices.items():
print(f"{valid_choice}: {emoji}")
while True:
player_choice = input(f"Choose rock, paper, or scissors {player_name}: ")
computer_choice = choice(list(valid_choices))
display_choices(player_choice, computer_choice)
round_winner = find_round_winner(player_choice, computer_choice)
if round_winner == "Player":
print("Player wins this round!")
player_wins += 1
elif round_winner == "Computer":
print("Computer wins this round!")
computer_wins += 1
elif round_winner == "Try again":
print("That was an invalid choice! Try again!")
continue
else:
print("This round is a tie!")
num_games_played += 1
display_scoreboard(player_wins, computer_wins, num_games_played)
keep_playing = input("Keep playing (y/n)? ")
if keep_playing != "y":
break
display_game_winner(player_wins, computer_wins)
Welcome to Rock, Paper, Scissors!
Your valid choices are:
rock: ✊
paper: 📜
scissors: ✂
Player chooses: ✊
Computer chooses: ✊
This round is a tie!
PLAYER_WINS: 0
COMPUTER_WINS: 0
NUM_TIE: 1
NUM_GAME_PLAYED: 1
Player chooses: ✊
Computer chooses: ✂
Player wins this round!
PLAYER_WINS: 1
COMPUTER_WINS: 0
NUM_TIE: 1
NUM_GAME_PLAYED: 2
Player chooses: ✂
Computer chooses: 📜
Player wins this round!
PLAYER_WINS: 2
COMPUTER_WINS: 0
NUM_TIE: 1
NUM_GAME_PLAYED: 3
ryan wins the series!
You Win!