Color Theory applied

[flyingdeath]

Hi,

I've coded the color theory from the page below into a class and applied it your example can commit it to your project?

Thanks,
Brian.

http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

[bgrins]

I'm not sure exactly what you mean, but I'd love to see what type of color theory additions you made. Can you attach a commit or elaborate a little more?

Thanks,
Brian

[flyingdeath]

ok. here you are it's a little ruff I think I'll put sliders in for text
boxes, use width for one size.

Please let me know what you think, and if you want anything changed.

include yui build for the mouse wheel. it's too big to send through email.

http://developer.yahoo.com/yui/2/

Thanks,
Brian.

On Sat, Mar 17, 2012 at 7:51 PM, Brian Grinstead <
reply@reply.github.com

wrote:

I'm not sure exactly what you mean, but I'd love to see what type of
color theory additions you made. Can you attach a commit or elaborate a
little more?

Thanks,
Brian

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[flyingdeath]

updated draw polygonal fixed.

On Sun, Mar 18, 2012 at 8:16 AM, Brian Spiegel briansspiegel@gmail.comwrote:

ok. here you are it's a little ruff I think I'll put sliders in for text
boxes, use width for one size.

Please let me know what you think, and if you want anything changed.

include yui build for the mouse wheel. it's too big to send through email.

http://developer.yahoo.com/yui/2/

Thanks,
Brian.

On Sat, Mar 17, 2012 at 7:51 PM, Brian Grinstead <
reply@reply.github.com

wrote:

I'm not sure exactly what you mean, but I'd love to see what type of
color theory additions you made. Can you attach a commit or elaborate a
little more?

Thanks,
Brian

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[bgrins]

I'm still not seeing any commits here. Can you either submit a pull request or link to your code so I can see exactly what is in your change?

[flyingdeath]

http://www.flixrmi.com/colorSchemaTool/index.html

On Sun, Mar 18, 2012 at 2:11 PM, Brian Grinstead <
reply@reply.github.com

wrote:

I'm still not seeing any commits here. Can you either submit a pull
request or link to your code
so I can see exactly what is in your change?

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[bgrins]

This looks really cool! There are definitely some UI tweaks I would want to make, but if you want to commit your changes onto your fork then set up a pull request we can definitely put it together! Have you seen Kuler? It has a really great UI for switching the schemes and dragging around the color, I'd love to put something like that together with JS/canvas.

[bgrins]

Also, I have some more color resources here: https://github.com/bgrins/TinyColor that could be useful for generating some of the different schemes, and might handle the "wrapping" issues that creep up when you choose triangle and drag it to the far right, for instance.

This would lead to more of a "generate the color scheme ahead of time then render it onto the wheel" versus a "pick the points ahead of time then find the colors", like is currently being done in polySystemClass.prototype.colorOfPoints and polySystemClass.prototype.postionColor.

I think this may be easier in the long run to handle things like different HSV value since the location on the color wheel does not necessarily define the full color (just the hue and the saturation). Does this make sense?

[bgrins]

Here is the source for triad, tetrad, splitcomplement, and analogous, and monochromatic:
http://bgrins.github.com/TinyColor/docs/tinycolor.html#section-17

It should be doable (and a nice addition) to add in the square color scheme from your link: http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

[flyingdeath]

ok what is next

I don't want send you off in another direction But I found some other color
tools but they are NOT open source

If we can do mix of these two in 3d with Three JS now that would be cool.

http://colorschemedesigner.com/
http://www.colorotate.org/

https://github.com/mrdoob/three.js/

Current throughs

use

THREE.CylinderGeometry

create data for cones,

use

THREE.PlaneGeometry

to create height maps based cone, x2 inside and out color vertexes and
faces hsv scale

use

THREE.Ray

for collision detection.

use

THREE.Line

to draws 3d wire frame shapes for color schemas including tint and tone,
light and dark

create schemas from code.

Brian.

On Sun, Mar 18, 2012 at 6:55 PM, Brian Grinstead <
reply@reply.github.com

wrote:

Here is the source for triad, tetrad, splitcomplement, and
analogous, and monochromatic:
http://bgrins.github.com/TinyColor/docs/tinycolor.html#section-17

It should be doable (and a nice addition) to add in the square color
scheme from your link:
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[flyingdeath]

ok sliders added and value expanded, updates thought the link.

On Sun, Mar 18, 2012 at 7:43 PM, Brian Spiegel briansspiegel@gmail.comwrote:

ok what is next

mine was a test project

I don't want send you off in another direction But I found some other
color tools but they are open source

If we can do mix of these two in 3d with Three JS now that would be cool.

http://colorschemedesigner.com/
http://www.colorotate.org/

https://github.com/mrdoob/three.js/

Current throughs

use

THREE.CylinderGeometry

