Processing and P5 got newbies into coding

https://clivethompson.medium.com/how-processing-and-p5-got-newbies-into-coding-dd3853a7adb

by winkywooster • 5 years ago

195 45 5 years ago

clivethompson.medium.com

Matthias1• 5 years ago

It might be worth mentioning that Khan Academy's main CS course has been based on an in-browser Processing.js environment, since even before P5 existed.

udbhavs• 5 years ago

Interesting, I did not know it predated p5. That explains some of the inconsistencies and weird restrictions - I remember it only allowing specific syntax for things like declaring functions

tomjuggler2• 5 years ago

processing.js is unfortunately abandoned - which is a great pity since P5, it's successor, has some fundamental changes from the original Processing syntax.

Used to be you could copy and paste code that would run on desktop (Processing), browser (processing.js) and mobile (Processing for Android) and it would just work.

I do understand why P5 is important, though, with the popularity of JavaScript.

WesleyJohnson• 5 years ago

Moderated at Khan in their CS area for a while around 2012, and really enjoyed helping people just getting started with programming. I still have 1/2 a dozen unfinished canvas/processing.js games and projects from back then as well. There's just something very rewarding about using that combo for rapid prototyping and iteration on a project.

marcodiego• 5 years ago

Processing is the best tool I know to make people get impressed by, interested in and wanting to learn programming.

acomjean• 5 years ago

I've played with processing and p5. Processing is built somewhat on Java, but its hard to tell. You could compile it into stand alone applications. Its also hard to google. p5.js is slower but much more accessible ( everything ends up being ported to Javascript). Its fun because its easy to make interactive programs.

the p5.js has an account system and an online editor, which is fun to play around with, but not needed. Its got fun interactive examples too:https://processing.org/examples

I stumbled across it when someone left Dan Shiffman's book "the nature of code" on our buildings swap table. https://natureofcode.com/

Dan has a youtube channel. Its kinda a weird mix of children's themes and advance math. The tutorials are great however.

https://thecodingtrain.com/

chairmanwow1• 5 years ago

Dan is amazing. His channel used to be called the The Coding Rainbow, but apparently he was forced to change it. That name gave you a much better sense of what you were getting into.

bmitc4• 5 years ago

Was it due to the closeness to The Reading Rainbow or something?

bmitc4• 5 years ago

Its also hard to google

I forgot all the details of the history of the name, but the original name was Proce55ing, pronounced as processing.

_the_inflator• 5 years ago

I also wanted to post the link to Coding Train. Such a beauty!

P5.js and Coding Train are very complementary.

wly_cdgr3• 5 years ago

Processing might not be directly relevant in industry, but that's about the only thing it doesn't have going for it as a computing playground / way to get started with programming.

* Terrific official documentation (not just API docs but plenty of high quality examples and tutorials that are beginner-friendly without being stupid or patronizing)

* A couple great books (Nature of Code)

* Some great third party tutorials as well: https://funprogramming.org/

* Dead simple to get running; dead simple to start getting nice animations on screen; small and focused API; hot reloading

* Inspiring community filled with intelligent, creative people at the intersection of the arts and academia

bmitc4• 5 years ago

hot reloading

Do you have a reference? I wasn't aware that Processing had this feature.

wly_cdgr3• 5 years ago

Search for "tweak" if the anchor doesn't work

https://processing.org/environment/#:~:text=Runs%20the%20cod....

duck• 5 years ago

Well said! The community is amazing and I always love sending people to Daniel Shiffman's Coding Train (https://thecodingtrain.com/) as that to me is a great example of how to do tutorials in a very accessible way.

wly_cdgr3• 5 years ago

Thanks! Love & appreciate the newsletter

lancesells• 5 years ago

Daniel Shiffman has an amazing way of teaching. He's the only YouTube channel I've ever paid for and it's well worth it. I've been making my own drawing program off of what I've learned from him.

rtpg2• 5 years ago

For people looking for a bit of a "hefty" thing about generative art with Processing, "Generative Design" is a great little book that describes intuitions for making cool art, along with lots of inspiring examples and schematics describing it. It helps to fill in the missing gap for people who might know how to computer but just don't have much imagination.

Book is very costly, though.

hamoid3• 5 years ago

I'm happy to hear those third party tutorials are considered great! ;-)

dahart• 5 years ago

To get people into coding, let them build stuff right away. […] Fry talks about one of his original motives: He wanted to create a language that let newbies a) start making cool-looking visual creations b)very quickly.

This really is a great goal. I love processing for this reason. Also Arduino - it’s the hardware version of the same thing. Same goes for ShaderToy. And I kinda consider Python to almost be a language equivalent of this goal (even though there are lots of decidedly simpler & easier languages).

