Binary Trees

For an introduction to binary trees, see Data Structures: Introduction to Trees

Computing outside the canvas: p5.js and web pages.

The DOM stands for Document Object Model. The idea is that the entire web page is processed to create nested objects: Every heading, paragraph, table, image, and list, originally in HTML, is accessible as an object via p5.js and JavaScript programming.

To access “the DOM” from p5.js, you need the “all” template, which includes p5.dom.js, an extension of the core p5.js functions that includes new functions to access DOM objects.

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Example 7

Summary

What do the previous examples teach us? Here are some important points and concepts:

• createCanvas returns a value. A p5.js canvas is an object. You can use canvas.position(x, y) to position it anywhere on the page.
• In HTML, the div tag can be used as a place-holder for content created by p5.js. Use <div id=aPlaceForCanvas></div> to mark the document location of your canvas and, in p5.js, myCanvas.parent('aPlaceForCanvas'); to make the div contain the canvas
• You can create a free-floating div with p5.js’s createDiv(content_string) function call. The content string is just HTML, so it can be text, images, tables, whatever. You can position this div with theDiv.position(x, y) or using theDiv.parent("aPlace") where some tag in the HTML has the tag id=aPlace.
• Once you create a div with myDiv = createDiv(content_string);, you can change it using myDiv.elt.innerHTML = "any string of HTML";

3D Graphics

Includes most concepts of 2D drawing, but adds a lot more:

• the Z axis of course
• camera position and angle
• lighting
• surface color, texture, and how it reflects light (specular, diffuse)
• translation and rotation are 3D: you can rotate around any one of 3 axes.

See examples in p5.js documentation.

Another example:
sketch

var boxes;
var zlimit = -4000;

function randomColor() {
    return color(random(255), random(255), random(255));
}

function setup() {
    createCanvas(600, 400, WEBGL);
    boxes = [];
    for (var i = 0; i < 1000; i++) {
        boxes.push({x: random(-100, 100), 
                    y: random(-100, 100), 
                    z: random(zlimit, 300),
                    color: randomColor()});
    }
    frameRate(5); // to reduce cpu load; looks better without this
}

function draw() {
    background(230);
    ambientLight(100, 100, 200);
    pointLight(255, 100, 100, 255, 300, 0, 0);
    pointLight(100, 255, 100, 255, 0, 300, 0);
    orbitControl();
    for (var i = 0; i < boxes.length; i++) {
        var b = boxes[i];
        push();
        translate(-200, 0, b.z);
        rotateZ(b.z * 0.005);
        translate(b.x + 200, b.y, 0);
        b.z -= 4;
        ambientMaterial(b.color);
        rotateX(b.z * 0.02);
        box(15, 20, 25);
        pop();
        if (b.z < zlimit) {
            b.z = 300;
        }
    }
}

---

Machine Learning

I gave an overview of machine learning. Some important concepts are:

• ML most commonly refers to supervised learning where we give a learner many examples of input/output, and the learner tries to learn a function that produces the correct output from new (previously unseen) input.
• Input and output are almost always vectors (arrays) of numbers. So we learn functions from numbers to numbers.
• A classifier learns to identify the class of an object given a set of numerical features. E.g. detecting digits 0 through 9 is a problem to classify features (pixel values) as class 0, class 1, class 2, etc.
• Machine learning programs usually start with a well-defined model of computation, e.g. a “neural network” and adjust parameters or weights to achieve the desired function

I used slides based on “Machine Learning is Fun” — it’s pretty good reading for a high-level overview of ML.

We also saw an application of real-time image classification used to control a drum machine.

---

The following are some “leftovers” — I think we covered Perlin noise earlier in the semester, so we probably won’t talk about these in class this week.

Perlin Noise Example

2D Perlin Noise Example