Tag Archives: glitch

November 13, 2017 · 3:18 pm

Thanks to @Dfenjves, I can finally finish the @p5xjs code for #SingingFaces shared by @sofisagarcia_! #CCfestNYC #STEAM #ArtEdTech

Yesterday was another incarnation of CC Fest in New York City hosted at NYU ITP, and I’m proud to have attended all of their NYC-based events. It’s such an awesome, friendly, and welcoming way to delve into p5.js for both novices and advanced coders. [Per the p5.js website: p5.js is a JavaScript library that starts with the original goal of Processing to make coding accessible for artists, designers, educators, and beginners.] CC Fest has recently launched in Los Angeles and may branch out to other cities. My friend Saber Khan (@ed_saber) is a founder and organizer of CC Fest and an incredible thinker, thought leader, and educator. On their website, CC Fest describes itself as:

A Celebration of Creative Coding for Teachers and Students
CC Fest is an opportunity for students and teachers to engage in creative coding. Come spend a day making interactive and engaging digital art with the p5.js library. Teachers will work on bringing p5.js projects to their classes. Students will learn the basics of p5.js and build their creative coding portfolios. Read about the first CC Fest at NYU ITP in October 2016. We hosted a second CC Fest at NYU MAGNET in Brooklyn in April 2017. And a third at UCLA in September 2017. Checkout the tweets at #ccfestnyc and #ccfestla.

After a keynote from Cassie Tarakajian (@hellothisiscass), there were two sessions of learning opportunities led by educators, designers, tinkerers, programmers, artists, and other awesome volunteers. For my first session, I joined Danny Fenjves to learn about integrating microphones to alter shapes (Danny is the founder of Upperline Code.) In this workshop, I finally learned the shockingly simple code necessary for making mouths open/close along with music, thus solving a mystery that has been troubling me since March! I loved the wonderful compilation of Singing Faces (see video at the top of this post) shared by Sofia Isabel Garcia at a previous #CCfestNYC in March of 2017. These animations were created by girls in Grades 4-12 taught by Sofia as part of Code/Art in Miami. I never understood how to get the mouth shapes to dilate and contract along to the music, and I am embarrassed to admit that I didn’t even try to locate a solution on my own. Thank you, Danny! Here are Danny’s shared links:
1. Starter code: https://glitch.com/edit/#!/p5-sound-base
2. Finished code: https://glictch.com/edit/#!/95-sound-1-solved
3. And here’s the code I wrote that helped me dilate an ellipse based on mic.Level:

var mic;

function setup() {
createCanvas(800, 600);
mic = new p5.AudioIn()
mic.start()}

function draw() {
var micLevel = mic.getLevel() * 400
console.log(micLevel)
background(20, 30, 150);
noStroke();
fill(255);
ellipse(width/2, height/2, micLevel, micLevel);
fill (0,255,0);
ellipse(100, 200, 40, 40);
fill(255, 0, 0);
ellipse(micLevel, 300, 75, 75);
}

For the second session, I attended Serena Parr’s introduction to creating a Photobooth with p5.js using video capture from your camera’s webcam. It was awesome and made even more fun since I sat with three amazing ladies who inspire me daily with their ideas, insights, prototypes, and creative solutions: Maureen Reilly (@MaureenrReilly, Erin Riley (@eeriley99), and Tracy Rudzitis (@wagongrrl)! Serena’s super fun session helped me feel so much more comfortable about exploring Processing and p5.js libraries for more filters. Here are Serena’s shared links:
1. Serena’s presentation: bit.ly/photoboothsITP
2. Serena’s button photobooth program: bit.ly/buttonBoothITP
3. Serena’s emoji photobooth code: bit.ly/emojiBoothITP
4. Here’s Erik Nauman’s code for a Photobooth! Thanks, @openblackboard: https://docs.google.com/document/d/1-IMQ38H3Y5GQJF6rGVfSItE7dXezlrzEWBYASeOXPTI/edit
5. And here’s my code for the project:

var capture;
var button;

function setup(){
createCanvas(320, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
button = createButton(‘Say Cheese’);
button.mousePressed(takePic)
capture.hide();
}

function takePic(){
image(capture, 0, 0, 320, 240);
// filter(‘INVERT’);
}

function draw(){
// background(255);
}

I had to leave after the second session and missed out on the sharing at the end of the day and the closing keynote by Todd Anderson (@toddwords).Here are some of my tweets from the day (I was too busy learning and shmoozing to share more):

Leave a comment

Filed under Uncategorized

Tagged as , , , , , , , , , , , , , , , , , , , , , , , , , , ,