You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
color-p1x1: "In the digital world, when we want to talk about a color, precision is required. Saying "Hey, can you make that circle bluish-green?" will not do. Color, rather, is defined as a range of numbers. Let's start with the simplest case: black & white or grayscale. 0 means black, 255 means white. In between, every other number—50, 87, 162, 209, and so on—is a shade of gray ranging from black to white."
435
+
color-p2x1: "By adding the "
436
+
color-p2x2: " and "
437
+
color-p2x3: " functions before something is drawn, we can set the color of any given shape.
438
+
There is also the function "
439
+
color-p2x4: ", which sets a background color for the window. Here's an example."
440
+
color-code1: "background(255); // Setting the background to white
441
+
stroke(0); // Setting the outline (stroke) to black
442
+
fill(150); // Setting the interior of a shape (fill) to grey
443
+
rect(50,50,75,100); // Drawing the rectangle"
444
+
color-p3x1: "Stroke or fill can be eliminated with the functions: "
445
+
color-p3x2: " and "
446
+
color-p3x3: ". Our instinct might be to say "stroke(0)" for no outline, however, it is important to remember that 0 is not "nothing", but rather denotes the color black.
447
+
Also, remember not to eliminate both—with "
448
+
color-p3x4: " and "
449
+
color-p3x5: ", nothing will appear!"
450
+
color-p4x1: "In addition, if we draw two shapes, p5.js will always use the most recently specified stroke and fill, reading the code from top to bottom."
451
+
rgb-color-title: "RGB Color"
452
+
rgb-color-p1x1: "Remember finger painting? By mixing three "primary" colors, any color could be generated. Swirling all colors together resulted in a muddy brown. The more paint you added, the darker it got. Digital colors are also constructed by mixing three primary colors, but it works differently from paint. First, the primaries are diff erent: red, green, and blue (i.e., "RGB" color). And with color on the screen, you are mixing light, not paint, so the mixing rules are different as well."
453
+
rgb-color-li1: "Red + Green = Yellow"
454
+
rgb-color-li2: "Red + Blue = Purple"
455
+
rgb-color-li3: "Green + Blue = Cyan (blue-green)"
456
+
rgb-color-li4: "Red + Green + Blue = White"
457
+
rgb-color-li5: "No colors = Black"
458
+
rgb-color-p2x1: "This assumes that the colors are all as bright as possible, but of course, you have a range of color available, so some red plus some green plus some blue equals gray, and a bit of red plus a bit of blue equals dark purple. While this may take some getting used to, the more you program and experiment with RGB color, the more it will become instinctive, much like swirling colors with your fingers. And of course you can't say "Mix some red with a bit of blue," you have to provide an exact amount. As with grayscale, the individual color elements are expressed as ranges from 0 (none of that color) to 255 (as much as possible), and they are listed in the order R, G, and B. You will get the hang of RGB color mixing through experimentation, but next we will cover some code using some common colors."
459
+
color-transparency-title: "Color Transparency"
460
+
color-transparency-p1x1: "In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's "alpha." Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. The alpha values for an image are sometimes referred to collectively as the "alpha channel" of an image."
461
+
color-transparency-p2x1: "It is important to realize that pixels are not literally transparent, this is simply a convenient illusion that is accomplished by blending colors. Behind the scenes, p5.js takes the color numbers and adds a percentage of one to a percentage of another, creating the optical perception of blending. (If you are interested in programming "rose-colored" glasses, this is where you would begin.)"
462
+
color-transparency-p3x1: "Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque)."
463
+
custom-color-ranges-title: "Custom Color Ranges"
464
+
custom-color-ranges-p1x1: "RGB color with ranges of 0 to 255 is not the only way you can handle color in p5.js, in fact, it allows us to think about color any way we like. For example, you might prefer to think of color as ranging from 0 to 100 (like a percentage). You can do this by specifying a custom "
465
+
custom-color-ranges-p2x1: "The above function says: "OK, we want to think about color in terms of red, green, and blue. The range of RGB values will be from 0 to 100.""
466
+
custom-color-ranges-p3x1: "Although it is rarely convenient to do so, you can also have different ranges for each color component:"
467
+
custom-color-ranges-p4x1: "Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue from 0 to 10, and alpha from 0 to 255.""
468
+
custom-color-ranges-p5x1: "Finally, while you will likely only need RGB color for all of your programming needs, you can also specify colors in the HSB (hue, saturation, and brightness) mode. Without getting into too much detail, HSB color works as follows:"
469
+
custom-color-ranges-li1x1: "Hue"
470
+
custom-color-ranges-li1x2: "—The color type, ranges from 0 to 255 by default."
471
+
custom-color-ranges-li2x1: "Saturation"
472
+
custom-color-ranges-li2x2: "—The vibrancy of the color, 0 to 255 by default."
473
+
custom-color-ranges-li3x1: "Brightness"
474
+
custom-color-ranges-li3x2: "—The, well, brightness of the color, 0 to 255 by default."
475
+
custom-color-ranges-p6x1: "With "
476
+
custom-color-ranges-p6x2: " you can set your own ranges for these values. Some prefer a range of 0-360 for hue (think of 360 degrees on a color wheel) and 0-100 for saturation and brightness (think of 0-100%)."
477
+
478
+
coordinate-system:
479
+
coordinate-system-description1: "This tutorial is from the book "
coordinate-system-description-title: "Coordinate System and Shapes"
485
+
coordinate-system-description-p1x1: "Before we begin programming with p5, we must first channel our eighth grade selves, pull out a piece of graph paper, and draw a line. The shortest distance between two points is a good old fashioned line, and this is where we begin, with two points on that graph paper."
486
+
coordinate-system-description-p2x1: "The above figure shows a line between point A (1,0) and point B (4,5). If you wanted to direct a friend of yours to draw that same line, you would give them a shout and say "draw a line from the point one-zero to the point four-five, please." Well, for the moment, imagine your friend was a computer and you wanted to instruct this digital pal to display that same line on its screen. The same command applies (only this time you can skip the pleasantries and you will be required to employ a precise formatting). Here, the instruction will look like this:"
487
+
coordinate-system-description-p3x1: "Even without having studied the syntax of writing code, the above statement should make a fair amount of sense. We are providing a command (which we will refer to as a "function") for the machine to follow entitled "line." In addition, we are specifying some arguments for how that line should be drawn, from point A (1,0) to point B (4,5). If you think of that line of code as a sentence, the function is a verb and the arguments are the objects of the sentence. The code sentence also ends with a semicolon instead of a period."
488
+
coordinate-system-description-p4x1: "The key here is to realize that the computer screen is nothing more than a fancier piece of graph paper. Each pixel of the screen is a coordinate - two numbers, an "x" (horizontal) and a "y" (vertical) - that determines the location of a point in space. And it is our job to specify what shapes and colors should appear at these pixel coordinates."
489
+
coordinate-system-description-p5x1: "Nevertheless, there is a catch here. The graph paper from eighth grade ("Cartesian coordinate system") placed (0,0) in the center with the y-axis pointing up and the x-axis pointing to the right (in the positive direction, negative down and to the left). The coordinate system for pixels in a computer window, however, is reversed along the y-axis. (0,0) can be found at the top left with the positive direction to the right horizontally and down vertically."
490
+
simple-shapes-title: "Simple Shapes"
491
+
simple-shapes-p1x1: "The vast majority of the programming examples you'll see with p5 are visual in nature. These examples, at their core, involve drawing shapes and setting pixels. Let's begin by looking at four primitive shapes."
492
+
simple-shapes-p2x1: "For each shape, we will ask ourselves what information is required to specify the location and size (and later color) of that shape and learn how p5 expects to receive that information. In each of the diagrams below, we'll assume a window with a width of 10 pixels and height of 10 pixels. This isn't particularly realistic since when you really start coding you will most likely work with much larger windows (10x10 pixels is barely a few millimeters of screen space.) Nevertheless for demonstration purposes, it is nice to work with smaller numbers in order to present the pixels as they might appear on graph paper (for now) to better illustrate the inner workings of each line of code."
493
+
simple-shapes-p3x1: "A "
494
+
simple-shapes-p3x2: " is the easiest of the shapes and a good place to start. To draw a point, we only need an x and y coordinate."
495
+
simple-shapes-p4x1: "A "
496
+
simple-shapes-p4x2: " isn't terribly difficult either and simply requires two points: (x1,y1) and (x2,y2):"
497
+
simple-shapes-p5x1: "Once we arrive at drawing a "
498
+
simple-shapes-p5x2: ", things become a bit more complicated. In p5, a rectangle is specified by the coordinate for the top left corner of the rectangle, as well as its width and height."
499
+
simple-shapes-p6x1: "A second way to draw a rectangle involves specifying the centerpoint, along with width and height. If we prefer this method, we first indicate that we want to use the "
500
+
simple-shapes-p6x2: " mode before the instruction for the rectangle itself. Note that p5 is case-sensitive."
501
+
simple-shapes-p7x1: "Finally, we can also draw a rectangle with two points (the top left corner and the bottom right corner). The mode here is "
502
+
simple-shapes-p7x2: ". Note this example gives the same result on screen as the example above."
503
+
simple-shapes-p8x1: "Once we have become comfortable with the concept of drawing a rectangle, an "
504
+
simple-shapes-p8x2: " is a snap. In fact, it is identical to "
505
+
simple-shapes-p8x3: " with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default mode for "
506
+
simple-shapes-p8x4: " is "
507
+
simple-shapes-p8x5: ", rather than "
508
+
simple-shapes-p8x6: "."
509
+
simple-shapes-p9x1: "It is important to acknowledge that these ellipses do not look particularly circular. p5 has a built-in methodology for selecting which pixels should be used to create a circular shape. Zoomed in like this, we get a bunch of squares in a circle-like pattern, but zoomed out on a computer screen, we get a nice round ellipse. p5 also gives us the power to develop our own algorithms for coloring in individual pixels (in fact, we can already imagine how we might do this using "point" over and over again), but for now, we are content with allowing the "ellipse" statement to do the hard work. (For more about pixels, start with: the "
510
+
simple-shapes-p9x2: "pixels reference page"
511
+
simple-shapes-p9x3: ", though be warned this is a great deal more advanced than this tutorial.)"
512
+
simple-shapes-p10x1: "Now let's look at what some code with shapes in more realistic setting, with window dimensions of 200 by 200. Note the use of the createCanvas() function to specify the width and height of the window."
0 commit comments