2012-07-19 12:38:54

License: MIT License

Fork: 16

Fav: 40

View: 13497

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 111 lines
HTML 1 lines
CSS 3 lines

Noise Abstraction
lib1

/**
 * PerlinNoise class,
 * Point class,
 * Color class,
 * extend, random
 * @see http://jsdo.it/akm2/fhMC
 */

var PERTICLE_NUM = 500;
var STEP = 3;
var Z_INC = 0.001;
var S = 100; // Saturate
var L = 50; // Lightness

var canvas;
var canvasWidth;
var canvasHeight;
var context;
var perticles = [];
var center = new Point();
var perlinNoise = new PerlinNoise();
var zoff = 0;

function init() {
    canvas = document.getElementById('c');
    
    document.addEventListener('resize', resize);
    resize();
    
    for (var i = 0; i < PERTICLE_NUM; i++) {
        perticles[i] = new Perticle();
    }
    
    document.addEventListener('click', click, false);
    
    setInterval(loop, 1000 / 60);
}

function resize() {
    canvasWidth = canvas.width = window.innerWidth;
    canvasHeight = canvas.height = window.innerHeight;
    context = canvas.getContext('2d');
    
    context.lineWidth = 0.3;
    context.lineCap = context.lineJoin = 'round';
    
    center.set(canvasWidth / 2, canvasHeight / 2);
}

function click() {
    context.save();
    context.fillStyle = 'rgba(255, 255, 255, 0.8)';
    context.fillRect(0, 0, canvasWidth, canvasHeight);
    context.restore();
    
    perlinNoise.seed(new Date().getTime());
}

/**
 * Perticle
 */
function Perticle() {
    Point.call(this);
    this.latest = new Point();
    this.color = new Color.HSLA(0, S, L, 0);
    this.reborn();
}

Perticle.prototype = extend({}, Point.prototype, {
    reborn: function() {
        this.set(random(canvasWidth), random(canvasHeight));
        this.latest.set(this);
        this.age = 0;
        this.color.h = center.subtract(this).angle() * 180 / Math.PI;
        this.color.a = 0;
    }
});

// Init
window.addEventListener ? window.addEventListener('load', init, false) : window.load = init;

Noise Abstraction

/** * PerlinNoise class, * Point class, * Color class, * extend, random * @see http://jsdo.it/akm2/fhMC */ var PERTICLE_NUM = 500; var STEP = 3; var Z_INC = 0.001; var S = 100; // Saturate var L = 50; // Lightness var canvas; var canvasWidth; var canvasHeight; var context; var perticles = []; var center = new Point(); var perlinNoise = new PerlinNoise(); var zoff = 0; function init() { canvas = document.getElementById('c'); document.addEventListener('resize', resize); resize(); for (var i = 0; i < PERTICLE_NUM; i++) { perticles[i] = new Perticle(); } document.addEventListener('click', click, false); setInterval(loop, 1000 / 60); } function resize() { canvasWidth = canvas.width = window.innerWidth; canvasHeight = canvas.height = window.innerHeight; context = canvas.getContext('2d'); context.lineWidth = 0.3; context.lineCap = context.lineJoin = 'round'; center.set(canvasWidth / 2, canvasHeight / 2); } function click() { context.save(); context.fillStyle = 'rgba(255, 255, 255, 0.8)'; context.fillRect(0, 0, canvasWidth, canvasHeight); context.restore(); perlinNoise.seed(new Date().getTime()); } function loop() { var p, latest, color, angle; for (var i = 0, len = perticles.length; i < len; i++) { p = perticles[i]; latest = p.latest; color = p.color; context.beginPath(); context.strokeStyle = color.toString(); context.moveTo(latest.x, latest.y); context.lineTo(p.x, p.y); context.stroke(); latest.set(p); angle = Math.PI * 6 * perlinNoise.noise(p.x / canvasWidth * 1.75, p.y / canvasHeight * 1.75, zoff); p.offset(Math.cos(angle) * STEP, Math.sin(angle) * STEP); if (color.a < 1) color.a += 0.005; if (p.x < 0 || p.x > canvasWidth || p.y < 0 || p.y > canvasHeight) { p.reborn(); } } zoff += Z_INC; } /** * Perticle */ function Perticle() { Point.call(this); this.latest = new Point(); this.color = new Color.HSLA(0, S, L, 0); this.reborn(); } Perticle.prototype = extend({}, Point.prototype, { reborn: function() { this.set(random(canvasWidth), random(canvasHeight)); this.latest.set(this); this.age = 0; this.color.h = center.subtract(this).angle() * 180 / Math.PI; this.color.a = 0; } }); // Init window.addEventListener ? window.addEventListener('load', init, false) : window.load = init; <canvas id='c'></canvas>* { margin: 0; padding: 0; } body { background-color: #eee9e9; font: 30px sans-serif; } canvas { position: absolute; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

akm2

http://codepen.io/akm2

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/ncsw/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

plexus9517

mevius6

peddabalashi

tsubao

moonblogger

thatsparks

cyclops0913

tjoen

monocore1934

Sebastien_Ko

clanbalache

olleh

fallen

zz85

nami.723

iijijii

satosu

naoiwata

nenjiru

TSHiYK

toyoshim

yasuaki

Wong.Hin.Chi

Maran.Emil

djankey

asou_jp

angelo

peko

jasmine88

edo_m18

reprimande

sssvc

Zed-K

miz_mau

lbraindamage

gaziya

goliatone:

colorful flow generative

parroty:

mysterious

0i0:

colorful flow generative

chinchang:

beautiful!

Forked

sort by

forked: Noise Abstraction

anandprabhak

112/1/3
- art&design
- noise

forked: Noise Abstraction

cg.abar

112/1/3
- art&design
- noise

forked: Noise Abstraction

cmymikechu

1
2
1079

112/1/3
- art&design
- noise

forked: Noise Abstraction

weemie

112/1/3
- art&design
- noise

Noise Abstraction

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked