Create vector graphics (Bezier curves, shapes)

Topic 19 – Graphics Creation (Cambridge International AS & A Level IT 9626)

Objective

Develop the knowledge and practical skills required to create, edit and export vector graphics using Bézier curves, and to understand the complementary basics of raster‑image editing.

---

Quick‑scan of the syllabus vs. the notes

Syllabus expectation (Topic 19)	What the notes currently deliver	Gap / improvement needed
Distinguish vector vs raster graphics – definitions, resolution, file‑size behaviour, typical uses	Clear definition, comparison table, examples of uses	Add “Why this matters for the exam” box
Bézier theory – quadratic & cubic equations, control‑point geometry, how editors implement them	Full equations, description of tangents, control‑point manipulation, diagram cue	Provide a worked‑out numeric example (point on a cubic curve for t = 0.5)
Constructing basic shapes with Bézier curves – circle/ellipse approximation, rounded rectangles, polygons, stars	Detailed steps, offset k ≈ 0.552 r, algorithmic outline	Mention the alternative “arc” method and when it is acceptable in the exam
Standard vector‑editing workflow – Pen tool, anchor placement, handles, join/close, layers, colour models, anti‑aliasing, export settings	Good practical checklist, software options (Illustrator, Inkscape)	Add a “Raster‑editing” sub‑section (Photoshop/GIMP basics)
Vector file formats – SVG, EPS, AI, PDF, key features	Comparison table	Include a quick decision matrix (when to choose each format)

---

1. Vector vs. Raster Graphics

• Vector graphics are defined by mathematical equations (points, lines, Bézier curves, polygons). They are resolution‑independent; scaling does not degrade quality.
• Raster graphics store colour information for each pixel in a fixed grid. They are resolution‑dependent; enlarging creates blocky or blurry results.

Key comparison

Aspect	Vector	Raster
Scalability	Infinite – no loss of detail	Limited to original pixel dimensions
File size	Usually smaller for simple artwork	Increases with pixel count & colour depth
Editing	Objects can be edited independently	Pixel‑based; changes affect surrounding pixels
Typical uses	Logos, icons, technical diagrams, UI elements	Photographs, complex textures, web‑page backgrounds

---

2. Bézier Curves – Theory and Application

2.1 Quadratic Bézier curve

Three points: start P₀, control P₁, end P₂.

$$ P(t)= (1-t)^2 P_0 + 2(1-t)t P_1 + t^2 P_2 \qquad (0\le t\le1) $$

• Passes through P₀ and P₂.
• Tangent at P₀ points toward P₁; tangent at P₂ points away from P₁.

2.2 Cubic Bézier curve

Four points: start P₀, controls P₁ & P₂, end P₃.

