What are /r/creativecoding's favorite Products & Services?

From 3.5 billion Reddit comments

Based off of Daniel Shiffman's excellent implementation of Boid flocking. My resolution for this year is to create more work - good or bad - and post it. I'll post tutorials and write-ups for my work later - I still have some family in town and I want to maximize my time with them.

Hey! Very good questions!

First of all, Three.js rules! Keep working on it. I´ve seen some beautiful projects come out it.

The biggest difference between a lot of those projects and mine is that they don´t need transformation feedback. They have the calculation inside the shader, often depending on 1 time variable. Some of them get really crazy with it.. https://codepen.io/knoland/pen/XKxAJb like this water shader one...

There's not really a way to send back updated positions to javascript, as far as I know.

​

That first one (only 75.000 'particles' ;) ) uses a shader uniform 'time' that it updates every render, to change its color, together with the position of the particle. So, javascript only has to count up that number and pass it to the shaders, that does the rest. the particles are static anyway, the whole object rotates.

The second one (only 6000 'particles' ;) ) is a bit more like my project, and pretty cool I must say. That one calculates the position and rotation of the arrows in javascript and than puts them into the attributes of the shader, that in turn puts the arrow in the right place on the screen.

My project does the same thing, but then for 100.000 particles (that's a lot more than 6000 ;) ). The velocity for each particle is calculated from the transformed position relative to the flowgrid nodes (that's why I need the feedback). Then added to the posititions, and those are put in the attribute of the shader.

I used the gpu.js to let the gpu calculate all the velocities and positions, that speeded things up a lot!

Thank you for the interest!

Friendly greetings, Ethan.

​

Here is the original image: https://unsplash.com/photos/PH5jsuWzaaI

This was created using JavaScript, WebWorkers and the Canvas API. It takes roughly ~10 minutes to generate. The algorithm itself is pretty simple (hill-climbing optimization):

• Take the pixels from the original image
• Paint the background of the generated image with the average color of the original
• Generate 20 random shapes (circles, lines, triangles) with a random color
• Draw each one seprately and extract the pixels of each image
• Compare the new pixels with the original image and calculate the RMSE (root mean square error) and select the shape that produced the lowest RMSE
• Draw the selected shape
• Repeat the last 4 steps until the image is good enough (10000 iterations in my experience)

I'll be releasing the code soon on GitHub, still some optimizations left to do :)

Pardon my ignorance—I’m just beginning to read up on three.js for a project I’m working on—but could the particles be instanced for better performance (ie less draw calls?). I’ve seen some pretty wicked uses of instanced geometries where hundreds of thousands of elements can animate at 60fps without much trouble. In fact, this runs at 60fps on my iPhone7:

https://threejs.org/examples/webgl_buffergeometry_instancing_billboards.html

Again, sorry if what you achieved is not possible with instancing (especially since youre using particles). I’m just a noob and trying to learn all this stuff ☺️

Here’s another cool use of instanced geometry:

https://codepen.io/usefulthink/pen/YNrvpY

There are some HDMI over Ethernet connectors out there that use network signals you can render in processing. Check out this it should point you in the right direction.

Thanks! I recommend thebookofshaders.com. It is an overview of how fragment shaders work in isolation, which can already teach you quite a bit.

The true power of shaders honestly won't be unlocked until you've figured out how to feed them data from something else. Shaders don't have any sort of state. You give them some numbers, and they do math. If you connect some external system to a shader, you can use that external system to generate those input numbers with slightly more intent. This is something that I'm honestly still learning a lot about. This guide from Processing is a very dense read, but a good one. I haven't even finished it, but I've found it very informative to read parts of it.

The base of it is a signed distance field generated in Houdini of this, then mixed with some vector fields and deformed.

I think generating the SDF from code is the next step. I am not much of a coder but should theoretically be able to generate some really cool complex shapes.

Download the installer from http://chuck.cs.princeton.edu/. Once installed you can use MiniAudicle (kinda like the processing ide) to run code. Click the 'Start Virtual Machine' button to wake up the sound server, then click the 'Add Shred' button to play the file.

If you are on the command line you can also just 'chuck file.ck' assuming everything is installed correctly.

ChucK is an audio programming language. No special equipment needed :)

A cool example taken from here

SinOsc a => FFT b =^ IFFT c => dac; b.size(c.size(5)); a.freq(.01); while(1) c.upchuck(), (1.01 + a.last())::ms * .1 => now;

http://p5js.org/examples/ - On this webpage, there is a column that says "simulations."

I essentially want to make a physics video where I have written my own simulations. Ideally, I will take the 20 or so simulations I've written and export them as .mp4. I will then use a traditional video-editing software (final cut pro) to do the transitions and arrangements of the clips.

Immersives and workshops are great! On another note, all of Dan Shiffman's wonderful videos on Processing are on his youtube, and he is in the middle of recording his series for p5.js (javascript reinterpretation of Processing) and is updating them very regularly.

To answer the sidenote: I came to NYU ITP where Dan Shiffman, Lauren McCarthy, Kyle McDonald etc are faculty so I was kind of thrown into my community.

I highly recommend the p5.js library. It is based on Processing. Some associated libraries (see p5 page) let you use audio and video inputs. I did this with audio input (you have to enable the mic).

The Nature of Code is originally a book. In addition, Daniel Shiffman also has the ‘Learning Processing’ book. You can find both at his website.

Here you can check a few others: https://processing.org/books/

If you don't know Processing, you should look into it!

from the Open Frameworks about page:

> We were especially interested in achieving a sort of parity with Processing, where many of the functions are similar, allowing easier movement from one framework to another.

in case you didn't know.

here's https://processing.org/, and r/processing is fairly active as well.

one good place to start is the Processing language, which you might have heard of already. A good jump start into making art with it is the book Generative Art by Matt Pearson

