SectionD – Page 3 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project_11_landscape

//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D

// the general idea of this project is presenting an array of buildings 
//which are on the hill and are coverd by trees.

var buildings = [];
var trees = [];
var noiseParam = 0;
var noiseStep = 0.02;
var hillHeight = [];
// var clouds = [];   
// var land = [];
// var cX = random(100,200);
// var cY = random(100,200);


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

    //hill
    for (var i = 0; i <= width/3; i+=1){
       
        var n = noise(noiseParam);

        var value = map(n,0,1,0,width);    

        //hillHeight.shift();

        hillHeight.push(value);

        noiseParam += noiseStep;

        
    }

    //buildings
    for(var i = 0; i < 10; i ++){
        var rx = random(width);
        buildings[i]=makeBuilding(rx);
    }

    frameRate(10);
    
}

function draw(){
    background(144,232,232);

    //sun
    fill(223,242,136);
    circle(400,50,50);

    //hill
    noStroke();

    var n = noise(noiseParam);

    var value = map(n,0,1,0,width);    

    hillHeight.shift(); //update value in array

    hillHeight.push(value);

    noiseParam += noiseStep;
    
    for (var i = 0; i < width/5 ; i += 1){

        fill(50,120,20); //square shape
        beginShape();
        vertex(5*i,hillHeight[i]);
        vertex(5*i+5, hillHeight[i+1]);
        vertex(5*i+5,height);
        vertex(5*i,height);   
        endShape(); 
    }



    //displayHorizon();
    
    //buildings
    updateBuildings();
    removeBuilding();
    addNewBuilding();

    //tree
    
    updateTrees();
    removeTrees();
    addNewTrees();
    
    fill(181,170,156);
    rect(0,460,480,30);
  

}

//horizon

function displayHorizon(){
    stroke(0);
    line(0,height-50,width,height-50);
}



//buildings

function updateBuildings(){
    for (var i = 0; i < buildings.length; i ++){
        buildings[i].move();
        buildings[i].display();
    }
}

function removeBuilding(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i ++){
        if (buildings[i].x + buildings[i].breadth > 0){
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;

}

function addNewBuilding(){
    if(random(0,1)<0.03){
        buildings.push(makeBuilding(width-2));
    }

}

function buildingMove(){
    this.x += this.speed;
}

function makeBuilding(birthLocationX){
    var bldg = {
        x:birthLocationX,
        y:random(400,450),
        breadth:random(30,50),
        r:random(255),
        b:random(255),
        g:random(255),
        speed : -2.0,
        nFloors : round(random(2,6)),
        move:buildingMove,
        display:buildingDisplay
    }
    return bldg;
}



function buildingDisplay(){
    var floorHeight = 25;
    var bHeight = this.nFloors*floorHeight;
    fill(this.r,this.g,this.b);
    stroke(0);
    push();
    translate(this.x,this.y);
    rect (0,-bHeight-10,this.breadth,bHeight);
    stroke(200);
    for(var i = 0; i < this.nFloors; i ++){
        fill(this.r+10,this.g-20,this.b+50);
        //rect(5,-15-(i*floorHeight),this.breadth-10, 10);
        rect(5,-20-(i*floorHeight),this.breadth-10, 10);
    }
    pop();
}

//tree

function updateTrees(){
    for (var i = 0; i < trees.length; i ++){
        trees[i].move();
        trees[i].display();
    }
}

function removeTrees(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i ++){
        if (trees[i].x + trees[i].breadth > 0){
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;

}

function addNewTrees(){
    if(random(0,1)<0.1){
        trees.push(makeTrees(width+30));
    }

}

function treeMove(){
    this.x += this.speed;
}

function makeTrees(birthLocationX){
    var tree = {
        x:birthLocationX,
        y:random(400,450),
        treeHeight:random(30,150),
        breadth:random(10,20),
        width:random(50,80),
        r:random(100,120),
        b:random(120,130),
        g:random(150,255),
        speed : -5.0,
        move:treeMove,
        display:treeDraw,
    }
    return tree;
}



function treeDraw(){
    var treeHeight;
    
    push();
    translate(this.x,this.y);
    fill(128,101,64);
    rect(0,0,10,50);
    fill(this.r,this.g,this.b);
    ellipse (0,0,this.width,treeHeight);

    pop();
}

I would like to present building on hills which are cover by trees.

LO_11_Women Practitioners

In this week’s topic, I found a very interesting project called “ Clothing for Moderns” created by artist Lea Albaugh.

The link is here : http://www.instamatique.com/clothing-for-moderns.html
And here : https://www.hcii.cmu.edu/people/lea-albaugh

Lea Albaugh is a PhD student in HCI institute of CMU. This is not too much description on the web but I guess her major working field is Human Computer interaction. She is also an augmented fashion designer and game developer.
Her major studying field makes her project very interesting.
In this project, she mainly talked about women’s expression in public space, especially spaces prevailed by male leaders/supervisors. She uses cloth and actuators to build wearables that can potentially “speak”.
I think the general idea of this project is very crucial. As a woman, I frequently found myself judging my personal expression. Sometimes, I felt I speak too much in public and in a team work environment and sometimes I doubt myself speak too little in a conflict situation.
By writing this LO, I doubt males also do the same thing frequently. This is the reason I want to talk about this project. It reminds me, as a female, sometimes, expression itself is not only related to words, facial expressions and actions.
This project offers me a new look for my own situations.

Project-11

sketch

var buildings = [];
var people = [];
var hillVar= 0.009

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(10, 50);
        buildings[i] = makeBuilding(rx);
        people[i] = makePeople(rx);
    }
    frameRate(10);
}


