Generative Art

Syntopia – Generative Art Links

What is Generative Art – a paper on generative art

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.

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