6 ms·
Show HN: I Design with Code
- wingerlang 10y agoNeat, but a bit ironic since the visualisation is "using a GUI" to design stuff.
- chrisgannon 10y agoThe GUI animation is completely coded which is the 'punchline', so to speak.
- SEMW 10y agoNeat, thank you for sharing :)
- jnmandal 10y agoAwesome!
- deleted 10y ago[deleted]
- eliangidoni 10y agoI would like to see less code and more of everything else. This is funny though :-)
- chrisgannon 10y agoI'm guessing you aren't a programmer then?
- pavlov 10y agoYou don't have to be a non-programmer to want less code. Some things are much better represented with visual models than text streams.
- TeMPOraL 10y agoYup. "I design with code" sounds a bit like "I clean floors with a power drill". A powerful tool, indeed, but very ill-suited for that job.
- chrisgannon 10y agoCode is perfectly suited to design. What is design if nothing other than patterns. What's code? Patterns.
- TeMPOraL 10y agoDifferent kind of patterns. Design is about visual abstractions; code is more about textual and conceptual abstractions. The design space of a visual medium tends to be much easier to explore... visually. (Also consider that a typical way of developing a website or application UI involves everything from drawing on paper through painting in Photoshop through building mockups in a graphics-oriented design package.)
- chs9000 10y agoI think at times we get too caught up in the visual components. Visuals like sketches and mockups and even code-less prototypes are perhaps best for communicating concepts, which is a part of design. But there's also the part of design that's less about communicating designs and more about applying the concept and designing a way that it can be created and engineered. That's where designing with code is extremely helpful. So yeah, if I'm exploring or communicating ideas to non-technical people then yeah maybe code is less appropriate, but to say that you shouldn't design with code is ignoring a huge part of the design process.
- pavlov 10y agoIs architecture best represented in code? It's all about patterns. Why do we have CAD tools at all when architects and engineers could just be writing code for buildings?
- tarr11 10y agoYeah, I don't see how this kind of code is helpful for design (taken from the codepen). mainLineMask[0].getAttribute('d'), mainLine2MaskPath = "M148,122.5c82.2-71.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z", mainLine3Path = "M148,122.1c152.9,62.6,377,56.4,504,0", mainLine3MaskPath = "M148,122.5c152.9,63.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z", mainLine4Path = "M148,122.1c152.9,62.6,377-83.1,504,0", mainLine4MaskPath = "M148,122.5c152.9,63.6,377-84.7,504,0C766.5,189.5,65.8,194.1,148,122.5z",
- brainary 10y agoLikely made using another piece of code. It's code all the way down.
- chrisgannon 10y agoWe clearly see design differently then. These lines of code are curved shapes that the bezier line will morph to. Remember, just because you 'don't see how this kind of code is helpful for design' it doesn't mean that other people share your view. We all see things differently - a good thing to remember especially in these times.
- tarr11 10y agoI understand that, and as a developer, I'm used to working with stuff like this. However, without some sort of interactive IDE, this just feels like magic numbers. The code itself, as written, is not enough to help you visualize what you are producing.
- adityamoghe 10y agoI'm genuinely surprised the kind of reaction this comment is getting. There wouldn't be a design if it wasn't for actual programming. The vector graphics you see are mathematical models which are 'coded' in a script or a programming language and animated with the help of... again... programming. I understand the concept of less code and more stuff, but the fact that people are saying programming is not for designing is just simply absurd. The tools on top of which you design convert everything into code. I'm in no way saying people should stop using these tools or design should only be done through code. But knowing how to visualize things in your mind and materializing that concept through code/programming is beautiful and (in my personal) opinion makes you a better designer.
- chrisgannon 10y agoI'm fairly shocked too. I appreciate that lots of people don't understand this way of creating stuff but to suggest that programming and design are two separate entities is to deny an exciting approach to design in general.
- deleted 10y ago[deleted]
- wrigby 10y agoI was curious as to how this was done, so I took a look at the external JS that CodePen was configured to load. He's using GreenSock[1], which looks like a really cool tool for building rich interactions and animations with SVG+JS in the browser. 1: https://greensock.com/ https://greensock.com/
- abustamam 10y agoI've worked with Greensock extensively at work. It's a fun library with its own community. Once I figure out how to play nicely with React, I hope to use it extensively in my pet projects.
- OzzyB 10y agoIt is. But it's never got much love outside of Advertising/Marketing circles (was originally a animation toolkit for Flash, now JS) because it was closed source and pay-to-use. It (probably) is the best animation library out there.
- pmarreck 10y agoSo it's now open-source? If so, cool. > was originally a animation toolkit for Flash, now JS I wonder how difficult that transition was.
- OzzyB 10y ago> open-source Take a look at his licensing page. [1] Certainly isn't Open Source in the traditional sense and the terms are pretty convoluted; again IMO the reason for it not gaining mainstream developer adoption. I remember paying a yearly fee ($100?) for their "Club Greensock" membership so I could develop and supply code for clients and be in good standing. Of course the costs involved trying to replicate this toolkit and keep within deadlines made the fee seem very reasonable at the time. > transition There was definitely a transition, some Devs might argue it wasn't that painful; but certainly having a JS version of this particular codebase helped immensely, and also proved that we could still do all the "sizzle" we were able to do in Flash now with JS. The posted example is testament to that IMO. Very smooth :) [1] https://greensock.com/licensing/ https://greensock.com/licensing/
- nojvek 10y agoI see a blank screen on phone.
- brett40324 10y agoI dont see how this is even slightly novel, or interesting. I say this because there's endless examples of cool svg and css driven animation and interactive art that is 'coded'.
- kevinwang 10y agoIt's a Show HN..
- TrisMcC 10y agoThe visualization is much less interesting in Firefox.
- tomelliott 10y agoLooks the same here...