function draw() {
    background(33, 28, 77);
    drawHill() 


    
    displayStatusString();
    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

    updateAndDisplayPeople();
    removePeople();
    addNewPeople()

    drawTrainCart()
}

function makePeople(birthLocationX) {
  var k ={x: birthLocationX,
    breadth:round(random(9,15)),
    speed:-4,
    peopleHeight:round(random(24,30)),
    move:peopleMove,
    display:peopleDisplay,
    color:color(random(50,240),random(50,240),random(50,240))}
    return k 
}

function peopleMove() {
  this.x += this.speed
}

function peopleDisplay() {
  push();
  fill(this.color)
  translate(this.x, height-190);
  strokeWeight(1);
  stroke(0);
  ellipse(-0,this.peopleHeight/2,this.breadth,this.peopleHeight) //body
  fill(160)
  ellipse(0,-this.peopleHeight/2+13,8,8) //head
  pop()
}

function updateAndDisplayPeople(){
  for (var i = 0; i <people.length; i++){
    people[i].move();
    people[i].display()
  }
}
function removePeople(){
  var peopleToKeep = [];
  for (var i = 0; i <people.length; i++){
    if (people[i].x+people[i].breadth>0){
      peopleToKeep.push(people[i])
    }
  }
  people = peopleToKeep
}

function addNewPeople(){
  var newPeopleLikelihood=0.1;
  if(random(0,1)<newPeopleLikelihood){
    people.push(makePeople(width));
  }
}

function drawTrainCart(){
  noStroke()
  var cartwidth = 70
  fill(66, 85, 102)
  rect(0,0,cartwidth,height)
  rect(480-cartwidth,0,cartwidth,height)
  rect(cartwidth,0,width-(cartwidth*2),50)
  fill(161, 104, 80)
  quad(cartwidth,height-120,width-cartwidth,height-120,480,480,0,480)
  

  push()
  //drink
  fill(232, 184, 100)
  quad(320,460-10,315,430-10,365,430-10,360,460-10)
  arc(340,460-10,40,13,0,PI,OPEN)
  fill(210, 184, 100)
  ellipse(340,430-10,50,15)

  //cup
  fill(255,255,255,80);
  quad(320,460-10,310,400-10,370,400-10,360,460-10)
  stroke(174, 203, 230)
  strokeWeight(4)
  line(320,460-10,310,400-10)
  line(370,400-10,360,460-10)
  arc(340,460-10,40,13,0,PI,OPEN)
  fill(191,151,135)
  ellipse(340,400-10,60,17)

  noStroke()
  fill(255, 246, 199,32)
  quad(140,0,340,0,500,480,-20,480)

  pop()


 }

