Friday, September 26, 2014
Wednesday, September 24, 2014
Color
I mentioned this when we met, but make sure you really do understand how the RGB and HSB color models work.
HSB is the mode that you may be less familiar with, and just to make things confusing there are 2 similar color models HSL and HSV.
In Processing, go to the Tools menu and open the Color Selector. You will see that the colors are given as both HSB and RGB values. The selector itself uses the HSB model. The vertical "rainbow" bar changes the Hue value only. In the large square, moving in the x-axis changes the Saturation value, and moving in the y-axis changes the Brightness value.
This Wikipedia entry on HSL and HSV is a bit more technical than you really need. But, the Basic Principle and Motivation sections are useful to read.
Here is a simple little program that plays with color. mouseY controls the color, mouseX controls the size of the central rectangle.
void setup()
{
size(720,720);
// noCursor();
}
void draw()
{
colorMode(HSB, 360, 100, 100);
rectMode(CENTER);
noStroke();
background(mouseY/2, 100, 100);
fill(abs(180-mouseY/2), 100, 100);
rect(360, 360, mouseX+1, mouseX+1);
}
HSB is the mode that you may be less familiar with, and just to make things confusing there are 2 similar color models HSL and HSV.
In Processing, go to the Tools menu and open the Color Selector. You will see that the colors are given as both HSB and RGB values. The selector itself uses the HSB model. The vertical "rainbow" bar changes the Hue value only. In the large square, moving in the x-axis changes the Saturation value, and moving in the y-axis changes the Brightness value.
This Wikipedia entry on HSL and HSV is a bit more technical than you really need. But, the Basic Principle and Motivation sections are useful to read.
Here is a simple little program that plays with color. mouseY controls the color, mouseX controls the size of the central rectangle.
void setup()
{
size(720,720);
// noCursor();
}
void draw()
{
colorMode(HSB, 360, 100, 100);
rectMode(CENTER);
noStroke();
background(mouseY/2, 100, 100);
fill(abs(180-mouseY/2), 100, 100);
rect(360, 360, mouseX+1, mouseX+1);
}
Beginner Level Tutorials
Overview, Coordinate Systems and Shapes:
I made a mouse.
Color:
For this tutorial, I used multiple colors and transparencies.
Objects:
Similar to Julia, I did not take a picture due to the movement of objects, but it served as good review for both objects and classes
I made a mouse.
Color:
For this tutorial, I used multiple colors and transparencies.
Similar to Julia, I did not take a picture due to the movement of objects, but it served as good review for both objects and classes
Sunday, September 14, 2014
Beginner Level Tutorials (Overview- Objects)
Overview Tutorial:
Not much code to show... I just reread the basics, practiced exporting, and learned more about the setup() and draw() functions.
Coordinate System and Shapes:
I made a little white stick figure:
Color:
I played around with the colorMode() and transparency.
Objects:
I ran through the examples and I figured taking a picture of the example wouldn't quite work with the moving objects. However, this tutorial was a great review of objects and classes.
Not much code to show... I just reread the basics, practiced exporting, and learned more about the setup() and draw() functions.
Coordinate System and Shapes:
I made a little white stick figure:
Color:
I played around with the colorMode() and transparency.
Objects:
I ran through the examples and I figured taking a picture of the example wouldn't quite work with the moving objects. However, this tutorial was a great review of objects and classes.
Subscribe to:
Posts (Atom)