create data for cones,

use

THREE.PlaneGeometry

to create height maps based cone, x2 inside and out color vertexes and
faces hsv scale

use

THREE.Ray

for collision detection.

use

THREE.Line

to draws 3d wire frame shapes for color schemas including tint and tone,
light and dark

create schemas from code.

Brian.

On Sun, Mar 18, 2012 at 6:55 PM, Brian Grinstead <
reply@reply.github.com

wrote:

Here is the source for triad, tetrad, splitcomplement, and
analogous, and monochromatic:
http://bgrins.github.com/TinyColor/docs/tinycolor.html#section-17

It should be doable (and a nice addition) to add in the square color
scheme from your link:
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[bgrins]

Nice updates to the original. It would be sweet to do something with the three.js library. I'm not 100% sold on the UI here: http://www.colorotate.org/ - it is a little hard for me to navigate and see what exactly I am picking. I still can't really figure out how to change the hue on the colors.

However, I would really like to explore this idea, since I always feel the disconnect between hue/saturation and value, especially when we start generating schemes and trying to draw lines between the colors.

What if you were either picking hue/saturation or value at one time. I wish I was better at drawing up comps - but here is a little demo of what I mean geometry-wise: http://jsfiddle.net/bgrins/EpQZv/. As you picked your base hue/saturation, the value slider would change to be a gradient from value 1 to value 0 and you could slide up and down. Still not sure if that would feel right, just throwing out some ideas. Any thoughts on that?

[flyingdeath]

For right now I think you are headed in the right direction.

I think if we use geometric shapes to create data for the viewable geometry
that would work best.

We could use plains draw as final viewable objects and map the color to.

In other words we would copy the vertexes position from the data shape to
create a hollow geometric shaped plains.
Times 2 inside and out to get both sides.

I'm reading up on how they map color in 3d. So they use:

1. Sphere.
2. Cone.
3. Diamond
4. My idea of a Cylinder Tube.

I think if we allow the user to switch between the 3d geometric shapes just
like for the polygon system.
We should see easiest from to use or just allow the user to pick the one
they feel comfortable with.

If you want work on these ideas please do.

I'm going to try some things I should have idea what to do in a few days or
less.

I'll write back when I something.

Brian.

On Mon, Mar 19, 2012 at 9:16 AM, Brian Grinstead <
reply@reply.github.com

wrote:

Nice updates to the original. It would be sweet to do something with the
three.js library. I'm not 100% sold on the UI here:
http://www.colorotate.org/ - it is a little hard for me to navigate and
see what exactly I am picking. I still can't really figure out how to
change the hue on the colors.

However, I would really like to explore this idea, since I always feel the
disconnect between hue/saturation and value, especially when we start
generating schemes and trying to draw lines between the colors.

What if you were either picking hue/saturation or value at one time. I
wish I was better at drawing up comps - but here is a little demo of what I
mean geometry-wise: http://jsfiddle.net/bgrins/EpQZv/. As you picked
your base hue/saturation, the value slider would change to be a gradient
from value 1 to value 0 and you could slide up and down. Still not sure if
that would feel right, just throwing out some ideas. Any thoughts on that?

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[bgrins]

The cylinder tube idea sounds interesting - I'm looking forward to seeing what direction you take that. I agree it should be easy for the user to get back to a more standard color wheel + slider if they want to. I think that is my biggest issue with http://www.colorotate.org/ - I feel like I could understand what was happening better if I could see it in a context I was familiar with.

Let me know if you want some help once you have a general start and we can split the work up or bounce ideas off each other!

[flyingdeath]

If I may be so bold, I finally committed code, the 2d color schema tool is now uploaded.

Also I got a 3d based started and I want find out want you think of.

We can either use it or trash it, what do you think?

it's under
my fork
flyingdeath / colorwheel-1k -> colorschematool branch.

The 3d base is larger but includes full packages of Three js(Edge) and yui(2.9)

If you think we should use it I suggest you look over the all different pieces in oop and at the main.

I originally started working on this for a game and still want to try finish it. So you can see the different pieces commented out.

Depending on the final design, we could use a different model set to create a way different feel than colorotate.

Please let know if have any questions.

I'll start looking into the geometric plain concepts tomorrow.

Brian.

[bgrins]

Can you create a gh-pages branch and merge your changes into it so you can share the URL? Then your changes will be visible at http://flyingdeath.github.com/colorwheel-1k and we can share changes on our pages instead of having to download all the files back and forth.

Something like this should do the trick:
git branch gh-pages
git checkout gh-pages
git merge colorschematool
git push origin gh-pages
git checkout colorschematool

More info on github pages: http://pages.github.com/.

[bgrins]

Actually, there is already a gh-pages branch, so you should be able to skip the first step and run just these:

