ipycc.sketch

class Sketch:

A class to describe a 2D drawing canvas.

Sketch(width: int = 100, height: int = 100, pixel_denstiy: int = 2)

HALF_PI: float = 1.5707963267948966

A number constant that's approximately 1.5708.

PI: float = 3.141592653589793

A number constant that's approximately 3.1416.

QUARTER_PI: float = 0.7853981633974483

A number constant that's approximately 0.7854.

TAU: float = 6.283185307179586

A number constant that's approximately 6.2382.

TWO_PI: float = 6.283185307179586

A number constant that's approximately 6.2382.

NORMAL: str = 'normal'

A string constant used with the text_style() method.

ITALIC: str = 'italic'

A string constant used with the text_style() method.

BOLD: str = 'bold'

A string constant used with the text_style() method.

BOLDITALIC: str = 'bolditalic'

A string constant used with the text_style() method.

LEFT: str = 'left'

A string constant used with the text_align() method.

CENTER: str = 'center'

A string constant used with the text_align() method.

RIGHT: str = 'right'

A string constant used with the text_align() method.

BOTTOM: str = 'bottom'

A string constant used with the text_align() method.

TOP: str = 'top'

A string constant used with the text_align() method.

BASELINE: str = 'alphabetic'

A string constant used with the text_align() method.

MIDDLE: str = 'middle'

A string constant used with the text_align() method.

width: int

The width of the canvas in pixels.

height: int

The height of the canvas in pixels.

pixel_density: int

The number of physical pixels used to draw a pixel on the canvas.

canvas: ipycanvas.canvas.Canvas

The Canvas widget used for drawing.

frame_count: int

The number of frames drawn since the sketch started.

def background(self, *args):

Sets the color used for the background of the canvas.

The version of background() with one parameter interprets the value one of four ways. If the parameter is an int or float, it's interpreted as a grayscale value. If the parameter is a string, it's interpreted as a CSS color string. RGB, RGBA, HSL, HSLA, hex, and named color strings are supported.

The version of background() with two parameters interprets the first one as a grayscale value. The second parameter sets the alpha (transparency) value.

The version of background() with three parameters interprets them as RGB. Calling background(255, 204, 0) sets the background a bright yellow color.

The version of background() with four parameters interprets them as RGBA. Calling background(255, 204, 0, 20) sets the background a bright yellow color that is transparent.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

# A grayscale value.
s.background(51)

# A grayscale value and an alpha value.
s.background(51, 0.4)

# R, G & B values.
s.background(255, 204, 0)

# A CSS named color.
s.background("red")

# Integer RGBA notation.
s.background("rgba(0, 255, 0, 0.25)")

# R, G, B & A values.
s.background(0, 255, 0, 64)

def fill(self, *args):

Sets the color used to fill shapes.

Calling fill(255, 165, 0) or fill("orange") means all shapes drawn after calling fill() will be filled with the color orange.

The version of fill() with one parameter interprets the value one of three ways. If the parameter is an int or float, it's interpreted as a grayscale value. If the parameter is a string, it's interpreted as a CSS color string. RGB, RGBA, HSL, HSLA, hex, and named color strings are supported.

The version of fill() with two parameters interprets the first one as a grayscale value. The second parameter sets the alpha (transparency) value.

The version of fill() with three parameters interprets them as RGB colors.

The version of fill() with four parameters interprets them as RGBA colors. The last parameter sets the alpha (transparency) value.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

# A grayscale value.
s.background(200)
s.no_stroke()
s.fill(51)
s.square(20, 20, 60)

# Grayscale and alpha values.
s.background(200)
s.no_stroke()
s.fill(51, 64)
s.square(20, 20, 60)

# R, G & B values.
s.background(200)
s.no_stroke()
s.fill(255, 204, 0)
s.square(20, 20, 60)

# A CSS named color.
s.background(200)
s.no_stroke()
s.fill("red")
s.square(20, 20, 60)

# Integer RGBA notation.
s.background(200)
s.no_stroke()
s.fill("rgba(0, 255, 0, 0.25)")
s.square(20, 20, 60)

# R, G, B & A values.
s.background(200)
s.no_stroke()
s.fill(0, 255, 0, 64)
s.square(20, 20, 60)

def no_fill(self):

Disables setting the fill color for shapes.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.no_stroke()
s.square(20, 20, 60)

def no_stroke(self):

