Load images by mouseclick

20
April 22, 2019, at 03:10 AM

I am trying do load a .png file with p5.js for each mouseclick on the canvas. For it I have following HTML file

<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>

Following code is from the sketch.js file for the scene:

'use strict';
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);
           xoff += inc;
           stroke(0);
           push();
           translate(x * scl, y * scl);
           rotate(vec.heading());
           line(0, 0, scl, 0);
           pop();
       }
       yoff += inc;
       zoff += 0.0004;
   }
   fr.html(floor(frameRate()));
}
function mouseIsPressed() {
   b = new PictureFlower(mouseX, mouseY, img)
}

The following function is the PictureFlower.js, where the Picture is used:

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

The problems are, if I load the picture the framerate is flowed down and for each click no picture is apeared.

I hope you can help me.

READ ALSO
expo background push notfication in iOS

expo background push notfication in iOS

At first, I was worried that expo had a custom notification system (had me thinking "coulda had a p8", if you know the commercial like that, haha)In the end, I was impressed with how direct and easy sending messages with expo's push notification service...

28
Post back on checkbox change

Post back on checkbox change

I want to post back whenever checkbox is changed for a Tree view, I searched and found answers but it isn't workingWhen i debug it never gets to the event function

50
Saving nested objects(arrays) with mongoose, result empty objects at mongodb

Saving nested objects(arrays) with mongoose, result empty objects at mongodb

The problem is so basic: I want to save nested objects with mongoose in mongodb, but when I save them, nested objects are empty

60
Convert Array from JSON File into a Javascript Array does not work

Convert Array from JSON File into a Javascript Array does not work

even though I read alot of related articles about this topic on stackoverflow, I cant figure out what im doing wrong here

23