git checkout gh-pages
git merge colorschematool
git push origin gh-pages
git checkout colorschematool

[flyingdeath]

ok done with:

git checkout gh-pages
git merge colorschematool
git push origin gh-pages
git checkout colorschematool

If we work on 'gh-pages'. Why checkout colorschematool?

So which branch are we working on?

Brian.

[flyingdeath]

Ok geometric 3d shapes model in.

Cone and sphere are done and switch through code, change to user ui if needed.

Please look to geometric3dShapes.js -> 'init_plain' to change the color mapping of the viewable objects.

I'm thinking either materials or color the vertices some how.

With rainbow mapping for Hue around the x axis, z for saturation, and y axis for Value

Final design without wireframe.

Signing off for now let me know when you have something.

Brian.

[bgrins]

RE: "If we work on 'gh-pages'. Why checkout colorschematool?". gh-pages is a special branch that the GitHub site processes when you push to it. It makes sense to be able to commit and push to "colorschematool" without worrying about breaking the URL, then selectively merging in your changes and pushing to the URL. We would never merge your gh-pages into master once finished, instead we would merge your "colorschematool" into master.

[flyingdeath]

ok all newest code committed, and pushed to 'colorschematool' as well as 'gh-pages'.

I'll commit to 'colorschematool' from now on.

Thanks for helping me under stand the github process if any other problems come up let me know.

A couple questions though:

Did you get a look at the project?

Do you think you can coat the geometric shapes with the color scale?

Brian.

[bgrins]

I'm looking at the project, but having trouble pulling down this URL:
http://flyingdeath.github.com/colorwheel-1k/3d_ui_colorProject/doc_test_01.html. Is that the page you are talking about?

[flyingdeath]

That's the starting page, it may make sense to rename it index.html.
it should be fixed. I was playing the water physics class.

[bgrins]

I'm seeing the 3D model now, but still don't have a good idea of what direction you want to go with the color wheel. Do you want to texture part of the model with the color wheel?

[flyingdeath]

To be able to switch shapes and create a hollow 3d shape we need the inside
and outside plains.

If it doesn't seem to fit as a wheel color, when we have to color the
original shape and figure out to use double sided.

I think a texture is correct in what we are trying to do but instead of a
picture we color each vertex of the plains with the color wheel.

You could try use a picture with color mapping and try that but I think it
wouldn't be correct.

I'm figuring out it's more like a volume of color, but to play with concept
we need the raw numbers worked out.

Y = Value
X = Hue
Z = Saturation

so in 2d
x = hue
y = Saturation + Value

Best Project Color Yet - still 2d
http://mudcu.be/sphere/

Color Sphere half down. plus more on theory.
http://www.dakkadakka.com/wiki/en/Colour_Theory,_light_and_Shade

Other color projects
http://vandelaydesign.com/blog/design/website-color-schemes/

On Wed, Mar 21, 2012 at 12:21 PM, Brian Grinstead <
reply@reply.github.com

wrote:

I'm seeing the 3D model now, but still don't have a good idea of what
direction you want to go with the color wheel. Do you want to texture part
of the model with the color wheel?

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[flyingdeath]

ok I've updated the colors for the sphere but I'm unsure if it is correct, play with it may need some tweaking.

I looked at

\colorwheel-1k\3d_ui_colorProject\three_js\examples\webgl_lines_colors.html
\colorwheel-1k\3d_ui_colorProject\three_js\examples\webgl_geometry_colors.html
\colorwheel-1k\3d_ui_colorProject\three_js\examples\webgl_geometry_colors_blender.html

'webgl_geometry_colors' is what I used for the code so far

I thinking if NOT working correctly we may need to go to spherical coordinates.