function drawHill() {
  push()
  noStroke()
  fill(6, 31, 12)
  beginShape()
  for (var h = 0; h<width; h++){
    var a = (h*hillVar)+(millis()*0.0002)
    var y = map(noise(a),0,1,height/8,height/9*5);
    vertex(h,y)
  }
  vertex(480,480);
  vertex(0,480)
  endShape()
  pop()
}

function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
        //trees[i].move();
        //trees[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.008; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
  push()
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(12, 12, 51); 
    stroke(185); 
    push();
    translate(this.x, height - 170);
    rect(0, -bHeight, this.breadth, bHeight);
    noStroke()
    triangle(0,-bHeight+1,0+(this.breadth/2),-bHeight-10,this.breadth,-bHeight+1)
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
      fill(247, 235, 111)
      strokeWeight(random(0.1,2))
      rect(5, -15 - (i * floorHeight), this.breadth - 10,5);
    }
    strokeWeight(3)
    line(0+(this.breadth/2),-bHeight-10,this.breadth+5,-bHeight+1)
    line(0+(this.breadth/2),-bHeight-10,-5,-bHeight+1)
    pop();
}



function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0,height-170, width, height-170); 
    fill(40, 40, 41)
    rect(0,height-170,width,170)
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Buildings = " + buildings.length;
    text(statusString, 5,20); 
}

I was inspired by the view of Hong Kong where there are many skyscrapers but they are always accompanied by a mountain in the backdrop. All of Hong Kong’s major financial districts are close to tall mountain ranges. This creates a very interesting composition in my opinion. I included the people of varying height and color to suggest how crowded it is in Hong Kong. The image shows a person viewing out of a train that has a table attached to the window drinking a glass of apple juice. The surrounding is dark and I think that helps the image tells a more interesting story.

LO-11

Eva Schindling explores the boundaries of technology, science, design, and art through her large collection of projects. Her projects include sculptures, digital imagings, and software systems. I was particularly interested in her work that involves physics and science that affects our daily lives such as sound, light, and motion. Schindling demonstrates superb data visualization skills in her project, Liquid Sound Collision. The software uses fluid dynamic qualities to visualize and mix sound. The relationship between the amplitude of the music and the velocity of the water creates a visually and auditory stunning piece of work. I found her other project, “Ana + Kata”, very interesting. She explores 4-dimensional relationships and represents them as solid volumes. The resulting solids resemble ghosted volumes that feel like an optical illusion. It feels intuitive at first to understand the shape, but upon careful inspection, some lines don’t match up and create a very interesting illusion. I feel that this piece of work has really captivated me with how I could interpret the work.

http://www.evsc.net/category/home

LO – 11

For this week’s looking outwards focusing on Women Practitioners, I decided to research into Angela Washko, who ‘is an artist, writer, and facilitator devoted to creating new forums for discussions of feminism in the spaces most hostile toward it.’ I thought that because she purposefully works in realms and topics of feminism and is currently a tenure-track Assistant Professor of Art at Carnegie Mellon University, it would be especially appropriate for this week’s prompt.

I looked at her project The Game: The Game, which explores and presents the issues and circumstances present around the practices of male pickup artists, which is then presented in the format of a dating simulator. It provides an interesting and female centric look at the social constructs of dating and the systematically dangerous and manipulative implications of the culture. It provides a very interesting look into the language and social formalities of ‘pick-up’ culture and its psychological/predatory implications.

I really liked the way she chose the explore the topic through a somewhat morbid lens without holding back or romanticizing the issue, particularly because dating simulators tend to over-romanticize certain behaviors that the audience as a whole could do to become more critical of. The interactive quality of the game brings another layer of immersion into the game as well, illustrating how well the medium supports the topic/issue that is being presented.

