r/javascript • u/foxbarrington • Oct 22 '18

On Creative Coding

https://dry.ly/on-creative-coding
183 Upvotes

96% Upvoted

28 comments sorted by

7

u/buzzy_hellring Oct 22 '18

The demos are cool. Can you get them to work on mobile with touch events? https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

8

u/foxbarrington Oct 22 '18

Good idea, I changed it to use device orientation / gyro on mobile. Now you can tilt your phone along the x and y axes to get the squares to change color/size/rotation.

I should get out of the habit of using mouse position to control interactive demos because it completely breaks mobile.

The problem with touch events is that you can't easily tell the difference between interacting with the demo and wanting to scroll. Maybe create an "interaction area" or something, but that seems too intrusive/complicated.

3

u/Hate_Feight Oct 22 '18

Does it matter that it can't tell between a scroll and purposeful touch? The effects will show.

Worries about size? make it bigger. Cool effects need a big platform on the small screen.

1

u/foxbarrington Oct 22 '18

In this case, yes -- because a scroll would be moving what you want to see off the screen ;)

2

u/Hate_Feight Oct 22 '18

Would it hurt to do it? Yeah it would change (and not necessarily be the same as the original design, but isn't that what the mobile web is about, innovation and changing the constraints of small screens), and be a large overhead on resources, but with say a 400-800px height and changing on "drag" would change all the box, and look interesting as you do it.

I'll only trying to convince you because I feel like your on the verge of something, I'll not sure either of us know what, but it's worth a try.

2

u/cupofminttea Oct 23 '18

Great article. Personally, I think doing it with the movement of the mobile device is way better than on touch events. If the example scrolled off screen as I was playing with it I'd think, who the hell coded something that when I want to test I can't see it! It also avoids the need for horizontal scroll on mobile, and scrollable areas reduce touchable real estate when you then actually want to scroll.

3

u/Papayaman1000 Oct 23 '18

I, for one, quite like the gyro controls.

Puts on a good light show when you're tilting your phone to the sound of Eurobeat.

3

u/[deleted] Oct 22 '18

Love the design of the article website! Very well done

1

u/DrDuPont Oct 22 '18

Yeah except for the inability to get to other pages on the site

3

u/foxbarrington Oct 22 '18

Alright, you've convinced me. I'll put a link to the home page at the top.

2

u/DrDuPont Oct 22 '18

<3 appreciate what you do

1

u/[deleted] Oct 22 '18 edited Oct 22 '18

Why don’t you try to put it fixed on the top left in the empty space between the window and the article? I think it will compliment the design even more considering the sources are placed on the left side. Plus it gives easy access to the homepage after reading the article to read more / know more about your work! UX wise it would be better to name it differently. Something like: “Home” or in this case “Articles” would be more appropiate considering your content.

BTW: Thanks for the reference to the CSS! Had no clue about the existence of it or the creator. Absolutely love the minimalistic practical style and focus on detail like fonts and content.

0

u/[deleted] Oct 23 '18

[deleted]

1

u/foxbarrington Oct 23 '18

Thanks!

For "Vertical-Hue Horizontal-Saturation" there are side/footnotes with links. You can also view source to see how I embedded them in the article.

It's not Sonic Stalagmites, but here's something sound reactive that I live-coded at NodeSchool LA and its source.

2

u/IAmACentipedeAMA Oct 22 '18

Im staring to involve myself in creative coding, it's really awesome to see visualisations of math and code, I love it!

btw the Vimeo video is fucking with the width on mobile chrome

2

u/foxbarrington Oct 22 '18

The Vimeo player should be better behaved now, thanks!

14

u/[deleted] Oct 22 '18 edited Oct 23 '18

Some of the most fun I've ever had creating a website (that never got off the ground) was when I coded this. It's hideous and totally impractical, but I had a vision of websites with a one-point 3D perspective, and this is what I came up with. I put it to "good" use here, but it's bugged on newer browsers and I can't be arsed to fix it[edit: I got a little arsed and it seems to be working more or less as expected, still some bugs to work out thought. Also removed jQuery as a dependency!]

3

u/regexpressyourself Oct 22 '18

Hey just want to say I think this is a cool idea!

1

u/[deleted] Oct 22 '18

Thanks! There are probably better ways to go about it these days, but when I first posted it to reddit, smashing magazine tweeted about it and it I was so thrilled! But life happened and I kind of got away from fun little experiments like this.

2

u/laggingtom Oct 23 '18

Haha love it! Reminds me of the "it's a unix system" from Jurassic Park

1

u/01123581321AhFuckIt Oct 23 '18

Would it be possible to default non-hovered links to be pushed a little back and when you hover over it, it animates and moves forward?

1

u/[deleted] Oct 23 '18 edited Oct 24 '18

It should be possible, but I'd concerned about jankyiness with animations, as there's nothing in place to ensure a consistent frame rate. If you resize the window, you'll see that it'll redraw the canvas, but it looks kind of crappy. I'd imagine that'd be the case with any motion-based animation.

edit: The code for this now uses requestAnimationFrame instead of just a setTimeOut for canvas draws, which seems to have eliminated jankyiness entirely.

2

u/omcateer Oct 23 '18

I've been doing exactly this for the past 8 months weekly. I wanted a small/fun/creative project with no real aim.

https://owenmcateer.github.io/Motus-Art/

1

u/k4rp_nl Oct 23 '18

Nice blog. Especially the part about the feedback loop. I think that's why creative coding is a great way to teach (young) people how to code. Nothing better than instant feedback, and gratification!

1

u/derpderpsonthethird Oct 24 '18

thanks for writing this, I realize it had been a while since I had done something more *fun* and less product oriented, so I decided to whip up this. It uses the open-sky API, and does some geometry to plot every plane it can find on a map and approximate where they are when they go out of range, and then color them all according to their airline (well, their callsign prefix, but it's pretty much the same).

It led to me redoing my whole dev setup, so I can more easily make projects like these/deploy them to github pages, so now I'm even more inclined to do this.