$$ P(t)= (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3 \qquad (0\le t\le1) $$

• Provides two independent tangent directions, enabling complex shapes (e.g., an “S” curve) with a single segment.
• All modern vector editors use cubic Bézier paths for drawing.

2.3 Numeric example – point on a cubic curve (AO2)

Given points:

• P₀ = (100, 250)
• P₁ = (150, 100)
• P₂ = (200, 400)
• P₃ = (250, 250)

Calculate the position at t = 0.5:

$$ \begin{aligned} P(0.5) &= (0.5)^3 P_0 + 3(0.5)^2(0.5) P_1 + 3(0.5)(0.5)^2 P_2 + (0.5)^3 P_3\\ &= 0.125(100,250) + 0.375(150,100) + 0.375(200,400) + 0.125(250,250)\\ &= (12.5,31.25) + (56.25,37.5) + (75,150) + (31.25,31.25)\\ &= (175,250) \end{aligned} $$

The curve passes through (175, 250) when t = 0.5. This demonstrates how the equation is used to compute intermediate points – a skill often required in AO2 tasks.

2.4 Manipulating control points

Moving a control point changes the direction and curvature of the segment without moving the anchor points. Handles (the line segments joining an anchor to its control points) visualise the tangent direction. In most editors you drag a handle to adjust both length (curvature) and angle (direction).

---

3. Constructing Basic Shapes with Bézier Curves

3.1 Circle / Ellipse approximation

A perfect circle can be approximated by four cubic Bézier segments. For a circle of radius r centred at the origin, each segment spans 90°. The control‑point offset from an anchor point is

$$ k = \frac{4}{3}\tan\!\left(\frac{\pi}{8}\right) \approx 0.5522847498 \times r $$

Using this offset the maximum deviation from a true circle is < 0.03 % – invisible in normal use.

Example (r = 100 px):

• Anchor points: (100,0), (0,100), (‑100,0), (0,‑100).
• First segment control points: (100, k·100) and (k·100, 100) → (100, 55.23) and (55.23, 100).
• Repeat for the remaining three quadrants.

3.2 Rounded rectangle

1. Draw four straight lines for the rectangle sides.
2. At each corner replace the sharp vertex with a quarter‑circle Bézier arc using the same offset k = 0.552 r, where r is the desired corner radius.
3. Close the path to obtain a fillable shape.

3.3 Regular polygon & star

• Place anchor points at equal angular intervals around a circle (e.g., every 60° for a hexagon).
• For a star, alternate between an outer radius R and an inner radius r to create spikes.
• To smooth a polygon, convert each sharp vertex into a short Bézier curve by pulling the handles outward from the vertex.

3.4 Alternative “arc” method (exam tip)

Most vector editors also provide an Arc or Ellipse tool that creates a true mathematical arc (no approximation). The Cambridge exam marks this as correct if the resulting shape meets the required accuracy. Use the arc tool when the question explicitly asks for a “perfect circle” or “precise arc”.

3.5 Summary of shape‑construction steps

1. Define the first anchor point (P₀).
2. Decide the number of Bézier segments needed.
3. For each segment, place the required control points (use the offset k for circles/rounded corners).
4. Close the path (or use the arc tool where permitted).
5. Apply fill and stroke as required.

---

4. Raster‑Editing Basics (required by the syllabus)

• Resolution & DPI – Raster images are defined by pixel dimensions (e.g., 800 × 600 px). DPI (dots per inch) determines print size; 72 dpi is standard for screen, 300 dpi for high‑quality print.
• Colour depth – 8‑bit per channel (24‑bit colour) is typical; higher depths (48‑bit) give smoother gradients but larger files.
• Compression
  • Lossless (PNG, TIFF) – no quality loss, suitable for line art and screenshots.
  • Lossy (JPEG) – reduces file size at the cost of artefacts; best for photographs.
• Common raster editors
  • Adobe Photoshop – industry standard, supports layers, adjustment layers, masks.
  • GIMP – free, open‑source alternative with comparable features.
• Typical raster workflow
  1. Set the document size and DPI.
  2. Import or create raster elements (photos, textures).
  3. Apply adjustments (levels, curves) and filters as required.
  4. When the final graphic must be vector‑based, trace the raster image or recreate it with Bézier paths.

---

5. Standard Vector‑Editing Workflow

5.1 Step‑by‑step workflow (Pen / Bézier tool)

1. Select the Pen / Bézier tool
   Illustrator: Pen Tool (P)  Inkscape: Bezier Tool (B)
2. Place anchor points by clicking on the canvas.
3. Drag to create control handles – hold the mouse button while moving to set direction and length.
4. Join / close the path
   Illustrator: Object → Path → Join  Inkscape: Ctrl+J (Join) or Ctrl+Shift+J (Close)
5. Apply fill & stroke – use the Fill/Stroke panels; set colour, opacity, and stroke width.
6. Layer management – create separate layers for distinct elements; group related objects (Ctrl+G) for organisation.
7. Colour models – work in RGB for screen output; switch to CMYK for print. Set the colour space in Document Properties.
8. Anti‑Aliasing – vectors are rendered smoothly automatically; when exporting to raster formats (PNG, JPEG) ensure “Anti‑Aliasing” is enabled.
9. Export settings
   • .svg – retains editability; ideal for web and interactive diagrams.
   • .eps or .pdf – high‑resolution print output; embed fonts and use CMYK if required.
   • Raster export (PNG/JPEG) – specify pixel dimensions and resolution (e.g., 300 dpi for print).

---

6. Vector File Formats – Comparison & Decision Matrix

Format	Extension	Typical use	Key features
Scalable Vector Graphics	.svg	Web graphics, interactive diagrams	XML‑based; supports paths, text, gradients, animation; easily edited in code.
Encapsulated PostScript	.eps	Print publishing, high‑resolution output	Device‑independent PostScript; embeds Bézier paths, colour separations; widely accepted by printers.
Adobe Illustrator	.ai	Professional design workflow	Layered, symbols, advanced effects; backward compatible with PDF.
Portable Document Format	.pdf	Document exchange, printable vector graphics	Combines vectors, raster, text; supports CMYK, encryption, interactive forms.

Decision matrix (when to choose which format)

Requirement	Best format	Reason
Web page logo, needs to stay editable	.svg	Scalable, small file, native to browsers.
Print brochure, colour‑managed, CMYK	.eps or .pdf	Both preserve CMYK data; EPS is traditional for print houses.
Collaboration with a designer using Illustrator	.ai	Preserves layers, symbols, and effects specific to Illustrator.
Simple vector graphic to be included in a Word document	.pdf (or .svg if the word processor supports it)	PDF embeds reliably; SVG may lose fidelity in some office suites.

---

7. Worked Example – Designing a Simple Logo with Cubic Bézier Curves

1. Open a new document (500 px × 500 px). Set colour mode to RGB for screen use.
2. Select the Pen tool.
3. Click at A(100,250) – creates anchor P₀.
4. Drag outward to set the first handle toward P₁(150,100). Release – the first cubic segment is started.
5. Click at P₃(250,250) and drag the second handle toward P₂(200,400). This completes the first half of the logo.
6. Mirror the process on the opposite side:
   • Click again at P₃′(250,250) (same end point).
   • Drag toward P₁′(350,100), then place the final anchor at A(100,250) with a handle toward P₂′(400,400).
7. Close the path by clicking the initial anchor A. The shape is now a closed, symmetrical logo.
8. Check a point on the first segment (t = 0.5) using the cubic equation from section 2.3 – you should obtain (175, 250), confirming the curve’s geometry.
9. Apply a solid fill #0066CC and a 2 px stroke #003366.
10. Save as .svg for web use. Export a .pdf version for print; in the export dialog convert the colour space to CMYK if the final output is printed.

---

8. Assessment Checklist (AO1 & AO2)

• Can the student clearly define and contrast vector and raster graphics, including typical file extensions and exam‑relevant reasons for the difference?
• Does the student correctly write the quadratic and cubic Bézier equations and explain the role of each control point?
• Is the student able to calculate a point on a cubic curve (e.g., for t = 0.5) and interpret the result?
• Can the student demonstrate the four‑segment circle approximation, quoting the offset k ≈ 0.552 r and, where appropriate, use the built‑in arc tool?
• Is the student competent in creating, editing, and joining Bézier paths in Illustrator or Inkscape, including the use of layers, groups, and appropriate colour models (RGB for screen, CMYK for print)?
• Does the student understand raster‑editing basics (resolution, DPI, colour depth, compression) and can they choose the correct file format for a given scenario?
• Is the student familiar with export settings for SVG, EPS, AI and PDF, and aware of anti‑aliasing considerations when rasterising?

---

9. Summary

Vector graphics are built from mathematical definitions of points, lines and Bézier curves. Mastery of quadratic and cubic Bézier equations, control‑point manipulation, and the four‑segment circle method enables the creation of accurate, scalable shapes. Complementary knowledge of raster‑image fundamentals (resolution, DPI, colour depth) completes the Cambridge IT 9626 syllabus requirements. Combined with practical competence in industry‑standard software (Illustrator, Inkscape) – including layers, colour spaces, anti‑aliasing, and appropriate export formats – students can produce professional‑quality graphics for both digital and print contexts, meeting all AO1 and AO2 assessment criteria.