Project 11 – Generative Landscape

One of my hobbies is collecting adorable dolls, especially teddy bears. I like to decorate my boring room with dolls like teddy bears to lighten up the mood. I have always imagined a shop specifically for teddy bears, so I decided to create a visual of my dream shop in this project. The unique part of this shop is that it has a teddy bear conveyor belt. This conveyor belt has different types of teddy bears with different colors and characteristics. I have made the shop colored in shades of beige to really focus on the bright colors of the teddy bears.

sketch

//Stefanie Suk
//15104 Section D

var brownTeddy;
var blueTeddy;
var pinkTeddy;
var purpleTeddy;
var redTeddy;

var base = []; //array for base under teddy bears
var x; //position of base
var speed;

var cloudX = 60;
var cloudY = 100;

var teddyBears = 
["https://i.imgur.com/VdXQHac.png",
"https://i.imgur.com/l87wQNo.png",
 "https://i.imgur.com/1xcChWa.png",
 "https://i.imgur.com/olZHcs2.png",
 "https://i.imgur.com/pW0wt4W.png"]

function preload(){ //preloading teddy bear images 
    brownTeddy = loadImage(teddyBears[0]);
    blueTeddy = loadImage(teddyBears[1]);
    pinkTeddy = loadImage(teddyBears[2]);
    purpleTeddy = loadImage(teddyBears[3]);
    redTeddy = loadImage(teddyBears[4]);

    clock = loadImage('https://i.imgur.com/QBWxgao.png');
    tablePattern = loadImage('https://i.imgur.com/jZoPb4m.png');
}

function setup() {
    createCanvas(450, 450);
    frameRate(17);

    var dist = 0;
    for (var i = 0; i < 500; i++){ //creating 500 variations of teddy bears
        base[i] = varBase(dist);
        dist += 200; //dist of base and teddy bears
    }
}

function draw(){
    //drawing shop
    drawShop(); 
    //drawing clock
    image(clock, 355, 50);
    //drawing pattern on conveyor table
    image(tablePattern, -150, 325, 310, 13);
    image(tablePattern, 157, 325, 310, 13);
    //drawing cloud
    drawCloud();
    translate(200, -20);
    drawCloud();
    translate(-100, 30);
    drawCloud();
    //drawing base and belt
    showBase();
    conveyorBelt(); 
}

//drawing teddy bear shop
function drawShop(){
    noStroke();

    //back wall
    fill(234, 224, 212);
    rect(0, 0, width, 235)

    //window
    fill(113, 207, 230);
    rect(20, 20, 300, 250);

    //four borders of window
    fill(80, 46, 46);
    rect(20, 20, 300, 10);
    rect(20, 260, 300, 10);
    rect(20, 20, 10, 250);
    rect(320, 20, 10, 250);
    //division of window
    rect(220, 20, 5, 250);
    rect(20, 140, 300, 5);

    //conveyer belt
    fill(88, 87, 86);
    rect(0, 235, width, 90);

    //bottom conveyor belt table
    fill(214, 196, 173);
    rect(0, 325, width, 180);

    //text on conveyor belt table
    textSize(25);
    textStyle(ITALIC);
    fill(89, 80, 68);
    text('S.S Teddy Bear Shop', 110, 395)
  
}

//drawing cloud in window
function drawCloud(cloudx, cloudy) {
    noStroke();
    fill(255);
    ellipse(cloudX,cloudY,30);
    ellipse(cloudX+10,cloudY+10,30);
    ellipse(cloudX+20,cloudY-10,50,40);
    ellipse(cloudX+30,cloudY+5,30);
}

//variables for base
function varBase(basex){
    var base = {x: basex,
                basey: 275,
                basew: 120,
                baseh: 70,
                display: createBase,
                move: moveBase,
                speed: -8.0,
                teddyBears: random([brownTeddy, blueTeddy, pinkTeddy, purpleTeddy, redTeddy]) //random teddy bears appear on conveyor belt
    }
    return base; 
}

