apurbzz-blog

[apurbzz-blog]

FCC - Bootstrap notes

1. Wrap all your html elements in a <div> and then add em to a class called "container-fluid"

2. to make images responsive, add the image to the "img-responsive" class.

3. "text-center" to do exactly what the name suggests. Also, see "text-primary"

4. "btn" class and afterwards, "btn-block", "btn-primary", "btn-info", "btn-danger", "btn-default"

5. col-md-(number of columns the element will occupy) 6. col-xs-(number of columns the element will occupy)

7.example of using the 12 column responsive grid

<div class = "row"> <div class="col-xs-4"> ..add other elements here </div>

<div class="col-xs-4"> ..add other elements here </div>

<div class="col-xs-4"> ..add other elements here </div> </div>

8.for font awesome: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

9.Bootstrap has a class called well that can create a visual sense of depth for your columns. Note that a div with the well class should go inside the div with the col-xs-6 class.

[apurbzz-blog]

Free Code Camp Day 1: HTML Basics

1. The basic HTML tags are: <h1> to <h5>, <p>, <ul>, <ol>, <a>, <img> and <div>

2. There’s a bunch of form elements as well, and all those have to be wrapped around a <form> tag

CSS Properties

1. there are three types of CSS selectors - class, id and inline.

2. the “color“ element is used to set the text color.

3. the “font-size“ element is used to set the size of the font.

4. “font-family“ is used to declare the family of fonts to be added. You can add multiple font families so that if one is available to the browser, the other alternative options will be used.

5. “background-color“ is used to set the color behind the area covered by an element.

6. CSS allows you to manipulate borders using “border-style“, “border-color“, “border-width“ and “border-radius“.

7. Setting the “border-radius“ to 50% yields circular images

8. “padding“ is the area of space between the element and the border.

9. “margin“ is the area of space between the border and other elements.

10. Clockwise format for padding and margin: goes from top, right, bottom and then left. eg. padding: 30px 20px 10px 30px;

Styling with CSS

First, select the elements that you want to have  a similar appeal by wrapping them around in a <div> container.

Then, you may use a class selector or an ID selector to style that <div>

Class selectors can have multiple elements as its member, while ID selectors can have an unique element only.

Class selectors use a dot “.“, while ID selectors use a “#“

Order of importance while inheriting style

Class selectors will override any property declared in the “body“ selector.

Since CSS is interpreted from top to bottom, the class selector at comes in later or at last will override all those that is placed before.

ID selectors will override any class selectors.

Inline styles will override both class and ID selectors.

[apurbzz-blog]

I joined Free Code Camp!

I got about 12 days off from college, starting from today (30th June). Given all the free time I’ll be having, I’ve decided to join Free Code Camp to pass the time, and simultaneously make good use of time :D

Here’s my Free Code Camp portfolio:

https://www.freecodecamp.com/apurbzz-1994

[apurbzz-blog]

Me getting all trippy with P5.JS

I modified this simple gravitational attraction force sketch I had written earlier to create...well...whatever bizarre shit this is! I basically drew transparent images of my head in place of ellipses. Looks super cool!

The Processing version:

A video posted by Apurba Akash (@apurbzz) on Jun 23, 2016 at 6:29am PDT

Here’s the link to the web version:

https://apurbzz-1994.github.io/my_big_head/

[apurbzz-blog]

Is zero a number? Was it always a number?

Today, zero has two roles: First, as a placeholder within our number system, representing an absence of a value. It allows us to create huge numbers without extra digits. Its second role is as a number in its own right, in between -1 and 1. We can subtract, add, multiply by 0… but dividing gets tricky. I mean, you can’t divide 1 chicken by 0 chickens:

(You might think the answer would be infinity chickens, but it’s not, as infinity is a concept, not a number)

Most ancient civilisations developed some sort of number system to keep track of things, and they are all thought to have had a general concept of zero.

And when the Indians began developing a number system (the one that evolved into what we use today), zero was first explicitly born, with 9 number symbols and a dot to represent the absence of a number.

In the 7th Century, Brahmagupta developed terms for zero in addition, subtraction and division… though he struggled a bit with that last one.

Over time, the mathematics of India matured and spread outwards. But it found resistance in Europe, in particular against the established Roman numeral system.

But by the 13th century academics like Fibonacci were championing zero, helping it gain a solid foothold across Europe:

Zero went on to form the cornerstone of calculus, which allowed anyone to break down dynamic systems into smaller and smaller units approaching zero, but never quite getting there, avoiding the tricky problem of dividing by zero.

