My Tech with serving internet meals.: Drawing virtual grass in self drawn shapes (shapes to code with added tufts) (UPDATED 23.MAY 2022) DOES NOT WORK, BUT GREAT IDEA.

add https://threejs.org/ threex.grass.js

more - https://github.com/jeromeetienne/threex.grass#:~:text=grass%20is%20a%20three.,Blades%20of%20Waving%20Grass%22%20GPUGem.

WHAT SHOULD BE IMPLEMENTED - ALL NEEDED FORMS (RECTANGULAR, CIRCLE), AS MANY SHAPES AS POSSIBLE.

my code example of drawing lines in javascript - https://paste-bin.xyz/56557

how idea will be implemented - getting all points on line in array, use them as limits for "tufts" used in code on github.

here is pastebin to following code - https://pastebin.pl/view/ecce6d36

<html>

<head>

<title>Draw a rectangular shape</title>

</head>

<p>Drag to draw lines</p>

<br/>

<button id="clear">Clear Canvas</button>

<button onclick="spitoutcode();" type="button">Spitout code!</button>

<!--

<p id="p1">Tutorix</p>

<p id="p2">Tutorialspoint</p>

-->

</div>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();

var offsetX = canvasOffset.left;

var offsetY = canvasOffset.top;

var storedLines = [];

var startX = 0;

var startY = 0;

var isDown;

console.log("stored", storedLines);

//let counter = 0;

//for (let i = 0; i < storage.length; i++) {

//if (storage[i].status === '0') counter++;

//}

//var animals = [];

//setInterval(function (){

//console.log(storedLines.lenght);

//console.log(storedLines);

//}, 300);

//for(i=0; i<storedLines.lenght; i++){

//const kopa = animals.push(storedLines[i]);

//console.log("zbisj", kopa);

//}

//console.log(storedLines);

var x = [];

console.log(x);

ctx.strokeStyle = "orange";

ctx.lineWidth = 3;

$("#canvas").mousedown(function(e) {

handleMouseDown(e);

});

$("#canvas").mousemove(function(e) {

handleMouseMove(e);

});

$("#canvas").mouseup(function(e) {

handleMouseUp(e);

});

$("#clear").click(function() {

storedLines.length = 0;

redrawStoredLines();

});

function handleMouseDown(e) {

var mouseX = parseInt(e.clientX - offsetX);

var mouseY = parseInt(e.clientY - offsetY);

isDown = true;

const lastItem = storedLines.slice(-1).pop();

var count = storedLines. length;

if(lastItem){

if(count > 0){

startX = lastItem.x2;

startY = lastItem.y2;

} else {

startX = mouseX;

startY = mouseY;

}

} else {

startX = mouseX;

startY = mouseY;

}

console.log("x", startX);

console.log("y", startY);

}

function handleMouseMove(e) {

if (!isDown) {

return;

}

redrawStoredLines();

var mouseX = parseInt(e.clientX - offsetX);

var mouseY = parseInt(e.clientY - offsetY);

// draw the current line

ctx.beginPath();

ctx.moveTo(startX, startY);

ctx.lineTo(mouseX, mouseY);

ctx.stroke();

}

var list = [];

var list2 = [];