function createBase(){

    fill(209, 165, 109);
    ellipse(this.x, this.basey, this.basew, this.baseh); //drawing circular base under teddy bears


    //creating different varieties of teddy bears
    if(this.teddyBears == brownTeddy){
        image(brownTeddy,this.x-42, 180, brownTeddy.width*1.5, brownTeddy.height*1.5);  
    }
    if(this.teddyBears == blueTeddy){
        image(blueTeddy,this.x-42, 170, blueTeddy.width*1.5, blueTeddy.height*1.5);  
    }
    if(this.teddyBears == pinkTeddy){
        image(pinkTeddy,this.x-42, 175, pinkTeddy.width*1.5, pinkTeddy.height*1.5);  
    }
    if(this.teddyBears == purpleTeddy){
        image(purpleTeddy,this.x-42, 165, purpleTeddy.width*1.5, purpleTeddy.height*1.5);  
    }
    if(this.teddyBears == redTeddy){
        image(redTeddy,this.x-42, 180, redTeddy.width*1.5, redTeddy.height*1.5);  
    }

}

//calling move and show function of base
function showBase(){
    for(var i = 0; i < base.length; i++){
        base[i].display();
        base[i].move();
    }
}

//speed of base on conveyor best
function moveBase(){
    this.x += this.speed; 
}

function conveyorBelt(){
    for(var i = 0; i < 400; i++) { 
        var moveBelt = i * 25;
        line(x + moveBelt, height, x * moveBelt, height);
    }
    x += speed;
}

Looking Outwards 11 – A Focus on Women Practitioners

Camille Utterback is an artist who creates digital and interactive art. She is currently an Assistant Professor of Art Practice in the Department of Art & Art History, as well as Computer Science in the Department of Engineering at Stanford University. She holds a bachelor’s degree in Art from Williams College, and a Masters degree from The Interactive Telecommunications Program at New York University’s Tisch School of the Arts. Utterback’s works explore the different possibilities of relation between computational systems and human movement. She focuses and studies the beauty of body and physicality into her works. In this Looking Outwards, I want to talk about Utterback’s interactive installation called Entangled. This artwork encourages audiences to interact with slightly translucent screens that project images on both sides. Body movements of the audiences cause images of computer cables, earbuds, ropes, and other different types of cords to form and disappear on the corresponding side’s projection. What I really admire about this installation is that it not only allows an interaction between the installation and audience, but also allows interaction between the audience and audience. The fact people can see other people’s body movements through the translucent screens amazes me that a single installation can show many different explorations like embodied relationships, depth, and volumetric complexity.

Website: http://camilleutterback.com/projects/entangled/

Video of Camille Utterback’s Entangled

LO: A Focus on Women Practitioners

As a fellow female, I love how this week’s LO is focused on women. While I was looking through the list, Camille Utterback caught my eye because she creates interactive artworks and installations. Utterback has a master’s degree from the Interactive Telecommunications Program at NYU’s Tisch School of the Arts. She is currently an Assistant Professor of the Art and Art History Department at Stanford University. This one project by Utterback, Flourish, particularly got my attention. It is a 70-foot long site-specific artwork commissioned by the Liberty Mutual Group. Flourish combines interactive installation through the projection onto multiple layers of glass. It consists of seven, double-layered five by eight-foot glass panels. It has three interactive panels in which it reacts to a viewer’s position in front of the glass. Flourish represents how fluidity can flow through a linear composition and its references to life, creativity, and growth. Working with different glass techniques, the glass reflects and interacts with one another to create a special experience that can only be experienced in-person. The colors are so bright and playful and the shapes have such fluidity.

Camille Utterback: http://camilleutterback.com/

Flourish (2013): http://camilleutterback.com/projects/flourish/

Project 11- Generative Landscape

sketch Download

//Jessie Chen
//D
//Project 11
//Generative Landscape

var kiki = [];
var stars = [];
var clouds = [];
var animation = 0;

