In addition to the built-in codes (see previous posts), the US Hawks has a few custom BB Codes.
BBCode: "table1" (single line border)
Top Left
Top Right
Bottom Left
Bottom Right
Top Left
Top Right
Bottom Left
Bottom Middle
Bottom Right
1
2
3
4
5
6
7
8
9
BBCode: "tablez" (no border) See if you recognize the names in this list.
Button Gwinnett Lyman Hall George Walton
William Hooper Joseph Hewes John Penn Edward Rutledge Thomas Heyward, Jr. Thomas Lynch, Jr. Arthur Middleton
John Hancock Samuel Chase William Paca Thomas Stone Charles Carroll of Carrollton George Wythe Richard Henry Lee Thomas Jefferson Benjamin Harrison Thomas Nelson, Jr. Francis Lightfoot Lee Carter Braxton
Robert Morris Benjamin Rush Benjamin Franklin John Morton George Clymer James Smith George Taylor James Wilson George Ross Caesar Rodney George Read Thomas McKean
William Floyd Philip Livingston Francis Lewis Lewis Morris Richard Stockton John Witherspoon Francis Hopkinson John Hart Abraham Clark
Josiah Bartlett William Whipple Samuel Adams John Adams Robert Treat Paine Elbridge Gerry Stephen Hopkins William Ellery Roger Sherman Samuel Huntington William Williams Oliver Wolcott Matthew Thornton
Here's a hint:
Signatures.jpg (42.2 KiB) Viewed 11786 times
BBCode: "bg" (background color)
Testing BB Codes without TT: 1 2 3 4 5 6 7 8
BBCode: "tt" (teletype - monospaced font)
Testing BB Codes with TT:
1 2 3 4 5 6 7 8
Testing BB Codes with TT and color:
1 2 3 4 5 6 7 8
Testing BB Codes with TT and color at 25%:
1 2 3 4 5 6 7 8
Testing BB Codes with TT and color at 50%:
1 2 3 4 5 6 7 8
Testing BB Codes with TT and color at 80%:
1 2 3 4 5 6 7 8
Testing BB Codes with TT and color at 200%:
1 2 3 4 5 6 7 8
Testing BB Codes with TT and random colors at 200%:
Testing BB Codes with TT and random colors and a border at 200%:
BBCode: "px" (pixels)
Here's the same example using Pixels (px) at 200%:
Here's an example of mixing normal text with "Pixel" text at 200%:
COOL COLORS
BBCode: "youtube" (embed a YouTube video)
It's pretty easy to embed YouTube videos with our "youtube" tag:
Just click the "youtube" button, and you'll see a pair of tags that look like this:
[youtube][/youtube]
Then insert the Video ID in between the two youtube tags. Here's an example using Ken's collision with an RC at Torrey:
[youtube]DvITguK5fQQ[/youtube]
Here's the final result:
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
To embed it, place that number in a "vimeo" tag: [vimeo]286965017[/vimeo]
Here's what you get:
Since this code was added long after many people began using Vimeo links, please contact me if you'd like any of your older posts to include an embedded version of your vimeo links.
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
We have a relatively new code for indenting blocks of text. This is useful in a number of situations including cases where you want to show a quote without the "heavy" quote box. Here's an example:
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
That was done with the "left=40" tag as shown here:
[left=40]When in the Course of human events ... : ... most likely to effect their Safety and Happiness.[/left]
The number "40" is the number of pixels to indent the text.
You can also add other font effects, such as color and italic for example:
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
That was done with the "color" and "italic" tags added inside the "left" tag as shown here:
[left=40][color=#000080][i]When in the Course of human events ... : ... most likely to effect their Safety and Happiness.[/i][/color][/left]
Notice that the tags are closed in the opposite order that they were opened:
[left=40][color=#000080][i]When in ... [/i][/color][/left]
This is called proper "nesting" when inner tags are both opened and closed within their outer tag. It's generally a good idea to use proper nesting. When your results don't look right, check for proper nesting.
Finally, you can also indent single lines with our numbered spacers:
These numbers represent the number of spaces (not pixels). But remember that these will only work on one line at a time, and they don't "wrap", so they're best for short lines like these:
A. First Major Heading 1. Sub heading (uses [4][/4]) a) Sub sub heading (uses [8][/8]) b) Sub sub heading (uses [8][/8]) c) Sub sub heading (uses [8][/8]) 2. Sub heading (uses [4][/4]) a) Sub sub heading (uses [8][/8]) b) Sub sub heading (uses [8][/8]) B. Second Major Heading 1. Sub heading (uses [4][/4]) a) Sub sub heading (uses [8][/8]) b) Sub sub heading (uses [8][/8]) 2. Sub heading (uses [4][/4]) a) Sub sub heading (uses [8][/8]) b) Sub sub heading (uses [8][/8]) c) Sub sub heading (uses [8][/8])
That whole block is in a "left=40" tag, and each line has additional indentation as noted.
So why is all this needed? Why not just use spaces? It turns out that BBCODE and HTML both treat multiple spaces like a single space. I won't go into their reasons, but the result is that custom spacing (indents or otherwise) require the use of these custom codes.
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
Based on Rick Masters' suggestion several years ago (thanks Rick), the US Hawks has been using the secure protocol known as "https" instead of the normal "http". As more sites move to the secure protocol, the web browser developers have chosen to flag the normal "http" links as "insecure".
All of the U.S. Hawks pages currently use "https", but you may still get a browser warning when visiting some of our pages. The reason is that browsers will also flag pages that include ANY of the normal "http" content. So how can that happen? It happens when you include an image with the [img] tag and don't specify "https" in the protocol for the image. When you include such an image, the browser fetches it from an external site. And since that site is not using "https", the browser may flag the entire page as containing "mixed" content (some secure and some insecure).
This is not a big problem. But if you want the page containing your posts to show up as "secure", then it's best to only use the [img] tag with the "https" protocol.
Finally, this does bring up a bigger problem that we've seen with the [img] tag. This tag will always fetch the image from that other (usually external) site when the page is viewed. If that site goes down or out of business or rearranges its pages, then the image in your post will not be found. Since our site is now more than 10 years old, we're seeing more and more of these broken image links. So for that reason, I really prefer if people would actually upload the images in their posts rather than using the [img] tag.
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
You can see that the whole chessboard is surrounded with the [chessboard] and [/chessboard] tags. Then each row of the chessboard is surrounded by the [chessrow] and [/chessrow] tags. Finally, each square is made with either the [chw] and [/chw] tags (to make "white" squares) or the [chb] and [/chb] tags to make "black" squares.
Since these squares are all empty, they are just filled in with our standard 2 character spacer ( [2][/2] ).
Now, to put a chess piece into one of these squares, we need to copy one of the unicode chess pieces (from somewhere) into our code. Here are all of the possibilities in both black and white:
King: ♚ ♔
Queen: ♛ ♕
Bishop: ♝ ♗
Knight: ♞ ♘
Rook: ♜ ♖
Pawn: ♟ ♙
Let's say that we want to put a king and queen on each side of our little 2x2 chessboard. Here's how it will look:
♛
♚
♕
♔
The code to do that looks pretty much like the previous code except that the unicode chess characters have been copied into the code in place of the [2][/2] spacer:
You can see from this code that the upper left corner is a white square ([chw] and [/chw]) containing a black queen (♛). The upper right corner is a black square ([chb] and [/chb]) containing a black king (♚).
You can also see from this code that the lower left corner is a black square ([chb] and [/chb]) containing a white queen (♕). The lower right corner is a white square ([chw] and [/chw]) containing a white king (♔).
Now let's build a 6x6 chess board leaving out the knights:
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
In the early days of digital computers, they were programmed directly with 1's and 0's. At some point, someone realized that they could assign certain patterns of 1's and 0's to represent letters. In those days, different computer manufacturers could assign whatever patterns they wanted to represent whatever letters they wanted. For example, IBM used an assignment table known as EBCDIC (Extended Binary Coded Decimal Interchange Code). Eventually, most manufacturers began to use a standard table known as ASCII (American Standard Code for Information Interchange). By that time, most computers were using an 8-bit "byte", so the ASCII standard used 7 bits for the character code and 1 bit as an optional parity bit (for error checking). With 7 bits, you can represent 128 distinct things, and the ASCII table contains 128 entries:
R\C
_0
_1
_2
_3
_4
_5
_6
_7
_8
_9
_A
_B
_C
_D
_E
_F
0_
NUL
SOH
STX
ETX
EOT
ENQ
ACK
BEL
BS
HT
LF
VT
FF
CR
SO
SI
1_
DLE
DC1
DC2
DC3
DC4
NAK
SYN
ETB
CAN
EM
SUB
ESC
FS
GS
RS
US
2_
SP
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
3_
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
4_
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
5_
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
6_
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
7_
p
q
r
s
t
u
v
w
x
y
z
{
|
}
~
DEL
The ASCII code for each symbol is the combination of the row and column for that symbol. For example, the symbol for upper case "A" is in row 4 and column 1, so the hex code for "A" is "41" which is represented by the seven bits "1000001". The symbol for lower case "z" is in row 7 and column A, so the hex code for "z" is "7A"which is represented by the seven bits "1111010".
That table was used for several decades, and it's still used today. But the ASCII table was designed for English characters and could not represent all the symbols used in other languages. So a new standard was designed to support all character sets around the world. The new standard was called "Unicode", and it contains thousands of symbols. Instead of being a 7 bit code (which fits in an 8 bit byte), the Unicode standard can be encoded in one or more bytes. For compatibility with ASCII, the first 128 Unicode characters contain the same 128 ASCII symbols listed above.
Because Unicode contains thousands of characters, I won't attempt to post them all here. You can find Unicode tables on the web by searching for "Unicode table". Here's one site that I found:
0x2607 9735. LIGHTNING ☇ 0x2608 9736 THUNDERSTORM ☈ 0x2609 9737 SUN ☉ 0x2605 9733 BLACK STAR ★ 0x2654 9812 WHITE CHESS KING ♔ 0x2655 9813 WHITE CHESS QUEEN ♕ 0x2656 9814 WHITE CHESS ROOK ♖ 0x2657 9815 WHITE CHESS BISHOP ♗ 0x2658 9816 WHITE CHESS KNIGHT ♘ 0x2659 9817 WHITE CHESS PAWN ♙ 0x265A 9818 BLACK CHESS KING ♚ 0x265B 9819 BLACK CHESS QUEEN ♛ 0x265C 9820 BLACK CHESS ROOK ♜ 0x265D 9821 BLACK CHESS BISHOP ♝ 0x265E 9822 BLACK CHESS KNIGHT ♞ 0x265F 9823 BLACK CHESS PAWN ♟ 0x2660 9824 BLACK SPADE SUIT ♠ 0x2661 9825 WHITE HEART SUIT ♡ 0x2662 9826 WHITE DIAMOND SUIT ♢ 0x2663 9827 BLACK CLUB SUIT ♣ 0x2664 9828 WHITE SPADE SUIT ♤ 0x2665 9829 BLACK HEART SUIT ♥ 0x2666 9830 BLACK DIAMOND SUIT ♦ 0x2667 9831 WHITE CLUB SUIT ♧ 0x2668 9832 HOT SPRINGS ♨ 0x2669 9833 QUARTER NOTE ♩ 0x266A 9834 EIGHTH NOTE ♪ 0x266B 9835 BEAMED EIGHTH NOTES ♫ 0x266C 9836 BEAMED SIXTEENTH NOTES ♬ 0x266D 9837 MUSIC FLAT SIGN ♭ 0x266E 9838 MUSIC NATURAL SIGN ♮ 0x266F 9839 MUSIC SHARP SIGN ♯ 0x2708 9992 AIRPLANE ✈ 0x2709 9993 ENVELOPE ✉ 0x270C 9996 VICTORY HAND ✌ 0x270D 9997 WRITING HAND ✍ 0x270E 9998 LOWER RIGHT PENCIL ✎ 0x270F 9999 PENCIL ✏ 0x2710 10000 UPPER RIGHT PENCIL ✐ 0x2711 10001 WHITE NIB ✑ 0x2712 10002 BLACK NIB ✒ 0x2713 10003 CHECK MARK ✓ 0x2714 10004 HEAVY CHECK MARK ✔ 0x2744 10052 SNOWFLAKE ❄
The point of this discussion is that you can copy and paste symbols from that table directly into your posts. For example, if you wanted to show a series of cards, you could do something like this:
K♥4♣ 8♦J♦A♠
Here's another example from a sign that I saw in Japan:
ト バ コ
If you don't read Japanese, you can look up those characters in the Katakana table. If you pronounce those three Katakana symbols you will hear a very American word.
These are just a few examples. The Unicode tables contain thousands of characters that you can copy and paste into your posts. Just be aware that the codes may not be displayed exactly the same on every computer depending on the installed fonts. For example, the following image shows the same Unicode characters displayed in different "fonts" on a computer and a cell phone:
Unicode_Examples.png (25.52 KiB) Viewed 5041 times
In other words, the same Unicode "code" for an AIRPLANE (9992 decimal or 0x2708 hex) will show up differently on different computers. This can lead to confusion if you're trying to describe what you see on your computer to someone looking at the same thing on their computer. So be careful about these subtle differences when using Unicode for communication across different computer platforms.
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
This post demonstrates using a Unicode character (☈) in a post title. Note that using Unicode in topic titles may cause some unexpected side effects and is not recommended (even though it does seem to work).
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
BBCodes for a Simple Drawing "Language" - Etch1 Click each button to see the drawing. Javascript must be enabled in your browser.
I've been teaching computer topics either formally or informally for about 40 years. In the early days, the key concept of programming was right up front and obvious because some of the early computers didn't come with any software at all. In some cases, you had to actually code in all of your programs from scratch. Today, the computer landscape is very different because computers have been layered with so much software that the fundamentals of programming are practically invisible. But underneath all those windows and graphics, they are still very very similar to those ancient computers that were programmed in 1's and 0's.
This particular set of BBCodes implements a simple drawing language called "Etch1".
Note: Etch1 is still highly experimental and subject to change.
The "Etch1" BBCode allows writing simple programs to make simple drawings. The "Etch1" language is pretty much like the old "Etch-a-Sketch" toy which allows you to move the drawing point in 4 directions leaving a trail of what it drew. The 4 directions are "Up", "Down", "Right", and "Left", and they are represented by the codes "U", "D", "R", and "L". This first example draws a small box by moving Up three times (UUU), moving Right three times (RRR), moving Down three times (DDD), and moving Left three times (LLL). Here's the code and the result (click the button to run the program):
[etch1=Simple_Box] UUU RRR DDD LLL [/etch1]
You'll notice that the box isn't centered. That's because the drawing point starts out in the center, and our program moved up and to the right before coming back to the center. So the box has its lower left corner at the center and the rest of the box is to the upper right. We can learn how to change that later.
If you want to add that example to your own post, here's what you would enter into your post:
[etch1=Simple_Box] UUU RRR DDD LLL [/etch1]
That's all you have to do. The tag name is "etch1" (because there will likely be future versions 2, 3, ...). The "etch1" tag appears with the normal pairing:
[etch1...] ... [/etch1]
The "etch1" tag has one parameter that assigns a name to the drawing ("Simple_Box" in this example). It's important that each drawing name is unique within each page of posts or there may be some conflicts. The actual program itself ("UUU RRR DDD LLL") is contained between the starting and ending tags. For this version, there can not be any line breaks (carriage returns or line feeds) within the program. This is fine for short programs like these, but it's a serious limitation for longer programs. Hopefully that will be fixed in future versions of the "etch" tag.
Now let's try a slightly longer program that will be naturally centered. As with the previous program, we'll draw a box to the upper right, but then we'll balance that with a box to the lower left. Here's the program and result:
This simple "programming language" has several other features that allow changing colors, changing line width, moving without drawing, and drawing arbitrary lines from point to point. The examples below will show some of these features. Just click each button to show the results for that example.
Drawing Size (..._width_height)
The first feature to mention is the drawing size which can be specified in the name of the drawing. The syntax is pretty simple. Just give the drawing name followed by an underscore followed by the desired width followed by another underscore and then followed by the height. So If you want to draw the previous "Balanced Boxes" in a drawing size of 140 x 100, you would specify it as:
You generally want the drawing size to be slightly larger than whatever you're drawing so that all of the drawing is visible.
Line Thickness (W and w)
The thickness of the drawing line can be changed with the "W" (wider) and "w" (less wide) instructions. In general, the capital (upper case) version enables a feature while the lower case version disables or reverses it. So if we wanted to draw a line of varying thickness, we could add any number of "W" or "w" changes while doing the drawing. The following program does this by making the lines progressively wider and then progressively narrower. The program starts out with a series of Left ("L") instructions to get to the left edge of the drawing. Then it performs a series of Right ("R") instructions while adjusting the line thickness with either "W" (wider) or "w" (narrower) instructions:
Each upper case "W" instruction makes the line a little thicker. So three "W" instructions in a row makes each successive line thicker and thicker. Similarly, each lowercase "w" instruction makes the line a little thinner. If we wanted to draw our earlier "Balanced Boxes" with a thicker line, we could just add a series of "W" instructions to the front of the program to make all drawing wider. This example uses 4 "W" instructions to thicken the lines:
As shown above, the "WWWW" instructions make the line thicker and easier to see. We'll be using the "W" instruction for that purpose in many of our programs.
Line Color (0 through 9)
In addition to line thickness, you can also change the color. To keep things simple, there are only 10 colors - one for each decimal digit 0 through 9. Here's the color table for "etch1":
0 Black 1 Blue 2 Green 3 Cyan 4 Red 5 Magenta 6 Yellow 7 White 8 Orange 9 Gray
To use a color, just insert the color instruction into your program wherever you want to change colors. For example, we can add colors to each leg of our previous "Balanced_Thick_Boxes" program by simply inserting the color numbers where we want to change them:
Using color will also help us understand another feature of our simple "etch1" programming language. So far, we've just used the Up, Down, Right, and Left instructions without really thinking about how far we were moving up, down, right, or left. We can begin to measure this by changing colors between instructions. So we can move right, change the color, move right again, and change the color again. This will let us see how far we are moving with each instruction. We'll use a triple-W thickness for our lines to make them more visible. Here's the program:
[etch1=Measure_R_600_100]WWW R 1 R 2 R 3 R 4 R 5 R 6 R 7 R 8 R 9 R[/etch1]
You can see that our program starts by making the lines extra wide (WWW). Then the program moves "Right" one step with the default color (white). The next instruction (after the first "R") is "1" which is the color blue (see the table above). The next instruction moves right again (R) making a blue segment. The following instruction is "3" which is the instruction for the color green. So the next "R" instruction moves right with the color green. This lets us easily see how far we draw with a single "R" instruction. In this version ("etch1"), that standard distance is about 10 pixels. So each colored segment is about 10 pixels long. But we can change that with another instruction that scales the length of each drawing step. The "Scale" instruction uses the capital letter "S" to double the length of each drawing instruction. So we can use the exact same code as before, but prefix it with a single "S" and all of the lengths will be doubled. Here's the code:
[etch1=Measure_Rx2_600_100]S WWW R 1 R 2 R 3 R 4 R 5 R 6 R 7 R 8 R 9 R[/etch1]
You can see that all of the line segments are now twice as long as they were before. We can use this scaling to simplify some of our drawings. Our previous multi-color boxes used 3 instructions in each direction (UUU RRR DDD LLL) to make the lines as large as we might want them. Instead, we could easily use two S instructions to do the scaling first and get a similar effect. You'll see that the following drawing code only uses a single "U", "R", "D", or "L" for each leg of the drawing:
[etch1=Multicolor_Scaled_Boxes_100_100]SS WWWW 2 U 3 R 4 D 5 L 6 L 7 D 8 R 9 U[/etch1]
We could easily double it again by adding another "S" instruction and increasing the size of our window:
[etch1=Multicolor_Large_Boxes_200_200]SSS WWWW 2 U 3 R 4 D 5 L 6 L 7 D 8 R 9 U[/etch1]
We could make it even bigger (and thicker) by adding more "S" and "W" instructions:
[etch1=Multicolor_Larger_Boxes_400_400]SSSS WWWWWWWWWWWWWWWW 2 U 3 R 4 D 5 L 6 L 7 D 8 R 9 U[/etch1]
As with many of our other instructions, the scaling instruction scales up with an upper case "S" and reverses it (scales down) with a lower case "s". So we can draw varying lengths of dashed lines by alternating colors (white and red for example) while changing the scaling (note that the initial "SSSLLLsss" instructions move to the left for better centering):
[etch1=Variable_Dashes_600_100]SSSLLLsss WWWW 7R S 4R S 7R S 4R S 7R s 4R s 7R s 4R s 7R[/etch1]
You can see that the first segment (drawn with "7R") is the normal 10 pixels white line. Then the "S" instruction doubles the length, and the next red segment (drawn with "4R") is a red line twice as long (20 pixels). The next "S" instruction doubles the length again to 40 pixels, and the following "7R" draws a white segment of 40 pixels. The next "S" instruction doubles the length again to 80 pixels, and the following "4R" draws a red segment of 80 pixels. The final "S" instruction doubles the following "7R" to 160 pixels which draws the largest white segment in the center. Then the lower case "s" instructions begin cutting the length in half each time.
Scaling (+ and -)
If doubling ("S") or halving ("s") is too much, you can also change the scale factor by plus or minus 1 with the "+" or "-" instructions. Here's an example that initially scales up by 8 (SSS) and then gradually scales down (note that the initial "L" instructions move to the left for better centering):
Before leaving the topic of scaling, there is one more scale-related feature of the "etch1" language. So far all of the "U", "D", "L", and "R" instructions have been in upper case and started with a default length of 10 pixels. There are also lower case versions of those same instructions ("u", "d", "l", "r") which default to a single pixel length. These are handy for very detailed drawing, but such small movements can be hard to see. That's why we've been using their upper-case cousins. This drawing uses 10 single-pixel drawing instructions for each segment. But it would need 30 single-pixel drawing instructions to equal the previous "UUU RRR DDD..." instructions of our earlier drawings. That's why this drawing is about 1/3 the size of the earlier versions.
So far, all of our drawings have been fully connected. In other words, all of our up, down, right, and left instructions have been drawing something of one color or another. There is also a "Move Mode" that interprets those same exact instructions as "Move" instructions rather than "Draw" instructions. The "Move Mode" is entered with an upper case "M", and exited with a lower case "m". Let's start by drawing our normal figure 8 as we've been doing so far:
As you can see, the horizontal line draws over the vertical line. We can keep that from happening by turning on "Move Mode" while drawing those left segments like this:
[etch1=Draw_and_Move]WWW UUU RRR DDD LL M LL m LL DDD RRR UUU[/etch1]
So the program started out moving up, then right, then down, and then began going left. But rather than drawing all 3 steps left (which would have drawn to the center), this program only drew 2 steps left and then went into "Move Mode" with the "M" instruction. Then it executed 2 more Left ("L") instructions, but in "Move Mode", those "L" instructions did not draw. After those two left moves, the program executed the "m" instruction which took it out of Move Mode to continue drawing normally.
While that last example used Move Mode to skip over something, the more common purpose of move mode is to change position without drawing. In an earlier example, we drew progressively thicker then thinner lines like this:
Now with the drawing centered, we wouldn't need such a wide window, so that drawing can be re-done in a smaller window with a few additional "l" instructions to fine-tune the centering as shown here:
That covers most of the "etch1" instructions. But there is one last feature that will take some explanation.
Keep Previous Position and Draw from Previous Position (K and k)
This simple "computer" can only move or draw left, right, up, and down by one unit at a time. That makes it difficult to draw smooth diagonal lines that are not either perfectly vertical or horizontal. One approach is to simply alternate horizontal and vertical draw instructions as shown here:
[etch1=Alternating_Diagonal_200_120]WWW M LLLLDDDD m RURURURURURURU[/etch1]
But that takes a lot of steps and it's also very very ugly. To overcome this problem, the "etch1" instruction set contains a "Keep" instruction ("K") to allow moves or draws while "keeping" the previous location as the starting point for the next "End of Keep" ("k") instruction. This allows drawing of smooth lines from any point to any other point as shown here based on that previous example:
[etch1=Smooth_Diagonal_200_120]WWW M LLLLDDDD K RURURURURURURU k[/etch1]
As with many "etch1" instructions, the "Keep" instruction uses an upper case "K" to enable it, and a lower case "k" to reverse (or complete) it. Let's start with an example that draws a right triangle using the "K" and "k" instructions:
[etch1=Right_Triangle_200_120]WWW M LLLLDDDD m K 2 RRRRRRRRR 4 UUUUUUU 7 k[/etch1]
To help us understand this fairly complex program, let's break it into sections with comments:
Code
Comments
WWW
These 3 "W" instructions make all following lines thicker.
M LLLLDDDD m
These instructions Move Left and Down to center the drawing.
K
The "K" instruction "Keeps" this starting point for the next "k" instruction.
2
This is a color instruction that chooses the color green.
RRRRRRRRR
These "Right" instructions draw the green horizontal line.
4
This is a color instruction that chooses the color red.
UUUUUUU
These "Up" instructions draw the vertical red line.
7
This is a color instruction that chooses the color white.
k
The "k" instruction draws a line from the previous "K" location to the current location.
In other words, the "K" instruction marks (or "Keeps") a location that can later be used to draw a direct line to the current location whenever the matching "k" instruction is executed. It doesn't matter what path was taken to get from the Keep location to the current location. The line will still be drawn directly between the two. It also doesn't matter if that path was traversed in "Move Mode" or "Draw Mode". In this example, the two legs (horizontal and vertical) were drawn before the "k" instruction was executed. But those same legs could have been traversed in "Move Mode" as shown here to only draw the hypotenuse:
[etch1=Hypotenuse_200_120]WWW M LLLLDDDD K 2 RRRRRRRRR 4 UUUUUUU 7 k[/etch1]
Because the "Move Mode" remained active (no "m" to cancel it) all of the "R" and "U" instructions did not draw anything. Only the final "k" instruction drew the final line.
To help clarify the "Keep" instructions, the following program will use somewhat random motions (drawn in gray) to draw a square (drawn in red):
[etch1=Rand_Walk_Square_300_300]S WW 9URDRUULURRUURD K RRDRDDDLDRDLLDDL 4 k K 9 DLLUULDDDLLURUULULDLDDLU 4 k K 9 LLDRUUULURUURRRULLLUUR 4 k K 9 URRRDDRUUURRRRDD 4 k[/etch1]
The starting location is at the center of the drawing (as always with "etch1"). The different move commands are used to draw a gray random "wander" to the upper right corner of the square. That point at the upper right corner is "Kept" with the "K" instruction. Then the program wanders down to the lower right corner where the first red line is drawn with the "k" instruction. The "k" instruction always draws from the "Kept Point" to the current point. Then the "K" command is executed again to keep that lower right corner point. The random walk continues to the lower left where another "k" draws the red line and another "K" keeps that new point. This process is continued to the upper left corner and finally to the upper right corner.
That previous example drew sequential connected lines which required the "Keep Point" to be updated after each move (a new "K" followed each "k" except the last). But the "Keep Point" can also be left stationary and connected to different current points. This tends to be the basis of the "star" pattern as shown here:
[etch1=Star_150_150]WW S K M 4 UUU k RRD k DDR k DDL k LLD k LLU k LUU k RUU k[/etch1]
In this case, there is only one "Keep" instruction near the beginning of the program. That "K" instruction keeps the origin point at the center of the drawing. The "K" instruction is followed by the "Move" instruction ("M") so all of the other instructions are moves rather than draws. The only drawing happens with each "k" instruction which draws a line from the "Keep Point" to that location. The result is the star pattern shown here.
The Keep instruction can be very helpful whenever a diagonal line is needed. For example, this drawing of a "Rook" from the game of Chess shows how the "K" and "k" instructions can be used to draw a few diagonal lines:
[etch1=Rook_250_150]8 WWW MLLLUUUm URDRURDRURD D KMDLk mDDD KMRRDk m DLLLLLLLU KMRRUk mUUU KMLUk mU[/etch1]
This crude hang glider drawing shows another use of the "K" and "k" instructions:
That completes this tutorial on the "etch1" drawing language. This final example draws an American Flag (minus the stars). It is followed by a reference section listing all of the "etch1" instructions. Have fun!
======================================================================================== Instruction Set for the "Etch1" Drawing Language:
u: Draw (or Move) up by 1 unit d: Draw (or Move) down by 1 unit r: Draw (or Move) right by 1 unit l: Draw (or Move) left by 1 unit U: Draw (or Move) up by 10 units D: Draw (or Move) down by 10 units R: Draw (or Move) right by 10 units L: Draw (or Move) left by 10 units M: Enter Move Mode m: Exit Move Mode +: Increase Unit Length by 1 -: Decrease Unit Length by 1 S: Increase Unit Length by factor of 2 s: Decrease Unit Length by factor of 2 W: Increase Line Width by 1 w: Decrease Line Width by 1 0: Set Color to Black 1: Set Color to Blue 2: Set Color to Green 3: Set Color to Cyan 4: Set Color to Red 5: Set Color to Magenta 6: Set Color to Yellow 7: Set Color to White 8: Set Color to Orange 9: Set Color to Gray K: Keep this point for a later "k" draw k: Draw line from previous Keep
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
Craig recently mentioned that he didn't like to use the "quote" tag in some cases because it added a background color to the text that he didn't really like. I agree with Craig that in some cases that background color isn't appropriate.
Unfortunately, the "quote" code is part of the original phpBB forum software and I am very hesitant to change it. Even worse, the quoting styles seem to be different for every "theme" (different styles for our different subforums) so I would have to change each theme to change it.
Instead, I've added a new BBCode named "doc". It is intended to show the text of a document in a box with a border. The background color will always be white in all forums and subforums. It is very similar to the "left" BBCode that I added earlier. It also takes a single numeric parameter which specifies the indent of the box. Here's an example:
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.
That was done with the "[doc=30]" tag as shown here:
[doc=30]When in the Course of human events ... : ... most likely to effect their Safety and Happiness.[/doc]
As with the "left" code, the number "30" is the number of pixels to indent the document box itself.
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
That longer form of video ID doesn't work for embedding here on the U.S. Hawks. The video numbers (IDs?) are different between the two, and I'm not sure why they didn't make them identical (I don't fully understand their system yet). But if you want to embed a video from the longer ID, you can get the required short ID by clicking on the "3 dot" link below the video (lower right corner in this picture):
Rumble_Embed_1.png (245.15 KiB) Viewed 28 times
That will pop up a small dialog:
Rumble_Embed_2.png (222.19 KiB) Viewed 28 times
Click on "<> Embed" and that will give you a window that will show you the ID to use:
Rumble_Embed_3.png (126.6 KiB) Viewed 28 times
Just put that reference ID (v4aktz6 for this video) inside a "rumble" tag: [rumble]v4aktz6[/rumble] and it should work.
Thanks to Finis for the motivation to include the "rumble" tag and making the U.S. Hawks even better!
Join a National Hang Gliding Organization:US Hawks at ushawks.org View my rating at:US Hang Gliding Rating System Every human at every point in history has an opportunity to choose courage over cowardice. Look around and you will find that opportunity in your own time.
Home
