Twoville: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 69: Line 69:
  radius = [r]
  radius = [r]


==== path ===
==== path ====
  path ()
  path ()


Line 92: Line 92:


  vertex().position = [x,y]
  vertex().position = [x,y]


=== Animation ===
=== Animation ===

Revision as of 18:19, 24 January 2020

Draft

Introduction

“Twoville is a programming language for generating two-dimensional SVG images that can be fed into vinyl or laser cutters. It also supports animation at the syntactic level.” (teaching machines, retrieved Jan 2019.

Twoville is under development (as of Jan 2020), but it can be used.

There exist few other alternatives, e.g. the no longer supported TurtleBlocks.

The language

Unlike the similar Madeup environment for 3D printing, created by the same author, this environment is as of Jan 2020 less well documented and does not include a block version.

The syntax looks a mix of Logo and JavaScript.

Example fragments:

Defining a blue rectangle

width = 150
height = 100
with rectangle ()
  corner = [0,0]
  size = [20, 10]
  color = [0.1, 0.1, 1]

Below, an alternative notation, using property syntax:

width = 150
height = 100
rect = rectangle ()
rect.corner = [0,0]
rect.size = [20, 10]
rect.color = [0.1, 0.1, 1]

Language elements

Like Madeup, Twoville supports conditionals, loops, functions, and arrays.

Primitive objects

common properties:

color = [R, G, B], values = 0..1 or :color
stroke.size
stroke.color
stroke.rgb
opacity = 0..1
rotate.pivot = [x,y]
rotate.degrees = deg

rectangle

rectangle ()

properties:

corner = [x,y]
center = [x,y]
size = [width, length]
rounding = x 


circle

circle ()

Properties

center
radius = [r]

path

path ()

properties

stroke.color = :blue
stoke.size = n.m
opacity = true or false
closed = true or false

arc

arc ()

Arcs are line segments of a circle. Must be used with path.

properties:

position = [x,y] defines what ??
degrees = db, defines the length of the arc

line

line ()
vertex().position = [x,y]

Animation

15 -> t means "time after 15 seconds"
t -> 30 means "time as it approaches 40 seconds"

Links

  • Introducing Twoville, February 24, 2018 by Chris Johnson. This piece explains some early animation features