CSS-Tricks & Chris’ Videos from ART249 and ART258 to Review

Check Chris Coyier’s CSS-Tricks.

Review Chris Gargiulo’s Video Instructions from ART249ART258, and WP documentation.

Advertisements

Difference between apur1e.wordpress.com and apurie.com/test17 & Illustrator Tips: Make Texts to Vector

WordPress.com won’t allow all but jetpack pulgins for free users.

So I cannot test “Display Post ShortCode” using categories.
I just reviewed or set: 1. web address, 2. title, 3. tagline, 4. log, and 5. site identity.

The site identity worked on the tab, but no longer working. Maybe it has to be the paying customer.

Two ways to make text -> vector Adobe Illustrator:
  1. select->type-> create outlines, or
  2. select-> object -> expand then checks on object and fill boxes then OK.

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;
}

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.

P5js Methods for Mouse and touch interaction

Mouse and touch interaction

p5.js has a set of methods for handling mouse and touch interaction. The list below shows how they relate conceptually.

From https://github.com/processing/p5.js/wiki/p5.js-overview#createcanvas

mouse touch
mouseX touchX
mouseY touchY
touches[]
mouseIsPressed
mousePressed() touchStarted()
mouseMoved()
mouseDragged() touchMoved()
mouseReleased() touchEnded()
mouseClicked()
mouseScrolled()

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