# 【GLSL】溢れる光

See the Pen ambiguous light by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; // Simplex 4D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){retur…

# 【GLSL】アンビエント・ノイズ

See the Pen ambient noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return …

# 【GLSL】2次元のバリューノイズ

See the Pen 2D value noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) *…

# 【GLSL】2次元のホワイトノイズ

See the Pen 2D white noise by aadebdeb (@aadebdeb) on CodePen. precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43…

# 線の帯

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

# 二点透視図法

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

# 瞬く三角形の光

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

# テクノ・ライト

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

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

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

# 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…

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

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

# 明滅する四角形

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

# 脈動する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);…

# 線の下を動くもの

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

# 球の上を動く円

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

# 円の影

/** * shadow of circle * * @author aa_debdeb * @date 2017/01/13 */ void setup(){ size(640, 640); noStroke(); background(255, 255, 250); } void draw(){ translate(width / 2, height / 2); rotate(PI / 4); for(int i = 0; i < 2; i++){ float angl…

# 急にノイズが入るサイン波

/** * sine / noise * * @author aa_debdeb * @date 2017/01/09 */ void setup(){ size(640, 480); stroke(255, 255, 30); strokeWeight(2); noFill(); } void draw(){ background(0, 0, 20); float noiseRate = pow(abs(sin(frameCount * 0.01)), 150); beg…

# 昔のコンピュータの画面風スケッチ

/** * old computer display * * @author aa_debdeb * @date 2016/12/28 */ float time = 0; void setup(){ size(640, 480); frameRate(60); } void draw(){ background(0); if(frameCount % 4 != 0){ stroke(0, 150, 0); for(int h = 0; h < height; h += 4…

# サイン波を累乗する

/** * exponential sine tooth * * @author aa_debdeb * @date 2016/12/25 */ void setup(){ size(500, 500); noStroke(); } void draw(){ background(146, 250, 0); int[] powers = {2, 4, 10, 40}; color[] colors = {color(200), color(250, 0, 246), col…

# 四角形で塗りつぶす

/** * fill by rect * * @author aa_debdeb * @date 2016/12/22 */ float RECT_WIDTH = 150; PVector offset; void setup(){ size(500, 500); rectMode(CENTER); offset = new PVector(random(10000), random(10000)); background(220); } void draw(){ noSt…

# 不定形の輪っか

unshaped loops - OpenProcessing /** * unshaped loops * * @author aa_debdeb * @date 2016/11/06 */ float radius = 200; ArrayList<Loop> loops; void setup(){ size(640, 640); colorMode(HSB, 360, 100, 100); loops = new ArrayList<Loop>(); for(int i = 0; i < </loop></loop>…

# 積み重なった波

stacked tooth - OpenProcessing /** * stacked tooth * * @author aa_debdeb * @date 2016/10/29 */ color bg; color[] c; void setup(){ size(640, 480); colorMode(HSB, 360, 100, 100); noStroke(); mousePressed(); } void mousePressed(){ float sat =…

# 動く色の扇

/** * moving fan * * @author aa_debdeb * @date 2016/10/12 */ float y; float hue; void setup(){ size(320, 640); colorMode(HSB, 360, 100, 100); noStroke(); fill(0); background(0, 0, 100); y = height - 100; } void draw(){ fill(hue, 100, 100, …

# 踊る炎

/** * dancing flame * * @author aa_debdeb * @date 2016/10/10 */ PVector offset1, offset2; float scale = 0.01; color c1, c2; void setup(){ size(640, 640); noStroke(); offset1 = new PVector(random(10000), random(10000)); offset2 = new PVecto…

# 横線のラベル貼り

/** * transverse line labeling * * @author aa_debdeb * @date 2016/09/30 */ void setup(){ size(640, 640); frameRate(5); background(255); noStroke(); } void draw(){ translate(random(width), random(height)); rotate(random(TWO_PI)); float len …

# カラフル・タワー

/** * colorful towers * * @author aa_debdeb * @date 2016/09/29 */ float rectSize = 20; float hue; float h; void setup(){ size(640, 640); colorMode(HSB, 360, 100, 100); background(0, 0, 100); stroke(0, 0, 0); strokeWeight(1); h = 50; } void…

# 伸び縮みする腕

/** * expanding and contracting arms * * @author aa_debdeb * @date 2016/09/25 */ ArrayList<Float> radiouses; ArrayList<Float> angles; void setup(){ size(640, 640); stroke(230); strokeWeight(2); setCircles(); } void setCircles(){ radiouses = new ArrayList<Float></float></float></float>…

# 線のジャングル

/** * abstract jungle * * @author aa_debdeb * @date 2016/09/23 */ PVector loc; PVector vel; float theta; float len; int lineStep; color c; void setup(){ size(500, 500); background(143, 188, 143); strokeWeight(2); setMover(); } void mousePr…

# 火星の地表

/** * terrain of Mars * * @author aa_debdeb * @date 2016/09/21 */ int cellNum = 500; float cellSize = 1; float nScale = 0.03; float threshold = 0.015; PVector position; void setup(){ size(500, 500); noStroke(); position = new PVector(0, 0)…

# 惑星の地形

/** * terrain of planet * * @author aa_debdeb * @date 2016/09/19 */ int cellNum = 250; float cellSize = 2; float nScale = 0.03; float threshold = 0.015; PVector position; void setup(){ size(500, 500); noStroke(); position = new PVector(0, …

# 変形する四角形

/** * morphing quad * * @author aa_debdeb * @date 2016/09/17 */ float radious = 150; Particle[] particles; color c1, c2; void setup(){ size(640, 640); noStroke(); particles = new Particle[4]; for(int i = 0; i < 4; i++){ particles[i] = new …

# 渦

/** * eddy * * @author aa_debdeb * @date 2016/09/16 */ float dir; ArrayList<Particle> particles; void setup(){ size(640, 480); colorMode(HSB, 360, 100, 100); mousePressed(); } void mousePressed(){ background(random(360), random(30), random(100)); st</particle>…

# 重なる正方形

/** * overlayed squares * * @author aa_debdeb * @date 2016/09/15 */ ArrayList<Square> squares; void setup(){ size(500, 500); strokeWeight(5); colorMode(HSB, 360, 100, 100); mousePressed(); } void mousePressed(){ squares = new ArrayList<Square>(); for(int </square></square>…

# 奥行きのある二次元

/** * 2D with depth * * @author aa_debdeb * @date 2016/09/11 */ float MAX_DEPTH = 10000; float BOTTOM_WIDTH = 5; ArrayList<Circle> circles; void setup(){ size(500, 500); circles = new ArrayList<Circle>(); } void draw(){ background(255, 255, 240); translat</circle></circle>…

# 円からなる再帰的な木

/** * recursive tree of circles * * @author aa_debdeb * @date 2016/09/08 */ float MAX_RADIOUS = 100; float MIN_RADIOUS = 50; float MAX_CIRCLE = 80; float MIN_CIRCLE = 20; int MAX_DEPTH = 6; int BRANCH_NUM = 3; Node root; void setup(){ size…

# サーチライト

/** * searchlight * * @author aa_debdeb * @date 2016/09/03 */ ArrayList<Point> points; float rot = 0; void setup(){ size(500, 500); noStroke(); points = new ArrayList<Point>(); for(int i = 0; i < 5000; i++){ points.add(new Point()); } } void draw(){ bac</point></point>…

# 中心に集中する線

/** * lines to center * * @author aa_debdeb * @date 2016/08/28 */ ArrayList<Particle> particles; void setup(){ size(500, 500); colorMode(HSB, 360, 100, 100); particles = new ArrayList<Particle>(); strokeWeight(2); } void draw(){ background(0, 100, 0); transla</particle></particle>…

# ギリギリで重ならないように回転する円

/** * unoverlapped spining cirlces * * @author aa_debdeb * @date 2016/08/27 */ color bg; color col[]; ArrayList<Spin> spins; void setup(){ size(500, 500); noStroke(); colorMode(HSB, 360, 100, 100); initialize(); } void mousePressed(){ initialize</spin>…

# 重ならないように回転する球

/** * cycling of balls * * @author aa_debdeb * @date 2016/08/26 */ color bg; ArrayList<Spin> spins; void setup(){ size(500, 500); initialize(); } void mousePressed(){ initialize(); } void initialize(){ spins = new ArrayList<Spin>(); for(int i = 0; i <</spin></spin>…

# パーリンノイズを格子状に配置された四角形の大きさで可視化する

/** * cloud of rect * * @author aa_debdeb * @date 2016/08/23 */ float step = 5; PVector offset; void setup(){ size(800, 800); rectMode(CENTER); noStroke(); fill(0); offset = new PVector(random(10000), random(10000), random(10000)); } void …

# 降る雪

/** * snowfall * * @author aa_debdeb * @date 2016/08/16 */ float MIN_PARTICLE_DIAMETER = 2; float MAX_PARTICLE_DIAMETER = 7; float MAX_PARTICLE_VELOCITY_X = 0.5; float MAX_PARTICLE_VEL_VARIANT_X = 0.1; float MAX_PARTICLE_VELOCITY_Y = 0.5; …