Final Project Presentation

cover

what

why

how

others

User research forms paired with hypothetical subject pages they would like to follow:

machine-learning

modern-love

north-dakota-pipeline

black-lives-matter

speculative-design

next

 

Pages that include JQUERY using the AJAX method:

screen-shot-2016-12-08-at-3-18-29-pm screen-shot-2016-12-08-at-3-18-33-pm

 

AJAX Code

[code language="JQUERY"]
$('#pinnedTab').click(function(evt){ //when this ID is clicked
 evt.preventDefault(); //prevents the same div to start the event
 $.ajax({
 url: '/profilepin', //go to this URL
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThis").html(data); // replace the contents of the div with data
 })
});

$('#loggedTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url: '/profilelog',
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThis").html(data);
 })
});

$('#subjectsTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url: '/profilesubject',
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThis").html(data);
 })
});

$('#mediaTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url: '/mediaTab',
 method: 'GET'
 })
 .done(function(data){
 $("#replaceThisSubjectTab").html(data);
 })
});

$('#relatedTab').click(function(evt){ //when the div with this id is clicked
 evt.preventDefault();
 $.ajax({
 url:'SubjectRelatedTab',
 method: 'GET'
 })
 .done(function(data){
 $('#replaceThisSubjectTab').html(data);
 })
});

$('#followersTab').click(function(evt){
 evt.preventDefault();
 $.ajax({
 url:'SubjectFollowersTab',
 method: 'GET'
 })
 .done(function(data){
 $('#replaceThisSubjectTab').html(data);
 })
});
[/code]

Node.js & Javascript code (for local server)

[code language="Javascript"]
//server file

var express = require("express") //include express library (why is this becoming a variable?)
var path = require("path") //not sure

var bodyParser = require("body-parser") //include body-parser library/functionality?
var app = express() //express function becomes app var

var http = require("http") //not sure

http = http.Server(app) //how can http be req("http") and then http.server(app)

app.use(bodyParser.json()) //not sure

app.set('views', path.join(__dirname, 'views')) //this is route folder where html files that are accessible to users

app.use(express.static(path.join(__dirname, 'public'))) //here is folder for other files that that user might need, the only other folder that the user has access to. Best practice is to separate html files from the other files+js


// HTML PAGES
app.get('/signup', function(req, res){
 res.sendFile(path.join(__dirname,'views/SignUp.html'))
 console.log('user requested Sign Up Page');
})

app.get('/signin',function(req,res){
 res.sendFile(path.join(__dirname,'views/Login.html'))
 console.log('user requested sign in page');
})

app.get('/', function(req, res){
 res.sendFile(path.join(__dirname,'views/index.html')) //app.get is function. Path parameter. Callback function, has two parameters.
 console.log("User requested top page");
})

app.get('/profile', function(req, res){
 res.sendFile(path.join(__dirname,'views/UserProfile.html')) // when server gets req, send back this file
 console.log("User requested UserProfile");
})

app.get('/subjectpage', function(req,res){
 res.sendFile(path.join(__dirname,'views/SubjectProfile.html'));
 console.log("User requested Subject Profile")
})

app.get('/searchresults', function(req,res){
 res.sendFile(path.join(__dirname,'views/searchresults.html'));
 console.log('User requested Search Results Page')
})




// USER PROFILE AJAX & JQUERY
app.get('/profilepin', function(req, res){
 res.sendFile(path.join(__dirname,'views/profilePinTab.html'));
 console.log("User requested Pin Tab");
})

app.get('/profilelog', function(req, res){
 res.sendFile(path.join(__dirname,'views/profileLogTab.html'));
 console.log("User requested Log Tab");
})

app.get('/profilesubject', function(req, res){
 res.sendFile(path.join(__dirname,'views/profileSubjectTab.html'));
 console.log("User requested Subject Tab")
})

// SUBJECT PAGE TABS
app.get('/mediaTab', function(req, res){
 res.sendFile(path.join(__dirname,'views/SubjectProfileMediaTab.html'));
 console.log("User requested Media Tab")
})

app.get('/SubjectRelatedTab', function(req,res){
 res.sendFile(path.join(__dirname,'views/SubjectProfileRelatedTab.html'));
 console.log("User requested Related Tab")
})

app.get('/SubjectFollowersTab', function(req,res){
 res.sendFile(path.join(__dirname,'views/SubjectProfileFollowersTab.html'));
 console.log('User requested Followers Tab')
})