Disables drawing points, lines, and the outlines of shapes.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.no_stroke()
s.square(20, 20, 60)

def stroke(self, *args):

Sets the color used to draw points, lines, and the outlines of shapes.

Calling stroke(255, 165, 0) or stroke("orange") means all shapes drawn after calling stroke() will be outlined with the color orange.

The version of stroke() with one parameter interprets the value one of three ways. If the parameter is a number, it's interpreted as a grayscale value. If the parameter is a string, it's interpreted as a CSS color string. RGB, RGBA, HSL, HSLA, hex, and named color strings are supported.

The version of stroke() with two parameters interprets the first one as a grayscale value. The second parameter sets the alpha (transparency) value.

The version of stroke() with three parameters interprets them as RGB colors.

The version of stroke() with four parameters interprets them as RGBA colors. The last parameter sets the alpha (transparency) value.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

# A grayscale value.
s.background(200)
s.stroke_weight(4)
s.stroke(51)
s.square(20, 20, 60)

# Grayscale and alpha values.
s.background(200)
s.stroke(51, 64)
s.square(20, 20, 60)

# R, G & B values.
s.background(200)
s.stroke(255, 204, 0)
s.square(20, 20, 60)

# A CSS named color.
s.background(200)
s.stroke("red")
s.square(20, 20, 60)

# Integer RGBA notation.
s.background(200)
s.stroke("rgba(0, 255, 0, 0.25)")
s.square(20, 20, 60)

# R, G, B & A values.
s.background(200)
s.stroke(0, 255, 0, 64)
s.square(20, 20, 60)

def clear(self):

Clears all drawings on the canvas.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.clear()

def reset(self):

Resets the canvas to its default state.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.reset()

def arc( self, x: int | float, y: int | float, w: int | float, h: int | float, start: int | float, stop: int | float):

Draws an arc.

An arc is a section of an ellipse defined by the x, y, w, and h parameters. x and y set the location of the arc's center. w and h set the arc's width and height.

The fifth and sixth parameters, start and stop, set the angles between which to draw the arc. Arcs are always drawn clockwise from start to stop.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Bottom-right.
s.arc(50, 55, 50, 50, 0, s.HALF_PI)

s.no_fill()

# Bottom-left.
s.arc(50, 55, 60, 60, s.HALF_PI, s.PI)

# Top-left.
s.arc(50, 55, 70, 70, s.PI, s.PI + s.QUARTER_PI)

# Top-right.
s.arc(50, 55, 80, 80, s.PI + s.QUARTER_PI, s.TWO_PI)

def ellipse(self, x: int | float, y: int | float, w: int | float, h: int | float):

Draws an ellipse (oval).

An ellipse is a round shape defined by the x, y, w, and h parameters. x and y set the location of its center. w and h set its width and height.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# A circle.
s.ellipse(20, 20, 40, 40)

# An oval.
s.ellipse(80, 80, 40, 20)

def circle(self, x: int | float, y: int | float, d: int | float):

Draws a circle.

A circle is a round shape defined by the x, y, and d parameters. x and y set the location of its center. d sets its width and height (diameter). Every point on the circle's edge is the same distance, 0.5 * d, from its center. 0.5 * d (half the diameter) is the circle's radius.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.circle(50, 50, 25)

def line( self, x1: int | float, y1: int | float, x2: int | float, y2: int | float):

Draws a straight line between two points.

A line's default width is one pixel. The first two parameters set the starting coordinates of the line. The next two parameters set the ending coordinates of the line. To color a line, use the stroke() method. To change its width, use the stroke_weight() method.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.line(30, 20, 85, 75)

# Style the line.
s.background(200)
s.stroke("magenta")
s.stroke_weight(5)
s.line(30, 20, 85, 75)

def point(self, x: int | float, y: int | float):

Draws a single point in space.

A point's default width is one pixel. To color a point, use the stroke() method. To change its width, use the stroke_weight() method. A point can't be filled, so the fill() method won't affect the point's color.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Top-left.
s.point(30, 20)

# Top-right. 
s.point(85, 20)

# Style the next points.
s.stroke("purple")
s.stroke_weight(10)

# Bottom-right.
s.point(85, 75)

# Bottom-left.
s.point(30, 75)

def quad( self, x1: int | float, y1: int | float, x2: int | float, y2: int | float, x3: int | float, y3: int | float, x4: int | float, y4: int | float):

