›

How do I quickly layout three p5.js scripts on a single web page? Using a class and CSS?

PaHern_pAnicPaHern_pAnic
edited October 2014 in p5.js

In a past question I put together three(3) p5.js programs in a single one(1) and had to deal with an issue with frameCount() and was helpfully provided with a solution. The program layout on its page looks something like this:

demo

So I have a very basic index.htm file:

<head>
  <script language="javascript" type="text/javascript" src="p5.js"></script>
  <script language="javascript" type="text/javascript" src="demo.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
</body>

And also a very basic CSS file, where this pattern background(1) is called and the canvas(2,3,4) centered:

html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    min-height: 100%;

}

html {
    background: url('backmaster.jpg') no-repeat top left;
    background-size: 100% 100%;

}

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 1000px;
}

Element 2 is drawn to the canvas generated with createCanvas(), whereas 1 and 3 use createGraphics(). It is now all in the same script, demo.js. Now this works.

But initially my goal was to use the entire page a bit as an artboard with 3 independent .js script files so I would like to quickly reorder the layout while maintaining individual files. So I did read this post. And then I'm reading Beyond the Canvas in the CSS Stylesheet section... about using a class. I see an example where you would use this in setup():

text.class("lemon"); // assign a class to be used by the CSS sheet

And then in the CSS file:

.lemon {
    font-family: monospace;
    background-color: #FF0000;
    color: #FFFFFF;
    font-size: 18pt;
    padding: 10px;
}

So could I use this, have the 3 js files called in the html file, and in each of those I would add a different class name in setup(), then use CSS to layout three canvases/classes on the web page? I'm not sure I understand how to do this practically. What's the quick way to do a "mosaic" of the individual programs I have?

Tagged:

Best Answer

Answers

  • lmccartlmccart
    edited November 2014 Answer ✓

    My recommendation would be to use "instance mode" to create three different p5 instances that you could then have on the same page.

    Then yes, to apply css, you could add a class to each canvas and style however you like. Something like this...

    var p5_0 = new p5(function(sketch) {

  var x = 100, y = 100;

  sketch.setup = function() {
    var cnv = sketch.createCanvas(600, 400);
    cnv.class('lemon');
  };

  sketch.draw = function() {
    sketch.background(255, 0, 0);
  };
});

var p5_1 = new p5(function(sketch) {

  var x = 100, y = 100;

  sketch.setup = function() {
    var cnv = sketch.createCanvas(600, 400);
    cnv.class('grape');
  };

  sketch.draw = function() {
    sketch.background(255, 0, 0);
    sketch.fill(255);
    sketch.rect(x, y, 250, 250);
  };
});

var p5_2 = new p5(function(sketch) {

  var x = 100, y = 100;

  sketch.setup = function() {
    var cnv = sketch.createCanvas(600, 400);
    cnv.class('apple');
  };

  sketch.draw = function() {
    sketch.rect(x, y, 250, 250);
  };
});

    Then in your css file you would define properties for "lemon", "grape", and "apple" like you have demonstrated with the .lemon code in your question above.

  • PaHern_pAnicPaHern_pAnic
    edited November 2014

    Thank you! I'm trying to do just that, but I'm afraid my linked program had become write only as I had merged it into one so I will use the approach you describe starting from scratch with the individual items...

    I'm struggling because as I'm a beginner it's not clear to me in which cases I have to apply the sketch instance to the methods used on different objects. For instance when I load an image, both in the setup() and draw(). I guess I should plug the sketch instance as much as possible loll. Also, the particle system is made of many elements, and it's not clear whether I have to put those functions at the same level as setup and draw inside a single sketch block( i.e. one of the three items you show), and if I have to change their name etc. And then if one is called in sketch.draw(); such as system.addParticle(); does that become sketch.system.addParticle(); ? I have the same question when I try to implement the solution that was provided to me to circumvent the issue I had with frameRate() so there is a function that runs all the time and it validates a frameCount and if a condition is met, another function is called to draw. In that context too I wonder how to manipulate the objects in instance mode. I'll test it further and will ask specific questions if I can't make it happen! Thanks again!

Sign In or Register to comment.