var server = http.listen(3000, function(){
 console.log("i am running")
})
[/code]

HTML Code that includes AJAX and Javascript

[code language="HTML"]
<!DOCTYPE html>
<html>

<head>
 <title>Subject | SUBDEX | Media Encyclopedia</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <link href="/css/style.css" rel="stylesheet">
 <!-- jQuery-->
 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

 <!-- Bootstrap -->

 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
 <div class="container">
 <nav class="navbar navbar-default subdexheader row">
 <a class="navbar-brand" href="/">
 <img class="logo" src="/img/logo.svg"> <span class="subdex-name">SUBDEX</span>
 </a>
 <ul class="nav navbar-nav navbar-right">
 <li class="nav-item">
 <a href='/searchresults'><img class="icon" src="/img/search.svg" width="13"></a>
 </li>
 <li class="nav-item">
 <form class="form-inline float-xs-right" onSubmit="function-name" action="/searchresults">
 <input class="form-control" type="text" placeholder="Search">
 <button class="btn btn-outline-success" type="submit" action="/searchresults">Search</button>
 </form>
 </li>
 <li class="nav-item">
 <a href="/profile" id="navName">KENZO</a>
 </li>
 <li>
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 <li>
 <a href="/">
 <adata-target="/">LOG OUT</a>
 </a>
 </li>
 </ul>
 </div>
 </li>
 </ul>
 </nav>
 <div class="row">
 <div class="col-lg-12" id="banner">
 <div class="subjectheader">
 VIRTUAL REALITY
 <!-- <a href="#" class="btn">FOLLOW SUBJECT</a> -->
 <button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="false" autocomplete="off" id="toggleSubjectButton">
 FOLLOW SUBJECT
 </button>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 fullWidth" id="subjectTabSpacer">
 <ul class="subjectNavSection">
 <li class="subjectNav" id="makeBold">
 <a href="#" id="mediaTab">MEDIA</a>
 </li>
 <li class="subjectNav">
 <a href="#" id="followersTab">EXPERTS</a>
 </li>
 <li class="subjectNav">
 <a href="#" id="followersTab">FOLLOWERS</a>
 </li>
 <li class="subjectNav">
 <a href="#" id="relatedTab">RELATED SUBJECTS</a>
 </li>
 </ul>

 <!-- Small modal -->
 <div id="indexMediaButton">
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm" id="PinLogMedia">INDEX MEDIA</button>

 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
 <div class="modal-content" id="indexMediaForm">
 <h5 id="suggestSubjectFormTitle"> Index media to Virtual Reality</h3>
 <form class="form-horizontal">
 <div class="form-group form-groupAlign subjectNameInput">
 <label for="inputEmail3" class="col-sm-3 control-label suggestSubjectForm">LINK TO CONTENT</label>
 <div class="col-sm-8">
 <input type="email" class="form-control" placeholder="Required" id="suggestSubjectInputBox">
 </div>
 </div>
 <div class="form-group form-groupAlign">
 <label for="inputPassword3" class="col-sm-3 control-label suggestSubjectForm">SEND TO FRIEND</label>
 <div class="col-sm-8">
 <input type="password" class="form-control" id="suggestSubjectInputBox" placeholder="Optional">
 </div>
 </div>
 <div class="form-group form-groupAlign">
 <label for="inputPassword3" class="col-sm-3 control-label suggestSubjectForm">INDEX TO SUBJECTS</label>
 <div class="col-sm-8">
 <input type="password" class="form-control" id="suggestSubjectInputBox" placeholder="Required">
 </div>
 </div>
 <div class="form-group form-groupAlign">
 <label for="inputPassword3" class="col-sm-3 control-label suggestSubjectForm">COMMENT</label>
 <div class="col-sm-8">
 <input type="password" class="form-control" id="suggestSubjectInputBox" placeholder="Optional">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-3 col-sm-6" id="SuggestSubjectButton">
 <button type="submit" class="btn btn-default">INDEX MEDIA</button>
 </div>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>
 <!-- End of Small Modal-->
 </div>
 <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 fullWidth">
 <hr id="separator"></hr>
 </div>
 </div>


 <div class="row" id="replaceThisSubjectTab">
 <div class="col-lg-6 co-lg-offset-3 col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 fullWidth">
 <ul class = "mediaOrg" id="mediaFilter">
 <li id="mediaOrgLi">
 ALL TIME
 </li>
 <li id="mediaOrgLi">
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="mediaTypeDropdown">
 <li><data-target="#">ALL TIME</a></li>
 <li><data-target="#">LAST 24 HOURS</a></li>
 <li><data-target="#">LAST 3 DAYS</a></li>
 <li><data-target="#">LAST WEEK</a></li>
 <li><data-target="#">LAST MONTH</a></li>
 </ul>
 </div>
 </li>
 <li id="mediaOrgLi">
 ALL MEDIA
 </li>
 <li id="mediaOrgLi">
 <div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 <li><data-target="#">ALL MEDIA</a></li>
 <li><data-target="#">ARTICLES</a></li>
 <li><data-target="#">BOOKS</a></li>
 <li><adata-target="#">VIDEOS</a></li>
 <li><adata-target="#">PODCASTS</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 <div class="row">
 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://www.nytimes.com/2014/11/16/magazine/virtual-reality-fails-its-way-to-success.html"><div id="articleLeft">
 <p id="articleTitle"> Virtual Reality Fails Its Way to Success </p>
 </div></a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 The New York Times
 </p>
 <p id="author">
 Virginia Heffernan
 </p>
 <p id="date">
 9/14/2014
 </p>
 <p id="articlePreview">
 Virtual reality typicaly refers to computer technologies that use software to generate realistic images, sounds and other sensations that replicate a real environment.
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">460</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>
 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://www.theatlantic.com/health/archive/2015/02/the-good-and-the-bad-of-escaping-to-virtual-reality/385134/">
 <div id="articleLeft2">
 <p id="articleTitle"> The Good and the Bad of Escaping to Virtual Reality </p>
 </div>
 </a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 The Atlantic
 </p>
 <p id="author">
 Monica Kim
 </p>
 <p id="date">
 2/18/2015
 </p>
 <p id="articlePreview">
 Researchers believe new immersive technology could lead to isolation, but maybe when social needs are met online, people won't...
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">412</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>
 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://time.com/3987022/why-virtual-reality-is-about-to-change-the-world/">
 <div id="articleLeft3">
 <p id="articleTitle"> Why Virtual Reality is About to Change the World </p>
 </div>
 </a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 TIME
 </p>
 <p id="author">
 Joel Stein
 </p>
 <p id="date">
 9/14/2014
 </p>
 <p id="articlePreview">
 It promises to revolutionize the way we live, play, and learn.
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">347</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>

 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="http://www.vrs.org.uk/virtual-reality/what-is-virtual-reality.html"><div id="articleLeft4">
 <p id="articleTitle"> What is Virtual Reality?</p>
 </div></a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 Virtual Reality Society
 </p>
 <p id="author">

 </p>
 <p id="date">
 </p>
 <p id="articlePreview">
 Researchers believe new immersive technology could lead to isolation, but maybe when social needs are met online, people won't...
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">291</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>

 <div class="col-lg-6 col-md-6 col-xs-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3 fullWidth">
 <div id="pinStamp">
 <p id="pinStampText">
 Kenzo Nakamura Pinned a video at 7:36PM 9/11/16
 </p>
 </div>
 <div id="profileArticles">
 <a href="https://en.wikipedia.org/wiki/Virtual_reality">
 <div id="articleLeft5">
 <p id="articleTitle"> Virtual Reality </p>
 </div></a>
 <div id="articleRight">
 <div id="articleDetails">
 <p id="publisher">
 Wikipedia
 </p>
 <p id="author">

 </p>
 <p id="date">

 </p>
 <p id="articlePreview">
 Virtual Reality typically refers to computer technologies that use software to generate realistic images, sounds and other sensations...
 </p>
 <div id="articleTileButtons">
 <p id="followingStats">235</p>
 <a href="#" class="btn" id="articleTilePinLogButton"> UPVOTES</a>
 </div>
 </div>
 </div>
 </div>
 <div class="input-group" id="commentSection">
 <input type="text" class="form-control" id="commentForm" placeholder="Write a comment...">
 <span class="input-group-btn">
 <button class="btn btn-default" type="button" id="commentButton">Add</button>
 </span>
 </div>
 </div>
 </div>
 </div>

 <div class="row">
 <div class="row" id="separateFooter">
 <div class="footer navbar-fixed-bottom" id="footer">
 <div class="col-lg-12 col-md-12 col-xs-12">
 <ul class="list-inline" id="footerlist">
 <li id="footerlinks">
 <a href='#' class="">About SUBDEX</a>
 </li>
 <li id="footerlinks">
 Designed @ <a href='http://tisch.nyu.edu/itp' class="">NYU ITP</a>
 </li>
 <li id="footerlinks">
 <a href='?' class="">Copyright</a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div> <!--end of the container div-->
 <script type="text/javascript" src="/js/script.js"></script>