function handleMouseUp(e) {

isDown = false;

var mouseX = parseInt(e.clientX - offsetX);

var mouseY = parseInt(e.clientY - offsetY);

var cipars;

if(mouseY + 9 == storedLines[0] ){

cipars = 9;

}

if(mouseY + 8 == storedLines[0]){

cipars = 8;

}

if(mouseY + 7 == storedLines[0]){

cipars = 7;

}

if(mouseY + 6 == storedLines[0]){

cipars = 6;

}

if(mouseY + 5 == storedLines[0]){

cipars = 5;

}

if(mouseY + 4 == storedLines[0]){

cipars = 4;

}

if(mouseY + 3 == storedLines[0]){

cipars = 3;

}

if(mouseY + 2 == storedLines[0]){

cipars = 2;

}

if(mouseY + 1 == storedLines[0]){

cipars = 1;

}

////ja mouse up ir tuvu pirmajam elementam pieskaistīt velvienu līniju kas savienos punktus kurus šķir 2 punkti

if(mouseY + 9 == storedLines[0] || mouseY + 8 == storedLines[0] || mouseY + 7 == storedLines[0] ||

mouseY + 6 == storedLines[0] || mouseY + 5 == storedLines[0] || mouseY + 4 == storedLines[0] ||

mouseY + 3 == storedLines[0] || mouseY + 2 == storedLines[0] || mouseY + 1 == storedLines[0]){

list2.push(mouseY + cipars);

}

//}

var cipars2;

if(mouseX + 9 == storedLines[0] ){

cipars = 9;

}

if(mouseX + 8 == storedLines[0]){

cipars = 8;

}

if(mouseX + 7 == storedLines[0]){

cipars = 7;

}

if(mouseX + 6 == storedLines[0]){

cipars = 6;

}

if(mouseX + 5 == storedLines[0]){

cipars = 5;

}

if(mouseX + 4 == storedLines[0]){

cipars = 4;

}

if(mouseX + 3 == storedLines[0]){

cipars = 3;

}

if(mouseX + 2 == storedLines[0]){

cipars = 2;

}

if(mouseX + 1 == storedLines[0]){

cipars = 1;

}

////ja mouse up ir tuvu pirmajam elementam pieskaistīt velvienu līniju kas savienos punktus kurus šķir 2 punkti

if(mouseX + 9 == storedLines[0] || mouseX + 8 == storedLines[0] || mouseX + 7 == storedLines[0] ||

mouseX + 6 == storedLines[0] || mouseX + 5 == storedLines[0] || mouseX + 4 == storedLines[0] ||

mouseX + 3 == storedLines[0] || mouseX + 2 == storedLines[0] || mouseX + 1 == storedLines[0]){

list.push(mouseX + cipars);

}

//}

storedLines.push({

x1: startX,

y1: startY,

x2: mouseX,

y2: mouseY

});

for (var i = startX; i <= mouseX; i++) {

list.push(i);

}

for (var i = startY; i <= mouseY; i++) {

list2.push(i);

}

redrawStoredLines();

}

console.log("list" , list);

console.log("list2" , list2);

