Art258: Leahy & Randle Techniques

Randle Technique

HTML:
“<p class=”mytest”>Randle test.</p>”

CSS:
p.mytest {
background: url(“http://via.placeholder.com/1200×200?text=This+is+an+image&#8221;) no-repeat;
width: 300px;
height: 100px;
text-indent: -999999px;
}

Leahy Technique

HTML:
“<p class=”mytest”>Leahy test.</p>”

CSS:
a.mytest {
background: url(“http://via.placeholder.com/1200×200?text=This+is+an+image&#8221;) no-repeat;
background-size: 100%;
display: block;
width: 300px;
height: 0px;
//height: 50px;
padding-top: 50px;
//border: 5px solid red;
overflow: hidden;
}

Advertisements

ART299 11-09-17: Test to Show My code & result of “Wind” in Layered Presentation – WP/CodePen/P5js

Testing of using p5js editor within CodePen.io environment:

1. My Banboo Wind Output Only

2. My codepen.io testing – View Wind in p5 editor in CodePen – You can modify the code in p5js editor.

Also, check the following:

Css Tricks – Fluid width video

Search Codepen.io Documentation

Chris’ Website CreativeMediaResources – The way to use classification to the display from WordPress CMS – Blogs, Newsletters, Podcasts, Books. Lessons and Stockphotography lists on Home page was used tagging.

Way to Directly go to Casey Reas Website.

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 */
};
});