Showing posts with label Creative Programming. Show all posts
Showing posts with label Creative Programming. Show all posts

Thursday, July 25, 2013

Request Features for Mandelbrot Surfer

Mandelbrot Surfer

Mandelbrot Surfer lets you explore the Mandelbrot Set and discover wonderful fractal images share them with your friends.

New Planned Features

  1. "Record" button -- allows you to record the images as you explore and "Play" button to playback.
  2. "Random Explore" mode -- randomly move in and out of various spots making a nice screen saver.
  3. Toggle sound/music -- goes well with random explore mode.
  4. Share your favourite images with your friends on Facebook / Twitter. (Done for Twitter)
  5. Add other features you'd like to see in comments below.

Wednesday, July 24, 2013

How to mix Javascript and Processing JS

Since Processing code gets converted to JavaScript and run like any other function, all Processing code has access to the global object. This means that if you create a variable or function in a global script block, they are automatically accessible to Processing

See http://processingjs.org/articles/jsQuickStart.html#mixingjsandprocessing

Mandelbrot Surfer

Mandelbrot Surfer

Mandelbrot Surfer lets users explore the Mandelbrot Set and discover wonderful fractal images. Give it a try - you may discover some graphical gems! See image below for an example.

Functionality

  1. Zoom in and out of the image by pressing on the zoom buttons
  2. Change the colors by pressing on the color flower button
  3. Center the image at point by pressing on the point of interest

Potential features 

Let me know which one you like to see first!
  1. "Record" button -- allows you to record the images as you explore and "Play" button to playback.
  2. "Random Explore" mode -- randomly move in and out of various spots making a nice screen saver.
  3. Toggle sound/music -- goes well with random explore mode.
  4. Share a gem -- Share your favourite images on Facebook/Twitter with your friends.
  5. What other features would you like to have?
Sample images from Mandelbrot Surfer:


Friday, July 19, 2013

The Instaspam Week

Capabilities to develop

  1. Accessing the camera on mobile phones
  2. Access Facebook API from within Processing
  3. Use App GUI interface 
  4. Understand PHP and Javascript integration challenges

Gist of the Instaspam design

  1. Take a picture: Provide a button to capture images from files or cameras
    1. Add a Button to the sketch
    2. Link the selectFile() function in insta.js to the button
  2. Manipulate the image: Provide more buttons to manipulate the image
  3. Push image to Facebook: Provide a button to push an image to Facebook in a 2-step process
    1. Upload image in Processing canvas to a file in the cloud (using PHP or something similar)
    2. Push uploaded file to Facebook

Create a Facebook App for Integration

  1. Signup as a facebook developer
  2. Go to https://developers.facebook.com/apps
  3. Create a new app
    • You need own a web site (a place you can upload images)
  4. Get Facebook appId and store into insta.js
  5. Save the channel.php file on your webspace
Challenges
  1. Image manipulation on mobile phones can be slow for large images
 Image Effects
  • Applying tint filter. Tints are useful for:
    • turning a black and white photograph into an old style sepia image
    • making all of the images in your app have a consistent color scheme
  • Apply an overlay. Overlays are useful for:
    • adding a picture frame to your image
    • creating a mist or fog effect
  • Use Buttons:
    • Button b = new Button("name",x,y,w,h);
    • b.setImage(img_active); 
    • b.setImage(img_inactive); 
    • b.display();   // in draw()
    • b.mouseReleased();   // in mouseReleased()
  • Use RadioButtons
  • Use showGUI variable to display buttons only if showGUI is true
    • increases screen space
Image Processing
  • insta.js - allows Processing to access cameras on mobile phones
    • edit index.html
      • <body onload="setupFileListener()">
      • <script src="insta.js"></script>
      • <input type="file" name="file" id="file"/>
    • assign the selectFile() function to a button
      • the function will capture from the camera


Notes

  • alpha = opacity (255: opaque, 0: transparent)

How to publish Processing sketches on iOS app store

Steps to release apps on iOS app store

  1.  get an iOS developer account
  2. use Phonegap to make your JavaScript-based processing sketches into full iOS apps

Beyond Creative Programming

Next Steps

  1. Study Oli Roberts Network Graph to figure out how it works

Notable Works

Notable works


Tuesday, July 9, 2013

AngryBoids - Implementation Workflow

