ctv@andrew.cmu.edu – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

ctv Final Project

You are able to type in the box, click it to expand, and move the text box up and down!

var CONTAINERS;
var img;
var img2;
var img3;

function preload(){
    img = loadImage("https://i.imgur.com/SiATbai.png");
    img2 = loadImage("https://i.imgur.com/g9q8qO8.png");
    img3 = loadImage("https://i.imgur.com/zFUnlLi.png");
}

function setup() {
    createCanvas(800, 800);
    CONTAINERS = new aContainer();
}

function draw(){
    background('#165fa8');
    CONTAINERS.display();
}

//////Design and functionality of the text container
function aContainer() {
//////Properties for the individual container
  var state = 0;
  var txt = "";
  this.pos = 0;
  this.h = 100;
  this.color = color('#e2f0fb');
  this.shadow = 1;
  this.r = 20;
  this.txtSize = 34;

//////Save Button Dimensions
      var buttonX = 80;
      var buttonY = 40;
      var buttonX2 = 200;
      var buttonX3 = 500;
      var buttonW = 100;
      var buttonH = 40;

//////Execute the shapes and text when this is called,
//////Calls properties in the section right above
  this.display = function() {
        if(this.pos <= 0){this.pos = 0}
        if(this.pos >= 5){this.pos = 5}
        fill(this.color);
        strokeWeight(0);
        rect(80, this.pos*100+120, 640, this.h, this.r);
        fill(60);
        textSize(this.txtSize);
        textFont("Avenir");
        text(txt, 110, this.pos*100+180);
        fill(240);
        rect(buttonX, buttonY, buttonW, buttonH, 20);
        image(img, buttonX+buttonW/2-17.5, buttonY+2.5, 35, 35);
        rect(buttonX2, buttonY, buttonW, buttonH, 20);
        image(img2, buttonX2+buttonW/2-17.5, buttonY+2.5, 35, 35);
        rect(buttonX3, buttonY, buttonW, buttonH, 20);
        image(img3, buttonX3+buttonW/2-17.5, buttonY+2.5, 35, 35);
  }

//////Function is called when mouse is pressed
//////Only executes if cursor is over the container
  this.pressed = function() {
      if (mouseX > 80 & 
          mouseX < 720 && 
          mouseY > this.pos*100+120 && 
          mouseY < this.pos*100+this.h+120) {
          if(state%2 == 0){
              this.h = 500;
              state++;
          } else if(state%2 == 1){
              this.h = 100;
              state++;      
          }
     }
  }
//////Add the typed key to the string variable 'txt'
  this.keys = function(){
//////If text goes beyond specified width, put text on new line
      txt = txt + key;
      txtWid = textWidth(txt)%500;
      if(txtWid>475){
          txt+= "\n"
      }
//////If the enter key is pressed, put text on new line
      if(keyCode == 13){
          txt += "\n";
      }
//////Ability to delete a letter that is typed
        if(keyCode == 8 & txt.length>0){
            txt = txt.substring(0, txt.length - 2);
        }
  }
///////Adds abbility to press save button
  this.downButton = function(){
      if (mouseX > buttonX & 
          mouseX < buttonX + buttonW && 
          mouseY > buttonY && 
          mouseY < buttonY + buttonH) {
            this.pos++;
     } else if (mouseX > buttonX2 & 
          mouseX < buttonX2 + buttonW && 
          mouseY > buttonY && 
          mouseY < buttonY + buttonH) {
            this.pos--;
     }
  }
//////Make the text box larger
    this.expand = function(){
        if(this.h == 100){
        }
    }
}

function mousePressed(){
    CONTAINERS.pressed();  
    CONTAINERS.downButton();
}

function keyPressed() {
    CONTAINERS.keys();
}

I saw Ryoji Ikeda perform Supercodex Last year, and it was an intense experience. Although his piece was a performance, it was not a musical composition. He used data sets to inform the music and visuals that created the piece. The sound aspect was created entirely by clicks, and each click was distinguishable at the beginning of the piece. As the piece progressed, the click-frequency increased, and became keyed (and un-keyed) tones. Ikeda does not reveal much of his process, but it was clear he was manipulating and abstracting the input data to control and sway the crowd. One part that was neat was to hear the transformation from single clicks into “continuous” square waves. It was beneficial to hear that transformation because it was a good primer for talking about a computer’s process for breaking songs down into samples. Ryoji Ikeda is intense and loud.

Looking Outwards 10

Eva Mattes is an artist living in New York. One project on her website that caught my eye is titled Life Sharing. For the project, she opened the contents of her personal computer to a public internet server. This project is interesting because she places trust in the public to find interest in her personal life. With the piece she comments on privacy, saying that it’s stupid; she blurs the line of visibility of peoples lives. The piece originally is from 2001, just after the turn of the century, but well into the digital age. Mattes is an artist originally from Italy.