I coded this part of the first person controls this should be all we need for spherical

   /*********************************************************************************************/
  this.updateCords = function(pos){
    var camPos = owl.deepCopy(this.object.position);
    var ver  = new THREE.Vector3(pos.x, pos.y, pos.z); 
    ver   = ver.sub(ver, camPos);

    var r = this.getRadius(ver)
    var p = 100;

    var tmpGeo         = this.getGeoCords(ver,r);
    var tmpSpherical   = this.getSpherical(tmpGeo[0],tmpGeo[1]);
    var targetPosition = this.getCartesian(tmpSpherical[0], tmpSpherical[1], r);
      targetPosition    = new THREE.Vector3(0, 0, 0).add(targetPosition, camPos);

    this.lon   = tmpGeo[0];
    this.lat   = tmpGeo[1];

    this.object.lookAt( targetPosition );
    this.ext_update = true;
 }

 this.getRadius = function(pos){
   var r = Math.sqrt(Math.pow(pos.x,2) + Math.pow(pos.y,2) + Math.pow(pos.z,2));
   return r;
 }
  /*********************************************************************************************/


 this.getGeoCords = function(pos,r){
   var lon = -1*((90 + (Math.atan2(pos.x , pos.z)) * 180 / Math.PI) % 360) -180;
   var lat = 90 - (Math.acos(pos.y / r)) * 180 / Math.PI;

  //  this.lat = Math.max( - 85, Math.min( 85, this.lat ) );

   return [lon,lat];
    }
  /*********************************************************************************************/


 this.getGeoCordsSpherical = function(phi, theta){
    var lon = theta * (180/Math.PI);
    var lat = (90 + phi) * (180/Math.PI);
   return [lon, lat];
    }
  /*********************************************************************************************/

 this.getSpherical = function(lon, lat){
   var theta = lon * Math.PI / 180;
   var phi   = ( 90 - lat) * Math.PI / 180;
   return [phi, theta];
 }
  /*********************************************************************************************/

 this.getCartesian = function(phi, theta, p){
   var targetPosition =  new THREE.Vector3(0, 0, 0);
   targetPosition.x = p * Math.sin( phi ) * Math.cos( theta );
   targetPosition.y = p * Math.cos( phi );
   targetPosition.z = p * Math.sin( phi ) * Math.sin( theta );
   return targetPosition;
}
  /*********************************************************************************************/

[flyingdeath]

Ok it looks like I have something working for the initial project.

Do you want to take the next piece I think I've gotten through the hard part, is there a certain look you want.

You talked about ideas?

I feel think I done most of the work so far the 3d base not with standing, I'm fine with working on this, but I don't want to waste your time creating an app you never wanted.

I want it be more collaborative. Here's read up on what's done so far.

Color and lights are working correctly.

3d shapes are initialized, which then applies position to plain which then gets color applied to each face and vertex.

In turn the vertex position is used as a point in the volume of creatable color, to cut out a slice of data to map back to the now visible shape.

X = Hue
Y = Value
Z = Saturation

Ideas so far

THREE.Ray map mouse position.

search for text 'THREE.Ray' in

/colorwheel-1k/3d_ui_colorProject/three_js/examples/
find
/colorwheel-1k/3d_ui_colorProject/three_js/examples/webgl_interactive_cubes.html

use ideas and code for for collision detection.

1. use slider controls to adjust formula input. steping/scaling.
2. use traditional formulas to base points off of, feed through hex and RGB formula,
3. create wire frame shapes, color schemes based off points, feed through hex and RGB formula.
4. UI to control everything.

output colors through 3d use plains to to show colors in 2d

show color schema charts designers like in the other color wheel apps.

user take home through text box to copy to clipbroad.

Link to good research to explain color theory.

Totally killer Color Wheel app priceless.

Signing off for now, hope to hear from you soon.

Brian.

[bgrins]

Can you push everything out to your gh-pages branch and maybe send some links over so I can see the current status?

[flyingdeath]

Hi,

It's ready.

Sorry about being a n00b I take it you can't see my branch every time I commit to it?

http://flyingdeath.github.com/colorwheel-1k/3d_ui_colorProject/doc_test_01.html

Brian.

[bgrins]

No worries :). Yeah, until you push to your gh-pages, I can't see the changes in my browser.

That looks really cool - it took me a while to figure out how to get outside of the shape though. It seems like there should be more constraints. So instead of "moving around in the world", it would be more like "rotating the shape around"? But then again, I'm interested to see in what direction you go with this.

[flyingdeath]

ok, let me know if hud works out ok.

fixed color sphere, now correctly assigning HSV.

userControlsClass updated Ray Used to calculate point on color Sphere.

HudPanel add one color panels so far. talk about if correct usage.

Ruff working example so far, I'll be talking me time from now.

Brian.

[flyingdeath]

ok html controls and hud, in place.

color schemes based off the tinycolor library using traditional formulas. Please check if working correcting.

Things left to do.

create wire frame shapes, color schemes based off points, feed through hex and RGB formula.

link UI to control everything

show color schema charts designers like in the other color wheel apps.

user take home through text box to copy to clipboard.

Brian.

[flyingdeath]

ok wire frame shapes, color schemes based off points, feed through hex and RGB formula, link UI to control everything
DONE.

now the real question is do we use 3d shapes,

Difference:
value and saturation will be able to be mixed together, in schema.

[flyingdeath]

show color schema charts designers like in the other color wheel apps.
user take home through text box to copy to clipboard.
Polished UI.

Done.

I'm done.

needs fix ui and 3d shapes later duno know.

add handles to points for 3d shapes.

also needs to be fixed translation 0,0,0.

right now camera fixed to 0,0,0

can use tackball camera but click drag used to calculate world position. doesn't seem usable. over simplified.

needed work out better camera controls/UI
3d Color concept correctly coded but UI OVER SIMPLIFIED.

TTFN

Brian.