Category: Assignments



*Late assignment, in progress

For this p5 project, I focused on the subject matter of drone warfare being conducted in Syria and the at best obscure procedure it follows, or selects targets. It was inspired by a quote stating that the children there have become afraid the implications of a cloudless sky.

Pixel animation. The rooftop scene shows two civilians frozen in flight, one definitely a child (ironically, it is wearing a pilot’s helmet for head cover). They stay barely shielded by two pinned up sheets, held there – we assume – by premonition or by surrounding sound. In the distance, the clouds keep on rolling languidly, every once in a while uncovering a disconcerting presence behind them, one that slowly fleshes itself out to be one of a military drone. A seconds’ timer is timing down fast over the two characters, implying that the question of civilians is only one of time.

Charlie Mo Final

link to project:

link to code:

For my project, I imagined a bleak future plagued with overpopulation and dependency of technology. I took inspiration from notable Japanese animators such as Hayao Miyazaki and Masamune Shirow, both of whom produced visuals famous for their modern yet rustic look. I created each building using Photoshop by stitching together bits and pieces of traditional Chinese and Japanese architecture with buildings found in urban environments.

*press spacebar to make the character fly!*




rnayyar-final-perlin-noise-2   <— Download me for access to the code and index 🙂

Below are some screen shots of the results I got while playing around with the variables in my perlin noise flow generator. This is the Dan Shiffman video that helped me code this.

The perlin noise generator produces incredibly natural-looking threads, paths, hairs,
and and ripples across the canvas. I played with the variable values, particle count,
and offset values to get so many varying results.

captura-de-pantalla-2016-12-11-a-las-8-02-14-pm captura-de-pantalla-2016-12-11-a-las-8-05-46-pm captura-de-pantalla-2016-12-11-a-las-8-07-11-pm captura-de-pantalla-2016-12-11-a-las-8-07-34-pm

These are only a select few. These patterns were then laser cut onto wooden panels.
The wood grain, wood color, and specific images, produced many different results.
I intended to have people arrange the panels so that there would be a continuous
path or bolt that strings through the work. This is an interactive piece that invites
touch, play, observation, and puzzle-solving. I used wood as my medium because it
was such a versatile material created by resources taken from nature itself.

This is a photo of the laser cutter engraving a pattern. The quality is a bit iffy because the
laser cutter moves so quickly.


****more photos will be edited in after tonight




edit1 edit2 edit3 00495751-45a9-4dcc-8fd5-a210a3544bc1 edit-4 edit4 edit5

Oth (v2)

One impoverished noble (Oth) decides he will not work for his more affluent neighbor any more, and so hits the road as a pilgrim.

(Screen size needs to be adjusted for it to look right.)

How “Low” Can You Go?

I wanted to explore the different degrees of creating an art work. i am a very hands on person who likes to create physicals works like paintings or sculptures. After being being more comfortable with Photoshop and learning how to code, I thought it was a great opportunity to branch out and use digital tools as my materials. But the idea of how much of thought and action an artist can put in to an artwork and still call it theirs’ interested me so I decided to combine both my physical and digital materials to explore it. Can I still say that it is my work even if I did not make half of the decisions that was put in to the final product? CanI still say that it is my work when every single elements on the final image was not created by me? These were the questions I asked myself and wanted to explore while I was proceeding this project. 

Final Project – LF Heals


LF Heals is a game about being the healer in a MMORPG Dungeon Group. The player must click on each character to heal them, and right click to boost their ego. Each character is reactive, and will become very unhappy if they do not recieve the proper care – going too long without caring for them will result in their death. You must keep at least one of them alive to win the game.

LF Heals is a bite-sized experience of what it’s like to play online games, and how toxic and stupid these communities usually are. A tongue-in-cheek poke at how normalized this behavior is, and how we are enablers when we stay quiet and keep our heads down to avoid trouble. Hopefully will have players step back and think more about how we continue to allow these people to act this way.

Final Project

Everywhere They See Me


This piece is my attempt to capture both mundanity and a sense of something overwhelming, or the slightly sinister. I screenshot footage from security cameras around the world from a database called “” My intent was to capture moments from a variety of settings we find ourselves in daily, ideally with people present and active, and then to curate these short sequences by similarity. For instance: malls, offices, outdoor sports venues, etc. Footage being grouped together like this allows us to see that “privacy” is not so secure, and that being “watched” is just part of the deal if we want to partake in modern life. Alternately, this video amassment is a way to save moments that would have been overlooked (as just normal life) rather than a security threat, and forgotten completely. In most circumstances, they would not be available to watch over and over by people halfway across the world.