function spitoutcode(){

//foreach line create numbers in array, for every array element create html element and add content to it.

var len= storedLines. length;

//var list = storedLines;

//var test = 0;

for(i2=0; i2 < 25; i2++){

if(i2 != 0){

tit = "list" + i2;

} else {

tit = "list";

}

//const div = document.createElement('listes');

//const div2 = document.createElement('listes2');

//div.className = 'row';

//div2.className = 'row';

//skaitļus no 1 līdz 6 pēc tam no 6 līdz 12 un so on

//div = '<p id="' + tit + '"></p>';

//div2 = '<p id="' + tit2 + '"></p>';

//document.getElementById('listes').appendChild(div);

//document.getElementById('listes2').appendChild(div2);

var tag = document.createElement("p");

tag.setAttribute("id", tit);

//var tag2 = document.createElement("p");

//tag2.setAttribute("id", tit2);

var element = document.getElementById("new");

element.appendChild(tag);

//element.appendChild(tag2);

//var test++;

}

//creates html elements

for(i2=0; i2 < 71; i2++){

if(i2 != 0){

tit2 = "p" + i2;

} else {

tit2 = "p";

}

//const div = document.createElement('listes');

//const div2 = document.createElement('listes2');

//div.className = 'row';

//div2.className = 'row';

//skaitļus no 1 līdz 6 pēc tam no 6 līdz 12 un so on

//div = '<p id="' + tit + '"></p>';

//div2 = '<p id="' + tit2 + '"></p>';

//document.getElementById('listes').appendChild(div);

//document.getElementById('listes2').appendChild(div2);

//var tag = document.createElement("p");

//tag.setAttribute("id", tit);

var tag2 = document.createElement("p");

tag2.setAttribute("id", tit2);

var element = document.getElementById("new");

//element.appendChild(tag);

element.appendChild(tag2);

//var test++;

}

//creates html elements

//if(test > 0)

document.getElementById("list" + 1).innerHTML = " // var list =[";

document.getElementById("list" + 2).innerHTML = list;

document.getElementById("list" + 3).innerHTML = "];";

document.getElementById("list" + 4).innerHTML = " // var list2 =[";

document.getElementById("list" + 5).innerHTML = list2;

document.getElementById("list" + 6).innerHTML = "];";

document.getElementById("list" + 7).innerHTML = " // var list3 =[";

document.getElementById("list" + 8).innerHTML = list;

document.getElementById("list" + 9).innerHTML = "];";

document.getElementById("list" + 10).innerHTML = " // var list4 =[";

document.getElementById("list" + 11).innerHTML = list2;

document.getElementById("list" + 12).innerHTML = "];";

document.getElementById("list" + 13).innerHTML = " // var list5 =[";

document.getElementById("list" + 14).innerHTML = list;

document.getElementById("list" + 15).innerHTML = "];";

document.getElementById("list" + 16).innerHTML = " // var list6 =[";

document.getElementById("list" + 17).innerHTML = list2;

document.getElementById("list" + 18).innerHTML = "];";

document.getElementById("list" + 19).innerHTML = " // var list7 =[";

document.getElementById("list" + 20).innerHTML = list;

document.getElementById("list" + 21).innerHTML = "];";

document.getElementById("list" + 22).innerHTML = " // var list8 =[";

document.getElementById("list" + 23).innerHTML = list2;

document.getElementById("list" + 24).innerHTML = "];";

document.getElementById("p" + 1).innerHTML = " //var nTufts = 15000";

document.getElementById("p" + 2).innerHTML = " ///var positions = new Array(nTufts) ";

document.getElementById("p" + 3).innerHTML = " //for(var i = 0; i < nTufts; i++){";

document.getElementById("p" + 4).innerHTML = " //var position = new THREE.Vector3()";

document.getElementById("p" + 5).innerHTML = " //position.x = (Math.random()-0.5)*20";

document.getElementById("p" + 6).innerHTML = " //position.z = (Math.random()-0.5)*20";

document.getElementById("p" + 7).innerHTML = " //if(list.includes(position.x) or list2.includes(position.y)){";

document.getElementById("p" + 8).innerHTML = " //positions[i] = position";

document.getElementById("p" + 9).innerHTML = " //};";

document.getElementById("p" + 10).innerHTML = " //}";

document.getElementById("p" + 11).innerHTML = " //}";

document.getElementById("p" + 12).innerHTML = " //var mesh = THREEx.createGrassTufts(positions)";

document.getElementById("p" + 13).innerHTML = " //scene.add(mesh)";

// load the texture

document.getElementById("p" + 14).innerHTML = "var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass01.png'";

document.getElementById("p" + 15).innerHTML = "var material = mesh.material";

document.getElementById("p" + 16).innerHTML = "material.map = THREE.ImageUtils.loadTexture(textureUrl)";

document.getElementById("p" + 17).innerHTML = "material.alphaTest = 0.7";

document.getElementById("p" + 18).innerHTML = " //var nTufts = 15000";

document.getElementById("p" + 19).innerHTML = " ///var positions = new Array(nTufts) ";

document.getElementById("p" + 20).innerHTML = " //for(var i = 0; i < nTufts; i++){";

document.getElementById("p" + 21).innerHTML = " //var position = new THREE.Vector3()";

document.getElementById("p" + 22).innerHTML = " //position.x = (Math.random()-0.5)*20";

document.getElementById("p" + 23).innerHTML = " //position.z = (Math.random()-0.5)*20";

document.getElementById("p" + 24).innerHTML = " //if(list3.includes(position.x) or list4.includes(position.y)){";

document.getElementById("p" + 25).innerHTML = " //positions[i] = position";

document.getElementById("p" + 26).innerHTML = " //};";

document.getElementById("p" + 27).innerHTML = " //}";

document.getElementById("p" + 28).innerHTML = " //}";

document.getElementById("p" + 29).innerHTML = " //var mesh = THREEx.createGrassTufts(positions)";

document.getElementById("p" + 30).innerHTML = " //scene.add(mesh)";

// load the texture

document.getElementById("p" + 31).innerHTML = "var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass02.png'";

document.getElementById("p" + 32).innerHTML = "var material = mesh.material";

document.getElementById("p" + 33).innerHTML = "material.map = THREE.ImageUtils.loadTexture(textureUrl)";

document.getElementById("p" + 34).innerHTML = "material.alphaTest = 0.7";

document.getElementById("p" + 35).innerHTML = " //var nTufts = 15000";

document.getElementById("p" + 36).innerHTML = " ///var positions = new Array(nTufts) ";

document.getElementById("p" + 37).innerHTML = " //for(var i = 0; i < nTufts; i++){";

document.getElementById("p" + 38).innerHTML = " //var position = new THREE.Vector3()";

document.getElementById("p" + 39).innerHTML = " //position.x = (Math.random()-0.5)*20";

document.getElementById("p" + 40).innerHTML = " //position.z = (Math.random()-0.5)*20";

document.getElementById("p" + 41).innerHTML = " //if(list5.includes(position.x) or list6.includes(position.y)){";

document.getElementById("p" + 42).innerHTML = " //positions[i] = position";

document.getElementById("p" + 43).innerHTML = " //};";

document.getElementById("p" + 44).innerHTML = " //}";

document.getElementById("p" + 45).innerHTML = " //}";

document.getElementById("p" + 46).innerHTML = " //var mesh = THREEx.createGrassTufts(positions)";

document.getElementById("p" + 47).innerHTML = " //scene.add(mesh)";

// load the texture

document.getElementById("p" + 48).innerHTML = "var material = mesh.material";

document.getElementById("p" + 49).innerHTML = "var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers01.png'";

document.getElementById("p" + 50).innerHTML = "material.map = THREE.ImageUtils.loadTexture(textureUrl)";

document.getElementById("p" + 51).innerHTML = "material.emissive.set(0x888888)";

document.getElementById("p" + 52).innerHTML = "material.alphaTest = 0.7";

document.getElementById("p" + 53).innerHTML = " //var nTufts = 15000";

document.getElementById("p" + 54).innerHTML = " ///var positions = new Array(nTufts) ";

document.getElementById("p" + 55).innerHTML = " //for(var i = 0; i < nTufts; i++){";

document.getElementById("p" + 56).innerHTML = " //var position = new THREE.Vector3()";

document.getElementById("p" + 57).innerHTML = " //position.x = (Math.random()-0.5)*20";

document.getElementById("p" + 58).innerHTML = " //position.z = (Math.random()-0.5)*20";

document.getElementById("p" + 59).innerHTML = " //if(list7.includes(position.x) or list8.includes(position.y)){";

document.getElementById("p" + 60).innerHTML = " //positions[i] = position";

document.getElementById("p" + 61).innerHTML = " //};";

document.getElementById("p" + 62).innerHTML = " //}";

document.getElementById("p" + 63).innerHTML = " //}";

document.getElementById("p" + 64).innerHTML = " //var mesh = THREEx.createGrassTufts(positions)";

document.getElementById("p" + 65).innerHTML = " //scene.add(mesh)";

// load the texture

document.getElementById("p" + 66).innerHTML = "var material = mesh.material";

document.getElementById("p" + 67).innerHTML = "var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers02.png'";

document.getElementById("p" + 68).innerHTML = "material.map = THREE.ImageUtils.loadTexture(textureUrl)";

document.getElementById("p" + 69).innerHTML = "material.emissive.set(0x888888)";

document.getElementById("p" + 70).innerHTML = "material.alphaTest = 0.7";

}

