In my search for precursor projects to our final project, I decided to research different apps. From my search, I found an app created by Toca Boca (https://tocaboca.com/about/) called Toca Life and Stack! created by Ketchapp. Because our project is going to be more of a cause and effect based project, I found that the apps that I found followed very closely to the goals that we initially wanted.
Below is an introductory video that gives you a feel of what kinds of products Toca Boca makes.
The apps that Toca Boca creates cater more to younger children and letting them interact with a virtual world while also simultaneously teaching them lessons in a more fun and dynamic way. The apps are simple enough for young children to use while also visually appealing.
The next app, Stack! helps as a precursor because in our final project, we wanted to implement a game where particles are being dropped from the top of the canvas onto a platform in the lower part of the canvas. This app encompasses exactly that as it has blocks that fall from the top of the screen onto a separate canvas. However, where the goal in this app is to stack the blocks as high as possible, the goal in our project’s game will be to gather different types of ingredients for a new recipe that the character makes.
Project Manifesto: “For our project, we are creating a two-part immersive experience that’s part-“choose your own adventure” and part-platform game. The premise brings back an earlier character Hamza created in the early days of the class, Carl, whose goal is to make a nice, home-cooked meal for his girlfriend Carla. But, it has to be perfect. In a choose-your-own-adventure game, you’ll have the option to check the fridge for ingredients, or travel to a new country to pick some more rare ingredients. There’ll also be information on these pages about these ingredients. We’ll create these pages on Illustrator and use a series of key presses to activate each ones. (see diagram below).
Players will “cook” the meal through a platform game where they use a plate to catch the ingredients to make the “perfect” meal (see below). Once the stack reaches a certain height, the game ends with an image of the final meal in its finest presentation.
NSynth is Google Magenta’s—a small team of Google AI researchers —latest project. Their main pitch was that this new system will provide musicians with an entirely new range of tools for making music. It take different sounds from different instruments, and blends them together creating an entirely new sound as the creator can also alter how much of one sound is used.
/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 11: Turtle...anything*/
var myTurtle;//global variable for defining a new name for the turtle
function setup() {
createCanvas(330,400);
background(0);
noLoop();
myTurtle = new makeTurtle(width/2-50,20)//the turtle
}
function draw() {
var dragon = dragonCurve(14);//variable to substitute in for function
turtleDraw(dragon,200,90,2);//drawing the line
}
function dragonCurve(depth){//using L-system logic to create pattern
if(depth === 0){
return 'FX';}
var turtle = dragonCurve(depth - 1);
var newTurtle = '';
for(var i = 0; i < turtle.length; i++){
if(turtle.charAt(i) === 'X'){
newTurtle += 'X+YF+';
}
else if (turtle.charAt(i) === 'Y'){
newTurtle += '-FX-Y';
}
else {
newTurtle += turtle.charAt(i);
}
}
return newTurtle;
}
//------------------------------------------------
function turtleDraw(text, startx, starty, length) {//using turtle functions to draw out the patterns
var direction = 0;
var x = startx;//initial horizontal position of line
var y = starty;//initial verticle position of line
for(var i = 0; i < text.length; i++){
if(text.charAt(i) === 'F'){
//'F', draw forward length in direction
var endx = x + length * Math.cos(direction * 0.017453292519);
var endy = y + length * Math.sin(direction * 0.017453292519);
var red = x/400 * 255;
var green = y/400 * 255;
var blue = (x + y + 300)/400 * 255;
c = stroke(red,green,blue);
myTurtle.setColor(c);//setting gradient color of lines
line(x,y,endx,endy);//drawing the line
x = endx;//reinitializing to new horizontal position
y = endy;//reinitializing to new verticle position
}
else if(text.charAt(i) === '-'){
//90 degrees added to direction
direction += 90;
}
else if(text.charAt(i) === '+'){
//90 degrees substracted from direction
direction -= 90;
}
}
}
//-------------------------------------------------------
//other turtle functions
function turtleLeft(d){
this.angle-=d;
}
function turtleRight(d){
this.angle+=d;
}
function turtleForward(p){
var rad=radians(this.angle);
var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;
this.goto(newx,newy);
}
function turtleBack(p){
this.forward(-p);
}
function turtlePenDown(){
this.penIsDown=true;
}
function turtlePenUp(){
this.penIsDown = false;
}
function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);
}
this.x = x;
this.y = y;
}
function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));
}
function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;
}
function turtleTurnToward(x,y,d){
var angle = this.angleTo(x,y);
if(angle< 180){
this.angle+=d;
} else{
this.angle-=d;
}
}
function turtleSetColor(c){
this.color=c;
}
function turtleSetWeight(w){
this.weight=w;
}
function turtleFace(angle){
this.angle = angle;
}
function turtleReset(){
this.reset = 0;
}
function makeTurtle(tx,ty){
var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace,
reset:turtleReset};
return turtle;}
In searching for inspiration, I happened across the notion of the L-systems. I really liked how the visual of this specific patterned looked and wanted to try it out for myself. Although I did find resources to help me with the L-systems logic to generate the pattern because of its specific equations and such, I found that the over code was pretty straightforward in its use of the turtle graphics functions.
I chose to research the works of artist Filipa Valente for this Looking Outwards blog. What most caught my eye when I was perusing the list of women artists, was that Filipa’s works were that of architectural lighting. For me personally, I am currently an architecture student but I am also very interested in the aspects of lighting design and how they can be implemented into the user’s experience and such.
another example of Filipa’s work
Her work, Filtered Transparencies, is an interactive art installation that uses layered light, space and sound to create an immersive experience. The installation uses projected imagery and a maze of transparent screens to blur physical spatial boundaries and transports its users into an augmented hologram-like environment.
The installation’s structure is designed to become ‘invisible’ and traversable – an architectural void into which the illusion of mass and dimensionality emerge. Users can interact with the space as well by altering the projected content, and switching environments.
/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 10: Generative Landscapes*/
var sushiArray = [];
var sushiFrames = 0;
var sushiFrequency = 110;
function setup() {
createCanvas(500,200);
background(252,245,229);
frameRate(10);
}
function draw() {
setting();
drawBelt();
updateSushi();
displaySushi();
addSushi();
makeSushi();
moveSushi();
}
function updateSushi() {
for (var i = 0; i < sushiArray.length; i++){
sushiArray[i].move();
sushiArray[i].display();
}
}
function addSushi() {
var a = random(1);
if (a < 0.05) {
sushiArray.push(makeSushi(width));
}
}
function moveSushi() {
this.x += this.speed;
}
function displaySushi() {
push();
translate(this.x, this.height);
for (var i = 0; i < this.number; i++){
drawSushi();
}
pop();
}
//sushi
function drawSushi(){
noStroke();
fill(210);
ellipse(20, height/2+25,35,35);//plate..?? how to make sushi move sideways?
fill(255);
rect(13,height/2+20,15,10,5);
fill('red');
rect(13,height/2+15,15,10,5);
}
function makeSushi(posX) {
var sushi2 = {x: posX,
number: floor(random(1,3)),
speed: -4,
height: 10,
move: moveSushi,
display: displaySushi}
return sushi2;
}
//setting/background context
function setting() {
for (var i = 0; i < 5; i++){
noStroke();
fill(139,33,12);
rect(width/5*i+25,height/2-55,45,75,5);//chairs
}
}
//conveyor belt
function drawBelt() {
noStroke();
fill(138,138,137);
rect(0, height/2-20, width, 90);
fill(0);
rect(0, height/2-10, width, 70);
}
I decided to take a little spin off the landscape project and made a moving conveyor belt that brings out little plates of sushi. I wanted to apply the same concept of the moving landscape to a more real-life situation and perhaps make it a bit more amusing.
I was very inspired by the Looking Outwards blog written by my peer Hamza Qureshi. Like Hamza, I am interested in the possibilities of design through user experiences and architecture, and found that this specific project exemplified just that. Artist Taeyoon Choi has skills in both the arts and computational coding, so he combines those skills to create something useful to all who come across his works. From Hamza’s blog post, Choi coins this term ‘poetic computation‘, in which it “allows an artist to intervene in a social space to use digital and computational tools to reorganize and reparametrize that space.”
In his project, Choi makes a field recording while making noise with motors and microcontroller in the showroom, often interacting with the shoppers and the products on display. Since it is producing only harmlessly tiny noise, the symbolic importance is gained by paying attention to the noise created within the shop, and also the products, which will become a material noise in near future.
/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 09: Pointilism Portrait*/
//initializing global variables
var img;
var Psmall;
var Plarge;
var x;
function setup() {
createCanvas(480,480);
background(255);
img = loadImage("http://i.imgur.com/lSfjznd.jpg");//loading image uploaded onto imgur
Psmall = 4;//ellipse size; small
Plarge = 20;//ellipse size; large
imageMode(CENTER);
noStroke();
frameRate(50);//speed at which ellipses are drawn
}
function draw() {
var pointy = map(x, 0, width, Psmall, Plarge);//remapping different sizes of ellipses
x = int(random(img.width));//setting random values gained from width of image as integer to use as location of ellipses drawn
y = int(random(img.height));
Pcolor = color(img.get(x,y));//initializing new variable where color of ellipses follows color of image being drawn
fill(Pcolor, 255);
ellipse(x, y, pointy, pointy);//drawing each ellipses
}
I decided to go with a selfie for this project. I chose to use a pose which engages the whole canvas and shows the features of the face. I really enjoyed the concept of this project because it is so abstract, and at the same time fun to see actual images of yourself emerge from a conglomerate of shapes.
London-based artist Mark Farid explores Poisonous Antidoteinan online gallery (Gazell.io) where he offers up his various online presences as 24-hour public portraits over the course of 31 days. He uses data from emails, text messages, phone calls, Skype conversations, and other platforms are then used as fodder for an abstract, ever-evolving 3D-printed sculpture made of four unique parts, each portraying a week of Farid’s life. In his project, he focused on how ones internet personality is established in the form of passwords and other inputs that one might have on the internet about themselves.
From Farid himself, “I’m interested to see how I self-censor and how I change my actions because everything is being broadcast live,” says Farid. “Will I stop saying certain things to certain people? Will I try to look more interesting and fun, so will I go on different websites?”
As his visualization, Farid decided to 3D print the data that he gathered into a solid object, almost like a graph.
Calligraffiti is an art form combining traditional calligraphy with graffiti. In yet another unlikely symbiosis, calligraffitos are now fusing it with new media to render “digital calligraffiti,” which is projected onto the sides of structures. Worked on by refugees, the medium is a part of a community project organized by Public Art Lab. The main idea with this project is to transform the “urban screens” such as subways and building exteriors into communication platforms for immigrants. A lot of these pieces convey messages such as “love not war,” “art is love,” and “no violence.”
From this project, I appreciate how new media art is now also being used as a new platform to raise awareness of social injustice or unnecessary violence. Instead of being just a static installation that lives in a museum, Calligraffiti can be seen in the simplest of neighborhoods and the everyday lives of the citizens who live nearby these pieces.
calligraffiti in actionthe board where people can create their artworkThis man’s calligraffiti is being projected onto the wall right in front of him as he creates the calligraphy
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2020/08/stop-banner.png)
