1 / 13

PROCESSING

PROCESSING. A computer screen is a grid of small light elements called pixels. The Interface. Predefined methods to draw shapes. Arguments: Beginning x, y position. These predefined shapes require different arguments in the parameter. Arguments: Beginning x, y position

bree
Télécharger la présentation

PROCESSING

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PROCESSING A computer screen is a grid of small light elements called pixels.

  2. The Interface

  3. Predefined methods to draw shapes. Arguments: Beginning x, y position These predefined shapes require different arguments in the parameter. Arguments: Beginning x, y position Ending x, y position Arguments: 1st x, y position 2nd x, y position 3rd x, y position These are connected to make the triangle

  4. Arguments: Requires 4 x and y positions for each point. The points are connected Arguments: Beginning point x, y and the width & height width + beginning x = ending x Height + y = ending y

  5. Tips to draw other shapes • square, you need to use the rect(int x, int y, int width, int height) and use the same value for the width and height • circle, you can use the ellipse(int x, int y, int width, int height) function with the same value for the width and height. • triangle() function is used with six parameters. These are three x/y coordinates for the three points of the triangle. You should try to draw these points clockwise on the screen to keep things simple. • The quad() is similar to the triangle() function, but uses eight parameters, as a quad has four points.

  6. Attributes of shapes • attributes of shapes are controlled with other code elements. • size(int x, int y); • background(int colorNum); // used to set the background color of the frame • stroke(intnum, intnum, intnum) ; // used to change the color of a line • fill(int num); // used to fill a shape with a shade of gray • fill(int colorNum, int colorNum, int colorNum); // used to fill a shape with a color • noFill(); • noStroke() • strokeWeight(intnum), strokeCap(), strokeJoin() • smooth(), noSmooth(), ellipseMode(), rectMode()

  7. Setting colors • The intensities of each color element are specified with values between 0 and 255 • In Processing, colors are defined by the parameters to the • background(value1, value2, value3) • fill(value1, value2, value3) • fill(value1, value2, value3, alpha) • stroke(value1, value2, value3) • stroke(value1, value2, value3, alpha) Fill is used with shapes that have a width and height. Stroke is used with lines background(242, 204, 47); RGB VALUES FOR COLOR: Color ranges from 0 to 255 background(75, 255, 150); Would produce some color

  8. This is the code to make these different shapes

  9. Ice Cream Cone background(255, 162, 0); fill(0, 255, 255); ellipse(200, 92, 80, 80); // Top scoop fill(242, 0, 255); ellipse(200, 141, 80, 80); // Middle scoop! fill(255, 204, 0); ellipse(200, 187, 80, 80); // Bottom scoop! fill(0, 13, 255); rect(150, 200, 107, 112); // The cup! fill(255, 0, 0); ellipse(200, 46, 20, 20); // The cherry, yum line(200, 27, 200, 36); // And the cherry stem

  10. Drawing with coordinates

  11. Drawing with coordinates Different x Same y

  12. Drawing Custom Shapes • Processing has a beginShape() method to draw custom shapes by specifying specific vertex x and y point on the grid. • It will connect the points to draw the shape. End the procedure with endShape();

  13. Work on Your Initial/Logo projectRefer to your rubric

More Related