Wind

https://alpha.editor.p5js.org/embed/SJBfXtfkz

Advertisements

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

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.