Draws a quadrilateral (four-sided shape).

Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The first pair of parameters (x1, y1) sets the quad's first point. The next three pairs of parameters set the coordinates for its next three points (x2, y2), (x3, y3), and (x4, y4). Points should be added in either clockwise or counter-clockwise order.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.quad(50, 62, 86, 50, 50, 38, 14, 50)

def rect(self, x: int | float, y: int | float, w: int | float, h: int | float):

Draws a rectangle.

A rectangle is a four-sided shape defined by the x, y, w, and h parameters. x and y set the location of its top-left corner. w sets its width and h sets its height. Every angle in the rectangle measures 90˚.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.rect(30, 20, 55, 40)

def square(self, x: int | float, y: int | float, s: int | float):

Draws a square.

A square is a four-sided shape defined by the x, y, and s parameters. x and y set the location of its top-left corner. s sets its width and height. Every angle in the square measures 90˚ and all its sides are the same length.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.square(30, 20, 55)

def triangle( self, x1: int | float, y1: int | float, x2: int | float, y2: int | float, x3: int | float, y3: int | float):

Draws a triangle.

A triangle is a three-sided shape defined by three points. The first two parameters specify the triangle's first point (x1, y1). The middle two parameters specify its second point (x2, y2). And the last two parameters specify its third point (x3, y3).

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.triangle(30, 75, 58, 20, 86, 75)

def stroke_weight(self, weight: int | float):

Sets the width of the stroke used for points, lines, and the outlines of shapes.

Note: stroke_weight() is affected by transformations, especially calls to scale().

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Top.
s.line(20, 20, 80, 20)

# Middle.
s.stroke_weight(4)
s.line(20, 40, 80, 40)

# Bottom.
s.stroke_weight(10)
s.line(20, 70, 80, 70)

def bezier( self, x1: int | float, y1: int | float, x2: int | float, y2: int | float, x3: int | float, y3: int | float, x4: int | float, y4: int | float):

Draws a Bézier curve.

Bézier curves can form shapes and curves that slope gently. They're defined by two anchor points and two control points.

The first two parameters, x1 and y1, set the first anchor point. The first anchor point is where the curve starts.

The next four parameters, x2, y2, x3, and y3, set the two control points. The control points "pull" the curve towards them.

The seventh and eighth parameters, x4 and y4, set the last anchor point. The last anchor point is where the curve ends.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Draw the anchor points in black.
s.stroke(0)
s.stroke_weight(5)
s.point(85, 20)
s.point(15, 80)

# Draw the control points in red.
s.stroke(255, 0, 0)
s.point(10, 10)
s.point(90, 90)

# Draw a black bezier curve.
s.no_fill()
s.stroke(0)
s.stroke_weight(1)
s.bezier(85, 20, 10, 10, 90, 90, 15, 80)

# Draw red lines from the anchor points to the control points.
s.stroke(255, 0, 0)
s.line(85, 20, 10, 10)
s.line(15, 80, 90, 90)

def bezier_point( self, a: int | float, b: int | float, c: int | float, d: int | float, t: int | float) -> float:

Calculates coordinates along a Bézier curve using interpolation.

bezier_point() calculates coordinates along a Bézier curve using the anchor and control points. It expects points in the same order as the bezier() method. bezier_point() works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the curve. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the curve.

The first parameter, a, is the coordinate of the first anchor point.

The second and third parameters, b and c, are the coordinates of the control points.

The fourth parameter, d, is the coordinate of the last anchor point.

The fifth parameter, t, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Set the coordinates for the curve's anchor and control points.
x1 = 85
x2 = 10
x3 = 90
x4 = 15
y1 = 20
y2 = 10
y3 = 90
y4 = 80

# Style the curve.
s.no_fill()

# Draw the curve.
s.bezier(x1, y1, x2, y2, x3, y3, x4, y4)

# Draw circles along the curve's path.
s.fill(255)

# Top-right.
x = s.bezier_point(x1, x2, x3, x4, 0)
y = s.bezier_point(y1, y2, y3, y4, 0)
s.circle(x, y, 5)

x = s.bezier_point(x1, x2, x3, x4, 0.5)
y = s.bezier_point(y1, y2, y3, y4, 0.5)
s.circle(x, y, 5) # center circle
x = s.bezier_point(x1, x2, x3, x4, 1)
y = s.bezier_point(y1, y2, y3, y4, 1)
s.circle(x, y, 5) # bottom-left circle

def bezier_tangent( self, a: int | float, b: int | float, c: int | float, d: int | float, t: int | float) -> float:

Calculates coordinates along a line that's tangent to a Bézier curve.

Tangent lines skim the surface of a curve. A tangent line's slope equals the curve's slope at the point where it intersects.

bezier_tangent() calculates coordinates along a tangent line using the Bézier curve's anchor and control points. It expects points in the same order as the bezier() method. bezier_tangent() works one axis at a time. Passing the anchor and control points' x-coordinates will calculate the x-coordinate of a point on the tangent line. Passing the anchor and control points' y-coordinates will calculate the y-coordinate of a point on the tangent line.

The first parameter, a, is the coordinate of the first anchor point.

The second and third parameters, b and c, are the coordinates of the control points.

The fourth parameter, d, is the coordinate of the last anchor point.

The fifth parameter, t, is the amount to interpolate along the curve. 0 is the first anchor point, 1 is the second anchor point, and 0.5 is halfway between them.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Set the coordinates for the curve's anchor and control points.
x1 = 85
x2 = 10
x3 = 90
x4 = 15
y1 = 20
y2 = 10
y3 = 90
y4 = 80

# Style the curve.
s.no_fill()

# Draw the curve.
s.bezier(x1, y1, x2, y2, x3, y3, x4, y4)

# Draw tangents along the curve's path.
s.fill(255)

# Top-right circle.
s.stroke(0)
x = s.bezier_point(x1, x2, x3, x4, 0)
y = s.bezier_point(y1, y2, y3, y4, 0)
s.circle(x, y, 5)

# Top-right tangent line.
# Scale the tangent point to draw a shorter line.
s.stroke(255, 0, 0) 
tx = 0.1 * s.bezier_tangent(x1, x2, x3, x4, 0)
ty = 0.1 * s.bezier_tangent(y1, y2, y3, y4, 0)
s.line(x + tx, y + ty, x - tx, y - ty)

# Center circle.
s.stroke(0)
x = s.bezier_point(x1, x2, x3, x4, 0.5)
y = s.bezier_point(y1, y2, y3, y4, 0.5)
s.circle(x, y, 5)

# Center tangent line.
# Scale the tangent point to draw a shorter line.
stroke(255, 0, 0)
tx = 0.1 * s.bezier_tangent(x1, x2, x3, x4, 0.5)
ty = 0.1 * s.bezier_tangent(y1, y2, y3, y4, 0.5)
s.line(x + tx, y + ty, x - tx, y - ty)

# Bottom-left circle.
stroke(0)
x = s.bezier_point(x1, x2, x3, x4, 1)
y = s.bezier_point(y1, y2, y3, y4, 1)
s.circle(x, y, 5)

# Bottom-left tangent.
# Scale the tangent point to draw a shorter line.
s.stroke(255, 0, 0)
tx = 0.1 * s.bezier_tangent(x1, x2, x3, x4, 1)
ty = 0.1 * s.bezier_tangent(y1, y2, y3, y4, 1)
s.line(x + tx, y + ty, x - tx, y - ty)

def begin_shape(self):

Begins adding vertices to a custom shape.

The begin_shape() and end_shape() methods allow for creating custom shapes. begin_shape() begins adding vertices to a custom shape and end_shape() stops adding them. After calling begin_shape(), shapes can be built by calling vertex().

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.begin_shape() # begin drawing
s.vertex(30, 20)
s.vertex(85, 20)
s.vertex(85, 75)
s.vertex(30, 75)
s.end_shape() # end drawing

def end_shape(self):

Stops adding vertices to a custom shape.

The begin_shape() and end_shape() methods allow for creating custom shapes. begin_shape() begins adding vertices to a custom shape and end_shape() stops adding them. After calling begin_shape(), shapes can be built by calling vertex().

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.begin_shape() # begin drawing
s.vertex(30, 20)
s.vertex(85, 20)
s.vertex(85, 75)
s.vertex(30, 75)
s.end_shape() # end drawing

def vertex(self, x: int | float, y: int | float):

Adds a vertex to a custom shape.

vertex() sets the coordinates of vertices drawn between the begin_shape() and end_shape() methods.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.begin_shape() # begin drawing
s.vertex(30, 20)
s.vertex(85, 20)
s.vertex(85, 75)
s.vertex(30, 75)
s.end_shape() # end drawing

def show(self):

Display the sketch beneath the current code cell.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.show()

