› ›

DOM interfering with Sketch Container

yovendofrutayovendofruta
edited March 2017 in p5.js Library Questions

My goal is to have these sketches centered in the horizontal direction, and one appear first on the page, then the second. Here is my script file. These two sketches in instance mode are identical save the image loaded into each one.

var PH2 = function ( p ) {
    var mic;
    var img;
    var myCanvas;

    p.centerCanvas = function() {
        var x = (p.windowWidth - p.width) / 2;
        myCanvas.position(x, 0);
        }          

    p.preload = function() {
        img = p.loadImage('Sketches/PH2/1.jpg');
        }

    p.setup = function() {
        myCanvas = p.createCanvas(1000, 600);
        mic = new p5.AudioIn()
        mic.start();
        p.centerCanvas();
        }

    p.windowResized = function() {
        p.centerCanvas();
        }            

    p.draw = function() {
        if (p.mouseIsPressed) {
            micLevel = mic.getLevel();
            p.background('#fdfaee');
            p.textFont("Helvetica");
            p.text("do", 500*micLevel+200, 600*micLevel+300);
            p.fill('#f99991');
            }

        else {
            micLevel = mic.getLevel();
            p.background(255);    
            p.image(img, 200*micLevel*50+200, -50*micLevel*50, p.width/1.9, p.height);
            }
        }
    }
myp5 = new p5(PH2, 'PH2Contain');

var PH3 = function ( p ) {
    var mic;
    var img;
    var myCanvas;

    p.centerCanvas = function() {
        var x = (p.windowWidth - p.width) / 2;
        myCanvas.position(x, 0);
        }          

    p.preload = function() {
        img = p.loadImage('Sketches/PH3/2.jpg');
        }

    p.setup = function() {
        myCanvas = p.createCanvas(1000, 600);
        mic = new p5.AudioIn()
        mic.start();
        p.centerCanvas();
        }

    p.windowResized = function() {
        p.centerCanvas();
        }            

    p.draw = function() {
        if (p.mouseIsPressed) {
            micLevel = mic.getLevel();
            p.background('#fdfaee');
            p.textFont("Helvetica");
            p.text("you", 500*micLevel+700, 600*micLevel+300);
            p.fill('#bcf5ee');
            }

        else {
            micLevel = mic.getLevel();
            p.background(255);    
            p.image(img, 300*micLevel*50+200, -100*micLevel*50, p.width/1.9, p.height);
            }
        }
    }
myp5 = new p5(PH3, 'PH3Contain');

Here is my HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="PaintStyle.css">.
        <script src="Resources/p5.js"></script>
        <script language="javascript" type="text/javascript" src="Resources/p5.dom.js"></script>
        <script language="javascript" type="text/javascript" src="Resources/p5.sound.js"></script>
        <script language="javascript" type="text/javascript" src="Sketches/PH2/PH2.js"></script>
        <title>painthead</title>
    </head>
    <body>

<div id="PH2Contain"></div>
<p>hello hello</p>
<div id="PH3Contain"></div>  

    </body>
</html>

If I do not include the centering operations the sketches appear correct but are aligned left (and I want them centered). Whenever I include the function to center the sketch I only see the second sketch centered with "hello hello" to the left of it. With this method I am assuming in myCanvas.position(x,y) the y value is relative to the beginning of the div, but this must not be the case?

Tagged:

Best Answer

Answers

Sign In or Register to comment.