Laden von Bildern mit p5.js

Tron36

Ensign
Registriert
Jan. 2011
Beiträge
209
Hallo Leute,

Ich habe folgende Codeteile:

index.html

Code:
    <html>
        <head>
          <meta charset="UTF-8">
          <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
          <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
          <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
          <script language="javascript" type="text/javascript" src="sketch.js"></script>
          <script language="javascript" type="text/javascript" src="PictureFlower.js"></script>
        </head>

        <body>
        </body>
    </html>

PictureFlower.js
Code:
    function PictureFlower(x, y, img){
       this.x = x;
       this.y = y;
       this.img = img;

        this.display = function(){
            image(this.img, this.x, this.y);
        }
    }

sketch.js
Code:
    'use strict';
    // Daniel Shiffman
    // http://codingtra.in
    // http://patreon.com/codingtrain
    // Code for: https://youtu.be/BjoM9oKOAKY

    var inc = 0.1;
    //scale
    var scl = 10;
    var cols, rows;

    var zoff = 0;

    var fr;
    var flowers = [];

    var actRandomSeed = 0;
    var img;

    function preload() {
       img = loadImage('data/rose.png');
    }

    function setup() {
       createCanvas(800, 800);

       //flowfield = new Array(cols * rows);
       cols = floor(width / scl);
       rows = floor(height / scl);
       //background(51);
       fr = createP('');
       stroke(0, 128);
    }

    function draw() {
       background(255);
       //Flow field
       var yoff = 0;
       for (var y = 0; y < rows; y++) {
           var xoff = 0;
           for (var x = 0; x < cols; x++) {
               var index = x + y * cols;
               var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
               var vec = p5.Vector.fromAngle(angle);

               //draw basic circle here
               //flowers[index] = new Flower(x, y, scl, v.heading());


               xoff += inc;
               stroke(0);
               push();
               translate(x * scl, y * scl);
               rotate(vec.heading());
               line(0, 0, scl, 0);

               pop();
           }
           yoff += inc;
           zoff += 0.0004;
       }

       //Update view for changing flowers:
       //for (var i = 0; i < flowers.length; i++) {
       //flowers[i].update();
       // flowers[i].show();
       //}
       fr.html(floor(frameRate()));

    }

    function mouseIsPressed() {
       b = new PictureFlower(mouseX, mouseY, img)
    }

Es soll ein Bild geladen und überPictureFlower.js in sketch.js benutz werden. Die Bilder erscheinen jedoch nicht im Browser.

Ich würde mich freuen, wenn ihr mir helfen könntet.

Lg Tron36
 
Zurück
Oben