//spitoutcode();

function redrawStoredLines() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

if (storedLines.length == 0) {

return;

}

// redraw each stored line

for (var i = 0; i < storedLines.length; i++) {

ctx.beginPath();

ctx.moveTo(storedLines[i].x1, storedLines[i].y1);

ctx.lineTo(storedLines[i].x2, storedLines[i].y2);

ctx.stroke();

}

</script>

</body>

</html>

the code that draws tufts of grass has this

for(var i = 0; i < nTufts; i++){

var position = new THREE.Vector3()

position.x = (Math.random()-0.5)*20

position.z = (Math.random()-0.5)*20

positions[i] = position

}

it would be cool if I could draw some line in code up in the article and use the array of drawn points to limit positions of tufts.

<!DOCTYPE html>

var renderer = new THREE.WebGLRenderer({

antialias : true

});

renderer.setSize( window.innerWidth, window.innerHeight );

renderer.setClearColor( 'lightblue', 1 );

document.body.appendChild( renderer.domElement );

var onRenderFcts= [];

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 0.01, 100);

camera.position.z = 1;

camera.position.set(0, 1000, 0);

setInterval(function (){

//console.log("x", camera.position.x);

//console.log("y", camera.position.y);

//console.log("z", camera.position.z);

camera.position.set(0, 50, 0);

}, 300);

