Binary Trees

For an introduction to binary trees, see https://youtu.be/qH6yxkw0u78

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;
        }
    }
}

---

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