</body>

</html>
[/code]

Week 10

For the ICM final, I’d like to create a functional front-end prototype of a platform I’ve been designing in my Project Development Studio.  The intention is to learn the basics of web development and the HTML, CSS, and javascript languages.  My hope is that the front-end prototype would be ready to plug in to a back end by semester’s end.

SUBDEX is an online encyclopedia of all-time best media.  Subject-based pages will list ranked links to media posted and up-voted by the crowd.

The web app weaves together two or three ideas that scratch itches I’ve long had.  The first: when your smarter or more well informed friends make you think “how do you know that???”  The second: wanting to easily find enlightening media related to subjects you’re interested in, much like the articles and essays in reading lists that accompany inspiring classes.  These reading lists often include content created years, even decades, before your attending that class, are nonetheless relevant and constructive, and strangely absent or hard to find from hours of online research.

I’ve spent the semester in Project Development Studio researching potential users, clarifying the concept, and building a high-resolution yet non-functional prototype of the minimum viable product.

The hope is to create a resource for ITP students that will expose them to informative media that other students have found useful in their education in subjects and current events like virtual reality, Black Lives Matter, block chains, and the presidential election.

Questions:
-What is the best architecture for such a project and given my lack of experience?
-Would you want links to strictly media or allow for links to resources?
-Should I start with all media or stick only to articles at first?

