This creative project features a bunny navigating through her daily routines within her house. The whimsical animations aim to captivate children's interest. Through interaction with a blueprint of the house, children can explore each room. Clicking on a specific room prompts the bunny to engage directly with that area. The project utilizes projection mapping technology, implemented with an application called Mad Mapper. Each room and animation was carefully fit to each room of the house to bring life to the character.
Final Prototype Video:
Close Up:
Final animations for project:
Then I had to warp each animation into mad mapper to fit into each house segment.
To make things easier, I made it based on a mouse click instead. When you click on each circle, the click triggers a hide and unhide response. Since the animations are in certain 1,2, and 3 layers, the videos can't play at once.
I placed each video into their own scene so I could properly use my osc code.
Final blue print sketch:
Initially, my idea was to place a bunny on an ipad to trigger the video animation. This did not end up working. I made no accomplishments trying to fix the ipad, so I couldn't get any videos of my progress. I spent days trying to get the ipad and ipencil to work.
video of prototype:
Pictures of the house I used to try to get my illustrations lined up with the projector:
Pictures of prototype:
This was my initial house drawing I used for the animations. For the mapping, it was crucial I split these up in parts so I could fit them accordingly.
Spray Painted the house so I could project on it easier....
This is the house I ended up getting.
Thumbnails:
Initial Sketches and Concept:
Tools/Technology:
-computer screen and mouse
-ipad didn't end up working
-projector(s)
-steel glove tips
-speaker (sound effects and music) didn't end up doing
-mad mapper
-processing
-pedestal
-chat gpt
-In class demo
Final:
-projection on house
-blueprint on ipad didn't end up working
-sounds
Project:
For my project, I am painting a dollhouse and the furniture white. I will project (projectors) onto the inside and outside of the dollhouse (madmapper), when the doll is placed on the blue print (ipad), it will trigger different scenes in the house with the character. this will be placed on a pedestal. Each interaction will have sounds associated, maybe a little song that goes along with it.
Timeline:
-paint house and furniture white
-take a picture of the house, draw illustrations overtop of house for a guide
-work on illustrations, start outside illustrations
-start testing on projector keep making changes
-animate the illustrations
-start testing on projector keep makingchanges
-continue to animate the illustrations
-start testing on projector keep making changes
-finalize projection mapping
Unique:
-everyone loves calico critters
-day in a life of a bunny? towards kids.
-maybe I can make a poster graphic as well if I have time
-sound effects?
-blueprint idea unique to every part of the house
-so cute.
-i really want to project something awesome on the house
Code:
Libraries:
I based my code off of a demo we did in class:
oscP5.*;
import netP5.*;
// OSC server and client
OscP5 osc;
NetAddress madMapper;
void setup() {
//init osc with default ports osc = new OscP5(this, 9000);
madMapper = new NetAddress("127.0.0.1", 8010);
}
void draw() {
}
void keyPressed() {
// create message OscMessage msg = new OscMessage("/surfaces/Quad-2/visible");
if (key == 'a' || key == 'A') {
// add parameter value
msg.add(false); }
if (key == 'b' || key == 'B') {
// add parameter value
msg.add(true);
}
if (key == 'c' || key == 'C') {
// add parameter value msg.add(true);
}
// send it to MadMapper
osc.send(msg, madMapper);
println("key" + msg);
}
void oscEvent(OscBundle bundle) {
println("bundle received!");
for (int i=0;i<bundle.size();i++) {
OscMessage m = bundle.getMessage(i);
//print(m.getAddress());
println(m.get(0)); } }
void oscEvent(OscMessage msg) {
println("message received");
//println(msg.getAddress());
println(msg.get(0)); }
Final Code:
import oscP5.*;
import netP5.*;
import netP5.*;
// OSC server and client
OscP5 osc;
NetAddress madMapper;
OscP5 osc;
NetAddress madMapper;
boolean showQuad1 = true;
boolean showQuad2 = true;
boolean showQuad3 = true;
boolean showQuad2 = true;
boolean showQuad3 = true;
PImage backgroundImage;
color secondBackgroundColor;
color secondBackgroundColor;
void setup() {
size(displayWidth, displayHeight);
// Init OSC with default ports
osc = new OscP5(this, 9000);
madMapper = new NetAddress("127.0.0.1", 8010);
size(displayWidth, displayHeight);
// Init OSC with default ports
osc = new OscP5(this, 9000);
madMapper = new NetAddress("127.0.0.1", 8010);
backgroundImage = loadImage("blueprint.jpg");
secondBackgroundColor = color(200);
}
void draw() {
fill(secondBackgroundColor);
rect(0, 0, width, height);
fill(secondBackgroundColor);
rect(0, 0, width, height);
image(backgroundImage, 0, 0, width, height);
fill(255, 0, 0, showQuad1 ? 255 : 0); // Red for Quad-1
ellipse(100, 200, 50, 50);
fill(0, 255, 0, showQuad2 ? 255 : 0); // Green for Quad-2
ellipse(300, 200, 50, 50);
ellipse(300, 200, 50, 50);
fill(0, 0, 255, showQuad3 ? 255 : 0); // Blue for Quad-3
ellipse(500, 200, 50, 50);
}
ellipse(500, 200, 50, 50);
}
void mousePressed() {
// Check if the mouse is inside the first circle
float d1 = dist(mouseX, mouseY, 100, 200);
if (d1 < 25) {
// Toggle visibility for Quad-1 in MadMapper
showQuad1 = !showQuad1;
sendMadMapperMessage("/surfaces/Quad-1/visible", showQuad1);
}
// Check if the mouse is inside the first circle
float d1 = dist(mouseX, mouseY, 100, 200);
if (d1 < 25) {
// Toggle visibility for Quad-1 in MadMapper
showQuad1 = !showQuad1;
sendMadMapperMessage("/surfaces/Quad-1/visible", showQuad1);
}
// Check if the mouse is inside the second circle
float d2 = dist(mouseX, mouseY, 300, 200);
if (d2 < 25) {
// Toggle visibility for Quad-2 in MadMapper
showQuad2 = !showQuad2;
sendMadMapperMessage("/surfaces/Quad-2/visible", showQuad2);
}
float d2 = dist(mouseX, mouseY, 300, 200);
if (d2 < 25) {
// Toggle visibility for Quad-2 in MadMapper
showQuad2 = !showQuad2;
sendMadMapperMessage("/surfaces/Quad-2/visible", showQuad2);
}
// Check if the mouse is inside the third circle
float d3 = dist(mouseX, mouseY, 500, 200);
if (d3 < 25) {
// Toggle visibility for Quad-3 in MadMapper
showQuad3 = !showQuad3;
sendMadMapperMessage("/surfaces/Quad-3/visible", showQuad3);
}
}
float d3 = dist(mouseX, mouseY, 500, 200);
if (d3 < 25) {
// Toggle visibility for Quad-3 in MadMapper
showQuad3 = !showQuad3;
sendMadMapperMessage("/surfaces/Quad-3/visible", showQuad3);
}
}
void sendMadMapperMessage(String address, boolean show) {
OscMessage msg = new OscMessage(address);
msg.add(show);
osc.send(msg, madMapper);
println("Toggling " + address + " to " + show);
}
OscMessage msg = new OscMessage(address);
msg.add(show);
osc.send(msg, madMapper);
println("Toggling " + address + " to " + show);
}
void oscEvent(OscBundle bundle) {
println("bundle received!");
println("bundle received!");
for (int i = 0; i < bundle.size(); i++) {
OscMessage m = bundle.getMessage(i);
println(m.get(0));
}
}
OscMessage m = bundle.getMessage(i);
println(m.get(0));
}
}
void oscEvent(OscMessage msg) {
println("message received");
println(msg.get(0));
}
println("message received");
println(msg.get(0));
}
