IDEA9103 Creative Coding
The Complete Study & Assessment Guide · S2 2026IDEA9103 Overview
- University of Sydney
- Semester 2 2026
- Postgraduate unit
- Creative coding
- Project assessment
IDEA9103 Creative Coding introduces software development as a medium for design and creative expression. The captured Semester 2 2026 teaching begins by treating programming as the work of translating an intention into unambiguous operations that a computer can execute.
- Assessment pattern Weekly quizzes carry 30%, while a creative coding major project carries 70% across concept and final presentations.
- Technical pathway The captured teaching moves from HTML and SVG into JavaScript state, DOM manipulation, objects, arrays and functions.
- Core habit Predict one state or geometry result before running the browser, then repair the earliest mismatch.
What you get in the full IDEA9103 Study & Assessment Guide
- 10 chapters, 43 pages — every assessed topic, week by week
- 23 original practice questions
- 10 worked examples, solved the way IDEA9103 marks
- 10 computed figures, redrawn from the course’s own numbers
- Before-you-submit checklist for the Creative coding major project (35%) — what markers reward, what costs marks
Free on this page: assessment table, chapter map, one worked example, key terms, FAQ. The rest is in the full study & assessment guide.
How IDEA9103 is assessed
| Component | Weight | Format |
|---|---|---|
| Weekly quizzes | 30% | 9 weekly quizzes across Weeks 1 to 9 in the Semester 2 handbook record |
| Creative coding major project: Concept Presentation | 35% | First project stage in Week 9 |
| Creative coding major project: Final Presentation | 35% | Second project stage in Week 13 |
The numeric rows total 100%. The Semester 2 handbook groups the presentation stages as one practical group assignment worth 70%, while the captured Week 1 slides publish the two equal stage weights. To pass, students must also satisfy the separate 90% attendance threshold; missing it risks failing the unit. Consult the course Canvas page for current instructions.
What other students are asking about IDEA9103
- Where can I find lecture notes or study guides for IDEA9103 at USyd?
- The IDEA9103 study guide in AskSia Library covers Creative Coding in 10 chapters, with the assessment table, a chapter-by-chapter topic map, key terms and a worked example, free to read on this page.
- Is there a final exam in IDEA9103?
- No final exam is listed in the offering this AskSia Library guide is built from; IDEA9103 is assessed by Weekly quizzes 30%, Creative coding major project: Concept Presentation 35%, Creative coding major project: Final Presentation 35%.
- What does IDEA9103 cover on web roles and html structure?
- In AskSia Library's IDEA9103 guide, the Web Roles and HTML Structure chapter explains hTML, CSS, JavaScript and SVG roles, client server flow, nesting and the document tree.
- What does IDEA9103 cover on css selectors and code clarity?
- In AskSia Library's IDEA9103 guide, the CSS Selectors and Code Clarity chapter explains element, class and id reach, camelCase, useful comments and readable design intent.
- What does IDEA9103 cover on svg coordinates and drawing order?
- In AskSia Library's IDEA9103 guide, the SVG Coordinates and Drawing Order chapter explains vector geometry, top left origin, shape attributes, canvas bounds and paint order.
What IDEA9103 covers
Ten chapters connect computational thinking with HTML structure, CSS selectors, SVG geometry, JavaScript state, DOM methods and reusable functions.
Computational Thinking for Creative Work
precise instructions, decomposition, state tracing and observable creative outcomesCreative coding begins by translating a visual intention into operations a computer can execute without shared human assumptions.
- Unambiguous instructions
- Inputs and observable outputs
- Process decomposition
- State tracing
- Prediction before execution
- One change per debug cycle
Web Roles and HTML Structure
HTML, CSS, JavaScript and SVG roles, client server flow, nesting and the document treeHTML, CSS, JavaScript and SVG cooperate by taking different responsibilities. HTML creates structure, CSS controls presentation, JavaScript supplies behaviour and SVG describes vector graphics inside the document.
- Web stack responsibilities
- Client and server flow
- HTML elements and tags
- Parent child nesting
- Relative file paths
- DOM inspection
CSS Selectors and Code Clarity
element, class and id reach, camelCase, useful comments and readable design intentSelectors define the audience for a visual rule. Element selectors are broad, classes group repeated roles and ids identify unique nodes. This chapter connects selector reach with readable names, camelCase and purposeful comments.
- Element Selector Reach
- Reusable Classes
- Unique Ids
- Separate Stylesheets
- CamelCase Naming
- Purposeful Comments
SVG Coordinates and Drawing Order
vector geometry, top left origin, shape attributes, canvas bounds and paint orderSVG describes vector shapes through geometry and style attributes. Its origin sits at the top left, x increases to the right and y increases downward.
- Top left origin
- Circle attributes
- Rectangle extents
- Lines and endpoints
- Vector versus raster
- SVG paint order
JavaScript Execution and Statements
console experiments, linked scripts, parse order, expressions, statements and debuggingJavaScript adds behaviour to the page through evaluated expressions and executed statements. The console supports short experiments and debugging, while a linked script keeps project behaviour maintainable.
- Browser console
- Inline scripts
- Linked JavaScript files
- Parse and load order
- Expressions and statements
- Boundary based debugging
Variables, Constants and Primitive Types
let and const, naming rules, numbers, strings, Boolean values, undefined, null and typeofNamed bindings make creative quantities readable and reusable.
- Declaration and Assignment
- Let and Reassignment
- Const and Stable Bindings
- Variable Naming Rules
- Primitive Value Categories
- Typeof Inspection
Operators, Colour and Template Strings
arithmetic, assignment, increment, RGB channels, hexadecimal notation and formatted valuesOperators evaluate or update values, and their order determines program state. This chapter traces arithmetic, remainder, exponentiation, increment and compound assignment before applying the same discipline to RGB channels and hexadecimal colour notation.
- Arithmetic operators
- Assignment operators
- Prefix and postfix increment
- Remainder and bounds
- RGB channels
- Hex and template strings
DOM Methods for Generative SVG
selecting nodes, setting attributes, creating namespaced elements and appending generated shapesThe DOM connects JavaScript state to visible SVG graphics. This chapter separates selecting and mutating an existing element from creating a new namespaced node.
- GetElementById Selection
- SetAttribute Mutation
- Math Random and Rounding
- CreateElementNS
- AppendChild
- Generated Shape Diagnostics
Objects, Arrays and Property Access
key value records, dot and bracket notation, ordered collections and zero based indexingObjects group related values under descriptive keys, while arrays organise values by zero based position. This chapter models shapes as objects, collections as arrays and nested access as a left to right chain.
- Object literal notation
- Key value pairs
- Dot notation
- Bracket notation
- Zero based arrays
- Length and last index
Functions, Returns and Reusable Libraries
parameters, arguments, return values, nested calls, call trees and utility boundariesFunctions package repeatable work behind named contracts. Parameters describe expected inputs, calls supply arguments and return values carry results back to the caller.
- Function declarations
- Parameters and arguments
- Return values
- Nested function calls
- Call tree tracing
- Reusable utility files
From there, the unit separates the web stack into complementary roles: HTML provides document structure, CSS provides presentation, JavaScript provides behaviour, and SVG provides a vector drawing vocabulary inside the page. The first practical exercises make those relationships visible through parent and child elements, selectors, coordinate attributes and paint order.
The JavaScript material then introduces declarations, assignments, constants, primitive values, arithmetic and assignment operators, comments, methods and functions. Rather than leaving those ideas as isolated syntax, the tutorials apply them to creative systems: select an existing SVG node, change an attribute, generate bounded colour values, create a namespaced rectangle and append it to the document.
The captured Week 3 material expands the model through objects, arrays and reusable functions. Objects group named properties, arrays group ordered values, and functions divide a larger creative task into smaller operations with explicit inputs and outputs. This guide follows that dependency chain and uses original traces, diagrams and practice tasks. It does not invent later-week detail that is absent from the captured files.
The emphasis throughout is explanation: predict the state, compute the geometry, inspect the DOM, follow the call tree and connect the final visual result to the code relationship that produced it. To pass, students must satisfy the separate 90% attendance threshold; missing it risks failing the unit. Consult the course Canvas page for current instructions.
Worked example · free
Trace a generated SVG rectangle from input to page
- 1Compute the right edge as 80 + 130 = 210 and the bottom edge as 45 + 90 = 135.
- 1Compare 210 with width 420 and 135 with height 300, so the rectangle fits.
- 1Form the string rgb(40, 150, 220) from the three valid channels.
- 1Select the SVG parent and create a rect with the SVG namespace.
- 1Set x, y, width, height and fill attributes on the new node.
- 1Append the node to the SVG so it enters the visible document tree.
Key terms
- Algorithm
- An explicit sequence of operations that transforms inputs into an observable result.
- DOM tree
- The browser's hierarchical representation of document elements and their parent child relationships.
- HTML element
- A structural unit in a web document, usually expressed with a tag and optional attributes.
- CSS selector
- A pattern that identifies which document elements receive a style rule.
- SVG canvas
- A vector drawing region whose child elements describe shapes through geometric attributes.
- Paint order
- The rule that later SVG elements are drawn over earlier elements where they overlap.
- Variable
- A named binding used to store and retrieve a value during execution.
- Primitive type
- A basic JavaScript value category such as number, string, Boolean, undefined or null.
- Template literal
- A backtick string that can insert evaluated values through placeholder expressions.
- Object literal
- A JavaScript structure that groups named keys with their values inside braces.
- Array index
- A zero based position used to retrieve an item from an ordered collection.
- Return value
- The output a function sends back to the expression or caller that invoked it.
IDEA9103 FAQ
How is the course assessed, and what attendance pass condition applies?
The Semester 2 record assigns 30% to weekly quizzes and 70% to a creative coding major project. Captured Week 1 slides divide that project into a 35% concept presentation in Week 9 and a 35% final presentation in Week 13. To pass, students must also satisfy the separate 90% attendance threshold; missing it risks failing the unit. Consult the course Canvas page for current instructions.
What programming background does the captured material assume?
The early teaching starts from precise instructions, basic web structure and simple vector shapes before introducing JavaScript values and functions. It is organised as a foundation rather than as an advanced framework course, but steady practice matters because each later technique depends on earlier document and state concepts.
Why does the guide use SVG for examples?
The captured tutorials use SVG because its circles, rectangles and lines expose geometry as readable attributes. Those elements also live in the document tree, so JavaScript can select, create, modify and append them. That makes a visible bridge between code state and a creative output.
How should I debug an invisible generated shape?
Check boundaries in execution order. Confirm the script loaded, the SVG parent selection returned a node, the new element used the SVG namespace, required attributes have valid values, geometry intersects the canvas and appendChild connected the node to the visible tree.
When should I use an object instead of an array?
Use an object when related values need descriptive property names, such as a shape's x, y and fill. Use an array when order and repeated items matter. Arrays begin at index zero, so the final item is located at length minus one.
What makes a function reusable?
A reusable function has explicit inputs, a clear returned output and few hidden dependencies. For example, a function that returns a configured rectangle can work with different SVG parents, while one that appends directly to a particular global canvas is tied to that project.
What should I check before a project submission?
Run the files from a clean start, verify relative paths and script order, inspect the console, trace one complete generated element and test boundary inputs. Then check the current Canvas brief for exact deliverables, group rules, due time, attribution requirements and permitted assistance.
Questions students ask in each IDEA9103 chapter
- Why must creative instructions be explicit?
- A computer does not infer aesthetic intention or missing context. Explicit coordinates, values and operations make the design rule executable and give you evidence for locating the first mismatch when the output differs from your prediction. Chapter 01 · Computational Thinking for Creative Work
- How do HTML, CSS and JavaScript differ?
- HTML identifies and nests the content, CSS applies visual rules to selected elements, and JavaScript evaluates state and changes behaviour. Keeping those roles clear makes the project easier to inspect and revise. Chapter 02 · Web Roles and HTML Structure
- When should I use a class instead of an id?
- Use a class for a reusable role shared by several elements. Use an id for one unique node that styling or JavaScript must address individually, such as a single SVG stage. Chapter 03 · CSS Selectors and Code Clarity
- Why does the SVG y coordinate grow downward?
- SVG follows the browser canvas convention with the origin at the top left. Increasing x moves right, while increasing y moves down, so visual geometry must be computed in that orientation. Chapter 04 · SVG Coordinates and Drawing Order
- Why place a script near the end of the body?
- The browser reads the document in order. Loading behaviour after the relevant HTML makes those nodes available for selection and avoids delaying content that has not yet been parsed. Chapter 05 · JavaScript Execution and Statements
- When should I use let rather than const?
- Use let when the algorithm deliberately reassigns the binding, such as an animation counter or changing position. Use const for stable references and values whose binding should not be replaced. Chapter 06 · Variables, Constants and Primitive Types
- What is the difference between evaluation and assignment?
- Evaluation produces a value. Assignment stores a value in a binding. An arithmetic expression can be correct yet leave program state unchanged when nothing assigns or consumes its result. Chapter 07 · Operators, Colour and Template Strings
- Why does createElementNS matter for SVG?
- The namespace tells the document that rect, circle or another tag belongs to the SVG vocabulary. The configured node can then behave as an SVG element when appended to the canvas. Chapter 08 · DOM Methods for Generative SVG
- Why model a shape as an object?
- A shape has related attributes such as x, y, width and fill. Named properties preserve what each value means and allow code to access one attribute without depending on property order. Chapter 09 · Objects, Arrays and Property Access
- What is the difference between declaring and calling a function?
- A declaration defines the reusable machine, including its parameters and body. A call executes that definition with arguments and may receive the value produced by a return statement. Chapter 10 · Functions, Returns and Reusable Libraries
How to prepare for the assessments
Work in short build and explanation loops. Before running code, predict one value, coordinate, type or parent child relationship. Begin with deterministic inputs so you can compare the browser against a precise claim. Once the fixed case works, introduce randomness, repeated elements or helper functions one boundary at a time.
Keep a trace notebook with the current state after each assignment, the calculated edges of each shape and the return value of each nested function. Use developer tools to inspect the DOM the browser actually built, and use the console to confirm named values rather than printing unlabeled data.
Review topics through contrasts: HTML structure versus CSS presentation versus JavaScript behaviour; id versus class; let versus const; string versus number; object keys versus array indices; function declaration versus call; creation versus append. For the major project, maintain a small utility file only for definitions that genuinely transfer across sketches, and keep project specific calls in the project script.
Before a presentation, rehearse an end to end explanation of one visual element from its input arguments through calculations, node creation, attributes and paint order. Always follow the current Canvas task rules for allowed tools and collaboration.
Your AI Computer Science tutor for IDEA9103
Stuck on a hard IDEA9103 question? Sia is AskSia’s AI Computer Science tutor — ask any IDEA9103 Creative Coding question and get a clear, step-by-step explanation grounded in how the course is actually taught and assessed. Read this whole study guide free, then take your hardest questions to Sia.