Working with APIs

For this weeks assignment, I decided to work with Wikipedia’s new Wikimedia REST API.   This assignment is to augment research for my current project in my Project Development Studio class, where I am working on a “subject-based encyclopedia for media and media sharing platform”.  The insights from this project were supposed to give me insights on which subjects / articles were getting the most attention over time, and which subjects / articles were being updated the most often.  But the structure of the data (and my lack of experience parsing out data) kept me from getting exactly what I wanted.   Wikimedia’s API requires that the user enter in a specific day and will show the most popular articles of that day.   This, of course, gives you highly sporadic data on what the most viewed articles are, over time.  For my project, I really need to know what the most viewed / most popular articles are over a sustained period of time.  I could run these calculations day after day and compile my own data to extract what the most popular articles are over time, but my skills with APIs and data are not there yet.

 

Another issue I had with this weeks assignment was visualizing the data that was thrown into the p5 sketch.   I made the mistake early on of displaying that information as HTML.  This, then, required that I customize its styling/display through a (currently) confusing mix of CSS, HTML, and Javascript.  At this moment in time and experience, it would have been a lot easier to have displayed the contents of the API through p5 itself.  Because of this mistake, the only visualization I was able to do with the data set was ordering it in a table.  🙁 .  But I did gain a better understanding of how HTML, CSS, Javascript and p5 all work together.

Synthesis & HW [WEEK 6]

Synthesis, for me,  was not a success story.

It was startlingly awesome to finally connect the digital world to the physical one with the examples given.  And finally figuring out the fundamentals of serial and seeing how it works in reality cleared a lot of mental confusion.  But when it came to making our own project work, to get our sensors to speak with our sketch, my partner and I got lost in a sea of code.

screen-shot-2016-10-07-at-11-54-41-am-e1476235866701

It doesn’t help that we decided to use two variables instead of one.  Nor did it help to use dense (albeit simple) code.  But somewhere along the multiple file listings, the serial open, the splitting of the string into two variables, and appropriately applying the sensor readings to a code variable, we tripped up and couldn’t find a solution.

I hope to redo this assignment again, this time with a single variable.

img_5593-e1476236332995

screen-shot-2016-10-12-at-6-18-37-pm

 

Homework assignment:

 

sketch

WEEK 5

