OnRamp

A quick tutorial on the language and environment.
Placeholder Image

Language Overview

 

Placeholder Image

Examples

 

Placeholder Image

Usage Overview

 

Language Overview

Purpose

OnRamp has been carefully and deliberately designed to make it easy and fun to learn and write "real" code.  Therefore, OnRamp does without features which are useful to professional-grade tools (e.g. strict typing, syntactic sugar, distinction between Float and Int, etc.) 

Furthermore, the direct integration of powerful graphics (both traditional Cartesian as well as radial 'Turtle') makes it easy explore geometry, visualize complex functions and (in a near-future release) create graphical user interfaces and play with animation.

OnRamp even supports Object-Oriented Programming and closures.

This all makes OnRamp powerful enough for teaching and learning foundational Computer Science concepts such as data structures and algorithms.

 

Principles:
  1. Clarity  It should be easy to both understand and write code.  Furthermore, code will be explicit instead of implicit.
  2. Simplicity  A handful of principles will broadly apply to all aspects of the language, making it easier to learn and use, and symbols will generally only serve a single purpose to reduce confusion.  
  3. Power The language will have first-class support for modern techniques like Object-Oriented Programming and closures.

 

Syntax Basics
  • Tokens are groups of letters and numbers, potentially with preceding and/or trailing modifiers.
  • Certain tokens are reserver keywords, such as 'if' and 'print'.
  • Operators are characters with special meaning, such as the "arithmetic operators" of +, -, / and *.
  • Tokens and operators must be separated by whitespace.
  • Modifiers must not have any space between themselves and the associated token (e.g. ':' '.')
  • Treat a token as a message by preceding it with the '.' modifier
  • Bind a token to the next value by appending the token with a ':' modifier
  • Access an element of an array or dictionary with the '/' operator
  • The first element in an array is at index 1
  • The '/' symbol is used to access elements of an array, dictionary or object. This is a rare case where a symbol has more than one meaning (because it's already used for division), but was chosen because it's already familiar by it's usage designating URLs and directory-file paths. 
  • Reserved words:
    • 'class'  treat the next two values as the class's name and the dictionary which contains the properties and/or methods for the class.
    •  'print' print out the preceding value to the console.
  • Special Operators:
    • '...' designates a range, inclusive of both the low and high values.
    • '[' begin an array
    • ':[' bein a dictionary
    • ']' end an array or dictionary
    • '{' begin a code block
    • '}' end a code block

 

Operation Basics
  • There is only a single 'Number' type instead of Int, Long, Float and Double; this is by design to alleviate the confusion this typically causes among those who aren't mathematically focused.
  • The currently supported mathematical operations include +, -, *, /, %, sin, cos and tan.
  • The currently supported boolean operations include =, !=, >, >=, <, and <=.
  • The "print" keyword will print whatever value precedes it to the console.
  • There is no distinction between 'stack' and 'heap' variables.
  • Right now values will attempt to be found all the way up the call chain, and then in "global" space; this is by design to help alleviate confusion over scope.
  • Loops have predefined variable ‘current’ which holds the current value
 

Examples

Values and assignment:

The primary types are Number and String.  Assign values by appending a ':' to a token.  There is no need to declare a variable before assigning it a value, and you can assign any value to any variable.

a: 2   // assign a number to variable 'a'

str: "Hello there!"  // assign a string to variable 'str'

a: "Ciao"  // change 'a' from a number to a string

 

Math:

Supported operations include +, -, /, *.  Trigonometric operations are supported as messages sent to numbers (e.g. '.sin').

7 - 3

3 * 4    // multiplication

45 .sin   // sin in degrees

30 .cos

 

Print to console:

35 print

"Hello!" print

 

Conditionals:

Conditionals take action based upon boolean values or expressions.  Supported boolean operators include <, >, =, !=, and, or, not.

if  
if 2 < 3 {

     5 .print 2 + 3

if else 

if 2 > 3  {
      
     "first" .print

} else {
         "second" .print

 

Arrays:

An array can contain objects of any type, even other arrays.  The first element in an array is at index '1', and you can access an element of an array with the '/' operator.

one-dimensional array: [ 3 10 "a" ]
array of arrays:  [  [ 3 10 ]  [ "a" "b" ]  ]
array assignment: : a: [ 3 10 "a" ]
array navigation:  [ 3 10 "a" ] / 2   // yields 10
assignment from array navigation:  a: [ 3 10 "a" ] b: a/2 ; b print

 

Dictionaries

Right now dictionaries can only be keyed by a token; this removes the need to have to surround a string in quotation marks.  A future version will add support for Numbers as keys.

name: [ first: "Guy"  last: "Ardito" ]

misc: [ color: "yellow"  size: "large"  price: 197.99 ]

 c: misc/color

 

Loops and Ranges

loop over range: 3 ... 5.0 .forEach: { current print }
loop over array: [ 3 10 "a" ] .forEach: { current print }

 

Functions

define and call a function:

m: { a + b print } ; 'm: :[ a: 5 b: 2 ]

 

Objects

class Student :[
     name: "(no_name)"
     age: 9
     gpa: { return age + b }
]

b: 87
a: Student .new ; a/name print ; a .gpa print

 

Graphics

set canvas to yellow: CANVAS .setColor: YELLOW"
canvas draw line: "CANVAS .setColor: GREEN .moveTo: :[ x: 20 y: 50 ] .lineTo: :[ x: -200 y: -200 ]
canvas compound draw:
     CANVAS .setWidth: 15
     CANVAS .setColor: YELLOW
     CANVAS .moveTo: :[ x: -100 y: 100 ]
     CANVAS .lineTo: :[ x: 100 y: -100 ]
     CANVAS .turnRight: 45
     CANVAS .setColor: GREEN
     CANVAS .drawForward: 100
plot two point: CANVAS .addPoint ; CANVAS .setColor: GREEN ; CANVAS .moveTo: :[ x: 100 y: 100 ] ; CANVAS .addPoint

plot sin wave: CANVAS .setBounds: :[ minX: 1 maxX: 360 minY: -1.3 maxY: 1.3 ]
1 ... 360 .forEach: {
CANVAS .moveTo: :[ x: current y: current .sin ]
CANVAS .addPoint
}

Usage Overview

On your iPhone you will have a 'console' window on the top and a 'canvas' window on the bottom.

The console window is where you can enter code and see printed results.

The text in the console is color-coded:

  • Green: What you type.  
  • Purple: Anything your code prints.
  • Orange: Messages about code completion and/or errors.

The canvas window is where the result of graphics operations will be shown; this window will be obscured by the keyboard when you're typing in the console.

The keyboard can be dismissed by tapping anywhere outside of the console window.

Between the console and canvas is a segmented control labeled 'Write' and 'Run'.  Use this control to indicate whether you want the system to run the code you enter as soon as you hit the 'return' key or if you want to be able to keep typing. 

You will also see three buttons labeled 'Clear', 'Lib' and 'Help'.

'Clear' will reset the console window so that you can start fresh.

'Lib' will bring up a menu of code snippets in the library; selecting any snippet will copy it to the console and immediately execute it.

'Help' will bring you to this webpage so that you can review the language syntax and app controls.

Placeholder Image

Example of the App

Notice the code in green, the system output in orange, the graphical results in the canvas window at the bottom, and the location of the 'Clear', 'Lib' and 'Help' buttons.