ICM HW#6: PDOM, CSS & HTML

Full Screen (in browser)

P5.js Editor view

Week 6 Assignment

Create a sketch that it uses HTML controls (like buttons, sliders, text input fields) as a means of modifying the sketch’s behavior in real time. (You can adapt a previous homework assignment for this if you’d like.) BONUS: Incorporate an HTML control from p5.dom that we didn’t talk about in class. Alternatively or in addition, use p5.dom to modify other elements on the page (these elements could be added by hand in index.html or dynamically added by your code.)

I ended up making a sketch with 2 button elements. Inspired by Allison Parrish’s Notes on Browser Controls:

 

New Fish Friend! = creates more fish on the page at random x,y positions

School’s Out = clears the page

School of fish Sketch Code

let button1;
let button2;

function setup() {
createCanvas(500, 400);
button1 = createButton(“~New Fish Friend “);
button1.mousePressed(makeASchool);
button2 = createButton(“School’s Out~”);
button2.mousePressed(clearEverything);

background(50, 100, 100);
noStroke();
}

function draw() {
console.log(mouseX, mouseY);

}

function clearEverything() {
background(50, 100, 100);
}

function makeASchool() {
push();
stroke(200);
translate(random(width), random(height));
makeAFishy();
pop();

function makeAFishy() {
fill(200, 100, 100);
ellipse(100, 100, 100, 50);
point(80, 100);
triangle(180, 100, 158, 50, 130, 105);

}
}

 

 

APIs – thinking about Data in Week 7:

• Looking at the NYT APIs 
• Data Sources to look at 

 

To read:

• p5.js tutorial on loading external data
• Art and the API, Jer Thorp