User:Lbattich/canvas experiments: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
The idea is to create a webpage that would generate abstract images, inspired in the proun/suprematist works of El Lissitzky. | The idea is to create a webpage that would generate abstract images, inspired in the proun/suprematist works of El Lissitzky. such as this one: | ||
The tests are pretty far from that goal yet, but hey, the goal is not quite the important here perhaps... | The tests are pretty far from that goal yet, but hey, the goal is not quite the important here perhaps... | ||
Javascript section of the source code: | == test 1 == | ||
* [http://lucasbattich.com/tests/proun01.html Proun experiment 1] | |||
*Javascript section of the source code: | |||
<code> | <code> | ||
| Line 23: | Line 29: | ||
four(); | four(); | ||
} | } | ||
</code> | |||
<code> | |||
//choose btw different shapes | //choose btw different shapes | ||
function choose() { | function choose() { | ||
| Line 32: | Line 39: | ||
else if (numb==3){four()} | else if (numb==3){four()} | ||
} | } | ||
</code> | |||
<code> | |||
//functions: | //functions: | ||
//create a 4 sided shape: | //create a 4 sided shape: | ||
function four() | function four() | ||
{ | { | ||
| Line 62: | Line 69: | ||
ctx.fill(); | ctx.fill(); | ||
} | } | ||
</code> | |||
<code> | |||
//pick a random colour | //pick a random colour | ||
function colourme() | function colourme() | ||
Revision as of 15:59, 23 September 2014
The idea is to create a webpage that would generate abstract images, inspired in the proun/suprematist works of El Lissitzky. such as this one:
The tests are pretty far from that goal yet, but hey, the goal is not quite the important here perhaps...
test 1
- Javascript section of the source code:
var x=document.getElementById("proun"); //declare global var x for canvas
var y1,y2,y3,x1,m1;
//var i=0;
var ctx=x.getContext("2d");
window.onload = function(){start();setInterval(function(){choose()},700)};
function start()
{
x.width=window.innerWidth-30;
x.height=window.innerHeight-30;
ctx.fillStyle=colourme()+"1)"; //first colour
ctx.fillRect(0,0,x.width,x.height);
ctx.fill();
four();
}
//choose btw different shapes
function choose() {
var numb=Math.floor(Math.random()*4);
if (numb==0){four()}
else if (numb==1){four()}
else if (numb==2){four()}
else if (numb==3){four()}
}
//functions:
//create a 4 sided shape:
function four()
{
var x4,y4;
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.beginPath();
ctx.moveTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
y4=Math.floor((x.height+1)*Math.random());
x4=Math.floor((x.width+1)*Math.random());
ctx.lineTo(x4,y4);
ctx.closePath();
var grd=ctx.createLinearGradient(x.width/2,y4,x4,x.height);
grd.addColorStop(0,colourme()+"1)");
grd.addColorStop(1,colourme()+"1)");
ctx.fillStyle=grd;
ctx.fill();
}
//pick a random colour
function colourme()
{
var a = Math.floor(256*Math.random());
var b = Math.floor(256*Math.random());
var c = Math.floor(256*Math.random());
var colour = "rgba("+a+","+b+","+c+",";
return colour;
}