But I feel like this telling of the story is leaving out the lineage and inspirations of this idea, since it long predates Processing, and there a lot of notable milestones. Logo was founded on the same concept, and I got some of the same thrill from making pictures quickly back when I was a kid. It was so much easier to get something interesting done compared to almost any other language / environment.

I’d love to hear what people consider other meaningful versions of this, before and after Logo. I’m curious if environments like DrawBot and NodeBox, which started around the same time that Processing did, share direct connections, or only share inspirations.

k__2• 5 years ago

Probably historical reasons.

Back in the days, Processing was the only game in town and then P5 built on that reputation.

I found the programming model of these solutions to be rather convulted and think D3 would lead to a much better entry into coding.

bmitc4• 5 years ago

Pure Data and Max had GEM in 1996. Pure Data is still a pretty capable graphics system today.

https://puredata.info/downloads/gem/documentation/manual/pub...

Also, vvvv had its public release in 2002. TouchDesigner was released in 2008.

Although I do like Processing, I am surprised these visual languages haven't caught on as much as Processing.

Donckele• 5 years ago

The environments you mention have different mechanics and a steeper learning curve. Also, my opinion, less programmer friendly - its for those who want to connect stuff together rather than write code. They usually produce not very dynamic experiences that feel very similar and mainstream.

rezmason2• 5 years ago

Maybe the only free game in town.

I remember Macromedia charging students about fifty bucks for Flash in the early 2000s, but memory can be unreliable. Skimming through the Wayback Machine, I see it going for about twice that at my alma mater.

I heard of Processing around 2007, and I loved that it was free, but I never really got into it. It felt academic, in a way, and it still does apart from p5.js. I don't mean "educational" or "scholastic", like Scratch or Mindstorms NXT. I mean that in the 2000s, Processing had a branding that reminded me of textbooks and whiteboards. It was cool the way the smart guy was cool in NUMB3RS. So taking up Processing after a couple years of Flash felt like ditching a wacky friend to go see a tutor.

Since then it's become a more welcoming and accessible thing, and I'm glad it has.

rtpg2• 5 years ago

One thing that is missing from Flash in there is the whole "you edit this thing visually, click on it and can attach a script onto it".

Of course big "serious" flash projects would be more organized in how stuff happened but I think that Flash's success was from being this animation/drawing/moving making tool where you could add scripts, instead of this dynamic programming environment.

"Make this movie interactive" has always been a bit easier than "make these words turn into drawings".

k__2• 5 years ago

Ah, yes.

I had a coworker in 2008/09 who studied at a macromedia university, and they were doing basically everything with Flash there.

Sad story.

The job he got with us didn't have anything to do with design, let alone Flash. He worked at the company for a few years and switched later, to do something that aligned more with his love for Flash, and then Apple killed it right away.

toisanji• 5 years ago

I love processing and p5. this is a collection of some of my drawings: https://somatic.io/ http://www.jtoy.net/sketches/ If you are trying to teach people how to program, I recommend using processing/p5. Its also a great language to improve your mathematical thinking.

carom• 5 years ago

I took a really awful* graphics programming course during my Masters degree, to the point where I didn't drop, stayed in, and took the bad grade just to leave a final review about how bad it was. I later discovered processing and graphics programming was a breeze. That is really what the course should have been taught in. I've used it multiple times since to make animated graphics for videos, 3d text that I couldn't figure out how to make in Photoshop or Gimp, and a visualization for the cue ball's departure angle in billiards.

*I believe my issue was it never built up the mental model of OpenGL to the point that I couldn't comprehend the difference between a VAO and VBO. [1]

1. https://www.khronos.org/opengl/wiki/Tutorial2:_VAOs,_VBOs,_V...

jfim• 5 years ago

Ouch, sorry to hear that. Oftentimes university classes are more about giving a theoretical background instead of hands on practice. The theory is useful, especially if one is trying to write performant code, but it's a big wall to scale before being able to play.

Not everything needs to be optimized to the maximum these days, with computers being so fast, and oftentimes inefficient code is fine for just playing around. In your example of graphics APIs, the barrier to entry has gotten much higher with programmable GPUs if one wants to use APIs such as OpenGL, D3D, or Vulkan. It used to be that one could just draw polygons on the screen with C code that would fit in a single page using GLFW, OpenGL immediate mode, and the fixed function pipeline.

Hilariously enough, you can see the difference between the deprecated immediate mode API (8 function calls) and the "recommended" way on this Stack overflow answer (fragment and vertex shaders, a few buffers, and way more code): https://stackoverflow.com/questions/6733934/what-does-immedi...

On the other hand, if all you want is to draw things for fun and you're not trying to write a AAA video game, a scene graph-style API or interactive environments like processing are much better fits, as you point out.

atoav• 5 years ago

This is how I got into programming.

tomjuggler2• 5 years ago

Same here - well, Arduino, then Processing.

calmoo• 5 years ago