More recently, the binary numerical system formed the basis of the computer system and zero’s importance shone once more.

So maybe it really is possible to get something from nothing. Watch the full animation on our YouTube channel here.

[apurbzz-blog]

Omg! Processing is now in Android! Pondering about all the new and exciting possibilities that can be explored with this new platform is making me feel dizzy! 😂 Can't wait for my midterms to end! Here's the link to the official site: http://android.processing.org/test/tutorials/index.html

[apurbzz-blog]

So, my midterms start from the 19th of this month. I guess it's high time I started studying, real hard! Hence, no more projects till my exams end! Here's a bunch of stuff I wanna get started on right after exams: 1. Different variations of the fractal tree. 2. A new "About Me" website using P5.JS 3. A new prototype for "Sentient Swarm" that can be used for advertisements and promotional purposes.

[apurbzz-blog]

Project: Fractal Ruins

The “Fractal Ruins“ project involves generating a landscape that comprises of entities populated using fractals only.

This is the first part of the project - fractal tree analysis. I recently learned how to code up a fractal tree, and now I’m tinkering with certain parameters to see how the trees turn out. I wrote an interactive program in p5.js in order to inspect the changes.

Here‘s the link to the javascript program:

http://apurbzz-1994.github.io/fractal_ruins/

[apurbzz-blog]

Update on Project “Sentient Swarm“

I’ve been doing some research on how to create a hand-gesture recognition system with ultrasound sensor, and the most efficient way I could dig up is to use the “Doppler Shift“ in ultrasound frequency to recognize hand-gestures.

Basically, if an ultrasound pulse is sent at some given frequency, the pulse that returns after bouncing off an obstacle will have a slightly shifted frequency relative to the initial frequency. A characteristic frequency shift is associated with each hand gesture. All the frequency analysis has to be done via Fast Fourier Transform (FFT). However, I’m having a hard time doing so using an Arduino.

Links of similar projects:

 https://people.ece.cornell.edu/land/courses/ece4760/FinalProjects/f2012/alt53_lw354/alt53_lw354/

http://chrisharrison.net/projects/ultrasonicdoppler/UltrasonicDoppler2.pdf

On the other hand, there’s this other technique that makes use of “triangulation“ techniques in a three dimensional plane to locate the position of the user’s hand.

[apurbzz-blog]

I have managed to make some changes to my interactive Particle Swarm project. Now, when no object within the range is detected, the swarm moves about in almost random positions. They can be seen to bounce off the edges continuously. As soon as somebody brings a hand in front of the ultrasound sensor, the particles immediately rushes towards the hand position.

Here’s how it looks like:

A video posted by Apurba Akash (@apurbzz) on Jun 7, 2016 at 6:04am PDT

Wizardry, eh? “Yes, I’m a wizard Hagrid!“

I decided to call this project “Sentient Swarm“.

More on this in the link below:

https://apurbaakash.wordpress.com/portfolio/physical-computing-sentient-swarm/

[apurbzz-blog]

Last night’s coding session (when you’re too poor to buy a Kinect)

For some time now, I have been fixated on initiating this physical computing project that involves a swarm-like interactive animation, and an ultrasound sensor. Last night, I finally managed to start working on it.

Here’s the initial interactivity for the project:

I would map the physical distance the ultrasound sensor would measure (which I kept equal to the width of my computer screen) to the length of the canvas. Then, as the audience interact with the system by dragging some smooth object towards or away from the sensor, the swarm on the screen will accelerate in relation to the audience’s response. From a linear view, it should seem like the swarm in the background is following the object.

Part One: Creating the swarm

I coded up a Processing Class that, on instantiating, would yield an ellipse that accelerates towards a target. The ease of acceleration (how fast or how slow) was determined by multiplying the distance vector with a suitable scalar. The outcome was this:

A video posted by Apurba Akash (@apurbzz) on Jun 6, 2016 at 8:55am PDT

Part Two: The moment I realized my initial plan for interactivity wasn’t much productive

Once I got to tinkering with the ultrasound sensor, a bunch of things started going wrong. Firstly, setting the sensor to sense only the width of the computer screen was only slightly effective, at least my methods were I guess. Secondly, the sensor values fluctuated a lot, depending on what object is being placed in front of it. Irregularly shaped objects caused a lot of fluctuation.The whole interaction seemed unbalanced from a viewer’s perspective.

