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()
Advertisements

Diffrences between Processing.js and P5.js

From processing/p5.js

repository at https://github.com/processing/p5.js/wiki/Frequently-Asked-Questions
Use of .parent() function call where you want sketch() to run in index.html.

Bruno skrovic explains as below:

Processing.js creates processing.pde file to be run on index.html, which includes the following:

<head>
  http://../processing.min.js
</head>

<body>
    <canvas data-processing-sources="sketch.pde"></canvas>
</body>

p5.js creates sketch.js file to be run on index.html, which includes the following:

http://../p5.js
  <!-- uncomment lines below to include extra p5 libraries -->
    <!--http://../addons/p5.dom.js-->
  <!--http://../addons/p5.sound.js-->
  http://sketch.js

Read further of his analysis at https://www.sitepoint.com/processing-js-vs-p5-js-whats-difference/

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

System Organization of Web Development

Backup of Web sites and Development documents and code.

Server Organization – Static and WP websites.

  1. Domain name management
  2. Their remote backup location (local PC, Mac, or cloud such as Google disk)

Development system organization and its backup (Mac or PC)

  1. Github as a backup of the latest documents and the repositories of source codes for the Websites. (cloud, Mac, some on DVD/cd)
  2. External storage backup of the computer.
  3. Selected backup onto DVD or CD.

The 299kh move to apur1e

The 299kh website has been corrupted and all posts displayed at its footer “footer three menu widget section.

No specific fix were found. This morning, I just created new website apur1e and the old posts have been exported as a xml file to my local computer Desktop.  From there imported to my new site apur1e.

Continue reading “The 299kh move to apur1e”

Old Notes From September 12, 2017

 

Plan to watch 8.1 to 8.5