//////////////////////////////////////////////////////////////////////////////////

// set 3 point lighting //

//////////////////////////////////////////////////////////////////////////////////

;(function(){

// add a ambient light

var light = new THREE.AmbientLight( 0x020202 )

scene.add( light )

// add a light in front

var light = new THREE.DirectionalLight('white', 1)

light.position.set(0.5, 0.5, 2)

scene.add( light )

// add a light behind

var light = new THREE.DirectionalLight('white', 0.75)

light.position.set(-0.5, -0.5, -2)

scene.add( light )

})()

//// add a light behind

//var light = new THREE.DirectionalLight('white', 1)

//// var light = new THREE.PointLight('white', 2)

//scene.add( light )

//light.position.y= 1

//onRenderFcts.push(function(delta, now){

//var angle = now*Math.PI*2 * 0.2

//light.position.x= Math.cos(angle)*3

//light.position.y= Math.sin(angle)*3

//// light.position.z= Math.sin(angle)*3

//})

////////////////////////////////////////////////////////////////////////////////////

//// grass ground šito vajag figūrveidā //

////////////////////////////////////////////////////////////////////////////////////

//var textureUrl = 'images/grasslight-small.jpg'

//var texture = THREE.ImageUtils.loadTexture(textureUrl);

//texture.wrapS = THREE.RepeatWrapping;

//texture.wrapT = THREE.RepeatWrapping;

//texture.repeat.x= 10

//texture.repeat.y= 10

//texture.anisotropy = renderer.getMaxAnisotropy()

//// build object3d

//var geometry = new THREE.PlaneGeometry(20, 20)

//var material = new THREE.MeshPhongMaterial({

//map : texture,

//emissive: 'green',

//})

//var object3d = new THREE.Mesh(geometry, material)

//object3d.rotateX(-Math.PI/2)

//scene.add(object3d)

////////////////////////////////////////////////////////////////////////////////////

//// comment //

////////////////////////////////////////////////////////////////////////////////////

//var nTufts = 15000

//var positions = new Array(nTufts)

//for(var i = 0; i < nTufts; i++){

//var position = new THREE.Vector3()

//position.x = (Math.random()-0.5)*20

//position.z = (Math.random()-0.5)*20

//positions[i] = position

//}

