P5.js not displayed in my web site

Hi everybody, my professor chosen a p5.js from internet to do exercises with p5.js.
This p5.js sketch is not displayed in my website but it is displayed and work very well separate from the website. I want to be more clear as I can… my graphic works alone and the users can change the colors of background and the ball but if I put my graphic on the website it in not displayed.
It is the code:

Summary <?php function display_p5_java($link, $user){ $q = "SELECT colours,bgColl FROM users WHERE `nick` = '".$user."';"; //echo $q; $r = mysqli_query($link, $q); $arr = array(); if ( $r !== false && mysqli_num_rows($r) > 0 ) { while ( $a = mysqli_fetch_assoc($r) ) { $arr['colours'] = stripslashes($a['colours']); $arr['bgColl'] = stripslashes($a['bgColl']); }} //print_r($arr); $entry_java=''; $entry_java .=" "; return $entry_java; } function display_p5_form($link, $user){ $q = "SELECT colours,bgColl FROM users WHERE `nick` = '".$user."';"; $r = mysqli_query($link, $q); $arr = array(); if ( $r !== false && mysqli_num_rows($r) > 0 ) { while ( $a = mysqli_fetch_assoc($r) ) { $arr['colours'] = stripslashes($a['colours']); $arr['bgColl'] = stripslashes($a['bgColl']); }} $entry_form=''.$user; $entry_form .='
colours
Background Color
html, body { background: index.temp; }

'; return $entry_form; } /* Query UPDATE p5 parameters */ function update_p5($p, $nick, $table, $link) { $pp = array(); foreach ($p as $key=>$value){if ( $p[$key] ){ $pp[$key]= mysqli_real_escape_string($link, $p[$key]);}} $sql = "UPDATE `".$table."` SET `colours` = '".$pp['colours']."', `bgColl` = '".$pp['bgColl']."' WHERE `".$table."`.`nick` = '".$nick.";"; //echo $sql; //echo '
'; return mysqli_query($link, $sql); } ?>

Thank you soooo much

1 Like

Please format your code by editing your code, select your code and hit the </> button. Also, before you do that, process your code through this PHP formatter.

Kf

1 Like

Thank you to give me the website php formatter.
Now my website tells this :

Parse error: syntax error, unexpected ‘=’ in C:\MAMP\htdocs\Step 7.2\auxp5.php on line 35

and at the 34 line there is :

 < var bgg =#" . $arr['bgColl'] . 
   y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            
        }; />

and thi is the code:


<?php
error_reporting(E_ALL); // uncomment for debug
ini_set('display_errors', 1);
function display_p5_java($link, $user)
{
    
    
    $q   = "SELECT colours,bgColl FROM users WHERE `nick` = '" . $user . "';";
    //echo $q;
    $r   = mysqli_query($link, $q);
    $arr = array();
    
    if ($r !== false && mysqli_num_rows($r) > 0) {
        while ($a = mysqli_fetch_assoc($r)) {
            
            
            $arr['colours'] = stripslashes($a['colours']);
            $arr['bgColl']  = stripslashes($a['bgColl']);
            
            
        }
    }
    
    //print_r($arr);
    
    $entry_java = '';
    $entry_java .= "
     <script src='jscolor.min.js'></script>
       <script src='p5.min.js'></script>
    <script src=\"sketch.js\"></script>
   <script>
 
   var colours =#" . $arr['colours'] . "';
   var bgg =#" . $arr['bgColl'] .   y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            
        };
    

        demo.spawn = function( x, y ) {
            
            var particle, theta, force;

            if ( particles.length >= MAX_PARTICLES )
                pool.push( particles 'yellow', colNew ];
        var bgg = [ 'myColor' ];
        var particles = [];
        var pool = [];
        
        var demo = Sketch.create({
            container: document.getElementById( 'container2' ),
          
        });

        demo.setup = function() {

            // Set off some initial particles.
            var i, x, y;

            for ( i = 0; i < 20; i++ ) {
                x = ( demo.width * 0.5 ) + random( -100, 100 );
                y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            }
        };
    

        demo.spawn = function( x, y ) {
            
            var particle, theta, force;

            if ( particles.length >= MAX_PARTICLES )
                pool.push( particles 'yellow', colNew ];
        var bgg = [ 'myColor' ];
        var particles = [];
        var pool = [];
        
        var demo = Sketch.create({
            container: document.getElementById( 'container2' ),
          
        });

        demo.setup = function() {

            // Set off some initial particles.
            var i, x, y;

            for ( i = 0; i < 20; i++ ) {
                x = ( demo.width * 0.5 ) + random( -100, 100 );
                y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            }
        };
    

        demo.spawn = function( x, y ) {
            
            var particle, theta, force;

            if ( particles.length >= MAX_PARTICLES )
                pool.push( particles 'yellow', colNew ];
        var bgg = [ 'myColor' ];
        var particles = [];
        var pool = [];
        
        var demo = Sketch.create({
            container: document.getElementById( 'container2' ),
          
        });

        demo.setup = function() {

            // Set off some initial particles.
            var i, x, y;

            for ( i = 0; i < 20; i++ ) {
                x = ( demo.width * 0.5 ) + random( -100, 100 );
                y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            }
        };
    

        demo.spawn = function( x, y ) {
            
            var particle, theta, force;

            if ( particles.length >= MAX_PARTICLES )
                pool.push( particles 'yellow', colNew ];
        var bgg = [ 'myColor' ];
        var particles = [];
        var pool = [];
        
        var demo = Sketch.create({
            container: document.getElementById( 'container2' ),
          
        });

        demo.setup = function() {

            // Set off some initial particles.
            var i, x, y;

            for ( i = 0; i < 20; i++ ) {
                x = ( demo.width * 0.5 ) + random( -100, 100 );
                y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            }
        };
    

        demo.spawn = function( x, y ) {
            
            var particle, theta, force;

            if ( particles.length >= MAX_PARTICLES )
                pool.push( particles.shift() );

            particle = pool.length ? pool.pop() : new Particle();
            particle.init( x, y, random( 5, 40 ) );

            particle.wander = random( 0.5, 2.0 );
            particle.color = random( colours );
            particle.drag = random( 0.9, 0.99 );

            theta = random( TWO_PI );
            force = random( 2, 8 );

            particle.vx = sin( theta ) * force;
            particle.vy = cos( theta ) * force;

            particles.push( particle );
        };

        demo.update = function() {

            var i, particle;

            for ( i = particles.length - 1; i >= 0; i-- ) {

                particle = particles[i];

                if ( particle.alive ) particle.move();
                else pool.push( particles.splice( i, 1 )[0] );
            }
        };

        demo.draw = function() {

            demo.globalCompositeOperation  = 'lighter';

            for ( var i = particles.length - 1; i >= 0; i-- ) {
                particles[i].draw( demo );
            }
        };

        demo.mousemove = function() {

            var particle, theta, force, touch, max, i, j, n;

            for ( i = 0, n = demo.touches.length; i < n; i++ ) {

                touch = demo.touches[i], max = random( 1, 4 );
                for ( j = 0; j < max; j++ ) {
                  demo.spawn( touch.x, touch.y );
                }

            }
        };
        
        </script>
       
 
  <script>
    var myColor = '#'+ (document.forms[\"myForm\"][\"bgColl\"].value);
    document.write('
        <style>
            body{
                background-color: '+myColor+';
            }
  </style>
    '); </script>

        ";
    return $entry_java;
    
}

function display_p5_form($link, $user)
{
    
    
    $q = "SELECT colours,bgColl FROM users WHERE `nick` = '" . $user . "';";
    
    $r   = mysqli_query($link, $q);
    $arr = array();
    
    if ($r !== false && mysqli_num_rows($r) > 0) {
        while ($a = mysqli_fetch_assoc($r)) {
            
            
            $arr['colours'] = stripslashes($a['colours']);
            $arr['bgColl']  = stripslashes($a['bgColl']);
            
            
        }
    }
    
    
    
    $entry_form = '' . $user;
    $entry_form .= '
    <form name="myForm" onsubmit="return validateForm()"  method="post">
        <div id="container">
                                <label for="colours">colours</label><br />
                      <input class="jscolor" name="colours" value="' . $arr['colours'] . '" />  
                      <div class="clear"></div>

                     <label for="bkcolor">Background Color</label><br />
                     <input class="jscolor" name="bgColl" value="' . $arr['bgColl'] . '" />
                      <div class="clear"></div>
<input type="submit" value="submit" name="Submit" class="btns" />
            
             <div id="container2"> </div>
    
        <link rel="stylesheet" href="css/example.css">
        
        <style type="text/css">
            html, body {
                background: index.temp;
            }
            
        </style>


        <header class="info">
            <hgroup class="about">
              
            </hgroup>
          
</div>
    </form>
<hr>  
<script>

form=document.getElementById("myForm");
function askForSave() {
        form.action="index.php?page=4&admin=1";
//alert(form.txtS.value+"index.php?page=4&admin=1")
        form.submit();

}
function askForSubmit() {
        form.onsubmit=validateForm();
}

  
</script>
';
    
    
    return $entry_form;
    
    
}

/* Query UPDATE p5 parameters  */

function update_p5($p, $nick, $table, $link)
{
    
    $pp = array();
    foreach ($p as $key => $value) {
        if ($p[$key]) {
            $pp[$key] = mysqli_real_escape_string($link, $p[$key]);
        }
    }
    
    $sql = "UPDATE `" . $table . "` SET `colours` = '" . $pp['colours'] . "', `bgColl` = '" . $pp['bgColl'] . "' WHERE `" . $table . "`.`nick` = '" . $nick . ";";
    //echo $sql;  
    //echo '<br>';
    
    return mysqli_query($link, $sql);
}


?>
1 Like

And this is my code before use the php Format:

<?php
error_reporting(E_ALL);    		// uncomment for debug
ini_set('display_errors', 1);	
function display_p5_java($link, $user){

		
		$q = "SELECT colours,bgColl FROM users WHERE `nick` = '".$user."';";
//echo $q;
		$r = mysqli_query($link, $q);
	 	$arr = array();

		if ( $r !== false && mysqli_num_rows($r) > 0 ) {  
		while ( $a = mysqli_fetch_assoc($r) ) {
	 		
                        
			$arr['colours'] = stripslashes($a['colours']);
	  		$arr['bgColl'] = stripslashes($a['bgColl']);
			

			}}

//print_r($arr);
 
	$entry_java='';
	$entry_java .="
 	<script src='jscolor.min.js'></script>
   	<script src='p5.min.js'></script>
	<script src=\"sketch.js\"></script>
   <script>
 
   var colours =#".$arr['colours']."';
   var bgg ='#".$arr['bgColl']."';
        
        function Particle( x, y, radius ) {
            this.init( x, y, radius );
        }

        Particle.prototype = {

            init: function( x, y, radius ) {

                this.alive = true;

                this.radius = radius || 10;
                this.wander = 0.15;
                this.theta = random( TWO_PI );
                this.drag = 0.92;
                this.color = '#fff';

                this.x = x || 0.0;
                this.y = y || 0.0;

                this.vx = 0.0;
                this.vy = 0.0;
            },

			
            move: function() {

                this.x += this.vx;
                this.y += this.vy;

                this.vx *= this.drag;
                this.vy *= this.drag;

                this.theta += random( -0.5, 0.5 ) * this.wander;
                this.vx += sin( this.theta ) * 0.1;
                this.vy += cos( this.theta ) * 0.1;

                this.radius *= 0.96;
                this.alive = this.radius > 0.5;
            },

            draw: function( ctx ) {

                ctx.beginPath();
                ctx.arc( this.x, this.y, this.radius, 0, TWO_PI );
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        };
		
				
		function validateForm() {
         xi = Number(document.forms[\"myForm\"][\"txtS\"].value);
         colNew = '#' + (document.forms[\"myForm\"][\"colours\"].value);
	 bgg = '#' + (document.forms[\"myForm\"][\"bgColl\"].value);
	backgroundcolor(bgg);
	var element =  document.getElementsByTagName(\"bgColl\");
	element.style.background = document.getElementsByTagName(\"bgColl\");
	alert(element.style.background );
	 var input = document.getElementById('bgColl');
	 var button = document.querySelector('button');
     button.addEventListener('click', function( event ) {
     function setup() {
  background(220, 180, 200);
 	backgroundcolor(bgg);
    }    
     var color = input.value;
     document.bgColl.style.background = \"yellow\";
	 colours.push(colNew); 
	 });
	 
		
function star(x, y, radius1, radius2, npoints) {
  	var angle = TWO_PI / npoints;
  	var halfAngle = angle/2.0;
 	 beginShape();
  	for (var a = 0; a < TWO_PI; a += angle) {
    		var sx = x + cos(a) * radius2;
    		var sy = y + sin(a) * radius2;
    		vertex(sx, sy);
    		sx = x + cos(a+halfAngle) * radius1;
    		sy = y + sin(a+halfAngle) * radius1;
    		vertex(sx, sy);
  	}  
	}
	    var colNew =  '#' + (document.forms[\"myForm\"][\"colours\"].value);
	    var MAX_PARTICLES = 280;
        var colours = [ '#FFFFFF', 'yellow', colNew ];
        var bgg = [ 'myColor' ];
        var particles = [];
        var pool = [];
		
        var demo = Sketch.create({
            container: document.getElementById( 'container2' ),
           
        });

        demo.setup = function() {

            // Set off some initial particles.
            var i, x, y;

            for ( i = 0; i < 20; i++ ) {
                x = ( demo.width * 0.5 ) + random( -100, 100 );
                y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            }
        };
	

        demo.spawn = function( x, y ) {
            
            var particle, theta, force;

            if ( particles.length >= MAX_PARTICLES )
                pool.push( particles.shift() );

            particle = pool.length ? pool.pop() : new Particle();
            particle.init( x, y, random( 5, 40 ) );

            particle.wander = random( 0.5, 2.0 );
            particle.color = random( colours );
            particle.drag = random( 0.9, 0.99 );

            theta = random( TWO_PI );
            force = random( 2, 8 );

            particle.vx = sin( theta ) * force;
            particle.vy = cos( theta ) * force;

            particles.push( particle );
        };

        demo.update = function() {

            var i, particle;

            for ( i = particles.length - 1; i >= 0; i-- ) {

                particle = particles[i];

                if ( particle.alive ) particle.move();
                else pool.push( particles.splice( i, 1 )[0] );
            }
        };

        demo.draw = function() {

            demo.globalCompositeOperation  = 'lighter';

            for ( var i = particles.length - 1; i >= 0; i-- ) {
                particles[i].draw( demo );
            }
        };

        demo.mousemove = function() {

            var particle, theta, force, touch, max, i, j, n;

            for ( i = 0, n = demo.touches.length; i < n; i++ ) {

                touch = demo.touches[i], max = random( 1, 4 );
                for ( j = 0; j < max; j++ ) {
                  demo.spawn( touch.x, touch.y );
                }

            }
        };
        
        </script>
		
 
  <script>
    var myColor = '#'+ (document.forms[\"myForm\"][\"bgColl\"].value);
    document.write('
        <style>
            body{
                background-color: '+myColor+';
            }
  </style>
    '); </script>

		";
return $entry_java;

}

function display_p5_form($link, $user){

		
		$q = "SELECT colours,bgColl FROM users WHERE `nick` = '".$user."';";

		$r = mysqli_query($link, $q);
	 	$arr = array();

		if ( $r !== false && mysqli_num_rows($r) > 0 ) {  
		while ( $a = mysqli_fetch_assoc($r) ) {
	 		
                        
			$arr['colours'] = stripslashes($a['colours']);
	  		$arr['bgColl'] = stripslashes($a['bgColl']);
			

			}}



	$entry_form=''.$user;
	$entry_form .='
	<form name="myForm" onsubmit="return validateForm()"  method="post">
		<div id="container">
                                <label for="colours">colours</label><br />
      				<input class="jscolor" name="colours" value="'.$arr['colours'].'" />   
      				<div class="clear"></div>

     				<label for="bkcolor">Background Color</label><br />
     				<input class="jscolor" name="bgColl" value="'.$arr['bgColl'].'" />
      				<div class="clear"></div>
<input type="submit" value="submit" name="Submit" class="btns" />
			
			 <div id="container2"> </div>
	
        <link rel="stylesheet" href="css/example.css">
		
        <style type="text/css">
            html, body {
                background: index.temp;
            }
			
        </style>


        <header class="info">
            <hgroup class="about">
               
            </hgroup>
           
</div>
	</form>
<hr>  
<script>

form=document.getElementById("myForm");
function askForSave() {
        form.action="index.php?page=4&admin=1";
//alert(form.txtS.value+"index.php?page=4&admin=1")
        form.submit();

}
function askForSubmit() {
        form.onsubmit=validateForm();
}

  
</script>
';


return $entry_form;


}
   	
/* Query UPDATE p5 parameters  */

function update_p5($p, $nick, $table, $link) {
 
	$pp = array();
        foreach ($p as $key=>$value){if ( $p[$key] ){ $pp[$key]= mysqli_real_escape_string($link, $p[$key]);}}

	$sql = "UPDATE `".$table."` SET `colours` = '".$pp['colours']."', `bgColl` = '".$pp['bgColl']."' WHERE `".$table."`.`nick` = '".$nick.";";
 //echo $sql;  
 //echo '<br>';

     	return mysqli_query($link, $sql);
	}

  
?>
1 Like

[Q1] What is the difference between those two posts above? Also, [Q2] what is this next code below? Is it in your php file as well? What are you using to evaluate that code? Some sort of css interpreter?

Kf

< var bgg =#" . $arr['bgColl'] . 
   y = ( demo.height * 0.5 ) + random( -100, 100 );
                demo.spawn( x, y );
            
  }; />
1 Like