Published
Edited
Sep 22, 2020
function boil(amount=128, time=128, heat=0) {
let liquid = []
let state = []
let step = heat
for(let i = 0; i<amount; i++) {
liquid.push(Math.random() > 0 ? Math.random() : 0 )
}
// liquid.sort().reverse()
for(let t = 0; t<time; t++) {
let totalHeat = liquid.reduce( (x,y)=>x+y )
//liquid[0] = (((liquid[liquid.length-1] + liquid[0] + liquid[1]) / 3) + heat) %1
for(let atom=1; atom<liquid.length-1; atom++) {
liquid[atom] = (((liquid[atom-1] + liquid[atom] + liquid[atom+1]) / 3) + heat) %1
}
//liquid[liquid.length-1] = (((liquid[0] + liquid[liquid.length-1] + liquid[liquid.length-2]) / 3) + heat) %1
//liquid.sort()
state.push({ liquid: liquid.map( (x)=>x/totalHeat).slice(), totalHeat: totalHeat } )
//heat+= step
//heat+=0.1
}
return state
}
stages = boil(128,512,0.002)
{
let dc,canvas;
let height=900
let width=900
if (this) canvas=this,dc = canvas.getContext("2d");
else {
dc = DOM.context2d(width, height);
canvas = dc.canvas;
dc.fillStyle = '#000';
dc.fillRect(0, 0, width, height);
}
dc.fillStyle = '#000';
dc.fillRect(0, 0, width, height);
let dropHeight = height / stages.length
for( let t=0; t<stages.length; t++) {
var pool = stages[t].liquid
let poolSize = pool.length
//pool[ Math.floor( pool.length ) ] = Math.random()/pool.length
var totalHeat = stages[t].totalHeat
var dropWidth= Math.floor( width / (pool.length-1) )
console.log(width, dropWidth)
for( let drop=0; drop<poolSize; drop++ ) {
let droplet = pool[drop] * totalHeat
let alpha = droplet // droplet
//let heat = droplet*360
//let color="hsla(" + Math.floor(heat) + "," +
// 50 + "%," + 50 + "%," + alpha + ")"
let average = 1/pool.length * totalHeat
let r = droplet < average ? 255 *droplet : 0
let g = droplet > average ? 255 *droplet : 0
let b = droplet>.99 ? 255 : 0
dc.fillStyle = `rgba(${r},${g},${b}, ${alpha})`//red' // 'hsla( 180, 100, 100, 0.5)'
//dc.fillStyle = color // `hsla(${heat}, 100, 80, ${alpha})`//red' // 'hsla( 180, 100, 100, 0.5)'
let x = drop*dropWidth
let y = dropHeight*t
dc.fillRect( x,y,
dropWidth,dropHeight)
//dc.fill()
}
}
yield canvas
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
