Tag Archive for: javascript

P5.js + GitHub Tutorials (intro)

/by

In addition to being an artist, I also am an educator. I feel passionate about sharing the methodologies, technical tools and conceptual pathways that I’ve developed over the years .

This semester, I’m teaching Interaction Design (2 sections) at the University of San Francisco, where I’m an adjunct professor. Rather than doing hardware, I’ll be focusing exclusively on software (not apps) interaction and networked experiences.

P5.js, which essentially is a JavaScript version of Processing helps with learning coding since its output is visual. Graphics create gratification as students can see their work as shapes, lines and text rather than in a printed output in a console window.

With remote learning, I’ve developed some videos that I want to share with folks. These are just some intro videos and include some simple GitHub tutorials for classroom use.

Key to teaching is making it easy for students and to provide both a straightforward and uniform experience with the tech. Then the conceptual aspects can blossom.

Daniel Shiffman has created many in-depth tutorials for P5 and Processing and he is animated, personable and thorough. These are an amazing resource. For a classroom environment, however, Shiffman’s vids are too much for my needs. For example, I’m asking all the students to use the same text editor (Sublime), mirror my work in the GitHub with a Hello World example and generally give them less of a universe of possibilities at the start.

 

P5.js Tutorials

Getting Started in P5.js, (3 min, 45 sec)
https://vimeo.com/497757218

Hello World in P5.js, by Scott Kildall (3 min, 24 sec)
https://vimeo.com/498196772

Intro to GitHub by Scott Kildall (10 min)
https://vimeo.com/498199539

GitHub Tutorials

Cloning and Pulling from GitHub by Scott Kildall (4 min, 39 sec)
https://vimeo.com/499432659

Using the JavasScript Console with P5.js by Scott Kildall (4 min, 39 sec)
https://vimeo.com/499706822

 

A flowchart guide for my online tutorials (below)

 

 

Data-Visualizing + Tweeting Sentiments

/by

It’s been a busy couple of weeks working on the EquityBot project, which will be ready for the upcoming Impakt Festival. Well, at least some functional prototype in my ongoing research project will be online for public consumption.

The good news is that the Twitter stream is now live. You can follow EquityBot here.

EquityBot now tweets images of data-visualizations on its own and is autonomous. I’m constantly surprised and a bit nervous by its Tweets.

exstasy_sentimentAt the end of last week, I put together a basic data visualization using D3, which is a powerful Javascript data-visualization tool.

Using code from Jim Vallandingham, In just one evening, I created dynamically-generated bubble maps of Twitter sentiments as they arrive EquityBot’s own sentiment analysis engine.

I mapped the colors directly from the Plutchik wheel of emotions, which is why they are still a little wonky like the fact that the emotion of Grief is unreadable. Will be fixed.

I did some screen captures and put them my Facebook and Twitter feed. I soon discovered that people were far more interested in images of the data visualizations than just text describing the emotions.

I was faced with a geeky problem: how to get my Twitterbot to generate images of the data visualizations using D3, a front-end Javascript client? I figured it out eventually, after stepping into a few rabbit holes.

Screen Shot 2014-10-21 at 11.31.09 AM

I ended up using PhantomJS, the Selenium web driver and my own Python management code to solve the problem. There biggest hurdle was getting Google webfonts to render properly. Trust me, you don’t want to know the details.

Screen Shot 2014-10-21 at 11.31.29 AM

 

But I’m happy with the results. EquityBot will now move to other Tweetable data-visualizations such as its own simulated bank account, stock-correlations and sentiments-stock pairings.