function preload() {
    //loads kiki animation frames
    var kikiFrames = [];
    kikiFrames[0] = "https://i.imgur.com/LxKITCM.png";
    kikiFrames[1] = "https://i.imgur.com/535FqDb.png";

    for (var i = 0; i < kikiFrames.length; i++) {
        kiki[i] = loadImage(kikiFrames[i]);
    }
}


function setup() {
    createCanvas(400, 300);
    imageMode(CENTER);
    frameRate(5);
    noStroke();

    //create an initial collection of stars
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height)
        stars[i] = makeStars(rx, ry);
    }

    //creates an initial collection of clouds
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height);
        clouds[i] = makeClouds(rx, ry);
    }
}

function draw() {
    background(39, 36, 55);

    //draws the moon
    fill(233, 220, 152);
    ellipse(200, 150, 200, 200);


    updateStars();
    removeStars();
    addNewStars();

    updateClouds();
    removeClouds();
    addNewClouds();

    //plays kiki animation
    image(kiki[animation%kiki.length], 200, 150, 270, 200);
    animation ++;
}

//update positions
function updateStars() {
    for (var i = 0; i < stars.length; i++) {
        stars[i].move();
        stars[i].display();
    }
}

//remove stars that have gone off canvas
function removeStars() {
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++) {
        if (stars[i].x < width) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}
//add new stars from the left
function addNewStars() {
    var newStarLikelihood = 0.05; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStars(-10, random(0, height)));
    }
}

//stars move to the right
function starsMove() {
    this.x += this.speed;
}

//draws stars
function starsDisplay() {
    fill(233, 220, 152, 100);
    ellipse(this.x, this.y, this.size + 10);
    fill(233, 220, 152)
    ellipse(this.x, this.y, this.size);
}

//stars object
function makeStars(startX, startY) {
    var star = {x: startX,
                y: startY,
                speed: 0.5,
                size: random(2, 5),
                move: starsMove,
                display: starsDisplay}
    return star;
}

//update positions
function updateClouds() {
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

//remove clouds that have gone off canvas
function removeClouds() {
    var cloudToKeep = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x < width + 100) {
            cloudToKeep.push(clouds[i]);
        }
    }
    clouds = cloudToKeep;
}

//add new clouds from the left
function addNewClouds() {
    var newCloudLikelihood = 0.05; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(-100, random(0, height)));
    }
}

//clouds move to the right
function cloudsMove() {
    this.x += this.speed;
}

//draws clouds
function cloudsDisplay() {
    fill(102, 94, 110, 60);
    noStroke();
    arc(this.x, this.y, 25 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 10, this.y, 25 * this.size, 45 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 25, this.y, 25 * this.size, 35 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 40, this.y, 30 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
}

//clouds object
function makeClouds(startX, startY) {
    var cloud = {x: startX,
                y: startY,
                speed: 2,
                size: random(0, 8),
                move: cloudsMove,
                display: cloudsDisplay}
    return cloud;
}

This was inspired by Kiki’s Delivery Service by Studio Ghibli. I used Procreate to draw out the animation frames of Kiki and imported them to my code to create a little animation. I was reminded of this scene where she flew on her broom at night, so I decided to base the project on that. As she flies through the sky, accompanied by her cat, Jiji, she moves through clouds and passes stars.

Looking Outwards 11

The Pack
Emily Gobeille

Emily Gobeille is an accomplished artist and designer interested in the way that children learn and play. A co-founder of Design I/O, she works to create immersive, interactive installations and experiences for museums, galleries, and more. She also plays a significant role in developing video games like The Pack, a strategy and logic-based game that aims to give players experience with computational thinking concepts. Within the game, players must explore a fantasy world, befriending creatures that act as algorithms to change the world around them. The game’s visual design makes it accessible to younger and more diverse audiences, helping a wider range of players grasp complex concepts. Gobeille’s intrigue with children’s education is reflected in her own child-like creativity that shines through in the vibrance of her work.