Implementation Workflow

  1. Import required libraries
    1. import jbox2d libraries for Java & Android
    2. for javascript, include the following files in directory
      1. Box2D.js
      2. CollisionDetector.s
      3. Maxim.js
      4. physics.js
  2. Setup physics objects - physics
    1. Setup the start point
    2. Setup the collision detector
  3. Setup audio
  4. Setup graphics
    1. Setup custom rendering function where all drawing is done by physics engine
    2. Layout all the objects
    3. Map complex Graphics shapes to simple Physics objects e.g. boid maps to circle
  5. Setup gameplay score
  6. In the draw():
    1. Update the game score
  7. In mouseDragged();
    1. Set position of objects
  8. In mouseReleased():
    1. Apply impulse to objects
  9. Implement the customRenderer
  10. Implement the collision call back
    1. Check collisions with walls
  11. Elements to be added
    1. Gameplay mechanics
    2. Scoring mechanism
    3. Good artwork
    4. Good audio

Integrating audio and physics

Implementation
  1. Setup One sound for every object
    1. This allows simultaneous sounds for all objects
  2. Setup arrays for similar objects
  3. Setup the appropriate looping for each object
  4. Load all the files e.g. droid, wall and crates
  5. Develop code that triggers each sound

One sound for every object

Maxim maxim;
AudioPlayer droidSound, wallSound;
AudioPlayer[] crateSounds;

Use arrays  for similar objects

crates = new Body[7];
crates[0] = physics.createRect(300, height-crateSize, 300+crateSize, height);

Sound Logic Pseudo-code

test for each object type
  cue player
  set speed of sound based on impulse
  play wall sound



Game Audio - Preparing and playing sound


Game Audio Workflow

  1. Make sound effects
    1. Record sound effects
    2. Trim sound effects and export selection
    3. Save into folder named "fx"
  2. Import data into sketch
    1. Copy to sketch's "data" folder
  3. Code the sound triggering function
    1. See code below
    2. Name the AudioPlayers to remind us of the sound
    3. Code up mousePressed() to quickly test the sound
  4. Parameterize the playback to make it dynamic
    1. So that they are not the same sounds every time they are played
    2. See playSound()


AudioPlayer ping1;
AudioPlayer ping2;
AudioPlayer rumble;

void setup() {
  maxim = new Maxim(this);
  ping1 = maxim.loadFile("ping1.wav");
  ping2 = maxim.loadFile("ping2.wav");
  rumble = maxim.loadFile("rumble.wav");
  ping1.setLooping(false);
  ping2.setLooping(false);
  rumble.setLooping(false);
}

void mousePressed() {
  ping1.play();
  ping2.play();
  rumble.play();
}

void playSound(int sound) {
  if (sound == 1){
    ping1.speed(random(0.1, 2));
    ping1.play();
  }
}

Game Engine - Forces

Gravity

Gravity is automatically built into the world.
Gravity is a vertically downward vector.

Impulse

Impulse is force applied at a moment in time.

Vec2 impulse = new Vec2(2,4);   // 2-right, 4-down
box.applyImpulse(impulse, box.getWorldCenter());

Designing the Catapult Implementation

Impulse

I = C(catapult - ball)

Vec2 impulse = new Vec2();
impulse.set(catapultPos);
impulse = impulse.sub(boid.getWorldCenter());
impulse = impulse.mul(200);

 Collisions are handled by the physics engine.
  • The key knowledge is to know when a collision happened

Collision handler function

void collision(Body b1, Body b2, float impulse) {
  // collision response goes here
}

Physics and Graphics Objects

Physics and Graphics Objects

Physics Objects

Physics objects are made up:
  • Simple Shape
  • Position
  • Angle
  • Mass 

Set up Physics World

physics = new Physics(this, width, height);
physics.setDensity(1.0);
physics.setDensity(0.0);  // Objects won't be affected by physics and they will not move

Creating Physics Objects

Body box = physics.createRect(top-left-X, top-left-Y, bottom-right-X, bottom-right-Y);
Body ball = physics.createCircle(center-X, center-Y, radius);

Graphics Objects

Graphics objects are composed of:
  • Complex Shape
  • Colors
  • Images

Mapping Physics to Graphics

The most important thing is link physics to graphics i.e get position and rotation of physics bodies and apply that.

Vec2 pos = physics.worldToScreen(body.getWorldCenter()); // get object's position
float angle = physics.getAngle(boid);

pushMatrix();
  translate(pos.x, pos.y);
  rotate(-radians(angle));
  image(ballImage, 0, 0, ballSize, ballSize);
popMatrix();

Scaling Units

One meter in physics = one pixel in graphics


Monday, July 8, 2013

Publishing a Processing Javascript project

 I needed to publish the Javascript version of a Processing project but ran into some issues.

 Publishing to firexis.com

First I tried to publish to my own website but it didn't work.

Issue: IIS ignores files with unknown extensions such as .pde.
Resolution: Add MIME Types as below and it now works
  • Extension: .pde
  • Content Type: text/plain 
See the published project here.

Publishing to Google Drive

A simpler way, if you have a Google account is to publish it on Google Drive.
See the published project here.

Reference

Monday, July 1, 2013

A Musical Life - Project Submission for "Creative Programming for Digital Media & Mobile Apps"

