cvkabhiroop-blog - Tumblr blog

[cvkabhiroop-blog]

GDrive: https://drive.google.com/open?id=1wLgH85ZWLVzdF20Aa-RJmbZkSygu6sBwJwHOeHkAvFQ

[cvkabhiroop-blog]

Web Dev Final

Website: http://finolex.github.io

Git: https://github.com/finolex/IntroToWebDevF17/tree/master/Final

References: https://drive.google.com/open?id=1kds7yKgzuq-JJ-9-kdEN7i4XlBEbW1GB3C4_QCGDv_w

Step 1: Sitemap + Wireframes Step 2: Pick Color Palette Step 3: Begin drafting out code for each of the pages. This included gathering all the libraries needed Step 4: Grinding out the pages. This was 80% of the work. Most of the effort was from gathering the images, the text, and having the code work for every page. Step 5: Work on the NavBar first (both content as well as visuals). Information obtained from sitemap. Step 6: Work out the body of the pages. Also worked on all the custom CSS styling for navbar, body, text, links, etc Step 7: Went between container and container fluid, but stuck with container fluid in the end because it looked better on mobile Step 8: Worked the contact and the resume page. Step 9: Had to refer to the font awesome documentation to study the different CSS Styling of the icons, as well as adding interactivity to them. Step 10: For the resume page, had to figure out how to include download links (where my files would be directly be downloaded to computer rather than just linking to another page. Tried the linking first but wasn’t as intuitive). Step 11: Initially had a repeating background, but changed to a solid color since it seemed more modern and sleek. Step 12: Changed font from Patrick Hand to Roboto since it looked weird at first. Step 13: Worked on MixItUp library. Had problems working in the library in terms of tagging all the objects. Then had problem making the animations work, and then had problems with sizing (had to incorporate media queries). Then fixed the buttons for custom visuals. Step 14: Minor tweaks to visuals and code to clean up the website.

Step 15: Sassed up the Nav bar styles on the About page.

Step 16: Changed some font colours to RebeccaPurple for accessibility (also easter egg colour because it is a cool colour :))

Problems: Weird MixItUp problems with tabbing when hitting Startups and Projects dropdown.

[cvkabhiroop-blog]

Creative Coding Final proposal

Sometimes, the world doesn’t deserve this much of extra, but it gets it anyways. Inspired by many projects that incorporate sound and visuals into p5.js and Arduino.

[cvkabhiroop-blog]

Tic Tac Toe Update

Rewrote code in p5.js (over from Processing.

Git: https://github.com/finolex/AbhiCCF17/tree/master/p5/Tic%20Tac%20Toe%20Trial Decided to write succinct and clean code. Old code repeated each box in code, new code used objects. Wrote out new code for the mouseClicked() function as well in it’s own function rather than in the draw function. Used for loops to generate the grid. Used a var count to keep track of colors of the boxes Problems: Have to work on isolating the color change to each box rather than having all the boxes change colour upon click.

[cvkabhiroop-blog]

NYTimes API Project

Github: https://github.com/finolex/AbhiCCF17/tree/master/p5/Week%2010/Homework PS: Refer to sketch2.js

Instructions: Click on the three boroughs to cycle through different area news.

Program automatically refreshes to a different article every 3 seconds in the designated area. Default beginning is set to Manhattan.

[cvkabhiroop-blog]

JSON Data Vis Example

Github: https://github.com/finolex/AbhiCCF17/tree/master/p5/Week%2010

[cvkabhiroop-blog]

Figure out JS Dropdown menu

http://finolex.github.io

Step 1: Created JS file

Step 2: Created a new div and used CSS to set the class of it to hidden (this new div was created under the menu icon divs that were made using the w3 tutorial before).

document.getElementsByClassName("One").onclick = function() { document.getElementsByClassName("dropdown").toggle(); }

Step 3: Doesn’t work. So considering changing the w3 divs to an image that is probably easier to work with as an object/click.

Step 4: Successfully replaced divs with an image.

Step 5: Have to try to make an onclick event for the image

Step 6: After much struggling, finally able to replace old divs with an image of the menu icon (png file from google) in CSS and html

Step 7: Managed to create new div with drop down content, and hide it.

Step 8: Have to try to make interactive with JS (ie. toggle the hide on click).

Step 9: Created an onclick function:

function dropdowntoggle { var x = document.getElementsByClassName("hide");

if(x.style.display == 'none'){ x.style.display = 'block'; } else { x.style.display = 'none'; } }

but error shows this function is not defined. Have to figure out why html isn’t detecting the .js script

Step 10: OMG IT WORKS!!!! BLESSSSSSSS. Looks ugly, but it works omggggg

[cvkabhiroop-blog]

CDE Sequencer

Link: https://www.openprocessing.org/sketch/470059

So I actually have no idea what a Sequencer is, so this assignment is a bit confusing for me. From the research I did, it seems that a sequencer should basically be able to store music notes/songs and be able to play them when interacted. So, I went ahead with that and made something peaceful and uses the C, D, and E scales from the C major scale, and themed it with a very pastel color palette.

I am super proud of this work, not because it is great or because it is super complicated, but because I have proven to myself that I am able to incorporate all the elements we have learnt so far in class. Some other classmates have the advantage of their CS major to draw knowledge from, but being a code-newbie before this, this is actually really impressive for myself and I am happy! I spent some 8 hours on this, basically digging through various timers, concepts, shapes, and tons and tons of debugging but it finally works and I love it <3 Wheeeee :)

[cvkabhiroop-blog]

Mid Term

Website: finolex.github.io

Code: https://github.com/finolex/finolex.github.io