Me too - I had a module on it in university and I ended up writing a music visualizer that hooks up to Ableton for my thesis. Really great introduction to programming.

sheepybloke• 5 years ago

Same! We had a basic computer class where they taught a bit of programming to everyone through Processing. I made a snake game, and the rest is history!

ruined• 5 years ago

during the pandemic, processing reignited my interest in programming after a ten year hiatus.

i dropped out of university out of disgust with the industry and did nothing for about a decade. but art coding was just the best option in lockdown, when i was injured and couldn't go outside much, and the only other option was staring at the nightmare rectangle.

thanks processing. i still hate the industry though. not sure what i'm gonna do about that.

c0nfused• 5 years ago

There's plenty of fun programming out there that isn't the industry.

I always enjoy doing short time no support things like game jams and random one off projects where you have a focused tasks on a limited schedule more than sprawling professional type projects. Besides, the first game jam game I ever made was in processing

motform• 5 years ago

As much as I admire Processing for making it easy to draw pixels on the screen, something that seems to get more difficult every year, I do find it very difficult to use as a teaching tool. Going from Hello World to something more intricate is a bumpy ride with very few affordances, the feed through from drawing a rect to interfacing with I/O is, while obviously a difficult problem, non-existent. "Creative coding" also requires both a high degree of mathematical and artistic capability in order to be something other than a soup of primary color on the screen, something beginning programmer (esp. "non-technical" ones) tend to struggle with.

Then there is also the famous Bret Victor article: http://worrydream.com/LearnableProgramming/

That said, I still really admire what they did and how extremely influential it has been. Just a small thing like how the the Processing IDE was forked to create the Arduino IDE attests to how Processing continues to reverberate throughout history.

waveywaves• 5 years ago

After learning C as the first language in college, I was sure that programming wasn't for me till I was introduced to processing and p5 js. Processing was a blessing for me.

jskfkl• 5 years ago

I’ve had the inverse experience: I was a programmer before and Processing got me into art in a way that let me leverage my existing skill set.

Processing brought back the feelings that initially got me into programming: the sense of being able to do create anything.

I share my works here btw; https://instagram.com/asfandyar.codeart

dccoolgai• 5 years ago

Honestly, I think _that's_ the thing: It's not really about making it optimized for "either" side, it's about "bringing the sides together". People from the technical side always wring their hands and moan to the heavens about how Javascript/CSS is so terrible and wonder how it came to be the juggernaut it is. The truth, I think, is that it did better than any other language/community in creating a safe space for creative folks to cross the gap to the technical side and visa versa. It's that "maelstrom in the middle" that truly wonderful things come from.

shirleyquirk• 5 years ago

helping others with their processing code is what started me on the road to being a professional coder, and the article captures perfectly what it does exceptionally right. it's the glue-gun of programming environments--a super fast way to prototype and visualize an idea.

it makes me tear my hair out for the thing it lacks: a path to a production-worthy version. It encourages bad programming practices for the sake of simplicity (all tabs share a single namespace; global variables everywhere) which all but guarantee that once a sketch has reached a certain level of complexity it's a tangled mess of spaghetti.

Refactoring it at that point is A) challenging, and B) changes the api so much that the poor non-coder who's asked you to fix their broken code hates the new restrictions.

hamoid3• 5 years ago

I know what you mean. I still think Processing and p5.js might be the best way to start, but what's missing is a bridge to move to the next level: showing other ways of doing things, comparing languages, IDEs, how to avoid the spaghetti, what are the strengths and weaknesses of different tools, etc.

This is my small contribution to help with this situation: https://vimeo.com/channels/p5idea Still much to do :-)

ink404• 5 years ago

OPENRNDR is worth checking out for anyone interested in processing https://openrndr.org/

It avoids a lot of the weirdness that processing has in its relation with Java and meets somewhere between that and open frameworks.

Great to check out if you've been looking for a playground to get familiar with Kotlin too!

hamoid3• 5 years ago

When I started using it 3 years ago I was concerned about using Kotlin (a language developed mostly by one company) or choosing a framework with a small community. After writing hundreds of audiovisual programs in Java, Kotlin, C++, JavaScript and some other languages I can say OPENRNDR provides the most frictionless creative experience for me. I enjoy it every day. Still, to appreciate what it has to offer I think it's better to start with Processing or p5.js and write growing programs until they become hard to follow. Then it makes sense to have a good IDE and a beautiful API.

tossaway9000• 5 years ago

Much love for processing!

Back when I was starting school and learning programming I also picked up an Arduino Duemilanove and learned Wiring and Processing which went together like peanut butter and jam. What an amazing time. I recall getting some of my processing apps to run on my Sony Erricson phone as they once had a way to convert the Processing sketches to a Java Mobile Edition apps (back before Andriod was widespread)

Processing and P5 got newbies into coding

Related Stories