Logo Design with Javascript

"Code is a powerful tool for creative work"

 

Code is new language for future. I learned how to build blocks of creative computing within the visual and media environment. I have learned to create dynamic images, type and interfaces, that can translate into print, web and spatial forms. I also have learned fundamental of programming that translate in virtually all programming platforms. Primary software platform: JavaScript.

Computers are widely used in art and design. Almost all design work created today contains computationally generated/altered elements.

Many effects that were created by custom code in the past are now baked into Photoshop and After Effects. Coding can be used to create interactive experiences, animations, and even static illustration work. Code grants the ability to explore variations of complex themes quickly.

With traditional design and art media, you are constrained to a single expression of your intent. With digital media, you can codify your intent, and create works and forms that can change in response to unknown future contexts. You can create systems that can grow. You can build your intentions into your work and create a work that can not only speak at your audience but that can engage in a dialog.

By learning a programming, I have thorough and elaborate interactive concepts and techniques for applications. It is an extensive investigation in the interface, the mechanism, the controls and the aims of interactive works. I designed and developed several complex interactive projects, and now, I know how to undertake a comprehensive research and direct thinking process from brainstorming to final outcome. I also learned tools to conceive, plan and develop an interactive system and I am aware of the importance of my role in the development of interactive media.

p5.js

I chose to draw my logo with p5.js so that I can animate them or make it interact with user in the future.

I chose to draw my logo with p5.js so that I can animate them or make it interact with user in the future.

Screen Shot 2019-09-11 at 12.18.06 AM.png
Screen Shot 2019-09-11 at 12.18.20 AM.png
First, I found all the colors (r, g, b) coordinates with photoshop.Then, I started to draw from front to back.I used several references: fill(); strokeWeight(); rect(); line(); text(); circle(); etc.I had hard time figuring out in order to rotate wo…

First, I found all the colors (r, g, b) coordinates with photoshop.

Then, I started to draw from front to back.

I used several references: fill(); strokeWeight(); rect(); line(); text(); circle(); etc.

I had hard time figuring out in order to rotate word ‘A.’

To flip the word upside down, I had to relocate it after I rotate it.

I’m pretty sure that there is a way to keep the drawing in the center all the time.

Since rotated ‘A’ goes on the back, I had to re-rotate every shapes that goes on top of rotated ‘A’.

Doing so, all the x and y coordinates got messed up.