Final Project Proposal – Sofia Syjuco

Word Document of the Design Doc:


DPS Pet Design Doc
Draft 1
November 28, 2016
Sofia Syjuco

DPS Pet Design Doc

Pitch: A Tamagotchi-style game, in which the player must keep a contrary and grumpy dungeon-delver alive.

Concept: Deliver a bite-sized experience of the toxicity and stupidity so rampant in online communities, and a reminder that this self-entitled behavior is quite child-like. A tongue-in-cheek poke at how normalized this behavior is, and how we are enablers when we stay quiet and keep our heads down to avoid trouble. Hopefully will have players step back and think more about how we continue to allow these people to act this way.

Overall Premise:

  • Pet: Traditional damage-dealer (DPS) in MMORPGs.
    • Two “needs”:
      • Health – must be kept alive
      • Ego – must be pandered to and feel important
    • Player acts as the party’s healer
      • Keeps the DPS healed
      • Keeps the DPS’ ego up
    • Player must keep the DPS alive through a range of scenarios.


  • DPS loses health and ego at a constant low rate, from monsters and environment
  • DPS has “special” scenarios that make one of those stats go down at a significantly faster rate
    • Fires appear on the floor, and they stand directly in the fire, taking increased damage/ Boss fight, takes more damage/ argument in chat, ego goes down
    • A “special” scenario functions essentially like a boss fight, but it is any hazard that causes a stat to go down at an increased rate.
  • Player has a set of options available to them, that will keep the DPS alive
    • Healing = health
    • Ego boost = Ego
  • Player progresses through a “dungeon”. Bar on the top of the screen shows them their progress in keeping this DPS alive.
  • Background doesn’t change, but new environmental assets added for each scenario.
  • If the player manages to keep the DPS alive through the whole thing, they win! Ending screen with a treasure chest, and probably some dry humor about how they’ll need to keep doing this again and again, and don’t they love their job?

User Interface:


  • Two buttons provide the main interaction with the DPS: Healing button, and Ego button.
  • The name of each DPS, randomized each time the game is launched
  • A “chat” window on the left side of the screen.
    • Filled with randomized phrases from other party members, and the DPS.
    • If their ego goes too low, the DPS will get angry in the chat and say mean things.
    • Pressing the ego button will send soothing messages into the chat and make the DPS feel better about themselves.
  • Dungeon progression bar (see above).
  • Setting of the game (including the character, the dungeon, and other environmental sprites)

Asset List:

  • DPS
    • Idle Animation
    • Angry Animation
    • Injured Animation
    • Dead Animation
    • Tantrum (Ego-death) animation
    • Running animation
    • Shooting bow animation
  • Interactions
    • Healing Animation
    • Ego animation
  • Monsters
    • One small monster idle animation (monster 1)
    • One big monster idle animation (monster 2)
  • UI
    • Ego + health buttons
    • Chat window
  • Environment
    • Dungeon background
    • Environmental Hazards
      • Fire/Acid traps

Final Project: Beyond the screen

Develop a project in which you combine some of the concepts and tools you learned in this class with your existing practice.
No assigned theme or format. It has to have a digital/computational component but also go beyond screen and computer-only based work, incorporating object making, performance, social practice, in either the process or the end product.

Here are some inspirations and strategies (some of them are technologically very sophisticated):

Hand drawn assets for games and apps

Printed computer generated images

Sculptural Projections

From digital to physical

Internet Performances

Performances with custom tools

Public space interventions

Networked objects

Comments Off on Final Project: Beyond the screen Posted in

Virtual Pet Template


Here’s a template for a one action / one variable virtual pet.
We will go through the logic in class.

This is a simplified version with keyboard input:

Comments Off on Virtual Pet Template Posted in

Sofia Syjuco – Character

idleanimation needhealinganimation

4 Needs:

– Healing
– Placating statements
– Ego boost
– Loot

4 Actions:
– Heal character
– Placate character
– Praise character
– Trade them some loot

