Solution for Multiple Canvas in a Web Page.

/*Solution to multiple canvas in a web page found at
https://forum.processing.org/two/discussion/7843/how-do-i-quickly-layout-three-p5-js-scripts-on-a-single-web-page-using-a-class-and-css
*/

var p5_0 = new p5(function(sketch) {

var x = 100, y = 100;

sketch.setup = function() {
var cnv = sketch.createCanvas(600, 400);  /* Yellow canvas */
cnv.class(‘lemon’);
};

sketch.draw = function() {
sketch.background(255, 255, 0);
};
});

var p5_1 = new p5(function(sketch) {

var x = 100, y = 100;

sketch.setup = function() {
var cnv = sketch.createCanvas(600, 400);  /* Pink canvas */
cnv.class(‘grape’);
};

sketch.draw = function() {
sketch.background(255, 0, 255);
sketch.fill(255);
sketch.rect(x, y, 250, 250);  /* White rectangular */
};
});

var p5_2 = new p5(function(sketch) {

var x = 100, y = 100;

sketch.setup = function() {
var cnv = sketch.createCanvas(600, 400);  /* Red canvas */
sketch.background(255, 0, 0);
cnv.class(‘apple’);
};

sketch.draw = function() {
sketch.background(210);
sketch.rect(x, y, 250, 250);  /* Black rectangular */
};
});

Advertisements

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