🌟
Learning Processing: Drawing
with code
Fecha de creación @August 26, 2024 10:30 AM
Clase Programación Multimedia
Tipo Lectura
Revisado
NOTAS
Think about the dimensions of the
window you’re drawing on.
The measurements are in pixels.
Think about the coordinates of the
pixels you’ve drawn. The origin of
a regular computer graphics
window, the origin (0,0) is in the
top left corner.
The cartesian plane is flipped, so
there are no negative pixels within
the canvas. You count to the right
for X, and count down for Y.
Usually, the predetermined width for a window is 640, and the height is 360.
So the center coordinates would be (320,180)
Learning Processing: Drawing with code 1
Every line of code will be a name or command ( 0 or more arguments
separated by commas );
The syntax for drawing a line is line(x1,y1,x2,y2);
When you highlight a function, you can right click it and select “Find in
reference” to find it in the reference page of processing.
Doing this “//” Creates a Code Comment
Every shape has a reference point. For the circle, its the center. For the
square, its the top left. If you want to change it, you have to change the
rectMode to center.
Processing takes the order of lines you are writing the code in, and layering
the visuals on top of each other.
Learning Processing: Drawing with code 2
ERRORS
Errors will pop up below the console. Very often, the error message will be
misleading.
PApplet: Fancy name for your sketch as a whole.
COLOR
background ( )
stroke ( )
fill ( )
Color as an argument -
Learning Processing: Drawing with code 3
Gray scale color value (0 for black, to 255 for white)
A single number inside the parenthesis is going to set the color.
RGB
1. Red
2. Green
3. Blue
This is like mixing light. NOT PAINT.
Each has a range from 0 to 255
When setting the color of a shape:
To edit the thickness of the outline of shapes: stroke weight
strokeWeight (4)
Remember to check the order of the code. It will change the properties of the
shape above the lines, or all together if it is above any shape command.
COLOR MODES
There are other ways to define color. how yo define it is called “Color mode”.
colorMode ( )
Other arguments:
noStroke ( )
noFill ( )
without any values. Placing 0 in either Fill or Stroke is for black.
ALPHA TRANSPARENCY
Learning Processing: Drawing with code 4
Kinda like opacity.
Also has a range from 0 to 255
You add a fourth argument in fill (x, y, z, a) for transparency
In actuality, the pixels aren’t really transparent, but the program recognizes the
effect you want it to have and does some math to apply a color that merges into a
“transparent” effect.
BITS AND BYTES
256 - a POWER OF TWO - 2 to the 8th Power
2 are important because they’re directly related to the primary language of the
computer: Binary code-
DUDAS
RESUMEN
Learning Processing: Drawing with code 5