With the freer structure this week, I took the opportunity to read Getting Started with p5.js, to go through many example sketches, and reassess the sketches I made in previous classes.  The new material on objects, arrays, and constructors got me right off track as soon as I started feeling comfortable with the previous weeks material, so getting that opportunity to review (over and over and over again) was really great help.  I think this stuff is only going to get absorbed with repetition, so my approach, especially this week, was to get in front of as many sketches as possible.

I would look at example sketches and try to go as far as I could at recreating them before I would let myself look at the original sketch’s code.  Most of the time, I got as far as “setup”.  But going line by line transplanting code into my own sketch would give me fleeting moments of understanding that I’ve been building on over the week.

 

 

ICM – Do you even nest brœ? [WEEK 4]

Nested Loop:

screen-shot-2016-09-28-at-9-49-26-pm

Nested Loop for Tic Tac Toe:

screen-shot-2016-09-28-at-9-48-07-pm

 

100 Objects Looped (there might be too many):

screen-shot-2016-09-28-at-9-48-19-pm

100 Objects Looped (that’s better!):

screen-shot-2016-09-28-at-9-52-14-pm

Bouncy Ball:

screen-shot-2016-09-28-at-9-49-12-pm

 

It took a while but I think I’m starting to get it.  The general construction of things, anyways.  I had trouble with the tic tac toe sketch, and got some help from 2nd years, but ended up getting it to work.  I like that we got to do a lot of different sketches this week, I think repetition is key for me at this stage of learning p5.  I hope I can get a lot more sketches under my belt in the coming weeks!

ICM [Week 3]

The material this week was a lot to take in!

While I can’t say that I’ve retained it all, I’m getting a tighter understanding of the general construction and syntax.  I still have trouble with specifics (what code will animate a ball across the screen and what code will show all balls across the screen), but I hope to go over them over the weekend and the coming weeks.  Doing works best for me, so following along Schiffman’s videos has been the most helpful.  The quiz also helps in reinforcing what we just went over.

 

HW:

screen-shot-2016-09-22-at-2-17-22-pm

I started off with the kind of “painting” sketch that we worked on last week – I really love the aesthetic.  I augmented it with an orbiting function for two different shapes.  The circle and square both rotate about the mouse, with the circle distanced from the origin with its first two arguments (x,y, positions).

 

Now, I’m trying to put in a “mouseIsPressed” condition that wipes the screen clean of the drawing and starts anew.

Close!  But not exactly what I wanted.  After clicking, the canvas IS wiped clean, but the cursor does not begin to paint instantaneously as desired.  Am I using the wrong mouseIsPressed function (there are two as far as I know right now)?

ICM [WEEK 2]

 

Computation:

Computation applies to my interests and my life in a scattered way.  My background is in industrial design.  I love being an industrial designer.  At best, you think of a product the world needs and you bring it to life with form, function, color, material.  I got to do this often.  At worst, you skin black boxes they put in front of you.  I did this too.  I really could keep doing this for the rest of my life, I’d be happy to.  But sometimes I wanted more.  To understand the black box.  To know the products from the inside out instead of outside in.   To know what makes them beat, tick, turn.

So,

I came here!

Also,

physical products are starting to talk to each other over the internet, and that seems like a cool thing and a big deal.  So I came here!  And physical products are starting to come with lots of screens.  Sometimes screens are even replacing physical products.  There are lots of jobs in designing screens.  Some pay very well.  So I came here!  Also, I spend a lot of time on the internet.  I’ve got lots of big and small and fun and serious ideas for internet products.  I’d love to work on them, maybe even BUILD them myself.  Or meet someone who wants to build them with me.  So I came here!  To compute!

Intro to p5.js:

screen-shot-2016-09-15-at-12-56-20-am
<iframe src=”https://alpha.editor.p5js.org/embed/SyI8R8w3″></iframe>

The process started with my getting to the editor without a plan.  Then I copied and pasted some existing code and fiddled with it to see how it would react.  This really helped with learning.  Then I got some ideas.  Then I got really frustrated when I couldn’t make it work.  Then I made some of it work.  Now I want to know more about what you can do and how you can do it.

____

Some pitfalls: how do you angle a line? Oh.  How do you angle a rectangle?  Still don’t know.  Can you do a gradient?

____

The experience of using a web editor was really great and I can’t believe you guys have been coding this whole time any other way. (Are we talking about live-coding or coding in a browser?).

____

The hardest thing to figure out was the difference in the way the four numbers for the rectangle worked differently from the four numbers for the line, but that wasn’t too bad.