Programming Design Systems

Optical Illusions

For my final project, I decided to explore the topic of Op art and an optical illusion. I wanted to find out, if we can achieve similar effect, by coding art that is moving, and by coding art that is a still image, but gives the viewer the impression of movement.

Typically, Op artists used only black and white in order to produce the greatest contrast in their designs, since this contrast causes the greatest confusion for the eye, which struggles to discern which element of the composition is in the foreground and which in the background.

riu-kiu-c

But color was also a focus of attention at times, as in Vasarely’s Plastic Alphabet series (1960-1980). The ways in which color suggests space, and the ways colors contrast with one another, proved fertile areas for experiment.

Vasarely-Gestalt-4 vasarley_89044_3

Feeling inspired, I decided to code my own op-arts.

I divided them to 3 groups:

  • animated ones:


wavespiralblack spiral shock palindrome gif2 gif circles2 gif33

rainbow3wavy

LINK TO GIFS

  • static ones:

dots_linescircles_b_w

triangle spiral_snail

  • colorful

 

rainbooowrainbow3reddy

rainbow2

spiralrainbow

 

Book Cover vol.2

‘For next week you’ll design a cover for a book of your choice. You can use form, color and typography, but not images. The main constraint is that you need to use a grid system to place elements on the page.’

I’ve picked a book about Beata Pawlikowska’s travel to Amazon Jungle. Decided to create colorful geometrical pattern, which reminds me of colors which amazon tribes use to paint their bodies.

Here’s the whole process of my project:

Screen Shot 2016-03-03 at 7.38.23 PMScreen Shot 2016-03-03 at 8.20.50 PMScreen Shot 2016-03-03 at 8.50.02 PMScreen Shot 2016-03-03 at 9.40.24 PMScreen Shot 2016-03-04 at 2.04.23 PM

Screen Shot 2016-03-04 at 2.06.52 PMScreen Shot 2016-03-04 at 6.29.31 AMScreen Shot 2016-03-04 at 8.10.00 AM

And the result:

IMG_8193

IMG_8196

unpublished versions:

lqlq tes

Font design

letters

This week we were supposed to design a font based on word and write the word using this typeface.
I decided to design a font created by multiple random thin lines crossing with each other.

Because I was totally wired in, instead of displaying jus a word, I wrote the whole alphabet.
I have to say that the whole process took me a looooong time, but I was really happy with the result.

I decided to use the ‘Gotham’ font, convert it to poly and randomly connect points of the array. Of course JS wasn’t aware of the letter shape, so the lines between random points created a chaos, not a letter shape:

Screen Shot 2016-02-25 at 7.01.16 PM

Screen Shot 2016-02-25 at 7.09.14 PM Screen Shot 2016-02-25 at 7.12.22 PM

to make it look like a letter, I had to draw a poly converted letter again, draw a rect and using fill path rule display just a rectangular shape, with carved letter inside.  Finally I got the result I was looking for:

Screen Shot 2016-02-25 at 8.40.26 PM

This process was pretty crazy, since I had to do it separately for each letter of the alphabet.

12787299_10204217285912140_1006459235_o

Final Result:

al favie copy aal

and the prints:

IMG_8120.JPG IMG_8121.JPG

Colors with rune.js

For this assignment, we were supposed to play with colors.

I decided to create hexagons, divided to 6 triangles and show different color sets on the drawing.

I struggled with coding the shape I wanted to achieve, cause my aim was to create a honeycomb. I was pretty close though!

Screen Shot 2016-02-21 at 6.55.36 PM

Screen Shot 2016-02-21 at 7.51.26 PM Screen Shot 2016-02-21 at 7.43.57 PM Screen Shot 2016-02-21 at 6.51.28 PM Screen Shot 2016-02-21 at 7.45.16 PM Screen Shot 2016-02-21 at 1.33.39 PM

Then I had another fancy shape ideas:

Screen Shot 2016-02-21 at 1.16.13 PM Screen Shot 2016-02-21 at 12.59.59 PM

Eventually, decided to create a grid filled with 36 hexagons, randomly colorized basing on the function I wrote.

1 3 4

6

Surprisingly, this one looked much better once printed out:

2

The prints came out pretty well too:

IMG_8053.JPG IMG_8056 IMG_8052 IMG_8055

Sharp & Wet

Our 3rd week assignment says:

Write a sketch that generates 2 shapes on a page. The first shape should be your design of the word “wet”. The second shape should be your design of the word “sharp”. Use only black and white. You have to use either Rune.Polygon or Rune.Path objects to draw the two shapes, and please try to do a design that is better done in code than in hand. Print at AMS.

Inspired by my passion to sailing, I decided to depict wet drawing ocean waves, using simple ellipse shapes.

After this step, the idea of sharp fishing hook came up quite naturally.

I had a lot of fun creating waves, changing their sizes, stroke weights or locations.

Here’s the final result:

waves_black waves_white

Next step was to print it out in AMS.

IMG_7797IMG_7798FullSizeRender

I liked the result and am really excited about upcoming prints!

Ice Cream Cone

The first week assignment was to print first generated Rune.js sketch of an ice cream cone.

Also, I’ve learned how to use github.

Assignment:

Using only black (0) and white (255). using triangle(), rect() and ellipse() once each, with no other drawing functions allowed (no beginshape or images), design an ice cream cone. yes, an ice cream cone.

Here’s what i did:

Screen Shot 2016-02-02 at 2.38.21 AM

Screen Shot 2016-02-02 at 3.16.16 AM

link to code