After some thinking, I decided to discard the whole “placing an object“ plan, and resorted to hand gestures - serious Jedi stuff yo! That way, any fluctuations in sensor value wouldn’t be too obvious to the viewer. Here’s how it went:

A video posted by Apurba Akash (@apurbzz) on Jun 6, 2016 at 1:01pm PDT

I was pretty satisfied with the results. Most people initially though this was Computer Vision. But, as the title suggests, I’m too broke to buy a Kinect, Also, since it took a while for the particles on the screen to accelerate towards the target, it felt as if I had to literally push the particles with my hand. It was interesting to see how the whole thing brings out certain sensations.

Part Three: Lesson Learned

Now, I plan to create a whole set of sketches where the audience can interact with the particles in different environments, such as inside a fluid, or in outer-space, etc. This just goes to show that experimentation always gives rise to new ideas, regardless of fruitful results.

[apurbzz-blog]

7

May submissions:

Growth

Our only set for this month is made of five beautiful animations, ranging from 3D growth structures to abstract animations and transforming shapes.

We’re closing the month with this set. We’re also taking a break for the summer, but we’ll return in September.

Participants

1st row: Martin Silberkasten (portfolio)

2nd row: Playdo (portfolio | code #1 | code #2)

3rd row: Daniel Hoare (portfolio| code)

[apurbzz-blog]

2016-05-30 - GET GENERATIV

Created with code, built with Processing.

[apurbzz-blog]

Project Ideas: “Physics with Pixels“

“I walked in universes where the laws of physics were devised by the mind of a mad man.” - The Eleventh Doctor (Doctor Who)

I’ve been studying Daniel Shiffman’s “The Nature Of Code“ since a couple of weeks, and it has given me some pretty great ideas for Processing sketches. Specifically, I intend to code up a series of small sketches incorporating the first few chapters of the book.

I’ll strive to create the sketches in whimsical and playful ways, meaning they will be anything from “realistic“. The ability to code up concepts like velocity and forces really makes you feel like a god at times - a blank canvas, demanding to be populated with objects that will respond to the worlds that you imagine and create, worlds rife with programmable forces. That means rain can flow upwards, my rules!

Here’s a list of concepts from the book I have learned so far:

Representing vectors, a quantity having a magnitude and direction and can also be broken down into two components, with PVectors.

A location vector is a vector that points from the origin to that given location.

The Motion 101 rule: Add the velocity vector to the location vector to generate a displacement at each frame. Then, draw the object at a new location.

Using acceleration, and how the acceleration vector causes the velocity and location vectors to change.

How to accelerate towards a given target - find a vector that points towards the target by subtracting the object’s location vector from the target’s.

Creating a “Mover” that can experience force.

Implementing different forms of forces - drag, friction, gravity etc via formulae. This involves finding the direction of the force first by a normalized or unit vector, and then multiplying that with the magnitude.

Implementing attractive and repulsive forces.

I’ve already coded up five sketches, and I plan to make more.

[apurbzz-blog]

So Cool! The peeps at Tangible Media are such talented individuals. Projection mapping ftw!

Andante

Musical project from MIT Tangible Media Group is a piano that features a projected figure walking over played keys:

Andante visualizes as animated characters walking along the piano keyboard that appear to play the physical keys with each step. Based on a view of music pedagogy that emphasizes expressive, full-body communication early in the learning process, Andante promotes an understanding of the music rooted in the body, taking advantage of walking as one of the most fundamental human rhythms.

More Here

[apurbzz-blog]

How to forget that girl you’ve been having a crush on since forever

Number One:

Focus on all the negative attributes she possessed. It’s not that hard - everybody has em! Use the negatives to obscure the positive feelings. For instance, the fact that she has small b...errmm...”stuff“ may convince you to believe that she’s definitely not the best. Although, chances are you have bigger “stuff“ that hers, when in that case, the whole scenario can act as a motivating force to start working out! win-win!

[apurbzz-blog]

Satellite Planets

Currently, I’m experimenting with forces in Processing, a Java based environment for visual arts. I was fiddling with the concept of bodies accelerating towards a certain target location. The pink “satellite planets“ are all programmed to accelerate towards the blue “mother planet“. Since no instructions on what to do when the target is reached has been coded, the blobs keeps shooting away from the target, and coming back again. This phenomenon creates the illusion of orbits.

The scalar value of the acceleration vectors determines how soon the planets will reach the target location. This idea can be utilized to widen or compress the orbits. I plan to create a physical interface that can manipulate the individual orbits.