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);
}
?>