I wrote some code to create a dynamic paintbrush, that changes colour, in Processing environment. The same code produces very different results when running in Java, Javascript and embedded javascript.
As far as i can tell there is no difference in handling of global variables in the different modes. also i am defining the color mode so even if there is differences, my definition should replace these. Any ideas?
I have a global float variable that i increment to cycle through the colours. (colours in HSB mode) I also draw a black rectanlge on the whole screen with very low alpha value in order to slowly fade out the drawings.
float cH = 0;
float cS = 0;
float cB = 0;
int counter = 0;
// other variables....
setup()
{
size(800,600);
colorMode(HSB, 1.0, 1.0, 1.0);
cH = 0.0;
cS = 0.74;
cB = 0.6;
counter = 0;
background(0);
// .. other setup code
}
// ... other code
mouseDragged()
{
counter ++;
if(counter %5 == 0) {
noStroke();
fill(0,0.01);
rect(0,0, width, height);
}
cH += 1/500;
if(cH >= 1.0)
cH = 0.0;
stroke(color( cH, cS, cB));
fill(color( cH, cS, cB));
//... then the code for drawing the shapes
}
This works beautifully when running it in processing, in javascript mode. See picture 1 below, working with colour change and fade out
When running this same sketch, embedded in my browser using javascript, the colour change works, but rectangles drawn on top turn grey instead of black. With the same colour values!
you can try it out here
#
When running it in java mode, the fade out to black works, but the color change doesnt. the brush stays its initial color, red.
The entire code, processing.pde file can be found here.
On my appengine I load the sketch from a html file as follows: With previous problems I made sure i was using the newest version of processing.js
<html>
<head>
<title>{{name}} Sketch</title>
<script src="/statics/processing.js" type="text/javascript"></script>
<script src="/statics/javascript.js" type="text/javascript"></script>
</head>
<body>
<label>Title</label>
<br>
<div class="proc">
<canvas id="SKETCH" data-processing-sources="/sketches/{{name}}/{{name}}.pde" >
</canvas>
<br>
this is below the canvas
</body>
</html>
