#computational media

The present collection of articles is the result of many years of research conducted by our team into various aspects of designing and building the component base of promising high-speed computational systems. The articles deal with the following topics: (a) the optimal design and functioning of parallel computational systems, (b) the optimal recognition of optical and acoustic fields in…

If you read my last week’s blog, you will notice that my code includes a few lines of code called the L-system. So this week I decided to explore it in more details.

I will skip the mathematical and historical part of the system and jump to the application of it - where it is used and how.

Imagine generating a set of random pattern, like a Jackson Pollock’s painting.

If you notice, while the drawing looks like a child’s scribble, it is actually quite balanced and one way to test that is to rip it off in halves vertically, your eye will automatically notice that the something is off.

So what is L-system and why is it similar to Pollock’s work?

Well, for one, they both focus on generating patterns. Two, it’s about randomness using a set of rules. The rule can be anything - more blue than yellow, not more than 20% yellow but only around the edges etc.

Notice the code from my previous sketch:

URL here.

therules[0] = ['A', '-BF+AFA+FB-']; // first rule therules[1] = ['B', '+AF-BFB-FA+']; // second rule

The above line dictates how the pattern is connected to one another.

let thestring = 'A';

This decides where the pattern starts from.

URL here.

Last week I explored For loops. So inspired by the possibility of creating patterns, I decided to try creating Kolam on p5. A lot of my time was spent in searching for codes for patterns and interaction that allowed patterns formation with a Mouse click.

A little about Kolam:

A Kolam is a geometrical line drawing composed of curved loops, drawn around a grid pattern of dots. You can read more about it here.

Part 1/Creating dots in a grid

URL: Link to part one.

Part 2/Creating the interaction

URL: Link to part two.

URL: Link to the final sketch.

This week I spent time using sliders and the random function to create a game along with Zoe & Jieun Park.

The idea Catch the ball with the mouse and score points. The way we built it was using a combination of code. Partly using the slider reference code along with the Math.floor function from Javascript to move the ball.

Reflection This week has been slightly challenging in catching up with a codebase that is outside of the p5 library and it made me wonder the best practices of coding together, especially with teammates who have varied level of coding expertise.

Iteration To understand the code base and explore the slide function, I mixed and match different codebase to create an interactive background. Below is the image of the ongoing iteration:

As you can see in the left image, the colour of the background changes from black (default) to the aqua green based on the slider. I added another layer of code from here, edited a bit and accidentally created the pattern on the right image.

Blockers

- There is an interesting problem with the image on the right. The editor is not able to distinguish between when the mouse is pressed versus when the slider is pressed. As a result, only the bubbles are forming but the background colours have become static.

How to animate an object on Processing?

That was my question for the week. I started with the p5 reference to fill the canvas with black and white strokes that will change over time using the random(); function.

I then opened the left toolbar to see the different pages in action. As you can see below, the CSS sheet only announces the margin and padding. Next is the index sheet. It’s a little difficult to understand. Based on loading items from Cloudflare, I am guessing this has more to do with loading the editor and presenting the code in the browser. The most important though is the sketch.js file. That’s what I am editing.

As you notice in the sketch below, I tried to manipulate the colours with each mouse interaction. 

Next steps

I want this to look like an abstract painting by changing the width and colour of the lines with each interaction.

Above: The left panel and the files attached to running the editor.

Above: Things I am yet to understand. So decided not to change.

Above: The p5.js code.

Above: Black and white lines changing over time.

Back in 2013 when I first started playing with code, I found Red Burns’ quotes on working with technology super useful. She laid out two points in working with technology: 1) “consider the technology as a tool which, in itself, could do nothing,” and 2) “treat the technology as something that everyone on the team could learn, understand, and explore freely.” It gave me the confidence to approach coding with an open mind.

At NYU I signed up for the Intro to Computational at ITP hoping to build the confidence and skill set needed to get comfortable writing and reading code. Why I think computation is important? Having worked on the UX side in technology firms, I am aware of the biases that creep in due to our prejudices and the systematic issues it causes. It pulled to the works of researchers and artists like Caroline Sinders and Tactical Tech among others who use technology to challenge the status quo. But as a creator, I felt handicapped not able to participate in similar discussions. While I tried playing with code on platforms like Khan Academy etc. The vast resources and lack of a relevant curriculum made it rather difficult to do works that can be published.

Practising sketching on p5 editor This is the first time I drew a portrait with code with so many details. My first attempt included creating a sticker of my face using Gboard and then convert it into an animation. I wanted to use it as an inspiration on which build my code. But I wasn’t exactly happy with the output. Gboard uses the illustration style of other artists that made the image look like a distant caricature of my face. See below.

“It was originally my sister’s idea: a divorced wordsmith, trying to find the right words to heal his broken marriage,” Katie Carlson, CM, said.

In her research on “The Process of Filmmaking,” Carlson, one of the students selected to participate in the Freshman Research Internship Program, took her research as an opportunity to craft the 17-minute short film she had in mind.

“My plan was to go through the full filmmaking process in the year-long research internship, but I began to realize that to do it right, it was going to take a lot more time,” she said.

She had to craft a full script, create a story board, and learn how to apply the visual effects of making the words appear on screen.

“A whole lot of work goes into pre-production, taking up entire teams of individuals for normal films, and I was just one person. I had to change my approach,” Carlson said.

So, she dedicated FRIP to the preproduction process.

“After making the storyboard and full script, I had some of my friends do a table read, where none of them knew anything about the story or their characters, so as they read and went on, they changed how they acted with how they began to understand who their characters were – it was really fun to watch my story unfold, with them knowing nothing of the background,” she said.

Even through the full year, Carlson’s preproduction work isn’t even close to being complete.

“I plan to finish preproduction, the creative and organizational part, this summer, when I have less on my plate, and get everything in the fall organized so all I have to do is cast and actually film the scenes when I get my actors involved. I also still need to learn a lot of the visual effects I plan to implement,” she said.

As a Computational Media student, Carlson’s Computer Science side matches with her LMC creative side, and she wants to go into visual effects as a career.

“I’ve done summer animation courses, and learned a lot. It’s amazing how weeks of work in animation can be only 2 seconds on screen. I’m learning a lot about the visual effects that I need for this film, but I need to learn more CS skills in order to really go into the professional world,” Carlson said.

During the fall, she will complete her filming and only have the remaining editing and post-production visual effects to complete – filmmaking is a long process.

With over 15,000 undergraduate students, six colleges, and more than 30 majors, the Georgia Tech community is a large and unique group.

Meet Jordan Eggleston – B.S. Computational Media, Class of 2019

Hometown – Huntersville, North Carolina

Why did you choose to attend Georgia Tech?

When I got a good look at the campus for the first time, I fell in love with the environment and I wanted to explore every inch of it. Both that and the employment rates were quite appealing.

What are your plans after graduation?

I know I eventually want to have a major part in a video game development studio. I've made a couple games so far — one of which is posted on the video game development club website —  that have helped me get a taste of what that life would be like working on games for a living.

Have you had work experience where you’ve been able to apply skills from your major?

I got to work at Cartoon Network Digital for a semester as an intern and that was one of my favorite experiences. I did quality assurance and games testing, and it was great to see the process that some of the games go through.

What do you enjoy doing outside of coursework?

I just started learning how to play the guitar. I also love to draw and animate when I have the time. Pixel art is fun, writing song lyrics – I just really like expressing myself in a myriad of ways.