Difference between revisions of "User:Minooz/OSD600/processing"

From CDOT Wiki
Jump to: navigation, search
(PROCESSING)
(Release 0.3)
 
(83 intermediate revisions by the same user not shown)
Line 1: Line 1:
='''PROCESSING'''=
+
='''OSD600 - PROCESSING'''=
==My works on Processing.js==
+
:[http://processingjs.org/ processing.js]
=== Release 0.1===
+
:Source Control: git
[http://processingjs.org/ processing.js]
+
:BugTracker: [https://processing-js.lighthouseapp.com/projects/41284-processingjs Lighthouse]
Source Control: git
 
BugTracker: [https://processing-js.lighthouseapp.com/projects/41284-processingjs Lighthouse]
 
Blog: @ [http://Minooz.wordpress.com wordpress]
 
  
* Bugs
+
------------------------
: Add url to the name of tagged person in <TT>tagthisperson</TT> plugin. Ticket @[https://webmademovies.lighthouseapp.com/projects/63272/tickets/91-urls-for-person-tags lighthouse]
+
== Release 0.1==
:: Currently, tagthisperson plugin, adds the name of the person who is tagged in the video along with his/her image. This ticket is for adding url feature to this plugin. So, if the person has url, show the name as a link.
+
* '''Bugs'''
:: So, I tried to append the <TT><a href></a></TT> syntax to the value of the <TT>options._p[ 'options.person' ]</TT>. But the problem was that it was appending the linked name to the existing value and I couldn't just replace the name of the person with the linked name. I checked with David Humphrey and he suggested to create an object instead of an array for the <TT>people</TT> variable.
+
: Add ''parseBoolean'' function. Ticket @[https://processing-js.lighthouseapp.com/projects/41284/tickets/448-code-parseboolean lighthouse]
:: I created the object with properties: <TT>person, image, href</TT>. Now I have to work on how to keep an array of these objects, to be retrieved at start time and end time.
+
:: A missing feature from Processing (Java). Convert a char, a integer, a string, an array into a boolean.
+
*'''Blogs'''
* Documentation
+
: [http://minooz.wordpress.com/2011/01/31/still-working-on-make-on-msysgit/ 1] - [http://minooz.wordpress.com/2011/02/08/parseboolean-bug-from-processing-js/ 2] - [http://minooz.wordpress.com/2011/02/08/parseboolean-second-update-for-tonight/ 3]
: Add [[User:Minooz/OSD600/popcorn/doc | documentation]] for <TT>tagthisperson</TT> plugin for [http://dev.popcornjs.org popcornjs.org] based on[http://etherpad.mozilla.com:9000/PY40aQY7dV these info]
+
* '''Related Tickets'''
 +
: [https://processing-js.lighthouseapp.com/projects/41284/tickets/1058-rename-int-boolean-etc-to-parseint-parseboolean-etc 1058]- [https://processing-js.lighthouseapp.com/projects/41284/tickets/450-parsechar 450]
 +
* '''How To make'''
 +
: Introduction to how to run tests and make @ [https://processing-js.lighthouseapp.com/projects/41284/writing-automated-tests lighthouse]
 +
: Brief info in my [http://minooz.wordpress.com/2011/02/01/make-worked/ blog]
 +
: Run the terminal as you want to bill firefox: mozilla-build -> start-msvcxxx.bat
 +
: Create a .profile file in the user account -> user/name
 +
: Export the path to js -> export JSSHELL=/PATH/TO/mozilla-central/objdir-ff-release/dist/bin/js
 +
-------------------
  
* Helpful tips
+
== Release 0.3==
: Problem with XHRHttpRequest on Chrome while running a local file on the browser[http://stackoverflow.com/questions/4819060/use-xmlhttprequest-to-load-url-from-local-file Disable Web Security]
+
* '''Bugs'''
 +
: Fix transparency in <TT>copy()</TT> function. Ticket @[https://processing-js.lighthouseapp.com/projects/41284/tickets/1055-copy-doesnt-handle-transparency-properly lighthouse]- When using copy() on an image with transparency, the transparency overwrites the background color. See the screenshots to compare against p5. The image is a red splatter with transparent background and the background is green.
 +
*'''Blogs'''
 +
: [http://minooz.wordpress.com/2011/03/22/working-on-copying-image-in-processing-js/ 1] - [http://minooz.wordpress.com/2011/03/31/continuing-with-copy-of-image-on-processing-js/ 2] - [http://minooz.wordpress.com/2011/04/06/once-upon-a-time-punch-cards/ 3]
 +
* '''Related Tickets'''
 +
: Ticket I filed for p5 while working on this ticket. [http://code.google.com/p/processing/issues/detail?id=594#makechanges #594] -[http://code.google.com/p/processing/issues/detail?id=601 #601]
 +
: Other pjs tickets related to this one: [https://processing-js.lighthouseapp.com/projects/41284/tickets/1174-mandelbrot-and-histogram-ref-tests-are-failing #1174]- [https://processing-js.lighthouseapp.com/projects/41284/tickets/860-color-0-burns-through-non-transparent-background #860]-[https://processing-js.lighthouseapp.com/projects/41284/tickets/948-negative-opacity-values-give-incorrect-results #948]
  
==Start up!==
+
* '''Issues'''
: [https://processing-js.lighthouseapp.com/projects/41284/project-workflow setup]
+
: On the way to fix this bug, I tried to compare it with how p5 handles this.
: [http://processingjs.org/blog/?p=152 Git/GitHub] and [http://processingjs.org/blog/?p=155 Add code to repo]
+
: To work with p5 code, I cloned it from [http://code.google.com/p/processing/source/browse/trunk/ here] with the latest instructions at the bottom of [http://code.google.com/p/processing/wiki/BuildInstructions this page].
: [http://www.kernel.org/pub/software/scm/git/docs/gittutorial.html git_tutorial]
+
: Then I started to debug it on eclipse, with these [http://processing.org/learning/eclipse/ instructions].
: [http://dev.processing.org/source/index.cgi/trunk/processing/core/src/processing/core/ Java Code]
+
: The result that I'm getting for the pixels from both p5 and pjs are the same. [[User:Minooz/OSD600/processing/pixels | Here]] is a sample of these results.
: [http://groups.google.com/group/processingjs?pli=1 google help beginners]
+
: I thought it might be something with some charactersitics of pixels in p5 e.g. ''fillAlpha'', ''calcAlpha'',... for which I couldn't find any correspondent in pjs so far.
: [http://dev.processing.org/build/ how to build the processing in cygwin]
+
: Those characteristics where changed in ''pGraphics.java'':
: [http://cheat.errtheblog.com/s/git Git Cheat Sheet]
+
:: several instances of: line 5302: <pre> calcAlpha = (calcAi != 255); // changed to check for equality to 255</pre>
: [http://code.google.com/p/msysgit/ msysgit]
+
: Since the pixels were the same, seems like p5 has some difference in setting that shows the first underneath layer which is the background pixels in case of transparency of image. But browsers react differently. They display the pixels of window.  
: [http://learn.github.com/p/normal.html learn GitHub]
+
: The other strange issue was that chrome displays actually the color of the window as is defined in ''bgcolor'' whereas firefox just fills the transparent pixels with black color.
: [https://github.com/blog/180-local-github-config github .gitconfig]
+
[[Image: pjs_background.png|70px ]] - Chrome with green background for window <br/>
: [http://expansive-derivation.ossreleasefeed.com/2010/07/getting-started-with-processing-js/ sample]
+
[[Image: pjs_background_ff.png|70px ]] - firefox with green background for window
: [http://processingjs.org/reference/articles/jsQuickStart Processing QuickStart]
+
*''' Final Solution'''
: [https://processing-js.lighthouseapp.com/projects/41284/how-to-contribute how to contribute]
+
: So, we got nowhere in comparing these 2 together, so we decided to go around it and solve it with modifying REPLACE mode in blit_resize():
: [http://getfirebug.com/javascript firebug] - [http://thecodecentral.com/2007/08/01/debug-javascript-with-firebug#sampleFiles Tutorial]
+
<source lang="java">
: [http://help.github.com/forking/ Fork on GitHub]
+
if (img.format !== PConstants.RGB && destPixels[(destOffset + x) * 4] !== 255) {
 +
  destColor = p.color.toArray(p.modes.blend(destColor, p.filter_bilinear()));
 +
} else {
 +
  destColor = p.color.toArray(p.filter_bilinear());
 +
}
 +
</source>
 +
: The way it works, if the image format is RGB, that means, there is no transparency for any of pixels anyways, so it would continue as normal. If the format is ARGB, it'll check if there is any alpha that is 255, if yes, again the normal flow, if not, it will call the BLEND mode function, to blend the pixels with background.
 +
[[Image: pjs-ff.png|70px ]]
  
==Bugs==
+
* '''Helpful tips'''
: link to the [[Processing_Discussions | Discussions and Questions]]
+
: From [http://processingjs.org/reference/loadImage_ processingjs.org] DOM security will not allow you to load images file:/// URIs. This security can be overridden in Firefox in about:config, by changing security.fileuri.strict_origin_policy to false. Otherwise use
: [https://processing-js.lighthouseapp.com/projects/41284/tickets/448-code-parseboolean ParseBoolean]
+
:<code>/* @pjs preload="img.jpg"; */</code>
:: [http://code.google.com/p/processing/w/list Introduction to Processing java]
+
:[http://en.wikipedia.org/wiki/Alpha_compositing alpha channel]
:: [http://code.google.com/p/processing/source/browse/trunk/processing/core/src/processing/#processing%2Fcore  Java repo]
+
: p5 [http://code.google.com/p/processing/source/browse/trunk/ trunk]
:: [http://processing.org/learning/gettingstarted/ Getting Started]
+
: p5 [http://code.google.com/p/processing/source/browse/trunk/processing/core/src/processing/core/PImage.java java] PImage.java
:: [http://www.google.com/codesearch/p?hl=en#Ej56LtI_pY0/trunk/processing/core/methods/demo/PApplet.java&q=test%20parseBoolean%28%29%20package:http://processing\.googlecode\.com&sa=N&cd=1&ct=rc&l=5946 googleCode.PApplet.java]
+
: how to build the processing (java) [http://code.google.com/p/processing/wiki/BuildInstructions]
 +
: processing on [http://www.processing.org/learning/eclipse/ Eclipse]
 +
: processing [http://wiki.processing.org/w/Eclipse_Plug_In eclipse_plugin]
 +
: reported a p5 bug [http://code.google.com/p/processing/issues/detail?id=594 594]
 +
: [http://typewith.me/jQ6nHnVdHG type with me]
 +
:[ http://code.google.com/p/processing/wiki/ToolTemplate tool-template processing]
  
==About Processing.js==
+
---------------------------------------------------------------
: [http://processingjs.org/ Processingjs.org]
 
: [http://processing.org/ Processing.org]
 
: Definition of the [https://wiki.mozilla.org/Education/Projects/ProcessingForTheWeb project]
 
: Processing on [http://zenit.senecac.on.ca/wiki/index.php/Processing.js CDOT]
 
:[https://developer.mozilla.org/En/Developer_Guide/Source_Code Mozilla Project]
 
: [https://wiki.mozilla.org/Processing.js_for_JavaScript_Devs processing.js for javascript]
 
  
==Related References==
+
== Others ==
: 1- [http://zenit.senecac.on.ca/wiki/index.php/Canvas3D_JS_Library C3DL]
+
Did couple of automated ref tests for processing
: 2-[https://developer.mozilla.org/en/Canvas_tutorial Canvas Tutorial]
+
: info @ [http://typewith.me/4EOiLyY39f type with me]
 +
: ref tests needed [https://processing-js.lighthouseapp.com/projects/41284/tickets/1150-cleanup-the-examples-folder#ticket-1150]
 +
: Examples [http://scotland.proximity.on.ca/dxr/tmp/processing-js/examples/seneca/]
 +
: Processing - helper [http://scotland.proximity.on.ca/dxr/tmp/processing-js/tools/processing-helper.html]

Latest revision as of 10:40, 26 October 2011

OSD600 - PROCESSING

processing.js
Source Control: git
BugTracker: Lighthouse

Release 0.1

  • Bugs
Add parseBoolean function. Ticket @lighthouse
A missing feature from Processing (Java). Convert a char, a integer, a string, an array into a boolean.
  • Blogs
1 - 2 - 3
  • Related Tickets
1058- 450
  • How To make
Introduction to how to run tests and make @ lighthouse
Brief info in my blog
Run the terminal as you want to bill firefox: mozilla-build -> start-msvcxxx.bat
Create a .profile file in the user account -> user/name
Export the path to js -> export JSSHELL=/PATH/TO/mozilla-central/objdir-ff-release/dist/bin/js

Release 0.3

  • Bugs
Fix transparency in copy() function. Ticket @lighthouse- When using copy() on an image with transparency, the transparency overwrites the background color. See the screenshots to compare against p5. The image is a red splatter with transparent background and the background is green.
  • Blogs
1 - 2 - 3
  • Related Tickets
Ticket I filed for p5 while working on this ticket. #594 -#601
Other pjs tickets related to this one: #1174- #860-#948
  • Issues
On the way to fix this bug, I tried to compare it with how p5 handles this.
To work with p5 code, I cloned it from here with the latest instructions at the bottom of this page.
Then I started to debug it on eclipse, with these instructions.
The result that I'm getting for the pixels from both p5 and pjs are the same. Here is a sample of these results.
I thought it might be something with some charactersitics of pixels in p5 e.g. fillAlpha, calcAlpha,... for which I couldn't find any correspondent in pjs so far.
Those characteristics where changed in pGraphics.java:
several instances of: line 5302:
 calcAlpha = (calcAi != 255); // changed to check for equality to 255
Since the pixels were the same, seems like p5 has some difference in setting that shows the first underneath layer which is the background pixels in case of transparency of image. But browsers react differently. They display the pixels of window.
The other strange issue was that chrome displays actually the color of the window as is defined in bgcolor whereas firefox just fills the transparent pixels with black color.

Pjs background.png - Chrome with green background for window
Pjs background ff.png - firefox with green background for window

  • Final Solution
So, we got nowhere in comparing these 2 together, so we decided to go around it and solve it with modifying REPLACE mode in blit_resize():
if (img.format !== PConstants.RGB && destPixels[(destOffset + x) * 4] !== 255) {
  destColor = p.color.toArray(p.modes.blend(destColor, p.filter_bilinear()));
} else {
  destColor = p.color.toArray(p.filter_bilinear());
}
The way it works, if the image format is RGB, that means, there is no transparency for any of pixels anyways, so it would continue as normal. If the format is ARGB, it'll check if there is any alpha that is 255, if yes, again the normal flow, if not, it will call the BLEND mode function, to blend the pixels with background.

Pjs-ff.png

  • Helpful tips
From processingjs.org DOM security will not allow you to load images file:/// URIs. This security can be overridden in Firefox in about:config, by changing security.fileuri.strict_origin_policy to false. Otherwise use
/* @pjs preload="img.jpg"; */
alpha channel
p5 trunk
p5 java PImage.java
how to build the processing (java) [1]
processing on Eclipse
processing eclipse_plugin
reported a p5 bug 594
type with me
[ http://code.google.com/p/processing/wiki/ToolTemplate tool-template processing]

Others

Did couple of automated ref tests for processing

info @ type with me
ref tests needed [2]
Examples [3]
Processing - helper [4]