http://0100101110101101.org/

Looking Outwards 8

Jessica Rosenkrantz is a lecturer at MIT’s school of architecture. Her talk from 2011 (and her work) is about computationally grown visual forms, based on plant growth structures. I have followed her Instagram (https://www.instagram.com/nervous_jessica/) for a while, and was so excited to see her name on the list. One thing I find most interesting about her work is that she wants to design products that intrigue or reveal a little bit about how it was made. She likes to use the generated forms to create material designs in the real world, as opposed to keeping them in digital space. Another concept that she’s working toward is designing material reactions that have extremely precise properties, so the materials can naturally grow into the form, rather than being 3D printed from a grown model. One product I specifically find interesting is a puzzle that has no edge. She designed a puzzle that can be put together in a very large number of combinations!

Nervous System – Eyeo Festival 2011 from Eyeo Festival // INSTINT on Vimeo.

Looking Outwards – 12

Two pieces of software that are precursors to my project are Google Keep (keep.google.com) and Todoist (en.todoist.com). Google Keep is an awesome program for recording thoughts, but it is not great for organizing, integrating with a calendar, or holding documents. Additionally the interface as a mosaic of “keeps” can be difficult to quickly review. My interface takes a stronger active design voice by following strict guidelines. Todoist is an app centered around productivity. While this is a good approach, the app is still disconnected from a person’s files and internet resources. One dream I would like to include in this project is the ability to pull up bookmarked websites. Although these are not art projects, they are heavily designed computer programs that have the potential to increase the efficiency of working/paper writing. I enjoy this category of product because I am interested in knowledge generation, organization, and research.

Final Project Proposal

I propose to design an interactive todo list. In a previous semester, I designed the visuals and interaction flow of a desktop app. I now want to take that design, and create a proof-of-concept applet. By creating an interactive prototype, the concept can be user-tested. The app will consist of modules that can contain and display a name, a date, and a matrix of content. The content will consist mainly of notes/thoughts/questions taken by the user, but it will additionally contain other documents like imagery. In the interface, users will be able to add new modules, delete modules, rearrange the order of modules, and stack modules inside one another. The user will also have the option to add a photo to be contained in the module. I am excited about having this project be interactive because it will allow me to understand how to make it better. The video included is digitally animated to showcase the interactions offered by the interface.

Project-09 Portrait in Jasper

This is Jasper.

sketch

//Ty Van de Zande
//ctv@andrew.cmu.edu
//Section B
//Project-09

//sorry for not commenting

var underlyingImage;
var dir = 1;

function preload() {
    var myImageURL = "https://i.imgur.com/xIecQsR.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(420, 420);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);
}

function draw() {
    var r = random(90);
    var r2 = random(3, 20);
    
    if(r <= 1){
    underlyingImage.loadPixels();
    var stepSize = round(constrain(mouseX / 8, 6, 32));
    for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - underlyingImage.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, r2, r2);
    }
  }
    }
    
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    var sz = random(0, 30);
    

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, sz, sz);
}

function mousePressed(){
    dir = dir *(-1);
}

Looking Outwards-09

Random Number Multiples by Marius Watz and Jer Thorp
Original post by Hae Wan Park

https://creators.vice.com/en_uk/article/vvzxkb/random-numbers-screen-printed-generative-art-nyc-event

This project is awesome, like Hae Wan mentioned, because it is a combination of digital processes informing a handcrafted, physical output. One thing I would like to add to the commentary is that coding is also a craft. It’s neat to think about the processes that make up each piece. With coding, the interaction with the computer is minimal and restricted to slight hand/finger movements. The print process affords many rich interaction because the tools require fully body control. But this does not mean that one cannot inform the other.

The posters by Watz and Thorp are generative examples of pseudo-random algorithms that “simulate” nature. The simulation im taking about is that many of the patterns people see in nature have an element of randomness: rain drops, sand, etc. The contrast between the clear artificial form of the surfaces, made up by the random lines is fascinating!

Looking outwards-07

Data visualization is an important part of understanding complex systems because it allows for an intuitive understanding of complex systems. Data is not the answer to problems, but pulling a well informed understanding from data can help experts decide the state and needs of the system. The Tweet Bursts project from Senseable City @mit used public tweets to understand events. Data is valuable because it’s inherently crowdsourced. As natural language processing develops, computational understanding of events can be understood and communicated in realtime. Realtime access to events around the world can help leaders (hopefully) make good decisions.

http://senseable.mit.edu/tweetbursts/

Project-07

This project is an exploration of connecting two shapes through variables. My main focus was to create points along the outside of the curves, like the examples, and pass those positions to another shape as start/end points. My favorite part of this assignment was taking two existing functions, and implementing them together in one program. Some errors I encountered were duplicate variables, miscommunication of variable between functions, and misaligned positioning of drawn shapes.