Daily Creative Coding

元「30 min. Processing」。毎日、Creative Codingします。

blendMode(DIFFERENCE)で干渉する縞

p5.js 静画

/** * interference disc * * @author aadebdeb * @date 2017/02/14 */ function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { blendMode(BLEND); background(random(255), random(255), random(255));…

テクノ・ライト

p5.js ランダム

/** * techno lights * * @author aadebdeb * @date 2017/02/13 */ function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100) frameRate(30); noFill(); } function draw() { background(0, 100, 0); strokeWeight(1); v…

ひだひだのリング

p5.js ランダム

/** * frilly ring * * @author aadebdeb * @date 2017/02/12 */ var isWire = false; var nScale = 0.003; var nOffset1; var nOffset2; function mousePressed() { isWire = !isWire; } function setup() { createCanvas(windowWidth, windowHeight); fram…

波打つ花

p5.js 決定論

/** * wavy flower * * @author aadebdeb * @date 2017/02/11 */ function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); } function draw() { background(25, 37, 72); stroke(160, 138, 35); fill(160, 138, 35); translate(width /…

低解像度ディスプレイ上のオブジェクト

p5.js ランダム

/** * rect flows in display * * @author aadebdeb * @date 2017/02/10 */ var particles; function setup() { createCanvas(windowWidth, windowHeight); frameRate(8); background(0); noStroke(); particles = []; for (var i = 0; i < 30; i++) { parti…

動く点でドロネー三角形分割

p5.js ランダム

/* * moving triangles * * @author aadebdeb * @date 2017/02/09 */ var MARGIN = 200; var vertices; var hueVal; function setup() { createCanvas(windowWidth, windowHeight); frameRate(20); colorMode(HSB, 360, 100, 100); hueVal = random(50); ver…

p5.jsでドロネー三角形分割

p5.js インタラクション

/* * delaunay triangulation * * @author aadebdeb * @date 2017/02/08 */ var delaunayTriangulation; var hue; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100); hue = random(360); delaunayTriangulation …

ベジエ曲線で雫の形をつくる

p5.js

/* * bezier drops * * @author aadebdeb * @date 2017/02/07 */ var rgb; var type = 0; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); noStroke(); rgb = [ color(255, 0, 0), color(0, 255, 0), color(0, 0, 255) ]; } fu…

createGraphics()でグリッチっぽくする

p5.js ランダム

/* * chaotic replications * * @author aadebdeb * @date 2017/02/06 */ var canvas; function setup() { canvas = createCanvas(windowWidth, windowHeight); frameRate(30); colorMode(HSB, 360, 100, 100); noStroke(); background(0, 0, 100); } functi…

p5.jsのbeginContour(), endContour()を使う

p5.js ランダム

/* * contours objects * * @author aadebdeb * @date 2017/02/05 */ var objs = []; var type = 0; var bgColor, fillColor; function setup() { createCanvas(windowWidth, windowHeight); for(var i = 0; i < 100; i++) { objs.push(new Obj(i)); } bgCol…

ねじれたライン

p5.js 決定論

/* * twisted lines * * @author aadebdeb * @date 2017/02/04 */ var colors; var type; function setup() { createCanvas(windowWidth, windowHeight); colors = [ color(255, 0, 0), color(0, 255, 0), color(0, 0, 255) ]; type = 0; } function draw() …

p5.jsの3D基本図形

p5.js 3D

/* * 3D primitives * * @author aadebdeb * @date 2017/02/03 */ var X_SPACE = 200; var Y_SPACE = 250; var X_NUM = 4; var Y_NUM = 2; function setup() { createCanvas(800, 600, WEBGL); } function draw() { background(255); push(); translateTo(0,…

p5.jsでリズムマシン

p5.js サウンド

/* * rhythm machine * * @author aadebdeb * @date 2017/02/02 */ var pattern = [ true, false, false, false, true, false, false, false, true, false, false, false, true, false, false, false ]; var noiseOsc, env; var part, pharse; var beat = 0;…

ランダムに揺れる画面とサウンド

p5.js サウンド

/* * noisy screen & sound * * @author aadebdeb * @date 2017/02/01 */ var rects; var rgb; var osc, lpf; function setup() { createCanvas(windowWidth, windowHeight); rectMode(CENTER); rects = []; for (var i = 0; i < 50; i++) { rects.push(new …

p5.jsでランダムに音を鳴らす

p5.js サウンド

/* * random percussion sound * * @author aadebdeb * @date 2017/01/31 */ var osc, env; function setup() { createCanvas(windowWidth, windowHeight); noCursor(); env = new p5.Env(); env.setADSR(0.01, 0, 1, 0.2); env.setExp(true); osc = new p5.…

パーリンノイズの層

p5.js 静画

/* * layers of perlin noise * * @author aadebdeb * @date 2017/01/30 */ var colors; function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { var cscale = [random(0.1), random(0.1), random(0.1)]…

サイバー・ランドスケープ

p5.js ランダム

/* * cyber landscape * * @author aadebdeb * @date 2017/01/29 */ var startW; function setup(){ createCanvas(windowWidth, windowHeight); frameRate(10); background(0); startW = -100; } function draw(){ stroke(lerpColor(color(111, 186, 44, 100…

光の流れ

p5.js ランダム

/* * light flow * * @author aadebdeb * @date 2017/01/28 */ var movers; var colors; var noiseScales, noiseOffsets; function setup() { colors = [color(4, 1, 1), color(1, 2, 3), color(2, 3, 1)]; createCanvas(windowWidth, windowHeight); blendM…

誘引する流れ

p5.js ランダム

/* * attracting flow * * @author aadebdeb * @date 2017/01/27 */ var movers; function setup() { createCanvas(windowWidth, windowHeight); movers = []; for (var i = 0; i < 2000; i++) { movers.push(new Mover()); } background(255); stroke(0, 3)…

並んだ板

決定論 インタラクション

/** * boards in line * * @author aadebdeb * @date 2017/01/26 */ void setup(){ size(640, 480); rectMode(CENTER); fill(20); stroke(255, 251, 249); strokeWeight(4); } void draw(){ background(255, 251, 249); translate(width / 2, height / 2); i…

明滅する四角形

ランダム

/** * flashing rect * * @author aa_debdeb * @date 2017/01/25 */ void setup(){ size(500, 500); rectMode(CENTER); frameRate(30); noStroke(); } void draw(){ fill( constrain(128 + randomGaussian() * 60, 0, 255), constrain(128 + randomGaussian(…

色を変えながらマスを塗りつぶしていく

ランダム

/** * line drawer * * @author aa_debdeb * @date 2017/01/24 */ int CELL_SIZE = 2; int CELL_NUM = 250; int[][] DIRECTIONS = {{0, -1}, {1, 0}, {0, 1}, {-1, 0}}; float MAX_STRAIT = 50; color BG_COLOR = color(255, 255, 255); color[] FILL_COLORS…

四角形のシーケンス

決定論

/** * sequence of rects * * @author aa_debdeb * @date 2017/01/23 */ color[] colors = { color(216, 36, 72), color(221, 163, 0), color(0), color(44, 182, 170), color(221, 163, 0), color(255) }; void setup(){ size(500, 500); frameRate(5); rec…

おもちゃのキラキラ

決定論

/** * toy twinckle * * @author aa_debdeb * @date 2017/01/22 */ int rectNum = 43; float rectSize = 10; color[] colors = { color(229, 10, 132), color(84, 195, 241), color(240, 235, 69), color(156, 202, 84), color(237, 109, 31), color(229, 10…

展開・縮小する弧

決定論

/** * expanding and closing arcs * * @author aa_debdeb * @date 2017/01/21 */ color[] colors = { color(0, 136, 164), color(175, 220, 222) }; void setup(){ size(500, 500); frameRate(6); noStroke(); } void draw(){ background(234, 239, 249); t…

脈動するTruchetタイル

ランダム

/** * pulsatile truchet tile * * @author aa_debdeb * @date 2017/01/20 */ int tileSize = 25; int tileNum = 20; int[][] types; color bgColor = color(255, 255, 255); color skColor1 = color(69, 189, 207); color skColor2 = color(247, 248, 218);…

Truchetタイル

静画

/** * truchet tiles * * @author aa_debdeb * @date 2017/01/19 */ void setup(){ size(500, 500); mousePressed(); } void mousePressed(){ int tileSize = 25; float borderSize = random(0, tileSize / 2); color bgColor = color(random(255), random(2…

線の下を動くもの

ランダム

/** * movers under lines * * @author aa_debdeb * @date 2017/01/18 */ ArrayList<Mover> movers; void setup(){ size(640, 480); noFill(); movers = new ArrayList<Mover>(); } void draw(){ background(26, 11, 8); boolean isPink = true; for(float h = -50; h <= h</mover></mover>…

パルスで律動する円

決定論

/** * pulse circle * * @author aa_debdeb * @date 2017/01/17 */ void setup(){ size(640, 640); noFill(); strokeWeight(2); } void draw(){ background(238, 243, 239); translate(width / 2, height / 2); float radius = 200; float step = 5; for(flo…

斜め線のフロー

決定論

/** * line floaw * * @author aa_debdeb * @date 2017/01/16 */ float STEP = 20; void setup(){ size(640, 640); noFill(); } void draw(){ background(39, 26, 32); for(float d = 0; d <= width * 2; d += STEP){ float diff = map(sin((d) * 0.03 - fra…