Processing js - html and php

Processing Coding Questions
#1

Hello, I have to run a sketch on a website but I can’t make it appear. I only can run some examples if they are inside the examples folder but when I want to link them on my webpage (HTML) they don’t work. Below some code, I tried …

<html>

	<head>
	<title>processing sketch</title>
	</head>

	<body>

<script src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">
    
int numChars = 26;
color[] colors = new color[numChars];
int keyIndex;
float keyScale;
int rectWidth;

    
void setup()
{
  size(500, 500);
  noStroke();
  background(0);
  keyScale = 500/numChars-1.0;
  rectWidth = width/9;

}

void draw()
{ 
  if(keyPressed) {
    if(key >= 'A' && key <= 'y') {
      if(key <= 'Y') {
        keyIndex = key-'A';
      } else {
        keyIndex = key-'a';
      }
      fill (random(0,255), random(0,255), random(0,255));
      float beginRect = rectWidth/8 + keyIndex*keyScale-rectWidth/2;
      rect(beginRect, 0.0, rectWidth, height);
    }
  }
}

</script>


</script>

<canvas id="mycanvas"></canvas>	
	
</body>
</html>


<!DOCTYPE>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>tp_final app</title>
		<script src="processing.js"></script>
		

	</head>

	<body>

    <form action="ejemplo1.php" method="post">
	colores random con teclas a-y
		<input type="text" name="size" />
		<input type="submit" />
    </form>


<script src="processing.js"></script>

<?php 

if(isset($_POST['colors']))
				{
					$colors=$_POST['colors'];
				}
else
				{
					$numChars=26;
				}

    
echo '<script type="text/processing" data-processing-target="mycanvas">
int numChars = 26;
color[] colors = new color[numChars];
int keyIndex;
float keyScale;
int rectWidth;

    
void setup()
{
  size(500, 500);
  noStroke();
  background(0);
  keyScale = 500/numChars-1.0;
  rectWidth = width/9;

}

void draw()
{ 
  if(keyPressed) {
    if(key >= 'A' && key <= 'y') {
      if(key <= 'Y') {
        keyIndex = key-'A';
      } else {
        keyIndex = key-'a';
      }
      fill (random(0,255), random(0,255), random(0,255));
      float beginRect = rectWidth/8 + keyIndex*keyScale-rectWidth/2;
      rect(beginRect, 0.0, rectWidth, height);
    }
  }
}

</script>

';

?>	

<canvas id="mycanvas"></canvas>	
	
</body>
</html>
#2

if you want start with the archived / deprecated but latest version:
download from
https://github.com/processing-js/processing-js ,

or move over to p5js

in both cases i just not think you will need client server ( get put ) things on the first steps?

1 Like
#3

I have always thought that p5js was the best option, but I’ll try anyway

Blockquote

Yes, I think the same, but it something that my teacher wants me to do and I haven’t found like many tutorials about the topic and almost everything is p5js :exploding_head: . Also, I don’t see the connection between running a processing sketch mixed with PHP to make it work, but I’ll try p5js and see what happens.

PD: I don’t know if I answer the question, sorry if not. English is not my mother tongue.

#4

.processing.js.
very old link here

1 Like