def apply_matrix( self, a: int | float, b: int | float, c: int | float, d: int | float, e: int | float, f: int | float):

Applies a transformation matrix to the coordinate system.

Transformations such as translate(), rotate(), and scale() use matrix-vector multiplication behind the scenes. A table of numbers, called a matrix, encodes each transformation. The values in the matrix then multiply each point on the canvas, which is represented by a vector.

apply_matrix() allows for many transformations to be applied at once. See MDN for more details about transformations.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Translate the origin to the center.
s.apply_matrix(1, 0, 0, 1, 50, 50)

# Draw the circle at coordinates (0, 0).
s.circle(0, 0, 40)

def reset_matrix(self):

Clears all transformations applied to the coordinate system.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Translate the origin to the center.
s.translate(50, 50)

# Draw a blue circle at the coordinates (25, 25).
s.fill("blue")
s.circle(25, 25, 20)

# Clear all transformations.
# The origin is now at the top-left corner.
s.reset_matrix()

# Draw a red circle at the coordinates (25, 25).
s.fill("red")
s.circle(25, 25, 20)

def rotate(self, angle: int | float):

Rotates the coordinate system.

By default, the positive x-axis points to the right and the positive y-axis points downward. The rotate() method changes this orientation by rotating the coordinate system about the origin. Everything drawn after rotate() is called will appear to be rotated. Angles are measured in radians.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Rotate the coordinate system 1/8 turn.
s.rotate(s.QUARTER_PI)

# Draw a rectangle at coordinates (50, 0).
s.rect(50, 0, 40, 20)

def scale(self, x: int | float, y: int | float = None):

Scales the coordinate system.

By default, shapes are drawn at their original scale. A rectangle that's 50 pixels wide appears to take up half the width of a 100 pixel-wide canvas. The scale() method can shrink or stretch the coordinate system so that shapes appear at different sizes.

The first parameter, s, sets the amount to scale each axis. For example, calling scale(2) stretches the x- and y-axes by a factor of 2. The next parameter, y, is optional. It sets the amount to scale the y-axis. For example, calling scale(2, 0.5) stretches the x-axis by a factor of 2 and shrinks the y-axis by a factor of 0.5.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Draw a square at (30, 20).
s.square(30, 20, 40)

# Scale the coordinate system by a factor of 0.5.
s.scale(0.5)

# Draw a square at (30, 20).
# It appears at (15, 10) after scaling.
s.square(30, 20, 40)
s.background(200)
s.reset_matrix()

# Draw a square at (30, 20).
s.square(30, 20, 40)

# Scale the coordinate system by factors of
# 0.5 along the x-axis and
# 1.3 along the y-axis.
s.scale(0.5, 1.3)

# Draw a square at (30, 20).
# It appears as a rectangle at (15, 26) after scaling.
s.square(30, 20, 40)

def shear_x(self, angle: int | float):

Shears the x-axis so that shapes appear skewed.

By default, the x- and y-axes are perpendicular. The shear_x() method transforms the coordinate system so that x-coordinates are translated while y-coordinates are fixed.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Shear the coordinate system along the x-axis.
s.shear_x(s.QUARTER_PI)

# Draw the square.
s.square(0, 0, 50)

def shear_y(self, angle: int | float):

Shears the y-axis so that shapes appear skewed.

By default, the x- and y-axes are perpendicular. The shear_y() method transforms the coordinate system so that y-coordinates are translated while x-coordinates are fixed.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Shear the coordinate system along the y-axis.
s.shear_y(s.QUARTER_PI)

# Draw the square.
s.square(0, 0, 50)

def translate(self, x: int | float, y: int | float):

Translates the coordinate system.

By default, the origin (0, 0) is at the sketch's top-left corner. The translate() method shifts the origin to a different position. Everything drawn after translate() is called will appear to be shifted.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Translate the origin to the center.
s.translate(50, 50)

# Draw a circle at coordinates (0, 0).
s.circle(0, 0, 40)

def image( self, img: Self, x: int | float, y: int | float, width: int | float = None, height: int | float = None):

Draws an image to the canvas.

The first parameter, img, is the source image to be drawn. img can be another Sketch instance.

The second and third parameters, x and y, set the coordinates of the destination image's top left corner.

The fourth and fifth parameters, width and height, are optional. They set the the width and height to draw the destination image. By default, image() draws the full source image at its original size.

Example

from ipycc.sketch import Sketch

# Create the Sketches.
s1 = Sketch()
s2 = Sketch()

