Scribd
Upload
13 views5 pages

Drawingwithcode

The document provides an overview of drawing with code in Processing, focusing on window dimensions, pixel coordinates, and the syntax for drawing shapes. It explains color settings, including RGB values and transparency, as well as the importance of code order and error handling. Additionally, it touches on the concept of bits and bytes in relation to computer graphics.

Uploaded by

pxlvrtx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views5 pages

Drawingwithcode

The document provides an overview of drawing with code in Processing, focusing on window dimensions, pixel coordinates, and the syntax for drawing shapes. It explains color settings, including RGB values and transparency, as well as the importance of code order and error handling. Additionally, it touches on the concept of bits and bytes in relation to computer graphics.

Uploaded by

pxlvrtx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

🌟

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy