How to share several sketches in one html page?

ChildhoodAndy

Hi, guys, I want to put some exercises in different sketch.js files in one html page, I just want to share my learning on my blog:). One is just simple,

<script src="p5.min.js"></script> <script src="sketch01.js"></script>

Now, if I just add

<script src="sketch02.js"></script> after the first statement, It won't show the second one. How to do that? By DIV? Or ... Thanks in advance.

GoToLoop

• http://p5js.org/learn/examples/Instance_Mode_Instantiation.php
• https://github.com/lmccart/p5.js/wiki/p5.js-overview#instantiation--namespace

ChildhoodAndy

Wow, thanks!

ChildhoodAndy

var s = function( sketch ) {

    var x =100; 
    var y = 100;

    sketch.setup = function() {
        sketch.createCanvas(700, 410);
    };

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

var myp5 = new p5(s, "myContainer");

@GoToLoop

How to do if I want to put the function s into extern js file? Sorry for my poor js. I am learning it.

GoToLoop

I'm also trying to learn web programming too!
AFAIK, every ".js" needs to be declared inside the ".html" file.
Sorry dunno much about it yet! X_X

ChildhoodAndy

@GoToLoop

in the external sketchTest.jsfile，we can do it like this:

function sketchTest ( sketch ) {

    var x =100; 
    var y = 100;

    sketch.setup = function() {
        sketch.createCanvas(700, 410);
    }

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

Then in the index.html,

<script src="p5.min.js"></script>
<script src="sketchTest.js"></script>
<div id="myContainer"></div>
<script>
   var myp5 = new p5(sketchTest, "myContainer");
</script>

Cheers!

lmccart

for a fast and easy solution, you can also make different pages for each sketch, then put them all together using iframes: https://github.com/lmccart/p5.js/wiki/Embedding-p5.js#using-iframes

ChildhoodAndy

@lmccart It's a nice solution!