1. Simple Math
 The main language of HiConsole is LISP. LISP was invented in the 1950s to get maximum flexibility and power from the limited machines of the time. Like a good game, its rules are simple to learn, and its combinations become interesting and complicated. Simple math in LISP is odd - the whole command is usually enclosed in parenthesis, and the first thing in the parenthesis is the instruction to do on every item in the list.
For example, to get the sum of 100 and 5, we could type this into HiConsole:
(+ 100 5)
This will produce the answer 105. It's funny to put the operator first, isn't it? Try asking JavaScript the same thing, in its own syntax: (by prefixing the question with "J or j + space" )
j 100+5
Which also gives 105. But to ask JavaScript to add 5 items, we have to put the + between each item:
j 100+5+4+3+2
And this gives 114 as it should. So does LISP, but notice how you only need one +:
(+ 100 5 4 3 2)
Does it seem simpler? It helps when you start to ask more complicated things, like
(+ 100 5 (* 1 2))
 What do you think this will produce? What will be done first? Notice the two parenthesis at the end, just as if we had phrased it in JavaScript:
j ( 100 + 5 + (1 * 2))
JavaScript lets us drop in an extra set of ()'s for clarity. But LISP is not like that. To LISP, every time you open a parenthesis (, the next thing must be a command, and the rest of the things are what you do the command to. These can be numbers, strings, or even other commands, and you had better remember to close the expression with a ).
1.2 LISP to and from HTML <ul>s
HiConsole's Diagram (in the Extras bar) helps you visualize and rearrange code, substituting boxes for parenthesis. This is a basic form of visual programming.
1.5. Simple Math, Continued
If we ask LISP,
(+ 100 5 * 1 2)
It says nothing, because it can't figure out what to do with the multiply sign * because it has no numerical value. In LISP, the style is very picky, but its pickiness makes it potent in fewer characters. You may eventually thank LISP for making code a thinking game, instead of a typing game. (Unless you get paid by the line!)
Lots of people disdain LISP because of the name, because it came out in 1958, or because they get "lost in stupid parenthesis". They know that languages that let you talk to the machine in a more mechanical way are more efficient. This isn't always true, so HiConsole provides both.
 2. Drawing Graphics
