week 7 assignment

This week’s assignment was to create a webpage that extends beyond the canvas, using p5.dom.js. You are welcome to incorporate other javascript libraries as well if you’re feeling ambitious.

I played around with adding a video capture through the webcam, and layered it under a picture to frame it. I added some buttons to get the hang of using them with CSS as well.

These are some screen shotsI took as I was playing with the code..

try it for you self, the sketch is here

and this is the code:

var canvas;
var img;
var w;
var h;
var buttonClear;
var buttonDraw;

var bubbles = [];
var myP;

function setup() {
w = 640;
h = 480;

myP = createP(‘Maybe this is something || Maybe this is nothing’);
myP.position(240, 550);
myP.style(“color”, “#99FFFF”);
myP.style(“font-size”, “18pt”);
myP.style(“font-family”, “Play”);

capture = createCapture(VIDEO);
capture.size(w – 10, h);
capture.position(200, 100);

canvas = createCanvas(w, h);
canvas.position(200, 100);

img = createImg(“assets/FRAME2.svg”);
img.position(99, 100);
img.size(w + 200, h);

buttonClear = createButton(‘CLEAR’);
buttonClear.style(‘width’, ‘100’);
buttonClear.style(‘color’, ‘#FF00FF’);
buttonClear.style(‘background-color’, ‘yellow’);
buttonClear.style(‘border’, ‘none’);
buttonClear.style(‘height’, ‘100’);
buttonClear.position(150, 150);
buttonClear.mousePressed(clearCanvas);

buttonDraw = createButton(‘DRAW’);
buttonDraw.style(‘width’, ‘100’);
buttonDraw.style(‘color’, ‘#00FFFF’);
buttonDraw.style(‘background-color’, ‘#FF00FF’);
buttonDraw.style(‘border’, ‘none’);
buttonDraw.style(‘height’, ‘100’);
buttonDraw.position(150, 200);
buttonDraw.mousePressed(drawOnCanvas);

for (var i = 0; i < 3; i++) {
bubbles[i] = new Bubble();
}
}

function drawOnCanvas() {
bubbles.push(new Bubble(random(200, 440), random (120,320)));
}

function draw() {
for (var i = 0; i < bubbles.length; i++) {
bubbles[i].move();
bubbles[i].display();
}
if (bubbles.length >= 10) {
bubbles.splice(0, 1);
}

}

function clearCanvas() {
clear();
bubbles = [];
}

function Bubble(x, y) {
this.x = x;
this.y = y;

this.display = function() {
strokeWeight(5);
stroke(random(0, 255), random(0, 255), random(0, 255), 50);
noFill();
line(this.x, this.y, this.x – random(10, 30), this.y – random(10, 30));
line(this.x + random(10, 30), this.y + random(10, 30), this.x, this.y);
ellipse(this.x, this.y, random(10, 30), random(10, 30));

}

this.move = function() {
this.x = this.x + random(-1, 1);
this.y = this.y + random(-1, 1);
}
}