Friday, November 20, 2015

Techniques: Random art with symmetry

So lets add many circles together:



Thats ok but what if we add some symmetry.

Lets add symmetry from one axis:



From two axis:



Those examples are random but the point is that have something not random, they have structure.

I like the more complex symmetry from the center point (not the math definition):





continue_
Posted by at
Labels:

Wednesday, November 18, 2015

Javascript: Canvas circles

So we always start:

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");

and we have the basic:

c.fillRect
c.fillText
c.strokeRect
c.strokeText

and for all other shapes we use paths

I use a lot of circles so why not add:

c.fillCircle
c.strokeCircle

We can do that by adding some functions to the prototype of the c with is the CanvasRenderingContext2D:

CanvasRenderingContext2D.prototype.fillCircle = function(x, y, r) {
  this.beginPath();
  this.arc(x, y, r, 0, 2 * Math.PI);
  this.fill();
};

CanvasRenderingContext2D.prototype.strokeCircle = function(x, y, r) {
  this.beginPath();
  this.arc(x, y, r, 0, 2 * Math.PI);
  this.stroke();
};


done_
Posted by at
Labels: , ,

Monday, November 16, 2015

HTML: Canvas background

To have a canvas as a html page background we need:

HTML:

<body onload="load()">
  <canvas id="canvas_back"></canvas>
  ...
</body>

CSS:

#canvas_back {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
}

JavaScript:

var c, w, h;

function load() {
  var canvas = document.getElementById("canvas_back");
  c = canvas.getContext("2d");

  window.addEventListener('resize', resize, false);
  resize();
}

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  draw();
}

function draw() {
  // use c, w and h to draw the canvas
  ...
  requestAnimationFrame(draw);
}


Demo 1


done_
Posted by at
Labels: , , ,

Friday, November 13, 2015

Android: Store values

We can save and load values, permanently, using Shared Preferences.

The shared preferences framework provides an easy way to store values, not only preference related but any kind of values. It's a file based so keep that in mind.

To get the SharedPreferences object we need:

private static final String NAME = "...";
public static SharedPreferences getPreferences(Activity a) {
  return a.getSharedPreferences(NAME , Context.MODE_PRIVATE);
}

To save a values we:

public static void save(Activity a) {
  SharedPreferences.Editor sp = getPreferences(a).edit();

  sp.putString("name1", value1);
  sp.putInt("name2", value2);

  sp.commit();
}

And to load a values we:

public static void load(Activity a) {
  SharedPreferences sp = getPreferences(a);

  value1 = sp.getString("name1", default1);
  value2 = sp.getInt("name2", default2);
}

We can also get a single Preferences for each activity with:

getPreferences(Context.MODE_PRIVATE)

Except MODE_PRIVATE we have MODE_WORLD_READABLE and MODE_WORLD_WRITEABLE which are deprecated, so don't use them.


done_
Posted by at
Labels: , ,

Wednesday, November 11, 2015

JavaScript: Local and Session storage

To store values to a browser we can use localStorage and sessionStorage just by:

localStorage["name"] = value;

and to get the values we just:

value = localStorage["name"];

The localStorage keeps the values for ever (probably).
The sessionStorage keeps the values until the page session ends.

For each domain our browser has a pair of these objects and not for each page.

To store objects without functions we use JSON:

localStorage["name"] = JSON.stringify(object);
object = JSON.parse(localStorage["name"]);


done_
Posted by at
Labels: , ,

Monday, November 9, 2015

JavaScript: jQuery selector

If we want to use JQuery ONLY for selecting elements like:

$(".item")

Why use a whole library, just:

document.querySelectorAll(".item")

or

function q(query) {
  return document.querySelectorAll(query);
}

q(".item")

Note: The only thing we gain from this is self-something.


continue_
Posted by at
Labels: , ,

Friday, November 6, 2015

PHP: Simple counter

A simple counter using a text file.

The php code:

<?php
  $path = "./counter.txt";
  $count = intval(file_get_contents($path));
  if(isset($_GET["add"])) {
    $count++;
    file_put_contents($path, $count);
  }
  echo $count;
?>

To add one to the counter must be called with GET parameter add.

To get the counter value must be called with no parameters.


done_
Posted by at
Labels: , ,

Wednesday, November 4, 2015

CSS: Transition all

In CSS if we define transitions, every time a value changes an animation-transition is created and executed.

So if we want to use transitions for all elements and for all values (which is wrong in many ways), we can just write:

*{
  transition: all 0.7s ease-in-out;
}


done_
Posted by at
Labels: , ,

Monday, November 2, 2015

Techniques: Base64

Base64: make anything to a "simple" text and reverse.

Where "simple" means that contains only the 'A'–'Z', 'a'–'z', '0'–'9', '+', '/' and '=' characters.

It's not in any way something to use for encryptions its just for converting raw data to text.

It's most used when the data contain small bytes (control characters) which are trick to send handle in some environments.




continue_
Posted by at
Labels: ,

Friday, October 30, 2015

Techniques: Generating colors with HSL and HSV/HSB

Some definitions first:

HSL: Hue Saturation Lightness
HSV: Hue Saturation Value
HSB: Hue Saturation Brightness

HSL != HSV
HSV = HSB (so forget all about the name HSB)

The difference between the two is how the represent the black and white, but they have in common how the represent the actual color referred as hue.

So the colors HSL(h, s1, l) and HSV(h, s2, v) have the same base color in a amount defined by the s1 and s2 and some amount of black or white defined by the l and v.

The point is that these representations can be used in scenarios where classic RGB can't do the work.
  • Imagine a layout (for a site, an application or even a poster) where all elements are darker and brighter versions of the base color.

    All these colors will be HS?(h, a, b) where h shared constant and a, b some values.

    So if h is a variable of some kind, we can change the whole color scheme by adjusting a single value.

  • Imagine a need for a array of colors which have the same saturation - lightness - brightness and change smoothly (for animations, transitions or fractal coloring).

    We can gererate these colors using the formula HS?(i*step, a, b) where i the index of the items in the array and step, a, b some values.


done_
Posted by at
Labels: ,

Wednesday, October 28, 2015

Code: Normalize overflowing values

To normalize values like degrees where the main range is [0, 360) but all other values are accepted too the obvious is:

value = value % 360

Which  in case of a [min, max) range is:

value = (value - min) % (max - min) + min

But when the value is a negative number or even smaller than the min we get wrong result.
What we can do is "overflow" the value one more time:

value = ((value % 360) + 360) % 360

Which  in case of our generic [min, max) range is:

value = ((value - min) % (max - min) + max - min) % (max - min) + min

In an extended form:

len = max - min
value = ((value - min) % len + len) % len + min


done_
Posted by at
Labels: ,

Monday, October 26, 2015

Java: Set the Clipboard

The easiest way to make the Clipboard contain a string is:

public void setClipboard(String text) {
  Clipboard c = Toolkit.getDefaultToolkit().getSystemClipboard();
  StringSelection selection = new StringSelection(text);
  c.setContents(selection, selection);
}


done_
Posted by at
Labels: , ,
Subscribe to: Posts (Atom)