A Musical Life

A Colorful Life blends the graphical elements of SonicPainter and John Conway's Game of Life ((http://en.wikipedia.org/wiki/Conway's_Game_of_Life)) to produce a fun and intriguing form of entertainment.

User interaction is rather intuitive:
  1. Users "give life" to cells by dragging the mouse over them.
  2. Once the mouse is released, the Game of Life plays on automatically
  3. The speed of the game can be changed by moving the mouse left (slower) and right (faster).
Video below shows a sample session of A Musical Life.
[Update: Go to http://www.firexis.com/processing/a_musical_life/ for an interactive version without the music - for some reason Javascript version kills the audio.]



Next on todo list is to publish the Javascript version so users can interact with it. -- Done!
Get the code from https://github.com/hoekit/a-musical-life.

Thursday, June 27, 2013

DJTube Design Concepts

Design Concepts

  1. A series of images for animation
  2. Animation playback speed
  3. Synchronizing two audio loop - master loop determines loop of slave loop video and audio
  4. graphics interaction - to determine if mouse hits a record

Implementation Techniques

  1. Where to get images -- Internet Archive, access to huge array of copyright free video
  2. Search for VJ Loops
  3. Split video into individual frames using ImageSaver
  4. .png files are transparent
  5. current frame selects the frame
Synchronizing two audio loops - player 1 is master, player 2 is slave
player2.speed(player2.getLengthMs()/
              player1.getLengthMs());

Using speedAdjust variable to change speed of audio and video:
player1.speed(speedAdjust);
player2.speed(player2.getLengthMs()/
              player1.getLengthMs()*speedAdjust);
currentFrame = currentFrame + 1 * speedAdjust
// mouse interaction changes speedAdjust

Audio Concepts

Audio Concepts

Sample Rate - precision in time, horizontal
Bit Depth - precision in amplitude, vertical dimension

player.speed(1) // 1: normal speed, 2: double the speed
speed = map(mouseX, 0, width, 0, 2)

Audio Control

  • speed
  • stop/start
boolean buttonOn;
if (buttonOn) { fill(255,0,0) }
if (!buttonOn) { fill(,255,0) }


Image commands and concepts

Image commands


Pimage img = loadImage("file.png")
image(img, pos-x, pos-y, size-x, size-y)imageMode(CORNER);
    // CORNER -- Top left of image at pos-x, pos-y
    // CENTER -- Center of image at pos-x, pos-y



Layout Concepts

  • margin
  • layout in columns or rows
// Assuming imageMode(CENTER)
image(img, width/2, margin)
posX = width/2 - margin - img.width/2;   posY = height/2 + margin + img.height/2;
image(img, posX, posY)

Animation Concepts

  • pausing -- use a boolean flag "playing"
boolean playing = false
playing = !playing;  // toggles playing state

Program Template

// Declarations
Pimage [] images; 
int currentPosition = 0;

// void setup()
images = loadImages("Animation_data/movie", ".jpg", 134);
size(images[0].width, images[0].height);

// void draw()
image(images[currentPosition], 0, 0);  // draw the current image

currentPosition += 1;                  // move to the next image
if(currentPosition >= images.length) 
   currentPosition = 0;                // when you get to the end, loop


Design of Sonic Painter

A few key design points that make Sonic Painter great:
  • The key to making it look nice is about having really, really good sound and image integration, so that people really feel that it's interactive.
  • And, also mapping information from one domain to another.
  • What makes a really visual app is really, really good brushes
  • Just because you've got only one input, doesn't mean you should only have those one inputs.
  • You can use symmetry to create order out of something that doesn't look that ordered. The more layers of symmetry you add, the more people find it attractive
Basic idea of Sonic Painter:
  • Draw shapes on the screen
  • They slowly rub each other out
  • There are different brushes
  • As you make a gesture to draw a shape, it plays back and manipulates a sound.
The interactions in Sonic Painter (SP):
Between you and SP
Between objects in SP themselves

Color Design elements:
  • mouse x-position => color red
  • mouse y-position => color blue
  • distance from some point e.g. center => green
  • speed => alpha, lineWidth
Brush Design elements:
  • size of circle changes with speed
  • brush that generates more than one output 
  • Symmetry - eight orders of symmetry!
Sound Design Elements
  • contrasting sounds: ambient vs bells
  • balance the sound volume player.volume(0.25)
  • sound speed
  • sound filter ... ambient sound "brighter" or "darker"
Other Design Techniques:
  • mapping mouse position to color red 
  • constraining variables e.g. lineWidth, constrain()

Where to get audio files?

1. Get them from freesound.org
2. Create them yourself using audacity

Enable Developer Mode on Android

On Android 2.2.1, go to
Settings > Applications > Development > USB debugging (Enabled)