About

Icn files (icons) are a fundamental part of originOS and allow for simple vector images that can be used to convey things.

The icn language is simple and intuitive

Use Icn3 In your own projects

You Can easily render icn code in your own projects using the sprite and scripts in the sb3 below https://github.com/Mistium/Origin-OS/blob/main/VersionsSource/Systems/ICN3%20Renderer.sb3

Basics

Drawing Lines

To draw a line, you can choose between drawing a full line or continuing from the last point of the previously drawn element.

You can draw a full line using the command below

line x y x2 y2

This command will draw a single line between two x,y positions

line 10 10 -10 -10

You can also continue the previous line using cont

cont x y

---

line 10 10 -10 -10
line -10 -10 10 -10

would draw the exact same thing as

line 10 10 -10 -10
cont 10 -10

Setting the colour

You can set the colour of all subsequent lines to be drawn using the command c

c #hexcode

You use the command to set the colour of specific parts of the icon

c #555
line 10 10 -10 -10
c #fff
cont 10 -10

This draws two connected lines with a darker colour and a lighter colour

Setting Line Weight

Sets the weight of the lines in subsequent objects to the specified number value.

w int

Example:

w 5

Sets the weight of the subsequent lines to 5.

Drawing Shapes:

Square

Draws an outline of a square at the specified (x, y) position with the given width and height.

square x y width height

Example:

square 10 10 20 20

This command draws a square with the center of the square at (10, 10) and a width and height of 20.

Dot

Draws a single dot at the specified (x, y) position.

dot x y

Example:

dot 15 15

This command draws a dot at position (15, 15).

Cutcircle

Creates a circle at the specified (x, y) position, sets the radius of the circle to "size," rotates the circle to the specified "angle" in degrees, and fills the outline of the circle with "filled" degrees of the line.

cutcircle x y size angle filled

Parameters:

• x: The x-coordinate of the circle's center.
• y: The y-coordinate of the circle's center.
• size: The radius of the circle.
• angle: The rotation angle of the circle (0 to 36).
• filled: The degree of the outline to be filled (0 to 360).

Examples:

cutcircle 0 0 10 0 180

Creates an outline of a full circle with a radius of 10 at position (0, 0).

cutcircle 0 0 10 0 90

Creates an outline of a half circle with a radius of 10 at position (0, 0), facing upwards.

cutcircle 0 0 10 9 90

Creates an outline of a half circle with a radius of 10 at position (0, 0), facing right.

cutcircle 0 0 10 18 90

Creates an outline of a half circle with a radius of 10 at position (0, 0), facing downwards.

cutcircle 0 0 5 4.5 90

Creates a half circle facing north east with a radius of 5.

Ellipsis

To render an ellipsis, use the following command syntax:

ellipse x y width height_multiplier direction

Parameters:

• x: The x-coordinate of the ellipse's center.
• y: The y-coordinate of the ellipse's center.
• width: The width in pixels of the ellipse
• height_multiplier: The number that the width is multiplied by to get the height
• direction: The direction that the ellipse is rotated

Dynamic Icons

Dynamic icons are powerful ways to make simple displays or just more dynamic interfaces for users to interact with.

First off, you need to make the first token of the icn file "@dynamic" to tell the icn renderer that the icon its about to render should be compiled through the dynamic icn system.

Conditional rendering

The first and arguably most important feature of icn3 is conditionals.

value ( tokens )

Value must be true for the tokens inside the statement to run

Operation List

val == val
// double equals does a simple comparison for values

val ! val
// this is the equivalent of != in a lot of languages

val < val
// does a less than operation

val > val
// does a greater than operation

val + val
// does an addition

val - val
// does a subtraction

val / val
// does a division

val * val
// does a multiplication

val % val
// does a modulo calculation

val ^ val
// does val to the power of val

Understanding order of evaluation

Evaluation in icn is done from left to right, same as osl.

10 + 10 < 20 - 20

This will compile to -20. Lets understand why

1:
10 + 10 < 20 - 20

2:
20 < 20 - 20

3:
false - 20

4:
-20

All evaluation is run from left to right.

Using functions

Functions in icn are simple and built in, they can affect two inputs or one input

val sin
// finds the sin of a value using degrees

val cos
// finds the cos of a value using degrees

val tan
// finds the tan of a value using degrees

val sqrt
// computes the square root of a value

val abs
// if a value is negative it will convert it to positive, otherwise do nothing

val floor
// rounds the number down

val ceil
// rounds the number up

val round
// rounds the value to the nearest whole number

val log
// Math.log(val)

val exp
// Math.exp(val)

Use variables

Icn cannot set variables, but it can use the variables of the environment it is running in if the developer has set them up correctly

Get the data of a variable using the syntax:

$varname

Example clock icon

This runs in originOS and shows a simple clock with seconds, minutes and hours

@dynamic
c #fff
w 20
dot 0 0

w 2 c #000
line 0 0 $minute * 6 sin * 6 $minute * 6 cos * 6
line 0 0 $hour * 4 sin * 4 $hour * 4 cos * 4

w 1.5 c #555
line 0 0 $second * 6 sin * 8 $second * 6 cos * 8