IMG_6316.JPG

itp

Week 6 ICM: HTML and CSS

This week’s assignment had the following parameters:

Create your own HTML page with the following:

  • Pre-defined HTML Elements

  • Pre-defined CSS Styles

  • HTML Elements generated by your p5 sketch

  • Some kind of mouse interaction with an HTML Element using a callback function you write.

The first thing I tried to do was use the createCapture() and filter() function. I wanted to capture video of the user and then change it through the mousePressed function, but I couldn’t figure out how to trigger the filter change on mousePressed(). Either it ALWAYS showed the “spooky” (threshold filter) view, or it never showed. Pressing the button didn’t seem to do anything, neither did moving around where the spookyButton.mousePressed() function. You can see the failed code for that project here.

So, for my second try, I decided to let the user make a spooky scene by adding different elements.

For my pre-defined HTML elements:

<h1 style="color:orange;text-align:left;" > HAPPY HALLOWEEN! </h1>

For my pre-defined CSS styles:

.creep {

font-family: serif;

background-color: #aa0b03;

color: #000000;

font-size: 12pt;

padding: 5px;}

HTML Elements generated by your p5 sketch

txt = createDiv('draw a spooky scene');

txt.position(width/3, 100);

txt.class("creep");

Some kind of mouse interaction with an HTML Element using a callback function you write.

pumpButton.mousePressed(pumpShow);

ghostButton.mousePressed(ghostShow);

batsButton.mousePressed(batsShow);

Screen Shot 2018-10-16 at 11.48.30 PM.png

I would have loved to have added an input that allowed users to write messages in a creepy font, but I just ran out of time trying to make the first createCapture idea work. You can see the final sketch here.

ICM, ITPCaroline NeelComment