WoofJS — making JavaScript learnable

Requirements

  1. Motivating. As video games, animations or stories, Scratch projects are worth sharing. Students never ask, “why are we learning variables?” because they are self-motivated to learn variables to make the score counter work in their racing game.
  2. Shareable. Every Scratch project is immediately shareable via a URL. There’s drastically less motivation to make something that you can’t easily show your friends or family.

Web Programming

ProcessingJS

WoofJS

  1. Motivation. Like Scratch, Woof’s lends itself incredibly well to games and animations, which are highly motivating.
  2. Shareable. Built for the web, Woof works seamlessly in all browsers, mobile and desktop, full-screen and fixed-screen. You can even bookmark your game on your home-screen like an app.

WoofJS & ProcessingJS

Is meaning transparent? Is meaning explained in context, by showing and telling?

// WoofJS// set optional parameters explicitly by name
var r1 = new Rectangle({x: 100, y: 200, width: 30, height: 40});
// set properties by name
r1.color = "blue";

Is time visible and tangible?

// ProcessingJSvar x = 0;
var y = 0;
draw = function() {
background(255, 255, 255);
ellipse(x, y, 30, 30);
x++;
y++;
};
// WoofJSvar circle = new Circle();forever(function() {
circle.x++;
circle.y++;
});

Does the environment show the data? Is hidden state eliminated?

// ProcessingJSfill(252, 60, 115);         // set the color pink
rect(100, 160, 20, 80); // create a pink rectangle
fill(84, 98, 255); // set the color blue
ellipse(280, 200, 80, 80); // create a blue circle
// WoofJSnew Rectangle({color: "pink"});
new Circle({color: "blue"});
var counter = 0;
forever(function() { counter++; });
new Text({text: function() { return counter; } })

Is something on screen as soon as possible?

// ProcessingJSellipse();                   // nothing on the screen
ellipse(200); // nothing on the screen
ellipse(200, 200); // nothing on the screen
ellipse(200, 200, 30); // nothing on the screen
ellipse(200, 200, 30, 30); // circle appears on the screen
// WoofJSnew Circle();                      // circle appears on the screen
new Circle({radius: 30}); // circle appears with radius 30
new Circle({radius: 30, x: 200}); // circle appears at x 200

Can the programmer start concrete, then generalize?

  1. Start constant, then vary
// WoofJSnew Circle({x: randomX(), color: randomColor()}) // start with onevar circles = []                                 // then make many
every(1, "second", function() {
circles.push(new Circle({x: randomX(), color: randomColor()}));
});

Is the computer’s world connected to the programmer’s world?

// ProcessingJSvar x = 0, y = 50, dy = 0;
draw = function() {
x+=4
y+= dy;
if (y > 185) {
dy = -dy
ellipse(x, 190, 36, 25)
}
else {
dy = dy * 0.98 + 3;
ellipse(x, y, 30, 30)
}
};
// WoofJSvar dog = new Image({url: "http://i.imgur.com/SMJjVCL.png"});dog.penDown = true;dog.turnLeft(90)dog.move(10)

Can the programmer break down her thoughts into mind-sized pieces?

// ProccesingJSdraw = function() { doStuff1(); };         // ignoreddraw = function() { doStuff2(); };         // overwrites doStuff1()onMouseDown = function() { doStuff3(); };  // ignoredonMouseDown = function() { doStuff4(); };  // overwrites doStuff3()
// WoofJS forever(function() { doStuff1() })           // stuff1 happens!forever(function() { doStuff2() })           // stuff2 happens!car.onMouseDown(function() { doStuff3() })   // stuff3 happens!car.onMouseDown(function() { doStuff4() })   // stuff4 happens!

Can the programmer put diverse pieces together?

// WoofJS// take a friend’s stem code
new Rectangle({y: minY, height: height, color: "green"});
new Circle({y: minY / 2 - 20, x: -20, radius: 20, color: "green"});
new Circle({y: minY / 2 +40, x: 20, radius: 20, color: "green"});
// and add your petal code, no problem
for (var i = 0; i < 10; i++){
new Rectangle({width: 100, height: 100, color: "red", angle: 36 * i});
}

Early Reception

var circle = new Circle();
forever(() => {
circle.radius = circle.distanceTo(mouseX, mouseY);
});

v1.0.0 and beyond

Acknowledgements

--

--

--

Enabling computational thinking by building tools for thought at futureofcoding.org. Co-creator of thecodingspace.com and woofjs.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Steve Krouse

Steve Krouse

Enabling computational thinking by building tools for thought at futureofcoding.org. Co-creator of thecodingspace.com and woofjs.com

More from Medium

Loops in JavaScript

Loops in JS

JavaScript Variables In-Depth

JAVASCRIPT IMPORTANT!*

Javascript roadmap: Variables