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

Self Portrait

scanHere we go! Finally, I finished my Computational Portraiture assignment!

The task was to ‘create a computational portrait. The portrait had to portray a person, in an environment conveying something about them that is not visible to the eye’.

During our class, James and Alexander showed us zillions of amazing tools, we could use to work on our final projects.

I have to say, I was overwhelmed. After long research, many tests, I finally decided to play with Unity 3D.

My idea was to create a 3D self-portrait, placed in my own Wonderland. I wanted to allow the user to walk around my world, so that he could explore more ‘me’ in great details.

As an introduction, I just want to say that I’m a big Tim Burton Fan. He inspires me a lot, so obviously, my work had to be a little bit related to a piece of his art.

One of my favorite movies of his is Alice in Wonderland. Moreover, my middle name is Alice, so naturally my inner wolds looks pretty similar to what he showed in the film.

I have to admit, it’s a little bit trippy and psychedelic, but I guess that’s what I like the most 🙂

First step was to take a 3D scan. Thanks to the best Moon, I was able to get a 3D model of myself. We used Kinect and the software Skanect. I was pretty surprised with the result! The ‘3D me’ turned out to be pretty accurate.

scan2

Screen Shot 2016-02-14 at 4.16.46 PM

Screen Shot 2016-02-14 at 4.13.27 PM

scanI was playing around with Maya and Blender. Feeling goofy, using Creo Parametric 2 & Keyshot  I created a Oscar Statuette out of my scan 😉

MARCELA

Then, started working on my scenery:

Screen Shot 2016-02-16 at 7.48.52 PM

Screen Shot 2016-02-18 at 12.53.37 PM

Here’s my beloved horse:

horsehorsehorse2

some screenshot from the progress:

Screen Shot 2016-02-27 at 12.07.11 PMScreen Shot 2016-02-27 at 12.07.21 PMScreen Shot 2016-02-27 at 12.07.34 PMScreen Shot 2016-02-27 at 12.07.46 PMScreen Shot 2016-02-27 at 12.08.01 PM

And the first video:

and another one:

Finally, the result:

4screens

Final video :

Now, finally, here’s the link where you can play!

——–>MARCELA IN WONDERLAND < ——

Hope you’ll enjoy! 🙂 Have fun! Looking forward to hear your feedbacks!

Also, I’d like to thank James George and Alexander Porter for an amazing class! I wish it would last longer, so I could experience more tools and continue my Unity adventure! Thanks again and looking forward to have some workshops with you in the nearest future!

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!

Random Walker & Perlin Noise

For our first week assignment, I decided to practice Random Walker and Noise.

Here’s what I came up with :

Noise:

noise

Screen Shot 2016-02-03 at 5.41.56 AM Screen Shot 2016-02-03 at 5.42.00 AM Screen Shot 2016-02-03 at 5.42.05 AM

Later,I tried to experiment with steering walker toward different directions using mouseX and mouseY. Also, to add another feature i set up ‘keyPressed()’ to help centralize random walker in the middle of the screen again.

via GIPHY

Screen Shot 2016-02-03 at 5.20.28 AMScreen Shot 2016-02-03 at 5.20.49 AM At the end, I decided to show ‘fear’ using noise:

bee

 

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

A Time Lapse screencast tool

For my Design Tool Studio project, I paired up with Eve Weinberg .

We will be making a screen recorder that makes timelapse videos and then emails you a copy that is instagram-ready, so you can open the email on your phone and share.

Each of us did some research on existing apps, similar to one we want to work on.

Existing AppprosconsTime Lapse
JingNice ideas for minimal interface bad design no
Debut lots of file formats and encoder options, centers recording on the cursor, integrated with social media – directly posts for you no indication that the app is running, accidentally hit stop when wanted to check on the recording, UI suxxx yes
LiceCapdoes GIFs well, super simple only gifs no
ScreenFlickshows the recording box. Has icon in iOS nav bar. allows you to pause. Exports to gif, YT, or QT The time lapse didnt work, or was not idiot proof yes
SnapzProX2many options, b&w filter, user can pick how many frames per second after the recordinghard to stop the recordingyes

Screenflick MovieScreenFlick’s gif:

via GIPHY

Screenflick MovieWe weren’t fully satisfied using any of these apps.

our feature set:

  • make an mp4 file to instagram’s specs: 640×640, mp4, h264, not sure
  • show recording box and grey out areas outside of the box
  • emails you when you’re done
  • record as long as they want, then trim if its over, or speed it up
  • still to consider: how many FPS to record? 24 vs 2

nice to have:

  • add filter
  • make gif
  • pause mid recording, if you need to do something you dont want to record
  • post to giphy
  • post to FB
  • post YT
  • play it backwards, or ping pong
  • option to show mouse or not