Do you have a friend with more than one computer? Alternatively check out amazon workspaces; you pay by the hour and then can access it from the PI.

Edit: They now have ones specifically for graphics hardware, if your software makes use of it, here is the article.

Creative coding is still coding. When you want to do anything specific that isn't already supported by existing software you're going to need to get your hands dirty.

MIT Scratch is a great way to get started programming. "But it looks like it's for kids" yes, that just means it's fun from day one and easy to get into.

After that the best bang for your buck is probably Processing.

Basic explanation:

• Each tentacle is essentially a particle generator that emits a particle each frame. Each particle travels in a straight line, and shrinks in size until it disappears. The colour of each particle is cycled from blue to white to give the electric pulsating impression.
• The angle a particle is emitted is based on a "slanted" sine function:sin(t + sin(t)/2) (view in desmos)This gives a slow build up in one direction and a fast release in the other direction, mimicking a jellyfish's movement. The 'magnitude' of this function determined by the position of of the tentacle, i.e. tentacles on the far left and right have larger magnitudes (large horizontal variance) and tentacles in the middle have a magnitude of 0.
• Finally, the y-position of each tentacle is determined by a sine function with the same period of the sine function above, to give the general up and down movement.

​

Here you go!!

https://pages.github.com/

It's as simple as creating a public repo named yourusername.github.io and putting an index.html file in it.

If you want to create a basic page quickly you can use markdown instead. Here's a link to the guide on that. https://guides.github.com/features/pages/

Let me know if you need more help. 😊

Don't bother with reading too much about it at first. Just start trying stuff!

Download ( https://processing.org/download/ ), install and open Processing. Hit the play button and you should get a gray canvas.

Not close the canvas window.

Write this in the text field: ellipse(20, 20, 20, 20); And hit play

You should see a circle/ellipse in the canvas. Try changint the numbers to see if you can change the dimension or position. For example: ellipse(50, 50, 10, 10);

Try adding this line before the ellipse code fill(255, 0, 0); (this will set the fill to red)

Code seems more complex than it really is. It's all made of really simple stuff when it comes down to it. Finicky simply stuff, but simple stuff none-the-less.

If you take it step by step you'll figure it out eventually!

(I use Processing as an example here, it doesn't really matter what you start with, as long as you just choose something and stick with it for a while. And you can change your mind about programming language later). :)

My process is a little weird in terms of tools because I prefer to use Clojure over more popular programming languages and I've written a fairly large set of personal libraries. This means it's a bit harder for me to give you a quick gist to replicate the effect, but I can describe how I think about this sort of thing.

In the case of this gif, the starting point was a hex grid with origin (0,0). My grid library represents a grid as a 2D mesh where each shape (hexagon here) is drawn independently, but non-unique points (where the hexagons meet, for example) are merged. This means that when a point is moved it deforms all the hexagons that share that point. After that, it's just a matter of using a function of the current frame count to move around the points in a way that looks nice ("draw the rest of the owl").
The best place for most beginners to start is by following tutorials using a popular creative coding framework, like Processing. If you do that and run into specific questions, let me know and I'll try to help. :)

JACK is what you're looking for. Allows you to make audio connections between apps. On some Linux distros JACK is the main audio system, it's that powerful. Works on Windows and Mac too. On the Mac you also have Soundflower.

Disclaimer: This isn't mine. Would be lovely to see someone hack this together with something like jitsi-meet so you could just send a link around and webcam chat with your friends with custom filters. DIY snap camera anyone?

A poster made with multiple spirals drawn on top of each other. I wanted to create a sunflower at first, but I ended up with this happy accident. 😅 Code can be found here if you're interested! https://sr.ht/~jagtalon/generative-art/

Thanks. I had seen the mapping link already.

All these things are made with the OpenCV library which is available for OF, Cinder, even Unity. It's pretty deep but it's the standard tool for pattern recognition.

Learn some JS.

Then learn Processing.js (basically, javascript with some extra stuff to make assorted things much easier)

http://processingjs.org/

But don't wait too long to try Processing.js; learn enough JS to get basic stuff to run, then learn more JS using Processing.

You'll need to do loops, conditionals, exceptions, decent coding habits, etc. in either case. Better to have fun projects. :)

Then see if there's something specif you'd like to do that doesn't work so well with processing.js and come back ask for more suggestions.

There are assorted languages (Ruby, Java, Haskell, Lua, C, C++, python, C#), that have related frameworks and libraries for different kinds of things.

But don't worry about that until you've gotten comfy with JavaScript and played around with stuff and started getting ambitions that outstrip what Processing can offer.

Apologies as I posted similar above but it makes more sense as a reply right here with a bit more information. If you do make this as a website you can use Cordova to turn it into a secure iOS or Android app fairly simply. I also agree with the above that starting with MySQL seems like something that would become overwhelming extremely quickly and there are a lot of simpler options available now. You could use local storage which I know was mentioned elsewhere but is very helpful. Another great data storage option is Firebase which works pretty seamlessly with javascript in the first place.

This is a great book written by the people who created Processing. I’d recommend it a lot as well as continuing following Dan’s video. Eventually stuff will click and I’d recommend just keep making mini experiments and drafts. Also don’t copy and paste code, manually type it out as it helps to reinforce the learning and understand it better.

Yes - it is a great book and still full of very relevant information and examples. I would also recommend "Generative Design" - I think I actually like this one more than "the nature of code". https://www.amazon.com/Generative-Design-Visualize-Program-Processing/dp/1616890770/ref=sr_1_3?dchild=1&keywords=generative+design&qid=1596038909&sr=8-3

Yep, I've used one like this and it worked brilliantly. No drivers needed, full HD, hardly any lag. Only real downside is the price!