Drawing graphics is really easy. Like talking to JavaScript, you start talking with a character:
r whiteoval ellipse(220,166,80,100)
r sends a command to Raphael. Once you hit enter, If you have the Graphics window visible, you'll see that new oval as a thin black line with nothing in it. Then just keep talking to Raphael to extend the original definition:
r whiteoval attr stroke-width 8
r whiteoval attr fill white
r whiteoval attr opacity 0.2
 Sweet, huh? [Note: IE6 won't change transparency yet] Anyway, now let's define what happens when you click on the element border or fill if it has one.
r whiteoval click output1("whiteoval","hi");
Now, whenever this object gets a click, it's going to say hi.
The JavaScript command "output1(talker,message)"; needs the inputs "who's talking to output1?" and "what do you say?". If you don't want to be as formal as output1, use debug1(talker,message); . Raphael talks on debug2, which shows up in the graphics window.
3. Adding a Button to the UI
This one seems like it should be hard, but it's easy. We want to experimentally add a button to the HiConsole User Interface.
Let's add two buttons to push the scratchpads into the input box.
Each line of this macro must be pasted and entered into the Input box, one after the other. Note that HTML-ful variables appear as live HTML in the debug window.
You can run this program from the Cookie Disks, or copy and paste it from here into the input box. To continue a line, start the next line with a space, a ), or a }.
j var thisdemopurpose='make a new function in the UI!.'
j showElement('scratchpads');
j scratchpadbar = document.getElementById('scratchpadcommands');
j pad1ToInputbox = function(){
setInputBox(document.getElementById('spad1').value);
};
j pad2ToInputbox = function(){setInputBox(document.getElementById('spad2').value); };
j scratchpad1HTML = "<input type='button' name='p1toinput' ";
j scratchpad1HTML += "value='Pad 1 to input' onclick='pad1ToInputbox();' />";
j scratchpad2HTML = "<input type='button' name='p2toinput' ";
j scratchpad2HTML += "value='Pad 2 to input' onclick='pad2ToInputbox();' />";
j scratchpadbar.innerHTML = scratchpad1HTML + ' ' + scratchpad2HTML ;
j debug1("AddButtons","We did it.");
Illustration of the result:
The friendly nature of JavaScript and the DOM allow a user to build up an environment and maybe an ecology.
Adding a Unit to the Rack
This example uses the empty rack built into HiConsole to create a ROT13 encoder/decoder. You can copy and paste this whole block into the Input window and hit Enter.
j var thisdemopurpose='Make a GUI-based rot13 encoder/decoder.'
j creds13 = "rot13 code thanks to Soft Rock Software";
j rot13 = function(plaintext) {
var src=new String(plaintext) ;
var dst=new String('') ;
var len=src.length ;
var b ;
var t=new String('') ;
if(len > 0) {
for(var ctr=0; ctr<len ; ctr++) {
b=src.charCodeAt(ctr);
if( ( (b>64) && (b<78) ) || ( (b>96) && (b<110) ) ) {
b=b+13 ;
} else {
if( ( (b>77) && (b<91) ) || ( (b>109) && (b<123) ) ) {
b=b-13
}
}
t=String.fromCharCode(b) ;
dst=dst.concat(t) ;
}
return dst ;
}
}
j creds47 = "rot47 code thanks to gubler.net";
j rot47 = function(data){ var res = "";
for(var i = 0; i < data.length; i++) {
var ch = data.charCodeAt(i);
res += (ch + 47 >= 126) ? String.fromCharCode(" ".charCodeAt(0)
+ (ch + 47) % 126) : String.fromCharCode(ch + 47); }
return res;
}
j rfromtext = "start";
j rtotext = " ";
j tothirteen = function(){
rottotext = rot13(rfromtext);
rtotext = rottotext ;
output1("rot13", "rot13(" + rfromtext + ") = " + rottotext );
replaceRtable();
};
j fromthirteen = function(){
rotfromtext = rot13(rtotext);
rfromtext = rotfromtext ;
output1("rot13", "rot13(" + rtotext + ") = " + rotfromtext );
replaceRtable();
};
j rbtntothirteen = " <input type='button'
value='> to rot13 >' onclick='tothirteen();' />";
j rbtnfromthirteen = "<input type='button'
value='< from rot13 <' onclick='fromthirteen();' />";
j tofourtyseven = function(){
rottotext = rot47(rfromtext);
rtotext = rottotext ;
output1("rot47", "rot47(" + rfromtext + ") = " + rottotext );
replaceRtable();
};
j fromfourtyseven = function(){
rotfromtext = rot47(rtotext);
rfromtext = rotfromtext ;
output1("rot47", "rot47(" + rtotext + ") = " + rotfromtext );
replaceRtable();
};
j rbtntofourtyseven = " <input type='button'
value='> to rot47 >' onclick='tofourtyseven();' />";
j rbtnfromfourtyseven = "<input type='button'
value='< from rot47 <' onclick='fromfourtyseven();' />";
j rbtnclearboth = " <input type='button'
value='X clear both! ' onclick='rclearboth();' />";
j rclearboth = function() { rfromtext = " "; rtotext = " "; replaceRtable(); };
j textareafocusHTML = " onfocus='activateIO();' onblur='deactivateIO();' ";
j rfootr = "<br/><center>" + "<label style='color: gray;'>" +
creds13 + " - " + creds47 + "</label></center>";
j returnltbhtml = function() { return "<textarea id='rfrombox' " +
textareafocusHTML + " style='width: 100%; height: 200px;'
onchange='rfromtext=this.value;' >" + rfromtext + "</textarea>" };
j returnrtbhtml = function() { return "<textarea id='rfrombox' " +
textareafocusHTML + " style='width: 100%; height: 200px;'
onchange='rtotext=this.value;' >" + rtotext + "</textarea>" };
j rccol = rbtnclearboth + "<br/><br/>" + rbtntothirteen + "<br/>" +
rbtnfromthirteen + "<br/><br/>" + rbtntofourtyseven + "<br/>" +
rbtnfromfourtyseven ;
j returnRbhtml = function() { return
"<table width='100%'><tr><td width='40%' align='center'>" +
returnltbhtml() + "</td><td width='18%'>" + rccol + "</td><td width='40%'>" +
returnrtbhtml() + "</td></tr></table>" + rfootr; };
j replaceRtable = function() {
document.getElementById("newUnit1div").innerHTML = returnRbhtml() ; };
j rbhtml = returnRbhtml();
j addUnit("rotator 13", rbhtml );
j return "rot13 ready.";
4. ASTRONOMICAL OBJECTS!
Maybe the Sistine Chapel has nothing to do with vector graphics. And maybe Michelangelo knew his classical geometry. The name of this game is blowing up astronomical objects, in the phosphor footsteps of a modern classic.
This macro will set up conversions from degrees to sine and cosine to correctly place the ship, bullets, and everything onscreen. Grab it from this textfile, then paste it into the inputbox and hit Enter.
Control the ship with the onscreen Dpad or the keys (WASD / OKL; ) in the little key diagrams. Unlike classical Asteroids, there's no friction, so you won't slow down unless you brake, or turn around 180 degrees and cancel your momentum.
The Raphael Graphics unit is redrawn ten times a second. All the time-based functions attach to two timers already defined in the system, called onehz() and tenhz(). As you would expect, onehz() runs once a second, tenhz() runs TEN TIMES a second. CAPS added because you can crash your web browser with this kind of repetition.
 So, keep these commands handy if you define onehz() and tenhz() in your macros:
j stopTimer();
j stopTenthsTimer();
Notice that if you want to continue a statement on a new line, just use a space " " as the first character of the line. That way, HiConsole will put your lines back together before entering them as input. TAB doesn't work yet, just add a space at the beginning of the line.
(This kind of stack-based, industrial-hopper, one-at-a-time card switching system was done before the electronic computer existed. Charles Babbage got the idea from Henri Jacquard, who got it from M. Falcon. If not for Thomas Watson Jr., IBM would have stayed in the card-punching business.)
|