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:

 

To read:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s