# Draw to s1.
s1.background(200)
s1.circle(50, 50, 20)

# Draw s1 on s2 at full size.
s2.image(s1, 0, 0)

# Draw s1 on s2 at half size.
s2.image(s1, 0, 0, 50, 50)

# Show s2.
s2.show()

def text(self, text: str, x: int | float, y: int | float):

Draws text to the canvas.

The first parameter, text, is the text to be drawn. The second and third parameters, x and y, set the coordinates of the text's bottom-left corner. See text_align() for other ways to align text.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

# Plain text.
s.background(200)
s.text("hi", 50, 50)

# Emoji.
s.background("skyblue")
s.text_size(100)
s.text("🌈", 0, 100)

# No fill.
s.background(200)
s.text_size(32)
s.fill(255)
s.stroke(0)
s.stroke_weight(4)
s.text("hi", 50, 50)

# Multicolor text.
s.background("black")
s.text_size(22)
s.fill("yellow")
s.text("rainbows", 6, 20)
s.fill("cornflowerblue")
s.text("rainbows", 6, 45)
s.fill("tomato")
s.text("rainbows", 6, 70)
s.fill("limegreen")
s.text("rainbows", 6, 95)

def text_font(self, font: str):

Sets the font used by the text() method.

The font should be a string with the name of a system font such as "Courier New".

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)
s.text_font("Courier New")
s.text_size(24)
s.text("hi", 35, 55)

def text_size(self, size: int | float):

Sets the font size when text() is called.

Note: Font size is measured in pixels.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Top row.
s.text_size(12)
s.text("Font Size 12", 10, 30)

# Middle row.
s.text_size(14)
s.text("Font Size 14", 10, 60)

# Bottom row.
s.text_size(16)
s.text("Font Size 16", 10, 90)

def text_align(self, horizontal: str, vertical: str = None):

Sets the way text is aligned when text() is called.

By default, calling text("hi", 10, 20) places the bottom-left corner of the text's bounding box at (10, 20).

The first parameter, horizontal, changes the way text() interprets x-coordinates. By default, the x-coordinate sets the left edge of the bounding box. text_align() accepts the following values for horizontal: LEFT, CENTER, or RIGHT.

The second parameter, vertical, is optional. It changes the way text() interprets y-coordinates. By default, the y-coordinate sets the bottom edge of the bounding box. text_align() accepts the following values for vertical: TOP, BOTTOM, CENTER, or BASELINE.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# Draw a vertical line.
s.stroke_weight(0.5)
s.line(50, 0, 50, 100)

# Top row.
s.text_size(16)
s.text_align(s.RIGHT)
s.text("ABCD", 50, 30)

# Middle row.
s.text_align(s.CENTER)
s.text("EFGH", 50, 50)

# Bottom row.
s.text_align(s.LEFT)
s.text("IJKL", 50, 70)

def text_style(self, style: str):

Sets the style for system fonts when text() is called.

The parameter, style, can be either NORMAL, ITALIC, BOLD, or BOLDITALIC.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

s.background(200)

# First row.
s.text_size(12)
s.text_style(s.NORMAL)
s.text("Normal", 20, 15)

# Second row.
s.text_style(s.ITALIC)
s.text("Italic", 20, 40)

# Third row.
s.text_style(s.BOLD)
s.text("Bold", 20, 65)

# Fourth row.
s.text_style(s.BOLDITALIC)
s.text("Bold Italic", 20, 90)

def run_sketch(self, draw: Callable, seconds: int | float, delay: float = 20):

Draws frames in an animation by calling a function repeatedly.

run_sketch() repeatedly calls a function that contains drawing commands. The rate at which each frame is drawn depends on many factors. run_sketch() doesn't attempt to maintain a constant framerate.

The first parameter, draw, is a function containing the commands for drawing each frame.

The second parameter, seconds, sets the number of seconds the animation should run.

The third parameter, delay, is optional. It sets the number of milliseconds the sketch should pause after drawing the current frame. The default value is 20. If draw contains many drawing commands, each frame may take much longer than delay milliseconds to render.

Example

from ipycc.sketch import Sketch

s = Sketch()
s.show()

def draw():
    # Paint the background.
    s.background(200)

    # Calculate the circle's x-coordinate.
    x = s.frame_count

    # Draw the circle.
    s.circle(x, 50, 20)

# Run the animation for 5 seconds.
s.run_sketch(draw, 5)