Relation with needs: If met, dungeon goes well and character survives. Player gets some sort of reward? If abused, or forgotten: character gets steadily angrier and angrier, and quits the group, replaced by another


angel-pet angel-pet-sad

Needs: feed(will leak and turn to stone if unfed), talk to (tell it about the outside world or just give it affection), purify (keep the body and soul clean!), keep contained (It has to be ready before it sees the outside world or it will die of shock) .

Actions: give it a bath, teach it just from unjust, feed it Go Gurt, play with it to keep stimulated and from wanting to escape (can die from escaping or from banging on the walls from trying).

Companion (1)

(1 CLAY)

Actions (options): tend it, wreck it, wing it, feel it. Needs (meters): human contact, warmth, water,  grandeur

 clay1 clay






creature-1-1 de5ddf51-a43e-11e6-b429-c581b0d68a80    imported-piskel-2 imported-piskel-2


  • Likes to chew.
  • A Weem only consumes jellies.
  • Owners never know if it wants to say something or chew something.
  • A Weem can survive without food for 5 days.
  • After 5 days it dies.
  • If a Weem is not provided with chew toys it will get frustrated and pop its ears out to show that it is mad.




Coffee Mug Companion

4 needs: keep heated (color will change to cooler tones if it’s getting too cold), drank from (character will look angry if it’s ignored for too long), refilled before empty (character will die if empty too long), stir from time to time (character will bounce and try to stir itself until you stir with spoon)

4 actions: put on hot plate, stir with spoon, brew and refill coffee, drink from coffee



Assignment: virtual pet

Make a “virtual pet”, an application/game that requires some kind of prolonged attention and displays life-like behavior.

Can it be something else than a classic companion pet?
Think beyond the most obvious species and the classic tamagotchi representation, even beyond the animal kingdom.

Can it mean something besides being cute/fun?
Think about the themes that the genre relates to: care, power relationship, emotional labor, addiction, mortality, emotional investment in technology, etc.

Phase 1 – Monday 31st
Design the character and produce least 2 animations – the size of the character must be max 32×32 pixels

Determine up to 4 “needs” your pet is going to have and how are they going to be represented.
Determine up to 4 “actions” that the owner can perform on the “pet”, their relation with the “needs” and the effects of abusing or forgetting.

Find a title. Post all the above in the student area.

Phase 2 – Monday 14
Bring all animations and backgrounds.
You will be provided with a boring template.
We’ll see how to control animations with variables, buttons and sounds and graphic interface.

Phase 4 – Wednesday 16
Paolo out of town. Work day, adapt the template to your project, bring a work in progress.

Due date – Monday 21

Comments Off on Assignment: virtual pet Posted in

Assignment: visual sound toy

Make an application that creates a meaningful relationship between sound and visuals. It can be anything between a music visualizer and an instrument.
You will have to perform it in class.

Comments Off on Assignment: visual sound toy Posted in

Assignment: Hypnotic circle (microphone input)

Make an animated mandala/hypno-disc composition using the rotational symmetry algorithms covered last week.

Make it sound responsive!

var input;
var analyzer;
var volume = 0;