Resources: https://docs.google.com/a/nyu.edu/document/d/1XT6uKV_FksuUt1aMZHq_wd54NAUj-6KxwSfy9k1cjkU/edit?usp=sharing

Documentation:

Step 1: Do mock ups for the website

Step 2: Figure out colour palette

Step 3: Type out semantic HTML

Problem 1: Site looks nothing like the mock up

Step 4: Type out basic CSS for nav bar and divs

Problem 2: Nav bar is not responsive (to changing window sizes) and breaks

Problem 3: Position is a pain!!!

Step 5: Got introduced to 996 Grid!! So implemented 996 grid. Works!!

Problem 4: Still nothing is responsive to changing windows

Step 6: Got introduced to custom grid, tried implementing but website broke.

Step 7: Reverted to 996 grid.

Step 8: Figured out how to include media queries

Step 9: Played around with media queries till nav bar doesn’t entirely break, and site doesn’t entirely break (implemented min-height, display:none, display:block, created a menu icon)

Problem 5: Menu icon not responsive. Need to implement JS for it. Not sure how yet, so it just is a placeholder. Hopefully can figure this out ASAP :(

Future Steps:

Problem 6: Not sure how to deal with media queries for images (such as for landing page and the about page where the images are too big for the smaller screen size).

Problem 7: Media Queries do not seem to block the ‘plans’ and ‘contact’ page even though the same code was used as the about page (and even with tweaking) :(

Problem 8: CSS pages are repetitive. Next time should begin with just 1 and write HTML according to that (with more specific classes etc)

Problem 9: Very little interactivity. Don’t understand JS at all :(

Changes made/to-make after Monday:

Make objects collapse for contact and plans page

Replace the Engage Healthcare with logo

Open link in a new tab

Include icons for the contact page

Add some basic interactivity for the images

Size down the home page and add the tabs below for the mobile version

(Unable!!) Add interactivity to the menu icon, and then a drop down for it

PS: Not good at code, so tried to at least make it look good and original (as far as large screen is concerned) :(

[cvkabhiroop-blog]

Sound and animation in p5

Playing with restart and sustain: https://www.openprocessing.org/sketch/466371

Animation with sound: https://www.openprocessing.org/sketch/467175

[cvkabhiroop-blog]

Github: https://github.com/finolex/AbhiCCF17/blob/master/p5/Midterm/ReadMe

Open Processing: https://www.openprocessing.org/sketch/460319

Github includes all documentation, as well as open processing link as well :)

[cvkabhiroop-blog]

For all your disco needs but when you’re too lazy to actually hit the club or dance so you just vigorously move your mouse across the screen to jam to the beat.

Git: https://github.com/finolex/AbhiCCF17/tree/master/p5/Week%205/Thursday

[cvkabhiroop-blog]

Git: https://github.com/finolex/AbhiCCF17/tree/master/p5/Week%205/Homework%20Tuesday

Git includes 3 index files, and 3 sketches for the three assignments. Pretty simple and straightforward.

For loops are the blessing of mankind. Foreal though.

[cvkabhiroop-blog]

Git:  https://github.com/finolex/AbhiCCF17/blob/master/Creative%20Coding/p5/Week%204/Sol%20Lewitt%20Project/sketch.js

This was a fun project, just a little bit frustrating to figure out the coordinates. Maybe next time can use a grid with set markings that can be removed later for easier reference.

[cvkabhiroop-blog]

CSS Attempt

Git: https://github.com/finolex/IntroToWebDevF17/blob/master/IntroToWebDevF17/Week_02/Homework/Krusty%20Krab.html

Made the worst ever looking website. But hey, I tried :)

[cvkabhiroop-blog]

Updates:

1) Talked to Kelly and asked for help. Learned how to incorporate flag for mousePressed so it only gets activated once. Tried to throw back in the ‘background;’ for the refreshing, but then fails. Got to figure that out.

2) Cleaned up code by making a function ‘clickLoop()’ that dictates the clicking counter so that it doesn’t have to be typed out for every logic statement.

3) Tried to attack problem with ‘1′ again. Tried playing around with the nesting of ‘if/else’ statements. Didn’t work.

4) Decided to retry the whole grid using Arrays as a separate (v1 alternative) file. Hittin up them YouTube and processing reference tutorials for learning, understanding and implementing arrays. Managed to create Array that has the values of a ‘perfect sum’ square (ie for a 3x3 grid that adds to the same total sum regardless of direction that the numbers are added [ie. 3 in a row up, down, left, right, diagonal left, diagonal right {credits to Kelly for this idea!}]).

5) SOME SORT OF SUCCESS!!! NO CLUE WHY IT WORKS THE WAY IT DO, BUT IT BE, SO IT DO!

6) Add the same colour fill etc.

7) Assigned the magic square values as well! Wheeee making progressssss!!!!

8) Have to try to get the same logic from the previous version, but probably will be easier since we can measure via grid, rather than via dimensions.

9) JK! Can’t access each square via grid number, because that just defaults to top left corner. Have to end up using dimensions anyways. So why did I waste time making grids at all :’( Maybe (and hopefully!!!) it can be used for deciding 3-in-a-rows. Ended up just copying over old logic into this. So instead of making the grids the easy way, I made em using a super hard way and they do absolutely nothing more or less RIPPPP

Next steps: Be able to access and utilise the arrays for logic rather than resorting to the dimensions again.

Git git git graaaa: https://github.com/finolex/CVKAbhiroop-CreativeCoding-F17/blob/master/Creative%20Coding/Tic_Tac_Toe_Trial/Tic_Tac_Toe_Trial_2_Array_/Tic_Tac_Toe_Trial_2_Array_.pde

#rekt #confusedandstuckpleasehalp

[cvkabhiroop-blog]

Wireframe