//var mesh = THREEx.createGrassTufts(positions)

//scene.add(mesh)

//// load the texture

//var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass01.png'

//var material = mesh.material

//material.map = THREE.ImageUtils.loadTexture(textureUrl)

//material.alphaTest = 0.7

////////////////////////////////////////////////////////////////////////////////////

//// comment //

////////////////////////////////////////////////////////////////////////////////////

//var nTufts = 5000

//var positions = new Array(nTufts)

//for(var i = 0; i < nTufts; i++){

//var position = new THREE.Vector3()

//position.x = (Math.random()-0.5)*20

//position.z = (Math.random()-0.5)*20

//positions[i] = position

//}

//var mesh = THREEx.createGrassTufts(positions)

//scene.add(mesh)

//// load the texture

//var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass02.png'

//var material = mesh.material

//material.map = THREE.ImageUtils.loadTexture(textureUrl)

//material.alphaTest = 0.7

////////////////////////////////////////////////////////////////////////////////////

//// comment //

////////////////////////////////////////////////////////////////////////////////////

//var nTufts = 100

//var positions = new Array(nTufts)

//for(var i = 0; i < nTufts; i++){

//var position = new THREE.Vector3()

//position.x = (Math.random()-0.5)*20

//position.z = (Math.random()-0.5)*20

//positions[i] = position

//}

//var mesh = THREEx.createGrassTufts(positions)

//scene.add(mesh)

//// load the texture

//var material = mesh.material

//var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers01.png'

//material.map = THREE.ImageUtils.loadTexture(textureUrl)

//material.emissive.set(0x888888)

//material.alphaTest = 0.7

////////////////////////////////////////////////////////////////////////////////////

//// comment //

////////////////////////////////////////////////////////////////////////////////////

//var nTufts = 100

//var positions = new Array(nTufts)

//for(var i = 0; i < nTufts; i++){

//var position = new THREE.Vector3()

//position.x = (Math.random()-0.5)*20

//position.z = (Math.random()-0.5)*20

//positions[i] = position

//}

//var mesh = THREEx.createGrassTufts(positions)

//scene.add(mesh)

//// load the texture

//var material = mesh.material

//var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers02.png'

//material.map = THREE.ImageUtils.loadTexture(textureUrl)

//material.emissive.set(0x888888)

//material.alphaTest = 0.7

var list =[

275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614,615,616,617,618,619,620,621,622,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662,663,664,665,666,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700,701,702,703,704,705,706,707,708,709,710,711,712,713,714,715,716,717,718,719,720,721,722,723,724,725,726,727,728

];

var list2 =[

101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,100,101,102

];

var list3 =[

];

var list4 =[

];

var list5 =[

];

var list6 =[

];

var list7 =[

];

var list8 =[

];

var nTufts = 15000

var positions = new Array(nTufts)

for(var i = 0; i < nTufts; i++){

var position = new THREE.Vector3()

position.x = (Math.random()-0.5)*20

position.z = (Math.random()-0.5)*20

//console.log("liste", list);

//console.log("pozicija", position.x);

var roundedString = position.x.toFixed(0);

var roundedString2 = position.y.toFixed(0);

console.log("string", typeof(roundedString));

console.log("array", typeof(list));

listar = Object.values(list);

listar2 = Object.values(list2);

//position.x should be without commas

console.log("array99", listar);

if(listar.includes(roundedString) == false || listar2.includes(roundedString2 == false)){

console.log("notiek");

positions[i] = position

};

}

console.log("dope", positions);

var mesh = THREEx.createGrassTufts(positions)

scene.add(mesh)

var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass01.png'

var material = mesh.material

material.map = THREE.ImageUtils.loadTexture(textureUrl)

material.alphaTest = 0.7

var nTufts = 15000

var positions = new Array(nTufts)

for(var i = 0; i < nTufts; i++){

var position = new THREE.Vector3()

position.x = (Math.random()-0.5)*20

position.z = (Math.random()-0.5)*20

var roundedString3 = position.x.toFixed(0);

var roundedString4 = position.y.toFixed(0);

console.log("string", roundedString);

listar3 = Object.values(list3);

listar4 = Object.values(list4);

if(listar3.includes(roundedString3) == false || listar4.includes(roundedString4) == false){

positions[i] = position

};

}

var mesh = THREEx.createGrassTufts(positions)

scene.add(mesh)

var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass02.png'

var material = mesh.material

material.map = THREE.ImageUtils.loadTexture(textureUrl)

material.alphaTest = 0.7

var nTufts = 15000

var positions = new Array(nTufts)

for(var i = 0; i < nTufts; i++){

var position = new THREE.Vector3()

position.x = (Math.random()-0.5)*20

position.z = (Math.random()-0.5)*20

var roundedString5 = position.x.toFixed(0);

var roundedString6 = position.y.toFixed(0);

listar5 = Object.values(list);

listar6 = Object.values(list2);

if(listar5.includes(roundedString5) == false || listar6.includes(roundedString6) == false){

positions[i] = position

};

}

var mesh = THREEx.createGrassTufts(positions)

scene.add(mesh)

var material = mesh.material

var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers01.png'

material.map = THREE.ImageUtils.loadTexture(textureUrl)

material.emissive.set(0x888888)

material.alphaTest = 0.7

var nTufts = 15000

var positions = new Array(nTufts)

for(var i = 0; i < nTufts; i++){

var position = new THREE.Vector3()

position.x = (Math.random()-0.5)*20

position.z = (Math.random()-0.5)*20

var roundedString7 = position.x.toFixed(0);

var roundedString8 = position.y.toFixed(0);

listar7 = Object.values(list);

listar8 = Object.values(list2);

if(listar7.includes(roundedString7) == false || listar8.includes(roundedString8) == false){

positions[i] = position

};

}

var mesh = THREEx.createGrassTufts(positions)

scene.add(mesh)

var material = mesh.material

var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers02.png'

material.map = THREE.ImageUtils.loadTexture(textureUrl)

material.emissive.set(0x888888)

material.alphaTest = 0.7

//////////////////////////////////////////////////////////////////////////////////

// Camera Controls //

//////////////////////////////////////////////////////////////////////////////////

var mouse = {x : 0, y : 0}

//document.addEventListener('mousemove', function(event){

//mouse.x = (event.clientX / window.innerWidth ) - 0.5

//mouse.y = (event.clientY / window.innerHeight) - 0.5

//}, false)

onRenderFcts.push(function(delta, now){

//camera.position.x += (mouse.x*2 - camera.position.x) * (delta*3)

//camera.position.y += (mouse.y*2 - camera.position.y) * (delta*3)

camera.lookAt( scene.position )

})

//////////////////////////////////////////////////////////////////////////////////

// render the scene //

//////////////////////////////////////////////////////////////////////////////////

onRenderFcts.push(function(){

renderer.render( scene, camera );

})

//////////////////////////////////////////////////////////////////////////////////

// loop runner //

//////////////////////////////////////////////////////////////////////////////////

var lastTimeMsec= null

requestAnimationFrame(function animate(nowMsec){

// keep looping

requestAnimationFrame( animate );

// measure time

lastTimeMsec = lastTimeMsec || nowMsec-1000/60

var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)

lastTimeMsec = nowMsec

// call each update function

onRenderFcts.forEach(function(onRenderFct){

onRenderFct(deltaMsec/1000, nowMsec/1000)

})

</script></body>

My Tech with serving internet meals.

piektdiena, 2022. gada 6. maijs

Drawing virtual grass in self drawn shapes (shapes to code with added tufts) (UPDATED 23.MAY 2022) DOES NOT WORK, BUT GREAT IDEA.

Nav komentāru:

Ierakstīt komentāru