Examples
These short examples introduce a breadth of techniques, concepts and tricks that will get you primed for making amazing things with C4.
Shapes
-
Circles & Squares
Create circles, ellipses, squares and rectangles. -
Shape Colors
Set the fill and stroke colors of a shape. -
Polygons
Create lines, triangles and non-uniform polygons. -
Stars & Regular Polygons
Create stars and regular polygons. -
Arcs & Wedges
Create arcs and wedges. -
Curves
Create Bezier and Quad Curves. -
Text Shapes
Create text shapes using fonts and strings. -
Line Width
Change the thickness of a shape's line. -
Line Width 2
Change the thickness of a shape's line. -
Line Join
Change the joint style of a polygon. -
Line Cap
Change the style of open ends of a polygon. -
Line End Points
Change the end points of a Line. -
Interactive Curves
Update curve control points using gestures. -
Fill Rule
Even, Odd? Change how you fill a complex shape. -
Dash Pattern
Set the dash pattern of a shape's stroke. -
Dash Phase 1
Offest a Line's dash pattern. -
Dash Phase 2
Offest a closed shape's dash pattern. -
Dash Phase 3
Fancy patterns, oh my. -
Stroke Start & End
Set the stroke start and end. -
Stroke Start & End (Animated)
Animate the stroke start and end. -
Gradient Fill
Fill your shapes with gradients. -
Rounded Corners
Create text shapes using fonts and strings. -
Path
Change the shape of a shape.
Views
-
Positioning Views
Set the center and origin points to position your views. -
Opacity
Set the opacity of a view. -
Border
Reveal and style the border of a view. -
Background Color
Set the background color of any visible object. -
Layering
You can swap the layer position of any two views. -
Subviews
Add any view to any other view. -
Interactive Subviews
Tap to remove a subview, and watch it come back. -
Mask to Bounds
Clip visible contents if they fall outside a view's frame. -
Masking
Mask a view with any other view. -
Animated Masking
Animate a view's mask... So lovely. -
Animated Subview Masking
Add a subview to an animated mask... Even more lovely. -
Anchor Point
Change the relative center position of a view. -
Rotation
Rotate a view more than 180°. -
Rotate
Rotate a view. -
Translate
Translate a view. -
Scale
Scale a view. -
Multiple Transforms
Transform while you transform. -
Shadows
All views have a shadow. -
Shadow Path
Change the path / outline of a view's shadow.
Math
-
abs()
How to apply the abs() function. -
acos()
How to apply the acos() function. -
asin()
How to apply the asin() function. -
atan()
How to apply the atan() function. -
atan2()
How to apply the atan2() function. -
ceil()
How to apply the ceil() function. -
clamp()
How to apply the clamp() function. -
cos()
How to apply the cos() function. -
floor()
How to apply the floor() function. -
map()
How to apply the map() function. -
max()
How to apply the max() function. -
min()
How to apply the min() function. -
round()
How to apply the round() function. -
sin()
How to apply the sin() function. -
tan()
How to apply the tan() function.
Color
-
Color Basics
Intro to creating colors. -
C4 Colors
How to use the four colors of the C4 brand. -
Preset Colors
How to use fifteen preset colors. -
RGB
Create RGB colors. -
HSB
Create RGB colors. -
HEX
Create HEX colors. -
Color Components
Extract the values of a color. -
Pattern Colors
Create colors from pattern images.
Images
-
Creating Images
Create an image. -
Stretching Images
Set the width, height or frame of an image. -
Image Contents
Change the entire contents of an image. -
Pixels
Create an image using Pixel data.
Filters
-
Bloom
Apply a bloom filter to an image. -
Checkerboard
Generate a checkerboard image. -
Color Burn
Apply a color burn filter to an image. -
Dot Screen
Apply a dot screen filter to an image. -
Gaussian Blur
Apply a gaussian blur filter to an image. -
Hue
Apply a hue filter to an image. -
Linear Gradient
Generate a linear gradient image. -
Sepia
Apply a sepia filter to an image. -
Sharpen
Apply a sharpen filter to an image. -
Twirl
Apply a twirl filter to an image.
Movies
-
Creating Movies
Create, play and pause a movie. -
Stretching Movies
Set the width, height or frame of a movie. -
movieEnded
Do stuff automatically when a movie reaches its end point. -
Gradient Mask
Apply a Gradient mask to a movie.
Audio
Gradients
-
Gradients
Create gradients. -
Gradient Points
Change the start and end points of a gradient. -
Colors & Locations
Change the colors of a gradient and locations where they draw. -
Animating a Gradient
You can animate all the properties of a gradient.
Fonts
-
Default Fonts
Create a font, and change its size. -
System Fonts
Here's how you can use iOS system fonts. -
Properties
Check out all properties available to a specific font. -
Family Names
Print out all font family names available on the latest iOS. -
All Fonts
Add all the fonts to a scrollview.
Interaction
-
Random Color Tap
Use a tap to randomly change the color of objects. -
Notifications
Use notifications to communicate between objects. -
Pan + Line End Points
Remove, add and update a line's endPoint while panning. -
Pan + Rotate a Shape
Update a shape's rotation property while panning. -
Pan + Velocity
Use a pan's velocity to change a shape's lineWidth. -
Multitouch Pan
Deform a shape through a multitouch pan gesture. -
State Switching
Use a long press gesture's state to update a shape's color. -
Multiple Swipe Gestures
Add multiple gestures to a single object.