読者です 読者をやめる 読者になる 読者になる

Daily Creative Coding

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

歪んだパーリンノイズ

/** * distorted perline noise * * @author aadebdeb * @date 2017/03/05 */ function keyPressed(){ saveCanvas("image.jpg", "jpg"); } function setup() { createCanvas(windowWidth, windowHeight); mousePressed(); } function mousePressed() { backg…

円の交点

/** * intersection points of circles * * @author aadebdeb * @date 2017/03/04 */ var circles; function setup() { createCanvas(windowWidth, windowHeight); circles = []; for (var i = 0; i < 30; i++) { circles.push(new Circle()); } } function …

三角形の色の流れ

/** * triangle color stream # 2 * * @author aadebdeb * @date 2017/03/03 */ function setup() { createCanvas(windowWidth, windowHeight); frameRate(20); } function draw() { background(240); var r = 150; var step = 15; var num = 20; var col = …

三角形の色のストリーム

/** * triangle color stream * * @author aadebdeb * @date 2017/03/02 */ function setup() { createCanvas(windowWidth, windowHeight); frameRate(5); } function draw() { background(64); var r = 150; var step = 50; var num = 10; var col = [ colo…

二重の輪

/** * double ring * * @author aadebdeb * @date 2017/03/01 */ function setup() { createCanvas(windowWidth, windowHeight); noStroke(); } function draw() { background(247, 248, 218); translate(width / 2, height / 2); var num = 20; var angStep…

filter(BLUR)で霞んでいく線

/** * blurred line * * @author aadebdeb * @date 2017/02/28 */ var c1, c2, cl, clv; var tx, ty, vx, vy; function setup() { createCanvas(300, 300); frameRate(3); strokeWeight(1); initialize(); } function mousePressed() { initialize(); } func…

filter(ERODE)で削られていくリング

/** * eroded ring * * @author aadebdeb * @date 2017/02/27 */ var particles; function setup() { createCanvas(500, 300); frameRate(3); particles = []; for (var i = 0; i < 1000; i++) { particles.push(new Particle()); } background(0); noStroke…

filter(DILATE)でオブジェクトを徐々に小さくする

/** * dilating background * * @author aadebdeb * @date 2017/02/26 */ function setup() { createCanvas(500, 500); colorMode(HSB, 360, 100, 100); background(0, 0, 100); } function draw() { noStroke(); if (random(1) < 0.8) { fill(random(360), …

線の帯

/** * line belts * * @author aadebdeb * @date 2017/02/25 */ var posW = 0; var posH = 0; var posVW; var posVH; var posAW; var posAH; var numY = 50; var intervalH; var posAWOffset, posAHOffset; var stColor; function setup() { createCanvas(wi…

光の束

/** * fiber lights * * @author aadebdeb * @date 2017/02/24 */ function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 255); frameRate(10); background(0, 100, 0); } function draw() { blendMode(BLEND); fill(…

円形に切り取られた空

/** * sky ball * * @author aadebdeb * @date 2017/02/23 */ var canvas; function setup() { canvas = createCanvas(500, 500); } function draw() { background(255); noStroke(); fill(0, 130, 200); ellipse(width / 2, height / 2, width, height); va…

shearXで歪められた市松模様

/** * sheared squares * * @author aadebdeb * @date 2017/02/22 */ var speed; function setup() { createCanvas(windowWidth, windowHeight); frameRate(15); rectMode(CENTER); speed = 0; } function draw() { var pspeed = speed; speed = mouseX - pm…

二点透視図法

/** * two-point perspective * * @author aadebdeb * @date 2017/02/21 */ function setup() { createCanvas(windowWidth, windowHeight); background(255); stroke(200); strokeWeight(1); frameRate(1); } function draw() { var w = random(width / 8, w…

重なる円と四角

/** * overlayed circles and triangles * * @author aadebdeb * @date 2017/02/20 */ var bgColor; var circleColor; var triangleColor; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100); frameRate(30); noS…

重なるCMYの円

/** * interlapping CMY circles * * @author aadebdeb * @date 2017/02/19 */ var colors; var isDarkest = true; function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); noStroke(); colors = [ color(255, 255, 0), color(255, 0,…

瞬く三角形の光

/** * fragile triangles * * @author aadebdeb * @date 2017/02/18 */ var particles; var fillColors; var nOffsetX, nOffsetY, nOffsetSize; var nScale = 0.001; function setup() { createCanvas(windowWidth, windowHeight); nOffsetX = createVector(…

三角形の鳥群

/** * triangle birds * * @author aadebdeb * @date 2017/02/17 */ var particles; var fillColors; function setup() { createCanvas(windowWidth, windowHeight); fillColors = [ color(113, 199, 209), color(212, 211, 202), color(230, 26, 105) ]; fr…

三角形でマスキングテープ風スケッチ

/** * triangle tapes * * @author aadebdeb * @date 2017/02/16 */ var particles; var bgColor; var fillColors; function setup() { createCanvas(windowWidth, windowHeight); frameRate(10); bgColor = color(254, 247, 242); fillColors = [ color(240…

広がる縞々の円

/** * expanding circular stripes * * @author aadebdeb * @date 2017/02/15 */ var circles = []; var isWhite = true; function setup() { createCanvas(windowWidth, windowHeight); frameRate(10); noStroke(); } function draw() { background(255); v…

blendMode(DIFFERENCE)で干渉する縞

/** * 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));…

テクノ・ライト

/** * 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…

ひだひだのリング

/** * 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…

波打つ花

/** * 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 /…

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

/** * 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…

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

/* * 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でドロネー三角形分割

/* * 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 …

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

/* * 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()でグリッチっぽくする

/* * 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()を使う

/* * 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…

ねじれたライン

/* * 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基本図形

/* * 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でリズムマシン

/* * 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;…

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

/* * 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でランダムに音を鳴らす

/* * 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.…

パーリンノイズの層

/* * 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)]…

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

/* * 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…

光の流れ

/* * 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…

誘引する流れ

/* * 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…

球の上を動く円

/** * circles moving on sphere * * @author aa_debdeb * @date 2017/01/15 */ ArrayList<Circle> circles; void setup(){ size(640, 640); circles = new ArrayList<Circle>(); for(int i = 0; i < 30; i++){ circles.add(new Circle()); } } void draw(){ background(255)</circle></circle>…