function setup() {
createCanvas(600, 600);

// Create an Audio input
mic = new p5.AudioIn();

// start the Audio Input.
// By default, it does not .connect() (to the computer speakers)

function draw() {

// Get the overall volume (between 0 and 1.0)
var v = mic.getLevel();
// “Smooth” the volume variable with an easing function
volume += (v-volume)/3;


ellipse(200, 200, 100,100);
ellipse(400, 200, 100,100);

// Draw an ellipse size proportionally to the volume
var mouthSize = map(volume, 0, 1, 10, 300);

ellipse(300, 300, mouthSize, mouthSize/2);

Some examples














Comments Off on Assignment: Hypnotic circle (microphone input) Posted in

Rotational symmetry – sin cos

Here’s how to use basic trigonometry to position things in a circle:

var numObjects = 10;
var centerX;
var centerY;
var angle = 0;
var distance = 100;

function setup() {
createCanvas(600, 600);
centerX = width/2;
centerY = height/2;


function draw() {

//divide the circle 360 degrees according to the number of objects
var angleObject = 360/numObjects;

for (var i=0;i<numObjects ;i++)
//you can have a circular motion if you sum the same angle to all objects
//angle = frameCount;
//and the speed can be also linked to the object number
//angle = frameCount*i / 2;

//fun with trigonometry and oscillations
//distance = sin(radians(frameCount))*150;

//the sin(angle) cos(angle) has to be
//multiplied by the distance from the center
//because trigonometric functions assume a circle with radius=1
//centerX and centerY is the offset from the top left corner
//remember to convert in radians
var posX = centerX + distance *cos( radians(angleObject*i + angle) );
var posY = centerY + distance *sin( radians(angleObject*i + angle) );

ellipse(posX, posY, 10, 10);


Doing more or less the same without trigonometry and with push/pop transformations


var numObjects = 10;
var centerX;
var centerY;
var angle = 0;
var distance = 100;

function setup() {
createCanvas(600, 600);
centerX = width / 2;
centerY = height / 2;


function draw() {

var angleObject = 360 / numObjects;
for (var i = 0; i < numObjects; i++) {

translate(centerX, centerY);
rotate(radians(i * angleObject + angle));
//or you can draw at 0,0 and translate again
ellipse(distance, 0, 10, 10);


Make an animated mandala/hypno-disc composition using the rotational symmetry algorithms below.

*You have to use at least two .png images with transparency loaded from an external file.
*You can mix bitmap and processing-generated images.
Bonus: use nested for-loops to give the illusion of a 3D tunnel.

Comments Off on Rotational symmetry – sin cos Posted in

Assignment: Order vs. Disorder + noise function

Make a composition with controlled randomness which depicts “order” when the mouseX is on the left side of the canvas, and chaos (randomness) when it is on the right side. The degree of order/chaos should vary gradually with the position of the mouse.

-Use for loops
-Check the example below for reference but don’t make a variation of it. The grade will be mostly based on the originality of your sketch.
-Try using noise instead of random.

This is a simple (boring) example.

    var rows = 12;
    var cols = 12;
    var distanceX = 30;
    var distanceY = 30;
    function setup() {
      createCanvas(400, 400);
    function draw() {
      for (var r = 1; r <= rows; r++) {
        for (var c = 1; c <= cols; c++) {
        var randomness = mouseX/60;
        var randomShiftX = random(-randomness, randomness); 
        var randomShiftY = random(-randomness, randomness); 
        var x = c * distanceX + randomShiftX;
        var y = r * distanceY + randomShiftY;
        rect(x, y, 20, 20);
        //or using the push pop transformation matrix
        var rot = random(-randomness, randomness);
        translate(x, y);
        rect(0, 0, 20, 20);

example with noise function

    var rows = 12;
    var cols = 12;
    var distanceX = 30;
    var distanceY = 30;
    var noiseCounter = 0;
    function setup() {
      createCanvas(400, 400);
    function draw() {
      noiseCounter += 0.1;
      for (var r = 1; r <= rows; r++) {
        for (var c = 1; c <= cols; c++) {
        //this is just the amount the noise is amplified
        var displacement = mouseX/20;
        //3d the noise, a cloud-like series of values changing gradually
        //noise counter is time or the 3rd dimension
        //x and y of the noise depend on the x and y of the square
        var noiseFactor = noise(r/10, c/10, noiseCounter)
        //-0.5 because the noise goes from 0 to 1
        randomShiftX = (noiseFactor-0.5)*displacement;
        randomShiftY = (noiseFactor-0.5)*displacement;
        var x = c * distanceX + randomShiftX;
        var y = r * distanceY + randomShiftY;
        rect(x, y, 20, 20);
        //or using the push pop transformation matrix
        var rot = random(-randomness, randomness);
        translate(x, y);
        rect(0, 0, 20, 20);
Comments Off on Assignment: Order vs. Disorder + noise function Posted in

Rhea Nayyar – Loop drawing

Loop Drawing- Flashy Dancefloor

I actually had this done before class started, I just had many problems trying to upload the file onto my andrew space. My free trial of Fetch had ended so I thought the quickest way to upload would be on my Neocities page but it refused to work properly. Then I tried download Fetch again which failed. Then I remembered FileZilla which ended up working but I kept on putting my index.html file into my “www” folder (like I recall doing with my drawing tool and drawing tool 2.0) which caused my andrew site to crash. Then I got really mad and just threw the entire project folder in there and it worked. Moral of the story is that when in doubt, just put the entire project in the www folder…

Assignment: Pattern

Create an “interesting” code-generated pattern using nested for loops and transformation matrices.
It doesn’t have to be perfectly repeatable and it can have some elements of randomness, but no interactivity or animation yet.

Comments Off on Assignment: Pattern Posted in

Assignment: Branching story

Using Twine write a branching story with one or more of the following features:

Non-human (or better, non-animal) main character
Events out of chronological order
Multiple characters
Poem not prose

Possibly avoid: life simulator, choose your own adventure tropes (walking around in a fictional world, fighting, dying etc.).

Part 1:
Come up with an idea, write the first few paragraph, let’s talk about it in class.
Due Monday September 12th

Part 2:
Deliver an publish your Twine
Due Monday September 19th

Some tips:

Try to limit each block of text to one or two paragraphs

Don’t provide many choices, provide interesting choices

Don’t just think about the content, think about how it could be narrated:
self-aware / self referential?
fist, second, third person?
multiple endings?
multiple beginnings?
Do you control an avatar?
Does it have graphics? What’s the relation between graphics and text?
What’s the general structure?


Queers in Love at the End of the World


A Kiss



Even Cowgirls Bleed

With Those we love alive


Not Twine but related:

80 days


The Matter of the Monster

Save the Date

The Immoral Ms. Conduct

‘Til Cows Tear Us Apart

Coming Out Simulator 2014

Sext Adventure

Here are some other good collections:

Here are some very short examples from a game jam

compilation sites; (not just twine)

free hosting for your twine game;

sources, additional reading, and good places to start on your own;

Comments Off on Assignment: Branching story Posted in

Assignment: Looking outwards

After foraging widely, select three projects in the broadly-scoped field(s) of computational / digital / internet-based/ new-media / emerging media arts.
Choose one project that you admire profoundly (why?), one project that surprised you (why?), and one project that could have been great but disappointed you (why?).

Post your response (as one “new post” in student area) along with a short description of the project, illustrations or video of the project and links.

Due on Wednesday September 7th (Monday is Labor Day)

This is a list of potential starting points:

Motherboard – VICE
Boing Boing
Creative Applications
Creators Project
DIS Magazine
We Make Money Not Art
Vimeo: Processing
Media Art Tube
Processing Exhibition
This is Colossal
Today and Tomorrow
Turbulence (older stuff)
Transfer Gallery
Bitforms Gallery
FACT Gallery
Ars Electronica winners and finalists
My personal, very incomplete best-of digital/new media art

Comments Off on Assignment: Looking outwards Posted in

Assignment: Art Web Page


Using Newhive and heterogenous media (either found or original) make a scrollable multimedia page. It can be personal page for an online persona, a visual essay/poem about an aspect of technology, or a more formal experimentation.
Make something that cannot be made on another medium.

Due to Wednesday 7 (Monday is Labor day)

Comments Off on Assignment: Art Web Page Posted in

Readings: Program or be programmed + Dads

Program or Be Programmed – Introduction by Douglas Rushkoff
The Dads of Tech by Astria Taylor and Joanne McNeil

And leave a thought in the comment section below relating the two texts. I want more than a summary or a personal reaction (I agree/I disagree).
You can start from these questions:

Can you think of an example of a computational system or artifact that “programs” our lives or deeply affect our society? What are its bias and problems (if any)? Can you envision a better alternative?

How do you think your gender affected your relation to technology and programming?

Astria Taylor’s and Joanne McNeil’s article is full of references to people, events, and controversies you may not be familiar with. Pick one and do some research around it.
Example: “telephone girls”

Reading: Remix and remixability

Brian Jungen - prototypes for new understanding. Aboriginal masks made with deconstructed Nike shoes Brian Jungen – prototypes for new understanding. Aboriginal masks made with deconstructed Nike shoes

PDF Manovich – Remixing and remixability

This is a short essay by Lev Manovich a prominent media theorist. Read it and write some thoughts in the comments section below. Here are some starting points:

* We live in a ‘remix’ culture. Are there limits to remixing? Can anything be remixed with anything? Shall there be an ethics of remixing?

* Can you think of some non-digital artist (besides DJs) using sampling and remixing as core strategy in their practice?

* Can you imagine a form of remix that doesn’t exist now but may exist in 5, 10 or 20 years?