SFPC Oct 21

all-the-code.js

// things in javascript
//    numbers, strings, booleans, objects, functions

// array associates numbers to values
var list = ["Ramsey", 12, {inArray:true, lol:"I know"}]

// object associates names to values
var me = {name: "Ramsey", teaching: true}
me.name                      // "Ramsey"
me.teaching                  // true
me.doesnotexist              // undefined
me.name = "Ramsey Nasser"    // "Ramsey Nasser"
me["name"] = "Ramsey Nasser" // "Ramsey Nasser"
me.name                      // "Ramsey Nasser"

var nestedObject = {
  nested: false,
  hello: "world",
  child: {
    nested: true,
    list: ["Ramsey", 12, {inArray:true, lol:"I know"}]
  }
}
nestedObject.child.list[2].lol // "I know"
nestedObject["hello"] // "world"
nestedObject.hello    // "world"

// constructor
function iDontUnderstandTheSemanticsOfThisLanguage(x, y) {
  this.x = x;
  this.y = "who even cares";
}



var f = function(person) { console.log("Hello, " + person.name + "! You are a " + person.adjective) }

var greet = function(name) { console.log("Hello, " + name) }

var randomName = function() { 
  var firstNames = ["Sam", "Phil", "Kenji", "Ahmad"];
  var lastNames = ["Smith", "~", "Nasser"];
  var randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
  var randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
  
  return randomFirstName + " " + randomLastName;
}

greet(randomName());

var doSomethingWithRandomName = function(callback) {
  var name = randomName();
  callback(name);
}

doSomethingWithRandomName(greet)

var doSomethingWithRandomName = function(greet) {
  var name = randomName();
  greet(name);
}

var greeter = function(greeting) {
  return function(name) {
    console.log(greeting + ", " + name);
  }
}









var greetTimes = function(name, times) {
  for (var i = 0; i < times; i++) {
    console.log("#" + i + " Hello " + name);
  };
}

var someFn = greetTimes;
var someArray = ["Ramsey", 200];
someFn.apply(null, someArray);

circle.glsl

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec4 pink = vec4(1.0, 0.0, 1.0, 1.0);
    vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
    
    vec2 circleCenter = vec2(200, 100);
    float circleRadius = 75.0;
    
    if(distance(fragCoord.xy, circleCenter) < circleRadius) {
		fragColor = pink;
    } else {
        fragColor = white;
    }
}

lisp-calculator.html

<meta charset="utf-8">

<script src="js/jquery.js"></script>
<script src="js/jqconsole.js"></script>
<script src="js/sugar.js"></script>
<script src="js/peg.js"></script>
<script src="js/plt.js"></script>

<script type="text/javascript">
  // uncomment next line to enable refresh
  // PLT.refresh = true

  // write helper functions and semantics here
  var sumArray = function(array) {
    var x = 0;
    for(var i=0; i<array.length; i++) {
      x += array[i];
    }
    return x;
  }
</script>

<title>Lisp Calculator</title>

<!--

PEG syntax quick reference

'x'   : match the literal character 'x'
x+    : match x 1 or more times
x*    : match x 0 or more times
x?    : match x 0 or 1 times
!x    : match anything but the match x
x/y   : match x or y, trying in that order
[xyz] : match one of the literal character 'x', 'y', or 'z'
v:x   : assign the result of the match x to the variable v

Full documentation: http://pegjs.majda.cz/documentation#grammar-syntax-and-semantics-parsing-expression-types

-->
<grammar>
  start           = space e:(math / number) space { return e }
  
  // math            = addition / subtraction / multiplication
  // addition        = '(' '+' a:start* ')'{ return sumArray(a); }
  // subtraction     = '(' '-' a:start* ')' { return subtractArray(a); }
  // multiplication  = '(' '*' a:start* ')' { return multiplyArray(a); }
  
  // hackish but nice
  // math = '(' op:[*+-/] space a:start space b:start space ')' { return eval(a + op + b) }
  
  // very nice
  math = '(' op:[*+-/] a:start* ')' { return eval(a.join(op)); }
  
  number = d:digit+ { return parseInt( d.join('') ) }
  digit  = [0123456789]

  space  = ' '*
</grammar>

<h3>Addition</h3>
<code expect="15">(+ 5 10)</code>
<code expect="20">(+7 13)</code>
<code>(+ 7 13)</code>
<code>(+ 7 13 )</code>
<code>(+ 7 15 )</code>

<h4>Homework — Subtraction<h4>

<code expect="55">(- 70 15)</code>
<code expect="55">(- 70 15 )</code>
<code expect="55">(-   70   15 )</code>

<h4>Homework — Multiplication<h4>
  
<code expect="105">(* 7 15)</code>
<code expect="105">(* 7 15 )</code>
<code expect="105">(*   7   15 )</code>

<h4>Homework — Nested Expressions<h4>
  
<code expect="42">(* 7 (- 10 4))</code>
<code expect="42">(* 7 (- 10 (+ 2 2)))</code>
<code expect="42">(* 7 (- (* 5 2) (+ 2 2)))</code>

<h4>Homework — Unary Expressions<h4>
<code expect="7">(+ 7)</code>

<h4>Homework — <a href="https://en.wikipedia.org/wiki/Variadic_function">Variatic</a> Expressions<h4>
<code expect="-26">(- 7 15 5 6 7)</code>  
<code expect="-66">(- 7 15 5 6 7 7 15 5 6 7)</code>  
<code expect="-306">(- 7 15 5 6 7 7 15 5 6 7 7 15 5 6 7 7 15 5 6 7 7 15 5 6 7 7 15 5 6 7 7 15 5 6 7 7 15 5 6 7)</code>  

<h4>Homework — Nested Variatic Expressions<h4>
<code expect="6749">(+ 7 (+ 4 5 1) 5 (* 8 15 (- 40 12) 2) 7)</code>